@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/primitives/Toggle.stories.svelte

@@ -1,92 +1,92 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import Toggle from './Toggle.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Toggle',
-    component: Toggle,
-    tags: ['autodocs'],
-    argTypes: {
-      checked: { control: 'boolean' },
-      disabled: { control: 'boolean' },
-    },
-  });
-
-</script>
-
-<script>
-  
-  let toggleState = false;
-  let disabledToggle = true;
-</script>
-
-
-<Story
-  name="Default (Unchecked)"
-  args={{
-    checked: false,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Checked"
-  args={{
-    checked: true,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Disabled Unchecked"
-  args={{
-    checked: false,
-    disabled: true,
-  }}
-/>
-
-<Story
-  name="Disabled Checked"
-  args={{
-    checked: true,
-    disabled: true,
-  }}
-/>
-
-<Story name="Interactive">
-  <div class="space-y-4">
-    <div class="flex items-center gap-3">
-      <Toggle bind:checked={toggleState} />
-      <span class="text-sm">State: {toggleState ? 'On' : 'Off'}</span>
-    </div>
-  </div>
-</Story>
-
-<Story name="Settings List">
-  <div class="max-w-md space-y-4">
-    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
-      <div>
-        <div class="font-medium">Email Notifications</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Receive updates via email</div>
-      </div>
-      <Toggle bind:checked={toggleState} />
-    </div>
-
-    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
-      <div>
-        <div class="font-medium">Dark Mode</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Use dark color scheme</div>
-      </div>
-      <Toggle checked={false} />
-    </div>
-
-    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border">
-      <div>
-        <div class="font-medium text-gray-500 dark:text-gray-400">Premium Feature</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Requires subscription</div>
-      </div>
-      <Toggle disabled={true} checked={false} />
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Toggle from './Toggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Toggle',
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {
+      checked: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+    },
+  });
+
+</script>
+
+<script>
+  
+  let toggleState = false;
+  let disabledToggle = true;
+</script>
+
+
+<Story
+  name="Default (Unchecked)"
+  args={{
+    checked: false,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Checked"
+  args={{
+    checked: true,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Disabled Unchecked"
+  args={{
+    checked: false,
+    disabled: true,
+  }}
+/>
+
+<Story
+  name="Disabled Checked"
+  args={{
+    checked: true,
+    disabled: true,
+  }}
+/>
+
+<Story name="Interactive">
+  <div class="space-y-4">
+    <div class="flex items-center gap-3">
+      <Toggle bind:checked={toggleState} />
+      <span class="text-sm">State: {toggleState ? 'On' : 'Off'}</span>
+    </div>
+  </div>
+</Story>
+
+<Story name="Settings List">
+  <div class="max-w-md space-y-4">
+    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
+      <div>
+        <div class="font-medium">Email Notifications</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Receive updates via email</div>
+      </div>
+      <Toggle bind:checked={toggleState} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
+      <div>
+        <div class="font-medium">Dark Mode</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Use dark color scheme</div>
+      </div>
+      <Toggle checked={false} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border">
+      <div>
+        <div class="font-medium text-gray-500 dark:text-gray-400">Premium Feature</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Requires subscription</div>
+      </div>
+      <Toggle disabled={true} checked={false} />
+    </div>
+  </div>
+</Story>

package/dist/primitives/Toggle.svelte

@@ -1,131 +1,141 @@
-<script>
-  /**
-   * Toggle Component - Flowbite Native
-   * Migrated to Svelte 5 runes
-   *
-   * Note: Uses CSS style block for pseudo-element styling instead of Tailwind
-   * after: classes, because Tailwind v4 doesn't generate after: classes from
-   * node_modules when this component is consumed by other apps.
-   */
-
-  /** @type {{
-    checked?: boolean,
-    disabled?: boolean,
-    size?: 'sm' | 'md' | 'lg',
-    class?: string,
-    onchange?: (detail: { checked: boolean }) => void,
-    children?: import('svelte').Snippet,
-  }} */
-  let {
-    checked = $bindable(false),
-    disabled = false,
-    size = 'md',
-    class: className = '',
-    onchange,
-    children,
-    ...restProps
-  } = $props();
-
-  function handleChange(event) {
-    checked = event.target.checked;
-    onchange?.({ checked });
-  }
-</script>
-
-<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}" {...restProps}>
-  <input
-    type="checkbox"
-    bind:checked
-    {disabled}
-    onchange={handleChange}
-    class="sr-only peer"
-  />
-  <div
-    class="toggle-track toggle-{size} relative bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:bg-blue-600"
-    role="switch"
-    aria-checked={checked}
-  ></div>
-  {#if children}
-    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
-      {#if typeof children === 'function'}{@render children()}{:else}{children}{/if}
-    </span>
-  {/if}
-</label>
-
-<style>
-  /*
-   * Toggle track sizes (replaces Tailwind w-* h-* classes)
-   * Using CSS instead of Tailwind because these need to work in consuming apps
-   */
-  .toggle-sm {
-    width: 2.25rem; /* w-9 = 36px */
-    height: 1.25rem; /* h-5 = 20px */
-  }
-  .toggle-md {
-    width: 2.75rem; /* w-11 = 44px */
-    height: 1.5rem; /* h-6 = 24px */
-  }
-  .toggle-lg {
-    width: 3.5rem; /* w-14 = 56px */
-    height: 1.75rem; /* h-7 = 28px */
-  }
-
-  /*
-   * Toggle thumb (the white circle) - uses ::after pseudo-element
-   * Tailwind v4 doesn't generate after: classes from node_modules,
-   * so we use explicit CSS here.
-   */
-  .toggle-track::after {
-    content: '';
-    position: absolute;
-    background-color: white;
-    border: 1px solid #d1d5db; /* gray-300 */
-    border-radius: 9999px;
-    transition: all 150ms;
-  }
-
-  /* Thumb sizes for each toggle size */
-  .toggle-sm::after {
-    width: 1rem; /* 16px */
-    height: 1rem;
-    top: 0.125rem; /* 2px */
-    inset-inline-start: 0.125rem;
-  }
-  .toggle-md::after {
-    width: 1.25rem; /* 20px */
-    height: 1.25rem;
-    top: 0.125rem;
-    inset-inline-start: 0.125rem;
-  }
-  .toggle-lg::after {
-    width: 1.5rem; /* 24px */
-    height: 1.5rem;
-    top: 0.125rem;
-    inset-inline-start: 0.125rem;
-  }
-
-  /* Checked state - move thumb to the right */
-  :global(input.peer:checked) + .toggle-sm::after {
-    transform: translateX(1rem); /* 16px */
-    border-color: white;
-  }
-  :global(input.peer:checked) + .toggle-md::after {
-    transform: translateX(1.25rem); /* 20px */
-    border-color: white;
-  }
-  :global(input.peer:checked) + .toggle-lg::after {
-    transform: translateX(1.5rem); /* 24px */
-    border-color: white;
-  }
-
-  /* RTL support - translate in opposite direction */
-  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-sm::after {
-    transform: translateX(-1rem);
-  }
-  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-md::after {
-    transform: translateX(-1.25rem);
-  }
-  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-lg::after {
-    transform: translateX(-1.5rem);
-  }
-</style>
+<script>
+  /**
+   * Toggle Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   *
+   * Note: Uses CSS style block for pseudo-element styling instead of Tailwind
+   * after: classes, because Tailwind v4 doesn't generate after: classes from
+   * node_modules when this component is consumed by other apps.
+   *
+   * Haptic Feedback:
+   *   - Selection haptic on state change (very light, tactile confirmation)
+   */
+  import { triggerHaptic } from '../utils/haptic.js';
+
+  /** @type {{
+    checked?: boolean,
+    disabled?: boolean,
+    size?: 'sm' | 'md' | 'lg',
+    haptic?: boolean,
+    class?: string,
+    onchange?: (detail: { checked: boolean }) => void,
+    children?: import('svelte').Snippet,
+  }} */
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    haptic = true,
+    class: className = '',
+    onchange,
+    children,
+    ...restProps
+  } = $props();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    // Haptic feedback on toggle change (QOL Bible)
+    if (haptic && !disabled) {
+      triggerHaptic('selection');
+    }
+    onchange?.({ checked });
+  }
+</script>
+
+<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}" {...restProps}>
+  <input
+    type="checkbox"
+    bind:checked
+    {disabled}
+    onchange={handleChange}
+    class="sr-only peer"
+  />
+  <div
+    class="toggle-track toggle-{size} relative bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:bg-blue-600"
+    role="switch"
+    aria-checked={checked}
+  ></div>
+  {#if children}
+    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+      {#if typeof children === 'function'}{@render children()}{:else}{children}{/if}
+    </span>
+  {/if}
+</label>
+
+<style>
+  /*
+   * Toggle track sizes (replaces Tailwind w-* h-* classes)
+   * Using CSS instead of Tailwind because these need to work in consuming apps
+   */
+  .toggle-sm {
+    width: 2.25rem; /* w-9 = 36px */
+    height: 1.25rem; /* h-5 = 20px */
+  }
+  .toggle-md {
+    width: 2.75rem; /* w-11 = 44px */
+    height: 1.5rem; /* h-6 = 24px */
+  }
+  .toggle-lg {
+    width: 3.5rem; /* w-14 = 56px */
+    height: 1.75rem; /* h-7 = 28px */
+  }
+
+  /*
+   * Toggle thumb (the white circle) - uses ::after pseudo-element
+   * Tailwind v4 doesn't generate after: classes from node_modules,
+   * so we use explicit CSS here.
+   */
+  .toggle-track::after {
+    content: '';
+    position: absolute;
+    background-color: white;
+    border: 1px solid #d1d5db; /* gray-300 */
+    border-radius: 9999px;
+    transition: all 150ms;
+  }
+
+  /* Thumb sizes for each toggle size */
+  .toggle-sm::after {
+    width: 1rem; /* 16px */
+    height: 1rem;
+    top: 0.125rem; /* 2px */
+    inset-inline-start: 0.125rem;
+  }
+  .toggle-md::after {
+    width: 1.25rem; /* 20px */
+    height: 1.25rem;
+    top: 0.125rem;
+    inset-inline-start: 0.125rem;
+  }
+  .toggle-lg::after {
+    width: 1.5rem; /* 24px */
+    height: 1.5rem;
+    top: 0.125rem;
+    inset-inline-start: 0.125rem;
+  }
+
+  /* Checked state - move thumb to the right */
+  :global(input.peer:checked) + .toggle-sm::after {
+    transform: translateX(1rem); /* 16px */
+    border-color: white;
+  }
+  :global(input.peer:checked) + .toggle-md::after {
+    transform: translateX(1.25rem); /* 20px */
+    border-color: white;
+  }
+  :global(input.peer:checked) + .toggle-lg::after {
+    transform: translateX(1.5rem); /* 24px */
+    border-color: white;
+  }
+
+  /* RTL support - translate in opposite direction */
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-sm::after {
+    transform: translateX(-1rem);
+  }
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-md::after {
+    transform: translateX(-1.25rem);
+  }
+  :global([dir="rtl"]) :global(input.peer:checked) + .toggle-lg::after {
+    transform: translateX(-1.5rem);
+  }
+</style>

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

@@ -5,6 +5,7 @@ type Toggle = {
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
+        haptic?: boolean | undefined;
         class?: string | undefined;
         onchange?: ((detail: {
             checked: boolean;
@@ -16,6 +17,7 @@ declare const Toggle: import("svelte").Component<{
     checked?: boolean;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
+    haptic?: boolean;
     class?: string;
     onchange?: (detail: {
         checked: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA0DA;cAPc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;YACjB,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,OAAO,QAAQ,EAAE,OAAO;kBAEc"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwEA;cARc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;aAChB,OAAO;YACR,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,OAAO,QAAQ,EAAE,OAAO;kBAEc"}

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -1,83 +1,83 @@
-<script lang="ts">
-  /**
-   * Tooltip Component - Native implementation
-   *
-   * Displays a tooltip on hover/focus with configurable placement
-   */
-  import { fly } from 'svelte/transition';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Tooltip content text */
-    content: string;
-    /** Placement relative to trigger */
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    /** Additional CSS classes for the tooltip */
-    class?: string;
-    /** Child content (trigger element) */
-    children?: Snippet;
-  }
-
-  let {
-    content,
-    placement = 'top',
-    class: className = '',
-    children
-  }: Props = $props();
-
-  let visible = $state(false);
-
-  // Placement-specific classes
-  const placementClasses: Record<string, string> = {
-    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
-    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
-    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-    right: 'left-full top-1/2 -translate-y-1/2 ml-2'
-  };
-
-  // Arrow placement classes
-  const arrowClasses: Record<string, string> = {
-    top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-900 dark:border-t-gray-700 border-l-transparent border-r-transparent border-b-transparent',
-    bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-900 dark:border-b-gray-700 border-l-transparent border-r-transparent border-t-transparent',
-    left: 'left-full top-1/2 -translate-y-1/2 border-l-gray-900 dark:border-l-gray-700 border-t-transparent border-b-transparent border-r-transparent',
-    right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-900 dark:border-r-gray-700 border-t-transparent border-b-transparent border-l-transparent'
-  };
-
-  function handleMouseEnter() {
-    visible = true;
-  }
-
-  function handleMouseLeave() {
-    visible = false;
-  }
-
-  function handleFocus() {
-    visible = true;
-  }
-
-  function handleBlur() {
-    visible = false;
-  }
-</script>
-
-<div
-  class="relative inline-block"
-  onmouseenter={handleMouseEnter}
-  onmouseleave={handleMouseLeave}
-  onfocus={handleFocus}
-  onblur={handleBlur}
-  role="tooltip"
->
-  {#if children}{@render children()}{/if}
-
-  {#if visible && content}
-    <div
-      class="absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow whitespace-nowrap pointer-events-none dark:bg-gray-700 {placementClasses[placement]} {className}"
-      transition:fly={{ y: placement === 'top' ? 5 : placement === 'bottom' ? -5 : 0, x: placement === 'left' ? 5 : placement === 'right' ? -5 : 0, duration: 150 }}
-    >
-      {content}
-      <!-- Arrow -->
-      <div class="absolute w-0 h-0 border-4 {arrowClasses[placement]}"></div>
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  /**
+   * Tooltip Component - Native implementation
+   *
+   * Displays a tooltip on hover/focus with configurable placement
+   */
+  import { fly } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Tooltip content text */
+    content: string;
+    /** Placement relative to trigger */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Additional CSS classes for the tooltip */
+    class?: string;
+    /** Child content (trigger element) */
+    children?: Snippet;
+  }
+
+  let {
+    content,
+    placement = 'top',
+    class: className = '',
+    children
+  }: Props = $props();
+
+  let visible = $state(false);
+
+  // Placement-specific classes
+  const placementClasses: Record<string, string> = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+  };
+
+  // Arrow placement classes
+  const arrowClasses: Record<string, string> = {
+    top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-900 dark:border-t-gray-700 border-l-transparent border-r-transparent border-b-transparent',
+    bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-900 dark:border-b-gray-700 border-l-transparent border-r-transparent border-t-transparent',
+    left: 'left-full top-1/2 -translate-y-1/2 border-l-gray-900 dark:border-l-gray-700 border-t-transparent border-b-transparent border-r-transparent',
+    right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-900 dark:border-r-gray-700 border-t-transparent border-b-transparent border-l-transparent'
+  };
+
+  function handleMouseEnter() {
+    visible = true;
+  }
+
+  function handleMouseLeave() {
+    visible = false;
+  }
+
+  function handleFocus() {
+    visible = true;
+  }
+
+  function handleBlur() {
+    visible = false;
+  }
+</script>
+
+<div
+  class="relative inline-block"
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  role="tooltip"
+>
+  {#if children}{@render children()}{/if}
+
+  {#if visible && content}
+    <div
+      class="absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow whitespace-nowrap pointer-events-none dark:bg-gray-700 {placementClasses[placement]} {className}"
+      transition:fly={{ y: placement === 'top' ? 5 : placement === 'bottom' ? -5 : 0, x: placement === 'left' ? 5 : placement === 'right' ? -5 : 0, duration: 150 }}
+    >
+      {content}
+      <!-- Arrow -->
+      <div class="absolute w-0 h-0 border-4 {arrowClasses[placement]}"></div>
+    </div>
+  {/if}
+</div>