@getmicdrop/svelte-components 5.17.4 → 5.19.0

package/dist/patterns/page/PageLoader.svelte

@@ -1,53 +1,62 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Spinner from "../../primitives/Spinner/Spinner.svelte";
-  import Alert from "../../primitives/Alert/Alert.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    isLoading?: boolean;
-    error?: string | null;
-    loadingMessage?: string;
-    errorTitle?: string;
-    showRetry?: boolean;
-    onRetry?: () => void;
-    minHeight?: string;
-    children?: Snippet;
-  }
-
-  let {
-    isLoading = true,
-    error = null,
-    loadingMessage = "",
-    errorTitle = "Error",
-    showRetry = false,
-    onRetry = () => {},
-    minHeight = "h-64",
-    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}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Spinner from "../../primitives/Spinner/Spinner.svelte";
+  import Alert from "../../primitives/Alert/Alert.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+  import { typography } from '../../tokens/typography';
+
+  const defaultLabels = {
+    error: 'Error',
+    tryAgain: 'Try again',
+  };
+
+  interface Props {
+    isLoading?: boolean;
+    error?: string | null;
+    loadingMessage?: string;
+    errorTitle?: string;
+    showRetry?: boolean;
+    onRetry?: () => void;
+    minHeight?: string;
+    children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    isLoading = true,
+    error = null,
+    loadingMessage = "",
+    errorTitle = undefined,
+    showRetry = false,
+    onRetry = () => {},
+    minHeight = "h-64",
+    children,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+</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 ?? labels.error} message={error} />
+    {#if showRetry}
+      <div class="mt-4 text-center">
+        <Button variant="link" onclick={onRetry}>
+          {labels.tryAgain}
+        </Button>
+      </div>
+    {/if}
+  </div>
+{:else}
+  {@render children?.()}
+{/if}

package/dist/patterns/page/PageLoader.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const PageLoader: import("svelte").Component<{
     isLoading?: boolean;
     error?: string | null;
     loadingMessage?: string;
@@ -8,8 +8,11 @@ interface Props {
     onRetry?: () => void;
     minHeight?: string;
     children?: Snippet;
-}
-declare const PageLoader: import("svelte").Component<Props, {}, "">;
+    labels?: Partial<{
+        error: string;
+        tryAgain: string;
+    }>;
+}, {}, "">;
 type PageLoader = ReturnType<typeof PageLoader>;
 export default PageLoader;
 //# sourceMappingURL=PageLoader.svelte.d.ts.map

package/dist/patterns/page/PageLoader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAuEtC,QAAA,MAAM,UAAU;gBApDA,OAAO;YACX,MAAM,GAAG,IAAI;qBACJ,MAAM;iBACV,MAAM;gBACP,OAAO;cACT,MAAM,IAAI;gBACR,MAAM;eACP,OAAO;aACT,OAAO;;;MAAsB;UA4Cc,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/patterns/page/SectionHeader.svelte

@@ -1,51 +1,51 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    title?: string;
-    description?: string;
-    count?: number | null;
-    divider?: boolean;
-    class?: string;
-    actions?: Snippet;
-  }
-
-  let {
-    title = '',
-    description = '',
-    count = null,
-    divider = false,
-    class: className = '',
-    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>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { typography } from '../../tokens/typography';
+
+  interface Props {
+    title?: string;
+    description?: string;
+    count?: number | null;
+    divider?: boolean;
+    class?: string;
+    actions?: Snippet;
+  }
+
+  let {
+    title = '',
+    description = '',
+    count = null,
+    divider = false,
+    class: className = '',
+    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>

package/dist/patterns/page/index.js

@@ -1,5 +1,5 @@
-// Page pattern components - page structure and layout
-export { default as PageHeader } from './PageHeader.svelte';
-export { default as PageLayout } from './PageLayout.svelte';
-export { default as PageLoader } from './PageLoader.svelte';
-export { default as SectionHeader } from './SectionHeader.svelte';
+// Page pattern components - page structure and layout
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as PageLayout } from './PageLayout.svelte';
+export { default as PageLoader } from './PageLoader.svelte';
+export { default as SectionHeader } from './SectionHeader.svelte';

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';
+}

