### Installation and Setup Source: https://context7.com/koobiq/react-components/llms.txt Instructions on how to install the Koobiq React Components library and its peer dependencies using npm, pnpm, or yarn. ```APIDOC ## Installation and Setup Instructions on how to install the Koobiq React Components library and its peer dependencies. ### Method ```bash # Using npm npm install @koobiq/react-components @koobiq/design-tokens # Using pnpm pnpm add @koobiq/react-components @koobiq/design-tokens # Using yarn yarn add @koobiq/react-components @koobiq/design-tokens ``` ``` -------------------------------- ### Installation Source: https://github.com/koobiq/react-components/blob/main/packages/icons/README.md Instructions for installing the @koobiq/react-icons package using npm, yarn, or pnpm. ```APIDOC ## Installation Depending on your preference, run one of the following in your terminal: ```sh # With npm npm install @koobiq/react-icons # With yarn yarn add @koobiq/react-icons # With pnpm pnpm add @koobiq/react-icons ``` ``` -------------------------------- ### Setup Koobiq React Theme and Provider Source: https://github.com/koobiq/react-components/blob/main/docs/0-welcome.mdx Example of setting up the Koobiq React theme and Provider in a React application. It demonstrates importing necessary CSS tokens and components, and wrapping the application with the Provider for theme access. ```tsx // General tokens for all themes import '@koobiq/design-tokens/web/css-tokens.css'; // Tokens for a light theme, use .kbq-light import '@koobiq/design-tokens/web/css-tokens-light.css'; // Tokens for a dark theme, use .kbq-dark import '@koobiq/design-tokens/web/css-tokens-dark.css'; // Component styles import '@koobiq/react-components/style.css'; import { Provider, Typography } from '@koobiq/react-components'; export default function App() { return (

Hello, Koobiq React!

```

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

### InputNumber with Addons

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/InputNumber/InputNumber.mdx

Illustrates how to use the `startAddon` and `endAddon` props to include additional content before or after the input field in the InputNumber component.

```tsx
<InputNumber startAddon="+" endAddon="-" />
```

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

### ProgressSpinner Base Usage

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/ProgressSpinner/ProgressSpinner.mdx

Shows the basic implementation of the ProgressSpinner component. This serves as a starting point for displaying visual progress in your application.

```tsx
<ProgressSpinner />
```

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

### Implement Input Components

Source: https://context7.com/koobiq/react-components/llms.txt

Shows how to use the Input component with labels, validation, captions, addons, and various states like disabled or read-only.

```tsx
import { Input } from '@koobiq/react-components';
import { IconSearch16, IconUser16 } from '@koobiq/react-icons';

function InputExamples() {
  const [value, setValue] = useState('');
  return (
    <>
      <Input label="Username" placeholder="Enter your username" value={value} onChange={(e) => setValue(e.target.value)} />
      <Input label="Email" isRequired isInvalid={!value.includes('@')} errorMessage="Please enter a valid email address" caption="We'll never share your email" />
      <Input label="Search" startAddon={<IconSearch16 />} placeholder="Search..." isClearable onClear={() => setValue('')} />
      <Input label="Amount" labelPlacement="side" labelAlign="end" startAddon="$" endAddon=".00" />
      <Input label="Disabled" isDisabled value="Cannot edit" />
      <Input label="Read Only" isReadOnly value="Read only value" />
    </>
  );
}
```

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

### Disabled Button Example

Source: https://github.com/koobiq/react-components/blob/main/packages/primitives/src/components/Button/Button.mdx

Demonstrates how to disable the Button component using the `isDisabled` prop, making it non-interactive and applying appropriate semantics for accessibility.

```tsx
<Story of={Stories.Disabled} />
```

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

### Importing Menu Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Menu/Menu.mdx

Demonstrates how to import the Menu component from the @koobiq/react-components library.

```tsx
import {
  Menu,
} from '@koobiq/react-components';

```

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

### Autocomplete with Addons

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Autocomplete/Autocomplete.mdx

Shows how to include additional content before or after the input field in the Autocomplete component using the `startAddon` and `endAddon` props. This can be used for icons, buttons, or other UI elements.

```tsx
import { Autocomplete } from '@koobiq/react-components';
import { SearchIcon } from '@heroicons/react/outline'; // Example icon

