@getmicdrop/svelte-components 2.4.0 → 2.6.0

package/dist/components/Badges/Badge.svelte

@@ -14,9 +14,17 @@
   export let textColor = null;
   /** @type {string|null} Custom background color (hex or rgba) */
   export let bgColor = null;
+  /** @type {boolean} Show status dot before text (uses variant color) */
+  export let showDot = false;
+  /** @type {boolean} Pill mode for counts/notifications (circular, minimal padding) */
+  export let pill = false;
+  /** @type {"rounded"|"pill"} Border radius style - rounded-rect or full pill */
+  export let shape = "rounded";
 
   $: sizeClass = (() => {
     switch (size) {
+      case "xs":
+        return "badge-xs";
       case "small":
         return "badge-sm";
       case "medium":
@@ -28,6 +36,8 @@
     }
   })();
 
+  $: shapeClass = pill ? "badge-pill" : (shape === "pill" ? "badge-shape-pill" : "badge-shape-rounded");
+
   // Handle tier numbers (1-5) as variants
   $: normalizedVariant = (() => {
     if (typeof variant === "number" || !isNaN(Number(variant))) {
@@ -73,6 +83,20 @@
         return "badge-error";
       case "info":
         return "badge-info";
+      // Search result type variants
+      case "event":
+        return "badge-event-type";
+      case "venue":
+        return "badge-venue";
+      case "user":
+        return "badge-user";
+      case "order":
+        return "badge-order";
+      case "performer":
+        return "badge-performer";
+      // Notification count
+      case "notification":
+        return "badge-notification";
       // Tier variants (for lineup position badges)
       case "tier-1":
         return "badge-tier-1";
@@ -119,21 +143,32 @@
     sizeClass,
     variantClass,
     eventClass,
+    shapeClass,
     className
   )}
   style={customStyle}
   on:click={(e) => dispatch("click", e)}
 >
+  {#if showDot}
+    <span class="badge-dot"></span>
+  {/if}
+  <slot name="leftIcon" />
   <slot />
 </div>
 
 <!--
   Usage: <Badge variant="host">Host</Badge>
 
+  With icon: <Badge variant="success"><CheckIcon slot="leftIcon" />Verified</Badge>
+  With dot:  <Badge variant="success" showDot>On Sale</Badge>
+
   Role variants: host, headliner, feature, special-guest, opener, guest, teacher, assistant
   Status variants: success, warning, error, info, neutral
   Tier variants: 1, 2, 3, 4, 5 (pass as number or string)
   Event types: event="square" or event="circle"
+  Sizes: xs, small, medium, large
+  Shape: shape="rounded" (default, rounded-rect) or shape="pill" (full pill)
+  Pill mode: pill={true} for notification counts (circular, minimal padding)
   Custom colors: textColor="#hex" bgColor="rgba(...)"
 -->
 
@@ -141,37 +176,95 @@
   /* Base badge styles */
   .badge {
     cursor: pointer;
-    gap: 0.25rem;
+    gap: 0.375rem;
     display: inline-flex;
     align-items: center;
   }
 
+  /* Status dot */
+  .badge-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 9999px;
+    background-color: currentColor;
+    flex-shrink: 0;
+  }
+
   /* Size variants */
+  .badge-xs {
+    padding: 2px 6px;
+    font-size: 10px;
+    line-height: 12px;
+    font-weight: 500;
+  }
+
   .badge-sm {
-    padding-left: 2px;
-    padding-right: 2px;
-    font-size: 7px;
-    line-height: 7px;
-    border-radius: 4px;
+    padding: 2px 8px;
+    font-size: 11px;
+    line-height: 14px;
     font-weight: 500;
   }
 
   .badge-md {
-    padding: 2px 8.5px;
-    font-size: 10px;
-    line-height: 14px;
-    border-radius: 6px;
+    padding: 4px 10px;
+    font-size: 12px;
+    line-height: 16px;
     font-weight: 600;
   }
 
   .badge-lg {
-    padding: 6px 15.5px;
-    font-size: 0.875rem;
-    line-height: 14px;
-    border-radius: 6px;
+    padding: 6px 14px;
+    font-size: 14px;
+    line-height: 18px;
     font-weight: 500;
   }
 
+  /* Shape variants - rounded-rect is default */
+  .badge-shape-rounded {
+    border-radius: 4px;
+  }
+
+  /* Full pill shape */
+  .badge-shape-pill {
+    border-radius: 9999px;
+  }
+
+  /* Pill mode for counts/notifications */
+  .badge-pill {
+    border-radius: 9999px;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    font-size: 11px;
+    line-height: 20px;
+    font-weight: 600;
+    justify-content: center;
+  }
+
+  .badge-pill.badge-xs {
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    font-size: 10px;
+    line-height: 16px;
+  }
+
+  .badge-pill.badge-sm {
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    font-size: 10px;
+    line-height: 18px;
+  }
+
+  .badge-pill.badge-lg {
+    min-width: 24px;
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+    line-height: 24px;
+  }
+
   /* Role variants */
   .badge-host {
     color: #dc2626;
@@ -239,6 +332,38 @@
     background-color: #f9fafb;
   }
 
+  /* Search result type variants */
+  .badge-event-type {
+    color: #1e40af;
+    background-color: #dbeafe;
+  }
+
+  .badge-venue {
+    color: #166534;
+    background-color: #dcfce7;
+  }
+
+  .badge-user {
+    color: #7e22ce;
+    background-color: #f3e8ff;
+  }
+
+  .badge-order {
+    color: #c2410c;
+    background-color: #ffedd5;
+  }
+
+  .badge-performer {
+    color: #be185d;
+    background-color: #fce7f3;
+  }
+
+  /* Notification count variant */
+  .badge-notification {
+    color: #ffffff;
+    background-color: #ef4444;
+  }
+
   /* Tier variants (lineup position badges) - colors match local frontend implementation */
   .badge-tier-1 {
     color: rgba(108, 43, 217, 1);

package/dist/components/Badges/Badge.svelte.d.ts

@@ -1,36 +1,46 @@
 export default Badge;
 type Badge = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    pill?: boolean | undefined;
     size?: string | undefined;
     className?: string | undefined;
     variant?: string | number | undefined;
     event?: string | null | undefined;
     textColor?: string | null | undefined;
     bgColor?: string | null | undefined;
+    showDot?: boolean | undefined;
+    shape?: "rounded" | "pill" | undefined;
 }, {
+    leftIcon: {};
     default: {};
 }>, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    leftIcon: {};
     default: {};
 }> & {
     $$bindings?: string | undefined;
 };
 declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    pill?: boolean | undefined;
     size?: string | undefined;
     className?: string | undefined;
     variant?: string | number | undefined;
     event?: string | null | undefined;
     textColor?: string | null | undefined;
     bgColor?: string | null | undefined;
