### Basic Locale Setup Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Demonstrates the basic setup for internationalization using imported locales. This involves providing the locale data to the application's context.

```javascript
import { LocaleProvider } from '@eightfold.ai/eightfold-ui';
import enUS from './locales/en-US.json';

<LocaleProvider locale={enUS}>
  <App />
</LocaleProvider>
```

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

### Example Clone Command

Source: https://github.com/eightfoldai/octuple/blob/main/src/CONTRIBUTING.md

An example of the git clone command, showing the typical structure for cloning the Octuple repository from a personal fork.

```bash
git clone https://github.com/imadev/octuple.git
```

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

### Multi-Language Support Setup

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/locale-configuration.md

Enables multi-language support by dynamically selecting locales based on user preference. This example demonstrates switching between English, Spanish, and French.

```typescript
import { ConfigProvider } from '@eightfold.ai/octuple';
import { en_US, es_ES, fr_FR } from '@eightfold.ai/octuple/lib/locale';
import { useState } from 'react';

export function App() {
  const [language, setLanguage] = useState('en_US');

  const localeMap = {
    en_US,
    es_ES,
    fr_FR,
  };

  return (
    <>
      <LanguageSelector onChange={setLanguage} />
      <ConfigProvider locale={localeMap[language]}>
        <YourApp />
      </ConfigProvider>
    </>
  );
}
```

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

### Authentication Flow Setup

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/README.md

Wrap your application with AuthGuard and ConfigProvider for authentication and configuration management.

```typescript
<ConfigProvider>
  <AuthGuard>
    <App />
  </AuthGuard>
</ConfigProvider>
```

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

### Grid System Setup

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Import the necessary Grid, Row, and Col components from the Octuple UI library.

```typescript
import Grid, { Row, Col } from '@eightfold.ai/octuple';
```

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

### Layout Component Setup

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Import the main Layout component from the Octuple UI library.

```typescript
import Layout from '@eightfold.ai/octuple';
```

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

### Form Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

A basic example demonstrating how to use the Form component with a ref for instance methods and custom validation messages. Includes a submit handler.

```typescript
import Form, { FormInstance } from '@eightfold.ai/octuple';
import { useRef } from 'react';

export function MyForm() {
  const formRef = useRef<FormInstance>(null);

  const handleSubmit = (values) => {
    console.log('Form values:', values);
  };

  return (
    <Form
      ref={formRef}
      onSubmit={handleSubmit}
      validateMessages={{
        required: '${label} is required',
        email: '${label} must be valid',
      }}>
      <input name="username" placeholder="Username" />
      <button type="submit">Submit</button>
    </Form>
  );
}
```

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

### Basic Theme Setup with ConfigProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-configprovider.md

Configure the primary theme color for all Octuple components by passing theme options to the ConfigProvider. This snippet demonstrates a minimal setup for theme customization.

```typescript
import { ConfigProvider, OcThemeName } from '@eightfold.ai/octuple';
import App from './App';

export function AppRoot() {
  return (
    <ConfigProvider themeOptions={{ primary: '#1890ff' }}>
      <App />
    </ConfigProvider>
  );
}
```

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

### Importing Locales Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Provides a code example for importing locale data. This is the first step in setting up internationalization.

```javascript
import enUS from './locales/en-US.json';
import esES from './locales/es-ES.json';

// Use enUS or esES in your application
```

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

### SearchBox Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-select-inputs.md

Example demonstrating how to use the SearchBox component for searching users. It includes state management for the query, results, and loading state, along with an asynchronous search handler.

```typescript
import { SearchBox } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function SearchUsers() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleSearch = async (q: string) => {
    if (!q) {
      setResults([]);
      return;
    }
    
    setLoading(true);
    try {
      const response = await fetch(`/api/users/search?q=${q}`);
      const data = await response.json();
      setResults(data);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <SearchBox
        value={query}
        onChange={setQuery}
        onSearch={handleSearch}
        placeholder="Search users..."
        loading={loading}
      />
      <ul>
        {results.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  );
}
```

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

### Install Octuple with NPM

Source: https://github.com/eightfoldai/octuple/blob/main/README.md

Use this command to add the Octuple library to your project if you are using NPM as your package manager.

```bash
npm install @eightfold.ai/octuple
```

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

### Stack Component Setup

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Import the Stack component from the Octuple UI library for flexible item arrangement.

```typescript
import { Stack } from '@eightfold.ai/octuple';
```

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

### Table Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates how to use the Table component with custom columns and data. Includes basic configuration for size and pagination.

```typescript
import Table, { TableSize } from '@eightfold.ai/octuple';

export function DataTable() {
  const columns = [
    { key: 'id', title: 'ID', dataIndex: 'id', width: 100 },
    { key: 'name', title: 'Name', dataIndex: 'name' },
    {
      key: 'status',
      title: 'Status',
      dataIndex: 'status',
      render: (status) => <Badge text={status} />
    },
  ];

  const data = [
    { id: 1, name: 'Alice', status: 'Active' },
    { id: 2, name: 'Bob', status: 'Pending' },
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      size={TableSize.Comfortable}
      pagination={{ pageSize: 10 }}
    />
  );
}
```

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

### Install Octuple with Yarn

