@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/stories/RecipesGallery.svelte

@@ -1,80 +1,80 @@
-<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');
-
+<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'}`;
-
+
+  // 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' },
@@ -98,88 +98,88 @@
     { 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>
-
+
+  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
@@ -232,67 +232,67 @@
         />
       </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 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
@@ -311,53 +311,53 @@
           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>
-
+    </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}
@@ -407,13 +407,13 @@
     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">
+
+  <!-- ========== 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">
@@ -466,6 +466,6 @@
           </div>
         </div>
       </Card>
-    </div>
-  </section>
-</div>
+    </div>
+  </section>
+</div>