### Install and Run Darwin UI Development Environment

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/CONTRIBUTING.md

These commands are used to set up the development environment for Darwin UI. It includes installing dependencies, building the library, and running in watch mode for continuous development. The build:registry command is specifically for shadcn compatibility.

```bash
# Install dependencies
npm install

# Build the library
npm run build

# Watch mode for development
npm run dev

# Build the registry (for shadcn compatibility)
npm run build:registry
```

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

### Install Darwin UI using npm

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/docs/public/llms.txt

This snippet shows how to install the Darwin UI library using npm. It's a prerequisite for using the library in your React project.

```bash
npm install @pikoloo/darwin-ui
```

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

### Quick Start with Darwin UI Components in React

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/README.md

A basic example of how to import and use Darwin UI components like Card and Button in a React application. It includes necessary imports for components and global styles.

```tsx
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "@pikoloo/darwin-ui";
import "@pikoloo/darwin-ui/styles";

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Darwin UI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="primary">Get Started</Button>
      </CardContent>
    </Card>
  );
}
```

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

### Install Darwin UI with npm, yarn, or pnpm

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/README.md

This snippet shows how to install the Darwin UI library using different package managers. It's the first step to integrating the components into your React project.

```bash
npm install @pikoloo/darwin-ui
# or
yarn add @pikoloo/darwin-ui
# or
pnpm add @pikoloo/darwin-ui
```

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

### Progress Component Examples (React)

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the linear and circular Progress indicators from @pikoloo/darwin-ui. It covers different variants, sizes, indeterminate mode, and value display.

```tsx
import { Progress, CircularProgress } from "@pikoloo/darwin-ui";

function ProgressExamples() {
  const [progress, setProgress] = useState(65);

  return (
    <div className="space-y-6 max-w-md">
      {/* Linear progress */}
      <Progress value={progress} max={100} showValue />

      {/* Variants */}
      <Progress value={75} variant="success" size="md" />
      <Progress value={50} variant="warning" size="md" />
      <Progress value={25} variant="danger" size="md" />
      <Progress value={90} variant="gradient" size="lg" />

      {/* Indeterminate (loading) */}
      <Progress indeterminate variant="default" />

      {/* Sizes */}
      <Progress value={60} size="sm" />
      <Progress value={60} size="md" />
      <Progress value={60} size="lg" glass />

      {/* Circular progress */}
      <div className="flex gap-4 items-center">
        <CircularProgress value={progress} showValue size={60} />
        <CircularProgress value={80} variant="success" size={50} />
        <CircularProgress value={45} variant="warning" size={50} />
        <CircularProgress indeterminate variant="default" size={40} />
      </div>
    </div>
  );
}

```

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

### Badge Component Examples (React)

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Illustrates the various styles and variants of the Badge component from @pikoloo/darwin-ui. It showcases basic, semantic, and status-specific badges.

```tsx
import { Badge } from "@pikoloo/darwin-ui";

function BadgeExamples() {
  return (
    <div className="flex flex-wrap gap-2">
      {/* Basic variants */}
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="glass">Glass</Badge>

      {/* Semantic variants */}
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="info">Info</Badge>

      {/* Status variants */}
      <Badge variant="published">Published</Badge>
      <Badge variant="draft">Draft</Badge>
      <Badge variant="archived">Archived</Badge>
      <Badge variant="new">New</Badge>
      <Badge variant="read">Read</Badge>
      <Badge variant="responded">Responded</Badge>
    </div>
  );
}

```

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

### Configure ESLint for React and React DOM Linting

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/docs/README.md

This JavaScript configuration integrates ESLint with React-specific linting rules using 'eslint-plugin-react-x' and 'eslint-plugin-react-dom'. It requires the necessary plugins to be installed and assumes TypeScript project configurations are available.

```javascript
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}']
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

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

### DropdownMenu Example with React and TypeScript

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

A comprehensive example demonstrating the usage of the DropdownMenu component from the '@pikoloo/darwin-ui' library. This snippet showcases how to integrate various sub-components like DropdownMenuItem, DropdownMenuCheckboxItem, and DropdownMenuSeparator to create a functional dropdown menu with options, settings, and a dark mode toggle. It utilizes 'lucide-react' for icons.

```tsx
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
} from "@pikoloo/darwin-ui";
import { Button } from "@pikoloo/darwin-ui";
import { Settings, User, LogOut, Moon } from "lucide-react";