function AutocompleteWithAddons() {
  const items = [
    { key: '1', text: 'Option 1' },
    { key: '2', text: 'Option 2' },
  ];

return (
    <Autocomplete
      label="Search"
      items={items}
      placeholder="Enter search term..."
      startAddon={<SearchIcon className="h-5 w-5 text-gray-400" />}
      endAddon={<button>Go</button>}
    />
  );
}
```

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

### Value Range

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/TimePicker/TimePicker.mdx

Illustrates how to restrict the selectable time range using the `minValue` and `maxValue` props, providing an example for times between 9 AM and 5 PM.

```APIDOC
## Minimum and maximum values

The `minValue` and `maxValue` props can also be used to ensure the value is within a specific range.
This example only accepts times between 9 AM and 5 PM.
```

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

### Import Tooltip Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Tooltip/Tooltip.mdx

Demonstrates how to import the Tooltip component from the @koobiq/react-components library.

```tsx
import {
  Tooltip
} from '@koobiq/react-components';

```

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

### Implementing TagGroup with Props

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/TagGroup/TagGroup.mdx

Demonstrates the basic implementation of a TagGroup component. It highlights the use of variants, icons, removal handlers, and disabled keys for interactive tag management.

```jsx
<TagGroup
  variant="primary"
  onRemove={(key) => console.log("Removed:", key)}
  disabledKeys={["item-2"]}
>
  <Tag key="item-1" icon={<Icon />}>Tag One</Tag>
  <Tag key="item-2" href="/link">Tag Two</Tag>
</TagGroup>
```

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

### Select Content Handling

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Select/Select.mdx

Demonstrates how to handle static and dynamic collections of items for the Select component.

```APIDOC
## Content

Select accepts static and dynamic collections. The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections can be used when the options come from an external data source such as an API call, or update over time.

As seen below, an iterable list of options is passed to the `Select` using the `items` prop. Each item accepts an `key` prop, which is passed to the `onSelectionChange` handler to identify the selected item. Alternatively, if the item objects contain an `key` property, as shown in the example below, then this is used automatically and an `key` prop is not required.

<Story of={Stories.Content} />
```

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

### Integrating with Next.js Link

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Link/Link.mdx

Demonstrates how to use the 'as' prop to integrate the Koobiq Link with the Next.js Link component for optimized client-side navigation.

```tsx
import NextLink from 'next/link';

<Link as={NextLink} href="/some_page">
  Some page
</Link>;
```

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

### TimePicker Minimum and Maximum Values

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/TimePicker/TimePicker.mdx

Shows how to restrict the selectable time range using the `minValue` and `maxValue` props. This example enforces a range between 9 AM and 5 PM.

```tsx
import { parseTime } from '@internationalized/date';

```

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

### Log standard messages with @koobiq/logger

Source: https://github.com/koobiq/react-components/blob/main/packages/logger/README.md

Demonstrates how to import and use the logger utility to output info, warning, and error messages to the console.

```javascript
import { logger } from '@koobiq/logger';

logger.info('Info message');
logger.warn('Warning message');
logger.error('Error message');
```

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

### Implement Button Components

Source: https://context7.com/koobiq/react-components/llms.txt

Demonstrates usage of Button and IconButton components with various variants, loading states, icons, and polymorphic rendering.

```tsx
import { Button, IconButton } from '@koobiq/react-components';
import { IconPlus16, IconTrash16 } from '@koobiq/react-icons';

function ButtonExamples() {
  return (
    <>
      <Button variant="contrast-filled" onPress={() => console.log('Pressed')}>Primary Action</Button>
      <Button variant="contrast-fade">Secondary</Button>
      <Button variant="error-filled">Delete</Button>
      <Button startIcon={<IconPlus16 />}>Add Item</Button>
      <Button endIcon={<IconTrash16 />} variant="error-fade">Remove</Button>
      <Button isLoading isDisabled>Processing...</Button>
      <Button fullWidth>Submit Form</Button>
      <IconButton variant="fade-contrast" aria-label="Delete"><IconTrash16 /></IconButton>
      <Button as="a" href="/dashboard">Go to Dashboard</Button>
    </>
  );
}
```

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

### Implement Select Component with Koobiq

Source: https://context7.com/koobiq/react-components/llms.txt

Demonstrates various configurations for the Select component, including single and multi-select modes, categorized sections, and async loading with infinite scroll capabilities.

```tsx
import { Select, SelectNext, useListData } from '@koobiq/react-components';

