@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/calendar/ShowTimeCard/ShowTimeCard.svelte

@@ -1,61 +1,61 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    day = '',
-    date = '',
-    time = '',
-    isSelected = false,
-    onselect,
-  } = $props();
-
-  function handleCardClick() {
-    onselect?.({ date });
-  }
-
-  function handleKeydown(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleCardClick();
-    }
-  }
-
-  function formatHour(timeStr) {
-    if (!timeStr) return '';
-    const d = new Date(`1970-01-01T${timeStr}`);
-    if (isNaN(d.getTime())) return timeStr;
-    return d.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true
-    });
-  }
-
-  function formatDate(dateStr) {
-    if (!dateStr) return '';
-    const d = new Date(dateStr);
-    if (isNaN(d.getTime())) return dateStr;
-    return d.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-    });
-  }
-</script>
-
-<div
-  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-white dark:bg-gray-800 {isSelected
-    ? 'border-blue-700 dark:border-blue-500'
-    : 'border-gray-200 dark:border-gray-700 hover:border-blue-700 dark:hover:border-blue-500'}"
-  onclick={handleCardClick}
-  onkeydown={handleKeydown}
-  tabindex="0"
-  role="button"
-  aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}
-  aria-pressed={isSelected}
->
-  <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
-  <span class="{typography.label} text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : ''}">
-    {formatDate(date)}
-  </span>
-  <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>
-</div>
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    day = '',
+    date = '',
+    time = '',
+    isSelected = false,
+    onselect,
+  } = $props();
+
+  function handleCardClick() {
+    onselect?.({ date });
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleCardClick();
+    }
+  }
+
+  function formatHour(timeStr) {
+    if (!timeStr) return '';
+    const d = new Date(`1970-01-01T${timeStr}`);
+    if (isNaN(d.getTime())) return timeStr;
+    return d.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true
+    });
+  }
+
+  function formatDate(dateStr) {
+    if (!dateStr) return '';
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return dateStr;
+    return d.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    });
+  }
+</script>
+
+<div
+  class="w-full h-28 rounded-lg flex flex-col justify-center items-center gap-1.5 cursor-pointer border-2 px-1 transition-colors bg-white dark:bg-gray-800 {isSelected
+    ? 'border-blue-700 dark:border-blue-500'
+    : 'border-gray-200 dark:border-gray-700 hover:border-blue-700 dark:hover:border-blue-500'}"
+  onclick={handleCardClick}
+  onkeydown={handleKeydown}
+  tabindex="0"
+  role="button"
+  aria-label={`${day} ${formatDate(date)} at ${formatHour(time)}${isSelected ? ', selected' : ''}`}
+  aria-pressed={isSelected}
+>
+  <span class="{typography.label} text-sm {typography.textMuted}">{day}</span>
+  <span class="{typography.label} text-base {isSelected ? 'text-blue-700 dark:text-blue-500' : ''}">
+    {formatDate(date)}
+  </span>
+  <span class="{typography.label} text-sm {typography.textMuted}">{formatHour(time)}</span>
+</div>

