@getmicdrop/svelte-components 2.8.0 → 3.0.0

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -1,23 +1,29 @@
 <script>
-  import { createEventDispatcher } from "svelte";
   import ArrowRight from "../Icons/ArrowRight.svelte";
   import Home from "../Icons/Home.svelte";
 
-  /** @type {Array<{name: string, href: string}>} */
-  export let data = [];
-  /** @type {string} Additional CSS classes */
-  export let className = "";
-  /** @type {boolean} Show built-in home icon for first item */
-  export let showHomeIcon = true;
-  /** @type {string} Page title displayed below breadcrumb */
-  export let title = "";
-  /** @type {string} Subtitle displayed below title */
-  export let subtitle = "";
+  /**
+   * @typedef {Object} Props
+   * @property {Array<{name: string, href: string}>} [data] - Breadcrumb items
+   * @property {string} [className] - Additional CSS classes
+   * @property {boolean} [showHomeIcon] - Show built-in home icon for first item
+   * @property {string} [title] - Page title displayed below breadcrumb
+   * @property {string} [subtitle] - Subtitle displayed below title
+   * @property {Function} [onclick] - Click handler for breadcrumb items
+   */
 
-  const dispatch = createEventDispatcher();
+  /** @type {Props} */
+  let {
+    data = [],
+    className = "",
+    showHomeIcon = true,
+    title = "",
+    subtitle = "",
+    onclick
+  } = $props();
 
   function handleClick(crumb) {
-    dispatch("click", crumb);
+    onclick?.(crumb);
   }
 </script>
 
@@ -44,15 +50,15 @@
               {crumb.name}
             </span>
           {:else}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
             <span
               class="text-text-secondary no-underline cursor-pointer max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
               title={crumb.name}
             >
               <a
                 href={crumb.href}
-                on:click={() => handleClick(crumb)}
+                onclick={() => handleClick(crumb)}
                 class="hover:no-underline"
               >
                 {crumb.name}

package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,45 +1,64 @@
 export default Breadcrumb;
-type Breadcrumb = SvelteComponent<{
-    title?: string | undefined;
-    className?: string | undefined;
+type Breadcrumb = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Breadcrumb: import("svelte").Component<{
+    /**
+     * - Breadcrumb items
+     */
     data?: {
         name: string;
         href: string;
     }[] | undefined;
+    /**
+     * - Additional CSS classes
+     */
+    className?: string | undefined;
+    /**
+     * - Show built-in home icon for first item
+     */
     showHomeIcon?: boolean | undefined;
-    subtitle?: string | undefined;
-}, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * - Page title displayed below breadcrumb
+     */
     title?: string | undefined;
-    className?: string | undefined;
+    /**
+     * - Subtitle displayed below title
+     */
+    subtitle?: string | undefined;
+    /**
+     * - Click handler for breadcrumb items
+     */
+    onclick?: Function | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * - Breadcrumb items
+     */
     data?: {
         name: string;
         href: string;
     }[] | undefined;
+    /**
+     * - Additional CSS classes
+     */
+    className?: string | undefined;
+    /**
+     * - Show built-in home icon for first item
+     */
     showHomeIcon?: boolean | undefined;
+    /**
+     * - Page title displayed below breadcrumb
+     */
+    title?: string | undefined;
+    /**
+     * - Subtitle displayed below title
+     */
     subtitle?: string | undefined;
-}, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+    /**
+     * - Click handler for breadcrumb items
+     */
+    onclick?: Function | undefined;
+};
 //# sourceMappingURL=Breadcrumb.svelte.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6FA;;;;cAdwB,MAAM;cAAQ,MAAM;;;;;;;;mBAckI;6CATjI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.svelte.js"],"names":[],"mappings":";;;;;AAoFA;;;;;cAxE6B,MAAM;cAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;WAwEQ;;;;;;cAxE5B,MAAM;cAAQ,MAAM"}

package/dist/components/Button/Button.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   /**
    * Button Component with Optional Microinteractions
    *
@@ -9,190 +9,235 @@
    *   Recommended for: Primary actions, CTAs, important interactive buttons
    *   Skip for: Buttons in lists, text buttons, subtle inline actions
    */
