@getmicdrop/svelte-components 5.10.3 → 5.13.0

package/dist/stories/RecipesGallery.svelte

@@ -1,471 +1,454 @@
-<script lang="ts">
-  // ============================================================================
-  // RECIPES VISUAL GALLERY
-  // Displays ALL recipe components (Layer 2) - Domain-agnostic compositions
-  // ============================================================================
-
-  // Feedback
-  import EmptyState from '../recipes/feedback/EmptyState/EmptyState.svelte';
-  import ErrorDisplay from '../recipes/feedback/ErrorDisplay.svelte';
-  import StatusIndicator from '../recipes/feedback/StatusIndicator/StatusIndicator.svelte';
-
-  // Inputs
-  import MultiSelect from '../recipes/inputs/MultiSelect.svelte';
-  import OTPInput from '../recipes/inputs/OTPInput.svelte';
-  import PasswordInput from '../recipes/inputs/PasswordInput.svelte';
-  import PasswordStrengthIndicator from '../recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
-  import Search from '../recipes/inputs/Search.svelte';
-  import SelectDropdown from '../recipes/inputs/SelectDropdown.svelte';
-
-  // Modals
-  import AlertModal from '../recipes/modals/AlertModal.svelte';
-  import ConfirmationModal from '../recipes/modals/ConfirmationModal.svelte';
-  import InputModal from '../recipes/modals/InputModal.svelte';
-  import StatusModal from '../recipes/modals/StatusModal.svelte';
-
-  // Fields
-  import CheckboxField from '../recipes/fields/CheckboxField.svelte';
-  import FormField from '../recipes/fields/FormField.svelte';
-  import RadioGroup from '../recipes/fields/RadioGroup.svelte';
-  import SelectField from '../recipes/fields/SelectField.svelte';
-  import TextareaField from '../recipes/fields/TextareaField.svelte';
-  import ToggleField from '../recipes/fields/ToggleField.svelte';
-
-  // Primitives for demos
-  import Button from '../primitives/Button/Button.svelte';
-  import Card from '../primitives/Card.svelte';
-
-  // State
-  let isDark = $state(false);
-
-  // Modal states
-  let showAlertModal = $state(false);
-  let showConfirmModal = $state(false);
-  let showInputModal = $state(false);
-  let showStatusModal = $state(false);
-  let statusModalType = $state<'success' | 'error' | 'loading'>('success');
-
-  // Input states
-  let otpValue = $state<string[]>(['', '', '', '', '', '']);  // OTPInput expects string[]
-  let passwordValue = $state('');
-  let searchValue = $state('');
-  let multiSelectValue = $state<string[]>([]);
-  let selectDropdownValue = $state<{label: string, value: string} | null>(null);  // SelectDropdown expects object
-
-  // Field states
-  let checkboxChecked = $state(false);
-  let toggleChecked = $state(false);
-  let radioValue = $state('');
-  let textareaValue = $state('');
-  let selectFieldValue = $state('');
-  let formFieldValue = $state('');
-
-  function toggleDark() {
-    isDark = !isDark;
-    document.documentElement.classList.toggle('dark', isDark);
-  }
-
-  // Section 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'}`;
-
-  // Demo data - MultiSelect uses 'items' with {name, value} format
-  const multiSelectItems = [
-    { value: 'react', name: 'React' },
-    { value: 'vue', name: 'Vue' },
-    { value: 'svelte', name: 'Svelte' },
-    { value: 'angular', name: 'Angular' },
-    { value: 'solid', name: 'Solid' },
-  ];
-
-  // SelectField uses 'items' with {name, value} format
-  const selectFieldItems = [
-    { value: 'sm', name: 'Small' },
-    { value: 'md', name: 'Medium' },
-    { value: 'lg', name: 'Large' },
-    { value: 'xl', name: 'Extra Large' },
-  ];
-
-  // SelectDropdown uses 'options' with {label, value} format
-  const selectDropdownOptions = [
-    { value: 'low', label: 'Low Priority' },
-    { value: 'medium', label: 'Medium Priority' },
-    { value: 'high', label: 'High Priority' },
-  ];
-
-  const radioOptions = [
-    { value: 'daily', label: 'Daily', description: 'Get updates every day' },
-    { value: 'weekly', label: 'Weekly', description: 'Get updates once a week' },
-    { value: 'monthly', label: 'Monthly', description: 'Get updates once a month' },
-  ];
-</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'}">Recipes Gallery</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">Domain-agnostic compositions (Layer 2)</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>
-
-  <!-- ========== FEEDBACK COMPONENTS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Feedback Components</h2>
-    <p class={subheadingClass(isDark)}>EmptyState, ErrorDisplay, StatusIndicator</p>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <Card>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">EmptyState</p>
-        <EmptyState
-          title="No items yet"
-          description="Get started by creating your first item"
-        >
-          <Button size="sm">Create Item</Button>
-        </EmptyState>
-      </Card>
-
-      <Card>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">ErrorDisplay</p>
-        <ErrorDisplay
-          title="Something went wrong"
-          message="We couldn't load the data. Please try again."
-        >
-          <Button size="sm" variant="outline">Retry</Button>
-        </ErrorDisplay>
-      </Card>
-    </div>
-
-    <div class="mt-6">
-      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">StatusIndicator</p>
-      <div class="flex flex-wrap gap-6">
-        <div class="flex items-center gap-2">
-          <StatusIndicator status="active" />
-          <span class={isDark ? 'text-white' : 'text-gray-900'}>Active</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <StatusIndicator status="pending" />
-          <span class={isDark ? 'text-white' : 'text-gray-900'}>Pending</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <StatusIndicator status="inactive" />
-          <span class={isDark ? 'text-white' : 'text-gray-900'}>Inactive</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <StatusIndicator status="error" />
-          <span class={isDark ? 'text-white' : 'text-gray-900'}>Error</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <StatusIndicator status="success" />
-          <span class={isDark ? 'text-white' : 'text-gray-900'}>Success</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== FORM FIELDS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Form Fields</h2>
-    <p class={subheadingClass(isDark)}>Composed field components with labels, validation, and help text</p>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <div>
-        <FormField
-          label="Full Name"
-          hint="Enter your legal name"
-        >
-          {#snippet children({ id, error })}
-            <input
-              {id}
-              type="text"
-              placeholder="John Doe"
-              bind:value={formFieldValue}
-              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
-            />
-          {/snippet}
-        </FormField>
-      </div>
-
-      <div>
-        <FormField
-          label="Email (with error)"
-          error="Please enter a valid email address"
-        >
-          {#snippet children({ id, error })}
-            <input
-              {id}
-              type="email"
-              placeholder="email@example.com"
-              class="w-full px-3 py-2 border {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
-            />
-          {/snippet}
-        </FormField>
-      </div>
-
-      <div>
-        <SelectField
-          label="Size"
-          items={selectFieldItems}
-          bind:value={selectFieldValue}
-          placeholder="Choose a size"
-        />
-      </div>
-
-      <div>
-        <TextareaField
-          label="Bio"
-          placeholder="Tell us about yourself..."
-          bind:value={textareaValue}
-          hint="Maximum 500 characters"
-        />
-      </div>
-    </div>
-
-    <div class="mt-6 space-y-4">
-      <CheckboxField
-        label="I agree to the terms and conditions"
-        description="You must agree to continue"
-        bind:checked={checkboxChecked}
-      />
-
-      <ToggleField
-        label="Enable notifications"
-        description="Receive email updates about your account"
-        bind:checked={toggleChecked}
-      />
-
-      <div class="max-w-md">
-        <RadioGroup
-          label="Update frequency"
-          options={radioOptions}
-          bind:value={radioValue}
-        />
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== SPECIAL INPUTS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Special Inputs</h2>
-    <p class={subheadingClass(isDark)}>Password, OTP, Search, MultiSelect, SelectDropdown</p>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">PasswordInput</p>
-        <PasswordInput
-          label="Password"
-          placeholder="Enter password"
-          bind:value={passwordValue}
-        />
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">PasswordStrengthIndicator</p>
-        <PasswordStrengthIndicator password={passwordValue} />
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">OTPInput (6 digits)</p>
-        <OTPInput
-          length={6}
-          bind:value={otpValue}
-        />
-        <p class="text-sm text-gray-500 mt-2">Value: {otpValue || '(empty)'}</p>
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Search</p>
-        <Search
-          placeholder="Search..."
-          bind:value={searchValue}
-        />
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">MultiSelect</p>
-        <MultiSelect
-          label="Frameworks"
-          items={multiSelectItems}
-          bind:value={multiSelectValue}
-          placeholder="Select frameworks"
-        />
-      </div>
-
-      <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">SelectDropdown</p>
-        <SelectDropdown
-          options={selectDropdownOptions}
-          bind:selected={selectDropdownValue}
-          placeholder="Priority"
-        />
-      </div>
-    </div>
-  </section>
-
-  <!-- ========== MODALS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Modals</h2>
-    <p class={subheadingClass(isDark)}>AlertModal, ConfirmationModal, InputModal, StatusModal</p>
-
-    <div class="flex flex-wrap gap-4">
-      <Button onclick={() => showAlertModal = true}>
-        Open AlertModal
-      </Button>
-
-      <Button variant="alternative" onclick={() => showConfirmModal = true}>
-        Open ConfirmationModal
-      </Button>
-
-      <Button variant="outline" onclick={() => showInputModal = true}>
-        Open InputModal
-      </Button>
-
-      <Button variant="ghost" onclick={() => {
-        statusModalType = 'success';
-        showStatusModal = true;
-        setTimeout(() => showStatusModal = false, 2000);
-      }}>
-        StatusModal (Success)
-      </Button>
-
-      <Button variant="ghost" onclick={() => {
-        statusModalType = 'error';
-        showStatusModal = true;
-        setTimeout(() => showStatusModal = false, 2000);
-      }}>
-        StatusModal (Error)
-      </Button>
-
-      <Button variant="ghost" onclick={() => {
-        statusModalType = 'loading';
-        showStatusModal = true;
-        setTimeout(() => showStatusModal = false, 2000);
-      }}>
-        StatusModal (Loading)
-      </Button>
-    </div>
-  </section>
-
-  <!-- AlertModal -->
-  <AlertModal
-    bind:show={showAlertModal}
-    title="Alert"
-    message="This is an alert message that requires your attention."
-    buttonText="OK"
-    onconfirm={() => showAlertModal = false}
-    onclose={() => showAlertModal = false}
-  />
-
-  <!-- ConfirmationModal -->
-  <ConfirmationModal
-    bind:show={showConfirmModal}
-    title="Confirm Action"
-    description="Are you sure you want to proceed? This action cannot be undone."
-    primaryButtonText="Yes, proceed"
-    secondaryButtonText="Cancel"
-    onconfirm={() => {
-      showConfirmModal = false;
-      console.log('Confirmed!');
-    }}
-    oncancel={() => showConfirmModal = false}
-    onclose={() => showConfirmModal = false}
-  />
-
-  <!-- InputModal -->
-  <InputModal
-    bind:show={showInputModal}
-    title="Enter Information"
-    inputLabel="Name"
-    inputPlaceholder="Enter your name"
-    primaryButtonText="Submit"
-    onconfirm={(detail: { value: string }) => {
-      console.log('Submitted:', detail.value);
-      showInputModal = false;
-    }}
-    oncancel={() => showInputModal = false}
-    onclose={() => showInputModal = false}
-  />
-
-  <!-- StatusModal -->
-  <StatusModal
-    bind:show={showStatusModal}
-    iconType={statusModalType}
-    title={statusModalType === 'loading' ? 'Processing...' : statusModalType === 'success' ? 'Success!' : 'Error'}
-    description={statusModalType === 'loading' ? 'Please wait...' : statusModalType === 'success' ? 'Operation completed successfully.' : 'Something went wrong.'}
-    onconfirm={() => showStatusModal = false}
-    onclose={() => showStatusModal = false}
-  />
-
-  <!-- ========== COMMON PATTERNS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Common Recipe Patterns</h2>
-    <p class={subheadingClass(isDark)}>How recipes compose together</p>
-
-    <div class="space-y-6">
-      <Card>
-        <h4 class="font-medium mb-4">Registration Form Pattern</h4>
-        <div class="space-y-4 max-w-md">
-          <FormField label="Email">
-            {#snippet children({ id })}
-              <input
-                {id}
-                type="email"
-                placeholder="email@example.com"
-                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
-              />
-            {/snippet}
-          </FormField>
-          <PasswordInput
-            label="Password"
-            placeholder="Create a password"
-            bind:value={passwordValue}
-          />
-          <PasswordStrengthIndicator password={passwordValue} />
-          <CheckboxField
-            label="I agree to the Terms of Service"
-          />
-          <Button size="full">Create Account</Button>
-        </div>
-      </Card>
-
-      <Card>
-        <h4 class="font-medium mb-4">Settings Form Pattern</h4>
-        <div class="space-y-4 max-w-md">
-          <ToggleField
-            label="Email notifications"
-            description="Receive updates via email"
-          />
-          <ToggleField
-            label="Push notifications"
-            description="Receive mobile push notifications"
-          />
-          <SelectField
-            label="Language"
-            items={[
-              { value: 'en', name: 'English' },
-              { value: 'es', name: 'Spanish' },
-              { value: 'fr', name: 'French' },
-            ]}
-            placeholder="Select language"
-          />
-          <div class="flex justify-end gap-2 pt-4">
-            <Button variant="ghost">Cancel</Button>
-            <Button>Save Changes</Button>
-          </div>
-        </div>
-      </Card>
-    </div>
-  </section>
-</div>
+<script lang="ts">
+  // ============================================================================
+  // RECIPES VISUAL GALLERY
+  // Displays ALL recipe components (Layer 2) - Domain-agnostic compositions
+  // ============================================================================
+
+  // Feedback
+  import EmptyState from '../recipes/feedback/EmptyState/EmptyState.svelte';
+  import ErrorDisplay from '../recipes/feedback/ErrorDisplay.svelte';
+  import StatusIndicator from '../recipes/feedback/StatusIndicator/StatusIndicator.svelte';
+
+  // Inputs
+  import MultiSelect from '../recipes/inputs/MultiSelect.svelte';
+  import OTPInput from '../recipes/inputs/OTPInput.svelte';
+  import PasswordInput from '../recipes/inputs/PasswordInput.svelte';
+  import PasswordStrengthIndicator from '../recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
+  import Search from '../recipes/inputs/Search.svelte';
+
+  // Modals
+  import AlertModal from '../recipes/modals/AlertModal.svelte';
+  import ConfirmationModal from '../recipes/modals/ConfirmationModal.svelte';
+  import InputModal from '../recipes/modals/InputModal.svelte';
+  import StatusModal from '../recipes/modals/StatusModal.svelte';
+
+  // Fields
+  import CheckboxField from '../recipes/fields/CheckboxField.svelte';
+  import FormField from '../recipes/fields/FormField.svelte';
+  import RadioGroup from '../recipes/fields/RadioGroup.svelte';
+  import SelectField from '../recipes/fields/SelectField.svelte';
+  import TextareaField from '../recipes/fields/TextareaField.svelte';
+  import ToggleField from '../recipes/fields/ToggleField.svelte';
+
+  // Primitives for demos
+  import Button from '../primitives/Button/Button.svelte';
+  import Card from '../primitives/Card.svelte';
+
+  // State
+  let isDark = $state(false);
+
+  // Modal states
+  let showAlertModal = $state(false);
+  let showConfirmModal = $state(false);
+  let showInputModal = $state(false);
+  let showStatusModal = $state(false);
+  let statusModalType = $state<'success' | 'error' | 'loading'>('success');
+
+  // Input states
+  let otpValue = $state<string[]>(['', '', '', '', '', '']);  // OTPInput expects string[]
+  let passwordValue = $state('');
+  let searchValue = $state('');
+  let multiSelectValue = $state<string[]>([]);
+
+  // Field states
+  let checkboxChecked = $state(false);
+  let toggleChecked = $state(false);
+  let radioValue = $state('');
+  let textareaValue = $state('');
+  let selectFieldValue = $state('');
+  let formFieldValue = $state('');
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+
+  // Section 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'}`;
+
+  // Demo data - MultiSelect uses 'items' with {name, value} format
+  const multiSelectItems = [
+    { value: 'react', name: 'React' },
+    { value: 'vue', name: 'Vue' },
+    { value: 'svelte', name: 'Svelte' },
+    { value: 'angular', name: 'Angular' },
+    { value: 'solid', name: 'Solid' },
+  ];
+
+  // SelectField uses 'items' with {name, value} format
+  const selectFieldItems = [
+    { value: 'sm', name: 'Small' },
+    { value: 'md', name: 'Medium' },
+    { value: 'lg', name: 'Large' },
+    { value: 'xl', name: 'Extra Large' },
+  ];
+
+  const radioOptions = [
+    { value: 'daily', label: 'Daily', description: 'Get updates every day' },
+    { value: 'weekly', label: 'Weekly', description: 'Get updates once a week' },
+    { value: 'monthly', label: 'Monthly', description: 'Get updates once a month' },
+  ];
+</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'}">Recipes Gallery</h1>
+      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">Domain-agnostic compositions (Layer 2)</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>
+
+  <!-- ========== FEEDBACK COMPONENTS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Feedback Components</h2>
+    <p class={subheadingClass(isDark)}>EmptyState, ErrorDisplay, StatusIndicator</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <Card>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">EmptyState</p>
+        <EmptyState
+          title="No items yet"
+          description="Get started by creating your first item"
+        >
+          <Button size="sm">Create Item</Button>
+        </EmptyState>
+      </Card>
+
+      <Card>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">ErrorDisplay</p>
+        <ErrorDisplay
+          title="Something went wrong"
+          message="We couldn't load the data. Please try again."
+        >
+          <Button size="sm" variant="outline">Retry</Button>
+        </ErrorDisplay>
+      </Card>
+    </div>
+
+    <div class="mt-6">
+      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">StatusIndicator</p>
+      <div class="flex flex-wrap gap-6">
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="active" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Active</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="pending" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Pending</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="inactive" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Inactive</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="error" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Error</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <StatusIndicator status="success" />
+          <span class={isDark ? 'text-white' : 'text-gray-900'}>Success</span>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== FORM FIELDS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Form Fields</h2>
+    <p class={subheadingClass(isDark)}>Composed field components with labels, validation, and help text</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div>
+        <FormField
+          label="Full Name"
+          hint="Enter your legal name"
+        >
+          {#snippet children({ id, error })}
+            <input
+              {id}
+              type="text"
+              placeholder="John Doe"
+              bind:value={formFieldValue}
+              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+            />
+          {/snippet}
+        </FormField>
+      </div>
+
+      <div>
+        <FormField
+          label="Email (with error)"
+          error="Please enter a valid email address"
+        >
+          {#snippet children({ id, error })}
+            <input
+              {id}
+              type="email"
+              placeholder="email@example.com"
+              class="w-full px-3 py-2 border {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+            />
+          {/snippet}
+        </FormField>
+      </div>
+
+      <div>
+        <SelectField
+          label="Size"
+          items={selectFieldItems}
+          bind:value={selectFieldValue}
+          placeholder="Choose a size"
+        />
+      </div>
+
+      <div>
+        <TextareaField
+          label="Bio"
+          placeholder="Tell us about yourself..."
+          bind:value={textareaValue}
+          hint="Maximum 500 characters"
+        />
+      </div>
+    </div>
+
+    <div class="mt-6 space-y-4">
+      <CheckboxField
+        label="I agree to the terms and conditions"
+        description="You must agree to continue"
+        bind:checked={checkboxChecked}
+      />
+
+      <ToggleField
+        label="Enable notifications"
+        description="Receive email updates about your account"
+        bind:checked={toggleChecked}
+      />
+
+      <div class="max-w-md">
+        <RadioGroup
+          label="Update frequency"
+          options={radioOptions}
+          bind:value={radioValue}
+        />
+      </div>
+    </div>
+  </section>
+
+  <!-- ========== SPECIAL INPUTS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Special Inputs</h2>
+    <p class={subheadingClass(isDark)}>Password, OTP, Search, MultiSelect</p>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">PasswordInput</p>
+        <PasswordInput
+          label="Password"
+          placeholder="Enter password"
+          bind:value={passwordValue}
+        />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">PasswordStrengthIndicator</p>
+        <PasswordStrengthIndicator password={passwordValue} />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">OTPInput (6 digits)</p>
+        <OTPInput
+          length={6}
+          bind:value={otpValue}
+        />
+        <p class="text-sm text-gray-500 mt-2">Value: {otpValue || '(empty)'}</p>
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Search</p>
+        <Search
+          placeholder="Search..."
+          bind:value={searchValue}
+        />
+      </div>
+
+      <div>
+        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">MultiSelect</p>
+        <MultiSelect
+          label="Frameworks"
+          items={multiSelectItems}
+          bind:value={multiSelectValue}
+          placeholder="Select frameworks"
+        />
+      </div>
+
+    </div>
+  </section>
+
+  <!-- ========== MODALS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Modals</h2>
+    <p class={subheadingClass(isDark)}>AlertModal, ConfirmationModal, InputModal, StatusModal</p>
+
+    <div class="flex flex-wrap gap-4">
+      <Button onclick={() => showAlertModal = true}>
+        Open AlertModal
+      </Button>
+
+      <Button variant="alternative" onclick={() => showConfirmModal = true}>
+        Open ConfirmationModal
+      </Button>
+
+      <Button variant="outline" onclick={() => showInputModal = true}>
+        Open InputModal
+      </Button>
+
+      <Button variant="ghost" onclick={() => {
+        statusModalType = 'success';
+        showStatusModal = true;
+        setTimeout(() => showStatusModal = false, 2000);
+      }}>
+        StatusModal (Success)
+      </Button>
+
+      <Button variant="ghost" onclick={() => {
+        statusModalType = 'error';
+        showStatusModal = true;
+        setTimeout(() => showStatusModal = false, 2000);
+      }}>
+        StatusModal (Error)
+      </Button>
+
+      <Button variant="ghost" onclick={() => {
+        statusModalType = 'loading';
+        showStatusModal = true;
+        setTimeout(() => showStatusModal = false, 2000);
+      }}>
+        StatusModal (Loading)
+      </Button>
+    </div>
+  </section>
+
+  <!-- AlertModal -->
+  <AlertModal
+    bind:open={showAlertModal}
+    title="Alert"
+    message="This is an alert message that requires your attention."
+    buttonText="OK"
+    onconfirm={() => showAlertModal = false}
+    onclose={() => showAlertModal = false}
+  />
+
+  <!-- ConfirmationModal -->
+  <ConfirmationModal
+    bind:open={showConfirmModal}
+    title="Confirm Action"
+    description="Are you sure you want to proceed? This action cannot be undone."
+    primaryButtonText="Yes, proceed"
+    secondaryButtonText="Cancel"
+    onconfirm={() => {
+      showConfirmModal = false;
+      console.log('Confirmed!');
+    }}
+    oncancel={() => showConfirmModal = false}
+    onclose={() => showConfirmModal = false}
+  />
+
+  <!-- InputModal -->
+  <InputModal
+    bind:open={showInputModal}
+    title="Enter Information"
+    inputLabel="Name"
+    inputPlaceholder="Enter your name"
+    primaryButtonText="Submit"
+    onconfirm={(detail: { value: string }) => {
+      console.log('Submitted:', detail.value);
+      showInputModal = false;
+    }}
+    oncancel={() => showInputModal = false}
+    onclose={() => showInputModal = false}
+  />
+
+  <!-- StatusModal -->
+  <StatusModal
+    bind:open={showStatusModal}
+    iconType={statusModalType}
+    title={statusModalType === 'loading' ? 'Processing...' : statusModalType === 'success' ? 'Success!' : 'Error'}
+    description={statusModalType === 'loading' ? 'Please wait...' : statusModalType === 'success' ? 'Operation completed successfully.' : 'Something went wrong.'}
+    onconfirm={() => showStatusModal = false}
+    onclose={() => showStatusModal = false}
+  />
+
+  <!-- ========== COMMON PATTERNS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Common Recipe Patterns</h2>
+    <p class={subheadingClass(isDark)}>How recipes compose together</p>
+
+    <div class="space-y-6">
+      <Card>
+        <h4 class="font-medium mb-4">Registration Form Pattern</h4>
+        <div class="space-y-4 max-w-md">
+          <FormField label="Email">
+            {#snippet children({ id })}
+              <input
+                {id}
+                type="email"
+                placeholder="email@example.com"
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+              />
+            {/snippet}
+          </FormField>
+          <PasswordInput
+            label="Password"
+            placeholder="Create a password"
+            bind:value={passwordValue}
+          />
+          <PasswordStrengthIndicator password={passwordValue} />
+          <CheckboxField
+            label="I agree to the Terms of Service"
+          />
+          <Button size="full">Create Account</Button>
+        </div>
+      </Card>
+
+      <Card>
+        <h4 class="font-medium mb-4">Settings Form Pattern</h4>
+        <div class="space-y-4 max-w-md">
+          <ToggleField
+            label="Email notifications"
+            description="Receive updates via email"
+          />
+          <ToggleField
+            label="Push notifications"
+            description="Receive mobile push notifications"
+          />
+          <SelectField
+            label="Language"
+            items={[
+              { value: 'en', name: 'English' },
+              { value: 'es', name: 'Spanish' },
+              { value: 'fr', name: 'French' },
+            ]}
+            placeholder="Select language"
+          />
+          <div class="flex justify-end gap-2 pt-4">
+            <Button variant="ghost">Cancel</Button>
+            <Button>Save Changes</Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </section>
+</div>