function DropdownMenuExample() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">
          <Settings className="w-4 h-4 mr-2" />
          Options
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="start" glass>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />

        <DropdownMenuItem onSelect={() => console.log("Profile clicked")}>
          <User className="w-4 h-4 mr-2" />
          Profile
          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
        </DropdownMenuItem>

        <DropdownMenuItem onSelect={() => console.log("Settings clicked")}>
          <Settings className="w-4 h-4 mr-2" />
          Settings
          <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
        </DropdownMenuItem>

        <DropdownMenuSeparator />

        <DropdownMenuCheckboxItem
          checked={darkMode}
          onCheckedChange={setDarkMode}
        >
          <Moon className="w-4 h-4 mr-2" />
          Dark Mode
        </DropdownMenuCheckboxItem>

        <DropdownMenuSeparator />

        <DropdownMenuItem destructive onSelect={() => console.log("Logout")}>
          <LogOut className="w-4 h-4 mr-2" />
          Log out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

```

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

### Darwin UI Card Component Examples

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the usage of the Darwin UI Card component system, including standard cards and cards with a frosted glass effect. It shows how to structure content with header, title, description, content, footer, and action slots.

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction
} from "@pikoloo/darwin-ui";
import { Button } from "@pikoloo/darwin-ui";

function CardExample() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      {/* Standard card */}
      <Card>
        <CardHeader>
          <CardTitle>Account Settings</CardTitle>
          <CardDescription>
            Manage your account preferences and security settings.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-zinc-600 dark:text-zinc-400">
            Your account is currently active and in good standing.
          </p>
        </CardContent>
        <CardFooter>
          <Button variant="primary">Save Changes</Button>
          <Button variant="ghost">Cancel</Button>
        </CardFooter>
      </Card>

      {/* Glass effect card */}
      <Card glass>
        <CardHeader>
          <CardTitle>Glass Card</CardTitle>
          <CardDescription>
            This card has the frosted glass effect enabled.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm">
            Perfect for overlaying on images or gradients.
          </p>
        </CardContent>
        <CardAction>
          <Button variant="outline" size="sm">Learn More</Button>
        </CardAction>
      </Card>
    </div>
  );
}

```

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

### Table Component Example (React)

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the usage of the Table component from @pikoloo/darwin-ui. It includes features like headers, body, rows, cells, loading states, and empty states. It utilizes other components like Badge and Button.

```tsx
import {
  Table,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
  TableHeaderCell,
  TableLoadingRows,
  TableEmptyRow,
} from "@pikoloo/darwin-ui";
import { Badge } from "@pikoloo/darwin-ui";

function TableExample() {
  const [loading, setLoading] = useState(false);
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com", status: "active" },
    { id: 2, name: "Jane Smith", email: "jane@example.com", status: "pending" },
    { id: 3, name: "Bob Wilson", email: "bob@example.com", status: "inactive" },
  ];

  const getStatusBadge = (status: string) => {
    const variants = {
      active: "success",
      pending: "warning",
      inactive: "secondary",
    };
    return <Badge variant={variants[status]}>{status}</Badge>;
  };

  return (
    <Table glass>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Email</TableHeaderCell>
          <TableHeaderCell>Status</TableHeaderCell>
          <TableHeaderCell>Actions</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {loading ? (
          <TableLoadingRows
            rows={3}
            colSkeletons={["w-32 h-4", "w-48 h-4", "w-20 h-6", "w-16 h-8"]}
          />
        ) : users.length === 0 ? (
          <TableEmptyRow colSpan={4}>
            <p className="text-zinc-500">No users found</p>
            <Button variant="outline" size="sm">Add User</Button>
          </TableEmptyRow>
        ) : (
          users.map((user) => (
            <TableRow key={user.id} fadeIn>
              <TableCell>{user.name}</TableCell>
              <TableCell>{user.email}</TableCell>
              <TableCell>{getStatusBadge(user.status)}</TableCell>
              <TableCell>
                <Button variant="ghost" size="sm">Edit</Button>
              </TableCell>
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  );
}

```

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

### Tabs Component Example with Spring Transitions

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the usage of the Tabs component from Darwin UI, featuring spring-based transitions and ARIA accessibility. It requires React's useState hook for managing the active tab and imports necessary components from '@pikoloo/darwin-ui'.

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@pikoloo/darwin-ui";
import { useState } from "react";

