@getmicdrop/svelte-components 2.6.4 → 2.8.1

package/dist/components/Button/Button.svelte

@@ -12,9 +12,10 @@
   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
+  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;
@@ -23,7 +24,7 @@
   export let beforeIcon = null;
   export let afterIcon = null;
   export let responsive = false; // Enable lift/press microinteraction
-  export let active = false; // For nav items - shows selected/current page state
+  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)
 
@@ -32,6 +33,22 @@
 
   // Size classes
   $: sizeClass = (() => {
+    // Icon variant uses different sizing
+    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";
+        default:
+          return "p-2 min-h-0"; // Default to sm for icon buttons
+      }
+    }
+
     switch (size) {
       case "full":
         return "w-full";
@@ -70,6 +87,16 @@
     }
   })();
 
+  // Shape classes
+  $: shapeClass = (() => {
+    switch (shape) {
+      case "circle":
+        return "!rounded-full !w-8 !h-8 !min-h-[32px] !p-0";
+      default:
+        return "";
+    }
+  })();
+
   // Variant classes with consistent hover/active states
   $: variantClass = (() => {
     if (success) return "btn-success";
@@ -89,6 +116,10 @@
         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";
     }
@@ -111,6 +142,10 @@
         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";
     }
@@ -131,11 +166,12 @@
     href ? "no-underline hover:no-underline" : "",
     sizeClass,
     minWidthClass,
+    shapeClass,
     variantClass,
     textClass,
     disabledClass,
     responsive && !disabled ? "btn-responsive" : "",
-    active ? "btn-active" : "",
+    active && (variant === "gray-text" || variant === "toggle") ? "btn-active" : "",
     justifyClass,
     className
   );
@@ -248,6 +284,7 @@
     --tw-border-opacity: 1;
     border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
     background-color: transparent;
+    color: #1d4ed8; /* blue-700 for light mode */
 }
   .btn-blue-outline:hover:not(:disabled) {
     --tw-bg-opacity: 1;
@@ -436,6 +473,94 @@
     background-color: #374151;
   }
 
+  /* ============================================
+     ICON VARIANT
+     Minimal icon-only buttons (info, close, delete)
+     ============================================ */
+  .btn-icon {
+    border-color: transparent;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+  .btn-icon:hover:not(:disabled) {
+    background-color: hsl(var(--BG-Tertiary));
+}
+  .btn-icon:active:not(:disabled) {
+    background-color: hsl(var(--BG-Quaternary));
+}
+
+  /* Dark mode overrides for icon button */
+  :global(.dark) .btn-icon,
+  :global(.performer-portal.dark) .btn-icon {
+    background-color: transparent;
+  }
+  :global(.dark) .btn-icon:hover,
+  :global(.performer-portal.dark) .btn-icon:hover {
+    background-color: #1f2937;
+  }
+  :global(.dark) .btn-icon:active,
+  :global(.performer-portal.dark) .btn-icon:active {
+    background-color: #374151;
+  }
+
+  /* ============================================
+     TOGGLE VARIANT
+     For toggle pills (day-of-week selectors, etc.)
+     ============================================ */
+  .btn-toggle {
+    border-width: 1px;
+    border-color: hsl(var(--sidebar-border));
+    background-color: hsl(var(--BG-Tertiary));
+    color: hsl(var(--Text-Secondary));
+}
+  .btn-toggle:hover:not(:disabled) {
+    background-color: hsl(var(--BG-Quaternary));
+}
+  .btn-toggle:active:not(:disabled) {
+    background-color: hsl(var(--BG-Quaternary));
+}
+
+  /* Active state for toggle buttons */
+  .btn-toggle.btn-active {
+    --tw-border-opacity: 1;
+    border-color: rgb(2 132 254 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(2 132 254 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+  .btn-toggle.btn-active:hover:not(:disabled) {
+    --tw-border-opacity: 1;
+    border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
+}
+
+  /* Dark mode overrides for toggle button */
+  :global(.dark) .btn-toggle,
+  :global(.performer-portal.dark) .btn-toggle {
+    background-color: #1f2937;
+    color: #9ca3af;
+    border-color: #374151;
+  }
+  :global(.dark) .btn-toggle:hover,
+  :global(.performer-portal.dark) .btn-toggle:hover {
+    background-color: #374151;
+  }
+  :global(.dark) .btn-toggle.btn-active,
+  :global(.performer-portal.dark) .btn-toggle.btn-active {
+    background-color: #3b82f6;
+    color: white;
+    border-color: #3b82f6;
+  }
+  :global(.dark) .btn-toggle.btn-active:hover,
+  :global(.performer-portal.dark) .btn-toggle.btn-active:hover {
+    background-color: #2563eb;
+    border-color: #2563eb;
+  }
+
   /* ============================================
      ACTIVE STATE (for nav items)
      Shows selected/current page state
@@ -605,6 +730,14 @@
     display: inline-flex;
     align-items: center;
     gap: 0.375rem; /* 6px - matches gap-1.5 */
+    white-space: nowrap;
+  }
+
+  /* Default icon sizing for SVGs in buttons - !important to override inline Tailwind classes */
+  .btn-content :global(svg) {
+    width: 1rem !important;  /* 16px - w-4 */
+    height: 1rem !important; /* 16px - h-4 */
+    flex-shrink: 0;
   }
 
   @media (min-width: 640px) {

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

@@ -4,6 +4,7 @@ type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     size?: string | undefined;
     className?: string | undefined;
     variant?: string | undefined;
+    shape?: string | undefined;
     success?: boolean | undefined;
     minWidth?: string | undefined;
     disabled?: boolean | undefined;
@@ -34,6 +35,7 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     size?: string | undefined;
     className?: string | undefined;
     variant?: string | undefined;
+    shape?: string | undefined;
     success?: boolean | undefined;
     minWidth?: string | undefined;
     disabled?: boolean | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmNA;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAyR;sCATnP,KAAK,EAAE,KAAK;;;;;6CALL,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":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuPA;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAiS;sCAT3P,KAAK,EAAE,KAAK;;;;;6CALL,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"}