@getmicdrop/svelte-components 5.5.5 → 5.6.0

package/dist/patterns/page/PageLoader.stories.svelte

@@ -1,137 +1,137 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import PageLoader from './PageLoader.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/PageLoader',
-    component: PageLoader,
-    tags: ['autodocs'],
-    argTypes: {
-      isLoading: { control: 'boolean' },
-      error: { control: 'text' },
-      loadingMessage: { control: 'text' },
-      errorTitle: { control: 'text' },
-      showRetry: { control: 'boolean' },
-    },
-  });
-</script>
-
-<script>
-  let loading = $state(true);
-  let hasError = $state(false);
-
-  function simulateLoading() {
-    loading = true;
-    hasError = false;
-    setTimeout(() => {
-      loading = false;
-    }, 2000);
-  }
-
-  function simulateError() {
-    loading = true;
-    hasError = false;
-    setTimeout(() => {
-      loading = false;
-      hasError = true;
-    }, 1000);
-  }
-</script>
-
-
-<Story
-  name="Loading State"
-  args={{
-    isLoading: true,
-    error: null,
-  }}
-/>
-
-<Story
-  name="Loading with Message"
-  args={{
-    isLoading: true,
-    error: null,
-    loadingMessage: 'Fetching your data...',
-  }}
-/>
-
-<Story
-  name="Error State"
-  args={{
-    isLoading: false,
-    error: 'Failed to load data. Please try again.',
-    errorTitle: 'Loading Failed',
-  }}
-/>
-
-<Story
-  name="Error with Retry"
-  args={{
-    isLoading: false,
-    error: 'Network connection failed',
-    errorTitle: 'Connection Error',
-    showRetry: true,
-    onRetry: () => alert('Retrying...'),
-  }}
-/>
-
-<Story
-  name="Content Loaded"
-  args={{
-    isLoading: false,
-    error: null,
-  }}
-/>
-
-<Story name="Interactive Loading">
-  <div class="space-y-4">
-    <div class="flex gap-2">
-      <button
-        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-        onclick={simulateLoading}
-      >
-        Simulate Loading
-      </button>
-      <button
-        class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
-        onclick={simulateError}
-      >
-        Simulate Error
-      </button>
-    </div>
-
-    <PageLoader
-      isLoading={loading}
-      error={hasError ? 'Failed to load content' : null}
-      loadingMessage="Please wait..."
-      showRetry={true}
-      onRetry={simulateLoading}
-    >
-      <div class="p-8 bg-green-50 rounded-lg">
-        <h3 class="text-xl font-bold text-green-800">Success!</h3>
-        <p class="text-green-600 mt-2">Your content has loaded successfully.</p>
-      </div>
-    </PageLoader>
-  </div>
-</Story>
-
-<Story name="Different Heights">
-  <div class="space-y-8">
-    <div class="border rounded p-4">
-      <h4 class="font-semibold mb-2">Small (h-32)</h4>
-      <PageLoader isLoading={true} minHeight="h-32" />
-    </div>
-
-    <div class="border rounded p-4">
-      <h4 class="font-semibold mb-2">Medium (h-64 - default)</h4>
-      <PageLoader isLoading={true} />
-    </div>
-
-    <div class="border rounded p-4">
-      <h4 class="font-semibold mb-2">Large (h-96)</h4>
-      <PageLoader isLoading={true} minHeight="h-96" />
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import PageLoader from './PageLoader.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/PageLoader',
+    component: PageLoader,
+    tags: ['autodocs'],
+    argTypes: {
+      isLoading: { control: 'boolean' },
+      error: { control: 'text' },
+      loadingMessage: { control: 'text' },
+      errorTitle: { control: 'text' },
+      showRetry: { control: 'boolean' },
+    },
+  });
+</script>
+
+<script>
+  let loading = $state(true);
+  let hasError = $state(false);
+
+  function simulateLoading() {
+    loading = true;
+    hasError = false;
+    setTimeout(() => {
+      loading = false;
+    }, 2000);
+  }
+
+  function simulateError() {
+    loading = true;
+    hasError = false;
+    setTimeout(() => {
+      loading = false;
+      hasError = true;
+    }, 1000);
+  }
+</script>
+
+
+<Story
+  name="Loading State"
+  args={{
+    isLoading: true,
+    error: null,
+  }}
+/>
+
+<Story
+  name="Loading with Message"
+  args={{
+    isLoading: true,
+    error: null,
+    loadingMessage: 'Fetching your data...',
+  }}
+/>
+
+<Story
+  name="Error State"
+  args={{
+    isLoading: false,
+    error: 'Failed to load data. Please try again.',
+    errorTitle: 'Loading Failed',
+  }}
+/>
+
+<Story
+  name="Error with Retry"
+  args={{
+    isLoading: false,
+    error: 'Network connection failed',
+    errorTitle: 'Connection Error',
+    showRetry: true,
+    onRetry: () => alert('Retrying...'),
+  }}
+/>
+
+<Story
+  name="Content Loaded"
+  args={{
+    isLoading: false,
+    error: null,
+  }}
+/>
+
+<Story name="Interactive Loading">
+  <div class="space-y-4">
+    <div class="flex gap-2">
+      <button
+        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        onclick={simulateLoading}
+      >
+        Simulate Loading
+      </button>
+      <button
+        class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+        onclick={simulateError}
+      >
+        Simulate Error
+      </button>
+    </div>
+
+    <PageLoader
+      isLoading={loading}
+      error={hasError ? 'Failed to load content' : null}
+      loadingMessage="Please wait..."
+      showRetry={true}
+      onRetry={simulateLoading}
+    >
+      <div class="p-8 bg-green-50 rounded-lg">
+        <h3 class="text-xl font-bold text-green-800">Success!</h3>
+        <p class="text-green-600 mt-2">Your content has loaded successfully.</p>
+      </div>
+    </PageLoader>
+  </div>
+</Story>
+
+<Story name="Different Heights">
+  <div class="space-y-8">
+    <div class="border rounded p-4">
+      <h4 class="font-semibold mb-2">Small (h-32)</h4>
+      <PageLoader isLoading={true} minHeight="h-32" />
+    </div>
+
+    <div class="border rounded p-4">
+      <h4 class="font-semibold mb-2">Medium (h-64 - default)</h4>
+      <PageLoader isLoading={true} />
+    </div>
+
+    <div class="border rounded p-4">
+      <h4 class="font-semibold mb-2">Large (h-96)</h4>
+      <PageLoader isLoading={true} minHeight="h-96" />
+    </div>
+  </div>
+</Story>