function TabsExample() {
  const [activeTab, setActiveTab] = useState("overview");

  return (
    <Tabs value={activeTab} onValueChange={setActiveTab} glass>
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="reports">Reports</TabsTrigger>
        <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
      </TabsList>

      <TabsContent value="overview">
        <Card>
          <CardContent className="pt-6">
            <h3 className="text-lg font-semibold mb-2">Overview</h3>
            <p className="text-zinc-600 dark:text-zinc-400">
              Your dashboard overview content goes here.
            </p>
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="analytics">
        <Card>
          <CardContent className="pt-6">
            <h3 className="text-lg font-semibold mb-2">Analytics</h3>
            <p className="text-zinc-600 dark:text-zinc-400">
              View your analytics and metrics.
            </p>
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="reports">
        <Card>
          <CardContent className="pt-6">
            <h3 className="text-lg font-semibold mb-2">Reports</h3>
            <p className="text-zinc-600 dark:text-zinc-400">
              Generate and download reports.
            </p>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}

```

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

### Darwin UI Button Component Examples

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Showcases various implementations of the Darwin UI Button component, including different variants, icon usage, loading states, sizes, and compound components. It utilizes Framer Motion for animations and Lucide React for icons.

```tsx
import { Button } from "@pikoloo/darwin-ui";
import { Save, Trash2, Settings } from "lucide-react";
import { useState } from "react";

function ButtonExamples() {
  const [loading, setLoading] = useState(false);

  return (
    <div className="flex flex-wrap gap-4">
      {/* Basic variants */}
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link Button</Button>
      <Button variant="success">Success</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="accent">Accent</Button>

      {/* With icons */}
      <Button variant="primary" leftIcon={<Save />}>
        Save Changes
      </Button>
      <Button variant="destructive" rightIcon={<Trash2 />}>
        Delete Item
      </Button>

      {/* Loading state */}
      <Button
        variant="primary"
        loading={loading}
        loadingText="Saving..."
        onClick={() => {
          setLoading(true);
          setTimeout(() => setLoading(false), 2000);
        }}
      >
        Save
      </Button>

      {/* Sizes */}
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>

      {/* Icon button */}
      <Button.Icon variant="ghost">
        <Settings className="w-4 h-4" />
      </Button.Icon>

      {/* Full width with glass effect */}
      <Button variant="primary" fullWidth glass>
        Full Width Glass Button
      </Button>

      {/* Compound components */}
      <Button.Ghost>Ghost Shorthand</Button.Ghost>
      <Button.Outline>Outline Shorthand</Button.Outline>
      <Button.Destructive>Delete Shorthand</Button.Destructive>
    </div>
  );
}

```

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

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

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/docs/README.md

This JavaScript configuration enhances ESLint for TypeScript projects by enabling type-aware lint rules. It requires TypeScript project configurations like 'tsconfig.node.json' and 'tsconfig.app.json' to be present.

```javascript
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}']
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

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

### Integrate Darwin UI Styles with Tailwind CSS

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/README.md

Provides the necessary CSS import statement to integrate Darwin UI's styles with your existing Tailwind CSS setup, ensuring consistent design across your application.

```css
/* In your global CSS */
@import "tailwindcss";
@import "@pikoloo/darwin-ui/styles";
```

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

### URL Path Normalization in Darwin UI

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/docs/index.html

This JavaScript code snippet normalizes the URL path for the Darwin UI library. It decodes and reconstructs the search parameters if the path starts with a '/'. This ensures consistent URL handling within the application.

```javascript
function(l) { if (l.search[1] === '/') { var decoded = l.search.slice(1).split('&').map(function(s) { return s.replace(/~and~/g, '&') }).join('?'); window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash ); } }(window.location))
```

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

### Import Darwin UI Styles

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/docs/public/llms.txt

This code snippet demonstrates how to import the necessary styles for Darwin UI into your application's entry point. This ensures that all components are styled correctly.

```javascript
import '@pikoloo/darwin-ui/styles.css';
```

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

### Clone Darwin UI Repository

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/CONTRIBUTING.md

Instructions for forking and cloning the Darwin UI repository to your local machine. This is the initial step for contributing to the project.

```bash
git clone https://github.com/YOUR_USERNAME/darwin-ui.git
```

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

