@getmicdrop/svelte-components 5.4.0 → 5.4.2

package/dist/calendar/PublicCard/PublicCard.svelte

@@ -71,6 +71,7 @@
 </script>
 
 {#each events as event}
+  <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
   <article
     class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-lg hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 relative {view === 'col'
       ? 'flex flex-col'

package/dist/calendar/PublicCard/PublicCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;AAmIA;aA3H8B,GAAG,EAAE;WAAS,MAAM;uBAAqB,GAAG;kBAAgB,GAAG;WA2HpC;wBA3HtC;IAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,YAAY,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"PublicCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/calendar/PublicCard/PublicCard.svelte.js"],"names":[],"mappings":";;;;;AAoIA;aA5H8B,GAAG,EAAE;WAAS,MAAM;uBAAqB,GAAG;kBAAgB,GAAG;WA4HpC;wBA5HtC;IAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAAC,YAAY,EAAE,GAAG,CAAA;CAAE"}

package/dist/calendar/index.d.ts

@@ -0,0 +1,9 @@
+export { default as PublicCard } from "./PublicCard/PublicCard.svelte";
+export { default as MonthSwitcher } from "./MonthSwitcher/MonthSwitcher.svelte";
+export { default as OrderSummary } from "./OrderSummary/OrderSummary.svelte";
+export { default as ShowCard } from "./ShowCard/ShowCard.svelte";
+export { default as AboutShow } from "./AboutShow/AboutShow.svelte";
+export { default as FAQs } from "./FAQs/FAQs.svelte";
+export { default as ShowTimeCard } from "./ShowTimeCard/ShowTimeCard.svelte";
+export { default as MiniMonthCalendar, default as Calendar } from "./Calendar/MiniMonthCalendar.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/calendar/index.js"],"names":[],"mappings":""}

package/dist/calendar/index.js

@@ -0,0 +1,15 @@
+// =============================================================================
+// CALENDAR - Domain components (deferred migration to apps)
+// =============================================================================
+
+export { default as MiniMonthCalendar } from './Calendar/MiniMonthCalendar.svelte';
+// Legacy alias for backward compatibility - will be removed in future version
+export { default as Calendar } from './Calendar/MiniMonthCalendar.svelte';
+
+export { default as PublicCard } from './PublicCard/PublicCard.svelte';
+export { default as MonthSwitcher } from './MonthSwitcher/MonthSwitcher.svelte';
+export { default as OrderSummary } from './OrderSummary/OrderSummary.svelte';
+export { default as ShowCard } from './ShowCard/ShowCard.svelte';
+export { default as AboutShow } from './AboutShow/AboutShow.svelte';
+export { default as FAQs } from './FAQs/FAQs.svelte';
+export { default as ShowTimeCard } from './ShowTimeCard/ShowTimeCard.svelte';

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Grid.spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Grid.spec.ts"],"names":[],"mappings":""}

package/dist/components/Layout/Grid.spec.js