package/dist/patterns/page/PageLoader.svelte

@@ -27,27 +27,27 @@
     children,
   }: Props = $props();
 </script>
-
-{#if isLoading}
-  <div class="flex items-center justify-center {minHeight}">
-    <div class="text-center">
-      <Spinner />
-      {#if loadingMessage}
-        <p class={`mt-4 ${typography.textMuted}`}>{loadingMessage}</p>
-      {/if}
-    </div>
-  </div>
-{:else if error}
-  <div class="p-4">
-    <Alert type="danger" title={errorTitle} message={error} />
-    {#if showRetry}
-      <div class="mt-4 text-center">
-        <Button variant="link" onclick={onRetry}>
-          Try again
-        </Button>
-      </div>
-    {/if}
-  </div>
-{:else}
-  {@render children?.()}
-{/if}
+
+{#if isLoading}
+  <div class="flex items-center justify-center {minHeight}">
+    <div class="text-center">
+      <Spinner />
+      {#if loadingMessage}
+        <p class={`mt-4 ${typography.textMuted}`}>{loadingMessage}</p>
+      {/if}
+    </div>
+  </div>
+{:else if error}
+  <div class="p-4">
+    <Alert type="danger" title={errorTitle} message={error} />
+    {#if showRetry}
+      <div class="mt-4 text-center">
+        <Button variant="link" onclick={onRetry}>
+          Try again
+        </Button>
+      </div>
+    {/if}
+  </div>
+{:else}
+  {@render children?.()}
+{/if}

package/dist/patterns/page/SectionHeader.svelte

@@ -20,32 +20,32 @@
     actions,
   }: Props = $props();
 </script>
-
-<div class={className}>
-  {#if divider}
-    <hr class="border-gray-200 dark:border-gray-700 mb-4" />
-  {/if}
-
-  <div class="flex items-center justify-between gap-4">
-    <div class="flex items-center gap-2">
-      {#if title}
-        <h2 class={typography.h3}>{title}</h2>
-      {/if}
-      {#if count !== null}
-        <span class={`inline-flex items-center justify-center px-2 py-0.5 ${typography.xsMuted} bg-gray-100 dark:bg-gray-700 rounded-full`}>
-          {count}
-        </span>
-      {/if}
-    </div>
-
-    {#if actions}
-      <div class="flex items-center gap-2">
-        {@render actions()}
-      </div>
-    {/if}
-  </div>
-
-  {#if description}
-    <p class={`mt-1 ${typography.smMuted}`}>{description}</p>
-  {/if}
-</div>
+
+<div class={className}>
+  {#if divider}
+    <hr class="border-gray-200 dark:border-gray-700 mb-4" />
+  {/if}
+
+  <div class="flex items-center justify-between gap-4">
+    <div class="flex items-center gap-2">
+      {#if title}
+        <h2 class={typography.h3}>{title}</h2>
+      {/if}
+      {#if count !== null}
+        <span class={`inline-flex items-center justify-center px-2 py-0.5 ${typography.xsMuted} bg-gray-100 dark:bg-gray-700 rounded-full`}>
+          {count}
+        </span>
+      {/if}
+    </div>
+
+    {#if actions}
+      <div class="flex items-center gap-2">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+
+  {#if description}
+    <p class={`mt-1 ${typography.smMuted}`}>{description}</p>
+  {/if}
+</div>

package/dist/presets/badges.js

@@ -1,112 +1,112 @@
-/**
- * Badge Presets - Domain-to-Color Mappings
- *
- * These presets provide a migration path for apps that were using
- * domain-specific badge variants (host, headliner, etc.).
- *
- * Usage:
- *   import { ROLE_BADGE_VARIANTS, ENTITY_BADGE_VARIANTS } from '@getmicdrop/svelte-components/presets/badges';
- *   <Badge variant={ROLE_BADGE_VARIANTS[role]}>{role}</Badge>
- *
- * Note: For app-specific customization, apps should define their own
- * mappings in their constants files (e.g., $lib/constants/position.ts).
- */
-
-/**
- * Role/Position badge color mappings
- * Maps performer roles to Flowbite color variants
- */
-export const ROLE_BADGE_VARIANTS = {
-  Host: 'red',
-  Headliner: 'purple',
-  Feature: 'blue',
-  'Special Guest': 'green',
-  Opener: 'orange',
-  Guest: 'gray',
-  Teacher: 'yellow',
-  Assistant: 'indigo',
-};
-
-/**
- * Entity type badge color mappings
- * Maps entity types to Flowbite color variants
- */
-export const ENTITY_BADGE_VARIANTS = {
-  event: 'blue',
-  venue: 'green',
-  user: 'purple',
-  order: 'orange',
-  performer: 'pink',
-};
-
-/**
- * Status badge semantic mappings
- * Maps status strings to semantic variants
- */
-export const STATUS_BADGE_VARIANTS = {
-  // Success states
-  Completed: 'success',
-  Active: 'success',
-  Confirmed: 'success',
-  'On Sale': 'success',
-  Live: 'success',
-  Enabled: 'success',
-  Yes: 'success',
-  Redeemed: 'success',
-  Online: 'success',
-
-  // Warning states
-  Pending: 'warning',
-  Scheduled: 'warning',
-  Paused: 'warning',
-  Ended: 'warning',
-  Refunded: 'warning',
-  'Partially refunded': 'warning',
-  Pinned: 'warning',
-  'Usage Limit Reached': 'warning',
-
-  // Error states
-  Cancelled: 'error',
-  Canceled: 'error',
-  Declined: 'error',
-  'No show': 'error',
-  Expired: 'error',
-  'Sales closed': 'error',
-
-  // Info states
-  'In Progress': 'info',
-  Invited: 'info',
-
-  // Neutral states
-  Draft: 'neutral',
-  Offline: 'neutral',
-  Disabled: 'neutral',
-  No: 'neutral',
-};
-
-/**
- * Get badge variant for a role
- * @param {string} role - The role name
- * @returns {string} Flowbite color variant
- */
-export function getRoleBadgeVariant(role) {
-  return ROLE_BADGE_VARIANTS[role] || 'gray';
-}
-
-/**
- * Get badge variant for an entity type
- * @param {string} entityType - The entity type
- * @returns {string} Flowbite color variant
- */
-export function getEntityBadgeVariant(entityType) {
-  return ENTITY_BADGE_VARIANTS[entityType] || 'gray';
-}
-
-/**
- * Get badge variant for a status
- * @param {string} status - The status string
- * @returns {string} Semantic variant
- */
-export function getStatusBadgeVariant(status) {
-  return STATUS_BADGE_VARIANTS[status] || 'neutral';
-}
+/**
+ * Badge Presets - Domain-to-Color Mappings
+ *
+ * These presets provide a migration path for apps that were using
+ * domain-specific badge variants (host, headliner, etc.).
+ *
+ * Usage:
+ *   import { ROLE_BADGE_VARIANTS, ENTITY_BADGE_VARIANTS } from '@getmicdrop/svelte-components/presets/badges';
+ *   <Badge variant={ROLE_BADGE_VARIANTS[role]}>{role}</Badge>
+ *
+ * Note: For app-specific customization, apps should define their own
+ * mappings in their constants files (e.g., $lib/constants/position.ts).
+ */
+
+/**
+ * Role/Position badge color mappings
+ * Maps performer roles to Flowbite color variants
+ */
+export const ROLE_BADGE_VARIANTS = {
+  Host: 'red',
+  Headliner: 'purple',
+  Feature: 'blue',
+  'Special Guest': 'green',
+  Opener: 'orange',
+  Guest: 'gray',
+  Teacher: 'yellow',
+  Assistant: 'indigo',
+};
+
+/**
+ * Entity type badge color mappings
+ * Maps entity types to Flowbite color variants
+ */
+export const ENTITY_BADGE_VARIANTS = {
+  event: 'blue',
+  venue: 'green',
+  user: 'purple',
+  order: 'orange',
+  performer: 'pink',
+};
+
+/**
+ * Status badge semantic mappings
+ * Maps status strings to semantic variants
+ */
+export const STATUS_BADGE_VARIANTS = {
+  // Success states
+  Completed: 'success',
+  Active: 'success',
+  Confirmed: 'success',
+  'On Sale': 'success',
+  Live: 'success',
+  Enabled: 'success',
+  Yes: 'success',
+  Redeemed: 'success',
+  Online: 'success',
+
+  // Warning states
+  Pending: 'warning',
+  Scheduled: 'warning',
+  Paused: 'warning',
+  Ended: 'warning',
+  Refunded: 'warning',
+  'Partially refunded': 'warning',
+  Pinned: 'warning',
+  'Usage Limit Reached': 'warning',
+
+  // Error states
+  Cancelled: 'error',
+  Canceled: 'error',
+  Declined: 'error',
+  'No show': 'error',
+  Expired: 'error',
+  'Sales closed': 'error',
+
+  // Info states
+  'In Progress': 'info',
+  Invited: 'info',
+
+  // Neutral states
+  Draft: 'neutral',
+  Offline: 'neutral',
+  Disabled: 'neutral',
+  No: 'neutral',
+};
+
+/**
+ * Get badge variant for a role
+ * @param {string} role - The role name
+ * @returns {string} Flowbite color variant
+ */
+export function getRoleBadgeVariant(role) {
+  return ROLE_BADGE_VARIANTS[role] || 'gray';
+}
+
+/**
+ * Get badge variant for an entity type
+ * @param {string} entityType - The entity type
+ * @returns {string} Flowbite color variant
+ */
+export function getEntityBadgeVariant(entityType) {
+  return ENTITY_BADGE_VARIANTS[entityType] || 'gray';
+}
+
+/**
+ * Get badge variant for a status
+ * @param {string} status - The status string
+ * @returns {string} Semantic variant
+ */
+export function getStatusBadgeVariant(status) {
+  return STATUS_BADGE_VARIANTS[status] || 'neutral';
+}