function SelectExamples() {
  const [selectedKey, setSelectedKey] = useState<Key | null>(null);

return (
    <>
      <Select
        label="Country"
        placeholder="Select a country"
        selectedKey={selectedKey}
        onSelectionChange={setSelectedKey}
      >
        <Select.Item key="us">United States</Select.Item>
        <Select.Item key="uk">United Kingdom</Select.Item>
        <Select.Item key="ca">Canada</Select.Item>
      </Select>

<Select
        label="Tags"
        selectionMode="multiple"
        placeholder="Select tags"
        onSelectionChange={(keys) => console.log('Selected:', keys)}
      >
        <Select.Item key="bug">Bug</Select.Item>
        <Select.Item key="feature">Feature</Select.Item>
        <Select.Item key="docs">Documentation</Select.Item>
      </Select>

<Select label="Role" placeholder="Select role">
        <Select.Section title="Admin">
          <Select.Item key="super-admin">Super Admin</Select.Item>
          <Select.Item key="admin">Admin</Select.Item>
        </Select.Section>
        <Select.Divider />
        <Select.Section title="User">
          <Select.Item key="editor">Editor</Select.Item>
          <Select.Item key="viewer">Viewer</Select.Item>
        </Select.Section>
      </Select>

<Select
        label="Users"
        isLoading={isLoading}
        loadingText="Loading more users..."
        onLoadMore={() => fetchNextPage()}
      >
        {users.map((user) => (
          <Select.Item key={user.id}>{user.name}</Select.Item>
        ))}
      </Select>
    </>
  );
}
```

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

### Configure Google Web Fonts via CDN

Source: https://github.com/koobiq/react-components/blob/main/docs/5-fonts.mdx

Add the required link tags to your HTML document head to load fonts directly from the Google Fonts CDN. This approach requires no local package installation.

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link
  href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap"
  rel="stylesheet"
/>

<link
  href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap"
  rel="stylesheet"
/>
```

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

### TimePicker Addons

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/TimePicker/TimePicker.mdx

Illustrates how to add custom content before or after the TimePicker input using the `startAddon` and `endAddon` props. This is useful for including icons or other related elements.

```tsx
<TimePicker startAddon="AM" endAddon="PM" />

```

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

### Importing useResizeObserver

Source: https://github.com/koobiq/react-components/blob/main/packages/core/src/hooks/useResizeObserver/useResizeObserver.mdx

Shows how to import the hook from the @koobiq/react-core package.

```tsx
import { useResizeObserver } from '@koobiq/react-core';
```

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

### Configure ESLint for Type-Aware Linting in Vite

Source: https://github.com/koobiq/react-components/blob/main/templates/vite/template/README.md

This snippet shows how to configure ESLint in a Vite project to enable type-aware linting rules. It involves setting the 'parserOptions.project' and 'tsconfigRootDir' properties, and replacing default recommended configurations with type-checked versions. Ensure 'eslint-plugin-react' is installed for React-specific rules.

```javascript
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
```

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

### Implementing Link with render props

Source: https://github.com/koobiq/react-components/blob/main/packages/primitives/src/components/Link/Link.mdx

Demonstrates using render functions for className, style, and children to apply state-based styling and dynamic content.

```tsx
import { clsx } from '@koobiq/react-core';

const MyLink = () => (
  <Link
    href="/docs"
    className={({ isHovered, isPressed, isDisabled }) =>
      clsx(
        'myLink',
        isHovered && 'myLink--hovered',
        isPressed && 'myLink--pressed',
        isDisabled && 'myLink--disabled'
      )
    }
    style={({ isPressed }) => ({
      transform: isPressed ? 'translateY(1px)' : 'translateY(0)',
      transition: 'transform 120ms ease',
    })}
  >
    {({ isDisabled }) => (isDisabled ? 'Unavailable' : 'Read docs')}
  </Link>
);
```

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

### Initialize ToastProvider in Layout

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/ToastProvider/ToastProvider.mdx

Demonstrates how to integrate the ToastProvider into your application's layout. The ToastProvider must be rendered in the component tree to enable the toast functionality. It wraps the main application content.

