@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -0,0 +1,78 @@
+<script>
+  /**
+   * AccordionItem Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   open: boolean - Start expanded
+   *   border: boolean - Show bottom border (Flowbite API)
+   *   borderOpenClass: string - Additional classes when open
+   */
+  import { getContext, onMount } from "svelte";
+  import { slide } from "svelte/transition";
+  import { ChevronUpOutline } from "../Icons";
+
+  /** @type {boolean} Whether this item starts open */
+  export let open = false;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+  /** @type {boolean} Whether to show border (flowbite API compatibility) */
+  export let border = true;
+  /** @type {string} CSS classes to apply when item is open (flowbite API compatibility) */
+  export let borderOpenClass = "";
+
+  const { openItems, toggle, flush } = getContext("accordion");
+
+  // Generate unique ID for this item
+  let id = Math.random().toString(36).substring(2, 9);
+
+  onMount(() => {
+    if (open) {
+      toggle(id);
+    }
+  });
+
+  $: isOpen = $openItems.has(id);
+
+  function handleClick() {
+    toggle(id);
+  }
+
+  // Flowbite-native header classes
+  $: headerClasses = [
+    "flex items-center justify-between w-full p-5 font-medium text-left",
+    "text-gray-500 dark:text-gray-400",
+    "bg-gray-100 dark:bg-gray-800",
+    "hover:bg-gray-200 dark:hover:bg-gray-700",
+    "focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
+    "gap-3",
+    isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
+  ].join(" ");
+</script>
+
+<div class="{className} {isOpen && borderOpenClass ? borderOpenClass : ''}">
+  <h2>
+    <button
+      type="button"
+      class={headerClasses}
+      aria-expanded={isOpen}
+      on:click={handleClick}
+    >
+      <span class="text-gray-900 dark:text-white">
+        <slot name="header">Accordion Item</slot>
+      </span>
+      <!-- Flowbite arrow icon -->
+      <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" aria-hidden="true" />
+    </button>
+  </h2>
+
+  {#if isOpen}
+    <div transition:slide={{ duration: 200 }}>
+      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'} dark:bg-gray-900">
+        <p class="text-gray-500 dark:text-gray-400">
+          <slot />
+        </p>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsGA;;;;;;;;;;;;;eAA4K;sCATtI,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/primitives/Alert/Alert.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Alert/Alert.spec.js"],"names":[],"mappings":""}

package/dist/primitives/Alert/Alert.svelte

@@ -0,0 +1,55 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+    import { InfoCircleOutline, CloseOutline } from "../Icons";
+
+    /** @type {string} Alert title */
+    export let title = "";
+    /** @type {string} Alert message */
+    export let message = "";
+    /** @type {'info' | 'success' | 'warning' | 'danger'} Alert type */
+    export let type = "info";
+    /** @type {(() => void) | undefined} Close handler - when provided, shows dismiss button */
+    export let onClose = undefined;
+
+    const dispatch = createEventDispatcher();
+
+    // Flowbite color classes by type
+    const colorClasses = {
+        info: "text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400",
+        success: "text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400",
+        warning: "text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300",
+        danger: "text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400",
+    };
+
+    $: alertClasses = colorClasses[type] || colorClasses.info;
+
+    function handleClose() {
+        if (onClose) onClose();
+        dispatch("close");
+    }
+</script>
+
+<div class="flex items-center p-4 mb-4 text-sm rounded-lg {alertClasses}" role="alert">
+    <InfoCircleOutline class="shrink-0 w-4 h-4 me-3" aria-hidden="true" />
+    <span class="sr-only">{type}</span>
+    <div class="flex-1">
+        {#if title}
+            <span class="font-medium">{title}</span>
+        {/if}
+        {#if message}
+            <span class:mt-1={title}>{message}</span>
+        {/if}
+        <slot />
+    </div>
+    {#if onClose}
+        <button
+            type="button"
+            class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8 {type === 'info' ? 'bg-blue-50 text-blue-500 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700' : ''}{type === 'success' ? 'bg-green-50 text-green-500 hover:bg-green-200 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700' : ''}{type === 'warning' ? 'bg-yellow-50 text-yellow-500 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700' : ''}{type === 'danger' ? 'bg-red-50 text-red-500 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700' : ''}"
+            aria-label="Close"
+            on:click={handleClose}
+        >
+            <span class="sr-only">Close</span>
+            <CloseOutline class="w-3 h-3" aria-hidden="true" />
+        </button>
+    {/if}
+</div>

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

@@ -0,0 +1,50 @@
+export default Alert;
+type Alert = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string | undefined;
+    message?: string | undefined;
+    type?: "info" | "success" | "warning" | "danger" | undefined;
+    onClose?: (() => void) | undefined;
+}, {
+    default: {};
+}>, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Alert: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string | undefined;
+    message?: string | undefined;
+    type?: "info" | "success" | "warning" | "danger" | undefined;
+    onClose?: (() => void) | undefined;
+}, {
+    default: {};
+}>, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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;
+}
+//# sourceMappingURL=Alert.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Alert/Alert.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6EA;;;;cAfW,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;eAe0H;sCATvH,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/primitives/Avatar/Avatar.svelte

@@ -0,0 +1,56 @@
+<script>
+  /**
+   * Avatar Component - Flowbite-style native implementation
+   *
+   * Displays a user avatar image with optional fallback initials
+   */
+
+  /** @type {string} Image source URL */
+  export let src = "";
+  /** @type {string} Alt text for the image */
+  export let alt = "";
+  /** @type {boolean} Whether to use rounded (circle) shape */
+  export let rounded = false;
+  /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'} Size variant */
+  export let size = "md";
+  /** @type {string} Fallback initials when no image */
+  export let initials = "";
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  // Size classes
+  const sizeClasses = {
+    xs: "w-6 h-6 text-xs",
+    sm: "w-8 h-8 text-xs",
+    md: "w-10 h-10 text-sm",
+    lg: "w-14 h-14 text-base",
+    xl: "w-20 h-20 text-lg"
+  };
+
+  $: sizeClass = sizeClasses[size] || sizeClasses.md;
+  $: roundedClass = rounded ? "rounded-full" : "rounded";
+</script>
+
+{#if src}
+  <img
+    {src}
+    {alt}
+    class="object-cover {sizeClass} {roundedClass} {className}"
+  />
+{:else if initials}
+  <div
+    class="flex items-center justify-center font-medium text-gray-600 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 {sizeClass} {roundedClass} {className}"
+  >
+    {initials}
+  </div>
+{:else}
+  <!-- Default placeholder -->
+  <div
+    class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 {sizeClass} {roundedClass} {className}"
+  >
+    <svg class="w-1/2 h-1/2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+    </svg>
+  </div>
+{/if}

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

@@ -0,0 +1,37 @@
+export default Avatar;
+type Avatar = SvelteComponent<{
+    class?: string | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    rounded?: boolean | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+    initials?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    rounded?: boolean | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+    initials?: string | undefined;
+}, {
+    [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;
+}
+//# sourceMappingURL=Avatar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Avatar/Avatar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAqEA;;;;;;;;;mBAAqK;6CATxH,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/primitives/Badges/Badge.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Badges/Badge.spec.js"],"names":[],"mappings":""}

package/dist/primitives/Badges/Badge.stories.svelte

@@ -0,0 +1,86 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  
+  import Badge from "./Badge.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Badge",
+    component: Badge,
+    argTypes: {
+      size: { control: "select", options: ["small", "medium", "large"] },
+      variant: {
+        control: "select",
+        options: [
+          "host",
+          "headliner",
+          "feature",
+          "special-guest",
+          "opener",
+          "guest",
+          "teacher",
+          "assistant",
+          "success",
+          "warning",
+          "error",
+          "info",
+          "neutral",
+        ],
+      },
+      className: { control: "text" },
+    },
+  });
+
+</script>
+
+
+<!-- Size Variants -->
+<Story name="Small Badge">
+  <Badge size="small" variant="info">Small</Badge>
+</Story>
+
+<Story name="Medium Badge">
+  <Badge size="medium" variant="info">Medium</Badge>
+</Story>
+
+<Story name="Large Badge">
+  <Badge size="large" variant="info">Large</Badge>
+</Story>
+
+<!-- Status Variants -->
+<Story name="Success Status">
+  <Badge size="large" variant="success">Feb 1, 2024</Badge>
+</Story>
+
+<Story name="Warning Status">
+  <Badge size="large" variant="warning">Pending</Badge>
+</Story>
+
+<Story name="Error Status">
+  <Badge size="large" variant="error">Declined</Badge>
+</Story>
+
+<!-- Role Variants -->
+<Story name="Role Variants">
+  <div class="flex gap-2 flex-wrap">
+    <Badge variant="host">Host</Badge>
+    <Badge variant="headliner">Headliner</Badge>
+    <Badge variant="feature">Feature</Badge>
+    <Badge variant="special-guest">Special Guest</Badge>
+    <Badge variant="opener">Opener</Badge>
+    <Badge variant="guest">Guest</Badge>
+    <Badge variant="teacher">Teacher</Badge>
+    <Badge variant="assistant">Assistant</Badge>
+  </div>
+</Story>
+
+<!-- All Status Variants -->
+<Story name="All Status Variants">
+  <div class="flex gap-2 flex-wrap">
+    <Badge variant="success">Success</Badge>
+    <Badge variant="warning">Warning</Badge>
+    <Badge variant="error">Error</Badge>
+    <Badge variant="info">Info</Badge>
+    <Badge variant="neutral">Neutral</Badge>
+  </div>
+</Story>

package/dist/primitives/Badges/Badge.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Badge;
+type Badge = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Badge: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Badge from "./Badge.svelte";
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Badge.stories.svelte.d.ts.map

package/dist/primitives/Badges/Badge.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Badges/Badge.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAoGA;;;;mBAAiH;kBA9F7F,gBAAgB;6CAqFS,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;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;IACtG,eAAe,QAAQ,CAAC"}

package/dist/primitives/Badges/Badge.svelte

@@ -0,0 +1,175 @@
+<script>
+  /**
+   * Badge Component - Flowbite Native (Pure Tailwind)
+   *
+   * NO DOMAIN LOGIC - This is a pure visual primitive.
+   *
+   * Semantic variants: neutral, success, warning, error, info
+   * Color variants: red, blue, purple, green, orange, yellow, gray, pink, indigo, cyan
+   * Sizes: xs, sm, md (default), lg
+   * Shapes: rounded (default), pill
+   *
+   * For domain-specific badges (roles, statuses), apps should:
+   * 1. Use color variants: <Badge variant="purple">Headliner</Badge>
+   * 2. Or use bgColor/textColor props with centralized constants
+   */
+  import { createEventDispatcher } from "svelte";
+  import { classNames } from "./../../utils/utils.js";
+
+  const dispatch = createEventDispatcher();
+
+  /** @type {"xs"|"sm"|"md"|"lg"} Size variant */
+  export let size = "md";
+  export let className = "";
+  /** @type {string} Semantic or color variant */
+  export let variant = "neutral";
+  /** @type {string|null} Custom text color (hex) - overrides variant */
+  export let textColor = null;
+  /** @type {string|null} Custom background color (hex or rgba) - overrides variant */
+  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 - default or full pill */
+  export let shape = "rounded";
+  /** @type {boolean} Large size (Flowbite API compatibility) */
+  export let large = false;
+
+  // Legacy size name mapping
+  const sizeMap = { "small": "sm", "medium": "md", "large": "lg" };
+  $: resolvedSize = large ? "lg" : (sizeMap[size] || size);
+
+  // Flowbite-native size classes
+  $: sizeClasses = (() => {
+    switch (resolvedSize) {
+      case "xs":
+        return "text-xs px-1.5 py-0.5 font-medium";
+      case "sm":
+        return "text-xs px-2 py-0.5 font-medium";
+      case "md":
+        return "text-xs px-2.5 py-0.5 font-medium";
+      case "lg":
+        return "text-sm px-3 py-0.5 font-medium";
+      default:
+        return "text-xs px-2.5 py-0.5 font-medium";
+    }
+  })();
+
+  // Shape classes using Tailwind
+  $: shapeClasses = (() => {
+    if (pill) return "rounded-full min-w-5 h-5 px-1.5 justify-center";
+    return shape === "pill" ? "rounded-full" : "rounded";
+  })();
+
+  // Normalize variant to lowercase
+  $: normalizedVariant = String(variant).toLowerCase();
+
+  // Flowbite-native color classes for each variant
+  // Pure visual - NO domain logic
+  $: variantClasses = (() => {
+    switch (normalizedVariant) {
+      // === Semantic variants ===
+      case "success":
+        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
+      case "warning":
+        return "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300";
+      case "error":
+      case "danger":
+        return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
+      case "info":
+        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
+
+      // === Flowbite color variants ===
+      // Use these for domain-specific badges (roles, entities, etc.)
+      case "red":
+        return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
+      case "blue":
+        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
+      case "purple":
+        return "text-purple-800 bg-purple-100 dark:bg-purple-900 dark:text-purple-300";
+      case "green":
+        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
+      case "orange":
+        return "text-orange-800 bg-orange-100 dark:bg-orange-900 dark:text-orange-300";
+      case "yellow":
+        return "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300";
+      case "gray":
+        return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
+      case "pink":
+        return "text-pink-800 bg-pink-100 dark:bg-pink-900 dark:text-pink-300";
+      case "indigo":
+        return "text-indigo-800 bg-indigo-100 dark:bg-indigo-900 dark:text-indigo-300";
+      case "cyan":
+        return "text-cyan-800 bg-cyan-100 dark:bg-cyan-900 dark:text-cyan-300";
+
+      // === Special variants ===
+      case "notification":
+        return "text-white bg-red-500 dark:bg-red-600";
+
+      // === Neutral / default ===
+      case "neutral":
+      default:
+        return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
+    }
+  })();
+
+  // Custom style for text/bg color overrides
+  $: customStyle = (() => {
+    const styles = [];
+    if (textColor) styles.push(`color: ${textColor}`);
+    if (bgColor) styles.push(`background-color: ${bgColor}`);
+    return styles.length > 0 ? styles.join("; ") : null;
+  })();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class={classNames(
+    "inline-flex items-center gap-1.5",
+    sizeClasses,
+    variantClasses,
+    shapeClasses,
+    className
+  )}
+  style={customStyle}
+  on:click={(e) => dispatch("click", e)}
+>
+  {#if showDot}
+    <span class="w-1.5 h-1.5 rounded-full bg-current flex-shrink-0"></span>
+  {/if}
+  <slot name="leftIcon" />
+  <slot />
+</div>
+
+<!--
+  Badge Component - Flowbite Native (Pure Tailwind)
+
+  This is a PRIMITIVE - no domain logic. For domain-specific badges:
+  - Use color variants: <Badge variant="purple">Headliner</Badge>
+  - Or use bgColor prop: <Badge bgColor="#8B5CF6">Custom</Badge>
+
+  Usage:
+    <Badge variant="success">Active</Badge>
+    <Badge variant="purple">Headliner</Badge>
+    <Badge large>Large Badge</Badge>
+
+  With icon:
+    <Badge variant="success"><CheckIcon slot="leftIcon" />Verified</Badge>
+
+  With status dot:
+    <Badge variant="success" showDot>On Sale</Badge>
+
+  Props:
+    Semantic: neutral | success | warning | error | info
+    Colors:   red | blue | purple | green | orange | yellow | gray | pink | indigo | cyan
+    Special:  notification (solid red for count pills)
+    size:     xs | sm | md | lg (or legacy: small | medium | large)
+    large:    boolean (Flowbite API compatibility)
+    shape:    rounded | pill
+    pill:     boolean (notification count style)
+    showDot:  boolean (status indicator dot)
+    textColor: string (override variant text color)
+    bgColor:  string (override variant background color)
+-->

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

@@ -0,0 +1,64 @@
+export default Badge;
+type Badge = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    className?: string | undefined;
+    pill?: boolean | undefined;
+    variant?: string | undefined;
+    textColor?: string | null | undefined;
+    bgColor?: string | null | undefined;
+    showDot?: boolean | undefined;
+    shape?: "rounded" | "pill" | undefined;
+    large?: boolean | undefined;
+}, {
+    leftIcon: {};
+    default: {};
+}>, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    leftIcon: {};
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+    className?: string | undefined;
+    pill?: boolean | undefined;
+    variant?: string | undefined;
+    textColor?: string | null | undefined;
+    bgColor?: string | null | undefined;
+    showDot?: boolean | undefined;
+    shape?: "rounded" | "pill" | undefined;
+    large?: boolean | undefined;
+}, {
+    leftIcon: {};
+    default: {};
+}>, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    leftIcon: {};
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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;
+}
+//# sourceMappingURL=Badge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8KA;;;;;;;;;;;;;;;;;;;;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/primitives/BottomSheet/BottomSheet.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.spec.js"],"names":[],"mappings":""}