@@ -0,0 +1,230 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Grid from './Grid.svelte';
+describe('Grid', () => {
+    describe('basic rendering', () => {
+        it('renders as a div by default', () => {
+            const { container } = render(Grid);
+            const grid = container.querySelector('div.grid');
+            expect(grid).toBeTruthy();
+        });
+        it('renders children content', () => {
+            // Note: Svelte 5 snippets cannot be directly tested this way
+            // Just verify the component renders
+            const { container } = render(Grid);
+            // Grid should be rendered
+            expect(container.querySelector('.grid')).toBeTruthy();
+        });
+        it('applies additional CSS classes', () => {
+            const { container } = render(Grid, {
+                props: { class: 'custom-class' }
+            });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('custom-class')).toBe(true);
+        });
+    });
+    describe('cols prop', () => {
+        it('defaults to 3 columns', () => {
+            const { container } = render(Grid);
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('lg:grid-cols-3')).toBe(true);
+        });
+        it('renders 1 column layout', () => {
+            const { container } = render(Grid, { props: { cols: '1' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-1')).toBe(true);
+        });
+        it('renders 2 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '2' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-1')).toBe(true);
+            expect(grid?.classList.contains('md:grid-cols-2')).toBe(true);
+        });
+        it('renders 3 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '3' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-1')).toBe(true);
+            expect(grid?.classList.contains('md:grid-cols-2')).toBe(true);
+            expect(grid?.classList.contains('lg:grid-cols-3')).toBe(true);
+        });
+        it('renders 4 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '4' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-1')).toBe(true);
+            expect(grid?.classList.contains('sm:grid-cols-2')).toBe(true);
+            expect(grid?.classList.contains('lg:grid-cols-4')).toBe(true);
+        });
+        it('renders 5 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '5' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('lg:grid-cols-5')).toBe(true);
+        });
+        it('renders 6 column responsive layout', () => {
+            const { container } = render(Grid, { props: { cols: '6' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('lg:grid-cols-6')).toBe(true);
+        });
+        it('renders 12 column layout for custom grids', () => {
+            const { container } = render(Grid, { props: { cols: '12' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-12')).toBe(true);
+        });
+        it('renders auto-fit layout with inline style', () => {
+            const { container } = render(Grid, { props: { cols: 'auto' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.getAttribute('style')).toContain('grid-template-columns');
+            expect(grid?.getAttribute('style')).toContain('auto-fit');
+        });
+        it('uses custom minWidth for auto-fit columns', () => {
+            const { container } = render(Grid, {
+                props: { cols: 'auto', minWidth: '300px' }
+            });
+            const grid = container.querySelector('.grid');
+            expect(grid?.getAttribute('style')).toContain('300px');
+        });
+        it('defaults to 280px minWidth for auto-fit', () => {
+            const { container } = render(Grid, { props: { cols: 'auto' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.getAttribute('style')).toContain('280px');
+        });
+    });
+    describe('gap prop', () => {
+        it('defaults to gap-4', () => {
+            const { container } = render(Grid);
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies numeric gap values', () => {
+            const { container } = render(Grid, { props: { gap: '6' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies zero gap', () => {
+            const { container } = render(Grid, { props: { gap: '0' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-0')).toBe(true);
+        });
+        it('applies semantic gap: section', () => {
+            const { container } = render(Grid, { props: { gap: 'section' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies semantic gap: layout', () => {
+            const { container } = render(Grid, { props: { gap: 'layout' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-8')).toBe(true);
+        });
+        it('applies semantic gap: content', () => {
+            const { container } = render(Grid, { props: { gap: 'content' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies legacy gap: none', () => {
+            const { container } = render(Grid, { props: { gap: 'none' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-0')).toBe(true);
+        });
+        it('applies legacy gap: xs', () => {
+            const { container } = render(Grid, { props: { gap: 'xs' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-1')).toBe(true);
+        });
+        it('applies legacy gap: sm', () => {
+            const { container } = render(Grid, { props: { gap: 'sm' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-2')).toBe(true);
+        });
+        it('applies legacy gap: md', () => {
+            const { container } = render(Grid, { props: { gap: 'md' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies legacy gap: lg', () => {
+            const { container } = render(Grid, { props: { gap: 'lg' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies legacy gap: xl', () => {
+            const { container } = render(Grid, { props: { gap: 'xl' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-8')).toBe(true);
+        });
+        it('applies grid-specific gap: tight', () => {
+            const { container } = render(Grid, { props: { gap: 'tight' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-4')).toBe(true);
+        });
+        it('applies grid-specific gap: standard', () => {
+            const { container } = render(Grid, { props: { gap: 'standard' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+        });
+        it('applies grid-specific gap: spacious', () => {
+            const { container } = render(Grid, { props: { gap: 'spacious' } });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('gap-8')).toBe(true);
+        });
+    });
+    describe('as prop', () => {
+        it('renders as div by default', () => {
+            const { container } = render(Grid);
+            expect(container.querySelector('div.grid')).toBeTruthy();
+            expect(container.querySelector('section.grid')).toBeFalsy();
+            expect(container.querySelector('ul.grid')).toBeFalsy();
+        });
+        it('renders as section element', () => {
+            const { container } = render(Grid, { props: { as: 'section' } });
+            expect(container.querySelector('section.grid')).toBeTruthy();
+        });
+        it('renders as ul element', () => {
+            const { container } = render(Grid, { props: { as: 'ul' } });
+            expect(container.querySelector('ul.grid')).toBeTruthy();
+        });
+    });
+    describe('combined props', () => {
+        it('applies multiple props together', () => {
+            const { container } = render(Grid, {
+                props: {
+                    cols: '4',
+                    gap: 'section',
+                    as: 'section',
+                    class: 'my-custom-grid'
+                }
+            });
+            const grid = container.querySelector('section.grid');
+            expect(grid).toBeTruthy();
+            expect(grid?.classList.contains('lg:grid-cols-4')).toBe(true);
+            expect(grid?.classList.contains('gap-6')).toBe(true);
+            expect(grid?.classList.contains('my-custom-grid')).toBe(true);
+        });
+        it('handles 12-column layout with no gap', () => {
+            const { container } = render(Grid, {
+                props: { cols: '12', gap: 'none' }
+            });
+            const grid = container.querySelector('.grid');
+            expect(grid?.classList.contains('grid-cols-12')).toBe(true);
+            expect(grid?.classList.contains('gap-0')).toBe(true);
+        });
+        it('handles auto-fit with custom minWidth and spacious gap', () => {
+            const { container } = render(Grid, {
+                props: {
+                    cols: 'auto',
+                    minWidth: '350px',
+                    gap: 'spacious'
+                }
+            });
+            const grid = container.querySelector('.grid');
+            expect(grid?.getAttribute('style')).toContain('350px');
+            expect(grid?.classList.contains('gap-8')).toBe(true);
+        });
+    });
+    describe('no style attribute for non-auto cols', () => {
+        it('does not add style attribute for fixed column counts', () => {
+            const { container } = render(Grid, { props: { cols: '3' } });
+            const grid = container.querySelector('.grid');
+            // Style should be undefined or empty for non-auto cols
+            const styleAttr = grid?.getAttribute('style');
+            expect(styleAttr === null || styleAttr === '').toBe(true);
+        });
+    });
+});

package/dist/components/Layout/Grid.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { gapMap, type GapKey } from '../../tokens/spacing.js';
 
   /**
    * Grid - Responsive grid container with automatic column sizing
@@ -28,17 +29,26 @@
    *   {/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
+   * @example 12-column layout grid
+   * <Grid cols="12" gap="none">
+   *   <div class="col-span-4">Sidebar</div>
+   *   <div class="col-span-8">Content</div>
+   * </Grid>
+   *
+   * Semantic Gap Values (from tokens/spacing.ts):
+   *   - none:     0px       - No gap (for 12-col layouts)
+   *   - xs:       4px (1)   - Extra small gap
+   *   - sm:       8px (2)   - Small gap
+   *   - tight:    16px (4)  - Tight grid items (alias: md, content)
+   *   - standard: 24px (6)  - Standard grid items (alias: lg, section)
+   *   - spacious: 32px (8)  - Spacious grid items (alias: xl, layout)
    */
 
   interface Props {
     /** Number of columns or 'auto' for auto-fit */
-    cols?: '1' | '2' | '3' | '4' | '6' | 'auto';
+    cols?: '1' | '2' | '3' | '4' | '5' | '6' | '12' | 'auto';
     /** Gap between grid items - semantic names or Tailwind spacing scale */
-    gap?: 'tight' | 'standard' | 'spacious' | '0' | '2' | '3' | '4' | '6' | '8';
+    gap?: GapKey;
     /** Minimum width for auto-fit columns (only used when cols='auto') */
     minWidth?: string;
     /** HTML element to render as */
@@ -58,33 +68,15 @@
     children
   }: Props = $props();
 
-  // Semantic gap names for grids
-  const semanticGapMap: Record<string, string> = {
-    '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: Record<string, string> = {
-    '0': 'gap-0',
-    '2': 'gap-2',
-    '3': 'gap-3',
-    '4': 'gap-4',
-    '6': 'gap-6',
-    '8': 'gap-8'
-  };
-
-  // Combined map
-  const gapMap: Record<string, string> = { ...numericGapMap, ...semanticGapMap };
-
   // Responsive column mappings - stack on mobile, expand on larger screens
   const colsMap: Record<string, string> = {
     '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',
+    '5': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-5',
+    '6': 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+    '12': 'grid-cols-12',
     'auto': '' // Uses inline style
   };
 

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type GapKey } from '../../tokens/spacing.js';
 /**
  * Grid - Responsive grid container with automatic column sizing
  *
@@ -26,16 +27,25 @@ import type { Snippet } from 'svelte';
  *   {/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
+ * @example 12-column layout grid
+ * <Grid cols="12" gap="none">
+ *   <div class="col-span-4">Sidebar</div>
+ *   <div class="col-span-8">Content</div>
+ * </Grid>
+ *
+ * Semantic Gap Values (from tokens/spacing.ts):
+ *   - none:     0px       - No gap (for 12-col layouts)
+ *   - xs:       4px (1)   - Extra small gap
+ *   - sm:       8px (2)   - Small gap
+ *   - tight:    16px (4)  - Tight grid items (alias: md, content)
+ *   - standard: 24px (6)  - Standard grid items (alias: lg, section)
+ *   - spacious: 32px (8)  - Spacious grid items (alias: xl, layout)
  */
 interface Props {
     /** Number of columns or 'auto' for auto-fit */
-    cols?: '1' | '2' | '3' | '4' | '6' | 'auto';
+    cols?: '1' | '2' | '3' | '4' | '5' | '6' | '12' | 'auto';
     /** Gap between grid items - semantic names or Tailwind spacing scale */
-    gap?: 'tight' | 'standard' | 'spacious' | '0' | '2' | '3' | '4' | '6' | '8';
+    gap?: GapKey;
     /** Minimum width for auto-fit columns (only used when cols='auto') */
     minWidth?: string;
     /** HTML element to render as */

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Grid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,UAAU,KAAK;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAC5C,wEAAwE;IACxE,GAAG,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5E,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkEH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Grid.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Grid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,UAAU,KAAK;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;IACzD,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiDH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Stack.spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/Stack.spec.ts"],"names":[],"mappings":""}