+    showDot?: boolean | undefined;
+    shape?: "rounded" | "pill" | undefined;
 }, {
+    leftIcon: {};
     default: {};
 }>, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    leftIcon: {};
     default: {};
 }, {}, string>;
 type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {

package/dist/components/Badges/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA2JA;;;;;;;;;;;;;;;eAAqL;sCAT/I,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":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2LA;;;;;;;;;;;;;;;;;;;;eAA8M;sCATxK,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"}

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -65,7 +65,7 @@
   {/if}
 
   {#if title || subtitle}
-    <div class="pl-1 mb-2 md:pl-6 flex flex-col gap-1">
+    <div class="pl-1 mb-4 md:pl-6 flex flex-col gap-1">
       {#if title}
         <h1 class="text-[32px] font-semibold text-text-primary text-start">
           {title}

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
@@ -608,6 +733,13 @@
     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) {
     .btn-content {
       gap: 0.5rem; /* 8px - matches gap-2 on sm+ screens */

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"}

package/dist/components/Card.svelte

@@ -1,9 +1,9 @@
 <script>
-  export let className;
+  export let className = '';
 </script>
 
 <section
-  class={`w-full bg-bg-primary p-3.5 sm:p-4 md:p-5 md:shadow md:rounded-lg ${className}`}
+  class={`w-full bg-bg-primary p-6 shadow rounded-[16px] ${className}`}
 >
   <slot />
 </section>

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

@@ -1,6 +1,6 @@
 export default Card;
 type Card = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    className: any;
+    className?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -11,7 +11,7 @@ type Card = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     $$bindings?: string | undefined;
 };
 declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    className: any;
+    className?: string | undefined;
 }, {
     default: {};
 }>, {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA2BA;;;;;;;;eAAsH;sCAThF,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":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA2BA;;;;;;;;eAAqI;sCAT/F,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"}

package/dist/components/Checkbox/Checkbox.svelte

@@ -9,6 +9,8 @@
   export let name = "";
   /** @type {boolean} Whether the checkbox is disabled */
   export let disabled = false;
+  /** @type {string} Color variant */
+  export let color = "primary";
   /** @type {string} Additional CSS classes */
   let className = "";
   export { className as class };
@@ -19,6 +21,23 @@
     checked = event.target.checked;
     dispatch("change", { checked, value });
   }
