@getmicdrop/svelte-components 5.1.2 → 5.2.1

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

@@ -1,64 +1,33 @@
 export default Button;
-type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$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<$$__sveltets_2_PropsWithChildren<{
-    [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;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
+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;
-} : {});
-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;
-}
+    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":";;;;;;;;;;;;;;;;;;;;;;;;AAqLA;;;;;;;;;;;;;;;;;;;;eAAqO;sCAT/L,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":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwMA;;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"}

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -1,28 +1,46 @@
-<script>
-  import { createEventDispatcher } from "svelte";
+<script lang="ts">
+  import type { Snippet } from 'svelte';
 
-  /** @type {boolean} Whether the checkbox is checked */
-  export let checked = false;
-  /** @type {string} The value attribute */
-  export let value = "";
-  /** @type {string} Name attribute for form submission */
-  export let name = "";
-  /** @type {boolean} Whether the checkbox is disabled */
-  export let disabled = false;
-  /** @type {'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow'} Color variant */
-  export let color = "blue";
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
+  interface Props {
+    checked?: boolean;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: { checked: boolean; value: string }) => void;
+    onclick?: () => void;
+    onfocus?: () => void;
+    onblur?: () => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onkeyup?: (e: KeyboardEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
 
-  const dispatch = createEventDispatcher();
+  let {
+    checked = $bindable(false),
+    value = "",
+    name = "",
+    disabled = false,
+    color = "blue",
+    class: className = "",
+    onchange,
+    onclick,
+    onfocus,
+    onblur,
+    onkeydown,
+    onkeyup,
+    children,
+    ...restProps
+  }: Props = $props();
 
-  function handleChange(event) {
-    checked = event.target.checked;
-    dispatch("change", { checked, value });
+  function handleChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    checked = target.checked;
+    onchange?.({ checked, value });
   }
 
-  // Flowbite color classes
   const colorClasses = {
     blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600",
     red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
@@ -32,20 +50,21 @@
     yellow: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600"
   };
 
-  $: colorClass = colorClasses[color] || colorClasses.blue;
+  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
 
-  $: inputClasses = [
+  let inputClasses = $derived([
     "w-4 h-4 rounded",
     "bg-gray-100 border-gray-300",
     "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
     "focus:ring-2",
     colorClass,
     disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-  ].join(" ");
+  ].join(" "));
 </script>
 
 <label
   class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
+  {...restProps}
 >
   <input
     type="checkbox"
@@ -53,17 +72,17 @@
     {value}
     {disabled}
     bind:checked
-    on:change={handleChange}
-    on:click
-    on:focus
-    on:blur
-    on:keydown
-    on:keyup
+    onchange={handleChange}
+    {onclick}
+    {onfocus}
+    {onblur}
+    {onkeydown}
+    {onkeyup}
     class={inputClasses}
   />
-  {#if $$slots.default}
+  {#if children}
     <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
-      <slot />
+      {@render children()}
     </span>
   {/if}
 </label>

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

@@ -1,64 +1,24 @@
-export default Checkbox;
-type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    color?: "red" | "blue" | "purple" | "green" | "orange" | "yellow" | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
-    value?: string | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    color?: "red" | "blue" | "purple" | "green" | "orange" | "yellow" | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
-    value?: string | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    change: CustomEvent<any>;
-} & {
-    [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 {
+    checked?: boolean;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: {
+        checked: boolean;
+        value: string;
+    }) => void;
+    onclick?: () => void;
+    onfocus?: () => void;
+    onblur?: () => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onkeyup?: (e: KeyboardEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
 //# sourceMappingURL=Checkbox.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkFA;;;;;;;;;;;;;;;;;;;;eAAiL;sCAT3I,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":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA4DH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}