@getmicdrop/svelte-components 5.1.3 → 5.3.0

package/dist/primitives/Button/Button.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
    * Button Component - Flowbite Native (Pure Tailwind)
+   * Migrated to Svelte 5 runes
    *
    * Variants (Flowbite naming):
    *   - default: Primary blue button
@@ -15,24 +16,36 @@
    *
    * Sizes (Flowbite native): xs, sm, md, lg, xl
    */
-  import Spinner from '../Spinner/Spinner.svelte';
   import { CheckOutline } from '../Icons';
 
-  // Flowbite-native API
-  export let variant = "default";
-  export let size = "md";
-  export let disabled = false;
-  export let loading = false;
-  export let success = false;
-  export let successText = "";
-  export let active = false;
-  export let href = null;
-  /** @type {string | Function} Text content or Svelte 5 snippet (alternative to slot, for Storybook) */
-  export let children = "";
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
-
+  /** @type {{
+    variant?: string,
+    size?: string,
+    disabled?: boolean,
+    loading?: boolean,
+    success?: boolean,
+    successText?: string,
+    active?: boolean,
+    href?: string | null,
+    children?: any,
+    class?: string,
+    onclick?: (e: MouseEvent) => void,
+    [key: string]: any
+  }} */
+  let {
+    variant = "default",
+    size = "md",
+    disabled = false,
+    loading = false,
+    success = false,
+    successText = "",
+    active = false,
+    href = null,
+    children,
+    class: className = "",
+    onclick,
+    ...restProps
+  } = $props();
 
   // Legacy variant name mapping
   const variantMap = {
@@ -45,8 +58,8 @@
   };
 
   // Resolve legacy names
-  $: resolvedVariant = variantMap[variant] || variant;
-  $: effectiveDisabled = disabled || loading || success;
+  let resolvedVariant = $derived(variantMap[variant] || variant);
+  let effectiveDisabled = $derived(disabled || loading || success);
 
   // Size classes - Flowbite native sizing
   const sizeClasses = {
@@ -70,17 +83,18 @@
   };
 
   // Variant classes with all states in Tailwind
+  // Note: focus:ring-4 is added per-variant to allow icon/link variants to have no ring
   const variantClasses = {
-    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
-    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
-    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
-    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
-    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
-    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
-    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 focus:ring-red-200 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
-    link: "text-blue-700 bg-transparent border-transparent hover:underline focus:ring-0 dark:text-blue-500",
+    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
+    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
+    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
+    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
+    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
+    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 focus:ring-4 focus:ring-red-200 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
+    link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
     icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
-    toggle: "text-gray-500 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600",
+    toggle: "text-gray-500 bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600",
     success: "text-white bg-green-600 border border-green-600",
   };
 
@@ -93,67 +107,66 @@
   // Disabled classes
   const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
 
-  $: sizeClass = resolvedVariant === "icon"
-    ? (iconSizes[size] || iconSizes.sm)
-    : resolvedVariant === "link"
-    ? "text-sm"
-    : (sizeClasses[size] || sizeClasses.md);
+  let sizeClass = $derived(
+    resolvedVariant === "icon"
+      ? (iconSizes[size] || iconSizes.sm)
+      : resolvedVariant === "link"
+      ? "text-sm"
+      : (sizeClasses[size] || sizeClasses.md)
+  );
 
-  $: variantClass = (() => {
+  let variantClass = $derived((() => {
     if (success) return variantClasses.success;
     if (disabled && !loading && !success) return disabledClasses;
     if (active && (resolvedVariant === "ghost" || resolvedVariant === "toggle")) {
       return activeClasses[resolvedVariant];
     }
     return variantClasses[resolvedVariant] || variantClasses.default;
-  })();
+  })());
 