```tsx
import { Provider, ToastProvider } from '@koobiq/react-components';

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <ToastProvider />
      {children}
    </>
  );
}
```

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

### Select Component Overview

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Select/Select.mdx

Introduction to the Select component and its deprecation notice.

```APIDOC
## Select Component

<Alert status="error" title="This component has been deprecated">
Please use [SelectNext](?path=/docs/components-selectnext--docs) instead.
</Alert>

A select displays a collapsible list of options and allows a user to select one or more of them.

```tsx
import { Select } from '@koobiq/react-components';
```
```

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

### Import Grid Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Grid/Grid.mdx

Demonstrates how to import the Grid component from the @koobiq/react-components library for use in a React application.

```tsx
import { Grid } from '@koobiq/react-components';
```

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

### Addons

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Select/Select.mdx

How to include additional content before or after the Select input using addons.

```APIDOC
## Addons

You can add an extra content using the `startAddon` and `endAddon` props.

<Story of={Stories.Addons} />
```

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

### Import and Usage of useCopyToClipboard

Source: https://github.com/koobiq/react-components/blob/main/packages/core/src/hooks/useCopyToClipboard/useCopyToClipboard.mdx

Demonstrates how to import the hook from the package and its basic usage within a React component. The hook returns the current copied value and a copy function that accepts a string.

```tsx
import { useCopyToClipboard } from '@koobiq/react-core';

const MyComponent = () => {
  const [copied, copy] = useCopyToClipboard();
  return <button onClick={() => copy('Hello')}>Copy</button>;
};
```

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

### Alert with Actions

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Alert/Alert.mdx

Demonstrates adding custom actions to the Alert using the `action` prop.

```APIDOC
## Alert with Actions

### Description

Add an action to your Alert with the `action` prop. This is typically used for buttons or links related to the alert message.

### Usage

```tsx
const alertAction = (
  <button onClick={() => alert('Action clicked!')}>Learn More</button>
);

<Alert action={alertAction}>This alert has a custom action.</Alert>
```
```

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

### Import Popover Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Popover/Popover.mdx

Demonstrates how to import the Popover component from the @koobiq/react-components library.

```tsx
import { Popover } from '@koobiq/react-components';
```

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

### Input Component Props

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Input/Input.mdx

Detailed documentation for the Input component properties and configuration options.

```APIDOC
## Input Component

### Description
The Input component is used to capture user text input. It supports various states, visual variants, and layout configurations.

### Props
- **startAddon** (ReactNode) - Optional - Content to display at the start of the input.
- **endAddon** (ReactNode) - Optional - Content to display at the end of the input.
- **variant** (string) - Optional - Visual style variant of the input.
- **isInvalid** (boolean) - Optional - Toggles the error state.
- **errorMessage** (string) - Optional - Message displayed when isInvalid is true.
- **isDisabled** (boolean) - Optional - Disables the input field.
- **isRequired** (boolean) - Optional - Marks the field as required.
- **isReadOnly** (boolean) - Optional - Makes the input content immutable while remaining focusable.
- **fullWidth** (boolean) - Optional - Forces the input to fill the parent container width.
- **labelPlacement** (string) - Optional - Defines the position of the label.
- **labelAlign** (string) - Optional - Defines the alignment of the label.
- **isClearable** (boolean) - Optional - Adds a clear button when a value is present.
- **defaultValue** (string) - Optional - Initial uncontrolled value.
- **value** (string) - Optional - Controlled value of the input.
- **onChange** (function) - Optional - Callback fired when the input value changes.

### Usage Example
```tsx
import { Input } from '@koobiq/react-components';

<Input 
  label="Username" 
  placeholder="Enter your name" 
  isClearable 
/>
```
```

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

### Import Modal Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Modal/Modal.mdx

Demonstrates how to import the Modal component from the @koobiq/react-components library.

```tsx
import {
  Modal
} from '@koobiq/react-components';

```

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

### Implement ContentPanel with Container

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/ContenPanel/ContentPanel.mdx

Demonstrates how to wrap content in a ContentPanelContainer and use the render prop to toggle the visibility of a ContentPanel.

