### Basic kypi API Client Setup

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Demonstrates how to import and configure the kypi client with base URL and endpoint definitions. It shows how to define GET, POST, and parameterized GET requests and how to use the client to fetch data.

```ts
import { get, post, client } from 'kypi'

const api = client({
  baseUrl: 'https://startrek.example/api',
  endpoints: {
    starships: {
      list: get<void, Starship[]>('/starships'),
      get: get<void, Starship, { id: number }>('/starships/:id'),
      create: post<StarshipCreate, Starship>('/starships'),
    },
  },
})

// Usage
const starships = await api.starships.list().json()
const enterprise = await api.starships.get({ id: 1701 }).json()
const newStarship = await api.starships
  .create({
    name: 'USS Discovery',
    class: 'Crossfield',
    registry: 'NCC-1031',
  })
  .json()
```

--------------------------------

### kypi Installation

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Provides instructions for installing the kypi package using various package managers like bun, npm, and yarn.

```bash
bun add kypi
# or
npm install kypi
# or
yarn add kypi
```

--------------------------------

### React Example: Defining and Using Endpoints

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Provides a comprehensive React example demonstrating how to define multiple endpoints (GET, POST, DELETE) using Kypi's functions and then use them within a React component via the `createClientHook`.

```ts
import { del, get, post } from 'kypi'
import { createClientHook } from 'kypi/react'

const useApi = createClientHook({
  products: get<void, Array<{ id: number; title: string }>>('/products'),
  addProduct: post<{ title: string }, { id: number; title: string }>(
    '/products',
  ),
  deleteProduct: del<void, {}, { id: number }>('/products/:id'),
})

function App() {
  const api = useApi({ baseUrl: 'https://fakestoreapi.com' })
  // ...use api.products(), api.addProduct(), etc.
}
```

--------------------------------

### Defining kypi Endpoints

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Illustrates how to define API endpoints using kypi's helper functions like `get`, `post`, and `del`. It shows how to specify request methods, response types, and path parameters.

```ts
import { del, get, post, type EndpointGroup } from 'kypi'

const endpoints = {
  products: get<void, Array<{ id: number; title: string }>>('/products'),
  addProduct: post<{ title: string }, { id: number; title: string }>(
    '/products',
  ),
  deleteProduct: del<void, {}, { id: number }>('/products/:id'),
} satisfies EndpointGroup
```

--------------------------------

### Calling API Endpoints with kypi

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Demonstrates how to make API calls using the created kypi client. It covers GET requests without parameters, POST requests with a request body, and DELETE requests with path parameters.

```ts
// GET (no params)
const products = await api.products().json()

// POST (with body)
const newProduct = await api.addProduct({ title: 'New' })

// DELETE (with path param)
await api.deleteProduct({ params: { id: 42 } })
```

--------------------------------

### Basic React Component

Source: https://github.com/lucas-labs/kypi/blob/master/playground/index.html

A simple functional React component that displays a greeting. It takes a 'name' prop and renders it.

```jsx
import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

export default Greeting;
```

--------------------------------

### Component with Props and Children

Source: https://github.com/lucas-labs/kypi/blob/master/playground/index.html

A layout component that accepts children and displays them within a styled container. It demonstrates prop drilling and composition.

```jsx
import React from 'react';
import './Layout.css'; // Assuming Layout.css exists for styling

function Layout(props) {
  return (
    <div className="layout-container">
      {props.children}
    </div>
  );
}

export default Layout;
```

--------------------------------

### Creating a kypi Client Instance

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Shows how to create a kypi client instance by providing the base URL, endpoint definitions, and an optional `getToken` function for authentication.

```ts
import { client } from 'kypi'

const api = client({
  baseUrl: 'https://fakestoreapi.com',
  endpoints,
  // Optional: getToken for auth endpoints
  getToken: () => localStorage.getItem('token'),
})
```

--------------------------------

### Kypi API Reference: Client Creation

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Explains how to create a type-safe API client using the `client` function. Covers configuration options like `baseUrl`, `endpoints`, `getToken`, and `onError` for global error handling.

