@getmicdrop/svelte-components 5.10.3 → 5.13.0

package/dist/primitives/Radio/Radio.stories.svelte

@@ -1,80 +1,80 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Radio from './Radio.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Radio',
-    component: Radio,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      value: { control: 'text' },
-      disabled: { control: 'boolean' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Radio button for single selection from a group.',
-        },
-      },
-    },
-  });
-
-  let selectedSize = $state('md');
-  let selectedPlan = $state('basic');
-</script>
-
-<Story name="Single">
-  {#snippet template()}
-    <Radio name="single" value="option" label="Single option" />
-  {/snippet}
-</Story>
-
-<Story name="Group">
-  {#snippet template()}
-    <div class="space-y-3">
-      <p class="text-sm font-medium text-gray-700">Select size:</p>
-      <Radio name="size" value="sm" label="Small" bind:group={selectedSize} />
-      <Radio name="size" value="md" label="Medium" bind:group={selectedSize} />
-      <Radio name="size" value="lg" label="Large" bind:group={selectedSize} />
-      <p class="text-xs text-gray-500 mt-2">Selected: {selectedSize}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="space-y-3">
-      <Radio name="disabled-demo" value="1" label="Enabled option" />
-      <Radio name="disabled-demo" value="2" label="Disabled option" disabled />
-      <Radio name="disabled-demo" value="3" label="Disabled checked" disabled checked />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Pricing Plans">
-  {#snippet template()}
-    <div class="space-y-3">
-      <p class="text-sm font-medium text-gray-700">Choose your plan:</p>
-      <div class="space-y-2">
-        <Radio name="plan" value="basic" label="Basic - Free" bind:group={selectedPlan} />
-        <Radio name="plan" value="pro" label="Pro - $29/month" bind:group={selectedPlan} />
-        <Radio name="plan" value="enterprise" label="Enterprise - Contact us" bind:group={selectedPlan} />
-      </div>
-      <p class="text-xs text-gray-500 mt-2">Selected plan: {selectedPlan}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Horizontal Layout">
-  {#snippet template()}
-    <div class="space-y-2">
-      <p class="text-sm font-medium text-gray-700">Payment method:</p>
-      <div class="flex gap-6">
-        <Radio name="payment" value="card" label="Credit Card" />
-        <Radio name="payment" value="paypal" label="PayPal" />
-        <Radio name="payment" value="bank" label="Bank Transfer" />
-      </div>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Radio from './Radio.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Radio',
+    component: Radio,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      value: { control: 'text' },
+      disabled: { control: 'boolean' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Radio button for single selection from a group.',
+        },
+      },
+    },
+  });
+
+  let selectedSize = $state('md');
+  let selectedPlan = $state('basic');
+</script>
+
+<Story name="Single">
+  {#snippet template()}
+    <Radio name="single" value="option" label="Single option" />
+  {/snippet}
+</Story>
+
+<Story name="Group">
+  {#snippet template()}
+    <div class="space-y-3">
+      <p class="text-sm font-medium text-gray-700">Select size:</p>
+      <Radio name="size" value="sm" label="Small" bind:group={selectedSize} />
+      <Radio name="size" value="md" label="Medium" bind:group={selectedSize} />
+      <Radio name="size" value="lg" label="Large" bind:group={selectedSize} />
+      <p class="text-xs text-gray-500 mt-2">Selected: {selectedSize}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="space-y-3">
+      <Radio name="disabled-demo" value="1" label="Enabled option" />
+      <Radio name="disabled-demo" value="2" label="Disabled option" disabled />
+      <Radio name="disabled-demo" value="3" label="Disabled checked" disabled checked />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Pricing Plans">
+  {#snippet template()}
+    <div class="space-y-3">
+      <p class="text-sm font-medium text-gray-700">Choose your plan:</p>
+      <div class="space-y-2">
+        <Radio name="plan" value="basic" label="Basic - Free" bind:group={selectedPlan} />
+        <Radio name="plan" value="pro" label="Pro - $29/month" bind:group={selectedPlan} />
+        <Radio name="plan" value="enterprise" label="Enterprise - Contact us" bind:group={selectedPlan} />
+      </div>
+      <p class="text-xs text-gray-500 mt-2">Selected plan: {selectedPlan}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Horizontal Layout">
+  {#snippet template()}
+    <div class="space-y-2">
+      <p class="text-sm font-medium text-gray-700">Payment method:</p>
+      <div class="flex gap-6">
+        <Radio name="payment" value="card" label="Credit Card" />
+        <Radio name="payment" value="paypal" label="PayPal" />
+        <Radio name="payment" value="bank" label="Bank Transfer" />
+      </div>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Radio/Radio.svelte

@@ -1,67 +1,67 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    value?: string;
-    group?: string;
-    name?: string;
-    disabled?: boolean;
-    checked?: boolean;
-    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
-    class?: string;
-    onchange?: (detail: { value: string }) => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    value = "",
-    group = $bindable(""),
-    name = "",
-    disabled = false,
-    checked = undefined,
-    color = 'blue',
-    class: className = "",
-    onchange,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  let isChecked = $derived(checked !== undefined ? checked : group === value);
-
-  function handleChange() {
-    group = value;
-    onchange?.({ value });
-  }
-
-  const colorClasses = {
-    blue: 'text-blue-600',
-    red: 'text-red-600',
-    green: 'text-green-600',
-    purple: 'text-purple-600',
-    orange: 'text-orange-500',
-    yellow: 'text-yellow-400'
-  };
-
-  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
-</script>
-
-<label
-  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}"
-  {...restProps}
->
-  <input
-    type="radio"
-    {name}
-    {value}
-    {disabled}
-    checked={isChecked}
-    onchange={handleChange}
-    class="w-4 h-4 bg-gray-100 border-gray-300 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 {colorClass}"
-  />
-  {#if children}
-    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
-      {@render children()}
-    </span>
-  {/if}
-</label>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: string;
+    group?: string;
+    name?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: { value: string }) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = "",
+    group = $bindable(""),
+    name = "",
+    disabled = false,
+    checked = undefined,
+    color = 'blue',
+    class: className = "",
+    onchange,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  let isChecked = $derived(checked !== undefined ? checked : group === value);
+
+  function handleChange() {
+    group = value;
+    onchange?.({ value });
+  }
+
+  const colorClasses = {
+    blue: 'text-blue-600',
+    red: 'text-red-600',
+    green: 'text-green-600',
+    purple: 'text-purple-600',
+    orange: 'text-orange-500',
+    yellow: 'text-yellow-400'
+  };
+
+  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
+</script>
+
+<label
+  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}"
+  {...restProps}
+>
+  <input
+    type="radio"
+    {name}
+    {value}
+    {disabled}
+    checked={isChecked}
+    onchange={handleChange}
+    class="w-4 h-4 bg-gray-100 border-gray-300 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 {colorClass}"
+  />
+  {#if children}
+    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
+      {@render children()}
+    </span>
+  {/if}
+</label>

package/dist/primitives/SearchResultItem/SearchResultItem.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  /**
+   * SearchResultItem Component
+   * Search dropdown result item with blue hover.
+   *
+   * Two modes:
+   * - Simple (no type): Blue hover, no border - for basic dropdowns
+   * - Typed (with type): Colored left border by entity type - matches global search styling
+   *
+   * Replaces: Button variant="search-result"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
+
+  /** Entity type for colored border mode */
+  export type SearchResultType = 'event' | 'order' | 'performer' | 'venue' | 'collection' | 'series';
+
+  interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Entity type - when provided, shows colored left border instead of blue hover */
+    type?: SearchResultType;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Selected/highlighted state (alias: isActive) */
+    selected?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    type,
+    disabled = false,
+    selected = false,
+    children,
+    trailing,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  // Border colors by entity type - matches micdrop-frontend SearchResultItem
+  const borderColors: Record<SearchResultType, string> = {
+    event: 'border-l-blue-500',
+    order: 'border-l-yellow-500',
+    performer: 'border-l-pink-500',
+    venue: 'border-l-indigo-500',
+    collection: 'border-l-purple-500',
+    series: 'border-l-blue-500',
+  };
+
+  // Simple mode (no type): rounded with blue hover
+  const simpleBaseClasses = 'w-full text-left rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const simpleDefaultClasses = 'text-gray-900 bg-transparent border-transparent hover:bg-blue-50 focus:bg-blue-50 dark:text-white dark:hover:bg-blue-900/20 dark:focus:bg-blue-900/20';
+  const simpleSelectedClasses = 'text-gray-900 bg-blue-50 dark:text-white dark:bg-blue-900/20';
+
+  // Typed mode (with type): colored left border, gray hover
+  const typedBaseClasses = 'w-full text-left font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none border-l-3';
+  const typedDefaultClasses = 'text-gray-900 bg-transparent hover:bg-gray-50 hover:border-l-4 dark:text-white dark:hover:bg-gray-700';
+  const typedSelectedClasses = 'text-gray-900 bg-primary-100 border-l-primary-600 border-l-4 dark:text-white dark:bg-gray-700';
+
+  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+
+  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
+  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
+  let isTypedMode = $derived(!!type);
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (isTypedMode) {
+      return selected ? typedSelectedClasses : typedDefaultClasses;
+    }
+    return selected ? simpleSelectedClasses : simpleDefaultClasses;
+  });
+
+  let borderClass = $derived(isTypedMode && type ? borderColors[type] : '');
+
+  let classes = $derived(twMerge(
+    isTypedMode ? typedBaseClasses : simpleBaseClasses,
+    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
+    sizeClass,
+    borderClass,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  <span class="inline-flex items-center gap-1.5">
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </span>
+  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+</button>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+/** Entity type for colored border mode */
+export type SearchResultType = 'event' | 'order' | 'performer' | 'venue' | 'collection' | 'series';
+interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Entity type - when provided, shows colored left border instead of blue hover */
+    type?: SearchResultType;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Selected/highlighted state (alias: isActive) */
+    selected?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const SearchResultItem: import("svelte").Component<Props, {}, "">;
+type SearchResultItem = ReturnType<typeof SearchResultItem>;
+export default SearchResultItem;
+//# sourceMappingURL=SearchResultItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResultItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/SearchResultItem/SearchResultItem.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEnG,UAAU,KAAK;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mFAAmF;IACnF,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA6EH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/primitives/SidebarToggle/SidebarToggle.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  /**
+   * SidebarToggle Component
+   * Compact pill button for sidebar expand/collapse.
+   *
+   * Replaces: Button variant="sidebar-toggle"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Expanded state (affects icon direction if using chevron) */
+    expanded?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically a chevron icon) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    expanded = false,
+    disabled = false,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'w-6 h-7 inline-flex items-center justify-center rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const defaultClasses = 'text-gray-900 bg-blue-100 border border-blue-200 hover:bg-blue-200 shadow-lg dark:text-white dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700';
+  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    disabled ? disabledClasses : defaultClasses,
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.95] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  aria-expanded={expanded}
+  {onclick}
+  {...restProps}
+>
+  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+</button>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Expanded state (affects icon direction if using chevron) */
+    expanded?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically a chevron icon) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+}
+declare const SidebarToggle: import("svelte").Component<Props, {}, "">;
+type SidebarToggle = ReturnType<typeof SidebarToggle>;
+export default SidebarToggle;
+//# sourceMappingURL=SidebarToggle.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/SidebarToggle/SidebarToggle.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAkCH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}