@djangocfg/layouts 1.4.26 → 1.4.28

package/src/layouts/UILayout/config/components/forms.config.tsx

@@ -1,996 +0,0 @@
-/**
- * Form Components Configuration
- */
-
-import React, { useState, useEffect, useMemo } from 'react';
-import {
-  Button,
-  ButtonLink,
-  DownloadButton,
-  Input,
-  Checkbox,
-  Label,
-  RadioGroup,
-  RadioGroupItem,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Textarea,
-  Switch,
-  Slider,
-  Combobox,
-  MultiSelect,
-  MultiSelectPro,
-  MultiSelectProAsync,
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-  PhoneInput,
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Field,
-  useDebounce,
-} from '@djangocfg/ui';
-import { JsonSchemaForm } from '@djangocfg/ui/tools';
-import type { ComponentConfig } from './types';
-
-export const FORM_COMPONENTS: ComponentConfig[] = [
-  {
-    name: 'Label',
-    category: 'forms',
-    description: 'Accessible label component for form inputs',
-    importPath: "import { Label } from '@djangocfg/ui';",
-    example: `<div className="space-y-2">
-  <Label htmlFor="email">Email address</Label>
-  <Input id="email" type="email" placeholder="Enter your email" />
-</div>`,
-    preview: (
-      <div className="space-y-2 max-w-sm">
-        <Label htmlFor="demo-email">Email address</Label>
-        <Input id="demo-email" type="email" placeholder="Enter your email" />
-      </div>
-    ),
-  },
-  {
-    name: 'Button',
-    category: 'forms',
-    description: 'Interactive button with multiple variants, sizes, and loading state. Use ButtonLink for navigation.',
-    importPath: "import { Button, ButtonLink } from '@djangocfg/ui';",
-    example: `// Variants
-<Button variant="default">Click me</Button>
-<Button variant="destructive">Delete</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
-
-// Sizes
-<Button size="sm">Small</Button>
-<Button size="lg">Large</Button>
-
-// Loading state
-<Button loading={true}>Saving...</Button>
-<Button loading={false}>Save</Button>
-
-// ButtonLink for navigation with Next.js Link
-<ButtonLink href="/dashboard">Go to Dashboard</ButtonLink>
-<ButtonLink href="/settings" variant="outline">Settings</ButtonLink>`,
-    preview: (
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-wrap gap-3">
-          <Button variant="default">Click me</Button>
-          <Button variant="destructive">Delete</Button>
-          <Button variant="outline">Outline</Button>
-          <Button variant="ghost">Ghost</Button>
-        </div>
-        <div className="flex flex-wrap gap-3">
-          <Button size="sm">Small</Button>
-          <Button size="lg">Large</Button>
-        </div>
-        <div className="flex flex-wrap gap-3">
-          <Button loading={true}>Saving...</Button>
-          <Button loading={false}>Save</Button>
-        </div>
-        <div className="flex flex-wrap gap-3">
-          <ButtonLink href="#">Go to Dashboard</ButtonLink>
-          <ButtonLink href="#" variant="outline">Settings</ButtonLink>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'DownloadButton',
-    category: 'forms',
-    description: 'Button with download functionality, status indicators, and authentication support',
-    importPath: `import { DownloadButton } from '@djangocfg/ui';`,
-    example: `// Simple download
-<DownloadButton
-  url="/api/files/report.pdf"
-  filename="monthly-report.pdf"
->
-  Download Report
-</DownloadButton>
-
-// With callbacks
-<DownloadButton
-  url="/api/export/users"
-  method="POST"
-  body={{ format: "csv" }}
-  onDownloadStart={() => console.log("Starting...")}
-  onDownloadComplete={(filename) => console.log("Done:", filename)}
-  onDownloadError={(error) => console.error("Error:", error)}
->
-  Export Users
-</DownloadButton>
-
-// Different variants
-<DownloadButton url="/api/data" variant="outline" size="sm">
-  Download Data
-</DownloadButton>`,
-    preview: (
-      <div className="space-y-4">
-        {/* Basic example */}
-        <div className="space-y-2">
-          <p className="text-sm font-medium">Basic Download:</p>
-          <DownloadButton
-            url="https://jsonplaceholder.typicode.com/posts/1"
-            filename="example-data.json"
-          >
-            Download Example
-          </DownloadButton>
-        </div>
-
-        {/* Variants */}
-        <div className="space-y-2">
-          <p className="text-sm font-medium">Variants:</p>
-          <div className="flex flex-wrap gap-2">
-            <DownloadButton
-              url="https://jsonplaceholder.typicode.com/posts/1"
-              filename="data.json"
-              variant="default"
-            >
-              Default
-            </DownloadButton>
-            <DownloadButton
-              url="https://jsonplaceholder.typicode.com/posts/1"
-              filename="data.json"
-              variant="outline"
-            >
-              Outline
-            </DownloadButton>
-            <DownloadButton
-              url="https://jsonplaceholder.typicode.com/posts/1"
-              filename="data.json"
-              variant="secondary"
-            >
-              Secondary
-            </DownloadButton>
-          </div>
-        </div>
-
-        {/* Sizes */}
-        <div className="space-y-2">
-          <p className="text-sm font-medium">Sizes:</p>
-          <div className="flex flex-wrap items-center gap-2">
-            <DownloadButton
-              url="https://jsonplaceholder.typicode.com/posts/1"
-              filename="data.json"
-              size="sm"
-            >
-              Small
-            </DownloadButton>
-            <DownloadButton
-              url="https://jsonplaceholder.typicode.com/posts/1"
-              filename="data.json"
-              size="default"
-            >
-              Default
-            </DownloadButton>
-            <DownloadButton
-              url="https://jsonplaceholder.typicode.com/posts/1"
-              filename="data.json"
-              size="lg"
-            >
-              Large
-            </DownloadButton>
-          </div>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'Input',
-    category: 'forms',
-    description: 'Text input field with validation support',
-    importPath: "import { Input } from '@djangocfg/ui';",
-    example: `<Input type="text" placeholder="Enter text..." />
-<Input type="email" placeholder="Email" />
-<Input type="password" placeholder="Password" disabled />`,
-    preview: (
-      <div className="space-y-3 max-w-sm">
-        <Input type="text" placeholder="Enter text..." />
-        <Input type="email" placeholder="Email" />
-        <Input type="password" placeholder="Password" disabled />
-      </div>
-    ),
-  },
-  {
-    name: 'Checkbox',
-    category: 'forms',
-    description: 'Checkbox with label support',
-    importPath: "import { Checkbox, Label } from '@djangocfg/ui';",
-    example: `<div className="flex items-center gap-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>`,
-    preview: (
-      <div className="flex items-center gap-2">
-        <Checkbox id="terms" />
-        <Label htmlFor="terms">Accept terms and conditions</Label>
-      </div>
-    ),
-  },
-  {
-    name: 'RadioGroup',
-    category: 'forms',
-    description: 'Radio button group for single selection',
-    importPath: "import { RadioGroup, RadioGroupItem, Label } from '@djangocfg/ui';",
-    example: `<RadioGroup defaultValue="option1">
-  <div className="flex items-center gap-2">
-    <RadioGroupItem value="option1" id="opt1" />
-    <Label htmlFor="opt1">Option 1</Label>
-  </div>
-  <div className="flex items-center gap-2">
-    <RadioGroupItem value="option2" id="opt2" />
-    <Label htmlFor="opt2">Option 2</Label>
-  </div>
-</RadioGroup>`,
-    preview: (
-      <RadioGroup defaultValue="option1">
-        <div className="flex items-center gap-2">
-          <RadioGroupItem value="option1" id="opt1" />
-          <Label htmlFor="opt1">Option 1</Label>
-        </div>
-        <div className="flex items-center gap-2">
-          <RadioGroupItem value="option2" id="opt2" />
-          <Label htmlFor="opt2">Option 2</Label>
-        </div>
-      </RadioGroup>
-    ),
-  },
-  {
-    name: 'Select',
-    category: 'forms',
-    description: 'Dropdown select component',
-    importPath: "import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@djangocfg/ui';",
-    example: `<Select>
-  <SelectTrigger className="w-[200px]">
-    <SelectValue placeholder="Select option" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="1">Option 1</SelectItem>
-    <SelectItem value="2">Option 2</SelectItem>
-    <SelectItem value="3">Option 3</SelectItem>
-  </SelectContent>
-</Select>`,
-    preview: (
-      <Select>
-        <SelectTrigger className="w-[200px]">
-          <SelectValue placeholder="Select option" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="1">Option 1</SelectItem>
-          <SelectItem value="2">Option 2</SelectItem>
-          <SelectItem value="3">Option 3</SelectItem>
-        </SelectContent>
-      </Select>
-    ),
-  },
-  {
-    name: 'Textarea',
-    category: 'forms',
-    description: 'Multi-line text input',
-    importPath: "import { Textarea } from '@djangocfg/ui';",
-    example: `<Textarea placeholder="Enter your message..." rows={4} />`,
-    preview: (
-      <Textarea placeholder="Enter your message..." rows={4} className="max-w-sm" />
-    ),
-  },
-  {
-    name: 'Switch',
-    category: 'forms',
-    description: 'Toggle switch component',
-    importPath: "import { Switch, Label } from '@djangocfg/ui';",
-    example: `<div className="flex items-center gap-2">
-  <Switch id="notifications" />
-  <Label htmlFor="notifications">Enable notifications</Label>
-</div>`,
-    preview: (
-      <div className="flex items-center gap-2">
-        <Switch id="notifications" />
-        <Label htmlFor="notifications">Enable notifications</Label>
-      </div>
-    ),
-  },
-  {
-    name: 'Slider',
-    category: 'forms',
-    description: 'Range slider input',
-    importPath: "import { Slider } from '@djangocfg/ui';",
-    example: `<Slider defaultValue={[50]} max={100} step={1} className="w-[200px]" />`,
-    preview: (
-      <Slider defaultValue={[50]} max={100} step={1} className="w-[200px]" />
-    ),
-  },
-  {
-    name: 'Combobox',
-    category: 'forms',
-    description: 'Searchable dropdown with autocomplete',
-    importPath: "import { Combobox } from '@djangocfg/ui';",
-    example: `<Combobox
-  options={[
-    { value: "javascript", label: "JavaScript" },
-    { value: "typescript", label: "TypeScript" },
-    { value: "python", label: "Python" },
-    { value: "rust", label: "Rust" },
-  ]}
-  placeholder="Select language..."
-  searchPlaceholder="Search language..."
-  emptyText="No language found."
-/>`,
-    preview: (
-      <Combobox
-        options={[
-          { value: "javascript", label: "JavaScript" },
-          { value: "typescript", label: "TypeScript" },
-          { value: "python", label: "Python" },
-          { value: "rust", label: "Rust" },
-        ]}
-        placeholder="Select language..."
-        searchPlaceholder="Search language..."
-        emptyText="No language found."
-        className="w-[200px]"
-      />
-    ),
-  },
-  {
-    name: 'MultiSelect',
-    category: 'forms',
-    description: 'Multi-select dropdown with badges and search functionality',
-    importPath: "import { MultiSelect } from '@djangocfg/ui';",
-    example: `<MultiSelect
-  options={[
-    { value: "react", label: "React", description: "A JavaScript library for building user interfaces" },
-    { value: "vue", label: "Vue", description: "The Progressive JavaScript Framework" },
-    { value: "angular", label: "Angular", description: "Platform for building web applications" },
-    { value: "svelte", label: "Svelte", description: "Cybernetically enhanced web apps" },
-    { value: "next", label: "Next.js", description: "The React Framework for Production" },
-  ]}
-  placeholder="Select frameworks..."
-  searchPlaceholder="Search frameworks..."
-  emptyText="No framework found."
-  maxDisplay={2}
-  onChange={(value) => console.log('Selected:', value)}
-/>`,
-    preview: (
-      <MultiSelect
-        options={[
-          { value: "react", label: "React", description: "A JavaScript library for building user interfaces" },
-          { value: "vue", label: "Vue", description: "The Progressive JavaScript Framework" },
-          { value: "angular", label: "Angular", description: "Platform for building web applications" },
-          { value: "svelte", label: "Svelte", description: "Cybernetically enhanced web apps" },
-          { value: "next", label: "Next.js", description: "The React Framework for Production" },
-        ]}
-        placeholder="Select frameworks..."
-        searchPlaceholder="Search frameworks..."
-        emptyText="No framework found."
-        maxDisplay={2}
-        className="w-[300px]"
-      />
-    ),
-  },
-  {
-    name: 'MultiSelectPro',
-    category: 'forms',
-    description: 'Advanced multi-select with animations, custom styling, grouped options, and comprehensive accessibility. Supports variants, icons, gradients, responsive design, and imperative control via ref.',
-    importPath: "import { MultiSelectPro } from '@djangocfg/ui';",
-    example: `import { MultiSelectPro } from '@djangocfg/ui';
-import type { MultiSelectProOption } from '@djangocfg/ui';
-import { useState } from 'react';
-
-// Basic usage
-const [selected, setSelected] = useState<string[]>([]);
-
-<MultiSelectPro
-  options={[
-    { value: "react", label: "React" },
-    { value: "vue", label: "Vue.js" },
-    { value: "angular", label: "Angular" },
-  ]}
-  onValueChange={setSelected}
-  defaultValue={selected}
-  placeholder="Select frameworks..."
-/>
-
-// With custom styling and icons
-const styledOptions = [
-  {
-    value: "react",
-    label: "React",
-    style: {
-      badgeColor: "#61DAFB",
-      iconColor: "#282C34",
-    },
-  },
-  {
-    value: "vue",
-    label: "Vue.js",
-    style: {
-      gradient: "linear-gradient(135deg, #4FC08D 0%, #42B883 100%)",
-    },
-  },
-];
-
-<MultiSelectPro
-  options={styledOptions}
-  onValueChange={setSelected}
-  variant="secondary"
-  animationConfig={{
-    badgeAnimation: "bounce",
-    popoverAnimation: "scale",
-    duration: 0.3,
-  }}
-  maxCount={3}
-  closeOnSelect={false}
-/>
-
-// With grouped options
-const groupedOptions = [
-  {
-    heading: "Frontend Frameworks",
-    options: [
-      { value: "react", label: "React" },
-      { value: "vue", label: "Vue.js" },
-      { value: "angular", label: "Angular", disabled: true },
-    ],
-  },
-  {
-    heading: "Backend Technologies",
-    options: [
-      { value: "node", label: "Node.js" },
-      { value: "python", label: "Python" },
-    ],
-  },
-];
-
-<MultiSelectPro
-  options={groupedOptions}
-  onValueChange={setSelected}
-  placeholder="Select technologies..."
-  searchable={true}
-  responsive={true}
-  minWidth="200px"
-  maxWidth="500px"
-/>
-
-// With imperative control via ref
-import { useRef } from 'react';
-import type { MultiSelectProRef } from '@djangocfg/ui';
-
-const ref = useRef<MultiSelectProRef>(null);
-
-// Later in code:
-ref.current?.clear();
-ref.current?.reset();
-ref.current?.setSelectedValues(['react', 'vue']);
-const values = ref.current?.getSelectedValues();`,
-    preview: (
-      <div className="space-y-6">
-        <div className="space-y-2">
-          <p className="text-sm font-medium">Basic with animations:</p>
-          <MultiSelectPro
-            options={[
-              { value: "react", label: "React" },
-              { value: "vue", label: "Vue" },
-              { value: "angular", label: "Angular" },
-              { value: "svelte", label: "Svelte" },
-            ]}
-            defaultValue={[]}
-            onValueChange={() => {}}
-            placeholder="Select frameworks..."
-            animationConfig={{
-              badgeAnimation: "bounce",
-              popoverAnimation: "scale",
-              duration: 0.3,
-            }}
-            maxCount={2}
-            className="w-[350px]"
-          />
-        </div>
-
-        <div className="space-y-2">
-          <p className="text-sm font-medium">With variants and styles:</p>
-          <div className="grid grid-cols-2 gap-2">
-            <MultiSelectPro
-              options={[
-                { value: "1", label: "Option 1" },
-                { value: "2", label: "Option 2" },
-              ]}
-              defaultValue={["1"]}
-              onValueChange={() => {}}
-              variant="secondary"
-              placeholder="Secondary"
-              maxCount={1}
-            />
-            <MultiSelectPro
-              options={[
-                { value: "1", label: "Option 1" },
-                { value: "2", label: "Option 2" },
-              ]}
-              defaultValue={["2"]}
-              onValueChange={() => {}}
-              variant="destructive"
-              placeholder="Destructive"
-              maxCount={1}
-            />
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <p className="text-sm font-medium">Grouped options:</p>
-          <MultiSelectPro
-            options={[
-              {
-                heading: "Frontend",
-                options: [
-                  { value: "react", label: "React" },
-                  { value: "vue", label: "Vue" },
-                ],
-              },
-              {
-                heading: "Backend",
-                options: [
-                  { value: "node", label: "Node.js" },
-                  { value: "python", label: "Python" },
-                ],
-              },
-            ]}
-            defaultValue={[]}
-            onValueChange={() => {}}
-            placeholder="Select from groups..."
-            className="w-[350px]"
-            maxCount={2}
-          />
-        </div>
-
-        <div className="p-4 border rounded-md bg-muted/50">
-          <p className="text-sm font-medium mb-2">Features:</p>
-          <ul className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-muted-foreground">
-            <li>✨ Multiple variants (default, secondary, destructive, inverted)</li>
-            <li>🌈 Custom badge colors & gradients</li>
-            <li>📁 Grouped options with separators</li>
-            <li>🚫 Disabled options support</li>
-            <li>🎨 Badge animations (bounce, pulse, wiggle, fade, slide)</li>
-            <li>🔍 Built-in search & filter</li>
-            <li>📱 Responsive design (mobile/tablet/desktop)</li>
-            <li>📐 Width constraints (min/max)</li>
-            <li>♿ Full accessibility (ARIA, keyboard nav)</li>
-            <li>🔧 Imperative control via ref</li>
-            <li>🔄 Duplicate handling</li>
-            <li>🎛️ Auto-close, single-line, auto-size modes</li>
-          </ul>
-        </div>
-      </div>
-    ),
-  },
-  {
-    name: 'MultiSelectProAsync',
-    category: 'forms',
-    description: 'Async multi-select with external API search, debouncing, and loading states. Perfect for large datasets and server-side filtering.',
-    importPath: "import { MultiSelectProAsync, useDebounce } from '@djangocfg/ui';",
-    example: `import { MultiSelectProAsync, useDebounce } from '@djangocfg/ui';
-import { useState, useEffect } from 'react';
-
-// Mock API function (replace with your actual API)
-const searchAPI = async (query: string) => {
-  const response = await fetch(\`/api/search?q=\${query}\`);
-  return response.json();
-};
-
-function AsyncExample() {
-  const [searchValue, setSearchValue] = useState('');
-  const [options, setOptions] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [selected, setSelected] = useState<string[]>([]);
-
-  // Debounce search to reduce API calls
-  const debouncedSearch = useDebounce(searchValue, 300);
-
-  // Fetch options when debounced search changes
-  useEffect(() => {
-    if (!debouncedSearch) {
-      setOptions([]);
-      return;
-    }
-
-    const fetchOptions = async () => {
-      setIsLoading(true);
-      try {
-        const results = await searchAPI(debouncedSearch);
-        setOptions(results);
-      } catch (error) {
-        console.error('Search failed:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchOptions();
-  }, [debouncedSearch]);
-
-  return (
-    <MultiSelectProAsync
-      // Search control (managed by parent)
-      searchValue={searchValue}
-      onSearchChange={setSearchValue}
-      isLoading={isLoading}
-
-      // Options from API
-      options={options}
-
-      // Selection
-      onValueChange={setSelected}
-      defaultValue={selected}
-
-      // UI
-      placeholder="Search and select..."
-      searchPlaceholder="Type to search..."
-      emptyText="No results found"
-      loadingText="Searching..."
-
-      // Features
-      variant="default"
-      maxCount={3}
-      closeOnSelect={false}
-    />
-  );
-}`,
-    preview: (() => {
-      // Demo component with mock data
-      const DemoAsync = () => {
-        const [searchValue, setSearchValue] = useState('');
-        const [selected, setSelected] = useState<string[]>([]);
-        const debouncedSearch = useDebounce(searchValue, 300);
-        const [isLoading, setIsLoading] = useState(false);
-
-        // Mock database of countries
-        const allCountries = useMemo(() => [
-          { value: 'us', label: 'United States' },
-          { value: 'uk', label: 'United Kingdom' },
-          { value: 'ca', label: 'Canada' },
-          { value: 'au', label: 'Australia' },
-          { value: 'de', label: 'Germany' },
-          { value: 'fr', label: 'France' },
-          { value: 'it', label: 'Italy' },
-          { value: 'es', label: 'Spain' },
-          { value: 'jp', label: 'Japan' },
-          { value: 'cn', label: 'China' },
-          { value: 'in', label: 'India' },
-          { value: 'br', label: 'Brazil' },
-          { value: 'mx', label: 'Mexico' },
-          { value: 'ru', label: 'Russia' },
-          { value: 'za', label: 'South Africa' },
-        ], []);
-
-        // Filtered options based on debounced search
-        const filteredOptions = useMemo(() => {
-          if (!debouncedSearch) return [];
-          return allCountries.filter(country =>
-            country.label.toLowerCase().includes(debouncedSearch.toLowerCase())
-          );
-        }, [debouncedSearch, allCountries]);
-
-        // Simulate API loading
-        useEffect(() => {
-          if (debouncedSearch) {
-            setIsLoading(true);
-            const timer = setTimeout(() => setIsLoading(false), 300);
-            return () => clearTimeout(timer);
-          }
-        }, [debouncedSearch]);
-
-        return (
-          <div className="space-y-4">
-            <MultiSelectProAsync
-              searchValue={searchValue}
-              onSearchChange={setSearchValue}
-              isLoading={isLoading}
-              options={filteredOptions}
-              onValueChange={setSelected}
-              defaultValue={selected}
-              placeholder="Search countries..."
-              searchPlaceholder="Type to search countries..."
-              emptyText="No countries found"
-              loadingText="Searching..."
-              maxCount={2}
-              className="w-[350px]"
-            />
-
-            <div className="p-4 border rounded-md bg-muted/50">
-              <p className="text-sm font-medium mb-2">Features:</p>
-              <ul className="space-y-1 text-sm text-muted-foreground">
-                <li>🔍 <strong>Async search</strong> - Controlled search value for API integration</li>
-                <li>⏱️ <strong>Debouncing</strong> - Use useDebounce hook to reduce API calls</li>
-                <li>🔄 <strong>Loading states</strong> - Shows spinner during data fetching</li>
-                <li>🧹 <strong>Auto-clear</strong> - Clears search when popover closes</li>
-                <li>✨ <strong>All MultiSelectPro features</strong> - Animations, variants, groups, etc.</li>
-              </ul>
-              <div className="mt-3 p-2 bg-muted rounded text-xs">
-                <strong>Try it:</strong> Type "united" or "india" to see async filtering
-              </div>
-            </div>
-          </div>
-        );
-      };
-
-      return <DemoAsync />;
-    })(),
-  },
-  {
-    name: 'InputOTP',
-    category: 'forms',
-    description: 'One-time password input component',
-    importPath: "import { InputOTP, InputOTPGroup, InputOTPSlot } from '@djangocfg/ui';",
-    example: `<InputOTP maxLength={6}>
-  <InputOTPGroup>
-    <InputOTPSlot index={0} />
-    <InputOTPSlot index={1} />
-    <InputOTPSlot index={2} />
-    <InputOTPSlot index={3} />
-    <InputOTPSlot index={4} />
-    <InputOTPSlot index={5} />
-  </InputOTPGroup>
-</InputOTP>`,
-    preview: (
-      <InputOTP maxLength={6}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    ),
-  },
-  {
-    name: 'PhoneInput',
-    category: 'forms',
-    description: 'International phone number input with country selector',
-    importPath: "import { PhoneInput } from '@djangocfg/ui';",
-    example: `<PhoneInput
-  defaultCountry="US"
-  placeholder="Enter phone number"
-  className="max-w-sm"
-/>`,
-    preview: (
-      <PhoneInput
-        defaultCountry="US"
-        placeholder="Enter phone number"
-        className="max-w-sm"
-      />
-    ),
-  },
-  {
-    name: 'Form',
-    category: 'forms',
-    description: 'React Hook Form wrapper with form validation',
-    importPath: "import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@djangocfg/ui';",
-    example: `// Requires react-hook-form
-import { useForm } from 'react-hook-form';
-
-function MyForm() {
-  const form = useForm();
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter username" {...field} />
-              </FormControl>
-              <FormDescription>
-                Your public display name
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </form>
-    </Form>
-  );
-}`,
-    preview: (
-      <div className="p-6 border rounded-md bg-muted/50">
-        <p className="text-sm text-muted-foreground mb-4">
-          The Form component is a wrapper around React Hook Form with:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Integrated form validation</li>
-          <li>• Accessible form fields</li>
-          <li>• Error message handling</li>
-          <li>• Field descriptions and labels</li>
-          <li>• Type-safe with TypeScript</li>
-        </ul>
-        <p className="text-xs text-muted-foreground mt-4">
-          See the <strong>react-hook-form</strong> documentation for usage examples
-        </p>
-      </div>
-    ),
-  },
-  {
-    name: 'Field',
-    category: 'forms',
-    description: 'Advanced field component with label, description and validation',
-    importPath: "import { Field, FieldGroup, FieldSet, FieldLegend } from '@djangocfg/ui';",
-    example: `<FieldSet>
-  <FieldLegend>Account Information</FieldLegend>
-  <FieldGroup>
-    <Field>
-      <FieldLabel>Username</FieldLabel>
-      <Input placeholder="Enter username" />
-      <FieldDescription>
-        Your unique username for the platform
-      </FieldDescription>
-      <FieldError>Username is required</FieldError>
-    </Field>
-  </FieldGroup>
-</FieldSet>`,
-    preview: (
-      <div className="p-6 border rounded-md bg-muted/50">
-        <p className="text-sm text-muted-foreground mb-4">
-          Field component provides structured form fields with:
-        </p>
-        <ul className="space-y-2 text-sm text-muted-foreground">
-          <li>• Label and description support</li>
-          <li>• Error message handling</li>
-          <li>• Field grouping (FieldSet, FieldGroup)</li>
-          <li>• Accessible by default</li>
-          <li>• Consistent styling</li>
-        </ul>
-        <p className="text-xs text-muted-foreground mt-4">
-          Perfect for complex forms with validation
-        </p>
-      </div>
-    ),
-  },
-  {
-    name: 'JsonSchemaForm',
-    category: 'forms',
-    description: 'Automatic form generator from JSON Schema with validation, custom widgets, and full type safety',
-    importPath: "import { JsonSchemaForm } from '@djangocfg/ui/tools';",
-    example: `// Basic usage
-const schema = {
-  type: 'object',
-  required: ['name', 'email'],
-  properties: {
-    name: {
-      type: 'string',
-      title: 'Full Name',
-      minLength: 2
-    },
-    email: {
-      type: 'string',
-      title: 'Email',
-      format: 'email'
-    },
-    age: {
-      type: 'number',
-      title: 'Age',
-      minimum: 18
-    },
-    subscribe: {
-      type: 'boolean',
-      title: 'Subscribe to newsletter'
-    }
-  }
-};
-
-<JsonSchemaForm
-  schema={schema}
-  onSubmit={(data) => console.log(data.formData)}
-  liveValidate={false}
-/>
-
-// With UI Schema for customization
-const uiSchema = {
-  subscribe: {
-    'ui:widget': 'SwitchWidget'
-  }
-};
-
-<JsonSchemaForm
-  schema={schema}
-  uiSchema={uiSchema}
-  formData={initialData}
-  onChange={(data) => setFormData(data.formData)}
-  onSubmit={handleSubmit}
-/>`,
-    preview: (
-      <div className="space-y-4">
-        <JsonSchemaForm
-          schema={{
-            type: 'object',
-            required: ['name', 'email'],
-            properties: {
-              name: {
-                type: 'string',
-                title: 'Full Name',
-                description: 'Enter your first and last name',
-                minLength: 2
-              },
-              email: {
-                type: 'string',
-                title: 'Email Address',
-                format: 'email'
-              },
-              role: {
-                type: 'string',
-                title: 'Role',
-                enum: ['developer', 'designer', 'manager', 'other'],
-                default: 'developer'
-              },
-              experience: {
-                type: 'number',
-                title: 'Years of Experience',
-                minimum: 0,
-                maximum: 50,
-                default: 5
-              },
-              subscribe: {
-                type: 'boolean',
-                title: 'Subscribe to newsletter',
-                default: false
-              }
-            }
-          }}
-          uiSchema={{
-            subscribe: {
-              'ui:widget': 'SwitchWidget'
-            }
-          }}
-          onSubmit={(data) => {
-            console.log('Form submitted:', data.formData);
-            alert('Form submitted! Check console for data.');
-          }}
-          liveValidate={false}
-          showErrorList="top"
-        />
-
-        <div className="p-4 border rounded-md bg-muted/50">
-          <p className="text-sm font-medium mb-2">Features:</p>
-          <ul className="space-y-1 text-sm text-muted-foreground">
-            <li>• Automatic form generation from JSON Schema 7</li>
-            <li>• Built-in validation with ajv8</li>
-            <li>• Custom widgets (Switch, Select, Textarea, etc.)</li>
-            <li>• Custom templates for fields, objects, arrays</li>
-            <li>• Live validation support</li>
-            <li>• Full TypeScript support</li>
-            <li>• Radix UI components integration</li>
-          </ul>
-        </div>
-      </div>
-    ),
-  },
-];