### Input and TextArea Components with Darwin UI

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the use of Input, SearchInput, and Textarea components from '@pikoloo/darwin-ui'. Supports features like icons, error/success states, search variants, and auto-resizing textareas. Requires 'lucide-react' for icons.

```tsx
import { Input, SearchInput, Textarea } from "@pikoloo/darwin-ui";
import { Mail, Lock } from "lucide-react";

function InputExamples() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [search, setSearch] = useState("");
  const [bio, setBio] = useState("");
  const [emailError, setEmailError] = useState(false);

  const validateEmail = (value: string) => {
    setEmail(value);
    setEmailError(!value.includes("@") && value.length > 0);
  };

  return (
    <div className="space-y-4 max-w-md">
      {/* Basic input with icon */}
      <Input
        placeholder="Enter your email"
        leftIcon={<Mail className="w-4 h-4" />}
        value={email}
        onChange={(e) => validateEmail(e.target.value)}
        error={emailError}
      />

      {/* Password input */}
      <Input.Password
        placeholder="Enter password"
        leftIcon={<Lock className="w-4 h-4" />}
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />

      {/* Search input (built-in search icon) */}
      <Input.Search
        placeholder="Search..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />

      {/* Success state */}
      <Input
        placeholder="Verified email"
        value="user@example.com"
        success
        disabled
      />

      {/* Sizes */}
      <Input size="sm" placeholder="Small input" />
      <Input size="md" placeholder="Medium input (default)" />
      <Input size="lg" placeholder="Large input" />

      {/* TextArea with auto-resize */}
      <Input.TextArea
        placeholder="Tell us about yourself..."
        value={bio}
        onChange={(e) => setBio(e.target.value)}
        autoResize
        size="md"
      />

      {/* TextArea with manual resize */}
      <Textarea
        placeholder="Write your message..."
        resize="vertical"
        rows={4}
      />
    </div>
  );
}

```

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

### Add Darwin UI components using shadcn CLI

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/README.md

Demonstrates how to add individual Darwin UI components to your project using the shadcn CLI. This allows for selective component integration.

```bash
# Add individual components
npx shadcn add https://darwin-ui.mandalsuraj.com/registry/button.json
npx shadcn add https://darwin-ui.mandalsuraj.com/registry/card.json
```

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

### Implement Toast Notification System with Context API

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the implementation of a toast notification system using the ToastProvider and useToast hook from '@pikoloo/darwin-ui'. This system supports auto-dismissal, various toast types (info, success, warning, error), and a context-based API for easy integration. The ToastProvider must wrap the application, and the useToast hook provides the showToast function to display notifications with customizable options like title, type, and duration.

```tsx
import { ToastProvider, useToast } from "@pikoloo/darwin-ui";
import { Button } from "@pikoloo/darwin-ui";

// Wrap your app with ToastProvider
function App() {
  return (
    <ToastProvider>
      <ToastDemo />
    </ToastProvider>
  );
}

function ToastDemo() {
  const { showToast } = useToast();

  return (
    <div className="flex flex-wrap gap-4">
      <Button
        variant="primary"
        onClick={() => showToast("Operation completed successfully!", {
          type: "success",
          title: "Success",
          duration: 3000,
        })}
      >
        Success Toast
      </Button>

      <Button
        variant="destructive"
        onClick={() => showToast("Something went wrong. Please try again.", {
          type: "error",
          title: "Error",
          duration: 5000,
        })}
      >
        Error Toast
      </Button>

      <Button
        variant="outline"
        onClick={() => showToast("Please review your settings.", {
          type: "warning",
          title: "Warning",
        })}
      >
        Warning Toast
      </Button>

      <Button
        variant="ghost"
        onClick={() => showToast("New features are available!", {
          type: "info",
          glass: true,  // frosted glass effect
        })}
      >
        Info Toast (Glass)
      </Button>
    </div>
  );
}

```

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

### Select and MultiSelect Components with Darwin UI

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Illustrates the usage of Select and MultiSelect components from '@pikoloo/darwin-ui'. Features include portal rendering, single/multiple selection, animated transitions, and tag display for multi-select. Supports options as arrays or children.

