@getmicdrop/svelte-components 5.1.2 → 5.2.1

package/dist/primitives/Input/Select.svelte

@@ -1,45 +1,39 @@
 <script>
-  /**
-   * Custom Select component - drop-in replacement for native select
-   *
-   * @fires change - Dispatched when selection changes
-   *   Event detail: { value: any, item: { name: string, value: any } }
-   */
-  import { createEventDispatcher, onMount } from "svelte";
+  import { onMount } from "svelte";
   import { ChevronDownOutline, CheckOutline } from "../Icons";
 
-  const dispatch = createEventDispatcher();
-
-  export let value = "";
-  export let items = [];
-  export let placeholder = "Select an option";
-  export let label = "";
-  export let required = false;
-  export let disabled = false;
-  export let error = "";
-  export let name = "";
-  export let id = "";
-  /** @type {'sm' | 'md' | 'lg'} */
-  export let size = "md";
-
-  let isOpen = false;
-  let triggerElement;
-  let dropdownElement;
-  let focusedIndex = -1;
+  let {
+    value = $bindable(""),
+    items = [],
+    placeholder = "Select an option",
+    label = "",
+    required = false,
+    disabled = false,
+    error = "",
+    name = "",
+    id = "",
+    size = "md",
+    onchange,
+    ...restProps
+  } = $props();
+
+  let isOpen = $state(false);
+  let triggerElement = $state(null);
+  let dropdownElement = $state(null);
+  let focusedIndex = $state(-1);
 
   const instanceId = Math.random().toString(36).substring(2, 9);
 
-  $: selectedItem = items.find((item) => item.value === value);
-  $: displayText = selectedItem ? selectedItem.name : placeholder;
+  let selectedItem = $derived(items.find((item) => item.value === value));
+  let displayText = $derived(selectedItem ? selectedItem.name : placeholder);
 
-  // Size classes matching Flowbite
   const sizeClasses = {
     sm: "py-2 px-3 text-sm",
     md: "py-2.5 px-4 text-sm",
     lg: "py-3 px-4 text-base"
   };
 
-  $: sizeClass = sizeClasses[size] || sizeClasses.md;
+  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
 
   function toggle() {
     if (disabled) return;
@@ -63,7 +57,7 @@
 
   function selectItem(item) {
     value = item.value;
-    dispatch("change", { value: item.value, item });
+    onchange?.({ value: item.value, item });
     close();
     triggerElement?.focus();
   }
@@ -125,7 +119,7 @@
   });
 </script>
 
