@getmicdrop/svelte-components 5.5.5 → 5.6.0

package/dist/primitives/Button/Button.stories.svelte

@@ -1,76 +1,76 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Button from "./Button.svelte";
-  import ButtonSaveDemo from "./ButtonSaveDemo.svelte";
-  import ButtonVariantShowcase from "./ButtonVariantShowcase.svelte";
-
-  import Add from "./../../assets/svg/add-main.svg";
-  import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
-  import DeleteIcon from "./../../assets/svg/delete-02.svg";
-
-  const { Story } = defineMeta({
-    title: "Components/Button",
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: {
-      variant: {
-        control: "select",
-        options: ["default", "alternative", "outline", "red", "red-outline", "ghost", "ghost-red", "link", "toggle", "icon"],
-      },
-      size: {
-        control: "select",
-        options: ["xs", "sm", "md", "lg", "xl", "xl-medium", "full", "full-md-auto", "half"],
-      },
-      disabled: { control: "boolean" },
-      loading: { control: "boolean" },
-      success: { control: "boolean" },
-      successText: { control: "text" },
-      active: { control: "boolean" },
-    },
-    args: {
-      children: "Button",
-    },
-  });
-</script>
-
-<!-- Full Showcase (uses dedicated component) -->
-<Story name="All Variants Showcase">
-  {#snippet template()}
-    <ButtonVariantShowcase />
-  {/snippet}
-</Story>
-
-<!-- Interactive Playground -->
-<Story name="Playground" args={{ children: "Click me" }} />
-
-<!-- ========== VARIANTS ========== -->
-<Story name="default" args={{ variant: "default", children: "Primary Button" }} />
-<Story name="alternative" args={{ variant: "alternative", children: "Secondary" }} />
-<Story name="outline" args={{ variant: "outline", children: "Outline" }} />
-<Story name="ghost" args={{ variant: "ghost", children: "Ghost" }} />
-<Story name="link" args={{ variant: "link", children: "Link style" }} />
-<Story name="red" args={{ variant: "red", children: "Delete" }} />
-<Story name="red-outline" args={{ variant: "red-outline", children: "Remove" }} />
-<Story name="ghost-red" args={{ variant: "ghost-red", children: "Sign out" }} />
-<Story name="toggle" args={{ variant: "toggle", children: "Filter" }} />
-<Story name="toggle (active)" args={{ variant: "toggle", active: true, children: "Selected" }} />
-
-<!-- ========== SIZES ========== -->
-<Story name="Size: xs" args={{ size: "xs", children: "Extra Small" }} />
-<Story name="Size: sm" args={{ size: "sm", children: "Small" }} />
-<Story name="Size: md" args={{ size: "md", children: "Medium" }} />
-<Story name="Size: lg" args={{ size: "lg", children: "Large" }} />
-<Story name="Size: xl" args={{ size: "xl", children: "Extra Large" }} />
-<Story name="Size: full" args={{ size: "full", children: "Full Width" }} />
-<Story name="Size: xl-medium" args={{ size: "xl-medium", children: "Login Button" }} />
-<Story name="Size: half" args={{ size: "half", children: "Half Width" }} />
-
-<!-- ========== STATES ========== -->
-<Story name="Disabled" args={{ disabled: true, children: "Disabled" }} />
-<Story name="Loading" args={{ loading: true, children: "Saving..." }} />
-<Story name="Success" args={{ success: true, successText: "Saved!", children: "Save" }} />
-
-<!-- ========== INTERACTIVE DEMO ========== -->
-<Story name="Save Flow Demo" asChild>
-  <ButtonSaveDemo />
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Button from "./Button.svelte";
+  import ButtonSaveDemo from "./ButtonSaveDemo.svelte";
+  import ButtonVariantShowcase from "./ButtonVariantShowcase.svelte";
+
+  import Add from "./../../assets/svg/add-main.svg";
+  import ArrowLeft from "./../../assets/svg/arrow-left-02.svg";
+  import DeleteIcon from "./../../assets/svg/delete-02.svg";
+
+  const { Story } = defineMeta({
+    title: "Components/Button",
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      variant: {
+        control: "select",
+        options: ["default", "alternative", "outline", "red", "red-outline", "ghost", "ghost-red", "link", "toggle", "icon"],
+      },
+      size: {
+        control: "select",
+        options: ["xs", "sm", "md", "lg", "xl", "xl-medium", "full", "full-md-auto", "half"],
+      },
+      disabled: { control: "boolean" },
+      loading: { control: "boolean" },
+      success: { control: "boolean" },
+      successText: { control: "text" },
+      active: { control: "boolean" },
+    },
+    args: {
+      children: "Button",
+    },
+  });
+</script>
+
+<!-- Full Showcase (uses dedicated component) -->
+<Story name="All Variants Showcase">
+  {#snippet template()}
+    <ButtonVariantShowcase />
+  {/snippet}
+</Story>
+
+<!-- Interactive Playground -->
+<Story name="Playground" args={{ children: "Click me" }} />
+
+<!-- ========== VARIANTS ========== -->
+<Story name="default" args={{ variant: "default", children: "Primary Button" }} />
+<Story name="alternative" args={{ variant: "alternative", children: "Secondary" }} />
+<Story name="outline" args={{ variant: "outline", children: "Outline" }} />
+<Story name="ghost" args={{ variant: "ghost", children: "Ghost" }} />
+<Story name="link" args={{ variant: "link", children: "Link style" }} />
+<Story name="red" args={{ variant: "red", children: "Delete" }} />
+<Story name="red-outline" args={{ variant: "red-outline", children: "Remove" }} />
+<Story name="ghost-red" args={{ variant: "ghost-red", children: "Sign out" }} />
+<Story name="toggle" args={{ variant: "toggle", children: "Filter" }} />
+<Story name="toggle (active)" args={{ variant: "toggle", active: true, children: "Selected" }} />
+
+<!-- ========== SIZES ========== -->
+<Story name="Size: xs" args={{ size: "xs", children: "Extra Small" }} />
+<Story name="Size: sm" args={{ size: "sm", children: "Small" }} />
+<Story name="Size: md" args={{ size: "md", children: "Medium" }} />
+<Story name="Size: lg" args={{ size: "lg", children: "Large" }} />
+<Story name="Size: xl" args={{ size: "xl", children: "Extra Large" }} />
+<Story name="Size: full" args={{ size: "full", children: "Full Width" }} />
+<Story name="Size: xl-medium" args={{ size: "xl-medium", children: "Login Button" }} />
+<Story name="Size: half" args={{ size: "half", children: "Half Width" }} />
+
+<!-- ========== STATES ========== -->
+<Story name="Disabled" args={{ disabled: true, children: "Disabled" }} />
+<Story name="Loading" args={{ loading: true, children: "Saving..." }} />
+<Story name="Success" args={{ success: true, successText: "Saved!", children: "Save" }} />
+
+<!-- ========== INTERACTIVE DEMO ========== -->
+<Story name="Save Flow Demo" asChild>
+  <ButtonSaveDemo />
+</Story>