Source: https://github.com/eightfoldai/octuple/blob/main/README.md

Use this command to add the Octuple library to your project if you are using Yarn as your package manager.

```bash
yarn add @eightfold.ai/octuple
```

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

### Multi-Language Application Setup

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/README.md

Configure multi-language support using ConfigProvider and locale data. Allows runtime language switching.

```typescript
<ConfigProvider locale={locales[currentLanguage]}>
  <App />
</ConfigProvider>
```

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

### Basic Pill Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates how to render a list of interactive pills, where each pill can be removed. This example uses the useState hook to manage the list of tags.

```typescript
import { Pill, PillSize } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function TagList() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'Octuple']);

  return (
    <div>
      {tags.map((tag) => (
        <Pill
          key={tag}
          text={tag}
          size={PillSize.Medium}
          onRemove={() => setTags(tags.filter((t) => t !== tag))}
        />
      ))}
    </div>
  );
}
```

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

### RangePicker Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Provides a usage example for the RangePicker component, which is designed for selecting a start and end date. This is useful for defining time spans.

```javascript
import { RangePicker } from '@eightfold.ai/eightfold-ui';

<RangePicker />
```

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

### Basic theme setup for ConfigProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Minimal configuration for the ConfigProvider to set up a basic theme. This involves importing ConfigProvider and passing a theme object.

```jsx
import { ConfigProvider } from "@octo/config";
import { theme } from "@octo/theme";

<ConfigProvider theme={theme.light}>
  {/* Application content */}
</ConfigProvider>
```

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

### Creating Custom Locales Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Provides guidance on creating entirely new locale files from scratch. This involves defining the structure and populating it with translations.

```json
{
  "greeting": "Bonjour",
  "farewell": "Au revoir",
  "validation": {
    "required": "Ce champ est requis."
  }
}
```

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

### useMatchMedia Hook Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Demonstrates the usage of the `useMatchMedia` hook for detecting responsive breakpoints. This hook is essential for building adaptive UIs.

```javascript
import { useMatchMedia } from '@eightfold.ai/eightfold-ui';

const isMobile = useMatchMedia('(max-width: 768px)');

// Use isMobile to conditionally render components or apply styles
```

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

### Run Storybook Development Server

Source: https://github.com/eightfoldai/octuple/blob/main/CLAUDE.md

Use this command to start the Storybook development server. It runs on port 2022.

```bash
yarn storybook
```

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

### Tooltip Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Shows how to implement a Tooltip component that displays information when hovering over a trigger element.

```typescript
import { Tooltip, TooltipTheme } from '@eightfold.ai/octuple';
import { HelpIcon } from '@eightfold.ai/octuple';

export function HelpButton() {
  return (
    <Tooltip
      title="Click for more information"
      placement="bottom"
      theme={TooltipTheme.Dark}
    >
      <HelpIcon />
    </Tooltip>
  );
}
```

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

### Progress Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates a dynamic Progress bar that updates its percentage and status based on state.

```typescript
import Progress, { ProgressSize } from '@eightfold.ai/octuple';

export function FileUpload() {
  const [uploadPercent, setUploadPercent] = useState(0);

  return (
    <Progress
      percent={uploadPercent}
      size={ProgressSize.Large}
      status={uploadPercent === 100 ? 'success' : 'active'}
    />
  );
}
```

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

### Usage Example for Snackbar

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Provides an example of using the snack function within a component to display success or error messages after an asynchronous operation.

```typescript
import { snack } from '@eightfold.ai/octuple';

export function DeleteButton() {
  const handleDelete = async () => {
    try {
      await deleteItem();
      snack({
        message: 'Item deleted successfully',
        type: 'success',
        duration: 3000,
      });
    } catch (error) {
      snack({
        message: 'Failed to delete item',
        type: 'error',
      });
    }
  };

  return <button onClick={handleDelete}>Delete</button>;
}
```

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

### Locale Storage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Demonstrates how to persist the user's selected language preference using local storage. This ensures the chosen locale is remembered across sessions.

```javascript
import { useLocale } from '@eightfold.ai/eightfold-ui';

const { locale, setLocale } = useLocale();

const handleLanguageChange = (newLocale) => {
  setLocale(newLocale);
  localStorage.setItem('userLocale', JSON.stringify(newLocale));
};

// On app load, check localStorage for 'userLocale' and set it if found.
```

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

### Runtime Language Switching Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Shows how to dynamically switch the application's language at runtime. This typically involves updating the locale context.

```javascript
import { useLocale } from '@eightfold.ai/eightfold-ui';
import enUS from './locales/en-US.json';
import esES from './locales/es-ES.json';

const { setLocale } = useLocale();

const switchLanguage = (lang) => {
  if (lang === 'en') setLocale(enUS);
  if (lang === 'es') setLocale(esES);
};

<button onClick={() => switchLanguage('es')}>Switch to Spanish</button>
```

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

### DialogHelper Confirm Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Shows how to use the DialogHelper.confirm function to display a confirmation dialog with custom text and callbacks.

```typescript
DialogHelper.confirm({
  title: 'Delete Item?',
  content: 'This action cannot be undone.',
  okText: 'Delete',
  onOk: () => deleteItem(),
});
```

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

