@getmicdrop/svelte-components 4.1.4 → 5.1.0

package/dist/components/Layout/Grid.svelte

@@ -0,0 +1,110 @@
+<script>
+  /**
+   * Grid - Responsive grid container with automatic column sizing
+   *
+   * Use Grid for laying out cards, stats, or any items in a responsive grid.
+   * Automatically stacks on mobile and expands on larger screens.
+   *
+   * @example Numeric gap
+   * <Grid cols="3" gap="6">
+   *   <StatsCard>Revenue</StatsCard>
+   *   <StatsCard>Users</StatsCard>
+   *   <StatsCard>Orders</StatsCard>
+   * </Grid>
+   *
+   * @example Semantic gap (recommended)
+   * <Grid cols="3" gap="section">
+   *   <Card>Card 1</Card>
+   *   <Card>Card 2</Card>
+   *   <Card>Card 3</Card>
+   * </Grid>
+   *
+   * @example Auto-fit columns
+   * <Grid cols="auto" minWidth="300px" gap="section">
+   *   {#each items as item}
+   *     <Card>{item.name}</Card>
+   *   {/each}
+   * </Grid>
+   *
+   * Semantic Gap Values (Flowbite/8px grid):
+   *   - tight:    16px (4)  - Tight grid items
+   *   - standard: 24px (6)  - Standard grid items (default)
+   *   - spacious: 32px (8)  - Spacious grid items
+   */
+
+  /**
+   * Number of columns or 'auto' for auto-fit
+   * @type {'1' | '2' | '3' | '4' | '6' | 'auto'}
+   */
+  export let cols = '3';
+
+  /**
+   * Gap between grid items - semantic names or Tailwind spacing scale
+   * @type {'tight' | 'standard' | 'spacious' | '0' | '2' | '3' | '4' | '6' | '8'}
+   */
+  export let gap = '4';
+
+  /**
+   * Minimum width for auto-fit columns (only used when cols='auto')
+   * @type {string}
+   */
+  export let minWidth = '280px';
+
+  /**
+   * HTML element to render as
+   * @type {'div' | 'section' | 'ul'}
+   */
+  export let as = 'div';
+
+  /**
+   * Additional CSS classes
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+
+  // Semantic gap names for grids
+  const semanticGapMap = {
+    'tight': 'gap-4',      // 16px - Tight grid items
+    'standard': 'gap-6',   // 24px - Standard grid items
+    'spacious': 'gap-8',   // 32px - Spacious grid items
+  };
+
+  // Numeric gap values (backwards compatible)
+  const numericGapMap = {
+    '0': 'gap-0',
+    '2': 'gap-2',
+    '3': 'gap-3',
+    '4': 'gap-4',
+    '6': 'gap-6',
+    '8': 'gap-8'
+  };
+
+  // Combined map
+  const gapMap = { ...numericGapMap, ...semanticGapMap };
+
+  // Responsive column mappings - stack on mobile, expand on larger screens
+  const colsMap = {
+    '1': 'grid-cols-1',
+    '2': 'grid-cols-1 md:grid-cols-2',
+    '3': 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    '6': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    'auto': '' // Uses inline style
+  };
+
+  $: gridStyle = cols === 'auto'
+    ? `grid-template-columns: repeat(auto-fit, minmax(${minWidth}, 1fr));`
+    : '';
+
+  $: classes = [
+    'grid',
+    cols !== 'auto' ? colsMap[cols] : '',
+    gapMap[gap] || 'gap-4',
+    className
+  ].filter(Boolean).join(' ');
+</script>
+
+<svelte:element this={as} class={classes} style={gridStyle || undefined}>
+  <slot />
+</svelte:element>

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

@@ -0,0 +1,48 @@
+export default Grid;
+type Grid = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    minWidth?: string | undefined;
+    cols?: "1" | "2" | "4" | "3" | "6" | "auto" | undefined;
+    gap?: "0" | "2" | "4" | "3" | "6" | "8" | "tight" | "standard" | "spacious" | undefined;
+    as?: "div" | "section" | "ul" | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Grid: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    minWidth?: string | undefined;
+    cols?: "1" | "2" | "4" | "3" | "6" | "auto" | undefined;
+    gap?: "0" | "2" | "4" | "3" | "6" | "8" | "tight" | "standard" | "spacious" | undefined;
+    as?: "div" | "section" | "ul" | undefined;
+}, {
+    default: {};
+}>, {
+    [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=Grid.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Grid.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsJA;;;;;;;;;;;;eAA8J;sCATxH,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/components/Layout/Section.svelte

@@ -0,0 +1,81 @@
+<script>
+  /**
+   * Section - Semantic section wrapper with optional title
+   *
+   * Use Section to group related content with consistent spacing.
+   * Provides proper HTML5 semantics with <section> element.
+   *
+   * @example
+   * <Section title="Recent Orders">
+   *   <OrdersTable />
+   * </Section>
+   *
+   * @example
+   * <Section>
+   *   <Chart />
+   * </Section>
+   */
+
+  /**
+   * Section title (optional)
+   * @type {string}
+   */
+  export let title = '';
+
+  /**
+   * Title size
+   * @type {'sm' | 'md' | 'lg'}
+   */
+  export let titleSize = 'md';
+
+  /**
+   * Gap between title and content
+   * @type {'2' | '3' | '4' | '6'}
+   */
+  export let gap = '4';
+
+  /**
+   * Additional CSS classes for the section
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+
+  /**
+   * Additional CSS classes for the title
+   * @type {string}
+   */
+  export let titleClass = '';
+
+  const titleSizeMap = {
+    sm: 'text-base font-medium',
+    md: 'text-lg font-semibold',
+    lg: 'text-xl font-semibold'
+  };
+
+  const gapMap = {
+    '2': 'space-y-2',
+    '3': 'space-y-3',
+    '4': 'space-y-4',
+    '6': 'space-y-6'
+  };
+
+  $: sectionClasses = [
+    title ? gapMap[gap] || 'space-y-4' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  $: titleClasses = [
+    titleSizeMap[titleSize] || titleSizeMap.md,
+    'text-gray-900 dark:text-white',
+    titleClass
+  ].filter(Boolean).join(' ');
+</script>
+
+<section class={sectionClasses} aria-label={title || undefined}>
+  {#if title}
+    <h2 class={titleClasses}>{title}</h2>
+  {/if}
+
+  <slot />
+</section>

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

@@ -0,0 +1,48 @@
+export default Section;
+type Section = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    title?: string | undefined;
+    gap?: "2" | "4" | "3" | "6" | undefined;
+    titleSize?: "sm" | "md" | "lg" | undefined;
+    titleClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Section: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    title?: string | undefined;
+    gap?: "2" | "4" | "3" | "6" | undefined;
+    titleSize?: "sm" | "md" | "lg" | undefined;
+    titleClass?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [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=Section.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Section.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyHA;;;;;;;;;;;;eAA2K;sCATrI,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/components/Layout/Sidebar.svelte

@@ -0,0 +1,104 @@
+<script>
+  /**
+   * Sidebar - Main content with sidebar layout
+   *
+   * Use Sidebar for pages that have a main content area plus a sidebar.
+   * Common patterns: dashboard stats on right, filters on left, etc.
+   *
+   * @example
+   * <Sidebar>
+   *   <div>Main content here</div>
+   *   <svelte:fragment slot="sidebar">
+   *     <StatsCard />
+   *   </svelte:fragment>
+   * </Sidebar>
+   *
+   * @example
+   * <Sidebar sidebarPosition="left" sidebarWidth="narrow">
+   *   <Table />
+   *   <svelte:fragment slot="sidebar">
+   *     <Filters />
+   *   </svelte:fragment>
+   * </Sidebar>
+   */
+
+  /**
+   * Sidebar width preset
+   * - narrow: ~25% (col-span-3 of 12)
+   * - medium: ~30% (col-span-4 of 12)
+   * - wide: ~40% (col-span-5 of 12)
+   * @type {'narrow' | 'medium' | 'wide'}
+   */
+  export let sidebarWidth = 'medium';
+
+  /**
+   * Sidebar position
+   * @type {'left' | 'right'}
+   */
+  export let sidebarPosition = 'right';
+
+  /**
+   * Gap between main and sidebar
+   * @type {'4' | '6' | '8'}
+   */
+  export let gap = '6';
+
+  /**
+   * Stack vertically on mobile
+   * @type {boolean}
+   */
+  export let stackOnMobile = true;
+
+  /**
+   * Additional CSS classes
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+
+  const gapMap = {
+    '4': 'gap-4',
+    '6': 'gap-6',
+    '8': 'gap-8'
+  };
+
+  // Using 12-column grid for flexibility
+  // Main content gets remaining columns
+  const sidebarWidthMap = {
+    narrow: { sidebar: 'lg:col-span-3', main: 'lg:col-span-9' },
+    medium: { sidebar: 'lg:col-span-4', main: 'lg:col-span-8' },
+    wide: { sidebar: 'lg:col-span-5', main: 'lg:col-span-7' }
+  };
+
+  $: widthConfig = sidebarWidthMap[sidebarWidth] || sidebarWidthMap.medium;
+
+  $: containerClasses = [
+    'grid',
+    stackOnMobile ? 'grid-cols-1' : '',
+    'lg:grid-cols-12',
+    gapMap[gap] || 'gap-6',
+    className
+  ].filter(Boolean).join(' ');
+
+  $: mainClasses = [
+    'col-span-1',
+    widthConfig.main,
+    sidebarPosition === 'left' ? 'lg:order-2' : 'lg:order-1'
+  ].filter(Boolean).join(' ');
+
+  $: sidebarClasses = [
+    'col-span-1',
+    widthConfig.sidebar,
+    sidebarPosition === 'left' ? 'lg:order-1' : 'lg:order-2'
+  ].filter(Boolean).join(' ');
+</script>
+
+<div class={containerClasses}>
+  <div class={mainClasses}>
+    <slot />
+  </div>
+
+  <aside class={sidebarClasses}>
+    <slot name="sidebar" />
+  </aside>
+</div>

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

@@ -0,0 +1,52 @@
+export default Sidebar;
+type Sidebar = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    gap?: "4" | "6" | "8" | undefined;
+    sidebarWidth?: "medium" | "narrow" | "wide" | undefined;
+    sidebarPosition?: "left" | "right" | undefined;
+    stackOnMobile?: boolean | undefined;
+}, {
+    default: {};
+    sidebar: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    sidebar: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    gap?: "4" | "6" | "8" | undefined;
+    sidebarWidth?: "medium" | "narrow" | "wide" | undefined;
+    sidebarPosition?: "left" | "right" | undefined;
+    stackOnMobile?: boolean | undefined;
+}, {
+    default: {};
+    sidebar: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    sidebar: {};
+}, {}, 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=Sidebar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Sidebar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmJA;;;;;;;;;;;;;;eAA2L;sCATrJ,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/components/Layout/Stack.svelte

@@ -0,0 +1,139 @@
+<script>
+  /**
+   * Stack - Vertical or horizontal flex container with consistent gap spacing
+   *
+   * Use Stack when you need to space children vertically or horizontally.
+   * Stack controls spacing via gap - children should NOT have external margins.
+   *
+   * @example Numeric gap (Tailwind scale)
+   * <Stack gap="4">
+   *   <Card>First</Card>
+   *   <Card>Second</Card>
+   * </Stack>
+   *
+   * @example Semantic gap (recommended)
+   * <Stack gap="section">
+   *   <Card>First card</Card>
+   *   <Card>Second card</Card>
+   * </Stack>
+   *
+   * @example Horizontal with alignment
+   * <Stack direction="horizontal" gap="group" align="center">
+   *   <Button>Save</Button>
+   *   <Button variant="secondary">Cancel</Button>
+   * </Stack>
+   *
+   * Semantic Gap Values (Flowbite/8px grid):
+   *   - tight:    4px  (1)   - Icon + text, inline elements
+   *   - compact:  6px  (1.5) - Label + input, tight relationships
+   *   - item:     8px  (2)   - List items, form fields
+   *   - group:    12px (3)   - Form groups, related content
+   *   - content:  16px (4)   - Card sections, sidebar groups
+   *   - section:  24px (6)   - Between cards, major sections
+   *   - layout:   32px (8)   - Page sections, layout divisions
+   *   - page:     48px (12)  - Hero sections, page divisions
+   */
+
+  /**
+   * Gap between children - semantic names or Tailwind spacing scale
+   * @type {'tight' | 'compact' | 'item' | 'group' | 'content' | 'section' | 'layout' | 'page' | '0' | '1' | '1.5' | '2' | '3' | '4' | '6' | '8' | '12' | '16'}
+   */
+  export let gap = '4';
+
+  /**
+   * Stack direction
+   * @type {'vertical' | 'horizontal'}
+   */
+  export let direction = 'vertical';
+
+  /**
+   * Cross-axis alignment (align-items)
+   * @type {'start' | 'center' | 'end' | 'stretch' | 'baseline' | undefined}
+   */
+  export let align = undefined;
+
+  /**
+   * Main-axis alignment (justify-content)
+   * @type {'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | undefined}
+   */
+  export let justify = undefined;
+
+  /**
+   * Whether children should wrap
+   * @type {boolean}
+   */
+  export let wrap = false;
+
+  /**
+   * HTML element to render as
+   * @type {'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol'}
+   */
+  export let as = 'div';
+
+  /**
+   * Additional CSS classes
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+
+  // Semantic gap names → Tailwind gap classes (Flowbite/8px grid)
+  const semanticGapMap = {
+    'tight': 'gap-1',      // 4px - Icon + text, inline elements
+    'compact': 'gap-1.5',  // 6px - Label + input, tight relationships
+    'item': 'gap-2',       // 8px - List items, form fields
+    'group': 'gap-3',      // 12px - Form groups, related content
+    'content': 'gap-4',    // 16px - Card sections, sidebar groups
+    'section': 'gap-6',    // 24px - Between cards, major sections
+    'layout': 'gap-8',     // 32px - Page sections, layout divisions
+    'page': 'gap-12',      // 48px - Hero sections, page divisions
+  };
+
+  // Numeric gap values (backwards compatible)
+  const numericGapMap = {
+    '0': 'gap-0',
+    '1': 'gap-1',
+    '1.5': 'gap-1.5',
+    '2': 'gap-2',
+    '3': 'gap-3',
+    '4': 'gap-4',
+    '6': 'gap-6',
+    '8': 'gap-8',
+    '12': 'gap-12',
+    '16': 'gap-16'
+  };
+
+  // Combined map - semantic names take precedence
+  const gapMap = { ...numericGapMap, ...semanticGapMap };
+
+  const alignMap = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline'
+  };
+
+  const justifyMap = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+    evenly: 'justify-evenly'
+  };
+
+  $: classes = [
+    'flex',
+    direction === 'vertical' ? 'flex-col' : 'flex-row',
+    gapMap[gap] || 'gap-4',
+    align ? alignMap[align] : '',
+    justify ? justifyMap[justify] : '',
+    wrap ? 'flex-wrap' : '',
+    className
+  ].filter(Boolean).join(' ');
+</script>
+
+<svelte:element this={as} class={classes}>
+  <slot />
+</svelte:element>

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

@@ -0,0 +1,52 @@
+export default Stack;
+type Stack = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
+    gap?: "0" | "1" | "2" | "1.5" | "12" | "4" | "3" | "6" | "8" | "section" | "16" | "page" | "group" | "tight" | "compact" | "item" | "content" | "layout" | undefined;
+    align?: "center" | "end" | "start" | "stretch" | "baseline" | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined;
+    wrap?: boolean | undefined;
+    as?: "div" | "nav" | "ol" | "article" | "aside" | "main" | "section" | "ul" | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Stack: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    direction?: "horizontal" | "vertical" | undefined;
+    gap?: "0" | "1" | "2" | "1.5" | "12" | "4" | "3" | "6" | "8" | "section" | "16" | "page" | "group" | "tight" | "compact" | "item" | "content" | "layout" | undefined;
+    align?: "start" | "center" | "end" | "stretch" | "baseline" | undefined;
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | undefined;
+    wrap?: boolean | undefined;
+    as?: "div" | "nav" | "ol" | "article" | "aside" | "main" | "section" | "ul" | undefined;
+}, {
+    default: {};
+}>, {
+    [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=Stack.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Stack.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA2LA;;;;YAhCY,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS;cAI/D,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS;;;;;;;;;eA4B8F;sCAT5I,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"}