@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/stories/PatternsGallery.svelte

@@ -1,115 +1,115 @@
-<script lang="ts">
-  // ============================================================================
-  // PATTERNS VISUAL GALLERY
-  // Displays ALL pattern components (Layer 3) - Layout & flow components
-  // ============================================================================
-
-  // Forms
-  import FormActions from '../patterns/forms/FormActions.svelte';
-  import FormGrid from '../patterns/forms/FormGrid.svelte';
-  import FormSection from '../patterns/forms/FormSection.svelte';
-  import FormValidationSummary from '../patterns/forms/FormValidationSummary.svelte';
-
-  // Navigation
-  import BottomNav from '../patterns/navigation/BottomNav.svelte';
-  import Header from '../patterns/navigation/Header.svelte';
-
-  // Page
-  import PageHeader from '../patterns/page/PageHeader.svelte';
-  import PageLayout from '../patterns/page/PageLayout.svelte';
-  import PageLoader from '../patterns/page/PageLoader.svelte';
-  import SectionHeader from '../patterns/page/SectionHeader.svelte';
-
-  // Data
-  import DataGrid from '../patterns/data/DataGrid.svelte';
-  import DataList from '../patterns/data/DataList.svelte';
-  import DataTable from '../patterns/data/DataTable.svelte';
-
+<script lang="ts">
+  // ============================================================================
+  // PATTERNS VISUAL GALLERY
+  // Displays ALL pattern components (Layer 3) - Layout & flow components
+  // ============================================================================
+
+  // Forms
+  import FormActions from '../patterns/forms/FormActions.svelte';
+  import FormGrid from '../patterns/forms/FormGrid.svelte';
+  import FormSection from '../patterns/forms/FormSection.svelte';
+  import FormValidationSummary from '../patterns/forms/FormValidationSummary.svelte';
+
+  // Navigation
+  import BottomNav from '../patterns/navigation/BottomNav.svelte';
+  import Header from '../patterns/navigation/Header.svelte';
+
+  // Page
+  import PageHeader from '../patterns/page/PageHeader.svelte';
+  import PageLayout from '../patterns/page/PageLayout.svelte';
+  import PageLoader from '../patterns/page/PageLoader.svelte';
+  import SectionHeader from '../patterns/page/SectionHeader.svelte';
+
+  // Data
+  import DataGrid from '../patterns/data/DataGrid.svelte';
+  import DataList from '../patterns/data/DataList.svelte';
+  import DataTable from '../patterns/data/DataTable.svelte';
+
   // Layout (canonical components from components/Layout)
   import Grid from '../components/Layout/Grid.svelte';
   import Stack from '../components/Layout/Stack.svelte';
   import Sidebar from '../components/Layout/Sidebar.svelte';
-
-  // Primitives for demos
-  import Button from '../primitives/Button/Button.svelte';
-  import Input from '../primitives/Input/Input.svelte';
-  import Card from '../primitives/Card.svelte';
-  import Badge from '../primitives/Badges/Badge.svelte';
-
-  // State
-  let isDark = $state(false);
-  let showPageLoader = $state(false);
-
-  function toggleDark() {
-    isDark = !isDark;
-    document.documentElement.classList.toggle('dark', isDark);
-  }
-
-  // Section styling
-  const sectionClass = (dark: boolean) =>
-    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
-
-  const headingClass = (dark: boolean) =>
-    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
-
-  const subheadingClass = (dark: boolean) =>
-    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
-
+
+  // Primitives for demos
+  import Button from '../primitives/Button/Button.svelte';
+  import Input from '../primitives/Input/Input.svelte';
+  import Card from '../primitives/Card.svelte';
+  import Badge from '../primitives/Badges/Badge.svelte';
+
+  // State
+  let isDark = $state(false);
+  let showPageLoader = $state(false);
+
+  function toggleDark() {
+    isDark = !isDark;
+    document.documentElement.classList.toggle('dark', isDark);
+  }
+
+  // Section styling
+  const sectionClass = (dark: boolean) =>
+    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
+
+  const headingClass = (dark: boolean) =>
+    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
+
+  const subheadingClass = (dark: boolean) =>
+    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
+
   // Demo data
   const sampleErrors: Record<string, string | null | undefined> = {
     email: 'Email is required',
     password: 'Password must be at least 8 characters',
   };
