### Install Actify using Package Managers

Source: https://github.com/actifyjs/actify/blob/main/apps/docs/content/getting-started/installation.md

Installs the Actify library into your project using your preferred package manager. Ensure Tailwind CSS is already set up. This command adds Actify as a dependency.

```shell
pnpm add actify
```

```shell
yarn add actify
```

```shell
npm i actify
```

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

### Install Actify React Components Library

Source: https://github.com/actifyjs/actify/blob/main/README.md

Instructions for installing the Actify library using different package managers like pnpm, yarn, and npm. This is the initial step before using Actify components in a React project.

```bash
# with pnpm
pnpm add actify
# with yarn
yarn add actify
# with npm
npm install actify
```

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

### Actify Dialog Component Examples

Source: https://context7.com/actifyjs/actify/llms.txt

Demonstrates the usage of the Actify Dialog component for various user interaction scenarios. It includes basic dialogs, controlled dialogs managed by state, and alert dialogs. Ensure 'actify' library is installed as a dependency.

```tsx
import { Dialog, DialogActivator } from 'actify'
import { Button } from 'actify'
import { useState } from 'react'

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

  return (
    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
      {/* Basic dialog */}
      <DialogActivator>
        <Button variant="filled">Open Dialog</Button>
        <Dialog title="Confirmation">
          <p>Are you sure you want to continue?</p>
          <div style={{ display: 'flex', gap: '8px', marginTop: '20px' }}>
            <Button variant="text">Cancel</Button>
            <Button variant="filled">Confirm</Button>
          </div>
        </Dialog>
      </DialogActivator>

      {/* Controlled dialog */}
      <div>
        <Button onPress={() => setIsOpen(true)}>
          Open Controlled Dialog
        </Button>
        <Dialog
          title="Settings"
          isOpen={isOpen}
          onClose={() => setIsOpen(false)}
        >
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            <TextField label="Username" variant="outlined" />
            <TextField label="Email" type="email" variant="outlined" />
            <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
              <Button variant="text" onPress={() => setIsOpen(false)}>
                Cancel
              </Button>
              <Button variant="filled" onPress={() => {
                console.log('Settings saved')
                setIsOpen(false)
              }}>
                Save
              </Button>
            </div>
          </div>
        </Dialog>
      </div>

      {/* Alert dialog */}
      <DialogActivator>
        <Button variant="outlined" color="error">Delete Account</Button>
        <Dialog title="Delete Account">
          <p>This action cannot be undone. All your data will be permanently deleted.</p>
          <div style={{ display: 'flex', gap: '8px', marginTop: '20px', justifyContent: 'flex-end' }}>
            <Button variant="text">Cancel</Button>
            <Button variant="filled" color="error">Delete</Button>
          </div>
        </Dialog>
      </DialogActivator>
    </div>
  )
}

```

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

### Install Actify Package Manager

Source: https://context7.com/actifyjs/actify/llms.txt

Instructions for installing the Actify library using npm, yarn, or pnpm. These commands add the necessary package to your project dependencies.

```bash
# with npm
npm install actify

# with yarn
yarn add actify

# with pnpm
pnpm add actify
```

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

### Actify Switch Component Examples

Source: https://context7.com/actifyjs/actify/llms.txt

Showcases the Actify Switch component for binary on/off states. Includes examples for basic toggles, icons, color variations, disabled states, and controlled components.

```tsx
import { Switch } from 'actify'
import { useState } from 'react'

function SwitchExample() {
  const [notifications, setNotifications] = useState(true)

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
      {/* Basic switch */}
      <Switch
        isSelected={notifications}
        onChange={setNotifications}
      >
        Enable notifications
      </Switch>

      {/* With icons */}
      <Switch icons defaultSelected>
        Dark mode
      </Switch>

      {/* Show only selected icon */}
      <Switch showOnlySelectedIcon defaultSelected>
        Auto-save
      </Switch>

      {/* Colored switches */}
      <Switch color="secondary" defaultSelected>
        Secondary color
      </Switch>

      <Switch color="tertiary">
        Tertiary color
      </Switch>

      <Switch color="error">
        Error state
      </Switch>

      {/* Disabled switch */}
      <Switch isDisabled>
        Disabled option
      </Switch>

      {/* Controlled switch with callback */}
      <Switch
        isSelected={notifications}
        onChange={(selected) => {
          setNotifications(selected)
          console.log('Notifications:', selected ? 'enabled' : 'disabled')
        }}
      >
        Push notifications
      </Switch>
    </div>
  )
}
```

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