+
+  // Color classes matching flowbite-svelte
+  const colorClasses = {
+    primary: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600",
+    red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
+    green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
+    blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
+  };
+
+  $: inputClasses = [
+    "w-4 h-4 rounded",
+    "bg-gray-100 border-gray-300",
+    "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
+    "focus:ring-2",
+    colorClasses[color] || colorClasses.primary,
+    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+  ].join(" ");
 </script>
 
 <label class="checkbox {className}" class:checkbox--disabled={disabled}>
@@ -29,13 +48,13 @@
     {disabled}
     bind:checked
     on:change={handleChange}
-    class="checkbox__input"
+    on:click
+    on:focus
+    on:blur
+    on:keydown
+    on:keyup
+    class={inputClasses}
   />
-  <span class="checkbox__box">
-    <svg class="checkbox__check" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1 5L4.5 8.5L11 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-  </span>
   {#if $$slots.default}
     <span class="checkbox__label">
       <slot />
@@ -46,7 +65,7 @@
 <style>
   .checkbox {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 0.5rem;
     cursor: pointer;
     -webkit-user-select: none;
@@ -56,61 +75,16 @@
 
   .checkbox--disabled {
     cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .checkbox__input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .checkbox__box {
-    flex-shrink: 0;
-    width: 1.125rem;
-    height: 1.125rem;
-    border: 2px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    border-radius: 0.25rem;
-    background-color: hsl(var(--BG-Primary, 0 0% 100%));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.15s ease;
-    margin-top: 0.1875rem; /* Align with text baseline */
-  }
-
-  .checkbox__check {
-    width: 0.75rem;
-    height: 0.75rem;
-    color: white;
-    opacity: 0;
-    transform: scale(0.5);
-    transition: all 0.15s ease;
-  }
-
-  .checkbox__input:checked + .checkbox__box {
-    background-color: hsl(var(--Brand-Primary, 221 83% 53%));
-    border-color: hsl(var(--Brand-Primary, 221 83% 53%));
-  }
-
-  .checkbox__input:checked + .checkbox__box .checkbox__check {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .checkbox__input:focus-visible + .checkbox__box {
-    outline: 2px solid hsl(var(--Brand-Primary, 221 83% 53%));
-    outline-offset: 2px;
-  }
-
-  .checkbox__input:disabled + .checkbox__box {
-    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
   }
 
   .checkbox__label {
-    color: hsl(var(--Text-Primary, 220 13% 13%));
     font-size: 0.875rem;
     line-height: 1.5;
+    color: var(--text-primary, #1f2937);
+  }
+
+  :global(.dark) .checkbox__label,
+  :global(.micdrop.dark) .checkbox__label {
+    color: #f3f4f6;
   }
 </style>