@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/primitives/LandingButton/LandingButton.svelte

@@ -1,92 +1,92 @@
-<script lang="ts">
-  /**
-   * LandingButton Component
-   * Hero/landing page CTA buttons with shadow and prominent styling.
-   *
-   * Replaces: Button variant="landing" and variant="landing-secondary"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import { buttonSizes } from '../../tokens/sizing.js';
-
-  interface Props {
-    /** Visual style: primary (blue) or secondary (outline) */
-    variant?: 'primary' | 'secondary';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Loading state */
-    loading?: boolean;
-    /** Link href (renders as <a> if provided) */
-    href?: string | null;
-    /** Content */
-    children?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    variant = 'primary',
-    disabled = false,
-    loading = false,
-    href = null,
-    children,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  let effectiveDisabled = $derived(disabled || loading);
-
-  const baseClasses = 'inline-flex items-center justify-center rounded-xl font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none no-underline hover:no-underline shadow hover:shadow-md';
-
-  const variantClasses = {
-    primary: 'text-white bg-blue-600 border border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700',
-    secondary: 'text-gray-700 bg-white border border-gray-200 hover:border-gray-400 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-100',
-  };
-
-  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed shadow-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
-
-  // Landing size from tokens
-  let sizeClass = $derived(buttonSizes.landing);
-
-  let variantClass = $derived(() => {
-    if (effectiveDisabled) return disabledClasses;
-    return variantClasses[variant] || variantClasses.primary;
-  });
-
-  let classes = $derived(twMerge(
-    baseClasses,
-    sizeClass,
-    variantClass(),
-    effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
-    className
-  ));
-</script>
-
-{#if href}
-  <a
-    {href}
-    class={classes}
-    {onclick}
-    {...restProps}
-  >
-    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </span>
-  </a>
-{:else}
-  <button
-    type="button"
-    class={classes}
-    disabled={effectiveDisabled}
-    {onclick}
-    {...restProps}
-  >
-    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </span>
-  </button>
-{/if}
+<script lang="ts">
+  /**
+   * LandingButton Component
+   * Hero/landing page CTA buttons with shadow and prominent styling.
+   *
+   * Replaces: Button variant="landing" and variant="landing-secondary"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Visual style: primary (blue) or secondary (outline) */
+    variant?: 'primary' | 'secondary';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'primary',
+    disabled = false,
+    loading = false,
+    href = null,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  let effectiveDisabled = $derived(disabled || loading);
+
+  const baseClasses = 'inline-flex items-center justify-center rounded-xl font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none no-underline hover:no-underline shadow hover:shadow-md';
+
+  const variantClasses = {
+    primary: 'text-white bg-blue-600 border border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700',
+    secondary: 'text-gray-700 bg-white border border-gray-200 hover:border-gray-400 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-100',
+  };
+
+  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed shadow-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
+
+  // Landing size from tokens
+  let sizeClass = $derived(buttonSizes.landing);
+
+  let variantClass = $derived(() => {
+    if (effectiveDisabled) return disabledClasses;
+    return variantClasses[variant] || variantClasses.primary;
+  });
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    sizeClass,
+    variantClass(),
+    effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    {onclick}
+    {...restProps}
+  >
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    disabled={effectiveDisabled}
+    {onclick}
+    {...restProps}
+  >
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+  </button>
+{/if}

package/dist/primitives/MenuItem/MenuItem.svelte

@@ -1,85 +1,85 @@
-<script lang="ts">
-  /**
-   * MenuItem Component
-   * For dropdown menus, action sheets, and sidebar navigation items.
-   *
-   * Replaces: Button variant="menu-item" and variant="menu-item-danger"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
-
-  interface Props {
-    /** Destructive/danger styling (red text) */
-    danger?: boolean;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg' | 'nav';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Active/selected state */
-    active?: boolean;
-    /** Content */
-    children?: Snippet;
-    /** Trailing content (icons, badges) */
-    trailing?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    danger = false,
-    size = 'md',
-    disabled = false,
-    active = false,
-    children,
-    trailing,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  const baseClasses = 'w-full text-left whitespace-nowrap bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
-
-  const variantClasses = {
-    default: 'text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
-    danger: 'text-red-600 hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600',
-  };
-
-  const activeClasses = 'bg-blue-50 dark:bg-gray-700';
-  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
-
-  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
-
-  let variantClass = $derived(() => {
-    if (disabled) return disabledClasses;
-    if (active) return `${variantClasses[danger ? 'danger' : 'default']} ${activeClasses}`;
-    return variantClasses[danger ? 'danger' : 'default'];
-  });
-
-  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
-
-  let classes = $derived(twMerge(
-    baseClasses,
-    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
-    sizeClass,
-    variantClass(),
-    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
-    className
-  ));
-</script>
-
-<button
-  type="button"
-  class={classes}
-  {disabled}
-  {onclick}
-  {...restProps}
->
-  <span class="inline-flex items-center gap-1.5">
-    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-  </span>
-  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
-</button>
+<script lang="ts">
+  /**
+   * MenuItem Component
+   * For dropdown menus, action sheets, and sidebar navigation items.
+   *
+   * Replaces: Button variant="menu-item" and variant="menu-item-danger"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Destructive/danger styling (red text) */
+    danger?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'nav';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Active/selected state */
+    active?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    danger = false,
+    size = 'md',
+    disabled = false,
+    active = false,
+    children,
+    trailing,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'w-full text-left whitespace-nowrap bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+
+  const variantClasses = {
+    default: 'text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
+    danger: 'text-red-600 hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600',
+  };
+
+  const activeClasses = 'bg-blue-50 dark:bg-gray-700';
+  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+
+  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (active) return `${variantClasses[danger ? 'danger' : 'default']} ${activeClasses}`;
+    return variantClasses[danger ? 'danger' : 'default'];
+  });
+
+  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
+    sizeClass,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  <span class="inline-flex items-center gap-1.5">
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </span>
+  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+</button>