@getmicdrop/svelte-components 5.19.0 → 5.20.1

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>