### Actify Button Component Examples

Source: https://context7.com/actifyjs/actify/llms.txt

Illustrates various configurations and states of the Actify Button component. Includes examples for elevated, filled, tonal, outlined, text, and disabled buttons, showcasing different color and variant props.

```tsx
import { Button } from 'actify'

function ButtonExample() {
  return (
    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
      {/* Elevated button (default) */}
      <Button
        color="primary"
        variant="elevated"
        onPress={() => console.log('Elevated clicked')}
      >
        Elevated
      </Button>

      {/* Filled button */}
      <Button
        color="secondary"
        variant="filled"
        onPress={() => alert('Form submitted!')}
      >
        Submit
      </Button>

      {/* Tonal button */}
      <Button
        color="tertiary"
        variant="tonal"
        ripple={true}
      >
        Tonal
      </Button>

      {/* Outlined button */}
      <Button
        variant="outlined"
        color="error"
        isDisabled={false}
      >
        Delete
      </Button>

      {/* Text button */}
      <Button variant="text">
        Cancel
      </Button>

      {/* Disabled button */}
      <Button isDisabled>
        Disabled
      </Button>
    </div>
  )
}

```

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

### Basic React Component Setup with Actify

Source: https://context7.com/actifyjs/actify/llms.txt

Demonstrates how to import and use core Actify components like Button, TextField, and Card within a basic React application structure. This snippet shows initial rendering and basic props.

```jsx
import { Button, TextField, Card } from 'actify'

function App() {
  return (
    <Card variant="elevated" elevation={2}>
      <h2>Welcome to Actify</h2>
      <TextField label="Email" type="email" variant="outlined" />
      <Button color="primary" variant="filled">Submit</Button>
    </Card>
  )
}

export default App
```

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

### Actify Theme CSS Configuration

Source: https://github.com/actifyjs/actify/blob/main/apps/docs/content/getting-started/installation.md

Defines Material Design color variables and applies them to CSS theme properties. This CSS file should be imported into your project's main CSS file to enable Actify's theming capabilities.

