@getmicdrop/svelte-components 5.10.1 → 5.10.3

package/dist/primitives/Checkbox/Checkbox.svelte

@@ -1,88 +1,88 @@
-<script lang="ts">
-  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;
-  }
-
-  let {
-    checked = $bindable(false),
-    value = "",
-    name = "",
-    disabled = false,
-    color = "blue",
-    class: className = "",
-    onchange,
-    onclick,
-    onfocus,
-    onblur,
-    onkeydown,
-    onkeyup,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  function handleChange() {
-    // Note: checked is already updated by bind:checked before this handler runs
-    // We just need to call the onchange callback with the current values
-    onchange?.({ checked, value });
-  }
-
-  const colorClasses = {
-    blue: "text-blue-600",
-    red: "text-red-600",
-    green: "text-green-600",
-    purple: "text-purple-600",
-    orange: "text-orange-500",
-    yellow: "text-yellow-400"
-  };
-
-  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
-
-  let inputClasses = $derived([
-    "w-4 h-4 rounded",
-    "bg-gray-100 border-gray-300",
-    "dark:bg-gray-700 dark:border-gray-600",
-    "focus:outline-hidden",
-    colorClass,
-    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-  ].join(" "));
-</script>
-
-<label
-  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
-  {...restProps}
->
-  <input
-    type="checkbox"
-    {name}
-    {value}
-    {disabled}
-    bind:checked
-    onchange={handleChange}
-    {onclick}
-    {onfocus}
-    {onblur}
-    {onkeydown}
-    {onkeyup}
-    class={inputClasses}
-  />
-  {#if children}
-    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
-      {@render children()}
-    </span>
-  {/if}
-</label>
+<script lang="ts">
+  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;
+  }
+
+  let {
+    checked = $bindable(false),
+    value = "",
+    name = "",
+    disabled = false,
+    color = "blue",
+    class: className = "",
+    onchange,
+    onclick,
+    onfocus,
+    onblur,
+    onkeydown,
+    onkeyup,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  function handleChange() {
+    // Note: checked is already updated by bind:checked before this handler runs
+    // We just need to call the onchange callback with the current values
+    onchange?.({ checked, value });
+  }
+
+  const colorClasses = {
+    blue: "text-blue-600",
+    red: "text-red-600",
+    green: "text-green-600",
+    purple: "text-purple-600",
+    orange: "text-orange-500",
+    yellow: "text-yellow-400"
+  };
+
+  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
+
+  let inputClasses = $derived([
+    "w-4 h-4 rounded",
+    "bg-gray-100 border-gray-300",
+    "dark:bg-gray-700 dark:border-gray-600",
+    "focus:outline-hidden",
+    colorClass,
+    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+  ].join(" "));
+</script>
+
+<label
+  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
+  {...restProps}
+>
+  <input
+    type="checkbox"
+    {name}
+    {value}
+    {disabled}
+    bind:checked
+    onchange={handleChange}
+    {onclick}
+    {onfocus}
+    {onblur}
+    {onkeydown}
+    {onkeyup}
+    class={inputClasses}
+  />
+  {#if children}
+    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
+      {@render children()}
+    </span>
+  {/if}
+</label>