### Usage Example for Modal

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates how to use the Modal component to create a confirmation dialog. It includes state management for visibility and basic OK/Cancel actions.

```typescript
import { Modal, ModalSize } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function ConfirmDialog() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button onClick={() => setVisible(true)}>Open Modal</button>
      <Modal
        visible={visible}
        title="Confirm Action"
        onOk={() => {
          console.log('Confirmed');
          setVisible(false);
        }}
        onCancel={() => setVisible(false)}
        size={ModalSize.Medium}
      >
        Are you sure you want to proceed?
      </Modal>
    </>
  );
}
```

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

### Skeleton Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Shows a Skeleton component used as a loading placeholder that is replaced by actual content after a delay.

```typescript
import { Skeleton, SkeletonVariant } from '@eightfold.ai/octuple';
import { useState, useEffect } from 'react';

export function ContentLoader() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 2000);
    return () => clearTimeout(timer);
  }, []);

  return loading ? (
    <Skeleton variant={SkeletonVariant.Rect} height={200} count={3} />
  ) : (
    <ContentDisplay />
  );
}
```

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

### Usage Example for hasOverflow

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/hooks-reference.md

Demonstrates how to use the hasOverflow hook to conditionally render a scroll indicator.

```typescript
import { hasOverflow, hasHorizontalOverflow } from '@eightfold.ai/octuple';

export function ScrollableContent() {
  const contentRef = useRef<HTMLDivElement>(null);
  const hasScroll = hasOverflow(contentRef.current);

  return (
    <div ref={contentRef}>
      {hasScroll && <ScrollIndicator />}
      <Content />
    </div>
  );
}
```

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

### useMatchMedia Hook Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/hooks-reference.md

Demonstrates how to use the useMatchMedia hook to conditionally render UI elements based on viewport size.

```typescript
import { useMatchMedia, Breakpoints } from '@eightfold.ai/octuple';

export function ResponsiveLayout() {
  const isMediumOrLarger = useMatchMedia(Breakpoints.Medium);
  const isLargeScreen = useMatchMedia(Breakpoints.Large);

  return (
    <div>
      {isMediumOrLarger && <Sidebar />}
      <main>{isLargeScreen ? <FullLayout /> : <CompactLayout />}</main>
    </div>
  );
}
```

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

### Primary Library Export

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/project-overview.md

Import all components, hooks, and types from the main library entry point. This is the most common way to start using Octuple.

```typescript
import { Button, Form, Select, ... } from '@eightfold.ai/octuple';
```

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

### useGestures Hook Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Demonstrates the `useGestures` hook for tracking pointer gestures like tap, swipe, and pinch. This is useful for implementing interactive elements.

```javascript
import { useGestures } from '@eightfold.ai/eightfold-ui';

const gestureHandlers = useGestures({
  onTap: () => console.log('Tapped!'),
  onSwipe: (direction) => console.log(`Swiped ${direction}`),
});

<div {...gestureHandlers}>Interact here</div>
```

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

### Date and Time Selection

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-date-time-picker.md

This example shows how to select both date and time. Configure `showTime` with desired format and step intervals, and set the main `format` property accordingly.

```typescript
import DatePicker from '@eightfold.ai/octuple';
import { useState } from 'react';

export function EventScheduler() {
  const [dateTime, setDateTime] = useState<Date | null>(null);

  return (
    <DatePicker
      value={dateTime}
      onChange={setDateTime}
      placeholder="Select date and time"
      showTime={{
        format: 'HH:mm',
        hourStep: 1,
        minuteStep: 15,
      }}
      format="YYYY-MM-DD HH:mm"
    />
  );
}
```

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

### useBoolean Hook Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Shows how to use the `useBoolean` hook for managing boolean state. It simplifies toggling and setting boolean values.

```javascript
import { useBoolean } from '@eightfold.ai/eightfold-ui';

const [isOpen, toggleOpen, setOpen] = useBoolean(false);

// isOpen: boolean state
// toggleOpen: function to toggle the state
// setOpen: function to set the state to true or false
```

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

### Input with Prefix and Suffix

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-select-inputs.md

An example of a number input with a currency prefix and decimal suffix. Suitable for financial inputs.

```typescript
import { TextInput, TextInputWidth } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function CurrencyInput() {
  const [amount, setAmount] = useState('');

  return (
    <TextInput
      type="number"
      value={amount}
      onChange={setAmount}
      prefix="$"
      suffix=".00"
      placeholder="0"
      width={TextInputWidth.fill}
    />
  );
}
```

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

### Basic Tabs Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates how to set up and use the Tabs and Tab components to create tabbed content navigation. Manages active tab state using useState.

```typescript
import { Tabs, Tab } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function TabbedContent() {
  const [activeKey, setActiveKey] = useState('tab1');

  return (
    <Tabs activeKey={activeKey} onChange={setActiveKey}>
      <Tab key="tab1" label="Overview">
        Overview content
      </Tab>
      <Tab key="tab2" label="Details">
        Details content
      </Tab>
      <Tab key="tab3" label="Settings">
        Settings content
      </Tab>
    </Tabs>
  );
}
```

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

### Date picker

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Example of using the DatePicker component. Requires the DatePicker component import. The component allows users to select dates.