```css
@import 'tailwindcss';

:root {
  --md-sys-color-background: #18130b;
  --md-sys-color-on-background: #ede1d3;
  --md-sys-color-surface: #18130b;
  --md-sys-color-surface-dim: #18130b;
  --md-sys-color-surface-bright: #3f382f;
  --md-sys-color-surface-container-lowest: #120d06;
  --md-sys-color-surface-container-low: #201b12;
  --md-sys-color-surface-container: #251f16;
  --md-sys-color-surface-container-high: #2f2920;
  --md-sys-color-surface-container-highest: #3b342a;
  --md-sys-color-on-surface: #ede1d3;
  --md-sys-color-surface-variant: #504534;
  --md-sys-color-on-surface-variant: #d5c4ae;
  --md-sys-color-inverse-surface: #ede1d3;
  --md-sys-color-inverse-on-surface: #362f26;
  --md-sys-color-outline: #9d8f7b;
  --md-sys-color-outline-variant: #504534;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #ffba3e;
  --md-sys-color-primary: #ffc971;
  --md-sys-color-on-primary: #432c00;
  --md-sys-color-primary-container: #ecaa2e;
  --md-sys-color-on-primary-container: #614100;
  --md-sys-color-inverse-primary: #7f5700;
  --md-sys-color-secondary: #e6c188;
  --md-sys-color-on-secondary: #432c02;
  --md-sys-color-secondary-container: #5e4518;
  --md-sys-color-on-secondary-container: #d7b37c;
  --md-sys-color-tertiary: #c7dc64;
  --md-sys-color-on-tertiary: #2c3400;
  --md-sys-color-tertiary-container: #acc04b;
  --md-sys-color-on-tertiary-container: #414d00;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
}

@theme {
  --color-background: var(--md-sys-color-background);
  --color-on-background: var(--md-sys-color-on-background);
  --color-surface: var(--md-sys-color-surface);
  --color-surface-dim: var(--md-sys-color-surface-dim);
  --color-surface-bright: var(--md-sys-color-surface-bright);
  --color-surface-container-lowest: var(
    --md-sys-color-surface-container-lowest
  );
  --color-surface-container-low: var(--md-sys-color-surface-container-low);
  --color-surface-container: var(--md-sys-color-surface-container);
  --color-surface-container-high: var(--md-sys-color-surface-container-high);
  --color-surface-container-highest: var(
    --md-sys-color-surface-container-highest
  );
  --color-on-surface: var(--md-sys-color-on-surface);
  --color-surface-variant: var(--md-sys-color-surface-variant);
  --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
  --color-inverse-surface: var(--md-sys-color-inverse-surface);
  --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
  --color-outline: var(--md-sys-color-outline);
  --color-outline-variant: var(--md-sys-color-outline-variant);
  --color-shadow: var(--md-sys-color-shadow);
  --color-scrim: var(--md-sys-color-scrim);
  --color-surface-tint: var(--md-sys-color-surface-tint);
  --color-primary: var(--md-sys-color-primary);
  --color-on-primary: var(--md-sys-color-on-primary);
  --color-primary-container: var(--md-sys-color-primary-container);
  --color-on-primary-container: var(--md-sys-color-on-primary-container);
  --color-inverse-primary: var(--md-sys-color-inverse-primary);
  --color-secondary: var(--md-sys-color-secondary);
  --color-on-secondary: var(--md-sys-color-on-secondary);
  --color-secondary-container: var(--md-sys-color-secondary-container);
  --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
  --color-tertiary: var(--md-sys-color-tertiary);
  --color-on-tertiary: var(--md-sys-color-on-tertiary);
  --color-tertiary-container: var(--md-sys-color-tertiary-container);
  --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
  --color-error: var(--md-sys-color-error);
  --color-on-error: var(--md-sys-color-on-error);
  --color-error-container: var(--md-sys-color-error-container);
  --color-on-error-container: var(--md-sys-color-on-error-container);
}

```

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

### Basic Button Usage in React

Source: https://github.com/actifyjs/actify/blob/main/README.md

A simple example demonstrating how to import and use the Button component from the Actify library in a React functional component. It shows the basic JSX syntax for rendering the component.

```jsx
import { Button } from 'actify'

export default () => {
  return <Button>Hello Actify</Button>
}
```

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

### Actify TextField Component Examples

Source: https://context7.com/actifyjs/actify/llms.txt

Showcases the Actify TextField component with different variants (filled, outlined) and features. Includes examples for email input with validation, website input with prefixes/suffixes, password fields, textareas, and inputs with leading/trailing icons.

```tsx
import { TextField } from 'actify'
import { useState } from 'react'

function TextFieldExample() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '400px' }}>
      {/* Filled variant with validation */}
      <TextField
        label="Email"
        type="email"
        variant="filled"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        isRequired
        validate={(value) => {
          if (!value.includes('@')) return 'Please enter a valid email'
        }}
        description="Enter your email address"
      />

      {/* Outlined variant with prefix/suffix */}
      <TextField
        label="Website"
        variant="outlined"
        prefixText="https://"
        suffixText=".com"
      />

      {/* Password field */}
      <TextField
        label="Password"
        type="password"
        variant="filled"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        isRequired
        minLength={8}
      />

      {/* Textarea */}
      <TextField
        label="Description"
        type="textarea"
        variant="outlined"
        maxLength={500}
      />

      {/* With icons */}
      <TextField
        label="Search"
        type="search"
        leadingIcon={<span>🔍</span>}
        trailingIcon={<span>✕</span>}
      />
    </div>
  )
}

```

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

### Actify Card Component Examples

Source: https://context7.com/actifyjs/actify/llms.txt

Illustrates the usage of the Actify Card component for displaying grouped content. It showcases different variants like elevated, filled, and outlined cards, along with examples of custom elevation and interactive cards with ripple effects. Requires the 'actify' library.