```tsx
<ContentPanelContainer>
  {({ toggle, isOpen }) => (
    <>
      <Button onPress={toggle}>{isOpen ? 'Close panel' : 'Open panel'}</Button>

<ContentPanel>
        <ContentPanel.Header>...</ContentPanel.Header>
        <ContentPanel.Body>...</ContentPanel.Body>
        <ContentPanel.Footer>...</ContentPanel.Footer>
      </ContentPanel>
    </>
  )}
</ContentPanelContainer>
```

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

### Display a Toast with Actions

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/ToastProvider/ToastProvider.mdx

Illustrates how to create a toast that includes interactive actions, such as buttons. This allows users to perform specific operations directly from the notification.

```tsx
<Story of={Stories.Actions} />
```

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

### Layout Options

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/TimePicker/TimePicker.mdx

Details the `fullWidth` prop for making the input fit its parent width, and discusses `labelPlacement` and `labelAlign` for positioning the label. It also references the Form component for two-column layout options.

```APIDOC
## Full width

The `fullWidth` prop will make an input fit to its parent width.

## Label placement and alignment

Use `labelPlacement` and `labelAlign` props to set the position of the label.

See the [Form](?path=/docs/components-form--docs#visual-options) for a two-column layout with labels on the side and a shared label column.
```

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

### Implement Table Component

Source: https://context7.com/koobiq/react-components/llms.txt

Shows how to create static and asynchronous data tables. Features include column sorting, row selection, and integration with the useAsyncList hook for dynamic data fetching.

```tsx
import { Table, TableContainer, useAsyncList } from '@koobiq/react-components';

function TableExample() {
  const rows = [
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
  ];

return (
    <TableContainer>
      <Table aria-label="Users table" selectionMode="multiple">
        <Table.Header>
          <Table.Column key="name" allowsSorting>Name</Table.Column>
          <Table.Column key="email">Email</Table.Column>
        </Table.Header>
        <Table.Body items={rows}>
          {(item) => (
            <Table.Row key={item.id}>
              <Table.Cell>{item.name}</Table.Cell>
              <Table.Cell>{item.email}</Table.Cell>
            </Table.Row>
          )}
        </Table.Body>
      </Table>
    </TableContainer>
  );
}
```

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

### Responsive Grid Values

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Grid/Grid.mdx

Demonstrates how to apply responsive values to Grid props like 'cols', 'gap', and alignment properties, allowing layout adjustments based on screen breakpoints.

```tsx
<Grid cols={{ base: 1, md: 2, lg: 3 }}>...</Grid>
```

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

### Manage List State with useListData and useAsyncList

Source: https://context7.com/koobiq/react-components/llms.txt

Demonstrates how to manage static lists with CRUD operations using useListData and handle asynchronous data fetching with pagination using useAsyncList.

```tsx
import { useListData, useAsyncList } from '@koobiq/react-components';

function useListDataExample() {
  const list = useListData({
    initialItems: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
    ],
    getKey: (item) => item.id,
  });

list.append({ id: 3, name: 'Item 3' });
  list.remove(1);
  list.update(2, { name: 'Updated Item 2' });

return list.items;
}

return {
    items: list.items,
    isLoading: list.loadingState === 'loading',
    loadMore: list.loadMore,
    reload: list.reload,
  };
}
```

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

### Importing Backdrop Component in Storybook

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Backdrop/Backdrop.mdx

This snippet demonstrates how to import the necessary Storybook components and the Backdrop stories into a documentation file. It uses the Meta component to associate the documentation with the corresponding story file.

```javascript
import { Props, Story, Meta, Status } from '../../../../../.storybook/components';
import * as Stories from './Backdrop.stories';

<Meta of={Stories} />
```

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

### Import Button Component

Source: https://github.com/koobiq/react-components/blob/main/packages/primitives/src/components/Button/Button.mdx

Demonstrates how to import the Button component from the @koobiq/react-primitives library.

```tsx
import {
  Meta,
  Story,
  Props,
  Status,
} from '../../../../../.storybook/components';

import * as Stories from './Button.stories';

# Button

import { Button } from '@koobiq/react-primitives';
```

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

### Import Fonts in Entry Point

Source: https://github.com/koobiq/react-components/blob/main/docs/5-fonts.mdx

Import the specific font weight and style CSS files into your application's main entry point. This ensures the necessary font assets are bundled and loaded.

```javascript
// Inter
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';
import '@fontsource/inter/400-italic.css';
import '@fontsource/inter/500-italic.css';

// JetBrains Mono
import '@fontsource/jetbrains-mono/400.css';
import '@fontsource/jetbrains-mono/700.css';
```

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