-
-  const tableData = [
-    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
-    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
-    { id: 3, name: 'Bob Wilson', email: 'bob@example.com', status: 'Inactive' },
-  ];
-
-  const tableColumns = [
-    { key: 'name', label: 'Name' },
-    { key: 'email', label: 'Email' },
-    { key: 'status', label: 'Status' },
-  ];
-
-  const gridItems = [
-    { id: 1, title: 'Item 1', description: 'Description for item 1' },
-    { id: 2, title: 'Item 2', description: 'Description for item 2' },
-    { id: 3, title: 'Item 3', description: 'Description for item 3' },
-    { id: 4, title: 'Item 4', description: 'Description for item 4' },
-    { id: 5, title: 'Item 5', description: 'Description for item 5' },
-    { id: 6, title: 'Item 6', description: 'Description for item 6' },
-  ];
-
-  const listItems = [
-    { id: 1, primary: 'Primary text 1', secondary: 'Secondary text' },
-    { id: 2, primary: 'Primary text 2', secondary: 'More details here' },
-    { id: 3, primary: 'Primary text 3', secondary: 'Additional info' },
-  ];
-
+
+  const tableData = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Pending' },
+    { id: 3, name: 'Bob Wilson', email: 'bob@example.com', status: 'Inactive' },
+  ];
+
+  const tableColumns = [
+    { key: 'name', label: 'Name' },
+    { key: 'email', label: 'Email' },
+    { key: 'status', label: 'Status' },
+  ];
+
+  const gridItems = [
+    { id: 1, title: 'Item 1', description: 'Description for item 1' },
+    { id: 2, title: 'Item 2', description: 'Description for item 2' },
+    { id: 3, title: 'Item 3', description: 'Description for item 3' },
+    { id: 4, title: 'Item 4', description: 'Description for item 4' },
+    { id: 5, title: 'Item 5', description: 'Description for item 5' },
+    { id: 6, title: 'Item 6', description: 'Description for item 6' },
+  ];
+
+  const listItems = [
+    { id: 1, primary: 'Primary text 1', secondary: 'Secondary text' },
+    { id: 2, primary: 'Primary text 2', secondary: 'More details here' },
+    { id: 3, primary: 'Primary text 3', secondary: 'Additional info' },
+  ];
+
   const bottomNavLinks = [
     { label: 'Home', href: '/', icon: 'home' },
     { label: 'Shows', href: '/shows', icon: 'shows' },
     { label: 'Profile', href: '/profile', icon: 'profile' },
   ];
-</script>
-
-<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
-  <!-- Header -->
-  <div class="flex items-center justify-between mb-8">
-    <div>
-      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Patterns Gallery</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">Layout & flow components (Layer 3)</p>
-    </div>
-    <button
-      onclick={toggleDark}
-      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
-    >
-      {isDark ? '☀️ Light' : '🌙 Dark'}
-    </button>
-  </div>
-
+</script>
+
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+  <!-- Header -->
+  <div class="flex items-center justify-between mb-8">
+    <div>
+      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Patterns Gallery</h1>
+      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">Layout & flow components (Layer 3)</p>
+    </div>
+    <button
+      onclick={toggleDark}
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+    >
+      {isDark ? '☀️ Light' : '🌙 Dark'}
+    </button>
+  </div>
+
   <!-- ========== PAGE PATTERNS ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>PageHeader</h2>
@@ -131,75 +131,75 @@
       </PageHeader>
     </div>
   </section>