```tsx
import { Select, MultiSelect } from "@pikoloo/darwin-ui";

function SelectExamples() {
  const [country, setCountry] = useState("us");
  const [selectedTags, setSelectedTags] = useState<string[]>([]);

  const countryOptions = [
    { value: "us", label: "United States" },
    { value: "uk", label: "United Kingdom" },
    { value: "ca", label: "Canada" },
    { value: "au", label: "Australia", disabled: true },
  ];

  const tagOptions = [
    { value: "react", label: "React" },
    { value: "typescript", label: "TypeScript" },
    { value: "tailwind", label: "Tailwind CSS" },
    { value: "nextjs", label: "Next.js" },
    { value: "nodejs", label: "Node.js" },
  ];

  return (
    <div className="space-y-6 max-w-md">
      {/* Single select with options array */}
      <Select
        value={country}
        onChange={(e) => setCountry(e.target.value)}
        options={countryOptions}
        placeholder="Select a country"
      />

      {/* Single select with children */}
      <Select
        value={country}
        onChange={(e) => setCountry(e.target.value)}
      >
        <Select.Option value="us">United States</Select.Option>
        <Select.Option value="uk">United Kingdom</Select.Option>
        <Select.Option value="ca">Canada</Select.Option>
      </Select>

      {/* Multi-select with tags */}
      <Select.Multiple
        value={selectedTags}
        onChange={setSelectedTags}
        options={tagOptions}
        placeholder="Select technologies"
        showTags
        maxDisplayCount={2}
        glass
      />

      {/* Alternative MultiSelect export */}
      <MultiSelect
        value={selectedTags}
        onChange={setSelectedTags}
        options={tagOptions}
        placeholder="Choose tags..."
      />
    </div>
  );
}

```

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

### Import Darwin UI Styles

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

This code snippet demonstrates how to import the necessary global styles for Darwin UI into your application's entry point. This ensures all components render with the correct styling.

```tsx
// Import styles in your app entry point
import "@pikoloo/darwin-ui/styles";
```

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

### Configure Darwin UI Animations

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/docs/public/llms.txt

Demonstrates how to globally configure animations in Darwin UI. This includes disabling all animations, customizing animation durations, and disabling specific animation types like hover or scale. The library respects the `prefers-reduced-motion` system preference.

```typescript
import { configureAnimations, ANIMATION_CONFIG } from '@pikoloo/darwin-ui';

// Disable all animations
configureAnimations({ enabled: false });

// Customize durations
configureAnimations({
  durations: { fast: 0.05, normal: 0.1, slow: 0.15 }
});

// Disable specific animation types
configureAnimations({
  disable: { hover: true, scale: true }
});
```

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

### Custom React Hooks for Responsive Design and Event Handling (TypeScript)

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the usage of custom React hooks from '@pikoloo/darwin-ui' for detecting mobile devices, applying media queries, and handling keyboard events like the ESC key. These hooks simplify responsive design and interactive element management within React applications.

```tsx
import { useMediaQuery, useIsMobile, useEscapeKey } from "@pikoloo/darwin-ui";
import { useState } from "react";

function HooksExample() {
  const [modalOpen, setModalOpen] = useState(false);

  // Detect mobile devices (max-width: 768px)
  const isMobile = useIsMobile();

  // Custom media query
  const isDesktop = useMediaQuery("(min-width: 1024px)");
  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
  const isLandscape = useMediaQuery("(orientation: landscape)");

  // ESC key handler (only active when modal is open)
  useEscapeKey(() => {
    setModalOpen(false);
    console.log("Modal closed via ESC key");
  }, modalOpen);

  return (
    <div className="space-y-4">
      <p>Is Mobile: {isMobile ? "Yes" : "No"}</p>
      <p>Is Desktop: {isDesktop ? "Yes" : "No"}</p>
      <p>Prefers Dark Mode: {prefersDark ? "Yes" : "No"}</p>
      <p>Is Landscape: {isLandscape ? "Yes" : "No"}</p>

      {isMobile ? (
        <Button fullWidth variant="primary">
          Mobile-Optimized Button
        </Button>
      ) : (
        <Button variant="primary">
          Desktop Button
        </Button>
      )}

      <Button onClick={() => setModalOpen(true)}>
        Open Modal (Press ESC to close)
      </Button>
    </div>
  );
}

// Assuming Button component is available and imported
function Button({ children, ...props }) {
  return <button {...props}>{children}</button>;
}
```

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