```jsx
import { DatePicker } from "@octo/input";

const MyDatePicker = () => (
  <DatePicker onChange={(date, dateString) => console.log(date, dateString)} />
);
```

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

### Snackbar Serve Example (v2.54+)

Source: https://github.com/eightfoldai/octuple/blob/main/src/components/Snackbar/CLAUDE.md

Demonstrates how to serve a snackbar with the `closable` prop set to true. Focus is no longer automatically moved to the snackbar in newer versions.

```typescript
// Before: Focus moved automatically
snack.serve({ content: 'Message', closable: true });
// Focus would move to snackbar

// After: Focus stays with user
snack.serve({ content: 'Message', closable: true });
// Focus remains where it was
// Screen reader still announces via role="status"
```

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

### useGestures Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/hooks-reference.md

Demonstrates how to use the useGestures hook to create a draggable element, updating its position based on pointer movement.

```typescript
import { useGestures } from '@eightfold.ai/octuple';
import { useRef } from 'react';

export function DraggableElement() {
  const ref = useRef<HTMLDivElement>(null);
  const { deltaX, deltaY, isPointerDown } = useGestures(ref, true);

  return (
    <div
      ref={ref}
      style={{
        transform: `translate(${deltaX}px, ${deltaY}px)`,
        cursor: isPointerDown ? 'grabbing' : 'grab',
      }}
    >
      Drag me
    </div>
  );
}
```

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

### Locale Detection Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Shows how to implement browser language detection to automatically set the user's locale. This enhances the initial user experience.

```javascript
function detectUserLocale() {
  const browserLang = navigator.language.split('-')[0];
  // Map browserLang to your available locales (e.g., 'en', 'es')
  // Return the appropriate locale object or a default
  return enUS; // Example fallback
}

<LocaleProvider locale={detectUserLocale()}>
  <App />
</LocaleProvider>
```

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

### Snackbar Event Listener Setup

Source: https://github.com/eightfoldai/octuple/blob/main/src/components/Snackbar/CLAUDE.md

Sets up and cleans up event listeners for serving and removing snacks, ensuring SSR safety.

```typescript
useEffect(() => {
  if (canUseDocElement()) {
    document.addEventListener(SNACK_EVENTS.SERVE, addSnack);
    document.addEventListener(SNACK_EVENTS.EAT, removeSnack);
  }
  return () => {
    if (canUseDocElement()) {
      document.removeEventListener(SNACK_EVENTS.SERVE, addSnack);
      document.removeEventListener(SNACK_EVENTS.EAT, removeSnack);
    }
  };
}, []);
```

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

### Basic Snackbar Usage

Source: https://github.com/eightfoldai/octuple/blob/main/src/components/Snackbar/CLAUDE.md

Demonstrates the basic usage of the `snack.serve` method to display simple notifications. Includes examples with default settings, custom duration, and specific positioning.

```typescript
import { snack } from '@eightfold/octuple';

// Simple notification
snack.serve({ content: 'Hello World!' });

// With custom duration
snack.serve({
  content: 'This stays longer',
  duration: 5000
});

// With position
snack.serve({
  content: 'Bottom right',
  position: 'bottom-right'
});
```

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

### Merging Locales Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Demonstrates how to merge base locale data with custom locale configurations. This allows for extending existing translations without overwriting them entirely.

```javascript
import { mergeLocales } from '@eightfold.ai/eightfold-ui';
import baseLocale from './locales/en-US.json';
import customLocale from './locales/en-US-custom.json';

const merged = mergeLocales(baseLocale, customLocale);

<LocaleProvider locale={merged}>
  <App />
</LocaleProvider>
```

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

### Use Basic Octuple Components

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/quick-start-guide.md

Import and use basic Octuple components like TextInput and Button. This example shows how to manage state for input fields.

```typescript
import { Button, TextInput, Select } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function MyComponent() {
  const [name, setName] = useState('');

  return (
    <div>
      <TextInput
        value={name}
        onChange={setName}
        placeholder="Enter your name"
      />
      <Button
        text="Submit"
        onClick={() => console.log('Submitted:', name)}
      />
    </div>
  );
}
```

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

### Custom hooks usage

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Example of using custom hooks provided by the library. This demonstrates abstracting complex logic into reusable functions.

```jsx
import { useFetch } from "@octo/hooks"; // Assuming a custom fetch hook

const UserProfile = ({ userId }) => {
  const { data, loading, error } = useFetch(`/api/users/${userId}`);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
};
```

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

### Text Input Form Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates how to use TextInput, TextArea, and SearchBox components within a React form. Includes state management for input values.

```typescript
import {
  TextInput,
  TextArea,
  SearchBox,
  TextInputSize,
  TextInputTheme,
} from '@eightfold.ai/octuple';
import { useState } from 'react';

export function InputForm() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [search, setSearch] = useState('');

  return (
    <div>
      <TextInput
        value={email}
        onChange={setEmail}
        placeholder="Email"
        type="email"
        size={TextInputSize.Medium}
      />
      <TextArea
        value={message}
        onChange={setMessage}
        placeholder="Message"
        rows={5}
        showCount={true}
      />
      <SearchBox
        value={search}
        onChange={setSearch}
        onSearch={(q) => console.log('Search:', q)}
      />
    </div>
  );
}
```

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