-  import { classNames } from "../../utils/utils.js";
-
-  // New clean API
-  export let variant = "blue-solid"; // blue-solid, blue-outline, gray-outline, red-solid, red-outline, red-text, gray-text, icon, toggle
-  export let size = ""; // full, full-md-auto, lg, md, sm, xs, nav, half
-  export let minWidth = ""; // sm (100px), action (150px), modal (130px)
-  export let shape = ""; // circle (for toggle pills)
-  export let disabled = false;
-  export let loading = false;
-  export let success = false;
-  export let successText = ""; // Optional text to show with checkmark when success=true
-  export let className = "";
-  export let beforeIcon = null;
-  export let afterIcon = null;
-  export let responsive = false; // Enable lift/press microinteraction
-  export let active = false; // For nav items and toggle buttons - shows selected/current page state
-  export let href = null; // If provided, renders as <a> instead of <button>
-  export let justify = ""; // between (for list-item style with icon on right)
+  import { classNames } from '../../utils/utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+
+  type Variant = 'blue-solid' | 'blue-outline' | 'gray-outline' | 'red-solid' | 'red-outline' | 'red-text' | 'gray-text' | 'icon' | 'toggle';
+  type Size = '' | 'full' | 'full-md-auto' | 'lg' | 'md' | 'sm' | 'xs' | 'nav' | 'half';
+  type MinWidth = '' | 'sm' | 'action' | 'modal' | 'modal-responsive';
+  type Shape = '' | 'circle';
+  type Justify = '' | 'between';
+
+  interface Props {
+    variant?: Variant;
+    size?: Size;
+    minWidth?: MinWidth;
+    shape?: Shape;
+    disabled?: boolean;
+    loading?: boolean;
+    success?: boolean;
+    successText?: string;
+    className?: string;
+    beforeIcon?: string | null;
+    afterIcon?: string | null;
+    responsive?: boolean;
+    active?: boolean;
+    href?: string | null;
+    justify?: Justify;
+    /** Click event callback */
+    onclick?: (e: MouseEvent) => void;
+    /** Mouseover event callback */
+    onmouseover?: (e: MouseEvent) => void;
+    /** Mouseenter event callback */
+    onmouseenter?: (e: MouseEvent) => void;
+    /** Mouseleave event callback */
+    onmouseleave?: (e: MouseEvent) => void;
+    /** Slot content */
+    children?: Snippet;
+    /** Rest props for additional attributes */
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'blue-solid',
+    size = '',
+    minWidth = '',
+    shape = '',
+    disabled = false,
+    loading = false,
+    success = false,
+    successText = '',
+    className = '',
+    beforeIcon = null,
+    afterIcon = null,
+    responsive = false,
+    active = false,
+    href = null,
+    justify = '',
+    onclick,
+    onmouseover,
+    onmouseenter,
+    onmouseleave,
+    children,
+    ...restProps
+  }: Props = $props();
 
   // Determine effective disabled state (disabled when loading or success)
-  $: effectiveDisabled = disabled || loading || success;
+  let effectiveDisabled = $derived(disabled || loading || success);
 
   // Size classes