```tsx
import { Card, Button, Elevation } from 'actify'

function CardExample() {
  return (
    <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
      {/* Elevated card (default) */}
      <Card variant="elevated" elevation={2} style={{ width: '300px', padding: '20px' }}>
        <h3 style={{ marginTop: 0 }}>Product Card</h3>
        <p>This is an elevated card with shadow.</p>
        <Button variant="filled">Learn More</Button>
      </Card>

      {/* Filled card */}
      <Card variant="filled" style={{ width: '300px', padding: '20px' }}>
        <h3 style={{ marginTop: 0 }}>Filled Card</h3>
        <p>This card has a filled background.</p>
        <Button variant="tonal">View Details</Button>
      </Card>

      {/* Outlined card */}
      <Card variant="outlined" style={{ width: '300px', padding: '20px' }}>
        <h3 style={{ marginTop: 0 }}>Outlined Card</h3>
        <p>This card has a border outline.</p>
        <Button variant="outlined">Subscribe</Button>
      </Card>

      {/* Interactive card with ripple */}
      <Card
        variant="elevated"
        elevation={1}
        ripple={true}
        onClick={() => alert('Card clicked!')}
        style={{ width: '300px', padding: '20px', cursor: 'pointer' }}
      >
        <h3 style={{ marginTop: 0 }}>Interactive Card</h3>
        <p>Click anywhere on this card to see the ripple effect.</p>
      </Card>

      {/* Card with custom elevation */}
      <Card variant="elevated" elevation={4} style={{ width: '300px', padding: '20px' }}>
        <h3 style={{ marginTop: 0 }}>High Elevation</h3>
        <p>This card has a stronger shadow (elevation level 4).</p>
      </Card>
    </div>
  )
}

```

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

### Actify Radio Component Examples

Source: https://context7.com/actifyjs/actify/llms.txt

Demonstrates the Actify Radio component for mutually exclusive selections. Supports basic groups, colored options, disabled states, and validation.

```tsx
import { Radio, RadioGroup } from 'actify'

function RadioExample() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
      {/* Basic radio group */}
      <RadioGroup
        label="Subscription Plan"
        defaultValue="pro"
        onChange={(value) => console.log('Selected:', value)}
      >
        <Radio value="free">Free - $0/month</Radio>
        <Radio value="pro">Pro - $10/month</Radio>
        <Radio value="enterprise">Enterprise - $50/month</Radio>
      </RadioGroup>

      {/* Colored radio group */}
      <RadioGroup
        label="Theme"
        orientation="horizontal"
        defaultValue="light"
      >
        <Radio value="light" color="primary">Light</Radio>
        <Radio value="dark" color="secondary">Dark</Radio>
        <Radio value="auto" color="tertiary">Auto</Radio>
      </RadioGroup>

      {/* Disabled radio group */}
      <RadioGroup label="Delivery Method" isDisabled>
        <Radio value="standard">Standard Shipping</Radio>
        <Radio value="express">Express Shipping</Radio>
      </RadioGroup>

      {/* With validation */}
      <RadioGroup
        label="Payment Method"
        isRequired
        errorMessage="Please select a payment method"
      >
        <Radio value="card">Credit Card</Radio>
        <Radio value="paypal">PayPal</Radio>
        <Radio value="crypto">Cryptocurrency</Radio>
      </RadioGroup>
    </div>
  )
}
```

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

### Accordion Component Examples in React (tsx)

Source: https://context7.com/actifyjs/actify/llms.txt

Demonstrates the usage of the Accordion component from the Actify UI library. It shows basic accordion structure, how to allow multiple panels to be open simultaneously, and how to control the open state programmatically. No external dependencies beyond 'actify' are required.