### useDrawer Hook Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Illustrates how to use the useDrawer hook to manage the visibility and state of a Drawer component, including opening and closing it.

```typescript
const { visible, open, close } = useDrawer();

return (
  <>
    <button onClick={open}>Open Drawer</button>
    <Drawer visible={visible} onClose={close}>
      Content
    </Drawer>
  </>
);
```

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

### Core Development Commands

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/project-overview.md

Use these commands for standard development tasks. 'yarn storybook' starts the dev server on port 2022.

```bash
yarn storybook              # Start dev server (port 2022)
yarn build                  # Build for production
yarn test                   # Run tests with coverage
yarn lint                   # Run ESLint
yarn typecheck              # TypeScript type checking
```

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

### CheckBoxGroup Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Shows how to implement a CheckBoxGroup for managing user preferences like notification settings. It demonstrates setting up options and handling multiple selections.

```typescript
import { CheckBox, CheckBoxGroup, SelectorSize } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function Preferences() {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <CheckBoxGroup
      options={[
        { label: 'Email notifications', value: 'email' },
        { label: 'SMS notifications', value: 'sms' },
        { label: 'Push notifications', value: 'push' },
      ]}
      value={selected}
      onChange={setSelected}
      size={SelectorSize.Medium}
    />
  );
}
```

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

### Component Unit Tests in TypeScript

Source: https://github.com/eightfoldai/octuple/blob/main/src/components/COMPONENTS.md

Includes setup for Enzyme, React adapters, and Jest mocks for APIs like matchMedia. Demonstrates rendering, snapshot testing, type validation, and simulating synchronous and asynchronous events.

```typescript
import React, { useState } from 'react';
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import MatchMediaMock from 'jest-matchmedia-mock';
import { ComponentType } from './Component.types';
import { Component } from './';
import { act } from 'react-dom/test-utils';
import { fireEvent, getByTestId, render, waitFor } from '@testing-library/react';

Enzyme.configure({ adapter: new Adapter() });

// Some APIs require mocks.
let matchMedia: any;

class ResizeObserver {
  observe() {
    // do nothing
  }
  unobserve() {
    // do nothing
  }
  disconnect() {
    // do nothing
  }
}

window.ResizeObserver = ResizeObserver;

describe('Component', () => {
  beforeAll(() => {
    matchMedia = new MatchMediaMock();
  });

  afterEach(() => {
    matchMedia.clear();
  });

  test('Component renders', () => {
    const { container } = render(
      <Component />
    );
    expect(() => container).not.toThrowError();
    expect(container).toMatchSnapshot();
  });

  test('Component type', () => {
    const { container } = render(
      <Component
          data-testid="component-1"
          type={ComponentType.base}
        />
    );
    const componentTestElement: HTMLElement = getByTestId(
      container,
      'component-1'
    );
    // Validate an appropriate pointer in memory unique to the type considered.
    expect(componentTestElement.classList.contains('.base')).toBe(true);
  });

  test('Simulate synchronous event on Component', () => {
    const Component = (): JSX.Element => {
      const [value, setValue] = useState<number>(0);
      return (
        <Component
          data-testid="component-1"
          onClick={() => {
            setValue(1);
          }}
          text={`The value is ${value}`}
          type={ComponentType.base}
        />
      );
    };
    const { container } = render(<Component />);
    const componentTestElement: HTMLElement = getByTestId(
      container,
      'component-1'
    );
    expect(componentTestElement.innerHTML).toContain('The value is 0');
    act(() => {
      fireEvent.click(componentTestElement);
    });
    expect(componentTestElement.innerHTML).toContain('The value is 1');
  });

  test('Simulate asynchronous event on Component', async () => {
    const Component = (): JSX.Element => {
      const [value, setValue] = useState<number>(0);
      return (
        <Component
          data-testid="component-1"
          onClick={() => {
            setValue(1);
          }}
          text={`The value is ${value}`}
          type={ComponentType.base}
        />
      );
    };
    const { container } = render(<Component />);
    const componentTestElement: HTMLElement = getByTestId(
      container,
      'component-1'
    );
    expect(componentTestElement.innerHTML).toContain('The value is 0');
    act(() => {
      fireEvent.click(componentTestElement);
    });
    await waitFor(() =>
      expect(componentTestElement.innerHTML).toContain('The value is 1');
    );
  });
});
```

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

### useMaxVisibleSections Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/hooks-reference.md

Illustrates using useMaxVisibleSections to determine how many navigation items are visible, adapting the UI for different screen sizes.

```typescript
import { useMaxVisibleSections } from '@eightfold.ai/octuple';
import { useRef } from 'react';

export function ResponsiveNavbar() {
  const navRef = useRef<HTMLDivElement>(null);
  const maxVisibleItems = useMaxVisibleSections(navRef, '[role="menuitem"]');

  const items = [...];
  const visibleItems = items.slice(0, maxVisibleItems);
  const hiddenItems = items.slice(maxVisibleItems);

  return (
    <nav ref={navRef}>
      {visibleItems.map(item => <a key={item.id}>{item.label}</a>)}
      {hiddenItems.length > 0 && <MoreMenu items={hiddenItems} />}
    </nav>
  );
}
```

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