### Checkbox and Switch Components in React

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the usage of Checkbox and Switch components for handling boolean states. Supports features like labels, indeterminate states, disabled states, and glass effects. Requires React and the @pikoloo/darwin-ui library.

```tsx
import { Checkbox, Switch } from "@pikoloo/darwin-ui";

function CheckboxSwitchExamples() {
  const [agreed, setAgreed] = useState(false);
  const [notifications, setNotifications] = useState(true);
  const [selectAll, setSelectAll] = useState<boolean | "indeterminate">(false);

  return (
    <div className="space-y-4">
      {/* Basic checkbox */}
      <Checkbox
        checked={agreed}
        onChange={setAgreed}
        label="I agree to the terms and conditions"
      />

      {/* Checkbox without label */}
      <Checkbox
        checked={notifications}
        onChange={setNotifications}
      />

      {/* Indeterminate state */}
      <Checkbox
        checked={selectAll === true}
        indeterminate={selectAll === "indeterminate"}
        onChange={(checked) => setSelectAll(checked)}
        label="Select all items"
      />

      {/* Disabled checkbox */}
      <Checkbox
        checked={true}
        disabled
        label="Disabled (checked)"
      />

      {/* Glass effect */}
      <Checkbox
        checked={agreed}
        onChange={setAgreed}
        label="Glass effect checkbox"
        glass
      />

      {/* Switch components */}
      <Switch
        checked={notifications}
        onChange={setNotifications}
        label="Enable notifications"
      />

      <Switch
        checked={false}
        onChange={() => {}}
        label="Disabled switch"
        disabled
      />

      <Switch
        checked={true}
        onChange={() => {}}
        label="Glass effect switch"
        glass
      />
    </div>
  );
}

```

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

### Render Accessible Modal with Framer Motion Animations

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates how to use the Modal component from '@pikoloo/darwin-ui' to create an accessible modal dialog. It includes features like backdrop blur, focus lock, ESC key handling, and smooth animations. The component requires 'isOpen' and 'onClose' props for state management and accepts various props for customization like 'title' and 'size'.

```tsx
import { Modal } from "@pikoloo/darwin-ui";
import { Button } from "@pikoloo/darwin-ui";

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

  return (
    <>
      <Button variant="primary" onClick={() => setIsOpen(true)}>
        Open Modal
      </Button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Confirm Action"
        size="md"  // sm | md | lg | xl
        glass  // optional frosted glass effect
      >
        <div className="space-y-4">
          <p className="text-zinc-600 dark:text-zinc-400">
            Are you sure you want to proceed with this action?
            This cannot be undone.
          </p>
          <div className="flex justify-end gap-2">
            <Button variant="ghost" onClick={() => setIsOpen(false)}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={() => {
                // Handle confirm
                setIsOpen(false);
              }}
            >
              Confirm Delete
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}

```

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

### Implement Composable Dialog System with Custom Components

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Shows how to utilize the Dialog system from '@pikoloo/darwin-ui' for a flexible dialog interface. This system breaks down the dialog into separate components like DialogTrigger, DialogContent, DialogHeader, DialogBody, and DialogFooter, allowing for granular control over the dialog's structure and content. It requires a state management for the 'open' prop and uses DialogTrigger to initiate the dialog.

```tsx
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogBody,
  DialogFooter,
  DialogClose,
} from "@pikoloo/darwin-ui";
import { Button } from "@pikoloo/darwin-ui";

function DialogExample() {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline">Edit Profile</Button>
      </DialogTrigger>

      <DialogContent size="md" glass>
        <DialogClose /> {/* X button in top-right corner */}

        <DialogHeader>
          <DialogTitle>Edit Profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you're done.
          </DialogDescription>
        </DialogHeader>

        <DialogBody>
          <div className="space-y-4">
            <Input placeholder="Display name" />
            <Input placeholder="Username" />
            <Input.TextArea placeholder="Bio" rows={3} />
          </div>
        </DialogBody>

        <DialogFooter>
          <DialogClose asChild>
            <Button variant="ghost">Cancel</Button>
          </DialogClose>
          <Button variant="primary" onClick={() => setOpen(false)}>
            Save Changes
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

```

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

### Darwin UI Theming with CSS Variables

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/README.md

Illustrates how to define and override CSS variables for Darwin UI's theming, supporting both dark (default) and light modes. This allows for custom styling and theme adaptation.