```tsx
import { Accordion, AccordionItem, AccordionHeader, AccordionContent } from 'actify'

function AccordionExample() {
  return (
    <div style={{ maxWidth: '600px' }}>
      {/* Basic accordion */}
      <Accordion>
        <AccordionItem>
          <AccordionHeader>What is Actify?</AccordionHeader>
          <AccordionContent>
            Actify is a React component library that implements Material Design 3
            specifications with full accessibility support.
          </AccordionContent>
        </AccordionItem>

        <AccordionItem>
          <AccordionHeader>How do I install it?</AccordionHeader>
          <AccordionContent>
            Install Actify using npm install actify, yarn add actify, or pnpm add actify.
            Then import components as needed.
          </AccordionContent>
        </AccordionItem>

        <AccordionItem>
          <AccordionHeader>Is it accessible?</AccordionHeader>
          <AccordionContent>
            Yes! Actify uses React Aria for accessibility support following WAI-ARIA
            specifications published by the W3C.
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      {/* Multiple open panels */}
      <Accordion multiple defaultOpen={[0, 1]} style={{ marginTop: '20px' }}>
        <AccordionItem>
          <AccordionHeader>Features</AccordionHeader>
          <AccordionContent>
            <ul>
              <li>TypeScript support</li>
              <li>Tailwind CSS integration</li>
              <li>Framer Motion animations</li>
              <li>Full accessibility</li>
            </ul>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem>
          <AccordionHeader>Components</AccordionHeader>
          <AccordionContent>
            Over 40 components including buttons, forms, navigation, dialogs,
            and data display elements.
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      {/* Controlled accordion */}
      <Accordion open={[0]} style={{ marginTop: '20px' }}>
        <AccordionItem>
          <AccordionHeader>Controlled Panel</AccordionHeader>
          <AccordionContent>
            This accordion's open state is controlled by the parent component.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}

```

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

### Actify Select Component Examples (React/TSX)

Source: https://context7.com/actifyjs/actify/llms.txt

Showcases the Actify Select component with different configurations, including basic usage, filled and outlined variants, default selections, leading icons, disabled states, and custom popover placements. It uses React and the 'actify' library for the Select and SelectOption components.

```tsx
import { Select, SelectOption } from 'actify'

function SelectExample() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '400px' }}>
      {/* Basic select */}
      <Select
        label="Country"
        variant="filled"
        onSelectionChange={(key) => console.log('Selected:', key)}
      >
        <SelectOption id="us">United States</SelectOption>
        <SelectOption id="uk">United Kingdom</SelectOption>
        <SelectOption id="ca">Canada</SelectOption>
        <SelectOption id="au">Australia</SelectOption>
      </Select>

      {/* Outlined variant with default selection */}
      <Select
        label="Language"
        variant="outlined"
        defaultSelectedKey="en"
      >
        <SelectOption id="en">English</SelectOption>
        <SelectOption id="es">Spanish</SelectOption>
        <SelectOption id="fr">French</SelectOption>
        <SelectOption id="de">German</SelectOption>
      </Select>

      {/* With leading icon */}
      <Select
        label="Currency"
        variant="filled"
        leadingIcon={<span>💰</span>}
      >
        <SelectOption id="usd">USD - US Dollar</SelectOption>
        <SelectOption id="eur">EUR - Euro</SelectOption>
        <SelectOption id="gbp">GBP - British Pound</SelectOption>
      </Select>

      {/* Disabled select */}
      <Select label="Status" isDisabled>
        <SelectOption id="active">Active</SelectOption>
        <SelectOption id="inactive">Inactive</SelectOption>
      </Select>

      {/* With custom popover placement */}
      <Select
        label="Position"
        popoverProps={{ placement: 'top start' }}
      >
        <SelectOption id="top">Top</SelectOption>
        <SelectOption id="bottom">Bottom</SelectOption>
      </Select>
    </div>
  )
}
```

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

### Menu Component Examples in React (tsx)

Source: https://context7.com/actifyjs/actify/llms.txt

Illustrates the various functionalities of the Menu component from the Actify UI library. This includes creating basic menus, nested submenus, single and multiple selection modes, and disabling menu items. It depends on 'actify' components like Button.

