@getmicdrop/svelte-components 5.3.2 → 5.3.3

package/dist/primitives/Button/Button.svelte

@@ -13,6 +13,7 @@
    *   - ghost-red: Destructive text button
    *   - icon: Icon-only button
    *   - toggle: Toggle/pill button
+   *   - nav: Mobile navigation button (column layout with icon + label)
    *
    * Sizes (Flowbite native): xs, sm, md, lg, xl
    */
@@ -30,6 +31,7 @@
     children?: any,
     class?: string,
     onclick?: (e: MouseEvent) => void,
+    buttonRef?: HTMLButtonElement | HTMLAnchorElement | null,
     [key: string]: any
   }} */
   let {
@@ -44,6 +46,7 @@
     children,
     class: className = "",
     onclick,
+    buttonRef = $bindable(null),
     ...restProps
   } = $props();
 
@@ -82,6 +85,14 @@
     lg: "p-3",
   };
 
+  // Nav variant sizes (mobile bottom nav style)
+  const navSizes = {
+    xs: "py-1 text-xs",
+    sm: "py-1.5 text-xs",
+    md: "py-2 text-xs",
+    lg: "py-2.5 text-xs",
+  };
+
   // Variant classes with all states in Tailwind
   // Note: focus:ring-4 is added per-variant to allow icon/link variants to have no ring
   const variantClasses = {
@@ -95,13 +106,15 @@
     link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
     icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
     toggle: "text-gray-500 bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600",
+    nav: "text-gray-400 bg-transparent border-transparent hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300",
     success: "text-white bg-green-600 border border-green-600",
   };
 
-  // Active state classes for ghost and toggle
+  // Active state classes for ghost, toggle, and nav
   const activeClasses = {
     ghost: "text-blue-700 bg-blue-50 dark:text-white dark:bg-gray-900",
     toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700",
+    nav: "text-blue-600 dark:text-blue-500",
   };
 
   // Disabled classes
@@ -110,6 +123,8 @@
   let sizeClass = $derived(
     resolvedVariant === "icon"
       ? (iconSizes[size] || iconSizes.sm)
+      : resolvedVariant === "nav"
+      ? (navSizes[size] || navSizes.md)
       : resolvedVariant === "link"
       ? "text-sm"
       : (sizeClasses[size] || sizeClasses.md)
@@ -118,16 +133,21 @@
   let variantClass = $derived((() => {
     if (success) return variantClasses.success;
     if (disabled && !loading && !success) return disabledClasses;
-    if (active && (resolvedVariant === "ghost" || resolvedVariant === "toggle")) {
+    if (active && (resolvedVariant === "ghost" || resolvedVariant === "toggle" || resolvedVariant === "nav")) {
       return activeClasses[resolvedVariant];
     }
     return variantClasses[resolvedVariant] || variantClasses.default;
   })());
 
+  // Nav variant uses column layout, others use row
+  let flexDirection = $derived(resolvedVariant === "nav" ? "flex-col" : "");
+  let roundedClass = $derived(resolvedVariant === "nav" ? "" : "rounded-lg");
+
   let buttonClasses = $derived([
     "relative",
     "inline-flex items-center justify-center",
-    "rounded-lg",
+    flexDirection,
+    roundedClass,
     "font-medium leading-none",
     "focus:outline-none",
     "transition-colors duration-150",
@@ -141,6 +161,7 @@
 
 {#if href}
   <a
+    bind:this={buttonRef}
     {href}
     class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
     {onclick}
@@ -155,6 +176,7 @@
   </a>
 {:else}
   <button
+    bind:this={buttonRef}
     class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
     disabled={effectiveDisabled}
     {onclick}

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

@@ -14,6 +14,7 @@ type Button = {
         children?: any;
         class?: string | undefined;
         onclick?: ((e: MouseEvent) => void) | undefined;
+        buttonRef?: HTMLButtonElement | HTMLAnchorElement | null | undefined;
     }>): void;
 };
 declare const Button: import("svelte").Component<{
@@ -29,5 +30,6 @@ declare const Button: import("svelte").Component<{
     children?: any;
     class?: string;
     onclick?: (e: MouseEvent) => void;
-}, {}, "">;
+    buttonRef?: HTMLButtonElement | HTMLAnchorElement | null;
+}, {}, "buttonRef">;
 //# sourceMappingURL=Button.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8LA;;cAbc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;eACT,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAmNA;;cAdc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;eACT,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;gBACrB,iBAAiB,GAAG,iBAAiB,GAAG,IAAI;oBAGP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",