@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -1,74 +1,74 @@
-<script lang="ts">
-  import { safeSlide } from "../../utils/transitions.js";
-  import { cubicOut } from "svelte/easing";
-  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-
-  interface Props {
-    errors?: Record<string, string | null | undefined>;
-    show?: boolean;
-    fieldLabels?: Record<string, string>;
-    fieldIds?: Record<string, string>;
-  }
-
-  let {
-    errors = {},
-    show = false,
-    fieldLabels = {},
-    fieldIds = {},
-  }: Props = $props();
-
-  // Get list of fields with errors
-  let errorFields = $derived(Object.entries(errors)
-    .filter(([_, message]) => message && message.trim() !== "")
-    .map(([key, message]) => ({
-      key,
-      label: fieldLabels[key] || key,
-      message,
-      elementId: fieldIds[key] || key
-    })));
-
-  let hasErrors = $derived(errorFields.length > 0);
-
-  function scrollToField(elementId: string) {
-    const element = document.getElementById(elementId);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "center" });
-      if (element.focus) {
-        setTimeout(() => element.focus(), 300);
-      }
-    }
-  }
-</script>
-
-{#if show && hasErrors}
-  <div
-    transition:safeSlide={{ duration: 300, easing: cubicOut }}
-    class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4"
-    role="alert"
-    aria-live="polite"
-  >
-    <div class="flex items-start gap-2">
-      <WarningIcon class="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
-      <div class="flex-1">
-        <p class="text-sm font-medium text-red-800 dark:text-red-400">
-          Please fix the following:
-        </p>
-        <ul class="mt-2 space-y-1">
-          {#each errorFields as field}
-            <li>
-              <Button
-                variant="link"
-                size="sm"
-                class="text-red-600! dark:text-red-500! hover:text-red-900! dark:hover:text-red-400!"
-                onclick={() => scrollToField(field.elementId)}
-              >
-                {field.label}
-              </Button>
-            </li>
-          {/each}
-        </ul>
-      </div>
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { safeSlide } from "../../utils/transitions.js";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+
+  interface Props {
+    errors?: Record<string, string | null | undefined>;
+    show?: boolean;
+    fieldLabels?: Record<string, string>;
+    fieldIds?: Record<string, string>;
+  }
+
+  let {
+    errors = {},
+    show = false,
+    fieldLabels = {},
+    fieldIds = {},
+  }: Props = $props();
+
+  // Get list of fields with errors
+  let errorFields = $derived(Object.entries(errors)
+    .filter(([_, message]) => message && message.trim() !== "")
+    .map(([key, message]) => ({
+      key,
+      label: fieldLabels[key] || key,
+      message,
+      elementId: fieldIds[key] || key
+    })));
+
+  let hasErrors = $derived(errorFields.length > 0);
+
+  function scrollToField(elementId: string) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+      if (element.focus) {
+        setTimeout(() => element.focus(), 300);
+      }
+    }
+  }
+</script>
+
+{#if show && hasErrors}
+  <div
+    transition:safeSlide={{ duration: 300, easing: cubicOut }}
+    class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4"
+    role="alert"
+    aria-live="polite"
+  >
+    <div class="flex items-start gap-2">
+      <WarningIcon class="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
+      <div class="flex-1">
+        <p class="text-sm font-medium text-red-800 dark:text-red-400">
+          Please fix the following:
+        </p>
+        <ul class="mt-2 space-y-1">
+          {#each errorFields as field}
+            <li>
+              <Button
+                variant="link"
+                size="sm"
+                class="text-red-600! dark:text-red-500! hover:text-red-900! dark:hover:text-red-400!"
+                onclick={() => scrollToField(field.elementId)}
+              >
+                {field.label}
+              </Button>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/patterns/layout/Sidebar.svelte

@@ -1,39 +1,39 @@
-<script>
-  let {
-    sidebarWidth = 'medium',
-    sidebarPosition = 'right',
-    class: className = '',
-    sidebar,
-    children,
-  } = $props();
-
-  const widthClasses = {
-    narrow: 'lg:w-72',
-    medium: 'lg:w-80',
-    wide: 'lg:w-96',
-  };
-
-  const mainWidthClasses = {
-    narrow: 'lg:w-[calc(100%-18rem)]',
-    medium: 'lg:w-[calc(100%-20rem)]',
-    wide: 'lg:w-[calc(100%-24rem)]',
-  };
-</script>
-
-<div class="flex flex-col lg:flex-row gap-6 {className}">
-  {#if sidebarPosition === 'left'}
-    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
-      {@render sidebar?.()}
-    </aside>
-    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
-      {@render children?.()}
-    </main>
-  {:else}
-    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
-      {@render children?.()}
-    </main>
-    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
-      {@render sidebar?.()}
-    </aside>
-  {/if}
-</div>
+<script>
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    class: className = '',
+    sidebar,
+    children,
+  } = $props();
+
+  const widthClasses = {
+    narrow: 'lg:w-72',
+    medium: 'lg:w-80',
+    wide: 'lg:w-96',
+  };
+
+  const mainWidthClasses = {
+    narrow: 'lg:w-[calc(100%-18rem)]',
+    medium: 'lg:w-[calc(100%-20rem)]',
+    wide: 'lg:w-[calc(100%-24rem)]',
+  };
+</script>
+
+<div class="flex flex-col lg:flex-row gap-6 {className}">
+  {#if sidebarPosition === 'left'}
+    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
+      {@render sidebar?.()}
+    </aside>
+    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
+      {@render children?.()}
+    </main>
+  {:else}
+    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
+      {@render children?.()}
+    </main>
+    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
+      {@render sidebar?.()}
+    </aside>
+  {/if}
+</div>

package/dist/patterns/layout/index.js

@@ -1,29 +1,29 @@
-// Layout pattern components
-// Note: These are canonical exports from components/Layout/
-
-// Core layout primitives
-export { default as Grid } from '../../components/Layout/Grid.svelte';
-export { default as Section } from '../../components/Layout/Section.svelte';
-export { default as Sidebar } from '../../components/Layout/Sidebar.svelte';
-export { default as Stack } from '../../components/Layout/Stack.svelte';
-
-// Typography components
-// Note: Text is exported from components/Text.svelte (simpler API)
-// Note: Heading is exported from components/Heading.svelte (canonical export)
-// Layout/Text.svelte and Layout/Heading.svelte are internal - use the main exports
-
-// Container components
-export { default as PageContainer } from '../../components/Layout/PageContainer.svelte';
-export { default as ContentSection } from '../../components/Layout/ContentSection.svelte';
-export { default as TwoColumn } from '../../components/Layout/TwoColumn.svelte';
-
-// App shell
-export { default as AppShell } from '../../components/Layout/AppShell.svelte';
-
-// Note: EmptyState is exported from recipes/feedback to avoid naming conflict
-// Use: import { EmptyState } from '@getmicdrop/svelte-components' (from recipes)
-
-// Responsive utilities
-export { default as Responsive } from '../../components/Layout/Responsive.svelte';
-export { default as ShowOnMobile } from '../../components/Layout/ShowOnMobile.svelte';
-export { default as ShowOnDesktop } from '../../components/Layout/ShowOnDesktop.svelte';
+// Layout pattern components
+// Note: These are canonical exports from components/Layout/
+
+// Core layout primitives
+export { default as Grid } from '../../components/Layout/Grid.svelte';
+export { default as Section } from '../../components/Layout/Section.svelte';
+export { default as Sidebar } from '../../components/Layout/Sidebar.svelte';
+export { default as Stack } from '../../components/Layout/Stack.svelte';
+
+// Typography components
+// Note: Text is exported from components/Text.svelte (simpler API)
+// Note: Heading is exported from components/Heading.svelte (canonical export)
+// Layout/Text.svelte and Layout/Heading.svelte are internal - use the main exports
+
+// Container components
+export { default as PageContainer } from '../../components/Layout/PageContainer.svelte';
+export { default as ContentSection } from '../../components/Layout/ContentSection.svelte';
+export { default as TwoColumn } from '../../components/Layout/TwoColumn.svelte';
+
+// App shell
+export { default as AppShell } from '../../components/Layout/AppShell.svelte';
+
+// Note: EmptyState is exported from recipes/feedback to avoid naming conflict
+// Use: import { EmptyState } from '@getmicdrop/svelte-components' (from recipes)
+
+// Responsive utilities
+export { default as Responsive } from '../../components/Layout/Responsive.svelte';
+export { default as ShowOnMobile } from '../../components/Layout/ShowOnMobile.svelte';
+export { default as ShowOnDesktop } from '../../components/Layout/ShowOnDesktop.svelte';

package/dist/patterns/navigation/BottomNav.stories.svelte

@@ -1,117 +1,117 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import BottomNav from './BottomNav.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Layout/BottomNav',
-    component: BottomNav,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  
-  const defaultLinks = [
-    { label: 'Home', href: '/', icon: 'Home' },
-    { label: 'Shows', href: '/shows', icon: 'Shows' },
-    { label: 'Availability', href: '/availability', icon: 'Availability' },
-    { label: 'Profile', href: '/profile', icon: 'Profile' },
-  ];
-
-  const extendedLinks = [
-    { label: 'Home', href: '/', icon: 'Home' },
-    { label: 'Shows', href: '/shows', icon: 'Shows' },
-    { label: 'Availability', href: '/availability', icon: 'Availability' },
-    { label: 'Messages', href: '/messages', icon: 'Message' },
-    { label: 'Profile', href: '/profile', icon: 'Profile' },
-  ];
-</script>
-
-<Story name="Default (4 Tabs)">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Mobile Bottom Navigation (4 tabs)</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
-      <div class="h-64 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <BottomNav links={defaultLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="With 5 Tabs">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Extended Navigation (5 tabs)</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
-      <div class="h-64 bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <BottomNav links={extendedLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Different Icon Set">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Custom Icons</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
-      <div class="h-64 bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <BottomNav
-          links={[
-            { label: 'Dashboard', href: '/', icon: 'Home' },
-            { label: 'Events', href: '/events', icon: 'Shows' },
-            { label: 'Notifications', href: '/notifications', icon: 'Notification' },
-            { label: 'Settings', href: '/settings', icon: 'Profile' },
-          ]}
-        />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Mobile Viewport">
-  <div class="max-w-[375px] mx-auto bg-white dark:bg-gray-900 shadow-2xl rounded-3xl overflow-hidden">
-    <!-- Mock iPhone screen -->
-    <div class="h-[667px] flex flex-col">
-      <!-- Status bar -->
-      <div class="h-6 bg-black flex items-center justify-between px-4">
-        <span class="text-white text-xs">9:41</span>
-        <span class="text-white text-xs">100%</span>
-      </div>
-
-      <!-- Content area -->
-      <div class="flex-1 bg-gradient-to-br from-blue-50 to-purple-50 p-4">
-        <h1 class="text-2xl font-bold mb-2">Home</h1>
-        <p class="text-gray-500 dark:text-gray-400">This is a mobile viewport simulation</p>
-      </div>
-
-      <!-- Bottom navigation -->
-      <div class="flex border-t bg-white dark:bg-gray-900 safe-bottom">
-        <BottomNav links={defaultLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Dark Mode">
-  <div class="dark bg-gray-900 p-4 min-h-screen">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Dark Mode Bottom Navigation</p>
-    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-2xl overflow-hidden">
-      <div class="h-64 bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center">
-        <p class="text-gray-500 dark:text-gray-400">Dark Mode Content</p>
-      </div>
-      <div class="flex border-t border-gray-700 bg-gray-800">
-        <BottomNav links={defaultLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import BottomNav from './BottomNav.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Layout/BottomNav',
+    component: BottomNav,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  
+  const defaultLinks = [
+    { label: 'Home', href: '/', icon: 'Home' },
+    { label: 'Shows', href: '/shows', icon: 'Shows' },
+    { label: 'Availability', href: '/availability', icon: 'Availability' },
+    { label: 'Profile', href: '/profile', icon: 'Profile' },
+  ];
+
+  const extendedLinks = [
+    { label: 'Home', href: '/', icon: 'Home' },
+    { label: 'Shows', href: '/shows', icon: 'Shows' },
+    { label: 'Availability', href: '/availability', icon: 'Availability' },
+    { label: 'Messages', href: '/messages', icon: 'Message' },
+    { label: 'Profile', href: '/profile', icon: 'Profile' },
+  ];
+</script>
+
+<Story name="Default (4 Tabs)">
+  <div class="bg-gray-100 dark:bg-gray-700 p-4">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Mobile Bottom Navigation (4 tabs)</p>
+    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
+        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white dark:bg-gray-900">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="With 5 Tabs">
+  <div class="bg-gray-100 dark:bg-gray-700 p-4">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Extended Navigation (5 tabs)</p>
+    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center">
+        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white dark:bg-gray-900">
+        <BottomNav links={extendedLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Different Icon Set">
+  <div class="bg-gray-100 dark:bg-gray-700 p-4">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Custom Icons</p>
+    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center">
+        <p class="text-gray-500 dark:text-gray-400">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white dark:bg-gray-900">
+        <BottomNav
+          links={[
+            { label: 'Dashboard', href: '/', icon: 'Home' },
+            { label: 'Events', href: '/events', icon: 'Shows' },
+            { label: 'Notifications', href: '/notifications', icon: 'Notification' },
+            { label: 'Settings', href: '/settings', icon: 'Profile' },
+          ]}
+        />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Mobile Viewport">
+  <div class="max-w-[375px] mx-auto bg-white dark:bg-gray-900 shadow-2xl rounded-3xl overflow-hidden">
+    <!-- Mock iPhone screen -->
+    <div class="h-[667px] flex flex-col">
+      <!-- Status bar -->
+      <div class="h-6 bg-black flex items-center justify-between px-4">
+        <span class="text-white text-xs">9:41</span>
+        <span class="text-white text-xs">100%</span>
+      </div>
+
+      <!-- Content area -->
+      <div class="flex-1 bg-gradient-to-br from-blue-50 to-purple-50 p-4">
+        <h1 class="text-2xl font-bold mb-2">Home</h1>
+        <p class="text-gray-500 dark:text-gray-400">This is a mobile viewport simulation</p>
+      </div>
+
+      <!-- Bottom navigation -->
+      <div class="flex border-t bg-white dark:bg-gray-900 safe-bottom">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Dark Mode">
+  <div class="dark bg-gray-900 p-4 min-h-screen">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Dark Mode Bottom Navigation</p>
+    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-2xl overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center">
+        <p class="text-gray-500 dark:text-gray-400">Dark Mode Content</p>
+      </div>
+      <div class="flex border-t border-gray-700 bg-gray-800">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>