-<div class="w-full flex flex-col gap-2">
+<div class="w-full flex flex-col gap-2" {...restProps}>
   {#if label}
     <div class="flex justify-start items-center gap-1">
       <label for={id || name} class="text-sm font-medium text-gray-900 dark:text-white">
@@ -144,15 +138,15 @@
       {disabled}
       aria-haspopup="listbox"
       aria-expanded={isOpen}
-      on:click={toggle}
-      on:keydown={handleKeydown}
+      onclick={toggle}
+      onkeydown={handleKeydown}
     >
       <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{displayText}</span>
       <ChevronDownOutline class="w-4 h-4 shrink-0 text-gray-500 dark:text-gray-400 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
     </button>
 
     {#if isOpen}
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <ul
         bind:this={dropdownElement}
         class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
@@ -160,14 +154,14 @@
         tabindex="-1"
       >
         {#each items as item, index}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id="{id || name}-option-{index}"
             class="flex items-center justify-between px-4 py-2 cursor-pointer text-sm transition-colors {item.value === value ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300'} {index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
             role="option"
             aria-selected={item.value === value}
-            on:click={() => selectItem(item)}
-            on:mouseenter={() => (focusedIndex = index)}
+            onclick={() => selectItem(item)}
+            onmouseenter={() => (focusedIndex = index)}
           >
             <span class="flex-1">{item.name}</span>
             {#if item.value === value}

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

@@ -1,49 +1,32 @@
 export default Select;
-type Select = SvelteComponent<{
-    size?: "sm" | "md" | "lg" | undefined;
-    name?: string | undefined;
-    error?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    required?: boolean | undefined;
-    placeholder?: string | undefined;
-    items?: any[] | undefined;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Select = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
 };
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    size?: "sm" | "md" | "lg" | undefined;
-    name?: string | undefined;
-    error?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    required?: boolean | undefined;
-    placeholder?: string | undefined;
-    items?: any[] | undefined;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [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 Select: import("svelte").Component<{
+    value?: string;
+    items?: any[];
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    name?: string;
+    id?: string;
+    size?: string;
+    onchange: any;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    items?: any[];
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    name?: string;
+    id?: string;
+    size?: string;
+    onchange: any;
+} & Record<string, any>;
 //# sourceMappingURL=Select.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAsLA;;;;;;;;;;;;;;;mBAA4M;6CAT/J,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":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.js"],"names":[],"mappings":";;;;;AAqKA;YA3J6B,MAAM;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;cAAY,GAAG;sCA2JrJ;wBA3JlC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Input/Textarea.svelte

@@ -1,75 +1,77 @@
-<script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  // API compatible with flowbite-svelte Textarea
-  export let value = "";
-  export let placeholder = "";
-  export let rows = 4;
-  export let disabled = false;
-  export let required = false;
-  export let readonly = false;
-  export let id = "";
-  export let name = "";
-  export let label = "";
-  export let error = "";
-  export let maxlength = null;
-  export let minlength = null;
-
-  // Additional props
-  let className = "";
-  export { className as class };
-
-  function handleInput(event) {
-    value = event.target.value;
-    dispatch("input", { value });
-  }
-
-  function handleChange(event) {
-    dispatch("change", { value: event.target.value });
-  }
-
-  function handleBlur(event) {
-    dispatch("blur", event);
-  }
-
-  function handleFocus(event) {
-    dispatch("focus", event);
-  }
-</script>
-
-<div class="flex flex-col gap-2 w-full">
-  {#if label}
-    <label for={id || name} class="text-sm font-medium text-gray-900 dark:text-white leading-tight">
-      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
-    </label>
-  {/if}
-
-  <textarea
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {maxlength}
-    {minlength}
-    class="w-full p-2.5 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white text-sm leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
-    bind:value
-    on:input={handleInput}
-    on:change={handleChange}
-    on:blur={handleBlur}
-    on:focus={handleFocus}
-    on:keydown
-    on:keyup
-    on:keypress
-    aria-required={required}
-    aria-invalid={!!error}
-    {...$$restProps}
-  ></textarea>
-
-  {#if error}
-    <p class="text-sm text-red-500">{error}</p>
-  {/if}
-</div>
+<script>
+  let {
+    value = $bindable(""),
+    placeholder = "",
+    rows = 4,
+    disabled = false,
+    required = false,
+    readonly = false,
+    id = "",
+    name = "",
+    label = "",
+    error = "",
+    maxlength = null,
+    minlength = null,
+    class: className = "",
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    onkeydown,
+    onkeyup,
+    onkeypress,
+    ...restProps
+  } = $props();
+
+  function handleInput(event) {
+    value = event.target.value;
+    oninput?.({ value });
+  }
+
+  function handleChange(event) {
+    onchange?.({ value: event.target.value });
+  }
+
+  function handleBlur(event) {
+    onblur?.(event);
+  }
+
+  function handleFocus(event) {
+    onfocus?.(event);
+  }
+</script>
+
+<div class="flex flex-col gap-2 w-full">
+  {#if label}
+    <label for={id || name} class="text-sm font-medium text-gray-900 dark:text-white leading-tight">
+      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+    </label>
+  {/if}
+
+  <textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {minlength}
+    class="w-full p-2.5 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white text-sm leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onblur={handleBlur}
+    onfocus={handleFocus}
+    {onkeydown}
+    {onkeyup}
+    {onkeypress}
+    aria-required={required}
+    aria-invalid={!!error}
+    {...restProps}
+  ></textarea>
+
+  {#if error}
+    <p class="text-sm text-red-500">{error}</p>
+  {/if}
+</div>

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

@@ -1,69 +1,50 @@
 export default Textarea;
-type Textarea = SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    error?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    required?: boolean | undefined;
-    maxlength?: null | undefined;
-    minlength?: null | undefined;
-    placeholder?: string | undefined;
-    readonly?: boolean | undefined;
-    rows?: number | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-    blur: CustomEvent<any>;
-    focus: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Textarea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
 };
-declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-    name?: string | undefined;
-    error?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | undefined;
-    label?: string | undefined;
-    id?: string | undefined;
-    required?: boolean | undefined;
-    maxlength?: null | undefined;
-    minlength?: null | undefined;
-    placeholder?: string | undefined;
-    readonly?: boolean | undefined;
-    rows?: number | undefined;
-}, {
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    input: CustomEvent<any>;
-    change: CustomEvent<any>;
-    blur: CustomEvent<any>;
-    focus: CustomEvent<any>;
-} & {
-    [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 Textarea: import("svelte").Component<{
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    id?: string;
+    name?: string;
+    label?: string;
+    error?: string;
+    maxlength?: any;
+    minlength?: any;
+    class?: string;
+    oninput: any;
+    onchange: any;
+    onblur: any;
+    onfocus: any;
+    onkeydown: any;
+    onkeyup: any;
+    onkeypress: any;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    id?: string;
+    name?: string;
+    label?: string;
+    error?: string;
+    maxlength?: any;
+    minlength?: any;
+    class?: string;
+    oninput: any;
+    onchange: any;
+    onblur: any;
+    onfocus: any;
+    onkeydown: any;
+    onkeyup: any;
+    onkeypress: any;
+} & Record<string, any>;
 //# sourceMappingURL=Textarea.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA;;;;;;;;;;;;;;;;;;;;;;;;;mBAA0P;6CAT7M,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":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;AA8DA;YA1D6B,MAAM;kBAAgB,MAAM;WAAS,MAAM;eAAa,OAAO;eAAa,OAAO;eAAa,OAAO;SAAO,MAAM;WAAS,MAAM;YAAU,MAAM;YAAU,MAAM;gBAAc,GAAG;gBAAc,GAAG;YAAU,MAAM;aAAW,GAAG;cAAY,GAAG;YAAU,GAAG;aAAW,GAAG;eAAa,GAAG;aAAW,GAAG;gBAAc,GAAG;sCA0DlS;wBA1DpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Label/Label.svelte

@@ -1,29 +1,37 @@
-<script>
-  // API compatible with flowbite-svelte Label
-  // Flowbite-native: https://flowbite.com/docs/forms/input-field/
-  export let color = "gray";
-  export let defaultClass = "text-sm rtl:text-right font-medium block";
-  export let show = true;
-
-  // Additional props for convenience
-  let className = "";
-  export { className as class };
-
-  // Flowbite-native color classes
-  // Based on: https://flowbite.com/docs/forms/input-field/#validation
-  const colorClasses = {
-    gray: "text-gray-900 dark:text-gray-300",
-    green: "text-green-700 dark:text-green-500",
-    red: "text-red-700 dark:text-red-500",
-    disabled: "text-gray-400 dark:text-gray-500"
-  };
-
-  $: labelClass = `${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim();
-</script>
-
-{#if show}
-  <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label {...$$restProps} class={labelClass}><slot /></label>
-{:else}
-  <slot />
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    color?: 'gray' | 'green' | 'red' | 'disabled';
+    defaultClass?: string;
+    show?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    color = "gray",
+    defaultClass = "text-sm rtl:text-right font-medium block",
+    show = true,
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const colorClasses = {
+    gray: "text-gray-900 dark:text-gray-300",
+    green: "text-green-700 dark:text-green-500",
+    red: "text-red-700 dark:text-red-500",
+    disabled: "text-gray-400 dark:text-gray-500"
+  };
+
+  let labelClass = $derived(`${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim());
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y_label_has_associated_control -->
+  <label {...restProps} class={labelClass}>{#if children}{@render children()}{/if}</label>
+{:else}
+  {#if children}{@render children()}{/if}
+{/if}

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

@@ -1,48 +1,13 @@
-export default Label;
-type Label = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    color?: string | undefined;
-    show?: boolean | undefined;
-    defaultClass?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Label: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    color?: string | undefined;
-    show?: boolean | undefined;
-    defaultClass?: string | 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 {
+    color?: 'gray' | 'green' | 'red' | 'disabled';
+    defaultClass?: string;
+    show?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;
 //# sourceMappingURL=Label.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Label/Label.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiDA;;;;;;;;;;;;eAAyK;sCATnI,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":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Label/Label.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAiCH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}