@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/primitives/Input/Select.stories.svelte

@@ -1,112 +1,112 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Select from './Select.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Select',
-    component: Select,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      disabled: { control: 'boolean' },
-      required: { control: 'boolean' },
-      errorText: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Native select dropdown component.',
-        },
-      },
-    },
-  });
-
-  let value = $state('');
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Country">
-        <option value="">Select a country</option>
-        <option value="us">United States</option>
-        <option value="uk">United Kingdom</option>
-        <option value="ca">Canada</option>
-        <option value="au">Australia</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Value">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Size" bind:value={value}>
-        <option value="">Choose size</option>
-        <option value="sm">Small</option>
-        <option value="md">Medium</option>
-        <option value="lg">Large</option>
-      </Select>
-      <p class="text-sm text-gray-500 mt-2">Selected: {value || 'none'}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Error">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Category" errorText="Please select a category">
-        <option value="">Select category</option>
-        <option value="comedy">Comedy</option>
-        <option value="music">Music</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Disabled Select" disabled>
-        <option value="">Cannot select</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Required">
-  {#snippet template()}
-    <div class="max-w-xs">
-      <Select label="Required Field" required>
-        <option value="">Choose an option</option>
-        <option value="1">Option 1</option>
-        <option value="2">Option 2</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All States">
-  {#snippet template()}
-    <div class="grid grid-cols-2 gap-6 max-w-xl">
-      <Select label="Default">
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-
-      <Select label="With Error" errorText="This field is required">
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-
-      <Select label="Disabled" disabled>
-        <option value="">Cannot select</option>
-      </Select>
-
-      <Select label="Required" required>
-        <option value="">Select option</option>
-        <option value="1">Option 1</option>
-      </Select>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Select from './Select.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Select',
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+      errorText: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Native select dropdown component.',
+        },
+      },
+    },
+  });
+
+  let value = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Country">
+        <option value="">Select a country</option>
+        <option value="us">United States</option>
+        <option value="uk">United Kingdom</option>
+        <option value="ca">Canada</option>
+        <option value="au">Australia</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Value">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Size" bind:value={value}>
+        <option value="">Choose size</option>
+        <option value="sm">Small</option>
+        <option value="md">Medium</option>
+        <option value="lg">Large</option>
+      </Select>
+      <p class="text-sm text-gray-500 mt-2">Selected: {value || 'none'}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Category" errorText="Please select a category">
+        <option value="">Select category</option>
+        <option value="comedy">Comedy</option>
+        <option value="music">Music</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Disabled Select" disabled>
+        <option value="">Cannot select</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Required">
+  {#snippet template()}
+    <div class="max-w-xs">
+      <Select label="Required Field" required>
+        <option value="">Choose an option</option>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="grid grid-cols-2 gap-6 max-w-xl">
+      <Select label="Default">
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+
+      <Select label="With Error" errorText="This field is required">
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+
+      <Select label="Disabled" disabled>
+        <option value="">Cannot select</option>
+      </Select>
+
+      <Select label="Required" required>
+        <option value="">Select option</option>
+        <option value="1">Option 1</option>
+      </Select>
+    </div>
+  {/snippet}
+</Story>