-  $: buttonClasses = [
+  let buttonClasses = $derived([
     "relative",
     "inline-flex items-center justify-center",
     "rounded-lg",
     "font-medium leading-none",
-    "focus:outline-none focus:ring-4",
+    "focus:outline-none",
     "transition-colors duration-150",
     "select-none",
     sizeClass,
     variantClass,
     effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
     className
-  ].filter(Boolean).join(" ");
+  ].filter(Boolean).join(" "));
 </script>
 
 {#if href}
   <a
     {href}
-    class={buttonClasses}
-    on:click
-    {...$$restProps}
+    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
+    {onclick}
+    {...restProps}
   >
+    {#if loading}
+      <span class="shimmer-overlay"></span>
+    {/if}
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </span>
-    {#if loading}
-      <span class="absolute inset-0 flex items-center justify-center">
-        <Spinner size="sm" color="white" />
-      </span>
-    {/if}
   </a>
 {:else}
   <button
-    class={buttonClasses}
+    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
     disabled={effectiveDisabled}
-    on:click
-    {...$$restProps}
+    {onclick}
+    {...restProps}
   >
+    {#if loading}
+      <span class="shimmer-overlay"></span>
+    {/if}
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </span>
-    {#if loading}
-      <span class="absolute inset-0 flex items-center justify-center">
-        <Spinner size="sm" color="white" />
-      </span>
-    {:else if success}
+    {#if success}
       <span class="absolute inset-0 flex items-center justify-center gap-2">
         <CheckOutline class="w-5 h-5" />
         {#if successText}<span class="font-medium">{successText}</span>{/if}
@@ -161,3 +174,46 @@
     {/if}
   </button>
 {/if}
+
+<style>
+  .loading-pulse {
+    animation: pulse-bg 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-bg {
+    0%, 100% { filter: brightness(1); }
+    50% { filter: brightness(1.15); }
+  }
+
+  .shimmer-overlay {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  .shimmer-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.2) 50%,
+      transparent 100%
+    );
+    animation: shimmer 1s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      left: -100%;
+    }
+    100% {
+      left: 100%;
+    }
+  }
+</style>

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

@@ -1,51 +1,33 @@
 export default Button;
-type Button = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    size?: string | undefined;
-    success?: boolean | undefined;
-    variant?: string | undefined;
-    disabled?: boolean | undefined;
-    loading?: boolean | undefined;
-    successText?: string | undefined;
-    active?: boolean | undefined;
-    href?: null | undefined;
-    children?: string | Function | undefined;
-}, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        variant?: string | undefined;
+        size?: string | undefined;
+        disabled?: boolean | undefined;
+        loading?: boolean | undefined;
+        success?: boolean | undefined;
+        successText?: string | undefined;
+        active?: boolean | undefined;
+        href?: string | null | undefined;
+        children?: any;
+        class?: string | undefined;
+        onclick?: ((e: MouseEvent) => void) | undefined;
+    }>): void;
 };
-declare const Button: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    size?: string | undefined;
-    success?: boolean | undefined;
-    variant?: string | undefined;
-    disabled?: boolean | undefined;
-    loading?: boolean | undefined;
-    successText?: string | undefined;
-    active?: boolean | undefined;
-    href?: null | undefined;
-    children?: string | Function | undefined;
-}, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const Button: import("svelte").Component<{
+    [key: string]: any;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    success?: boolean;
+    successText?: string;
+    active?: boolean;
+    href?: string | null;
+    children?: any;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+}, {}, "">;
 //# sourceMappingURL=Button.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA8KA;;;;;;;;;;;;;;;;mBAA+N;6CATlL,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,KAAK,GAAG;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;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8LA;;cAbc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;eACT,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}

package/dist/primitives/Button/ButtonSaveDemo.svelte

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
   import Button from "./Button.svelte";
 