```tsx
import { Menu, MenuItem, MenuButton, Submenu } from 'actify'
import { Button } from 'actify'

function MenuExample() {
  return (
    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
      {/* Basic menu */}
      <Menu>
        <MenuButton>
          <Button variant="outlined">File Menu</Button>
        </MenuButton>
        <MenuItem onAction={() => console.log('New')}>New File</MenuItem>
        <MenuItem onAction={() => console.log('Open')}>Open</MenuItem>
        <MenuItem onAction={() => console.log('Save')}>Save</MenuItem>
        <MenuItem onAction={() => console.log('Exit')}>Exit</MenuItem>
      </Menu>

      {/* Menu with submenu */}
      <Menu>
        <MenuButton>
          <Button variant="outlined">Edit Menu</Button>
        </MenuButton>
        <MenuItem>Undo</MenuItem>
        <MenuItem>Redo</MenuItem>
        <Submenu label="Transform">
          <MenuItem>Uppercase</MenuItem>
          <MenuItem>Lowercase</MenuItem>
          <MenuItem>Title Case</MenuItem>
        </Submenu>
        <MenuItem>Delete</MenuItem>
      </Menu>

      {/* Menu with selection */}
      <Menu
        selectionMode="single"
        defaultSelectedKeys={['medium']}
        onSelectionChange={(keys) => console.log('Selected:', Array.from(keys))}
      >
        <MenuButton>
          <Button variant="outlined">Text Size</Button>
        </MenuButton>
        <MenuItem key="small">Small</MenuItem>
        <MenuItem key="medium">Medium</MenuItem>
        <MenuItem key="large">Large</MenuItem>
      </Menu>

      {/* Menu with multiple selection */}
      <Menu
        selectionMode="multiple"
        defaultSelectedKeys={['bold', 'italic']}
      >
        <MenuButton>
          <Button variant="outlined">Format</Button>
        </MenuButton>
        <MenuItem key="bold">Bold</MenuItem>
        <MenuItem key="italic">Italic</MenuItem>
        <MenuItem key="underline">Underline</MenuItem>
        <MenuItem key="strikethrough">Strikethrough</MenuItem>
      </Menu>

      {/* Menu with disabled items */}
      <Menu>
        <MenuButton>
          <Button variant="outlined">Options</Button>
        </MenuButton>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
        <MenuItem isDisabled>Cut (disabled)</MenuItem>
        <MenuItem>Select All</MenuItem>
      </Menu>
    </div>
  )
}

```

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

### Card with Ripple Effect - React JSX

Source: https://github.com/actifyjs/actify/blob/main/apps/docs/content/components/cards.md

This example demonstrates how to create a card with a ripple effect using the Actify UI Card component in React. It includes an image and text content. The `ripple` prop is used to enable the ripple effect.

```jsx
<Card ripple>
    <img
      alt=""
      className="w-full object-fit"
      src="https://images.unsplash.com/photo-1694736301344-0a2e4b5f51c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80"
    />
    <div className="block flex-grow flex-shrink p-5 text-on-surface">
      <div className="font-medium mb-3">card with ripple</div>
      <p>
        Tempore rem numquam qui quae placeat, enim ut temporibus inventore
        architecto eaque.
      </p>
    </div>
  </Card>
```

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

### Actify Slider Component Examples

Source: https://context7.com/actifyjs/actify/llms.txt

Illustrates the Actify Slider component for selecting numeric values within a range. Covers basic sliders, labeled values, range selection, color options, disabled states, steps, and vertical orientation.

```tsx
import { Slider } from 'actify'
import { useState } from 'react'

function SliderExample() {
  const [volume, setVolume] = useState(50)
  const [price, setPrice] = useState([20, 80])

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '30px', padding: '20px' }}>
      {/* Basic slider */}
      <Slider
        label="Volume"
        value={volume}
        onChange={setVolume}
        minValue={0}
        maxValue={100}
      />

      {/* With labeled values */}
      <Slider
        label="Brightness"
        defaultValue={75}
        labeled
        formatOptions={{ style: 'percent' }}
      />

      {/* Price range slider */}
      <Slider
        label="Price Range"
        value={price}
        onChange={setPrice}
        minValue={0}
        maxValue={100}
        formatOptions={{ style: 'currency', currency: 'USD' }}
      />

      {/* Colored slider */}
      <Slider
        label="Temperature"
        color="secondary"
        defaultValue={22}
        minValue={16}
        maxValue={30}
      />

      {/* Disabled slider */}
      <Slider
        label="Disabled"
        defaultValue={50}
        isDisabled
      />

      {/* With step */}
      <Slider
        label="Rating"
        defaultValue={3}
        minValue={1}
        maxValue={5}
        step={1}
        labeled
      />

      {/* Vertical orientation */}
      <Slider
        label="Vertical Slider"
        orientation="vertical"
        defaultValue={60}
        style={{ height: '200px' }}
      />
    </div>
  )
}
```

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

