@tribepad/themis 1.0.0

package/src/elements/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -0,0 +1,1514 @@
+/**
+ * CheckboxGroup Component Stories
+ * Storybook stories for CheckboxGroup component demonstrating all variants, sizes, and states
+ *
+ * @see React Aria CheckboxGroup: https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html
+ * @see checkboxgroup-prd.md (Product Requirements)
+ * @see plan.md (12 Key Clarifications)
+ */
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { CheckboxGroup, Checkbox, CheckmarkIcon, TimesIcon } from './CheckboxGroup';
+
+const meta = {
+  title: 'Elements/CheckboxGroup',
+  component: CheckboxGroup,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible multi-selection checkbox group with React Aria primitives, CVA variant styling, and WCAG 2.2 AAA compliance (7:1 contrast ratio, 44px+ touch targets). Features bordered container design with square indicators and checkmark SVGs.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive'],
+      description: 'CheckboxGroup style variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'CheckboxGroup size (affects all checkbox items)',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: 'Layout orientation of checkbox items',
+      table: {
+        defaultValue: { summary: 'vertical' },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable all checkbox items',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Make checkbox group read-only (can focus but not change)',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Mark as required field',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Show error state',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Group label text',
+    },
+    description: {
+      control: 'text',
+      description: 'Group description text',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message (shown when isInvalid is true)',
+    },
+  },
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Basic Stories
+// ============================================================================
+
+export const Default: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="option1">
+        <Checkbox.Label>Option 1</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="option2">
+        <Checkbox.Label>Option 2</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="option3">
+        <Checkbox.Label>Option 3</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    'aria-label': 'Select options',
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="email">
+        <Checkbox.Label>Email notifications</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="sms">
+        <Checkbox.Label>SMS notifications</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="push">
+        <Checkbox.Label>Push notifications</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Notification Preferences',
+  },
+};
+
+export const WithDescription: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="analytics">
+        <Checkbox.Label>Analytics cookies</Checkbox.Label>
+        <Checkbox.Description>Help us improve our website</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="marketing">
+        <Checkbox.Label>Marketing cookies</Checkbox.Label>
+        <Checkbox.Description>Personalized advertisements</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="functional">
+        <Checkbox.Label>Functional cookies</Checkbox.Label>
+        <Checkbox.Description>Remember your preferences</Checkbox.Description>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Cookie Preferences',
+    description: 'Select which cookies you want to accept',
+  },
+};
+
+// ============================================================================
+// Variant Stories
+// ============================================================================
+
+export const Destructive: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="messages">
+        <Checkbox.Label>Delete all messages</Checkbox.Label>
+        <Checkbox.Description>All conversations will be removed</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="files">
+        <Checkbox.Label>Delete all files</Checkbox.Label>
+        <Checkbox.Description>All uploads will be permanently deleted</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="settings">
+        <Checkbox.Label>Reset all settings</Checkbox.Label>
+        <Checkbox.Description>Return to default configuration</Checkbox.Description>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    variant: 'destructive',
+    label: 'Delete Options',
+    description: 'Select items to delete (this cannot be undone)',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <CheckboxGroup variant="default" label="Default Variant" defaultValue={['opt1']}>
+        <Checkbox value="opt1">
+          <Checkbox.Label>Option 1</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="opt2">
+          <Checkbox.Label>Option 2</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup variant="destructive" label="Destructive Variant" defaultValue={['opt1']}>
+        <Checkbox value="opt1">
+          <Checkbox.Label>Option 1</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="opt2">
+          <Checkbox.Label>Option 2</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 2 CheckboxGroup variants in one view (no outline variant per clarification).',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Size Stories
+// ============================================================================
+
+export const Small: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="a">
+        <Checkbox.Label>A</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="b">
+        <Checkbox.Label>B</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="c">
+        <Checkbox.Label>C</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    size: 'sm',
+    label: 'Small size (44px min-height)',
+  },
+};
+
+export const Large: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="terms">
+        <Checkbox.Label>I agree to the Terms of Service</Checkbox.Label>
+        <Checkbox.Description>By checking this, you accept our terms</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="privacy">
+        <Checkbox.Label>I agree to the Privacy Policy</Checkbox.Label>
+        <Checkbox.Description>By checking this, you accept our privacy policy</Checkbox.Description>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    size: 'lg',
+    label: 'Large size (56px min-height)',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <CheckboxGroup size="sm" label="Small (44px)" defaultValue={['opt1']}>
+        <Checkbox value="opt1">
+          <Checkbox.Label>Small Option</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="opt2">
+          <Checkbox.Label>Small Option</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup size="default" label="Default (48px)" defaultValue={['opt1']}>
+        <Checkbox value="opt1">
+          <Checkbox.Label>Default Option</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="opt2">
+          <Checkbox.Label>Default Option</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+      <CheckboxGroup size="lg" label="Large (56px)" defaultValue={['opt1']}>
+        <Checkbox value="opt1">
+          <Checkbox.Label>Large Option</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="opt2">
+          <Checkbox.Label>Large Option</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 3 CheckboxGroup sizes in one view. All maintain 44px+ minimum touch targets for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Orientation Stories
+// ============================================================================
+
+export const Horizontal: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="monday">
+        <Checkbox.Label>Mon</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="tuesday">
+        <Checkbox.Label>Tue</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="wednesday">
+        <Checkbox.Label>Wed</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="thursday">
+        <Checkbox.Label>Thu</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="friday">
+        <Checkbox.Label>Fri</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    orientation: 'horizontal',
+    label: 'Available Days',
+  },
+};
+
+export const HorizontalWrapping: Story = {
+  render: (args) => (
+    <div className="w-80">
+      <CheckboxGroup {...args}>
+        <Checkbox value="red">
+          <Checkbox.Label>Red</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="green">
+          <Checkbox.Label>Green</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="blue">
+          <Checkbox.Label>Blue</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="yellow">
+          <Checkbox.Label>Yellow</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="purple">
+          <Checkbox.Label>Purple</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  args: {
+    orientation: 'horizontal',
+    label: 'Color Selection',
+    description: 'Items wrap to next line when container is constrained',
+  },
+};
+
+// ============================================================================
+// State Stories
+// ============================================================================
+
+export const WithDefaultValue: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="newsletter">
+        <Checkbox.Label>Weekly newsletter</Checkbox.Label>
+        <Checkbox.Description>Product updates and tips</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="promotions">
+        <Checkbox.Label>Promotional emails</Checkbox.Label>
+        <Checkbox.Description>Special offers and discounts</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="updates">
+        <Checkbox.Label>Product updates</Checkbox.Label>
+        <Checkbox.Description>New features and improvements</Checkbox.Description>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Email Subscriptions',
+    defaultValue: ['newsletter', 'updates'],
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>Option 1</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>Option 2</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt3">
+        <Checkbox.Label>Option 3</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Disabled CheckboxGroup',
+    isDisabled: true,
+    defaultValue: ['opt2'],
+  },
+};
+
+export const DisabledItem: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="available">
+        <Checkbox.Label>Available Feature</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="unavailable" isDisabled>
+        <Checkbox.Label>Unavailable (Coming Soon)</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="another">
+        <Checkbox.Label>Another Feature</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Features',
+    description: 'Some features may not be available yet',
+  },
+};
+
+export const ReadOnly: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="basic">
+        <Checkbox.Label>Basic Support</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="priority">
+        <Checkbox.Label>Priority Support</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="dedicated">
+        <Checkbox.Label>Dedicated Support</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Your Plan Features',
+    description: 'Contact support to modify your plan',
+    isReadOnly: true,
+    defaultValue: ['basic', 'priority'],
+  },
+};
+
+export const Required: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="terms">
+        <Checkbox.Label>I agree to the Terms of Service</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="privacy">
+        <Checkbox.Label>I agree to the Privacy Policy</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="newsletter">
+        <Checkbox.Label>Subscribe to newsletter (optional)</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Agreements',
+    isRequired: true,
+  },
+};
+
+export const Invalid: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>Option 1</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>Option 2</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt3">
+        <Checkbox.Label>Option 3</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Select at least one',
+    isInvalid: true,
+    errorMessage: 'Please select at least one option to continue',
+    isRequired: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Error state with ALL items showing destructive border (cognitive accessibility per clarification).',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Controlled Example
+// ============================================================================
+
+export const ControlledExample: Story = {
+  render: () => {
+    const [values, setValues] = useState<string[]>(['option1']);
+
+    return (
+      <div className="space-y-4">
+        <CheckboxGroup value={values} onChange={setValues} label="Controlled CheckboxGroup">
+          <Checkbox value="option1">
+            <Checkbox.Label>Option 1</Checkbox.Label>
+          </Checkbox>
+          <Checkbox value="option2">
+            <Checkbox.Label>Option 2</Checkbox.Label>
+          </Checkbox>
+          <Checkbox value="option3">
+            <Checkbox.Label>Option 3</Checkbox.Label>
+          </Checkbox>
+        </CheckboxGroup>
+        <div className="text-sm text-[var(--muted-foreground)]">
+          Selected values: {values.length > 0 ? values.join(', ') : 'none'}
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setValues(['option1', 'option2', 'option3'])}
+            className="rounded-md bg-[var(--primary)] px-4 py-2 text-sm text-[var(--primary-foreground)]"
+          >
+            Select All
+          </button>
+          <button
+            onClick={() => setValues([])}
+            className="rounded-md border border-[var(--border)] px-4 py-2 text-sm text-[var(--foreground)]"
+          >
+            Clear All
+          </button>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Controlled CheckboxGroup example with external state management.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Real-World Examples
+// ============================================================================
+
+export const FeatureSelection: Story = {
+  render: () => (
+    <div className="w-96 rounded-lg border border-[var(--border)] bg-[var(--background)] p-6">
+      <CheckboxGroup label="Select Features" defaultValue={['dashboard', 'reports']}>
+        <Checkbox value="dashboard">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">📊</span>
+            <div>
+              <Checkbox.Label>Dashboard</Checkbox.Label>
+              <Checkbox.Description>Real-time analytics view</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="reports">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">📈</span>
+            <div>
+              <Checkbox.Label>Reports</Checkbox.Label>
+              <Checkbox.Description>Generate custom reports</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="api">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">🔌</span>
+            <div>
+              <Checkbox.Label>API Access</Checkbox.Label>
+              <Checkbox.Description>Integrate with your apps</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="support">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">💬</span>
+            <div>
+              <Checkbox.Label>Priority Support</Checkbox.Label>
+              <Checkbox.Description>24/7 dedicated support</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Feature selection with icons and descriptions.',
+      },
+    },
+  },
+};
+
+export const FilterOptions: Story = {
+  render: () => (
+    <div className="w-80 rounded-lg border border-[var(--border)] bg-[var(--background)] p-4">
+      <CheckboxGroup
+        label="Filter by Category"
+        orientation="vertical"
+        size="sm"
+        defaultValue={['electronics', 'clothing']}
+      >
+        <Checkbox value="electronics">
+          <Checkbox.Label>Electronics</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="clothing">
+          <Checkbox.Label>Clothing</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="books">
+          <Checkbox.Label>Books</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="home">
+          <Checkbox.Label>Home & Garden</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="sports">
+          <Checkbox.Label>Sports & Outdoors</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Filter checkboxes for e-commerce or search interfaces.',
+      },
+    },
+  },
+};
+
+export const TaskList: Story = {
+  render: () => {
+    const [completed, setCompleted] = useState<string[]>(['task1', 'task3']);
+
+    return (
+      <div className="w-96 rounded-lg border border-[var(--border)] bg-[var(--background)] p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="font-semibold text-[var(--foreground)]">Today&apos;s Tasks</h3>
+          <span className="text-sm text-[var(--muted-foreground)]">
+            {completed.length}/5 completed
+          </span>
+        </div>
+        <CheckboxGroup value={completed} onChange={setCompleted} aria-label="Tasks">
+          <Checkbox value="task1">
+            <Checkbox.Label className={completed.includes('task1') ? 'line-through opacity-60' : ''}>
+              Review pull requests
+            </Checkbox.Label>
+          </Checkbox>
+          <Checkbox value="task2">
+            <Checkbox.Label className={completed.includes('task2') ? 'line-through opacity-60' : ''}>
+              Update documentation
+            </Checkbox.Label>
+          </Checkbox>
+          <Checkbox value="task3">
+            <Checkbox.Label className={completed.includes('task3') ? 'line-through opacity-60' : ''}>
+              Deploy to staging
+            </Checkbox.Label>
+          </Checkbox>
+          <Checkbox value="task4">
+            <Checkbox.Label className={completed.includes('task4') ? 'line-through opacity-60' : ''}>
+              Team standup meeting
+            </Checkbox.Label>
+          </Checkbox>
+          <Checkbox value="task5">
+            <Checkbox.Label className={completed.includes('task5') ? 'line-through opacity-60' : ''}>
+              Write weekly report
+            </Checkbox.Label>
+          </Checkbox>
+        </CheckboxGroup>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Task list with visual strikethrough for completed items.',
+      },
+    },
+  },
+};
+
+export const PermissionsSettings: Story = {
+  render: () => (
+    <div className="w-[450px] rounded-lg border border-[var(--border)] bg-[var(--background)] p-6">
+      <h3 className="mb-4 text-lg font-semibold text-[var(--foreground)]">
+        Role Permissions
+      </h3>
+      <CheckboxGroup label="What can this role do?" defaultValue={['read', 'comment']}>
+        <Checkbox value="read" className="p-4">
+          <div className="flex w-full items-start gap-4">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--primary)]/10 text-xl">
+              👁️
+            </div>
+            <div className="flex-1">
+              <Checkbox.Label>View</Checkbox.Label>
+              <Checkbox.Description>
+                Can view projects, documents, and dashboards
+              </Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="comment" className="p-4">
+          <div className="flex w-full items-start gap-4">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--primary)]/10 text-xl">
+              💬
+            </div>
+            <div className="flex-1">
+              <Checkbox.Label>Comment</Checkbox.Label>
+              <Checkbox.Description>
+                Can add comments and participate in discussions
+              </Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="edit" className="p-4">
+          <div className="flex w-full items-start gap-4">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--primary)]/10 text-xl">
+              ✏️
+            </div>
+            <div className="flex-1">
+              <Checkbox.Label>Edit</Checkbox.Label>
+              <Checkbox.Description>
+                Can modify existing content and settings
+              </Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="delete" className="p-4">
+          <div className="flex w-full items-start gap-4">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--destructive)]/10 text-xl">
+              🗑️
+            </div>
+            <div className="flex-1">
+              <Checkbox.Label>Delete</Checkbox.Label>
+              <Checkbox.Description>
+                Can permanently remove content (use with caution)
+              </Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Permission settings with icons and detailed descriptions.',
+      },
+    },
+  },
+};
+
+export const DangerZone: Story = {
+  render: () => (
+    <div className="w-96 rounded-lg border border-[var(--destructive)] bg-[var(--background)] p-6">
+      <h3 className="mb-4 text-lg font-semibold text-[var(--destructive)]">Danger Zone</h3>
+      <CheckboxGroup
+        variant="destructive"
+        label="Delete account data"
+        description="Select what you want to delete. This action cannot be undone."
+      >
+        <Checkbox value="messages">
+          <Checkbox.Label>All messages</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="files">
+          <Checkbox.Label>All uploaded files</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="settings">
+          <Checkbox.Label>Account settings</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="history">
+          <Checkbox.Label>Activity history</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Destructive variant for dangerous multi-select actions.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Card-Style Checkbox Examples
+// ============================================================================
+
+export const CardStyleBasic: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <CheckboxGroup label="Select add-ons" size="lg" defaultValue={['priority']}>
+        <Checkbox value="extended" className="p-6">
+          <div className="flex w-full flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <Checkbox.Label>Extended Warranty</Checkbox.Label>
+              <span className="font-bold text-[var(--foreground)]">+$49</span>
+            </div>
+            <Checkbox.Description>
+              2 additional years of coverage for parts and labor
+            </Checkbox.Description>
+          </div>
+        </Checkbox>
+        <Checkbox value="priority" className="p-6">
+          <div className="flex w-full flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <Checkbox.Label>Priority Shipping</Checkbox.Label>
+              <span className="font-bold text-[var(--foreground)]">+$12</span>
+            </div>
+            <Checkbox.Description>
+              Get your order in 2-3 business days
+            </Checkbox.Description>
+          </div>
+        </Checkbox>
+        <Checkbox value="installation" className="p-6">
+          <div className="flex w-full flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <Checkbox.Label>Professional Installation</Checkbox.Label>
+              <span className="font-bold text-[var(--foreground)]">+$99</span>
+            </div>
+            <Checkbox.Description>
+              Certified technician will install the product
+            </Checkbox.Description>
+          </div>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style checkbox items with pricing, ideal for e-commerce add-ons.',
+      },
+    },
+  },
+};
+
+export const CardStyleWithTags: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <CheckboxGroup label="Integrations" defaultValue={['slack', 'github']}>
+        <Checkbox value="slack" className="p-4">
+          <div className="flex w-full items-center gap-3">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-purple-100 text-xl">
+              💬
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <Checkbox.Label>Slack</Checkbox.Label>
+                <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800">
+                  Connected
+                </span>
+              </div>
+              <Checkbox.Description>Get notifications in Slack</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="github" className="p-4">
+          <div className="flex w-full items-center gap-3">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 text-xl">
+              🐙
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <Checkbox.Label>GitHub</Checkbox.Label>
+                <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800">
+                  Connected
+                </span>
+              </div>
+              <Checkbox.Description>Sync with repositories</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="jira" className="p-4">
+          <div className="flex w-full items-center gap-3">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100 text-xl">
+              📋
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <Checkbox.Label>Jira</Checkbox.Label>
+                <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+                  Not connected
+                </span>
+              </div>
+              <Checkbox.Description>Link issues and track progress</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Integration settings with status tags and icons.',
+      },
+    },
+  },
+};
+
+export const CardStyleWithIcons: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <CheckboxGroup
+        label="Select workspace features"
+        orientation="horizontal"
+        size="lg"
+        defaultValue={['personal']}
+      >
+        <Checkbox value="personal" className="flex-1 p-6">
+          <div className="flex flex-col items-center gap-3 text-center">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--primary)]/10 text-2xl">
+              👤
+            </div>
+            <div>
+              <Checkbox.Label>Personal</Checkbox.Label>
+              <Checkbox.Description>For individual use</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="team" className="flex-1 p-6">
+          <div className="flex flex-col items-center gap-3 text-center">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--primary)]/10 text-2xl">
+              👥
+            </div>
+            <div>
+              <Checkbox.Label>Team</Checkbox.Label>
+              <Checkbox.Description>For collaboration</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="enterprise" className="flex-1 p-6">
+          <div className="flex flex-col items-center gap-3 text-center">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--primary)]/10 text-2xl">
+              🏢
+            </div>
+            <div>
+              <Checkbox.Label>Enterprise</Checkbox.Label>
+              <Checkbox.Description>For organizations</Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style horizontal layout with centered icons, ideal for feature or category selection.',
+      },
+    },
+  },
+};
+
+export const CardStyleNotificationPreferences: Story = {
+  render: () => (
+    <div className="w-[450px] rounded-lg border border-[var(--border)] bg-[var(--background)] p-6">
+      <h3 className="mb-4 text-lg font-semibold text-[var(--foreground)]">
+        Notification Channels
+      </h3>
+      <CheckboxGroup
+        label="How would you like to be notified?"
+        defaultValue={['email', 'push']}
+      >
+        <Checkbox value="email" className="p-4">
+          <div className="flex w-full items-start gap-4">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--primary)]/10 text-xl">
+              📧
+            </div>
+            <div className="flex-1">
+              <Checkbox.Label>Email</Checkbox.Label>
+              <Checkbox.Description>
+                Receive notifications via email. Best for important updates.
+              </Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="push" className="p-4">
+          <div className="flex w-full items-start gap-4">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--primary)]/10 text-xl">
+              🔔
+            </div>
+            <div className="flex-1">
+              <Checkbox.Label>Push notifications</Checkbox.Label>
+              <Checkbox.Description>
+                Get instant alerts on your device. Best for time-sensitive items.
+              </Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="sms" className="p-4">
+          <div className="flex w-full items-start gap-4">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--primary)]/10 text-xl">
+              💬
+            </div>
+            <div className="flex-1">
+              <Checkbox.Label>SMS</Checkbox.Label>
+              <Checkbox.Description>
+                Text message alerts. Standard messaging rates may apply.
+              </Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="slack" className="p-4">
+          <div className="flex w-full items-start gap-4">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--muted)] text-xl">
+              💼
+            </div>
+            <div className="flex-1">
+              <Checkbox.Label>Slack</Checkbox.Label>
+              <Checkbox.Description>
+                Receive notifications in your Slack workspace.
+              </Checkbox.Description>
+            </div>
+          </div>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style checkboxes for settings pages with icons, labels, and detailed descriptions.',
+      },
+    },
+  },
+};
+
+export const CardStyleImageSelection: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <CheckboxGroup
+        label="Select themes to enable"
+        orientation="horizontal"
+        defaultValue={['light', 'dark']}
+      >
+        <Checkbox value="light" className="flex-1 overflow-hidden p-0">
+          <div className="flex flex-col">
+            <div className="h-24 bg-gradient-to-br from-white to-gray-100 border-b border-[var(--border)]" />
+            <div className="p-3 text-center">
+              <Checkbox.Label>Light</Checkbox.Label>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="dark" className="flex-1 overflow-hidden p-0">
+          <div className="flex flex-col">
+            <div className="h-24 bg-gradient-to-br from-gray-800 to-gray-900 border-b border-[var(--border)]" />
+            <div className="p-3 text-center">
+              <Checkbox.Label>Dark</Checkbox.Label>
+            </div>
+          </div>
+        </Checkbox>
+        <Checkbox value="system" className="flex-1 overflow-hidden p-0">
+          <div className="flex flex-col">
+            <div className="h-24 bg-gradient-to-r from-white via-gray-400 to-gray-900 border-b border-[var(--border)]" />
+            <div className="p-3 text-center">
+              <Checkbox.Label>Auto</Checkbox.Label>
+            </div>
+          </div>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style checkboxes with visual previews, perfect for enabling multiple themes.',
+      },
+    },
+  },
+};
+
+export const CardStyleCompact: Story = {
+  render: () => (
+    <div className="w-96">
+      <CheckboxGroup
+        label="Available sizes"
+        orientation="horizontal"
+        size="sm"
+        defaultValue={['m', 'l']}
+      >
+        <Checkbox value="xs" className="flex-1 justify-center">
+          <Checkbox.Label>XS</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="s" className="flex-1 justify-center">
+          <Checkbox.Label>S</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="m" className="flex-1 justify-center">
+          <Checkbox.Label>M</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="l" className="flex-1 justify-center">
+          <Checkbox.Label>L</Checkbox.Label>
+        </Checkbox>
+        <Checkbox value="xl" className="flex-1 justify-center">
+          <Checkbox.Label>XL</Checkbox.Label>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact card-style checkboxes for multi-select size or variant selection.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Accessibility Stories
+// ============================================================================
+
+export const FocusVisible: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>Focus me with Tab</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>Tab moves between checkboxes</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt3">
+        <Checkbox.Label>Press Space to toggle</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Keyboard Navigation',
+    description: 'Use Tab to move between checkboxes, Space to toggle',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Press Tab to see the focus ring. Unlike RadioGroup, Tab moves between each checkbox (not arrow keys).',
+      },
+    },
+  },
+};
+
+export const TouchTarget: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>Touch-friendly option</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>44px+ minimum height</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    size: 'sm',
+    label: 'Touch Targets',
+    description: 'Even small size maintains 44px minimum touch targets',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'All sizes maintain 44px+ minimum touch targets (exceeds WCAG 2.2 requirement).',
+      },
+    },
+  },
+};
+
+export const RTLSupport: Story = {
+  render: () => (
+    <div dir="rtl" className="w-96">
+      <CheckboxGroup label="اختر الخيارات" defaultValue={['opt1']}>
+        <Checkbox value="opt1">
+          <Checkbox.Label>الخيار الأول</Checkbox.Label>
+          <Checkbox.Description>وصف للخيار الأول</Checkbox.Description>
+        </Checkbox>
+        <Checkbox value="opt2">
+          <Checkbox.Label>الخيار الثاني</Checkbox.Label>
+          <Checkbox.Description>وصف للخيار الثاني</Checkbox.Description>
+        </Checkbox>
+        <Checkbox value="opt3">
+          <Checkbox.Label>الخيار الثالث</Checkbox.Label>
+          <Checkbox.Description>وصف للخيار الثالث</Checkbox.Description>
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'RTL support with indicator auto-flipping to the right side.',
+      },
+    },
+  },
+};
+
+export const WithAriaLabel: Story = {
+  render: () => (
+    <CheckboxGroup aria-label="Hidden label for screen readers" defaultValue={['opt1']}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>Option 1</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>Option 2</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'CheckboxGroup without visible label, using aria-label for screen readers.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Theme Integration Stories
+// ============================================================================
+
+export const LightTheme: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>Light theme option</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>Another option</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Light Theme',
+    defaultValue: ['opt1'],
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+export const DarkTheme: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>Dark theme option</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>Another option</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Dark Theme',
+    defaultValue: ['opt1'],
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: 'CheckboxGroup adapts to dark theme via semantic tokens.',
+      },
+    },
+  },
+};
+
+export const HighContrast: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>High contrast option</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>Another option</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'High Contrast',
+    defaultValue: ['opt1'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'CheckboxGroup with enhanced outlines for high contrast mode.',
+      },
+    },
+  },
+};
+
+export const ColorblindTheme: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="opt1">
+        <Checkbox.Label>Colorblind-friendly option</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="opt2">
+        <Checkbox.Label>Another option</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Colorblind Theme',
+    defaultValue: ['opt1'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'CheckboxGroup with colorblind-friendly palette (deuteranopia, protanopia, tritanopia support).',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Custom Icon Stories
+// ============================================================================
+
+export const CustomTimesIcon: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="spam" selectedIcon={<TimesIcon />}>
+        <Checkbox.Label>Mark as spam</Checkbox.Label>
+        <Checkbox.Description>This message will be moved to spam</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="delete" selectedIcon={<TimesIcon />}>
+        <Checkbox.Label>Delete permanently</Checkbox.Label>
+        <Checkbox.Description>This action cannot be undone</Checkbox.Description>
+      </Checkbox>
+      <Checkbox value="block" selectedIcon={<TimesIcon />}>
+        <Checkbox.Label>Block sender</Checkbox.Label>
+        <Checkbox.Description>You will no longer receive emails from this address</Checkbox.Description>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Select Actions',
+    variant: 'destructive',
+    defaultValue: ['spam'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Using TimesIcon (X) for destructive actions like delete, block, or exclude operations. The X icon provides clear visual feedback that these are removal/exclusion actions.',
+      },
+    },
+  },
+};
+
+export const MixedIcons: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="include1" selectedIcon={<CheckmarkIcon />}>
+        <Checkbox.Label>Include in report</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="include2" selectedIcon={<CheckmarkIcon />}>
+        <Checkbox.Label>Include attachments</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="exclude1" selectedIcon={<TimesIcon />}>
+        <Checkbox.Label>Exclude drafts</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="exclude2" selectedIcon={<TimesIcon />}>
+        <Checkbox.Label>Exclude archived</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Report Settings',
+    defaultValue: ['include1', 'exclude1'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Mix CheckmarkIcon and TimesIcon within the same group to differentiate between include and exclude options. This provides clear visual semantics.',
+      },
+    },
+  },
+};
+
+export const DestructiveExclusionList: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="user1" selectedIcon={<TimesIcon />}>
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full bg-[var(--muted)] flex items-center justify-center text-sm font-medium">
+            JD
+          </div>
+          <div className="flex flex-col">
+            <Checkbox.Label>John Doe</Checkbox.Label>
+            <Checkbox.Description>john.doe@example.com</Checkbox.Description>
+          </div>
+        </div>
+      </Checkbox>
+      <Checkbox value="user2" selectedIcon={<TimesIcon />}>
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full bg-[var(--muted)] flex items-center justify-center text-sm font-medium">
+            JS
+          </div>
+          <div className="flex flex-col">
+            <Checkbox.Label>Jane Smith</Checkbox.Label>
+            <Checkbox.Description>jane.smith@example.com</Checkbox.Description>
+          </div>
+        </div>
+      </Checkbox>
+      <Checkbox value="user3" selectedIcon={<TimesIcon />}>
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full bg-[var(--muted)] flex items-center justify-center text-sm font-medium">
+            RJ
+          </div>
+          <div className="flex flex-col">
+            <Checkbox.Label>Robert Johnson</Checkbox.Label>
+            <Checkbox.Description>robert.j@example.com</Checkbox.Description>
+          </div>
+        </div>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Remove Users from Project',
+    variant: 'destructive',
+    description: 'Select users to remove from this project',
+    defaultValue: ['user2'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style destructive exclusion list with avatars. Uses TimesIcon to clearly indicate removal action. Perfect for user management interfaces.',
+      },
+    },
+  },
+};
+
+export const FilterExclusions: Story = {
+  render: (args) => (
+    <CheckboxGroup {...args}>
+      <Checkbox value="completed" selectedIcon={<TimesIcon />}>
+        <Checkbox.Label>Hide completed tasks</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="archived" selectedIcon={<TimesIcon />}>
+        <Checkbox.Label>Hide archived items</Checkbox.Label>
+      </Checkbox>
+      <Checkbox value="lowpriority" selectedIcon={<TimesIcon />}>
+        <Checkbox.Label>Hide low priority</Checkbox.Label>
+      </Checkbox>
+    </CheckboxGroup>
+  ),
+  args: {
+    label: 'Filter Options',
+    description: 'Select items to hide from view',
+    size: 'sm',
+    defaultValue: ['archived'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact filter exclusion checkboxes with TimesIcon. The X icon clearly communicates that selecting an option will hide/exclude it from view.',
+      },
+    },
+  },
+};
+
+export const CustomSvgIcon: Story = {
+  render: (args) => {
+    // Custom star icon for favorites
+    const StarIcon = ({ className, ...props }: { className?: string; 'data-selected'?: boolean }) => (
+      <svg
+        className={className}
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        aria-hidden="true"
+        {...props}
+      >
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+      </svg>
+    );
+
+    return (
+      <CheckboxGroup {...args}>
+        <Checkbox value="item1" selectedIcon={<StarIcon />}>
+          <Checkbox.Label>Project Alpha</Checkbox.Label>
+          <Checkbox.Description>Q1 2024 initiative</Checkbox.Description>
+        </Checkbox>
+        <Checkbox value="item2" selectedIcon={<StarIcon />}>
+          <Checkbox.Label>Project Beta</Checkbox.Label>
+          <Checkbox.Description>Research project</Checkbox.Description>
+        </Checkbox>
+        <Checkbox value="item3" selectedIcon={<StarIcon />}>
+          <Checkbox.Label>Project Gamma</Checkbox.Label>
+          <Checkbox.Description>Client deliverable</Checkbox.Description>
+        </Checkbox>
+      </CheckboxGroup>
+    );
+  },
+  args: {
+    label: 'Favorite Projects',
+    description: 'Star your favorite projects for quick access',
+    defaultValue: ['item1'],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Using a completely custom SVG icon (star) for favorites selection. The selectedIcon prop accepts any ReactNode, allowing full customization.',
+      },
+    },
+  },
+};