@getmicdrop/svelte-components 5.3.2 → 5.3.6

package/dist/primitives/Dropdown/Dropdown.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Dropdown;
+type Dropdown = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Dropdown from './Dropdown.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Dropdown.stories.svelte.d.ts.map

package/dist/primitives/Dropdown/Dropdown.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/Dropdown.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAoJA;;;;mBAAoH;qBAhJ7F,mBAAmB;6CAuIG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/primitives/Dropdown/Dropdown.svelte

@@ -133,18 +133,16 @@
   };
 </script>
 
-<div bind:this={containerRef} class="relative inline-block">
-  {#if open}
-    <div
-      bind:this={dropdownRef}
-      class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {placementClasses[placement] || placementClasses.bottom} {className}"
-      role="menu"
-      aria-label={ariaLabel}
-      {...restProps}
-    >
-      <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-        {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-      </ul>
-    </div>
-  {/if}
-</div>
+{#if open}
+  <div
+    bind:this={containerRef}
+    class="absolute z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-lg w-44 dark:bg-gray-700 dark:divide-gray-600 {className}"
+    role="menu"
+    aria-label={ariaLabel}
+    {...restProps}
+  >
+    <ul bind:this={dropdownRef} class="py-2 text-sm text-gray-700 dark:text-gray-200">
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </ul>
+  </div>
+{/if}

package/dist/primitives/Dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;AAwJA;WAhJ4B,OAAO;gBAAc,MAAM;gBAAc,MAAM;YAAU,MAAM;gBAAc,MAAM;aAAW,GAAG;cAAY,GAAG;qCAgJrF;wBAhJpC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;AAsJA;WA9I4B,OAAO;gBAAc,MAAM;gBAAc,MAAM;YAAU,MAAM;gBAAc,MAAM;aAAW,GAAG;cAAY,GAAG;qCA8IrF;wBA9IpC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Icons/Icon.svelte

@@ -56,7 +56,8 @@
 </script>
 
 {#if Component}
-  <svelte:component this={Component} {size} {color} />
+  {@const IconComponent = Component}
+  <IconComponent {size} {color} />
 {:else}
   <span>Icon "{name}" not found.</span>
 {/if}

package/dist/primitives/Icons/Icon.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Icon.svelte.ts"],"names":[],"mappings":"AA6FA,QAAA,MAAM,IAAI;;WAfyD,MAAM;YAAU,MAAM;UAevC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Icons/Icon.svelte.ts"],"names":[],"mappings":"AA8FA,QAAA,MAAM,IAAI;;WAhByD,MAAM;YAAU,MAAM;UAgBvC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +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>

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

@@ -0,0 +1,28 @@
+export default Select;
+type Select = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Select: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Select from './Select.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Select.stories.svelte.d.ts.map

package/dist/primitives/Input/Select.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA8HA;;;;mBAAkH;mBA1H7F,iBAAiB;6CAiHO,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,137 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Textarea from './Textarea.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Textarea',
+    component: Textarea,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      placeholder: { control: 'text' },
+      rows: { control: 'number' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+      maxlength: { control: 'number' },
+      errorText: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Multi-line text input component.',
+        },
+      },
+    },
+  });
+
+  let value = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Description"
+        placeholder="Enter your description..."
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Value">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Bio"
+        placeholder="Tell us about yourself..."
+        bind:value={value}
+      />
+      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Max Length">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Short Bio"
+        placeholder="Keep it brief..."
+        maxlength={200}
+        helperText="Maximum 200 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Comments"
+        placeholder="Enter your comments..."
+        errorText="Please provide at least 10 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Custom Rows">
+  {#snippet template()}
+    <div class="space-y-6 max-w-md">
+      <Textarea
+        label="Small (2 rows)"
+        placeholder="Two rows..."
+        rows={2}
+      />
+      <Textarea
+        label="Medium (4 rows)"
+        placeholder="Four rows..."
+        rows={4}
+      />
+      <Textarea
+        label="Large (8 rows)"
+        placeholder="Eight rows..."
+        rows={8}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Disabled Textarea"
+        placeholder="Cannot edit this..."
+        disabled
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="grid grid-cols-2 gap-6 max-w-2xl">
+      <Textarea
+        label="Default"
+        placeholder="Enter text..."
+      />
+      <Textarea
+        label="With Error"
+        placeholder="Enter text..."
+        errorText="This field is required"
+      />
+      <Textarea
+        label="Disabled"
+        placeholder="Cannot edit..."
+        disabled
+      />
+      <Textarea
+        label="With Helper"
+        placeholder="Enter text..."
+        helperText="Optional additional information"
+      />
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Input/Textarea.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Textarea;
+type Textarea = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Textarea from './Textarea.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Textarea.stories.svelte.d.ts.map

package/dist/primitives/Input/Textarea.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Textarea.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAwGA;;;;mBAAoH;qBApG7F,mBAAmB;6CA2FG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/primitives/Pagination/Pagination.stories.svelte

@@ -0,0 +1,76 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Pagination from './Pagination.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Pagination',
+    component: Pagination,
+    tags: ['autodocs'],
+    argTypes: {
+      totalPages: { control: 'number' },
+      currentPage: { control: 'number' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Page navigation control for paginated data.',
+        },
+      },
+    },
+  });
+
+  let page1 = $state(1);
+  let page2 = $state(5);
+  let page3 = $state(1);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={10} bind:currentPage={page1} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page1}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Middle Page">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={10} bind:currentPage={page2} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page2}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Few Pages">
+  {#snippet template()}
+    <div>
+      <Pagination totalPages={3} bind:currentPage={page3} />
+      <p class="text-sm text-gray-500 mt-4">Current page: {page3}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Many Pages">
+  {#snippet template()}
+    <Pagination totalPages={100} currentPage={50} />
+  {/snippet}
+</Story>
+
+<Story name="In Context">
+  {#snippet template()}
+    <div class="border rounded-lg p-4">
+      <h3 class="font-medium mb-4">Search Results</h3>
+      <ul class="space-y-2 mb-4">
+        {#each [1, 2, 3, 4, 5] as i}
+          <li class="p-3 border rounded hover:bg-gray-50">
+            Result item {i}
+          </li>
+        {/each}
+      </ul>
+      <div class="border-t pt-4">
+        <Pagination totalPages={20} bind:currentPage={page1} />
+      </div>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Pagination/Pagination.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Pagination;
+type Pagination = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Pagination from './Pagination.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Pagination.stories.svelte.d.ts.map

package/dist/primitives/Pagination/Pagination.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA0FA;;;;mBAAsH;uBAtF7F,qBAAqB;6CA6ED,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/primitives/Pagination/Pagination.svelte

@@ -16,7 +16,7 @@
     perPage?: number;
     class?: string;
     onchange?: (detail: { page: number }) => void;
-    onpagechange?: (page: number) => void;
+    onPageChange?: (page: number) => void;
     prev?: Snippet;
     next?: Snippet;
     [key: string]: unknown;
@@ -36,7 +36,7 @@
     perPage = 10,
     class: className = "",
     onchange,
-    onpagechange,
+    onPageChange,
     prev,
     next,
     ...restProps
@@ -67,7 +67,7 @@
       currentPage = page;
       onchange?.({ page });
       // Also dispatch flowbite-style event
-      onpagechange?.(page);
+      onPageChange?.(page);
     }
   }
 

package/dist/primitives/Pagination/Pagination.svelte.d.ts

@@ -15,7 +15,7 @@ interface Props {
     onchange?: (detail: {
         page: number;
     }) => void;
-    onpagechange?: (page: number) => void;
+    onPageChange?: (page: number) => void;
     prev?: Snippet;
     next?: Snippet;
     [key: string]: unknown;

package/dist/primitives/Radio/Radio.stories.svelte

@@ -0,0 +1,80 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Radio from './Radio.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Radio',
+    component: Radio,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      value: { control: 'text' },
+      disabled: { control: 'boolean' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Radio button for single selection from a group.',
+        },
+      },
+    },
+  });
+
+  let selectedSize = $state('md');
+  let selectedPlan = $state('basic');
+</script>
+
+<Story name="Single">
+  {#snippet template()}
+    <Radio name="single" value="option" label="Single option" />
+  {/snippet}
+</Story>
+
+<Story name="Group">
+  {#snippet template()}
+    <div class="space-y-3">
+      <p class="text-sm font-medium text-gray-700">Select size:</p>
+      <Radio name="size" value="sm" label="Small" bind:group={selectedSize} />
+      <Radio name="size" value="md" label="Medium" bind:group={selectedSize} />
+      <Radio name="size" value="lg" label="Large" bind:group={selectedSize} />
+      <p class="text-xs text-gray-500 mt-2">Selected: {selectedSize}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="space-y-3">
+      <Radio name="disabled-demo" value="1" label="Enabled option" />
+      <Radio name="disabled-demo" value="2" label="Disabled option" disabled />
+      <Radio name="disabled-demo" value="3" label="Disabled checked" disabled checked />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Pricing Plans">
+  {#snippet template()}
+    <div class="space-y-3">
+      <p class="text-sm font-medium text-gray-700">Choose your plan:</p>
+      <div class="space-y-2">
+        <Radio name="plan" value="basic" label="Basic - Free" bind:group={selectedPlan} />
+        <Radio name="plan" value="pro" label="Pro - $29/month" bind:group={selectedPlan} />
+        <Radio name="plan" value="enterprise" label="Enterprise - Contact us" bind:group={selectedPlan} />
+      </div>
+      <p class="text-xs text-gray-500 mt-2">Selected plan: {selectedPlan}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Horizontal Layout">
+  {#snippet template()}
+    <div class="space-y-2">
+      <p class="text-sm font-medium text-gray-700">Payment method:</p>
+      <div class="flex gap-6">
+        <Radio name="payment" value="card" label="Credit Card" />
+        <Radio name="payment" value="paypal" label="PayPal" />
+        <Radio name="payment" value="bank" label="Bank Transfer" />
+      </div>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Radio/Radio.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Radio;
+type Radio = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Radio: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Radio from './Radio.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Radio.stories.svelte.d.ts.map

package/dist/primitives/Radio/Radio.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Radio/Radio.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA8FA;;;;mBAAiH;kBA1F7F,gBAAgB;6CAiFS,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}