### SkeletonBlock Implementation

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/SkeletonBlock/SkeletonBlock.mdx

Demonstrates the basic usage of the SkeletonBlock component. It is typically used as a wrapper or a standalone placeholder to indicate loading states.

```jsx
<SkeletonBlock>
  <YourComponent />
</SkeletonBlock>
```

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

### Import DatePicker Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/DatePicker/DatePicker.mdx

Demonstrates how to import the DatePicker component from the @koobiq/react-components library.

```tsx
import {
  DatePicker
} from '@koobiq/react-components';

```

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

### Importing IconButton Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/IconButton/IconButton.mdx

Demonstrates how to import the IconButton component from the @koobiq/react-components library into a React project.

```tsx
import { IconButton } from '@koobiq/react-components';
```

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

### Layout Components

Source: https://context7.com/koobiq/react-components/llms.txt

FlexBox and Grid components for building responsive layouts using CSS flexbox and grid.

```APIDOC
## Layout Components

### Description
FlexBox and Grid components for building responsive layouts using CSS flexbox and grid.

### FlexBox

### Grid

#### Props
- `columns` (number | string | object) - Defines the number of columns or responsive column definitions.
- `gap` (number | string) - Sets the space between grid items.

### Grid.Item

#### Props
- `span` (number | string | object) - Defines how many columns the item spans, can be responsive.

### Container

#### Props
- `placement` ('center' | 'start' | 'end') - Aligns the container content.
- `maxWidth` (string) - Sets the maximum width of the container (e.g., 'sm', 'md', 'lg').

### Example
```tsx
import { FlexBox, Grid, Container } from '@koobiq/react-components';

function LayoutExample() {
  return (
    <Container placement="center" maxWidth="lg">
      {/* FlexBox for flexible layouts */}
      <FlexBox
        direction="row"
        alignItems="center"
        justifyContent="space-between"
        gap={16}
        wrap="wrap"
      >
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
      </FlexBox>

{/* Grid for structured layouts */}
      <Grid columns={12} gap={16}>
        <Grid.Item span={4}>Column 1</Grid.Item>
        <Grid.Item span={4}>Column 2</Grid.Item>
        <Grid.Item span={4}>Column 3</Grid.Item>
        <Grid.Item span={{ xs: 12, m: 6, l: 4 }}>Responsive</Grid.Item>
      </Grid>
    </Container>
  );
}
```
```

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

### Import List Component (TypeScript)

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/List/List.mdx

Demonstrates how to import the List component from the '@koobiq/react-components' library.

```tsx
import {
  List
} from '@koobiq/react-components';
```

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

### Import and Use React Icons

Source: https://github.com/koobiq/react-components/blob/main/packages/icons/README.md

Demonstrates how to import a specific icon component from the library and render it within a React functional component with custom color properties.

```tsx
import { IconCheck16 } from '@koobiq/react-icons';

const Icon = () => <IconCheck16 color="#4CAF50" />;
```

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

### Implement Modal Component

Source: https://context7.com/koobiq/react-components/llms.txt

Demonstrates how to use the Modal component with state control and custom trigger elements. It supports header, body, and footer sections with configurable sizing and exit behaviors.

```tsx
import { Modal, Button } from '@koobiq/react-components';

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

return (
    <>
      <Button onPress={() => setIsOpen(true)}>Open Modal</Button>

<Modal
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        size="medium"
      >
        {({ close }) => (
          <>
            <Modal.Header>Confirm Action</Modal.Header>
            <Modal.Body>
              Are you sure you want to proceed with this action?
            </Modal.Body>
            <Modal.Footer>
              <Button variant="fade-contrast" onPress={close}>Cancel</Button>
              <Button variant="error-filled" onPress={close}>Delete</Button>
            </Modal.Footer>
          </>
        )}
      </Modal>
    </>
  );
}
```

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

### TagGroup as Links

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/TagGroup/TagGroup.mdx

Demonstrates how to make tags act as links using the `href` prop.

```APIDOC
## Links

Tags may be links to another page or website. This can be achieved by passing the `href` prop to the `Tag` component.

### Example with Links

```jsx
<TagGroup
  items={[
    { key: 'google', content: 'Google', href: 'https://www.google.com' },
    { key: 'docs', content: 'Documentation', href: 'https://example.com/docs' },
  ]}