```css
/* Dark mode (default) */
:root {
  --background: 0 0% 4%;
  --foreground: 0 0% 95%;
  --card: 0 0% 6%;
  --border: 0 0% 15%;
}

/* Light mode */
.light {
  --background: 0 0% 98%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --border: 0 0% 85%;
}
```

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

### Utilize Darwin UI Hooks in React

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/README.md

Shows how to import and use custom hooks provided by Darwin UI for detecting mobile devices, checking media queries, and handling escape key events.

```tsx
import { useIsMobile, useMediaQuery, useEscapeKey } from "@pikoloo/darwin-ui";

// Detect mobile devices
const isMobile = useIsMobile();

// Custom media query
const isDesktop = useMediaQuery("(min-width: 1024px)");

// ESC key handler
useEscapeKey(() => closeModal());
```

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

### Darwin UI Charts: Bar, Line, Area, Pie, Donut, Stacked Bar

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Demonstrates the implementation of various chart types provided by the Darwin UI library. These components are built on Recharts and offer dark theme styling. They require data arrays and key configurations for axes and data series. The charts are suitable for visualizing different types of data, from sales trends to traffic sources.

```tsx
import {
  BarChart,
  LineChart,
  AreaChart,
  PieChart,
  DonutChart,
  StackedBarChart
} from "@pikoloo/darwin-ui";

function ChartExamples() {
  const salesData = [
    { month: "Jan", revenue: 4000, expenses: 2400 },
    { month: "Feb", revenue: 3000, expenses: 1398 },
    { month: "Mar", revenue: 2000, expenses: 9800 },
    { month: "Apr", revenue: 2780, expenses: 3908 },
    { month: "May", revenue: 1890, expenses: 4800 },
    { month: "Jun", revenue: 2390, expenses: 3800 },
  ];

  const pieData = [
    { name: "Desktop", value: 400 },
    { name: "Mobile", value: 300 },
    { name: "Tablet", value: 200 },
    { name: "Other", value: 100 },
  ];

  return (
    <div className="space-y-8">
      {/* Bar Chart */}
      <Card>
        <CardHeader>
          <CardTitle>Revenue Overview</CardTitle>
        </CardHeader>
        <CardContent>
          <BarChart
            data={salesData}
            xKey="month"
            bars={[
              { dataKey: "revenue", fill: "#60a5fa", name: "Revenue" },
              { dataKey: "expenses", fill: "#f87171", name: "Expenses" },
            ]}
            height={300}
            showLegend
          />
        </CardContent>
      </Card>

      {/* Line Chart */}
      <Card>
        <CardHeader>
          <CardTitle>Trend Analysis</CardTitle>
        </CardHeader>
        <CardContent>
          <LineChart
            data={salesData}
            xKey="month"
            lines={[
              { dataKey: "revenue", stroke: "#34d399", name: "Revenue" },
              { dataKey: "expenses", stroke: "#fbbf24", name: "Expenses" },
            ]}
            height={300}
            showLegend
          />
        </CardContent>
      </Card>

      {/* Area Chart */}
      <Card>
        <CardHeader>
          <CardTitle>Cumulative Data</CardTitle>
        </CardHeader>
        <CardContent>
          <AreaChart
            data={salesData}
            xKey="month"
            areas={[
              { dataKey: "revenue", fill: "#60a5fa", stroke: "#3b82f6" },
            ]}
            height={300}
            stacked={false}
          />
        </CardContent>
      </Card>

      {/* Pie and Donut Charts */}
      <div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Traffic Sources</CardTitle>
          </CardHeader>
          <CardContent>
            <PieChart
              data={pieData}
              nameKey="name"
              valueKey="value"
              height={250}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Device Distribution</CardTitle>
          </CardHeader>
          <CardContent>
            <DonutChart
              data={pieData}
              nameKey="name"
              valueKey="value"
              height={250}
              innerRadius={60}
              outerRadius={80}
            />
          </CardContent>
        </Card>
      </div>

      {/* Stacked Bar Chart */}
      <Card>
        <CardHeader>
          <CardTitle>Quarterly Performance</CardTitle>
        </CardHeader>
        <CardContent>
          <StackedBarChart
            data={salesData}
            xKey="month"
            stackKeys={[
              { dataKey: "revenue", fill: "#60a5fa", name: "Revenue" },
              { dataKey: "expenses", fill: "#a78bfa", name: "Expenses" },
            ]}
            height={300}
            showLegend
          />
        </CardContent>
      </Card>
    </div>
  );
}

```

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