package/dist/presets/buttons.js

@@ -1,76 +1,76 @@
-/**
- * Button Presets - Common Button Configurations
- *
- * These presets provide ready-to-use button configurations for common actions.
- * Use spread syntax to apply: <Button {...BUTTON_PRESETS.save}>Save</Button>
- *
- * Note: These are not separate components - they're prop objects.
- * This keeps the Button component simple while enabling common patterns.
- */
-
-/**
- * Common button presets
- * Spread these into Button component for consistent styling
- */
-export const BUTTON_PRESETS = {
-  /** Primary save action */
-  save: {
-    variant: 'default',
-    type: 'submit',
-  },
-
-  /** Cancel/back action */
-  cancel: {
-    variant: 'alternative',
-    type: 'button',
-  },
-
-  /** Destructive delete action */
-  delete: {
-    variant: 'red',
-    type: 'button',
-  },
-
-  /** Form submit (alias for save) */
-  submit: {
-    variant: 'default',
-    type: 'submit',
-  },
-
-  /** Secondary action */
-  secondary: {
-    variant: 'light',
-    type: 'button',
-  },
-
-  /** Outline style */
-  outline: {
-    variant: 'outline',
-    type: 'button',
-  },
-
-  /** Ghost/text style */
-  ghost: {
-    variant: 'ghost',
-    type: 'button',
-  },
-};
-
-/**
- * Icon button presets (square, icon-only)
- */
-export const ICON_BUTTON_PRESETS = {
-  /** Default icon button */
-  default: {
-    variant: 'ghost',
-    size: 'sm',
-    className: 'p-2',
-  },
-
-  /** Destructive icon button */
-  destructive: {
-    variant: 'ghost',
-    size: 'sm',
-    className: 'p-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900',
-  },
-};
+/**
+ * Button Presets - Common Button Configurations
+ *
+ * These presets provide ready-to-use button configurations for common actions.
+ * Use spread syntax to apply: <Button {...BUTTON_PRESETS.save}>Save</Button>
+ *
+ * Note: These are not separate components - they're prop objects.
+ * This keeps the Button component simple while enabling common patterns.
+ */
+
+/**
+ * Common button presets
+ * Spread these into Button component for consistent styling
+ */
+export const BUTTON_PRESETS = {
+  /** Primary save action */
+  save: {
+    variant: 'default',
+    type: 'submit',
+  },
+
+  /** Cancel/back action */
+  cancel: {
+    variant: 'alternative',
+    type: 'button',
+  },
+
+  /** Destructive delete action */
+  delete: {
+    variant: 'red',
+    type: 'button',
+  },
+
+  /** Form submit (alias for save) */
+  submit: {
+    variant: 'default',
+    type: 'submit',
+  },
+
+  /** Secondary action */
+  secondary: {
+    variant: 'light',
+    type: 'button',
+  },
+
+  /** Outline style */
+  outline: {
+    variant: 'outline',
+    type: 'button',
+  },
+
+  /** Ghost/text style */
+  ghost: {
+    variant: 'ghost',
+    type: 'button',
+  },
+};
+
+/**
+ * Icon button presets (square, icon-only)
+ */
+export const ICON_BUTTON_PRESETS = {
+  /** Default icon button */
+  default: {
+    variant: 'ghost',
+    size: 'sm',
+    className: 'p-2',
+  },
+
+  /** Destructive icon button */
+  destructive: {
+    variant: 'ghost',
+    size: 'sm',
+    className: 'p-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900',
+  },
+};

package/dist/presets/index.js

@@ -1,9 +1,9 @@
-/**
- * Design System Presets
- *
- * Pre-configured prop objects for common component patterns.
- * Use spread syntax: <Button {...BUTTON_PRESETS.save}>Save</Button>
- */
-
-export * from './badges.js';
-export * from './buttons.js';
+/**
+ * Design System Presets
+ *
+ * Pre-configured prop objects for common component patterns.
+ * Use spread syntax: <Button {...BUTTON_PRESETS.save}>Save</Button>
+ */
+
+export * from './badges.js';
+export * from './buttons.js';