### Select Component Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates how to use the Select component for country selection. It includes setting initial state, defining options, and handling selection changes with placeholder and search functionality.

```typescript
import { Select, SelectSize } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function CountrySelect() {
  const [selected, setSelected] = useState<string>();

  return (
    <Select
      options={[
        { label: 'United States', value: 'us' },
        { label: 'Canada', value: 'ca' },
        { label: 'Mexico', value: 'mx' },
      ]}
      value={selected}
      onChange={setSelected}
      placeholder="Select a country"
      size={SelectSize.Medium}
      searchable={true}
    />
  );
}
```

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

### Complete Configuration with ConfigProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-configprovider.md

Apply comprehensive global configurations including size, shape, gradient, disabled state, locale, theme colors, and form validation messages. This example shows how to set up all available options for a fully customized application environment.

```typescript
import { ConfigProvider, Size, Shape } from '@eightfold.ai/octuple';
import { en_US } from '@eightfold.ai/octuple/lib/locale';
import App from './App';

export function AppRoot() {
  return (
    <ConfigProvider
      size={Size.Medium}
      shape={Shape.Pill}
      gradient={false}
      disabled={false}
      locale={en_US}
      themeOptions={{
        primary: '#0051ba',
        secondary: '#f0ad4e',
        success: '#5cb85c',
        danger: '#d9534f',
        warning: '#f0ad4e',
        info: '#5bc0de',
      }}
      form={{
        validateMessages: {
          required: '${label} is required',
          email: '${label} must be a valid email',
        },
      }}
    >
      <App />
    </ConfigProvider>
  );
}
```

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

### Basic Time Selection Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-date-time-picker.md

Demonstrates basic time selection using the TimePicker component. Set the 'value' and 'onChange' props for state management. Use 'placeholder' for user guidance and 'format' to specify the display format.

```typescript
import TimePicker from '@eightfold.ai/octuple';
import { useState } from 'react';

export function AppointmentTime() {
  const [time, setTime] = useState<Date | null>(null);

  return (
    <TimePicker
      value={time}
      onChange={setTime}
      placeholder="Select time"
      format="HH:mm:ss"
    />
  );
}
```

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

### Conventional Commits Example

Source: https://github.com/eightfoldai/octuple/blob/main/src/CONTRIBUTING.md

An example of a commit message following the Conventional Commits specification, detailing a fix for button accessibility.

```git
fix: ABC123: button not keyboard accessible

The button component had a tabIndex of -1 by default
and therefore it was not keyboard accessible
```

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

### Build Library for Production

Source: https://github.com/eightfoldai/octuple/blob/main/CLAUDE.md

Executes a linting process followed by a Rollup build to create the production-ready library.

```bash
yarn build
```

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

### Feature flags setup with ConfigProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Configuring feature flags using ConfigProvider. This allows for enabling or disabling specific features dynamically across the application.

```jsx
import { ConfigProvider } from "@octo/config";

const featureFlags = {
  enableNewDashboard: true,
  betaFeatureX: false,
};

<ConfigProvider featureFlags={featureFlags}>
  {/* Application content */}
</ConfigProvider>
```

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

### RadioGroup Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates the usage of the RadioGroup component for theme selection. It shows how to define radio options and manage the selected theme state, with a horizontal layout.

```typescript
import { RadioGroup } from '@eightfold.ai/octuple';
import { useState } from 'react';

export function ThemeSelector() {
  const [theme, setTheme] = useState('light');

  return (
    <RadioGroup
      options={[
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
        { label: 'Auto', value: 'auto' },
      ]}
      value={theme}
      onChange={setTheme}
      direction="horizontal"
    />
  );
}
```

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

### Localization with custom messages in ConfigProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Example of setting up localization with custom message dictionaries for different languages using ConfigProvider. The `locale` prop specifies the active language.

```jsx
import { ConfigProvider } from "@octo/config";

const messages = {
  en: { title: 'English Title' },
  fr: { title: 'Titre Français' },
};

<ConfigProvider locale="fr" messages={messages}>
  {/* Application content */}
</ConfigProvider>
```

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

### Documentation File Structure

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

This tree displays the organization of Markdown documentation files within the output directory. Each file covers a specific aspect of the project, from the master README to API references and guides.

```bash
output/
├── README.md                            # Master index
├── DOCUMENTATION_INDEX.md               # This file
├── project-overview.md                  # Project context
├── quick-start-guide.md                 # Getting started
├── api-reference-button.md              # Button component
├── api-reference-configprovider.md      # ConfigProvider
├── api-reference-components.md          # 40+ components
├── api-reference-select-inputs.md       # Select & inputs
├── api-reference-date-time-picker.md    # Date/time pickers
├── hooks-reference.md                   # Custom hooks
├── types-guide.md                       # Type definitions
└── locale-configuration.md              # Localization

```

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

### RangePicker Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-date-time-picker.md

Example of using the DatePicker component as a RangePicker for conference scheduling. It manages the date range state and includes presets for common ranges like 'This Week' and 'This Month'.