/>
```
```

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

### List Component

Source: https://context7.com/koobiq/react-components/llms.txt

Provides selectable lists with keyboard navigation, sections, and async loading support.

```APIDOC
## List Component

### Description
Provides selectable lists with keyboard navigation, sections, and async loading support.

### Usage
Import `List` from `@koobiq/react-components`. Use `List.Section` for grouping items and `List.Item` for individual entries. `List.ItemText` can be used to display primary and secondary text. Supports `selectionMode`, `onSelectionChange`, `isLoading`, `onLoadMore`, and `noItemsText` props.

### Props
- `aria-label` (string) - Accessibility label for the list.
- `selectionMode` ('single' | 'multiple' | 'none') - Defines how items can be selected.
- `onSelectionChange` (function) - Callback when selection changes.
- `isLoading` (boolean) - Indicates if data is being loaded.
- `onLoadMore` (function) - Callback to load more items.
- `noItemsText` (string) - Text to display when no items are available.

### Example
```tsx
import { List } from '@koobiq/react-components';

function ListExample() {
  return (
    <List
      aria-label="Select an item"
      selectionMode="single"
      onSelectionChange={(keys) => console.log('Selected:', keys)}
      isLoading={isLoading}
      onLoadMore={loadMore}
      noItemsText="No items found"
    >
      <List.Section title="Recent">
        <List.Item key="1">
          <List.ItemText primary="Document.pdf" secondary="2 hours ago" />
        </List.Item>
        <List.Item key="2">
          <List.ItemText primary="Image.png" secondary="Yesterday" />
        </List.Item>
      </List.Section>
      <List.Divider />
      <List.Section title="Older">
        <List.Item key="3">Archive.zip</List.Item>
      </List.Section>
    </List>
  );
}
```
```

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

### Flex Component Overview

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/layout/flex/flex.mdx

This section provides an overview of the Flex component, its basic usage, and its core functionality as a flex container utility.

```APIDOC
## Flex Component

### Description
The `flex` mixin turns the element it's applied to into a flex container, enabling flexible box layout.

### Usage
Import the `flex` utility from `@koobiq/react-components` and apply it to your elements.

```tsx
import { flex } from '@koobiq/react-components';
```

### Props

The Flex component accepts various props to configure its behavior and appearance. Refer to the `Props` documentation for a detailed list of available properties.

#### Example Usage

```tsx
// Assuming 'Stories.Example' and 'Stories.Base' are defined in './flex.stories'
// <Story of={Stories.Example} />
// <Props of={Stories.Base} />
```
```

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

### Importing the Badge Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Badge/Badge.mdx

Shows how to import the Badge component from the @koobiq/react-components package for use in a React application.

```tsx
import { Badge } from '@koobiq/react-components';
```

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

### Implementing SidePanel with Subcomponents and Close Action

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/SidePanel/SidePanel.mdx

Shows how to structure the SidePanel content using Header, Body, and Footer subcomponents, and how to utilize the close function provided by the render prop.

```tsx
import { Button, SidePanel } from '@koobiq/react-components';

<SidePanel control={(props) => <Button {...props}>Open</Button>}>
  {({ close }) => (
    <>
      <SidePanel.Header>Title</SidePanel.Header>
      <SidePanel.Body>Content</SidePanel.Body>
      <SidePanel.Footer>
        <Button onPress={close}>Close</Button>
      </SidePanel.Footer>
    </>
  )}
</SidePanel>;
```

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

### Import Provider Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Provider/Provider.mdx

Demonstrates how to import the Provider component from the '@koobiq/react-components' library for use in a React application.

```tsx
import {
  Provider
} from '@koobiq/react-components';

```

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

### Import InputNumber Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/InputNumber/InputNumber.mdx

Demonstrates how to import the InputNumber component from the '@koobiq/react-components' library for use in a React application.

```tsx
import { InputNumber } from '@koobiq/react-components';
```

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

### Importing the Calendar Component

Source: https://github.com/koobiq/react-components/blob/main/packages/components/src/components/Calendar/Calendar.mdx

Demonstrates the standard import statement required to use the Calendar component from the @koobiq/react-components library.

```tsx
import { Calendar } from '@koobiq/react-components';
```