@getmicdrop/svelte-components 5.12.0 → 5.14.0

package/dist/primitives/LandingButton/LandingButton.svelte

@@ -0,0 +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}

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+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;
+}
+declare const LandingButton: import("svelte").Component<Props, {}, "">;
+type LandingButton = ReturnType<typeof LandingButton>;
+export default LandingButton;
+//# sourceMappingURL=LandingButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LandingButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/LandingButton/LandingButton.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA+DH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/primitives/MenuItem/MenuItem.svelte

@@ -0,0 +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>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+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;
+}
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;
+//# sourceMappingURL=MenuItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/MenuItem/MenuItem.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAClC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA2DH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/primitives/Modal/Modal.spec.js

@@ -14,9 +14,9 @@ describe('Modal Component Tests', () => {
   // CSS hides one based on viewport, but in tests both are in DOM
   // Use getAllByText and check that at least one exists
 
-  test('Renders Modal when show is true', () => {
+  test('Renders Modal when open is true', () => {
     setupTest({
-      show: true,
+      open: true,
       title: 'Test Title',
       description: 'Test Description',
       warningText: 'Test Warning'
@@ -29,9 +29,9 @@ describe('Modal Component Tests', () => {
     expect(screen.getAllByRole('button', { name: /Confirm/i }).length).toBeGreaterThan(0);
   });
 
-  test('Does not render Modal when show is false', () => {
+  test('Does not render Modal when open is false', () => {
     setupTest({
-      show: false,
+      open: false,
       title: 'Test Title',
       description: 'Test Description',
       warningText: 'Test Warning'
@@ -46,7 +46,7 @@ describe('Modal Component Tests', () => {
     const description = 'Correct Description';
     const warningText = 'Correct Warning';
     setupTest({
-      show: true,
+      open: true,
       title,
       description,
       warningText,
@@ -62,7 +62,7 @@ describe('Modal Component Tests', () => {
     const oncancel = vi.fn();
 
     const { user } = setupTest({
-      show: true,
+      open: true,
       title: 'Test Title',
       oncancel
     });
@@ -79,7 +79,7 @@ describe('Modal Component Tests', () => {
 
   test('Prevents propagation of click events within modal', async () => {
     const { user } = setupTest({
-      show: true,
+      open: true,
       title: 'Test Title'
     });
 

package/dist/primitives/Modal/Modal.stories.svelte

@@ -22,7 +22,7 @@
   >
     Open Basic Modal
   </button>
-  <ModalProgress bind:show={show1}>
+  <ModalProgress bind:open={show1}>
     {#snippet header()}
       <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
     {/snippet}
@@ -47,7 +47,7 @@
   >
     Open Processing Modal
   </button>
-  <ModalProgress bind:show={show2} isProcessing={true}>
+  <ModalProgress bind:open={show2} isProcessing={true}>
     {#snippet body()}
       <div class="flex flex-col items-center gap-4">
         <div
@@ -66,7 +66,7 @@
   >
     Open Success Modal
   </button>
-  <ModalProgress bind:show={show3} isSuccess={true}>
+  <ModalProgress bind:open={show3} isSuccess={true}>
     {#snippet body()}
       <div class="flex flex-col items-center gap-4 text-center">
         <div class="text-green-600 dark:text-green-400 text-5xl">✓</div>

package/dist/primitives/Modal/Modal.svelte

@@ -13,10 +13,10 @@
   import { triggerHaptic } from "../../utils/haptic.js";
 
   /** @type {{
-    show?: boolean,
+    open?: boolean,
     isProcessing?: boolean,
     isSuccess?: boolean,
-    size?: 'default' | 'small' | 'large' | 'xlarge',
+    size?: 'sm' | 'md' | 'lg' | 'xl',
     persistent?: boolean,
     haptic?: boolean,
     oncancel?: () => void,
@@ -26,10 +26,10 @@
     class?: string,
   }} */
   let {
-    show = $bindable(false),
+    open = $bindable(false),
     isProcessing = false,
     isSuccess = false,
-    size = "default",
+    size = "md",
     persistent = false,
     haptic = true,
     oncancel,
@@ -43,55 +43,61 @@
   // Store scroll position for iOS scroll lock
   let scrollY = $state(0);
 
-  // Track previous show state to detect open transitions
-  let prevShow = $state(false);
+  // Track previous open state to detect open transitions
+  let prevOpen = $state(false);
 
   // Trigger haptic on modal open (QOL Bible)
   $effect(() => {
-    if (show && !prevShow && haptic) {
+    if (open && !prevOpen && haptic) {
       triggerHaptic('light');
     }
-    prevShow = show;
+    prevOpen = open;
   });
 
   // Handle escape key
   function handleKeydown(event) {
-    if (event.key === "Escape" && show && !persistent) {
+    if (event.key === "Escape" && open && !persistent) {
       resetModal();
     }
   }
 
   const resetModal = () => {
     oncancel?.();
-    show = false;
+    open = false;
   };
 
-  // Size classes for desktop modal (Tailwind scale)
+  // Size classes for desktop modal (xs/sm/md/lg/xl scale)
   const sizeClasses = {
-    default: "max-w-md",
-    small: "max-w-sm",
-    large: "max-w-xl",
-    xlarge: "max-w-2xl"
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-xl",
+    xl: "max-w-2xl"
   };
 
-  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.default);
+  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.md);
 
   // iOS-compatible scroll lock using position:fixed approach
+  // Also compensates for scrollbar width to prevent layout shift
   $effect(() => {
     if (typeof document !== "undefined") {
-      if (show) {
+      if (open) {
         scrollY = window.scrollY;
+        // Calculate scrollbar width before hiding it
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
         document.body.style.position = "fixed";
         document.body.style.top = `-${scrollY}px`;
         document.body.style.left = "0";
         document.body.style.right = "0";
         document.body.style.overflow = "hidden";
+        // Add padding to compensate for scrollbar disappearing
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
       } else {
         document.body.style.position = "";
         document.body.style.top = "";
         document.body.style.left = "";
         document.body.style.right = "";
         document.body.style.overflow = "";
+        document.body.style.paddingRight = "";
         window.scrollTo(0, scrollY);
       }
     }
@@ -104,13 +110,14 @@
       document.body.style.left = "";
       document.body.style.right = "";
       document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
     }
   });
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if show}
+{#if open}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div

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

@@ -2,10 +2,10 @@ export default Modal;
 type Modal = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
-        show?: boolean | undefined;
+        open?: boolean | undefined;
         isProcessing?: boolean | undefined;
         isSuccess?: boolean | undefined;
-        size?: "small" | "large" | "default" | "xlarge" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | undefined;
         persistent?: boolean | undefined;
         haptic?: boolean | undefined;
         oncancel?: (() => void) | undefined;
@@ -16,10 +16,10 @@ type Modal = {
     }>): void;
 };
 declare const Modal: import("svelte").Component<{
-    show?: boolean;
+    open?: boolean;
     isProcessing?: boolean;
     isSuccess?: boolean;
-    size?: "default" | "small" | "large" | "xlarge";
+    size?: "sm" | "md" | "lg" | "xl";
     persistent?: boolean;
     haptic?: boolean;
     oncancel?: () => void;
@@ -27,5 +27,5 @@ declare const Modal: import("svelte").Component<{
     body?: import("svelte").Snippet;
     footer?: import("svelte").Snippet;
     class?: string;
-}, {}, "show">;
+}, {}, "open">;
 //# sourceMappingURL=Modal.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsLA;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ;iBAClC,OAAO;aACX,OAAO;eACL,MAAM,IAAI;aACZ,OAAO,QAAQ,EAAE,OAAO;WAC1B,OAAO,QAAQ,EAAE,OAAO;aACtB,OAAO,QAAQ,EAAE,OAAO;YACzB,MAAM;eAEkC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6LA;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;iBACnB,OAAO;aACX,OAAO;eACL,MAAM,IAAI;aACZ,OAAO,QAAQ,EAAE,OAAO;WAC1B,OAAO,QAAQ,EAAE,OAAO;aACtB,OAAO,QAAQ,EAAE,OAAO;YACzB,MAAM;eAEkC"}

package/dist/primitives/Modal/ModalTestWrapper.svelte

@@ -5,7 +5,7 @@
 
   interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -23,7 +23,7 @@
   }
 
   let {
-    show = $bindable(false),
+    open = $bindable(false),
     title = '',
     description = '',
     warningText = '',
@@ -34,7 +34,7 @@
   }: Props = $props();
 </script>
 
-<Modal bind:show {oncancel}>
+<Modal bind:open {oncancel}>
   {#snippet header()}
     {#if customHeader}
       {@render customHeader()}

package/dist/primitives/Modal/ModalTestWrapper.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     /** Whether the modal is visible */
-    show?: boolean;
+    open?: boolean;
     /** Modal title */
     title?: string;
     /** Modal description */
@@ -17,7 +17,7 @@ interface Props {
     /** Custom footer snippet */
     customFooter?: Snippet;
 }
-declare const ModalTestWrapper: import("svelte").Component<Props, {}, "show">;
+declare const ModalTestWrapper: import("svelte").Component<Props, {}, "open">;
 type ModalTestWrapper = ReturnType<typeof ModalTestWrapper>;
 export default ModalTestWrapper;
 //# sourceMappingURL=ModalTestWrapper.svelte.d.ts.map

package/dist/primitives/NavItem/NavItem.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  /**
+   * NavItem Component
+   * Bottom navigation item with vertical layout.
+   *
+   * Replaces: Button variant="nav"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Active/selected state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content (icon + label) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    active = false,
+    disabled = false,
+    href = null,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'flex flex-col items-center justify-center h-full py-2 bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const defaultClasses = 'text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500';
+  const activeClasses = 'text-blue-600 dark:text-blue-500';
+  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (active) return activeClasses;
+    return defaultClasses;
+  });
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    className
+  ));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    {onclick}
+    {...restProps}
+  >
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    {disabled}
+    {onclick}
+    {...restProps}
+  >
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </button>
+{/if}

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Active/selected state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content (icon + label) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const NavItem: import("svelte").Component<Props, {}, "">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;
+//# sourceMappingURL=NavItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/NavItem/NavItem.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgDH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}