-  $: sizeClass = (() => {
+  let sizeClass = $derived((() => {
     // Icon variant uses different sizing
-    if (variant === "icon") {
+    if (variant === 'icon') {
       switch (size) {
-        case "lg":
-          return "p-3 min-h-0";
-        case "md":
-          return "p-2.5 min-h-0";
-        case "sm":
-          return "p-2 min-h-0";
-        case "xs":
-          return "p-1.5 min-h-0";
+        case 'lg':
+          return 'p-3 min-h-0';
+        case 'md':
+          return 'p-2.5 min-h-0';
+        case 'sm':
+          return 'p-2 min-h-0';
+        case 'xs':
+          return 'p-1.5 min-h-0';
         default:
-          return "p-2 min-h-0"; // Default to sm for icon buttons
+          return 'p-2 min-h-0'; // Default to sm for icon buttons
       }
     }
 
     switch (size) {
-      case "full":
-        return "w-full";
-      case "full-md-auto":
-        return "w-full md:w-auto"; // Full on mobile, auto on desktop (use with minWidth)
-      case "half":
-        return "w-[48%] md:w-auto"; // For modal button pairs
-      case "lg":
-        return "px-6 py-3 text-base";
-      case "md":
-        return "px-3 sm:px-4 py-3 sm:py-3.5 text-lg";
-      case "sm":
-        return "px-2.5 sm:px-3 py-1 min-h-[40px] leading-4 rounded-md text-xs";
-      case "xs":
-        return "px-2.5 py-1.5 text-xs rounded";
-      case "nav":
-        return "!min-h-0 !px-3 !py-2.5 w-full !justify-start !text-base";
+      case 'full':
+        return 'w-full';
+      case 'full-md-auto':
+        return 'w-full md:w-auto'; // Full on mobile, auto on desktop (use with minWidth)
+      case 'half':
+        return 'w-[48%] md:w-auto'; // For modal button pairs
+      case 'lg':
+        return 'px-6 py-3 text-base';
+      case 'md':
+        return 'px-3 sm:px-4 py-3 sm:py-3.5 text-lg';
+      case 'sm':
+        return 'px-2.5 sm:px-3 py-1 min-h-[40px] leading-4 rounded-md text-xs';
+      case 'xs':
+        return 'px-2.5 py-1.5 text-xs rounded';
+      case 'nav':
+        return '!min-h-0 !px-3 !py-2.5 w-full !justify-start !text-base';
       default:
-        return "";
+        return '';
     }
-  })();
+  })());
 
   // Min width classes
-  $: minWidthClass = (() => {
+  let minWidthClass = $derived((() => {
     switch (minWidth) {
-      case "sm":
-        return "min-w-[100px]"; // Small inline buttons (Update, Set up)
-      case "action":
-        return "min-w-[150px]"; // Form action buttons (Save, Cancel)
-      case "modal":
-        return "min-w-[130px] md:min-w-[130px]"; // Modal footer buttons
-      case "modal-responsive":
-        return "min-w-[155px] md:min-w-[130px]"; // Modal buttons with mobile sizing
+      case 'sm':
+        return 'min-w-[100px]'; // Small inline buttons (Update, Set up)
+      case 'action':
+        return 'min-w-[150px]'; // Form action buttons (Save, Cancel)
+      case 'modal':
+        return 'min-w-[130px] md:min-w-[130px]'; // Modal footer buttons
+      case 'modal-responsive':
+        return 'min-w-[155px] md:min-w-[130px]'; // Modal buttons with mobile sizing
       default:
-        return "";
+        return '';
     }
-  })();
+  })());
 
   // Shape classes
-  $: shapeClass = (() => {
+  let shapeClass = $derived((() => {
     switch (shape) {
-      case "circle":
-        return "!rounded-full !w-8 !h-8 !min-h-[32px] !p-0";
+      case 'circle':
+        return '!rounded-full !w-8 !h-8 !min-h-[32px] !p-0';
       default:
-        return "";
+        return '';
     }
-  })();
+  })());
 
   // Variant classes with consistent hover/active states
-  $: variantClass = (() => {
-    if (success) return "btn-success";
+  let variantClass = $derived((() => {
+    if (success) return 'btn-success';
 
     switch (variant) {
-      case "blue-solid":
-        return "btn-blue-solid";
-      case "blue-outline":
-        return "btn-blue-outline";
-      case "gray-outline":
-        return "btn-gray-outline";
-      case "red-solid":
-        return "btn-red-solid";
-      case "red-outline":
-        return "btn-red-outline";
-      case "red-text":
-        return "btn-red-text";
-      case "gray-text":
-        return "btn-gray-text";
-      case "icon":
-        return "btn-icon";
-      case "toggle":
-        return "btn-toggle";
+      case 'blue-solid':
+        return 'btn-blue-solid';
+      case 'blue-outline':
+        return 'btn-blue-outline';
+      case 'gray-outline':
+        return 'btn-gray-outline';
+      case 'red-solid':
+        return 'btn-red-solid';
+      case 'red-outline':
+        return 'btn-red-outline';
+      case 'red-text':
+        return 'btn-red-text';
+      case 'gray-text':
+        return 'btn-gray-text';
+      case 'icon':
+        return 'btn-icon';
+      case 'toggle':
+        return 'btn-toggle';
       default:
-        return "btn-blue-solid";
+        return 'btn-blue-solid';
     }
-  })();
+  })());
 
   // Text color class
-  $: textClass = (() => {
-    if (success) return "text-white";
+  let textClass = $derived((() => {
+    if (success) return 'text-white';
 
     switch (variant) {
-      case "blue-solid":
-      case "red-solid":
-        return "text-white";
-      case "blue-outline":
-        return "text-primary-700";
-      case "gray-outline":
-        return "text-gray-800";
-      case "red-outline":
-      case "red-text":
-        return "text-red-600";
-      case "gray-text":
-        return "text-Text-Tartiary";
-      case "icon":
-        return ""; // Icon buttons inherit text color from className or use default gray
-      case "toggle":
-        return ""; // Handled by toggle variant states
+      case 'blue-solid':
+      case 'red-solid':
+        return 'text-white';
+      case 'blue-outline':
+        return 'text-primary-700';
+      case 'gray-outline':
+        return 'text-gray-800';
+      case 'red-outline':
+      case 'red-text':
+        return 'text-red-600';
+      case 'gray-text':
+        return 'text-Text-Tartiary';
+      case 'icon':
+        return ''; // Icon buttons inherit text color from className or use default gray
+      case 'toggle':
+        return ''; // Handled by toggle variant states
       default:
-        return "text-white";
+        return 'text-white';
     }
-  })();
+  })());
 
-  $: disabledClass = disabled && !loading && !success ? "btn-disabled cursor-not-allowed" : "";
+  let disabledClass = $derived(disabled && !loading && !success ? 'btn-disabled cursor-not-allowed' : '');
 
   // Justify class for list-item style buttons
-  $: justifyClass = justify === "between" ? "!justify-between" : "";
-
-  $: buttonClasses = classNames(
-    "cursor-pointer px-2.5 sm:px-3 py-3 min-h-[40px]",
-    "inline-flex items-center justify-center",
-    "rounded-lg",
-    "focus:outline-none focus:ring-0",
-    "font-medium text-sm leading-none",
-    "btn-transition",
-    href ? "no-underline hover:no-underline" : "",
+  let justifyClass = $derived(justify === 'between' ? '!justify-between' : '');
+
+  let buttonClasses = $derived(classNames(
+    'cursor-pointer px-2.5 sm:px-3 py-3 min-h-[40px]',
+    'inline-flex items-center justify-center',
+    'rounded-lg',
+    'focus:outline-none focus:ring-0',
+    'font-medium text-sm leading-none',
+    'btn-transition',
+    href ? 'no-underline hover:no-underline' : '',
     sizeClass,
     minWidthClass,
     shapeClass,
     variantClass,
     textClass,
     disabledClass,
-    responsive && !disabled ? "btn-responsive" : "",
-    active && (variant === "gray-text" || variant === "toggle") ? "btn-active" : "",
+    responsive && !disabled ? 'btn-responsive' : '',
+    active && (variant === 'gray-text' || variant === 'toggle') ? 'btn-active' : '',
     justifyClass,
     className
-  );
+  ));
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 {#if href}
   <a
     {href}
     class={buttonClasses}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    {...$$restProps}
+    onclick={onclick}
+    onmouseover={onmouseover}
+    onmouseenter={onmouseenter}
+    onmouseleave={onmouseleave}
+    {...restProps}
   >
     <span class="btn-inner" class:btn-inner-hidden={loading || success}>
       {#if beforeIcon}
         <img src={beforeIcon} alt="" class="mr-2" />
       {/if}
-      <span class="btn-content"><slot /></span>
+      <span class="btn-content">{#if children}{@render children()}{/if}</span>
       {#if afterIcon}
         <img src={afterIcon} alt="" class="ml-2" />
       {/if}
@@ -202,18 +247,18 @@
   <button
     class={buttonClasses}
     disabled={effectiveDisabled}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    {...$$restProps}
+    onclick={onclick}
+    onmouseover={onmouseover}
+    onmouseenter={onmouseenter}
+    onmouseleave={onmouseleave}
+    {...restProps}
   >
     <!-- Container maintains button width -->
     <span class="btn-inner" class:btn-inner-hidden={loading || success}>
       {#if beforeIcon}
         <img src={beforeIcon} alt="" class="mr-2" />
       {/if}
-      <span class="btn-content"><slot /></span>
+      <span class="btn-content">{#if children}{@render children()}{/if}</span>
       {#if afterIcon}
         <img src={afterIcon} alt="" class="ml-2" />
       {/if}