```typescript
import DatePicker from '@eightfold.ai/octuple';
import { useState } from 'react';

export function ConferenceScheduler() {
  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
    null,
    null,
  ]);

  return (
    <DatePicker
      range={true}
      value={dateRange}
      onChange={setDateRange}
      placeholders={['Start date', 'End date']}
      format="YYYY-MM-DD"
      showTime={{
        format: 'HH:mm',
      }}
      presets={[
        {
          label: 'This Week',
          value: [new Date(), new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)],
        },
        {
          label: 'This Month',
          value: [
            new Date(new Date().getFullYear(), new Date().getMonth(), 1),
            new Date(
              new Date().getFullYear(),
              new Date().getMonth() + 1,
              0
            ),
          ],
        },
      ]}
    />
  );
}
```

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

### Complete configuration for ConfigProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Demonstrates comprehensive configuration options for ConfigProvider, including theme, localization, and feature flags. Requires detailed knowledge of available props.

```jsx
import { ConfigProvider } from "@octo/config";
import { theme } from "@octo/theme";

const customMessages = {
  en: { greeting: 'Hello' },
};

const App = () => (
  <ConfigProvider
    theme={theme.dark}
    locale="en"
    messages={customMessages}
    featureFlags={{ newUI: true }}
  >
    {/* Application content */}
  </ConfigProvider>
);
```

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

### Octuple Data Table Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/quick-start-guide.md

Render a data table using Octuple's Table component. Define columns and provide data source. Supports pagination and different sizes.

```typescript
import Table, { ColumnType, TableSize } from '@eightfold.ai/octuple';

export function DataTableExample() {
  const columns: ColumnType[] = [
    { key: 'id', title: 'ID', dataIndex: 'id', width: 100 },
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
  ];

  const data = [
    { id: 1, name: 'John Doe', email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      size={TableSize.Comfortable}
      pagination={{ pageSize: 10 }}
    />
  );
}
```

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

### Snackbar Container Setup

Source: https://github.com/eightfoldai/octuple/blob/main/src/components/Snackbar/CLAUDE.md

Add the SnackbarContainer component once at the root of your application.

```jsx
// Add once at app root
<SnackbarContainer />
```

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

### AvatarGroup Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates how to use AvatarGroup to display a list of user avatars with a maximum count.

```typescript
import { Avatar, AvatarGroup } from '@eightfold.ai/octuple';

export function TeamMembers() {
  return (
    <AvatarGroup maxCount={3}>
      <Avatar name="Alice Johnson" image="/avatar1.png" />
      <Avatar name="Bob Smith" image="/avatar2.png" />
      <Avatar name="Charlie Brown" image="/avatar3.png" />
      <Avatar name="Diana Prince" image="/avatar4.png" />
    </AvatarGroup>
  );
}
```

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

### Basic Select Component Usage

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Demonstrates the basic usage of the Select component. Ensure the SelectOption type is defined and available.

```javascript
import { Select, SelectOption } from '@eightfold.ai/eightfold-ui';

const options: SelectOption[] = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
];

<Select options={options} />
```

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

### Build Storybook for Deployment

Source: https://github.com/eightfoldai/octuple/blob/main/CLAUDE.md

Generates a static build of the Storybook documentation for deployment.

```bash
yarn build-storybook
```

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

### Get Document Text Direction

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/hooks-reference.md

Returns the text direction of the document. Useful for bidirectional (bidi) layouts.

```typescript
import { useCanvasDirection } from '@eightfold.ai/octuple';

export function ComponentWithBidiSupport() {
  const direction = useCanvasDirection();

  return (
    <div style={{ direction }}>
      {direction === 'rtl' ? 'محتوى عربي' : 'English content'}
    </div>
  );
}
```

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

### useBoolean Hook Usage Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/hooks-reference.md

Illustrates how to use the useBoolean hook to manage the open/close state of a modal component.

```typescript
import { useBoolean } from '@eightfold.ai/octuple';

export function Modal() {
  const [isOpen, { setTrue: open, setFalse: close, toggle }] = useBoolean(false);

  return (
    <>
      <button onClick={open}>Open Modal</button>
      {isOpen && (
        <div>
          <p>Modal Content</p>
          <button onClick={close}>Close</button>
          <button onClick={toggle}>Toggle</button>
        </div>
      )}
    </>
  );
}
```

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

### Snackbar Focus Management Example

Source: https://github.com/eightfoldai/octuple/blob/main/src/components/Snackbar/CLAUDE.md

Use the `lastFocusableElement` option to restore focus to a specific element after the snackbar is dismissed.

```typescript
// For forms, restore to submit button
snack.serve({
  content: 'Saved',
  lastFocusableElement: submitButton
});
```

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

### Import SizeContext and SizeContextProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-configprovider.md

Imports the necessary components for providing default sizes to responsive components.

```typescript
import { SizeContext, SizeContextProvider } from '@eightfold.ai/octuple';
```

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

### snack Function Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Demonstrates how to use the snack function to display a toast notification with custom content, duration, and type.

```typescript
snack({
  content: 'Action completed',
  duration: 3000,
  type: 'success',
});
```

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

### Basic Component Directory Structure

Source: https://github.com/eightfoldai/octuple/blob/main/src/components/COMPONENTS.md

Standard file organization for a single, basic component.

```bash
├── Component
│   ├── component.module.scss
│   ├── Component.tsx
│   ├── Component.types.ts
│   ├── Component.stories.tsx
│   ├── Component.test.tsx
│   └── index.ts
```

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