### Actify Checkbox Component Examples (React/TSX)

Source: https://context7.com/actifyjs/actify/llms.txt

Demonstrates various functionalities of the Actify Checkbox component, including simple checkboxes, indeterminate states, colored options, checkbox groups, and disabled states. It utilizes React's useState hook for managing component states and relies on the 'actify' library for the Checkbox and CheckboxGroup components.

```tsx
import { Checkbox, CheckboxGroup } from 'actify'
import { useState } from 'react'

function CheckboxExample() {
  const [checked, setChecked] = useState(false)
  const [indeterminate, setIndeterminate] = useState(true)

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
      {/* Simple checkbox */}
      <Checkbox
        isSelected={checked}
        onChange={setChecked}
      >
        Accept terms and conditions
      </Checkbox>

      {/* Indeterminate checkbox */}
      <Checkbox
        isIndeterminate={indeterminate}
        isSelected={!indeterminate}
        onChange={(selected) => {
          setIndeterminate(false)
          setChecked(selected)
        }}
      >
        Select all items
      </Checkbox>

      {/* Colored checkbox */}
      <Checkbox color="secondary" defaultSelected>
        Send notifications
      </Checkbox>

      {/* Checkbox group */}
      <CheckboxGroup
        label="Preferences"
        defaultValue={['email', 'sms']}
        onChange={(values) => console.log('Selected:', values)}
      >
        <Checkbox value="email">Email updates</Checkbox>
        <Checkbox value="sms">SMS alerts</Checkbox>
        <Checkbox value="push">Push notifications</Checkbox>
      </CheckboxGroup>

      {/* Disabled checkbox */}
      <Checkbox isDisabled>
        Disabled option
      </Checkbox>
    </div>
  )
}
```

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

### Table Component API

Source: https://github.com/actifyjs/actify/blob/main/apps/docs/content/components/table.md

This section details the available props and events for the Table component.

```APIDOC
## Table Component

### Description

The Table component allows you to display tabular data. It supports features like row selection, sorting, and drag and drop.

### Props

#### Table Component Props

- **children** (`ReactNode`) - Required - The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
- **selectionBehavior** (`SelectionBehavior`) - Optional - Defaults to 'toggle'. How multiple selection should behave in the collection.
- **disabledBehavior** (`DisabledBehavior`) - Optional - Defaults to 'selection'. Whether disabledKeys applies to all interactions, or only selection.
- **dragAndDropHooks** (`DragAndDropHooks`) - Optional - The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the Table.
- **disabledKeys** (`Iterable<Key>`) - Optional - A list of row keys to disable.
- **selectionMode** (`SelectionMode`) - Optional - The type of selection that is allowed in the collection.
- **disallowEmptySelection** (`boolean`) - Optional - Whether the collection allows empty selection.
- **selectedKeys** (`'all' | Iterable<Key>`) - Optional - The currently selected keys in the collection (controlled).
- **defaultSelectedKeys** (`'all' | Iterable<Key>`) - Optional - The initial selected keys in the collection (uncontrolled).
- **sortDescriptor** (`SortDescriptor`) - Optional - The current sorted column and direction.
- **className** (`string`) - Optional - The CSS className for the element. A function may be provided to compute the class based on component state.
- **style** (`React.CSSProperties`) - Optional - The inline style for the element. A function may be provided to compute the style based on component state.

### Events

#### Table Component Events

- **onRowAction** - `(key: Key) => void` - Handler that is called when a user performs an action on the row.
- **onSelectionChange** - `(keys: Selection) => void` - Handler that is called when the selection changes.
- **onSortChange** - `(descriptor: SortDescriptor) => any` - Handler that is called when the sorted column or direction changes.
- **onScroll** - `(e: UIEvent<Element>) => void` - Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event).
```

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