```APIDOC
Client:
  `client({ baseUrl, endpoints, getToken?, onError?})`
    - `baseUrl`: The base URL for the API.
    - `endpoints`: An object containing endpoint definitions.
    - `getToken` (optional): A function that returns the authentication token.
    - `onError` (optional): A function called with the error if a request fails. Useful for global error handling (e.g., showing a toast, logging out on 401).

Each endpoint method:
  - Accepts input (body/query/params) as the first argument.
  - Accepts an optional [`ky` options](https://github.com/sindresorhus/ky#options) object as the second argument (for per-request overrides).

Example:
```ts
const api = client({
  baseUrl: 'https://fakestoreapi.com',
  endpoints,
  onError: (error) => {
    if (error.response?.status === 401) {
      // handle unauthorized globally
      toast("Oops! You're not logged in, intruder!")
      logout()
    }
  },
})

await api.products({ id: 1 }, { headers: { 'X-Foo': 'bar' } })
```
```

--------------------------------

### Kypi API Reference: Authentication

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Describes how to handle authentication in Kypi by marking endpoints with `auth: true` or using authenticated endpoint creators. It explains how the `getToken` function provides the token for the `Authorization: Bearer <token>` header.

```APIDOC
Auth:
  - Mark an endpoint as `auth: true` (or use `aget`, `apost`, etc.).
  - Provide a `getToken` function to the client.
  - The token will be sent as a `Bearer` in the `Authorization` header.
```

--------------------------------

### React Integration with createClientHook

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Demonstrates how to use the `createClientHook` from Kypi to integrate your API client into React applications, providing type safety and memoization.

```ts
import { createClientHook } from 'kypi/react'

const useApi = createClientHook(endpoints)

function MyComponent() {
  const api = useApi({ baseUrl: 'https://fakestoreapi.com' })
  // ...use api.products(), api.addProduct(), etc.
}
```

--------------------------------

### Component with State

Source: https://github.com/lucas-labs/kypi/blob/master/playground/index.html

A functional React component demonstrating the use of the `useState` hook to manage component state. It includes a button to increment a counter.

```jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;
```

--------------------------------

### Kypi Advanced Usage: Query Parameters

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Explains how to pass query parameters for GET/HEAD requests, either directly as the input object or nested within a `query` property.

```APIDOC
Query Params:
  For GET/HEAD, you can pass query params as the input, or as `{ query: ... }`:

  ```ts
  await api.products({ search: 'foo' })
  await api.products({ query: { search: 'foo' } })
  ```
```

--------------------------------

### Kypi Advanced Usage: Path Parameters

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Illustrates how Kypi handles path parameters, allowing endpoints like `/users/:id` to be automatically interpolated when making requests.

```APIDOC
Path Params:
  Endpoints like `/users/:id` are automatically interpolated:

  ```ts
  await api.getUser({ params: { id: 123 } })
  ```
```

--------------------------------

### Kypi Advanced Usage: Per-request Options

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Shows how to pass custom [`ky` options](https://github.com/sindresorhus/ky#options) for specific requests, allowing overrides for headers, retries, and other network configurations.

```APIDOC
Per-request Options:
  We support passing custom [`ky` options](https://github.com/sindresorhus/ky#options).

  ```ts
  await api.products({ search: 'foo' }, { headers: { 'X-Request-ID': 'abc', retry: { ... } } })
  ```
```

--------------------------------

### Kypi API Reference: Endpoint Creators

Source: https://github.com/lucas-labs/kypi/blob/master/readme.md

Details the functions used to create API endpoints for different HTTP methods, including authenticated versions and low-level creators. It also explains the type safety for input (params, body, query) and output (response).

```APIDOC
Endpoint Creators:
  - `get`, `post`, `put`, `patch`, `head`, `del`: Create endpoints for standard HTTP methods.
  - `aget`, `apost`, `aput`, `apatch`, `ahead`, `adel`: Same as above, but require authentication.
  - `endpoint`, `authed`: Low-level endpoint creators.

Each endpoint is fully typed:
  - Input: Supports body, query, and/or path parameters with type inference.
  - Output: Defines the response type.

Example:
```ts
const getUser = get<void, { id: number; name: string }, { id: number }>(
  '/users/:id',
)
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.