-
-  <!-- ========== SECTION HEADER ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>SectionHeader</h2>
-    <p class={subheadingClass(isDark)}>Section dividers with optional description</p>
-
-    <div class="space-y-6">
-      <SectionHeader title="Basic Section" />
-      <SectionHeader title="With Description" description="Additional context about this section" />
+
+  <!-- ========== SECTION HEADER ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>SectionHeader</h2>
+    <p class={subheadingClass(isDark)}>Section dividers with optional description</p>
+
+    <div class="space-y-6">
+      <SectionHeader title="Basic Section" />
+      <SectionHeader title="With Description" description="Additional context about this section" />
       <SectionHeader title="With Action">
         {#snippet actions()}
           <Button variant="link" size="sm">View All</Button>
         {/snippet}
       </SectionHeader>
-    </div>
-  </section>
-
-  <!-- ========== PAGE LOADER ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>PageLoader</h2>
-    <p class={subheadingClass(isDark)}>Full-page loading indicator</p>
-
-    <Button onclick={() => {
-      showPageLoader = true;
-      setTimeout(() => showPageLoader = false, 2000);
-    }}>
-      Show PageLoader (2s)
-    </Button>
-  </section>
-
-  {#if showPageLoader}
-    <PageLoader />
-  {/if}
-
-  <!-- ========== FORM PATTERNS ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>FormSection</h2>
-    <p class={subheadingClass(isDark)}>Grouped form fields with title and description</p>
-
-    <FormSection title="Personal Information" description="Enter your personal details">
-      <div class="space-y-4">
-        <Input label="Full Name" placeholder="John Doe" />
-        <Input label="Email" type="email" placeholder="john@example.com" />
-      </div>
-    </FormSection>
-  </section>
-
-  <!-- ========== FORM GRID ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>FormGrid</h2>
-    <p class={subheadingClass(isDark)}>Responsive grid layout for form fields</p>
-
-    <FormGrid cols={2}>
-      <Input label="First Name" placeholder="John" />
-      <Input label="Last Name" placeholder="Doe" />
-      <Input label="Email" type="email" placeholder="john@example.com" />
-      <Input label="Phone" type="tel" placeholder="(555) 123-4567" />
-    </FormGrid>
-
-    <div class="mt-6">
-      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">3 Columns</p>
-      <FormGrid cols={3}>
-        <Input label="City" placeholder="New York" />
-        <Input label="State" placeholder="NY" />
-        <Input label="Zip" placeholder="10001" />
-      </FormGrid>
-    </div>
-  </section>
-
+    </div>
+  </section>
+
+  <!-- ========== PAGE LOADER ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>PageLoader</h2>
+    <p class={subheadingClass(isDark)}>Full-page loading indicator</p>
+
+    <Button onclick={() => {
+      showPageLoader = true;
+      setTimeout(() => showPageLoader = false, 2000);
+    }}>
+      Show PageLoader (2s)
+    </Button>
+  </section>
+
+  {#if showPageLoader}
+    <PageLoader />
+  {/if}
+
+  <!-- ========== FORM PATTERNS ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>FormSection</h2>
+    <p class={subheadingClass(isDark)}>Grouped form fields with title and description</p>
+
+    <FormSection title="Personal Information" description="Enter your personal details">
+      <div class="space-y-4">
+        <Input label="Full Name" placeholder="John Doe" />
+        <Input label="Email" type="email" placeholder="john@example.com" />
+      </div>
+    </FormSection>
+  </section>
+
+  <!-- ========== FORM GRID ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>FormGrid</h2>
+    <p class={subheadingClass(isDark)}>Responsive grid layout for form fields</p>
+
+    <FormGrid cols={2}>
+      <Input label="First Name" placeholder="John" />
+      <Input label="Last Name" placeholder="Doe" />
+      <Input label="Email" type="email" placeholder="john@example.com" />
+      <Input label="Phone" type="tel" placeholder="(555) 123-4567" />
+    </FormGrid>
+
+    <div class="mt-6">
+      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">3 Columns</p>
+      <FormGrid cols={3}>
+        <Input label="City" placeholder="New York" />
+        <Input label="State" placeholder="NY" />
+        <Input label="Zip" placeholder="10001" />
+      </FormGrid>
+    </div>
+  </section>
+
   <!-- ========== FORM ACTIONS ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>FormActions</h2>
@@ -222,15 +222,15 @@
       </div>
     </div>
   </section>
-
-  <!-- ========== FORM VALIDATION SUMMARY ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>FormValidationSummary</h2>
-    <p class={subheadingClass(isDark)}>Summary of form validation errors</p>
-
-    <FormValidationSummary errors={sampleErrors} />
-  </section>
-
+
+  <!-- ========== FORM VALIDATION SUMMARY ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>FormValidationSummary</h2>
+    <p class={subheadingClass(isDark)}>Summary of form validation errors</p>
+
+    <FormValidationSummary errors={sampleErrors} />
+  </section>
+
   <!-- ========== DATA TABLE ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>DataTable</h2>
@@ -255,7 +255,7 @@
       {/snippet}
     </DataTable>
   </section>
-
+
   <!-- ========== DATA LIST ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>DataList</h2>
@@ -275,7 +275,7 @@
       </DataList>
     </div>
   </section>
-
+
   <!-- ========== DATA GRID ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>DataGrid</h2>
@@ -290,35 +290,35 @@
       {/snippet}
     </DataGrid>
   </section>
-
-  <!-- ========== LAYOUT: STACK ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Stack</h2>
-    <p class={subheadingClass(isDark)}>Vertical spacing utility</p>
-
-    <div class="max-w-sm">
-      <Stack gap="md">
-        <Card>Stack Item 1</Card>
-        <Card>Stack Item 2</Card>
-        <Card>Stack Item 3</Card>
-      </Stack>
-    </div>
-  </section>
-
-  <!-- ========== LAYOUT: GRID ========== -->
-  <section class={sectionClass(isDark)}>
-    <h2 class={headingClass(isDark)}>Grid</h2>
-    <p class={subheadingClass(isDark)}>Responsive grid layout utility</p>
-
-    <Grid cols="4" gap="md">
-      {#each [1, 2, 3, 4, 5, 6, 7, 8] as i}
-        <Card class="text-center py-4">
-          <span class="text-2xl font-bold">{i}</span>
-        </Card>
-      {/each}
-    </Grid>
-  </section>
-
+
+  <!-- ========== LAYOUT: STACK ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Stack</h2>
+    <p class={subheadingClass(isDark)}>Vertical spacing utility</p>
+
+    <div class="max-w-sm">
+      <Stack gap="md">
+        <Card>Stack Item 1</Card>
+        <Card>Stack Item 2</Card>
+        <Card>Stack Item 3</Card>
+      </Stack>
+    </div>
+  </section>
+
+  <!-- ========== LAYOUT: GRID ========== -->
+  <section class={sectionClass(isDark)}>
+    <h2 class={headingClass(isDark)}>Grid</h2>
+    <p class={subheadingClass(isDark)}>Responsive grid layout utility</p>
+
+    <Grid cols="4" gap="md">
+      {#each [1, 2, 3, 4, 5, 6, 7, 8] as i}
+        <Card class="text-center py-4">
+          <span class="text-2xl font-bold">{i}</span>
+        </Card>
+      {/each}
+    </Grid>
+  </section>
+
   <!-- ========== LAYOUT: SIDEBAR ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>Sidebar</h2>
@@ -344,7 +344,7 @@
       </Sidebar>
     </div>
   </section>
-
+
   <!-- ========== NAVIGATION: HEADER ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>Header</h2>
@@ -363,7 +363,7 @@
       </div>
     </div>
   </section>
-
+
   <!-- ========== NAVIGATION: BOTTOM NAV ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>BottomNav</h2>
@@ -373,7 +373,7 @@
       <BottomNav links={bottomNavLinks} />
     </div>
   </section>
-
+
   <!-- ========== PAGE LAYOUT ========== -->
   <section class={sectionClass(isDark)}>
     <h2 class={headingClass(isDark)}>PageLayout</h2>
@@ -396,4 +396,4 @@
       </PageLayout>
     </div>
   </section>
-</div>
+</div>

package/dist/stories/PrimitivesGallery.spec.d.ts

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

package/dist/stories/PrimitivesGallery.spec.d.ts.map

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