### Create Feature Branch for Contributions

Source: https://github.com/surajmandalcell/darwin-ui/blob/main/CONTRIBUTING.md

This command creates a new branch for developing a specific feature or fix. It follows a common Git workflow for managing contributions.

```bash
git checkout -b feature/your-feature
```

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

### Avatar and AvatarGroup Components in React

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Showcases the Avatar component for displaying user profiles with image support, fallback initials, and automatic color generation. Includes the AvatarGroup component for displaying multiple avatars with a max limit. Requires React and the @pikoloo/darwin-ui library.

```tsx
import { Avatar, AvatarGroup } from "@pikoloo/darwin-ui";

function AvatarExamples() {
  return (
    <div className="space-y-6">
      {/* Basic avatars with images */}
      <div className="flex gap-4 items-center">
        <Avatar
          src="https://i.pravatar.cc/150?img=1"
          alt="John Doe"
          fallback="John Doe"
          size="xs"
        />
        <Avatar
          src="https://i.pravatar.cc/150?img=2"
          alt="Jane Smith"
          fallback="Jane Smith"
          size="sm"
        />
        <Avatar
          src="https://i.pravatar.cc/150?img=3"
          fallback="Bob Wilson"
          size="md"
        />
        <Avatar
          src="https://i.pravatar.cc/150?img=4"
          fallback="Alice Brown"
          size="lg"
        />
        <Avatar
          src="https://i.pravatar.cc/150?img=5"
          fallback="Charlie Davis"
          size="xl"
        />
      </div>

      {/* Fallback initials (no image) */}
      <div className="flex gap-4 items-center">
        <Avatar fallback="John Doe" size="md" />
        <Avatar fallback="Jane Smith" size="md" />
        <Avatar fallback="Bob" size="md" />
        <Avatar fallback="A" size="md" glass />
      </div>

      {/* Avatar group with max limit */}
      <AvatarGroup max={4}>
        <Avatar src="https://i.pravatar.cc/150?img=1" fallback="User 1" />
        <Avatar src="https://i.pravatar.cc/150?img=2" fallback="User 2" />
        <Avatar src="https://i.pravatar.cc/150?img=3" fallback="User 3" />
        <Avatar src="https://i.pravatar.cc/150?img=4" fallback="User 4" />
        <Avatar src="https://i.pravatar.cc/150?img=5" fallback="User 5" />
        <Avatar src="https://i.pravatar.cc/150?img=6" fallback="User 6" />
      </AvatarGroup>
    </div>
  );
}

```

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

### Accordion Component with Collapsible Content

Source: https://context7.com/surajmandalcell/darwin-ui/llms.txt

Illustrates the Accordion component from Darwin UI, which allows for collapsible content sections with smooth height animations. It supports both single and multiple expansion modes and can be styled with a glass effect. Imports are from '@pikoloo/darwin-ui'.

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent
} from "@pikoloo/darwin-ui";

function AccordionExample() {
  return (
    <div className="space-y-6">
      {/* Single expansion mode (default) */}
      <Accordion type="single" defaultValue="item-1">
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Darwin UI?</AccordionTrigger>
          <AccordionContent>
            Darwin UI is a macOS-inspired React component library with
            glass-morphism aesthetic and full light/dark theme support.
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="item-2">
          <AccordionTrigger>How do I install it?</AccordionTrigger>
          <AccordionContent>
            Install via npm with <code>npm install @pikoloo/darwin-ui</code>
            and import the styles in your app entry point.
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="item-3">
          <AccordionTrigger>Is it accessible?</AccordionTrigger>
          <AccordionContent>
            Yes! All components are built with accessibility in mind,
            including proper ARIA attributes and keyboard navigation.
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      {/* Multiple expansion mode with glass effect */}
      <Accordion type="multiple" defaultValue={["faq-1"]} glass>
        <AccordionItem value="faq-1">
          <AccordionTrigger>Can I expand multiple items?</AccordionTrigger>
          <AccordionContent>
            Yes! Set type="multiple" to allow multiple panels open at once.
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="faq-2">
          <AccordionTrigger>What is the glass effect?</AccordionTrigger>
          <AccordionContent>
            The glass prop adds a frosted glass background with backdrop blur.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

```