### DrawerVariant Enum

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/types-guide.md

Specifies the possible entry positions for drawer components. Options include 'start', 'end', 'top', and 'bottom'.

```typescript
enum DrawerVariant {
  Start = 'start',
  End = 'end',
  Top = 'top',
  Bottom = 'bottom',
}
```

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

### Build Octuple Design System Component Library

Source: https://github.com/eightfoldai/octuple/blob/main/src/CONTRIBUTING.md

Builds the Octuple Design System Component Library for production publishing to NPM. This command also runs unit tests.

```bash
yarn
```

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

### useCanvasDirection Hook Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Shows the usage of the `useCanvasDirection` hook to detect the current text direction (RTL/LTR). This is crucial for internationalized applications.

```javascript
import { useCanvasDirection } from '@eightfold.ai/eightfold-ui';

const direction = useCanvasDirection(); // 'rtl' or 'ltr'

// Use 'direction' to apply appropriate styles or logic
```

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

### useScrollLock Hook Example

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Demonstrates the `useScrollLock` hook for preventing the document body from scrolling. This is often used when modals or sidebars are open.

```javascript
import { useScrollLock } from '@eightfold.ai/eightfold-ui';

const { lockScroll, unlockScroll } = useScrollLock();

// Call lockScroll() to disable scrolling
// Call unlockScroll() to re-enable scrolling
```

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

### Responsive Design with ConfigProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/README.md

Adapt application layout based on screen size using ConfigProvider and media query matching.

```typescript
<ConfigProvider size={useMatchMedia(Breakpoints.Large) ? Size.Large : Size.Medium}>
  <App />
</ConfigProvider>
```

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

### Standard Version Release

Source: https://github.com/eightfoldai/octuple/blob/main/CLAUDE.md

Initiates a standard version release process, skipping automated tests.

```bash
yarn release
```

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

### Data table

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/DOCUMENTATION_INDEX.md

Example of a Data Table component. Requires the Table component import. Data and configuration for the table are passed as props.

```jsx
import { Table } from "@octo/data";

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
];

const data = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
];

const MyTable = () => (
  <Table columns={columns} dataSource={data} />
);
```

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

### Import ConfigProvider

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-configprovider.md

Import the ConfigProvider component and related types from the Octuple library. This is the first step to using the provider in your application.

```typescript
import { ConfigProvider, OcThemeName, ThemeOptions, CustomFont } from '@eightfold.ai/octuple';
```

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

### Basic Button Usage in React

Source: https://github.com/eightfoldai/octuple/blob/main/README.md

Demonstrates how to import and use the Button component from the Octuple library in a React application.

```tsx
import { Button } from '@eightfold.ai/octuple';

export const App = () => (
  <>
    <Button text={'Button'} />
  </>
);
```

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

### Custom Cell Rendering

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-date-time-picker.md

Customize the appearance of date cells using the `cellRender` prop. This example highlights holidays with a special icon.

```typescript
import DatePicker from '@eightfold.ai/octuple';
import { useState } from 'react';

export function CustomDatePicker() {
  const [date, setDate] = useState<Date | null>(null);
  const holidays = [new Date('2024-12-25'), new Date('2024-01-01')];

  const isHoliday = (date: Date) => {
    return holidays.some(
      (h) =>
        h.getDate() === date.getDate() &&
        h.getMonth() === date.getMonth() &&
        h.getFullYear() === date.getFullYear()
    );
  };

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      cellRender={(date, info) => {
        const holiday = isHoliday(date);
        return (
          <div className={holiday ? 'holiday' : ''}>
            {date.getDate()}
            {holiday && <span>🎄</span>}
          </div>
        );
      }}
    />
  );
}
```

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

### SnackbarContainer Setup

Source: https://github.com/eightfoldai/octuple/blob/main/src/components/Snackbar/CLAUDE.md

Integrate the SnackbarContainer into your application's root or a custom parent element. This component manages the display and state of all snackbars.

```typescript
import { SnackbarContainer } from '@eightfold/octuple';

function App() {
  return (
    <div>
      {/* Your app content */}
      <SnackbarContainer />
    </div>
  );
}
```

```typescript
<SnackbarContainer parent={customElement} />
```

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

### RangeValue Type Alias

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/types-guide.md

Represents a date range for pickers, consisting of a start date and an end date. Dates can be null if not selected.

```typescript
type RangeValue = [Date | null, Date | null]
```

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

### Horizontal Stack with Buttons

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-components.md

Use the Stack component to arrange items horizontally with specified gap and alignment. This example shows a group of buttons.

```typescript
import { Stack, Button } from '@eightfold.ai/octuple';

export function ButtonGroup() {
  return (
    <Stack direction="horizontal" gap={12}>
      <Button text="Cancel" />
      <Button text="Submit" variant="primary" />
    </Stack>
  );
}
```

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

### Basic Button Usage

Source: https://github.com/eightfoldai/octuple/blob/main/_autodocs/api-reference-button.md

Demonstrates the simplest way to render a Button component with just text.

```typescript
import { Button } from '@eightfold.ai/octuple';

export function BasicButton() {
  return <Button text="Click me" />;
}
```