@tribepad/themis 1.0.0

package/src/elements/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,1153 @@
+/**
+ * RadioGroup Component Stories
+ * Storybook stories for RadioGroup component demonstrating all variants, sizes, and states
+ *
+ * @see React Aria RadioGroup: https://react-spectrum.adobe.com/react-aria/RadioGroup.html
+ * @see radiogroup-prd.md (Product Requirements)
+ * @see plan.md (11 Key Clarifications)
+ */
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { RadioGroup, Radio } from './RadioGroup';
+
+const meta = {
+  title: 'Elements/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Accessible single-selection radio 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 explicit touch targets.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive'],
+      description: 'RadioGroup style variant',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'RadioGroup size (affects all radio items)',
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    orientation: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: 'Layout orientation of radio items',
+      table: {
+        defaultValue: { summary: 'vertical' },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable all radio items',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isReadOnly: {
+      control: 'boolean',
+      description: 'Make radio 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 RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Basic Stories
+// ============================================================================
+
+export const Default: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="option1">
+        <Radio.Label>Option 1</Radio.Label>
+      </Radio>
+      <Radio value="option2">
+        <Radio.Label>Option 2</Radio.Label>
+      </Radio>
+      <Radio value="option3">
+        <Radio.Label>Option 3</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    'aria-label': 'Select an option',
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="email">
+        <Radio.Label>Email</Radio.Label>
+      </Radio>
+      <Radio value="sms">
+        <Radio.Label>SMS</Radio.Label>
+      </Radio>
+      <Radio value="push">
+        <Radio.Label>Push Notifications</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Notification Method',
+  },
+};
+
+export const WithDescription: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="standard">
+        <Radio.Label>Standard Delivery</Radio.Label>
+        <Radio.Description>5-7 business days</Radio.Description>
+      </Radio>
+      <Radio value="express">
+        <Radio.Label>Express Delivery</Radio.Label>
+        <Radio.Description>2-3 business days</Radio.Description>
+      </Radio>
+      <Radio value="overnight">
+        <Radio.Label>Overnight Delivery</Radio.Label>
+        <Radio.Description>Next business day</Radio.Description>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Shipping Method',
+    description: 'Choose how you want your order delivered',
+  },
+};
+
+// ============================================================================
+// Variant Stories
+// ============================================================================
+
+export const Destructive: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="keep">
+        <Radio.Label>Keep my account</Radio.Label>
+        <Radio.Description>Your data will be preserved</Radio.Description>
+      </Radio>
+      <Radio value="deactivate">
+        <Radio.Label>Deactivate account</Radio.Label>
+        <Radio.Description>You can reactivate later</Radio.Description>
+      </Radio>
+      <Radio value="delete">
+        <Radio.Label>Delete permanently</Radio.Label>
+        <Radio.Description>This cannot be undone</Radio.Description>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    variant: 'destructive',
+    label: 'Account Action',
+    description: 'Choose what to do with your account',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <RadioGroup variant="default" label="Default Variant" defaultValue="opt1">
+        <Radio value="opt1">
+          <Radio.Label>Option 1</Radio.Label>
+        </Radio>
+        <Radio value="opt2">
+          <Radio.Label>Option 2</Radio.Label>
+        </Radio>
+      </RadioGroup>
+      <RadioGroup variant="destructive" label="Destructive Variant" defaultValue="opt1">
+        <Radio value="opt1">
+          <Radio.Label>Option 1</Radio.Label>
+        </Radio>
+        <Radio value="opt2">
+          <Radio.Label>Option 2</Radio.Label>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 2 RadioGroup variants in one view (no outline variant per clarification).',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Size Stories
+// ============================================================================
+
+export const Small: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="yes">
+        <Radio.Label>Yes</Radio.Label>
+      </Radio>
+      <Radio value="no">
+        <Radio.Label>No</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    size: 'sm',
+    label: 'Small size (44px min-height)',
+  },
+};
+
+export const Large: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="agree">
+        <Radio.Label>I agree to the terms</Radio.Label>
+        <Radio.Description>By selecting this, you accept our terms of service</Radio.Description>
+      </Radio>
+      <Radio value="disagree">
+        <Radio.Label>I do not agree</Radio.Label>
+        <Radio.Description>You won't be able to continue without agreeing</Radio.Description>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    size: 'lg',
+    label: 'Large size (56px min-height)',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <RadioGroup size="sm" label="Small (44px)" defaultValue="opt1">
+        <Radio value="opt1">
+          <Radio.Label>Small Option</Radio.Label>
+        </Radio>
+        <Radio value="opt2">
+          <Radio.Label>Small Option</Radio.Label>
+        </Radio>
+      </RadioGroup>
+      <RadioGroup size="default" label="Default (48px)" defaultValue="opt1">
+        <Radio value="opt1">
+          <Radio.Label>Default Option</Radio.Label>
+        </Radio>
+        <Radio value="opt2">
+          <Radio.Label>Default Option</Radio.Label>
+        </Radio>
+      </RadioGroup>
+      <RadioGroup size="lg" label="Large (56px)" defaultValue="opt1">
+        <Radio value="opt1">
+          <Radio.Label>Large Option</Radio.Label>
+        </Radio>
+        <Radio value="opt2">
+          <Radio.Label>Large Option</Radio.Label>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All 3 RadioGroup sizes in one view. All maintain 44px+ minimum touch targets for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Orientation Stories
+// ============================================================================
+
+export const Horizontal: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="left">
+        <Radio.Label>Left</Radio.Label>
+      </Radio>
+      <Radio value="center">
+        <Radio.Label>Center</Radio.Label>
+      </Radio>
+      <Radio value="right">
+        <Radio.Label>Right</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    orientation: 'horizontal',
+    label: 'Text Alignment',
+  },
+};
+
+export const HorizontalWrapping: Story = {
+  render: (args) => (
+    <div className="w-80">
+      <RadioGroup {...args}>
+        <Radio value="red">
+          <Radio.Label>Red</Radio.Label>
+        </Radio>
+        <Radio value="green">
+          <Radio.Label>Green</Radio.Label>
+        </Radio>
+        <Radio value="blue">
+          <Radio.Label>Blue</Radio.Label>
+        </Radio>
+        <Radio value="yellow">
+          <Radio.Label>Yellow</Radio.Label>
+        </Radio>
+        <Radio value="purple">
+          <Radio.Label>Purple</Radio.Label>
+        </Radio>
+      </RadioGroup>
+    </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) => (
+    <RadioGroup {...args}>
+      <Radio value="monthly">
+        <Radio.Label>Monthly</Radio.Label>
+        <Radio.Description>$9.99/month</Radio.Description>
+      </Radio>
+      <Radio value="yearly">
+        <Radio.Label>Yearly (Save 20%)</Radio.Label>
+        <Radio.Description>$95.88/year</Radio.Description>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Billing Cycle',
+    defaultValue: 'yearly',
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="opt1">
+        <Radio.Label>Option 1</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>Option 2</Radio.Label>
+      </Radio>
+      <Radio value="opt3">
+        <Radio.Label>Option 3</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Disabled RadioGroup',
+    isDisabled: true,
+    defaultValue: 'opt2',
+  },
+};
+
+export const DisabledItem: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="available">
+        <Radio.Label>Available Option</Radio.Label>
+      </Radio>
+      <Radio value="unavailable" isDisabled>
+        <Radio.Label>Unavailable (Sold Out)</Radio.Label>
+      </Radio>
+      <Radio value="another">
+        <Radio.Label>Another Option</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Individual Item Disabled',
+    description: 'Only specific items can be disabled',
+  },
+};
+
+export const ReadOnly: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="starter">
+        <Radio.Label>Starter Plan</Radio.Label>
+      </Radio>
+      <Radio value="pro">
+        <Radio.Label>Pro Plan</Radio.Label>
+      </Radio>
+      <Radio value="enterprise">
+        <Radio.Label>Enterprise Plan</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Current Plan',
+    description: 'Contact support to change your plan',
+    isReadOnly: true,
+    defaultValue: 'pro',
+  },
+};
+
+export const Required: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="agree">
+        <Radio.Label>I agree to the terms and conditions</Radio.Label>
+      </Radio>
+      <Radio value="disagree">
+        <Radio.Label>I do not agree</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Terms Agreement',
+    isRequired: true,
+  },
+};
+
+export const Invalid: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="opt1">
+        <Radio.Label>Option 1</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>Option 2</Radio.Label>
+      </Radio>
+      <Radio value="opt3">
+        <Radio.Label>Option 3</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Select an option',
+    isInvalid: true,
+    errorMessage: 'Please select one of the options 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 [value, setValue] = useState<string | null>(null);
+
+    return (
+      <div className="space-y-4">
+        <RadioGroup value={value} onChange={setValue} label="Controlled RadioGroup">
+          <Radio value="option1">
+            <Radio.Label>Option 1</Radio.Label>
+          </Radio>
+          <Radio value="option2">
+            <Radio.Label>Option 2</Radio.Label>
+          </Radio>
+          <Radio value="option3">
+            <Radio.Label>Option 3</Radio.Label>
+          </Radio>
+        </RadioGroup>
+        <div className="text-sm text-[var(--muted-foreground)]">
+          Selected value: {value ?? 'none'}
+        </div>
+        <button
+          onClick={() => setValue(value === 'option1' ? 'option2' : 'option1')}
+          className="rounded-md bg-[var(--primary)] px-4 py-2 text-sm text-[var(--primary-foreground)]"
+        >
+          Toggle from outside
+        </button>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Controlled RadioGroup example with external state management.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Real-World Examples
+// ============================================================================
+
+export const PaymentMethod: Story = {
+  render: () => (
+    <div className="w-96 rounded-lg border border-[var(--border)] bg-[var(--background)] p-6">
+      <RadioGroup label="Payment Method" defaultValue="card">
+        <Radio value="card">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">💳</span>
+            <div>
+              <Radio.Label>Credit Card</Radio.Label>
+              <Radio.Description>Visa, Mastercard, Amex</Radio.Description>
+            </div>
+          </div>
+        </Radio>
+        <Radio value="paypal">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">🅿️</span>
+            <div>
+              <Radio.Label>PayPal</Radio.Label>
+              <Radio.Description>Pay with your PayPal account</Radio.Description>
+            </div>
+          </div>
+        </Radio>
+        <Radio value="bank">
+          <div className="flex items-center gap-2">
+            <span className="text-lg">🏦</span>
+            <div>
+              <Radio.Label>Bank Transfer</Radio.Label>
+              <Radio.Description>Direct bank transfer (2-3 days)</Radio.Description>
+            </div>
+          </div>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Payment method selection with icons and descriptions.',
+      },
+    },
+  },
+};
+
+export const PricingPlans: Story = {
+  render: () => (
+    <div className="w-[500px] rounded-lg border border-[var(--border)] bg-[var(--background)] p-6">
+      <RadioGroup label="Select Your Plan" size="lg" defaultValue="pro">
+        <Radio value="free">
+          <div className="flex w-full items-center justify-between">
+            <div>
+              <Radio.Label>Free</Radio.Label>
+              <Radio.Description>For individuals getting started</Radio.Description>
+            </div>
+            <span className="font-bold text-[var(--foreground)]">$0/mo</span>
+          </div>
+        </Radio>
+        <Radio value="pro">
+          <div className="flex w-full items-center justify-between">
+            <div>
+              <Radio.Label>Pro</Radio.Label>
+              <Radio.Description>For professionals and small teams</Radio.Description>
+            </div>
+            <span className="font-bold text-[var(--foreground)]">$19/mo</span>
+          </div>
+        </Radio>
+        <Radio value="enterprise">
+          <div className="flex w-full items-center justify-between">
+            <div>
+              <Radio.Label>Enterprise</Radio.Label>
+              <Radio.Description>For large organizations</Radio.Description>
+            </div>
+            <span className="font-bold text-[var(--foreground)]">Custom</span>
+          </div>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pricing plans with flexible content layout.',
+      },
+    },
+  },
+};
+
+export const SurveyQuestion: Story = {
+  render: () => (
+    <div className="w-96 rounded-lg border border-[var(--border)] bg-[var(--background)] p-6">
+      <RadioGroup
+        label="How satisfied are you with our service?"
+        orientation="horizontal"
+        isRequired
+      >
+        <Radio value="1">
+          <Radio.Label>1</Radio.Label>
+        </Radio>
+        <Radio value="2">
+          <Radio.Label>2</Radio.Label>
+        </Radio>
+        <Radio value="3">
+          <Radio.Label>3</Radio.Label>
+        </Radio>
+        <Radio value="4">
+          <Radio.Label>4</Radio.Label>
+        </Radio>
+        <Radio value="5">
+          <Radio.Label>5</Radio.Label>
+        </Radio>
+      </RadioGroup>
+      <div className="mt-2 flex justify-between text-xs text-[var(--muted-foreground)]">
+        <span>Not satisfied</span>
+        <span>Very satisfied</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Horizontal RadioGroup for rating/survey questions.',
+      },
+    },
+  },
+};
+
+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>
+      <RadioGroup
+        variant="destructive"
+        label="Delete your account?"
+        description="This action cannot be undone. All your data will be permanently deleted."
+      >
+        <Radio value="keep">
+          <Radio.Label>No, keep my account</Radio.Label>
+        </Radio>
+        <Radio value="delete">
+          <Radio.Label>Yes, delete my account and all data</Radio.Label>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Destructive variant for dangerous actions.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Card-Style Radio Examples
+// ============================================================================
+
+export const CardStyleBasic: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <RadioGroup label="Select a plan" size="lg" defaultValue="pro">
+        <Radio value="starter" className="p-6">
+          <div className="flex w-full flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <Radio.Label>Starter</Radio.Label>
+              <span className="rounded-full bg-[var(--muted)] px-2 py-0.5 text-xs text-[var(--muted-foreground)]">
+                Free
+              </span>
+            </div>
+            <Radio.Description>Perfect for trying out the platform</Radio.Description>
+            <ul className="mt-2 space-y-1 text-sm text-[var(--muted-foreground)]">
+              <li>• 1 project</li>
+              <li>• 100 MB storage</li>
+              <li>• Community support</li>
+            </ul>
+          </div>
+        </Radio>
+        <Radio value="pro" className="p-6">
+          <div className="flex w-full flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <Radio.Label>Pro</Radio.Label>
+              <span className="rounded-full bg-[var(--primary)] px-2 py-0.5 text-xs text-[var(--primary-foreground)]">
+                Popular
+              </span>
+            </div>
+            <Radio.Description>Best for professionals and small teams</Radio.Description>
+            <ul className="mt-2 space-y-1 text-sm text-[var(--muted-foreground)]">
+              <li>• Unlimited projects</li>
+              <li>• 10 GB storage</li>
+              <li>• Priority support</li>
+              <li>• Advanced analytics</li>
+            </ul>
+            <div className="mt-2 text-lg font-bold text-[var(--foreground)]">$19/month</div>
+          </div>
+        </Radio>
+        <Radio value="enterprise" className="p-6">
+          <div className="flex w-full flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <Radio.Label>Enterprise</Radio.Label>
+              <span className="rounded-full bg-[var(--accent)] px-2 py-0.5 text-xs text-[var(--accent-foreground)]">
+                Custom
+              </span>
+            </div>
+            <Radio.Description>For large organizations with custom needs</Radio.Description>
+            <ul className="mt-2 space-y-1 text-sm text-[var(--muted-foreground)]">
+              <li>• Everything in Pro</li>
+              <li>• Unlimited storage</li>
+              <li>• Dedicated support</li>
+              <li>• Custom integrations</li>
+              <li>• SLA guarantee</li>
+            </ul>
+            <div className="mt-2 text-lg font-bold text-[var(--foreground)]">Contact us</div>
+          </div>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style radio items with rich content including badges, feature lists, and pricing.',
+      },
+    },
+  },
+};
+
+export const CardStyleWithIcons: Story = {
+  render: () => (
+    <div className="w-[600px]">
+      <RadioGroup
+        label="Choose your workspace type"
+        orientation="horizontal"
+        size="lg"
+      >
+        <Radio 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>
+              <Radio.Label>Personal</Radio.Label>
+              <Radio.Description>For individual use</Radio.Description>
+            </div>
+          </div>
+        </Radio>
+        <Radio 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>
+              <Radio.Label>Team</Radio.Label>
+              <Radio.Description>For small teams</Radio.Description>
+            </div>
+          </div>
+        </Radio>
+        <Radio value="organization" 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>
+              <Radio.Label>Organization</Radio.Label>
+              <Radio.Description>For enterprises</Radio.Description>
+            </div>
+          </div>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style horizontal layout with centered icons, ideal for workspace 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 Preferences
+      </h3>
+      <RadioGroup label="How often would you like to receive updates?" defaultValue="daily">
+        <Radio value="realtime" 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">
+              <Radio.Label>Real-time</Radio.Label>
+              <Radio.Description>
+                Get notified instantly when something happens. Best for time-sensitive workflows.
+              </Radio.Description>
+            </div>
+          </div>
+        </Radio>
+        <Radio value="daily" 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">
+              <Radio.Label>Daily digest</Radio.Label>
+              <Radio.Description>
+                Receive a summary of all activity once per day. Reduces notification fatigue.
+              </Radio.Description>
+            </div>
+          </div>
+        </Radio>
+        <Radio value="weekly" 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">
+              <Radio.Label>Weekly summary</Radio.Label>
+              <Radio.Description>
+                Get a comprehensive weekly report with all important updates and metrics.
+              </Radio.Description>
+            </div>
+          </div>
+        </Radio>
+        <Radio value="none" 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">
+              <Radio.Label>None</Radio.Label>
+              <Radio.Description>
+                Turn off all notifications. You can still check updates manually in the app.
+              </Radio.Description>
+            </div>
+          </div>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style radio for settings pages with icons, labels, and detailed descriptions.',
+      },
+    },
+  },
+};
+
+export const CardStyleImageSelection: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <RadioGroup
+        label="Choose a theme"
+        orientation="horizontal"
+        defaultValue="light"
+      >
+        <Radio 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">
+              <Radio.Label>Light</Radio.Label>
+            </div>
+          </div>
+        </Radio>
+        <Radio 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">
+              <Radio.Label>Dark</Radio.Label>
+            </div>
+          </div>
+        </Radio>
+        <Radio 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">
+              <Radio.Label>System</Radio.Label>
+            </div>
+          </div>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card-style radio with visual previews, perfect for theme or template selection.',
+      },
+    },
+  },
+};
+
+export const CardStyleCompact: Story = {
+  render: () => (
+    <div className="w-80">
+      <RadioGroup label="Select size" orientation="horizontal" size="sm" defaultValue="m">
+        <Radio value="xs" className="flex-1 justify-center">
+          <Radio.Label>XS</Radio.Label>
+        </Radio>
+        <Radio value="s" className="flex-1 justify-center">
+          <Radio.Label>S</Radio.Label>
+        </Radio>
+        <Radio value="m" className="flex-1 justify-center">
+          <Radio.Label>M</Radio.Label>
+        </Radio>
+        <Radio value="l" className="flex-1 justify-center">
+          <Radio.Label>L</Radio.Label>
+        </Radio>
+        <Radio value="xl" className="flex-1 justify-center">
+          <Radio.Label>XL</Radio.Label>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact card-style radio for size or variant selection, similar to e-commerce size pickers.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Accessibility Stories
+// ============================================================================
+
+export const FocusVisible: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="opt1">
+        <Radio.Label>Focus me with Tab</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>Use arrow keys to navigate</Radio.Label>
+      </Radio>
+      <Radio value="opt3">
+        <Radio.Label>Press Space/Enter to select</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Keyboard Navigation',
+    description: 'Tab into the group, then use arrow keys to navigate',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Press Tab to see the focus ring. Meets WCAG 2.2 AAA standards with visible focus indicator.',
+      },
+    },
+  },
+};
+
+export const TouchTarget: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="opt1">
+        <Radio.Label>Touch-friendly option</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>44px+ minimum height</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  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">
+      <RadioGroup label="اختر خيارًا" defaultValue="opt1">
+        <Radio value="opt1">
+          <Radio.Label>الخيار الأول</Radio.Label>
+          <Radio.Description>وصف للخيار الأول</Radio.Description>
+        </Radio>
+        <Radio value="opt2">
+          <Radio.Label>الخيار الثاني</Radio.Label>
+          <Radio.Description>وصف للخيار الثاني</Radio.Description>
+        </Radio>
+        <Radio value="opt3">
+          <Radio.Label>الخيار الثالث</Radio.Label>
+          <Radio.Description>وصف للخيار الثالث</Radio.Description>
+        </Radio>
+      </RadioGroup>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'RTL support with indicator auto-flipping to the right side.',
+      },
+    },
+  },
+};
+
+export const WithAriaLabel: Story = {
+  render: () => (
+    <RadioGroup aria-label="Hidden label for screen readers" defaultValue="opt1">
+      <Radio value="opt1">
+        <Radio.Label>Option 1</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>Option 2</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'RadioGroup without visible label, using aria-label for screen readers.',
+      },
+    },
+  },
+};
+
+// ============================================================================
+// Theme Integration Stories
+// ============================================================================
+
+export const LightTheme: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="opt1">
+        <Radio.Label>Light theme option</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>Another option</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Light Theme',
+    defaultValue: 'opt1',
+  },
+  parameters: {
+    backgrounds: { default: 'light' },
+  },
+};
+
+export const DarkTheme: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="opt1">
+        <Radio.Label>Dark theme option</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>Another option</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Dark Theme',
+    defaultValue: 'opt1',
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: 'RadioGroup adapts to dark theme via semantic tokens.',
+      },
+    },
+  },
+};
+
+export const HighContrast: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="opt1">
+        <Radio.Label>High contrast option</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>Another option</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'High Contrast',
+    defaultValue: 'opt1',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'RadioGroup with enhanced outlines for high contrast mode.',
+      },
+    },
+  },
+};
+
+export const ColorblindTheme: Story = {
+  render: (args) => (
+    <RadioGroup {...args}>
+      <Radio value="opt1">
+        <Radio.Label>Colorblind-friendly option</Radio.Label>
+      </Radio>
+      <Radio value="opt2">
+        <Radio.Label>Another option</Radio.Label>
+      </Radio>
+    </RadioGroup>
+  ),
+  args: {
+    label: 'Colorblind Theme',
+    defaultValue: 'opt1',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'RadioGroup with colorblind-friendly palette (deuteranopia, protanopia, tritanopia support).',
+      },
+    },
+  },
+};