package/dist/components/Layout/AppShell.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Variant = 'admin' | 'performer' | 'public' | 'minimal';
+
+  interface Props {
+    /** Shell variant determines overall styling */
+    variant?: Variant;
+    /** Whether sidebar is collapsed (only for admin variant) */
+    sidebarCollapsed?: boolean;
+    /** Whether to show bottom navigation on mobile */
+    showBottomNav?: boolean;
+    /** Fixed header */
+    fixedHeader?: boolean;
+    /** Additional CSS classes for main content area */
+    class?: string;
+    /** Header slot */
+    header?: Snippet;
+    /** Sidebar slot (left side) */
+    sidebar?: Snippet;
+    /** Bottom navigation slot (mobile) */
+    bottomNav?: Snippet;
+    /** Main content */
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'admin',
+    sidebarCollapsed = false,
+    showBottomNav = true,
+    fixedHeader = true,
+    class: className = '',
+    header,
+    sidebar,
+    bottomNav,
+    children,
+  }: Props = $props();
+
+  // Background classes based on variant
+  const variantBackgrounds: Record<Variant, string> = {
+    admin: 'bg-gray-50 dark:bg-gray-800',
+    performer: 'bg-gray-50 dark:bg-gray-800',
+    public: 'bg-white dark:bg-gray-900',
+    minimal: 'bg-white dark:bg-gray-900',
+  };
+
+  // Sidebar width classes
+  const sidebarWidthExpanded = 'md:ml-64';
+  const sidebarWidthCollapsed = 'md:ml-20';
+
+  let mainMarginClass = $derived(
+    sidebar
+      ? sidebarCollapsed
+        ? sidebarWidthCollapsed
+        : sidebarWidthExpanded
+      : ''
+  );
+
+  let headerPadding = $derived(fixedHeader ? 'pt-16' : '');
+  let bottomPadding = $derived(showBottomNav && bottomNav ? 'pb-16 md:pb-0' : '');
+</script>
+
+<div class="min-h-screen {variantBackgrounds[variant]}">
+  <!-- Header -->
+  {#if header}
+    <header
+      class="w-full z-30"
+      class:fixed={fixedHeader}
+      class:top-0={fixedHeader}
+      class:left-0={fixedHeader}
+    >
+      {@render header()}
+    </header>
+  {/if}
+
+  <!-- Sidebar -->
+  {#if sidebar}
+    <aside
+      class="fixed top-0 left-0 z-20 h-screen transition-all duration-300 hidden md:block"
+      class:w-64={!sidebarCollapsed}
+      class:w-20={sidebarCollapsed}
+    >
+      {@render sidebar()}
+    </aside>
+  {/if}
+
+  <!-- Main Content -->
+  <main
+    class="transition-all duration-300 {headerPadding} {mainMarginClass} {bottomPadding} {className}"
+  >
+    <div class="{variantBackgrounds[variant]} min-h-screen">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </main>
+
+  <!-- Bottom Navigation (Mobile) -->
+  {#if showBottomNav && bottomNav}
+    <nav class="fixed bottom-0 left-0 right-0 z-30 md:hidden">
+      {@render bottomNav()}
+    </nav>
+  {/if}
+</div>

package/dist/components/Layout/AppShell.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+type Variant = 'admin' | 'performer' | 'public' | 'minimal';
+interface Props {
+    /** Shell variant determines overall styling */
+    variant?: Variant;
+    /** Whether sidebar is collapsed (only for admin variant) */
+    sidebarCollapsed?: boolean;
+    /** Whether to show bottom navigation on mobile */
+    showBottomNav?: boolean;
+    /** Fixed header */
+    fixedHeader?: boolean;
+    /** Additional CSS classes for main content area */
+    class?: string;
+    /** Header slot */
+    header?: Snippet;
+    /** Sidebar slot (left side) */
+    sidebar?: Snippet;
+    /** Bottom navigation slot (mobile) */
+    bottomNav?: Snippet;
+    /** Main content */
+    children?: Snippet;
+}
+declare const AppShell: import("svelte").Component<Props, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;
+//# sourceMappingURL=AppShell.svelte.d.ts.map

package/dist/components/Layout/AppShell.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/AppShell.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5D,UAAU,KAAK;IACb,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kDAAkD;IAClD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4EH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Layout/ContentSection.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Section title */
+    title?: string;
+    /** Optional subtitle */
+    subtitle?: string;
+    /** Heading level for the title (2-6) */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Size variant for title */
+    titleSize?: 'sm' | 'base' | 'lg' | 'xl';
+    /** Spacing below the section */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    class?: string;
+    /** Action slot (buttons, links) */
+    actions?: Snippet;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    title = '',
+    subtitle = '',
+    headingLevel = 2,
+    titleSize = 'lg',
+    spacing = 'md',
+    class: className = '',
+    actions,
+    children,
+  }: Props = $props();
+
+  const titleSizeClasses = {
+    sm: 'text-base',
+    base: 'text-lg',
+    lg: 'text-xl',
+    xl: 'text-2xl',
+  };
+
+  const spacingClasses = {
+    none: '',
+    sm: 'mb-4',
+    md: 'mb-6',
+    lg: 'mb-8',
+  };
+
+  let headingElement = $derived(`h${headingLevel}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6');
+</script>
+
+<section class="{spacingClasses[spacing]} {className}">
+  {#if title || actions}
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
+      <div>
+        {#if title}
+          <svelte:element
+            this={headingElement}
+            class="{titleSizeClasses[titleSize]} font-semibold text-gray-900 dark:text-white"
+          >
+            {title}
+          </svelte:element>
+        {/if}
+        {#if subtitle}
+          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            {subtitle}
+          </p>
+        {/if}
+      </div>
+      {#if actions}
+        <div class="flex items-center gap-3 flex-shrink-0">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+</section>

package/dist/components/Layout/ContentSection.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Section title */
+    title?: string;
+    /** Optional subtitle */
+    subtitle?: string;
+    /** Heading level for the title (2-6) */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Size variant for title */
+    titleSize?: 'sm' | 'base' | 'lg' | 'xl';
+    /** Spacing below the section */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    class?: string;
+    /** Action slot (buttons, links) */
+    actions?: Snippet;
+    /** Child content */
+    children?: Snippet;
+}
+declare const ContentSection: import("svelte").Component<Props, {}, "">;
+type ContentSection = ReturnType<typeof ContentSection>;
+export default ContentSection;
+//# sourceMappingURL=ContentSection.svelte.d.ts.map

package/dist/components/Layout/ContentSection.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/ContentSection.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+DH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/Layout/Grid.svelte

@@ -95,7 +95,7 @@
     ].filter(Boolean).join(' ')
   );
 </script>
-
-<svelte:element this={as} class={classes} style={gridStyle || undefined}>
-  {@render children?.()}
-</svelte:element>
+
+<svelte:element this={as} class={classes} style={gridStyle || undefined}>
+  {@render children?.()}
+</svelte:element>

package/dist/components/Layout/Heading.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Level = 1 | 2 | 3 | 4 | 5 | 6;
+  type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+  type Variant = 'default' | 'muted' | 'primary';
+
+  interface Props {
+    /** Semantic heading level (1-6) */
+    level?: Level;
+    /** Visual size override (optional - defaults based on level) */
+    size?: Size;
+    /** Color variant */
+    variant?: Variant;
+    /** Font weight */
+    weight?: 'medium' | 'semibold' | 'bold';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+    /** Rest props */
+    [key: string]: unknown;
+  }
+
+  let {
+    level = 2,
+    size,
+    variant = 'default',
+    weight = 'semibold',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  // Default size mapping based on heading level
+  const levelToSize: Record<Level, Size> = {
+    1: '3xl',
+    2: '2xl',
+    3: 'xl',
+    4: 'lg',
+    5: 'base',
+    6: 'sm',
+  };
+
+  const sizeClasses: Record<Size, string> = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+  };
+
+  const variantClasses: Record<Variant, string> = {
+    default: 'text-gray-900 dark:text-white',
+    muted: 'text-gray-600 dark:text-gray-400',
+    primary: 'text-primary dark:text-primary',
+  };
+
+  const weightClasses: Record<string, string> = {
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  };
+
+  let effectiveSize = $derived(size || levelToSize[level]);
+  let element = $derived(`h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6');
+
+  let classes = $derived([
+    sizeClasses[effectiveSize],
+    variantClasses[variant],
+    weightClasses[weight],
+    className,
+  ].filter(Boolean).join(' '));
+</script>
+
+<svelte:element this={element} class={classes} {...restProps}>
+  {#if children}{@render children()}{/if}
+</svelte:element>

package/dist/components/Layout/Heading.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+type Size = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+type Variant = 'default' | 'muted' | 'primary';
+interface Props {
+    /** Semantic heading level (1-6) */
+    level?: Level;
+    /** Visual size override (optional - defaults based on level) */
+    size?: Size;
+    /** Color variant */
+    variant?: Variant;
+    /** Font weight */
+    weight?: 'medium' | 'semibold' | 'bold';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+    /** Rest props */
+    [key: string]: unknown;
+}
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;
+//# sourceMappingURL=Heading.svelte.d.ts.map

package/dist/components/Layout/Heading.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Heading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACnC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACvE,KAAK,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,UAAU,KAAK;IACb,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAoEH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Layout/PageContainer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | 'full';
+  type Padding = 'none' | 'tight' | 'default' | 'spacious';
+
+  interface Props {
+    /** Maximum width of the container */
+    maxWidth?: MaxWidth;
+    /** Padding variant */
+    padding?: Padding;
+    /** Center the container */
+    center?: boolean;
+    /** Background color variant */
+    background?: 'none' | 'white' | 'gray';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+    /** Rest props */
+    [key: string]: unknown;
+  }
+
+  let {
+    maxWidth = 'full',
+    padding = 'default',
+    center = true,
+    background = 'none',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const maxWidthClasses: Record<MaxWidth, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '4xl': 'max-w-4xl',
+    '6xl': 'max-w-6xl',
+    full: 'max-w-full',
+  };
+
+  const paddingClasses: Record<Padding, string> = {
+    none: '',
+    tight: 'px-2 py-2 md:px-4 md:py-4',
+    default: 'px-4 py-6 md:py-8',
+    spacious: 'px-4 py-8 md:px-6 md:py-12',
+  };
+
+  const backgroundClasses: Record<string, string> = {
+    none: '',
+    white: 'bg-white dark:bg-gray-900',
+    gray: 'bg-gray-50 dark:bg-gray-800',
+  };
+
+  let classes = $derived([
+    maxWidthClasses[maxWidth],
+    paddingClasses[padding],
+    backgroundClasses[background],
+    center ? 'mx-auto' : '',
+    className,
+  ].filter(Boolean).join(' '));
+</script>
+
+<div class={classes} {...restProps}>
+  {#if children}{@render children()}{/if}
+</div>

package/dist/components/Layout/PageContainer.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | 'full';
+type Padding = 'none' | 'tight' | 'default' | 'spacious';
+interface Props {
+    /** Maximum width of the container */
+    maxWidth?: MaxWidth;
+    /** Padding variant */
+    padding?: Padding;
+    /** Center the container */
+    center?: boolean;
+    /** Background color variant */
+    background?: 'none' | 'white' | 'gray';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+    /** Rest props */
+    [key: string]: unknown;
+}
+declare const PageContainer: import("svelte").Component<Props, {}, "">;
+type PageContainer = ReturnType<typeof PageContainer>;
+export default PageContainer;
+//# sourceMappingURL=PageContainer.svelte.d.ts.map

package/dist/components/Layout/PageContainer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContainer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/PageContainer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3E,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzD,UAAU,KAAK;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAwDH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/Layout/Responsive.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  /**
+   * Responsive visibility components
+   *
+   * Usage:
+   * <ShowOnMobile>Mobile only content</ShowOnMobile>
+   * <ShowOnDesktop>Desktop only content</ShowOnDesktop>
+   * <HideOnMobile>Hidden on mobile</HideOnMobile>
+   * <HideOnDesktop>Hidden on desktop</HideOnDesktop>
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+  type Mode = 'show-mobile' | 'show-desktop' | 'hide-mobile' | 'hide-desktop';
+
+  interface Props {
+    /** Visibility mode */
+    mode: Mode;
+    /** Breakpoint for mobile/desktop boundary */
+    breakpoint?: Breakpoint;
+    /** Display type when visible */
+    display?: 'block' | 'flex' | 'inline' | 'inline-block' | 'grid';
+    /** Additional CSS classes */
+    class?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    mode,
+    breakpoint = 'lg',
+    display = 'block',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const displayClasses: Record<string, string> = {
+    block: 'block',
+    flex: 'flex',
+    inline: 'inline',
+    'inline-block': 'inline-block',
+    grid: 'grid',
+  };
+
+  // Build responsive classes based on mode and breakpoint
+  function getResponsiveClasses(m: Mode, bp: Breakpoint, disp: string): string {
+    const dispClass = displayClasses[disp];
+
+    switch (m) {
+      case 'show-mobile':
+        // Show on mobile, hide on desktop
+        return `${dispClass} ${bp}:hidden`;
+      case 'show-desktop':
+        // Hide on mobile, show on desktop
+        return `hidden ${bp}:${dispClass}`;
+      case 'hide-mobile':
+        // Hide on mobile, show on desktop
+        return `hidden ${bp}:${dispClass}`;
+      case 'hide-desktop':
+        // Show on mobile, hide on desktop
+        return `${dispClass} ${bp}:hidden`;
+      default:
+        return dispClass;
+    }
+  }
+
+  let classes = $derived(`${getResponsiveClasses(mode, breakpoint, display)} ${className}`.trim());
+</script>
+
+<div class={classes}>
+  {#if children}{@render children()}{/if}
+</div>