### Actify LinearProgress Component: Determinate, Indeterminate, and Colored

Source: https://context7.com/actifyjs/actify/llms.txt

Illustrates the Actify LinearProgress component for indicating the progress of operations. It supports both determinate (with value, minValue, maxValue) and indeterminate states, as well as various color options (primary, secondary, tertiary, error) and custom styling through className and style props. Imports LinearProgress from 'actify' and uses React hooks for state management.

```tsx
import { LinearProgress } from 'actify'
import { useState, useEffect } from 'react'

function LinearProgressExample() {
  const [progress, setProgress] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 10))
    }, 1000)
    return () => clearInterval(timer)
  }, [])

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
      {/* Determinate progress */}
      <div>
        <p>Upload Progress: {progress}%</p>
        <LinearProgress
          value={progress}
          minValue={0}
          maxValue={100}
        />
      </div>

      {/* Indeterminate progress */}
      <div>
        <p>Loading...</p>
        <LinearProgress isIndeterminate />
      </div>

      {/* Colored progress bars */}
      <div>
        <p>Primary color</p>
        <LinearProgress color="primary" value={60} />
      </div>

      <div>
        <p>Secondary color</p>
        <LinearProgress color="secondary" value={75} />
      </div>

      <div>
        <p>Tertiary color</p>
        <LinearProgress color="tertiary" value={45} />
      </div>

      <div>
        <p>Error state</p>
        <LinearProgress color="error" value={30} />
      </div>

      {/* Custom styling */}
      <div>
        <p>Custom styled progress</p>
        <LinearProgress
          value={80}
          className="custom-progress"
          style={{ height: '8px', borderRadius: '4px' }}
        />
      </div>
    </div>
  )
}
```

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

### Actify Tabs Component: Horizontal, Vertical, and Custom Content

Source: https://context7.com/actifyjs/actify/llms.txt

Demonstrates the Actify Tabs component for organizing content with different orientations (horizontal, vertical) and custom content styling. It imports Tabs and Item from 'actify' and uses React's JSX syntax. The component handles default selected keys and selection change events.

```tsx
import { Tabs, Item } from 'actify'

function TabsExample() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
      {/* Horizontal tabs */}
      <Tabs
        defaultSelectedKey="profile"
        onSelectionChange={(key) => console.log('Selected tab:', key)}
      >
        <Item key="profile" title="Profile">
          <div style={{ padding: '20px' }}>
            <h3>Profile Settings</h3>
            <p>Manage your profile information and preferences.</p>
          </div>
        </Item>
        <Item key="security" title="Security">
          <div style={{ padding: '20px' }}>
            <h3>Security Settings</h3>
            <p>Update your password and security options.</p>
          </div>
        </Item>
        <Item key="notifications" title="Notifications">
          <div style={{ padding: '20px' }}>
            <h3>Notification Preferences</h3>
            <p>Configure how you receive notifications.</p>
          </div>
        </Item>
      </Tabs>

      {/* Vertical tabs */}
      <Tabs
        orientation="vertical"
        defaultSelectedKey="home"
        style={{ display: 'flex' }}
      >
        <Item key="home" title="Home">
          <div style={{ padding: '20px' }}>
            <h3>Home</h3>
            <p>Welcome to the home page.</p>
          </div>
        </Item>
        <Item key="products" title="Products">
          <div style={{ padding: '20px' }}>
            <h3>Products</h3>
            <p>Browse our product catalog.</p>
          </div>
        </Item>
        <Item key="about" title="About">
          <div style={{ padding: '20px' }}>
            <h3>About Us</h3>
            <p>Learn more about our company.</p>
          </div>
        </Item>
      </Tabs>

      {/* Tabs with custom content class */}
      <Tabs
        defaultSelectedKey="tab1"
        contentClassName="custom-tab-content"
      >
        <Item key="tab1" title="Dashboard">
          <div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
            Dashboard content
          </div>
        </Item>
        <Item key="tab2" title="Analytics">
          <div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
            Analytics content
          </div>
        </Item>
      </Tabs>
    </div>
  )
}
```

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