@getmicdrop/svelte-components 5.10.3 → 5.13.0

package/dist/stories/PrimitivesGallery.svelte

@@ -1,752 +1,756 @@
-<script lang="ts">
-  // ============================================================================
-  // PRIMITIVES VISUAL GALLERY
-  // Displays ALL primitive components with variants and states
-  // ============================================================================
-
-  // Accordion
-  import Accordion from '../primitives/Accordion/Accordion.svelte';
-  import AccordionItem from '../primitives/Accordion/AccordionItem.svelte';
-
-  // Alert
-  import Alert from '../primitives/Alert/Alert.svelte';
-
-  // Avatar
-  import Avatar from '../primitives/Avatar/Avatar.svelte';
-
-  // Badge
-  import Badge from '../primitives/Badges/Badge.svelte';
-
-  // BottomSheet
-  import BottomSheet from '../primitives/BottomSheet/BottomSheet.svelte';
-
-  // Breadcrumb
-  import Breadcrumb from '../primitives/Breadcrumb/Breadcrumb.svelte';
-
-  // Button
-  import Button from '../primitives/Button/Button.svelte';
-
-  // Card
-  import Card from '../primitives/Card.svelte';
-
-  // Checkbox
-  import Checkbox from '../primitives/Checkbox/Checkbox.svelte';
-
-  // DarkModeToggle
-  import DarkModeToggle from '../primitives/DarkModeToggle.svelte';
-
-  // Drawer
-  import Drawer from '../primitives/Drawer/Drawer.svelte';
-
-  // Dropdown
-  import Dropdown from '../primitives/Dropdown/Dropdown.svelte';
-  import DropdownItem from '../primitives/Dropdown/DropdownItem.svelte';
-
-  // Input
-  import Input from '../primitives/Input/Input.svelte';
-  import Select from '../primitives/Input/Select.svelte';
-  import Textarea from '../primitives/Input/Textarea.svelte';
-
-  // Label
-  import Label from '../primitives/Label/Label.svelte';
-
-  // Modal
-  import Modal from '../primitives/Modal/Modal.svelte';
-
-  // Pagination
-  import Pagination from '../primitives/Pagination/Pagination.svelte';
-
-  // Radio
-  import Radio from '../primitives/Radio/Radio.svelte';
-
-  // Skeleton
-  import Skeleton from '../primitives/Skeleton/Skeleton.svelte';
-  import ImagePlaceholder from '../primitives/Skeleton/ImagePlaceholder.svelte';
-  import CardPlaceholder from '../primitives/Skeleton/CardPlaceholder.svelte';
-  import ListPlaceholder from '../primitives/Skeleton/ListPlaceholder.svelte';
-
-  // Spinner
-  import Spinner from '../primitives/Spinner/Spinner.svelte';
-
-  // Tabs
-  import Tabs from '../primitives/Tabs/Tabs.svelte';
-  import TabItem from '../primitives/Tabs/TabItem.svelte';
-
-  // Toggle
-  import Toggle from '../primitives/Toggle.svelte';
-
-  // Typography
-  import Typography from '../primitives/Typography/Typography.svelte';
-
-  // ValidationError
-  import ValidationError from '../primitives/ValidationError.svelte';
-
-  // Icons
-  import Icon from '../primitives/Icons/Icon.svelte';
-  import Home from '../primitives/Icons/Home.svelte';
-  import Profile from '../primitives/Icons/Profile.svelte';
-  import Notification from '../primitives/Icons/Notification.svelte';
-  import Message from '../primitives/Icons/Message.svelte';
-  import Cross from '../primitives/Icons/Cross.svelte';
-  import CheckCircle from '../primitives/Icons/CheckCircle.svelte';
-  import ErrorCircle from '../primitives/Icons/ErrorCircle.svelte';
-  import Info from '../primitives/Icons/Info.svelte';
-  import WarningIcon from '../primitives/Icons/WarningIcon.svelte';
-
-  // State
-  let isDark = $state(false);
-  let showModal = $state(false);
-  let showDrawer = $state(false);
-  let showBottomSheet = $state(false);
-  let dropdownOpen = $state(false);
-  let checkboxChecked = $state(false);
-  let toggleChecked = $state(false);
-  let radioValue = $state('option1');
-  let inputValue = $state('');
-  let textareaValue = $state('');
-  let selectValue = $state('');
-  let currentPage = $state(1);
-  let activeTab = $state(0);
-
-  function toggleDark() {
-    isDark = !isDark;
-    document.documentElement.classList.toggle('dark', isDark);
-  }
-
-  // Section component for consistent styling
-  const sectionClass = (dark: boolean) =>
-    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
-
-  const headingClass = (dark: boolean) =>
-    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
-
-  const subheadingClass = (dark: boolean) =>
-    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
-</script>
-
-<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
-  <!-- Header -->
-  <div class="flex items-center justify-between mb-8">
-    <div>
-      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Primitives Gallery</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All primitive components with variants and states</p>
-    </div>
-    <button
-      onclick={toggleDark}
-      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
-    >
-      {isDark ? '☀️ Light' : '🌙 Dark'}
-    </button>
-  </div>
-
-  <!-- ========== BUTTONS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Button</h2>
-    <p class={subheadingClass(isDark)}>Primary action component with multiple variants</p>
-
-    <div class="space-y-4">
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Variants</p>
-        <div class="flex flex-wrap gap-3 items-center">
-          <Button variant="default">Primary</Button>
-          <Button variant="alternative">Secondary</Button>
-          <Button variant="outline">Outline</Button>
-          <Button variant="ghost">Ghost</Button>
-          <Button variant="link">Link</Button>
-          <Button variant="red">Destructive</Button>
-          <Button variant="red-outline">Red Outline</Button>
-          <Button variant="ghost-red">Ghost Red</Button>
-          <Button variant="toggle">Toggle</Button>
-          <Button variant="toggle" active={true}>Toggle Active</Button>
-        </div>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Nav Variant (Mobile Navigation)</p>
-        <div class="flex gap-6 items-end bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
-          <Button variant="nav">
-            <Home class="w-5 h-5" />
-            <span>Home</span>
-          </Button>
-          <Button variant="nav" active={true}>
-            <Notification class="w-5 h-5" />
-            <span>Events</span>
-          </Button>
-          <Button variant="nav">
-            <Profile class="w-5 h-5" />
-            <span>Profile</span>
-          </Button>
-        </div>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Avatar, Menu & Card Variants</p>
-        <div class="flex gap-6 items-start">
-          <div class="flex flex-col items-center gap-2">
-            <Button variant="avatar">
-              <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%238b5cf6'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E" rounded size="md" />
-            </Button>
-            <span class="text-xs text-gray-500">Avatar trigger</span>
-          </div>
-          <div class="w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
-            <Button variant="menu-item">Settings</Button>
-            <Button variant="menu-item">Profile</Button>
-            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
-            <Button variant="menu-item-danger">Sign out</Button>
-          </div>
-          <div class="w-64 space-y-2">
-            <Button variant="card">
-              <span class="flex flex-col">
-                <span class="font-medium">Select this option</span>
-                <span class="text-sm text-gray-500">Description text here</span>
-              </span>
-            </Button>
-            <Button variant="card">
-              <span class="flex flex-col">
-                <span class="font-medium">Another option</span>
-                <span class="text-sm text-gray-500">More description</span>
-              </span>
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Sizes</p>
-        <div class="flex flex-wrap gap-3 items-end">
-          <Button size="xs">Extra Small</Button>
-          <Button size="sm">Small</Button>
-          <Button size="md">Medium</Button>
-          <Button size="lg">Large</Button>
-          <Button size="xl">Extra Large</Button>
-        </div>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">States</p>
-        <div class="flex flex-wrap gap-3 items-center">
-          <Button disabled>Disabled</Button>
-          <Button loading>Loading</Button>
-          <Button success successText="Saved!">Success</Button>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== INPUTS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Input, Select, Textarea</h2>
-    <p class={subheadingClass(isDark)}>Form input primitives</p>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      <div>
-        <Input
-          label="Text Input"
-          placeholder="Enter text..."
-          bind:value={inputValue}
-        />
-      </div>
-
-      <div>
-        <Input
-          type="email"
-          label="Email Input"
-          placeholder="email@example.com"
-        />
-      </div>
-
-      <div>
-        <Input
-          type="password"
-          label="Password"
-          placeholder="••••••••"
-        />
-      </div>
-
-      <div>
-        <Input
-          label="With Error"
-          placeholder="Invalid input"
-          errorText="This field is required"
-        />
-      </div>
-
-      <div>
-        <Input
-          label="Disabled"
-          placeholder="Can't edit this"
-          disabled
-        />
-      </div>
-
-      <div>
-        <Input
-          label="With Helper Text"
-          placeholder="Enter something"
-          helperText="This is helper text"
-        />
-      </div>
-    </div>
-
-    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-      <div>
-        <Textarea
-          label="Textarea"
-          placeholder="Write your message..."
-          bind:value={textareaValue}
-        />
-      </div>
-
-      <div>
-        <Select
-          label="Select"
-          bind:value={selectValue}
-        >
-          <option value="">Choose an option</option>
-          <option value="1">Option 1</option>
-          <option value="2">Option 2</option>
-          <option value="3">Option 3</option>
-        </Select>
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== CHECKBOX, RADIO, TOGGLE ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Checkbox, Radio, Toggle</h2>
-    <p class={subheadingClass(isDark)}>Selection controls</p>
-
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Checkbox</p>
-        <div class="space-y-3">
-          <Checkbox bind:checked={checkboxChecked}>Default checkbox</Checkbox>
-          <Checkbox checked={true}>Checked by default</Checkbox>
-          <Checkbox disabled>Disabled</Checkbox>
-          <Checkbox disabled checked={true}>Disabled checked</Checkbox>
-        </div>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Radio</p>
-        <div class="space-y-3">
-          <Radio name="demo" value="option1" bind:group={radioValue}>Option 1</Radio>
-          <Radio name="demo" value="option2" bind:group={radioValue}>Option 2</Radio>
-          <Radio name="demo" value="option3" bind:group={radioValue}>Option 3</Radio>
-          <Radio name="demo-disabled" value="disabled" disabled>Disabled</Radio>
-        </div>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Toggle</p>
-        <div class="space-y-3">
-          <Toggle bind:checked={toggleChecked}>Default toggle</Toggle>
-          <Toggle checked={true}>On by default</Toggle>
-          <Toggle disabled>Disabled off</Toggle>
-          <Toggle disabled checked={true}>Disabled on</Toggle>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== BADGE ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Badge</h2>
-    <p class={subheadingClass(isDark)}>Status indicators and labels</p>
-
-    <div class="space-y-4">
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Colors</p>
-        <div class="flex flex-wrap gap-3">
-          <Badge variant="blue">Blue</Badge>
-          <Badge variant="gray">Gray</Badge>
-          <Badge variant="red">Red</Badge>
-          <Badge variant="green">Green</Badge>
-          <Badge variant="yellow">Yellow</Badge>
-          <Badge variant="indigo">Indigo</Badge>
-          <Badge variant="purple">Purple</Badge>
-          <Badge variant="pink">Pink</Badge>
-        </div>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Sizes</p>
-        <div class="flex flex-wrap gap-3 items-center">
-          <Badge size="xs">Extra Small</Badge>
-          <Badge size="sm">Small</Badge>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== ALERT ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Alert</h2>
-    <p class={subheadingClass(isDark)}>Contextual feedback messages</p>
-
-    <div class="space-y-4">
-      <Alert color="info">
-        <span class="font-medium">Info!</span> This is an informational alert.
-      </Alert>
-      <Alert color="success">
-        <span class="font-medium">Success!</span> Your changes have been saved.
-      </Alert>
-      <Alert color="warning">
-        <span class="font-medium">Warning!</span> Please review before proceeding.
-      </Alert>
-      <Alert color="error">
-        <span class="font-medium">Error!</span> Something went wrong.
-      </Alert>
-    </div>
-  </section>
-
-  <!-- ========== CARD ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Card</h2>
-    <p class={subheadingClass(isDark)}>Container component for content</p>
-
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <Card>
-        <h3 class="text-lg font-semibold mb-2">Default Card</h3>
-        <p class="text-gray-600">Basic card with default styling.</p>
-      </Card>
-      <Card class="p-8">
-        <h3 class="text-lg font-semibold mb-2">Large Padding</h3>
-        <p class="text-gray-600">Card with larger padding.</p>
-      </Card>
-      <Card hover>
-        <h3 class="text-lg font-semibold mb-2">Hoverable</h3>
-        <p class="text-gray-600">Hover to see the effect.</p>
-      </Card>
-    </div>
-  </section>
-
-  <!-- ========== ACCORDION ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Accordion</h2>
-    <p class={subheadingClass(isDark)}>Collapsible content sections</p>
-
-    <div class="max-w-2xl">
-      <Accordion>
-        <AccordionItem>
-          {#snippet header()}What is this component?{/snippet}
-          <p class="text-gray-600">This is an accordion component that allows you to show and hide content sections.</p>
-        </AccordionItem>
-        <AccordionItem>
-          {#snippet header()}How do I use it?{/snippet}
-          <p class="text-gray-600">Wrap AccordionItem components inside an Accordion component. Each item uses a header snippet.</p>
-        </AccordionItem>
-        <AccordionItem>
-          {#snippet header()}Is it accessible?{/snippet}
-          <p class="text-gray-600">Yes! It includes proper ARIA attributes and keyboard navigation.</p>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  </section>
-
-  <!-- ========== TABS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Tabs</h2>
-    <p class={subheadingClass(isDark)}>Tabbed content navigation</p>
-
-    <div class="max-w-2xl">
-      <Tabs bind:activeTabValue={activeTab}>
-        <TabItem title="Profile">
-          <div class="p-4">
-            <p class="text-gray-600">This is the Profile tab content.</p>
-          </div>
-        </TabItem>
-        <TabItem title="Settings">
-          <div class="p-4">
-            <p class="text-gray-600">This is the Settings tab content.</p>
-          </div>
-        </TabItem>
-        <TabItem title="Messages">
-          <div class="p-4">
-            <p class="text-gray-600">This is the Messages tab content.</p>
-          </div>
-        </TabItem>
-      </Tabs>
-    </div>
-  </section>
-
-  <!-- ========== PAGINATION ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Pagination</h2>
-    <p class={subheadingClass(isDark)}>Page navigation control</p>
-
-    <Pagination
-      totalPages={10}
-      bind:currentPage={currentPage}
-    />
-    <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'} mt-3">Current page: {currentPage}</p>
-  </section>
-
-  <!-- ========== SKELETON ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Skeleton</h2>
-    <p class={subheadingClass(isDark)}>Loading placeholder components</p>
-
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Basic Skeleton</p>
-        <div class="space-y-2">
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-4 w-3/4" />
-          <Skeleton class="h-4 w-1/2" />
-        </div>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Image Placeholder</p>
-        <ImagePlaceholder />
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Card Placeholder</p>
-        <CardPlaceholder />
-      </div>
-    </div>
-
-    <div class="mt-6">
-      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">List Placeholder</p>
-      <ListPlaceholder />
-    </div>
-  </section>
-
-  <!-- ========== SPINNER ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Spinner</h2>
-    <p class={subheadingClass(isDark)}>Loading indicator</p>
-
-    <div class="flex flex-wrap gap-6 items-center">
-      <div class="text-center">
-        <Spinner size="sm" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Small</p>
-      </div>
-      <div class="text-center">
-        <Spinner size="md" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Medium</p>
-      </div>
-      <div class="text-center">
-        <Spinner size="lg" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Large</p>
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== AVATAR ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Avatar</h2>
-    <p class={subheadingClass(isDark)}>User profile pictures</p>
-
-    <div class="flex flex-wrap gap-4 items-end">
-      <div class="text-center">
-        <Avatar size="xs" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">XS</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="sm" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">SM</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="md" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">MD</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="lg" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">LG</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="xl" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">XL</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="md" initials="JD" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Initials</p>
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== BREADCRUMB ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Breadcrumb</h2>
-    <p class={subheadingClass(isDark)}>Navigation path indicator</p>
-
-    <Breadcrumb data={[
-      { name: 'Home', href: '/' },
-      { name: 'Products', href: '/products' },
-      { name: 'Category', href: '/products/category' },
-      { name: 'Current Page', href: '#' }
-    ]} />
-  </section>
-
-  <!-- ========== LABEL ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Label</h2>
-    <p class={subheadingClass(isDark)}>Form field labels</p>
-
-    <div class="flex flex-wrap gap-6">
-      <Label>Default Label</Label>
-      <Label required>Required Label</Label>
-      <Label optional>Optional Label</Label>
-    </div>
-  </section>
-
-  <!-- ========== VALIDATION ERROR ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>ValidationError</h2>
-    <p class={subheadingClass(isDark)}>Form validation error messages</p>
-
-    <div class="space-y-2">
-      <ValidationError error="This field is required" />
-      <ValidationError error="Email format is invalid" />
-      <ValidationError error="Password must be at least 8 characters" />
-    </div>
-  </section>
-
-  <!-- ========== ICONS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Icons</h2>
-    <p class={subheadingClass(isDark)}>SVG icon components</p>
-
-    <div class="flex flex-wrap gap-6">
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <Home />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Home</p>
-      </div>
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <Profile />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Profile</p>
-      </div>
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <Notification />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Notification</p>
-      </div>
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <Message />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Message</p>
-      </div>
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <CheckCircle />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">CheckCircle</p>
-      </div>
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <ErrorCircle />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">ErrorCircle</p>
-      </div>
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <Info />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Info</p>
-      </div>
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <WarningIcon />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Warning</p>
-      </div>
-      <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
-          <Cross />
-        </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Cross</p>
-      </div>
-    </div>
-    <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'} mt-4">
-      See <strong>IconGallery</strong> story for complete icon reference (30+ icons)
-    </p>
-  </section>
-
-  <!-- ========== DARK MODE TOGGLE ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>DarkModeToggle</h2>
-    <p class={subheadingClass(isDark)}>Theme switcher component</p>
-
-    <DarkModeToggle />
-  </section>
-
-  <!-- ========== INTERACTIVE COMPONENTS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Modal, Drawer, BottomSheet, Dropdown</h2>
-    <p class={subheadingClass(isDark)}>Overlay and dropdown components</p>
-
-    <div class="flex flex-wrap gap-4">
-      <Button onclick={() => showModal = true}>Open Modal</Button>
-      <Button variant="alternative" onclick={() => showDrawer = true}>Open Drawer</Button>
-      <Button variant="outline" onclick={() => showBottomSheet = true}>Open BottomSheet</Button>
-
-      <div class="relative inline-block">
-        <Button variant="ghost" onclick={() => dropdownOpen = !dropdownOpen}>
-          Toggle Dropdown ▼
-        </Button>
-        <Dropdown bind:open={dropdownOpen} class="left-0 top-full mt-1">
-          <DropdownItem onclick={() => dropdownOpen = false}>Option 1</DropdownItem>
-          <DropdownItem onclick={() => dropdownOpen = false}>Option 2</DropdownItem>
-          <DropdownItem onclick={() => dropdownOpen = false}>Option 3</DropdownItem>
-        </Dropdown>
-      </div>
-    </div>
-  </section>
-
-  <!-- Modal -->
-  <Modal bind:show={showModal}>
-    {#snippet header()}
-      <h3 class="text-lg font-semibold">Example Modal</h3>
-    {/snippet}
-    {#snippet body()}
-      <p class="text-gray-600">This is the modal content. Click outside or press ESC to close.</p>
-    {/snippet}
-    {#snippet footer()}
-      <Button variant="ghost" onclick={() => showModal = false}>Cancel</Button>
-      <Button onclick={() => showModal = false}>Confirm</Button>
-    {/snippet}
-  </Modal>
-
-  <!-- Drawer -->
-  <Drawer bind:show={showDrawer} placement="right">
-    <div class="p-6">
-      <h3 class="text-lg font-semibold mb-4">Drawer Content</h3>
-      <p class="text-gray-600">This drawer slides in from the right.</p>
-      <Button class="mt-4" onclick={() => showDrawer = false}>Close</Button>
-    </div>
-  </Drawer>
-
-  <!-- BottomSheet -->
-  <BottomSheet show={showBottomSheet} onclose={() => showBottomSheet = false}>
-    <div class="p-6">
-      <h3 class="text-lg font-semibold mb-4">Bottom Sheet</h3>
-      <p class="text-gray-600">This sheet slides up from the bottom on mobile.</p>
-      <Button class="mt-4" onclick={() => showBottomSheet = false}>Close</Button>
-    </div>
-  </BottomSheet>
-
-  <!-- ========== TYPOGRAPHY ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Typography</h2>
-    <p class={subheadingClass(isDark)}>Text styling component</p>
-
-    <div class="space-y-4">
-      <Typography variant="h1">Heading 1</Typography>
-      <Typography variant="h2">Heading 2</Typography>
-      <Typography variant="h3">Heading 3</Typography>
-      <Typography variant="h4">Heading 4</Typography>
-      <Typography variant="p">Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Typography>
-      <Typography variant="h6">Small text - Secondary information</Typography>
-      <Typography variant="p" class="text-xs">Caption text - Meta information</Typography>
-    </div>
-  </section>
-</div>
+<script lang="ts">
+  // ============================================================================
+  // PRIMITIVES VISUAL GALLERY
+  // Displays ALL primitive components with variants and states
+  // ============================================================================
+
+  // Accordion
+  import Accordion from '../primitives/Accordion/Accordion.svelte';
+  import AccordionItem from '../primitives/Accordion/AccordionItem.svelte';
+
+  // Alert
+  import Alert from '../primitives/Alert/Alert.svelte';
+
+  // Avatar
+  import Avatar from '../primitives/Avatar/Avatar.svelte';
+
+  // Badge
+  import Badge from '../primitives/Badges/Badge.svelte';
+
+  // BottomSheet
+  import BottomSheet from '../primitives/BottomSheet/BottomSheet.svelte';
+
+  // Breadcrumb
+  import Breadcrumb from '../primitives/Breadcrumb/Breadcrumb.svelte';
+
+  // Button
+  import Button from '../primitives/Button/Button.svelte';
+  import MenuItem from '../primitives/MenuItem/MenuItem.svelte';
+  import AvatarButton from '../primitives/AvatarButton/AvatarButton.svelte';
+  import CardAction from '../primitives/CardAction/CardAction.svelte';
+  import NavItem from '../primitives/NavItem/NavItem.svelte';
+
+  // Card
+  import Card from '../primitives/Card.svelte';
+
+  // Checkbox
+  import Checkbox from '../primitives/Checkbox/Checkbox.svelte';
+
+  // DarkModeToggle
+  import DarkModeToggle from '../primitives/DarkModeToggle.svelte';
+
+  // Drawer
+  import Drawer from '../primitives/Drawer/Drawer.svelte';
+
+  // Dropdown
+  import Dropdown from '../primitives/Dropdown/Dropdown.svelte';
+  import DropdownItem from '../primitives/Dropdown/DropdownItem.svelte';
+
+  // Input
+  import Input from '../primitives/Input/Input.svelte';
+  import Select from '../primitives/Input/Select.svelte';
+  import Textarea from '../primitives/Input/Textarea.svelte';
+
+  // Label
+  import Label from '../primitives/Label/Label.svelte';
+
+  // Modal
+  import Modal from '../primitives/Modal/Modal.svelte';
+
+  // Pagination
+  import Pagination from '../primitives/Pagination/Pagination.svelte';
+
+  // Radio
+  import Radio from '../primitives/Radio/Radio.svelte';
+
+  // Skeleton
+  import Skeleton from '../primitives/Skeleton/Skeleton.svelte';
+  import ImagePlaceholder from '../primitives/Skeleton/ImagePlaceholder.svelte';
+  import CardPlaceholder from '../primitives/Skeleton/CardPlaceholder.svelte';
+  import ListPlaceholder from '../primitives/Skeleton/ListPlaceholder.svelte';
+
+  // Spinner
+  import Spinner from '../primitives/Spinner/Spinner.svelte';
+
+  // Tabs
+  import Tabs from '../primitives/Tabs/Tabs.svelte';
+  import TabItem from '../primitives/Tabs/TabItem.svelte';
+
+  // Toggle
+  import Toggle from '../primitives/Toggle.svelte';
+
+  // Typography
+  import Typography from '../primitives/Typography/Typography.svelte';
+
+  // ValidationError
+  import ValidationError from '../primitives/ValidationError.svelte';
+
+  // Icons
+  import Icon from '../primitives/Icons/Icon.svelte';
+  import Home from '../primitives/Icons/Home.svelte';
+  import Profile from '../primitives/Icons/Profile.svelte';
+  import Notification from '../primitives/Icons/Notification.svelte';
+  import Message from '../primitives/Icons/Message.svelte';
+  import Cross from '../primitives/Icons/Cross.svelte';
+  import CheckCircle from '../primitives/Icons/CheckCircle.svelte';
+  import ErrorCircle from '../primitives/Icons/ErrorCircle.svelte';
+  import Info from '../primitives/Icons/Info.svelte';
+  import WarningIcon from '../primitives/Icons/WarningIcon.svelte';
+
+  // State
+  let isDark = $state(false);
+  let showModal = $state(false);
+  let showDrawer = $state(false);
+  let showBottomSheet = $state(false);
+  let dropdownOpen = $state(false);
+  let checkboxChecked = $state(false);
+  let toggleChecked = $state(false);
+  let radioValue = $state('option1');
+  let inputValue = $state('');
+  let textareaValue = $state('');
+  let selectValue = $state('');
+  let currentPage = $state(1);
+  let activeTab = $state(0);
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+
+  // Section component for consistent styling
+  const sectionClass = (dark: boolean) =>
+    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
+
+  const headingClass = (dark: boolean) =>
+    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
+
+  const subheadingClass = (dark: boolean) =>
+    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
+</script>
+
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+  <!-- Header -->
+  <div class="flex items-center justify-between mb-8">
+    <div>
+      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Primitives Gallery</h1>
+      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All primitive components with variants and states</p>
+    </div>
+    <button
+      onclick={toggleDark}
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+    >
+      {isDark ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  </div>
+
+  <!-- ========== BUTTONS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Button</h2>
+    <p class={subheadingClass(isDark)}>Primary action component with multiple variants</p>
+
+    <div class="space-y-4">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Variants</p>
+        <div class="flex flex-wrap gap-3 items-center">
+          <Button variant="default">Primary</Button>
+          <Button variant="alternative">Secondary</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="link">Link</Button>
+          <Button variant="red">Destructive</Button>
+          <Button variant="red-outline">Red Outline</Button>
+          <Button variant="ghost-red">Ghost Red</Button>
+          <Button variant="toggle">Toggle</Button>
+          <Button variant="toggle" active={true}>Toggle Active</Button>
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">NavItem (Mobile Navigation)</p>
+        <div class="flex gap-6 items-end bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
+          <NavItem>
+            <Home class="w-5 h-5" />
+            <span>Home</span>
+          </NavItem>
+          <NavItem active={true}>
+            <Notification class="w-5 h-5" />
+            <span>Events</span>
+          </NavItem>
+          <NavItem>
+            <Profile class="w-5 h-5" />
+            <span>Profile</span>
+          </NavItem>
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Avatar, Menu & Card Components</p>
+        <div class="flex gap-6 items-start">
+          <div class="flex flex-col items-center gap-2">
+            <AvatarButton>
+              <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%238b5cf6'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E" rounded size="md" />
+            </AvatarButton>
+            <span class="text-xs text-gray-500">AvatarButton</span>
+          </div>
+          <div class="w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
+            <MenuItem>Settings</MenuItem>
+            <MenuItem>Profile</MenuItem>
+            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+            <MenuItem danger>Sign out</MenuItem>
+          </div>
+          <div class="w-64 space-y-2">
+            <CardAction>
+              <span class="flex flex-col">
+                <span class="font-medium">Select this option</span>
+                <span class="text-sm text-gray-500">Description text here</span>
+              </span>
+            </CardAction>
+            <CardAction>
+              <span class="flex flex-col">
+                <span class="font-medium">Another option</span>
+                <span class="text-sm text-gray-500">More description</span>
+              </span>
+            </CardAction>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Sizes</p>
+        <div class="flex flex-wrap gap-3 items-end">
+          <Button size="xs">Extra Small</Button>
+          <Button size="sm">Small</Button>
+          <Button size="md">Medium</Button>
+          <Button size="lg">Large</Button>
+          <Button size="xl">Extra Large</Button>
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">States</p>
+        <div class="flex flex-wrap gap-3 items-center">
+          <Button disabled>Disabled</Button>
+          <Button loading>Loading</Button>
+          <Button success successText="Saved!">Success</Button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== INPUTS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Input, Select, Textarea</h2>
+    <p class={subheadingClass(isDark)}>Form input primitives</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div>
+        <Input
+          label="Text Input"
+          placeholder="Enter text..."
+          bind:value={inputValue}
+        />
+      </div>
+
+      <div>
+        <Input
+          type="email"
+          label="Email Input"
+          placeholder="email@example.com"
+        />
+      </div>
+
+      <div>
+        <Input
+          type="password"
+          label="Password"
+          placeholder="••••••••"
+        />
+      </div>
+
+      <div>
+        <Input
+          label="With Error"
+          placeholder="Invalid input"
+          errorText="This field is required"
+        />
+      </div>
+
+      <div>
+        <Input
+          label="Disabled"
+          placeholder="Can't edit this"
+          disabled
+        />
+      </div>
+
+      <div>
+        <Input
+          label="With Helper Text"
+          placeholder="Enter something"
+          helperText="This is helper text"
+        />
+      </div>
+    </div>
+
+    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div>
+        <Textarea
+          label="Textarea"
+          placeholder="Write your message..."
+          bind:value={textareaValue}
+        />
+      </div>
+
+      <div>
+        <Select
+          label="Select"
+          bind:value={selectValue}
+        >
+          <option value="">Choose an option</option>
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+          <option value="3">Option 3</option>
+        </Select>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== CHECKBOX, RADIO, TOGGLE ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Checkbox, Radio, Toggle</h2>
+    <p class={subheadingClass(isDark)}>Selection controls</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Checkbox</p>
+        <div class="space-y-3">
+          <Checkbox bind:checked={checkboxChecked}>Default checkbox</Checkbox>
+          <Checkbox checked={true}>Checked by default</Checkbox>
+          <Checkbox disabled>Disabled</Checkbox>
+          <Checkbox disabled checked={true}>Disabled checked</Checkbox>
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Radio</p>
+        <div class="space-y-3">
+          <Radio name="demo" value="option1" bind:group={radioValue}>Option 1</Radio>
+          <Radio name="demo" value="option2" bind:group={radioValue}>Option 2</Radio>
+          <Radio name="demo" value="option3" bind:group={radioValue}>Option 3</Radio>
+          <Radio name="demo-disabled" value="disabled" disabled>Disabled</Radio>
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Toggle</p>
+        <div class="space-y-3">
+          <Toggle bind:checked={toggleChecked}>Default toggle</Toggle>
+          <Toggle checked={true}>On by default</Toggle>
+          <Toggle disabled>Disabled off</Toggle>
+          <Toggle disabled checked={true}>Disabled on</Toggle>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== BADGE ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Badge</h2>
+    <p class={subheadingClass(isDark)}>Status indicators and labels</p>
+
+    <div class="space-y-4">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Colors</p>
+        <div class="flex flex-wrap gap-3">
+          <Badge variant="blue">Blue</Badge>
+          <Badge variant="gray">Gray</Badge>
+          <Badge variant="red">Red</Badge>
+          <Badge variant="green">Green</Badge>
+          <Badge variant="yellow">Yellow</Badge>
+          <Badge variant="indigo">Indigo</Badge>
+          <Badge variant="purple">Purple</Badge>
+          <Badge variant="pink">Pink</Badge>
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Sizes</p>
+        <div class="flex flex-wrap gap-3 items-center">
+          <Badge size="xs">Extra Small</Badge>
+          <Badge size="sm">Small</Badge>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== ALERT ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Alert</h2>
+    <p class={subheadingClass(isDark)}>Contextual feedback messages</p>
+
+    <div class="space-y-4">
+      <Alert color="info">
+        <span class="font-medium">Info!</span> This is an informational alert.
+      </Alert>
+      <Alert color="success">
+        <span class="font-medium">Success!</span> Your changes have been saved.
+      </Alert>
+      <Alert color="warning">
+        <span class="font-medium">Warning!</span> Please review before proceeding.
+      </Alert>
+      <Alert color="error">
+        <span class="font-medium">Error!</span> Something went wrong.
+      </Alert>
+    </div>
+  </section>
+
+  <!-- ========== CARD ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Card</h2>
+    <p class={subheadingClass(isDark)}>Container component for content</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <Card>
+        <h3 class="text-lg font-semibold mb-2">Default Card</h3>
+        <p class="text-gray-600">Basic card with default styling.</p>
+      </Card>
+      <Card class="p-8">
+        <h3 class="text-lg font-semibold mb-2">Large Padding</h3>
+        <p class="text-gray-600">Card with larger padding.</p>
+      </Card>
+      <Card hover>
+        <h3 class="text-lg font-semibold mb-2">Hoverable</h3>
+        <p class="text-gray-600">Hover to see the effect.</p>
+      </Card>
+    </div>
+  </section>
+
+  <!-- ========== ACCORDION ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Accordion</h2>
+    <p class={subheadingClass(isDark)}>Collapsible content sections</p>
+
+    <div class="max-w-2xl">
+      <Accordion>
+        <AccordionItem>
+          {#snippet header()}What is this component?{/snippet}
+          <p class="text-gray-600">This is an accordion component that allows you to show and hide content sections.</p>
+        </AccordionItem>
+        <AccordionItem>
+          {#snippet header()}How do I use it?{/snippet}
+          <p class="text-gray-600">Wrap AccordionItem components inside an Accordion component. Each item uses a header snippet.</p>
+        </AccordionItem>
+        <AccordionItem>
+          {#snippet header()}Is it accessible?{/snippet}
+          <p class="text-gray-600">Yes! It includes proper ARIA attributes and keyboard navigation.</p>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  </section>
+
+  <!-- ========== TABS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Tabs</h2>
+    <p class={subheadingClass(isDark)}>Tabbed content navigation</p>
+
+    <div class="max-w-2xl">
+      <Tabs bind:activeTabValue={activeTab}>
+        <TabItem title="Profile">
+          <div class="p-4">
+            <p class="text-gray-600">This is the Profile tab content.</p>
+          </div>
+        </TabItem>
+        <TabItem title="Settings">
+          <div class="p-4">
+            <p class="text-gray-600">This is the Settings tab content.</p>
+          </div>
+        </TabItem>
+        <TabItem title="Messages">
+          <div class="p-4">
+            <p class="text-gray-600">This is the Messages tab content.</p>
+          </div>
+        </TabItem>
+      </Tabs>
+    </div>
+  </section>
+
+  <!-- ========== PAGINATION ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Pagination</h2>
+    <p class={subheadingClass(isDark)}>Page navigation control</p>
+
+    <Pagination
+      totalPages={10}
+      bind:currentPage={currentPage}
+    />
+    <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'} mt-3">Current page: {currentPage}</p>
+  </section>
+
+  <!-- ========== SKELETON ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Skeleton</h2>
+    <p class={subheadingClass(isDark)}>Loading placeholder components</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Basic Skeleton</p>
+        <div class="space-y-2">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-3/4" />
+          <Skeleton class="h-4 w-1/2" />
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Image Placeholder</p>
+        <ImagePlaceholder />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Card Placeholder</p>
+        <CardPlaceholder />
+      </div>
+    </div>
+
+    <div class="mt-6">
+      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">List Placeholder</p>
+      <ListPlaceholder />
+    </div>
+  </section>
+
+  <!-- ========== SPINNER ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Spinner</h2>
+    <p class={subheadingClass(isDark)}>Loading indicator</p>
+
+    <div class="flex flex-wrap gap-6 items-center">
+      <div class="text-center">
+        <Spinner size="sm" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Small</p>
+      </div>
+      <div class="text-center">
+        <Spinner size="md" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Medium</p>
+      </div>
+      <div class="text-center">
+        <Spinner size="lg" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Large</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== AVATAR ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Avatar</h2>
+    <p class={subheadingClass(isDark)}>User profile pictures</p>
+
+    <div class="flex flex-wrap gap-4 items-end">
+      <div class="text-center">
+        <Avatar size="xs" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">XS</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="sm" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">SM</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="md" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">MD</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="lg" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">LG</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="xl" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">XL</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="md" initials="JD" />
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Initials</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== BREADCRUMB ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Breadcrumb</h2>
+    <p class={subheadingClass(isDark)}>Navigation path indicator</p>
+
+    <Breadcrumb data={[
+      { name: 'Home', href: '/' },
+      { name: 'Products', href: '/products' },
+      { name: 'Category', href: '/products/category' },
+      { name: 'Current Page', href: '#' }
+    ]} />
+  </section>
+
+  <!-- ========== LABEL ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Label</h2>
+    <p class={subheadingClass(isDark)}>Form field labels</p>
+
+    <div class="flex flex-wrap gap-6">
+      <Label>Default Label</Label>
+      <Label required>Required Label</Label>
+      <Label optional>Optional Label</Label>
+    </div>
+  </section>
+
+  <!-- ========== VALIDATION ERROR ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>ValidationError</h2>
+    <p class={subheadingClass(isDark)}>Form validation error messages</p>
+
+    <div class="space-y-2">
+      <ValidationError error="This field is required" />
+      <ValidationError error="Email format is invalid" />
+      <ValidationError error="Password must be at least 8 characters" />
+    </div>
+  </section>
+
+  <!-- ========== ICONS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Icons</h2>
+    <p class={subheadingClass(isDark)}>SVG icon components</p>
+
+    <div class="flex flex-wrap gap-6">
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <Home />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Home</p>
+      </div>
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <Profile />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Profile</p>
+      </div>
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <Notification />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Notification</p>
+      </div>
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <Message />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Message</p>
+      </div>
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <CheckCircle />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">CheckCircle</p>
+      </div>
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <ErrorCircle />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">ErrorCircle</p>
+      </div>
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <Info />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Info</p>
+      </div>
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <WarningIcon />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Warning</p>
+      </div>
+      <div class="text-center">
+        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+          <Cross />
+        </div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Cross</p>
+      </div>
+    </div>
+    <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'} mt-4">
+      See <strong>IconGallery</strong> story for complete icon reference (30+ icons)
+    </p>
+  </section>
+
+  <!-- ========== DARK MODE TOGGLE ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>DarkModeToggle</h2>
+    <p class={subheadingClass(isDark)}>Theme switcher component</p>
+
+    <DarkModeToggle />
+  </section>
+
+  <!-- ========== INTERACTIVE COMPONENTS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Modal, Drawer, BottomSheet, Dropdown</h2>
+    <p class={subheadingClass(isDark)}>Overlay and dropdown components</p>
+
+    <div class="flex flex-wrap gap-4">
+      <Button onclick={() => showModal = true}>Open Modal</Button>
+      <Button variant="alternative" onclick={() => showDrawer = true}>Open Drawer</Button>
+      <Button variant="outline" onclick={() => showBottomSheet = true}>Open BottomSheet</Button>
+
+      <div class="relative inline-block">
+        <Button variant="ghost" onclick={() => dropdownOpen = !dropdownOpen}>
+          Toggle Dropdown ▼
+        </Button>
+        <Dropdown bind:open={dropdownOpen} class="left-0 top-full mt-1">
+          <DropdownItem onclick={() => dropdownOpen = false}>Option 1</DropdownItem>
+          <DropdownItem onclick={() => dropdownOpen = false}>Option 2</DropdownItem>
+          <DropdownItem onclick={() => dropdownOpen = false}>Option 3</DropdownItem>
+        </Dropdown>
+      </div>
+    </div>
+  </section>
+
+  <!-- Modal -->
+  <Modal bind:open={showModal}>
+    {#snippet header()}
+      <h3 class="text-lg font-semibold">Example Modal</h3>
+    {/snippet}
+    {#snippet body()}
+      <p class="text-gray-600">This is the modal content. Click outside or press ESC to close.</p>
+    {/snippet}
+    {#snippet footer()}
+      <Button variant="ghost" onclick={() => showModal = false}>Cancel</Button>
+      <Button onclick={() => showModal = false}>Confirm</Button>
+    {/snippet}
+  </Modal>
+
+  <!-- Drawer -->
+  <Drawer bind:open={showDrawer} placement="right">
+    <div class="p-6">
+      <h3 class="text-lg font-semibold mb-4">Drawer Content</h3>
+      <p class="text-gray-600">This drawer slides in from the right.</p>
+      <Button class="mt-4" onclick={() => showDrawer = false}>Close</Button>
+    </div>
+  </Drawer>
+
+  <!-- BottomSheet -->
+  <BottomSheet open={showBottomSheet} onclose={() => showBottomSheet = false}>
+    <div class="p-6">
+      <h3 class="text-lg font-semibold mb-4">Bottom Sheet</h3>
+      <p class="text-gray-600">This sheet slides up from the bottom on mobile.</p>
+      <Button class="mt-4" onclick={() => showBottomSheet = false}>Close</Button>
+    </div>
+  </BottomSheet>
+
+  <!-- ========== TYPOGRAPHY ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Typography</h2>
+    <p class={subheadingClass(isDark)}>Text styling component</p>
+
+    <div class="space-y-4">
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="h2">Heading 2</Typography>
+      <Typography variant="h3">Heading 3</Typography>
+      <Typography variant="h4">Heading 4</Typography>
+      <Typography variant="p">Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Typography>
+      <Typography variant="h6">Small text - Secondary information</Typography>
+      <Typography variant="p" class="text-xs">Caption text - Meta information</Typography>
+    </div>
+  </section>
+</div>