-  let loading = false;
-  let success = false;
+  let loading = $state(false);
+  let success = $state(false);
 
   function handleSave() {
     if (loading || success) return;
@@ -19,6 +19,6 @@
 </script>
 
 <div class="flex gap-4 items-center">
-  <Button on:click={handleSave} {loading} {success}>Save</Button>
-  <button class="text-sm text-gray-500 dark:text-gray-400 underline" on:click={resetState}>Reset (simulates user edit)</button>
+  <Button onclick={handleSave} {loading} {success}>Save</Button>
+  <button class="text-sm text-gray-500 dark:text-gray-400 underline" onclick={resetState}>Reset (simulates user edit)</button>
 </div>

package/dist/primitives/Button/ButtonSaveDemo.svelte.d.ts

@@ -1,27 +1,4 @@
+declare const ButtonSaveDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type ButtonSaveDemo = ReturnType<typeof ButtonSaveDemo>;
 export default ButtonSaveDemo;
-type ButtonSaveDemo = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ButtonSaveDemo: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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=ButtonSaveDemo.svelte.d.ts.map

package/dist/primitives/Button/ButtonSaveDemo.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSaveDemo.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonSaveDemo.svelte.js"],"names":[],"mappings":";;;;;;;;AAyCA;;;;mBAA0H;6CAT7E,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"}
+{"version":3,"file":"ButtonSaveDemo.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonSaveDemo.svelte.ts"],"names":[],"mappings":"AAgCA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/primitives/Button/ButtonVariantShowcase.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Button from './Button.svelte';
 
   const variants = [
@@ -15,9 +15,8 @@
   ];
 
   const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
-  const widthSizes = ['full', 'xl-medium', 'full-md-auto', 'half'];
 
-  let isDark = false;
+  let isDark = $state(false);
 
   function toggleDark() {
     isDark = !isDark;
@@ -26,21 +25,19 @@
 </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">
     <div>
       <h1 class="text-2xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Button Variants</h1>
       <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All variants × all sizes</p>
     </div>
     <button
-      on:click={toggleDark}
+      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>
 
-  <!-- Variants Grid -->
   {#each variants as v}
     <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
       <div class="mb-3">
@@ -49,7 +46,6 @@
       </div>
 
       {#if v.name === 'icon'}
-        <!-- Icon variant uses different sizing -->
         <div class="flex flex-wrap gap-3 items-end">
           <Button variant="icon" size="xs">×</Button>
           <Button variant="icon" size="sm">×</Button>
@@ -57,7 +53,6 @@
           <Button variant="icon" size="lg">×</Button>
         </div>
       {:else if v.name === 'toggle'}
-        <!-- Toggle shows active state -->
         <div class="flex flex-wrap gap-3 items-center">
           {#each sizes as size}
             <Button variant="toggle" {size}>{size}</Button>
@@ -74,7 +69,6 @@
     </section>
   {/each}
 
-  <!-- Width Sizes -->
   <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
     <div class="mb-3">
       <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Width Sizes</h2>
@@ -91,7 +85,6 @@
     </div>
   </section>
 
-  <!-- States -->
   <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
     <div class="mb-3">
       <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">States</h2>
@@ -104,7 +97,6 @@
     </div>
   </section>
 
-  <!-- Common Patterns -->
   <section class="rounded-xl p-5 {isDark ? 'bg-gray-800' : 'bg-white'} border {isDark ? 'border-gray-700' : 'border-gray-200'}">
     <div class="mb-3">
       <h2 class="text-lg font-semibold {isDark ? 'text-white' : 'text-gray-900'}">Common Patterns</h2>

package/dist/primitives/Button/ButtonVariantShowcase.svelte.d.ts

@@ -1,27 +1,4 @@
+declare const ButtonVariantShowcase: import("svelte").Component<Record<string, never>, {}, "">;
+type ButtonVariantShowcase = ReturnType<typeof ButtonVariantShowcase>;
 export default ButtonVariantShowcase;
-type ButtonVariantShowcase = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ButtonVariantShowcase: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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=ButtonVariantShowcase.svelte.d.ts.map

package/dist/primitives/Button/ButtonVariantShowcase.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonVariantShowcase.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonVariantShowcase.svelte.js"],"names":[],"mappings":";;;;;;;;AAuJA;;;;mBAAiI;6CATpF,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"}
+{"version":3,"file":"ButtonVariantShowcase.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonVariantShowcase.svelte.ts"],"names":[],"mappings":"AAsIA,QAAA,MAAM,qBAAqB,2DAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/primitives/Card.svelte

@@ -1,17 +1,28 @@
-<script>
-  /** @type {boolean} Add padding to the card */
-  export let padding = true;
-  /** @type {boolean} Add border to the card */
-  export let border = false;
-  /** @type {'default' | 'horizontal'} Card layout */
-  export let horizontal = false;
-  /** @type {string} Additional CSS classes */
-  let className = '';
-  export { className as class };
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    padding?: boolean;
+    border?: boolean;
+    horizontal?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    padding = true,
+    border = false,
+    horizontal = false,
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
 </script>
 
 <div
   class="bg-white dark:bg-gray-800 rounded-lg shadow {border ? 'border border-gray-200 dark:border-gray-700' : ''} {padding ? 'p-6' : ''} {horizontal ? 'flex flex-row' : ''} {className}"
+  {...restProps}
 >
-  <slot />
+  {#if children}{@render children()}{/if}
 </div>

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

@@ -1,46 +1,13 @@
-export default Card;
-type Card = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    border?: boolean | undefined;
-    horizontal?: "default" | "horizontal" | undefined;
-    padding?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    border?: boolean | undefined;
-    horizontal?: "default" | "horizontal" | undefined;
-    padding?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+interface Props {
+    padding?: boolean;
+    border?: boolean;
+    horizontal?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;
 //# sourceMappingURL=Card.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Card.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuCA;;;;;;;;;;;eAAiK;sCAT3H,KAAK,EAAE,KAAK;;;;;6CALL,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,KAAK,GAAG;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;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAqBH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}