@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/components/Layout/Responsive.svelte

@@ -1,75 +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>
+<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>

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

@@ -118,14 +118,14 @@ describe('Section Combinations', () => {
     const { container } = render(Section, {
       props: {
         title: 'Orders',
-        titleClass: 'text-blue-500',
+        titleClass: 'text-brand-primary',
         class: 'my-section'
       }
     });
     const section = container.querySelector('section');
     const h2 = container.querySelector('h2');
     expect(section).toHaveClass('my-section');
-    expect(h2).toHaveClass('text-blue-500');
+    expect(h2).toHaveClass('text-brand-primary');
   });
 
   test('all props together', () => {
@@ -134,12 +134,12 @@ describe('Section Combinations', () => {
         title: 'Statistics',
         titleSize: 'lg',
         gap: '6',
-        class: 'bg-white',
+        class: 'bg-card',
         titleClass: 'font-bold'
       }
     });
     const section = container.querySelector('section');
-    expect(section).toHaveClass('bg-white');
+    expect(section).toHaveClass('bg-card');
     expect(section).toHaveClass('space-y-6');
     expect(section).toHaveAttribute('aria-label', 'Statistics');
     const h2 = container.querySelector('h2');

package/dist/components/Layout/Section.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { typography } from '../../tokens/typography';
-
-  /**
-   * 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>
-   */
-
-  interface Props {
-    /** Section title (optional) */
-    title?: string;
-    /** Title size */
-    titleSize?: 'sm' | 'md' | 'lg';
-    /** Gap between title and content */
-    gap?: '2' | '3' | '4' | '6';
-    /** Additional CSS classes for the section */
-    class?: string;
-    /** Additional CSS classes for the title */
-    titleClass?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    title = '',
-    titleSize = 'md',
-    gap = '4',
-    class: className = '',
-    titleClass = '',
-    children
-  }: Props = $props();
-
-  const titleSizeMap: Record<string, string> = {
-    sm: typography.h4,
-    md: typography.h3,
-    lg: typography.h2
-  };
-
-  const gapMap: Record<string, string> = {
-    '2': 'space-y-2',
-    '3': 'space-y-3',
-    '4': 'space-y-4',
-    '6': 'space-y-6'
-  };
-
-  let sectionClasses = $derived(
-    [
-      title ? gapMap[gap] || 'space-y-4' : '',
-      className
-    ].filter(Boolean).join(' ')
-  );
-
-  let titleClasses = $derived(
-    [
-      titleSizeMap[titleSize] || titleSizeMap.md,
-      titleClass
-    ].filter(Boolean).join(' ')
-  );
-</script>
-
-<section class={sectionClasses} aria-label={title || undefined}>
-  {#if title}
-    <h2 class={titleClasses}>{title}</h2>
-  {/if}
-
-  {@render children?.()}
-</section>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { typography } from '../../tokens/typography';
+
+  /**
+   * 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>
+   */
+
+  interface Props {
+    /** Section title (optional) */
+    title?: string;
+    /** Title size */
+    titleSize?: 'sm' | 'md' | 'lg';
+    /** Gap between title and content */
+    gap?: '2' | '3' | '4' | '6';
+    /** Additional CSS classes for the section */
+    class?: string;
+    /** Additional CSS classes for the title */
+    titleClass?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    title = '',
+    titleSize = 'md',
+    gap = '4',
+    class: className = '',
+    titleClass = '',
+    children
+  }: Props = $props();
+
+  const titleSizeMap: Record<string, string> = {
+    sm: typography.h4,
+    md: typography.h3,
+    lg: typography.h2
+  };
+
+  const gapMap: Record<string, string> = {
+    '2': 'space-y-2',
+    '3': 'space-y-3',
+    '4': 'space-y-4',
+    '6': 'space-y-6'
+  };
+
+  let sectionClasses = $derived(
+    [
+      title ? gapMap[gap] || 'space-y-4' : '',
+      className
+    ].filter(Boolean).join(' ')
+  );
+
+  let titleClasses = $derived(
+    [
+      titleSizeMap[titleSize] || titleSizeMap.md,
+      titleClass
+    ].filter(Boolean).join(' ')
+  );
+</script>
+
+<section class={sectionClasses} aria-label={title || undefined}>
+  {#if title}
+    <h2 class={titleClasses}>{title}</h2>
+  {/if}
+
+  {@render children?.()}
+</section>

package/dist/components/Layout/ShowOnDesktop.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
-
-  interface Props {
-    /** 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 {
-    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',
-  };
-
-  let classes = $derived(`hidden ${breakpoint}:${displayClasses[display]} ${className}`.trim());
-</script>
-
-<div class={classes}>
-  {#if children}{@render children()}{/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+
+  interface Props {
+    /** 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 {
+    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',
+  };
+
+  let classes = $derived(`hidden ${breakpoint}:${displayClasses[display]} ${className}`.trim());
+</script>
+
+<div class={classes}>
+  {#if children}{@render children()}{/if}
+</div>

package/dist/components/Layout/ShowOnMobile.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
-
-  interface Props {
-    /** 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 {
-    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',
-  };
-
-  let classes = $derived(`${displayClasses[display]} ${breakpoint}:hidden ${className}`.trim());
-</script>
-
-<div class={classes}>
-  {#if children}{@render children()}{/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+
+  interface Props {
+    /** 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 {
+    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',
+  };
+
+  let classes = $derived(`${displayClasses[display]} ${breakpoint}:hidden ${className}`.trim());
+</script>
+
+<div class={classes}>
+  {#if children}{@render children()}{/if}
+</div>