@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/components/Layout/TwoColumn.svelte

@@ -1,108 +1,108 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type Gap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  type Ratio = 'equal' | '1:2' | '2:1' | '1:3' | '3:1';
-  type StackAt = 'sm' | 'md' | 'lg' | 'never';
-
-  interface Props {
-    /** Gap between columns */
-    gap?: Gap;
-    /** Column ratio */
-    ratio?: Ratio;
-    /** Breakpoint at which columns stack vertically */
-    stackAt?: StackAt;
-    /** Reverse order when stacked */
-    reverseOnStack?: boolean;
-    /** Vertical alignment */
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    /** Additional CSS classes */
-    class?: string;
-    /** Left column content */
-    left?: Snippet;
-    /** Right column content */
-    right?: Snippet;
-    /** Children (alternative to left/right slots) */
-    children?: Snippet;
-  }
-
-  let {
-    gap = 'md',
-    ratio = 'equal',
-    stackAt = 'md',
-    reverseOnStack = false,
-    align = 'stretch',
-    class: className = '',
-    left,
-    right,
-    children,
-  }: Props = $props();
-
-  const gapClasses: Record<Gap, string> = {
-    none: 'gap-0',
-    sm: 'gap-2',
-    md: 'gap-4',
-    lg: 'gap-6',
-    xl: 'gap-8',
-  };
-
-  // Stack classes: normal and reversed versions
-  const stackAtClasses: Record<StackAt, string> = {
-    sm: 'flex-col sm:flex-row',
-    md: 'flex-col md:flex-row',
-    lg: 'flex-col lg:flex-row',
-    never: 'flex-row',
-  };
-
-  const stackAtReversedClasses: Record<StackAt, string> = {
-    sm: 'flex-col-reverse sm:flex-row',
-    md: 'flex-col-reverse md:flex-row',
-    lg: 'flex-col-reverse lg:flex-row',
-    never: 'flex-row',
-  };
-
-  const alignClasses: Record<string, string> = {
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-    stretch: 'items-stretch',
-  };
-
-  // Ratio classes for each column
-  const ratioLeftClasses: Record<Ratio, string> = {
-    equal: 'flex-1',
-    '1:2': 'w-full md:w-1/3',
-    '2:1': 'w-full md:w-2/3',
-    '1:3': 'w-full md:w-1/4',
-    '3:1': 'w-full md:w-3/4',
-  };
-
-  const ratioRightClasses: Record<Ratio, string> = {
-    equal: 'flex-1',
-    '1:2': 'w-full md:w-2/3',
-    '2:1': 'w-full md:w-1/3',
-    '1:3': 'w-full md:w-3/4',
-    '3:1': 'w-full md:w-1/4',
-  };
-
-  let containerClasses = $derived([
-    'flex',
-    reverseOnStack ? stackAtReversedClasses[stackAt] : stackAtClasses[stackAt],
-    gapClasses[gap],
-    alignClasses[align],
-    className,
-  ].filter(Boolean).join(' '));
-</script>
-
-<div class={containerClasses}>
-  {#if left && right}
-    <div class={ratioLeftClasses[ratio]}>
-      {@render left()}
-    </div>
-    <div class={ratioRightClasses[ratio]}>
-      {@render right()}
-    </div>
-  {:else if children}
-    {@render children()}
-  {/if}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Gap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  type Ratio = 'equal' | '1:2' | '2:1' | '1:3' | '3:1';
+  type StackAt = 'sm' | 'md' | 'lg' | 'never';
+
+  interface Props {
+    /** Gap between columns */
+    gap?: Gap;
+    /** Column ratio */
+    ratio?: Ratio;
+    /** Breakpoint at which columns stack vertically */
+    stackAt?: StackAt;
+    /** Reverse order when stacked */
+    reverseOnStack?: boolean;
+    /** Vertical alignment */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Additional CSS classes */
+    class?: string;
+    /** Left column content */
+    left?: Snippet;
+    /** Right column content */
+    right?: Snippet;
+    /** Children (alternative to left/right slots) */
+    children?: Snippet;
+  }
+
+  let {
+    gap = 'md',
+    ratio = 'equal',
+    stackAt = 'md',
+    reverseOnStack = false,
+    align = 'stretch',
+    class: className = '',
+    left,
+    right,
+    children,
+  }: Props = $props();
+
+  const gapClasses: Record<Gap, string> = {
+    none: 'gap-0',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+  };
+
+  // Stack classes: normal and reversed versions
+  const stackAtClasses: Record<StackAt, string> = {
+    sm: 'flex-col sm:flex-row',
+    md: 'flex-col md:flex-row',
+    lg: 'flex-col lg:flex-row',
+    never: 'flex-row',
+  };
+
+  const stackAtReversedClasses: Record<StackAt, string> = {
+    sm: 'flex-col-reverse sm:flex-row',
+    md: 'flex-col-reverse md:flex-row',
+    lg: 'flex-col-reverse lg:flex-row',
+    never: 'flex-row',
+  };
+
+  const alignClasses: Record<string, string> = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+  };
+
+  // Ratio classes for each column
+  const ratioLeftClasses: Record<Ratio, string> = {
+    equal: 'flex-1',
+    '1:2': 'w-full md:w-1/3',
+    '2:1': 'w-full md:w-2/3',
+    '1:3': 'w-full md:w-1/4',
+    '3:1': 'w-full md:w-3/4',
+  };
+
+  const ratioRightClasses: Record<Ratio, string> = {
+    equal: 'flex-1',
+    '1:2': 'w-full md:w-2/3',
+    '2:1': 'w-full md:w-1/3',
+    '1:3': 'w-full md:w-3/4',
+    '3:1': 'w-full md:w-1/4',
+  };
+
+  let containerClasses = $derived([
+    'flex',
+    reverseOnStack ? stackAtReversedClasses[stackAt] : stackAtClasses[stackAt],
+    gapClasses[gap],
+    alignClasses[align],
+    className,
+  ].filter(Boolean).join(' '));
+</script>
+
+<div class={containerClasses}>
+  {#if left && right}
+    <div class={ratioLeftClasses[ratio]}>
+      {@render left()}
+    </div>
+    <div class={ratioRightClasses[ratio]}>
+      {@render right()}
+    </div>
+  {:else if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/Layout/__tests__/AppShell.test.js

@@ -23,27 +23,27 @@ describe('AppShell', () => {
         it('applies admin background by default', () => {
             const { container } = render(AppShell);
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+            expect(shell?.classList.contains('bg-bg-secondary')).toBe(true);
         });
         it('applies admin background for variant="admin"', () => {
             const { container } = render(AppShell, { variant: 'admin' });
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+            expect(shell?.classList.contains('bg-bg-secondary')).toBe(true);
         });
         it('applies performer background for variant="performer"', () => {
             const { container } = render(AppShell, { variant: 'performer' });
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-gray-50')).toBe(true);
+            expect(shell?.classList.contains('bg-bg-secondary')).toBe(true);
         });
         it('applies public background for variant="public"', () => {
             const { container } = render(AppShell, { variant: 'public' });
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-white')).toBe(true);
+            expect(shell?.classList.contains('bg-card')).toBe(true);
         });
         it('applies minimal background for variant="minimal"', () => {
             const { container } = render(AppShell, { variant: 'minimal' });
             const shell = container.querySelector('div');
-            expect(shell?.classList.contains('bg-white')).toBe(true);
+            expect(shell?.classList.contains('bg-card')).toBe(true);
         });
     });
     describe('fixedHeader prop', () => {

package/dist/components/Layout/__tests__/ContentSection.test.js

@@ -39,7 +39,7 @@ describe('ContentSection', () => {
             const { container } = render(ContentSection, { title: 'Title', subtitle: 'Subtitle' });
             const subtitle = container.querySelector('p');
             expect(subtitle?.classList.contains('text-sm')).toBe(true);
-            expect(subtitle?.classList.contains('text-gray-500')).toBe(true);
+            expect(subtitle?.classList.contains('text-muted-foreground')).toBe(true);
         });
     });
     describe('headingLevel prop', () => {

package/dist/components/Layout/__tests__/Heading.test.js

@@ -10,7 +10,7 @@ describe('Heading', () => {
         it('applies default variant classes', () => {
             const { container } = render(Heading);
             const h2 = container.querySelector('h2');
-            expect(h2?.classList.contains('text-gray-900')).toBe(true);
+            expect(h2?.classList.contains('text-text-primary')).toBe(true);
         });
         it('applies default size class based on level', () => {
             const { container } = render(Heading);
@@ -77,12 +77,12 @@ describe('Heading', () => {
         it('applies default variant classes', () => {
             const { container } = render(Heading, { variant: 'default' });
             const h2 = container.querySelector('h2');
-            expect(h2?.classList.contains('text-gray-900')).toBe(true);
+            expect(h2?.classList.contains('text-text-primary')).toBe(true);
         });
         it('applies muted variant classes', () => {
             const { container } = render(Heading, { variant: 'muted' });
             const h2 = container.querySelector('h2');
-            expect(h2?.classList.contains('text-gray-600')).toBe(true);
+            expect(h2?.classList.contains('text-text-secondary')).toBe(true);
         });
         it('applies primary variant classes', () => {
             const { container } = render(Heading, { variant: 'primary' });

package/dist/components/Layout/__tests__/PageContainer.test.js

@@ -102,18 +102,18 @@ describe('PageContainer', () => {
         it('applies no background for background="none"', () => {
             const { container } = render(PageContainer, { background: 'none' });
             const div = container.querySelector('div');
-            expect(div?.classList.contains('bg-white')).toBe(false);
-            expect(div?.classList.contains('bg-gray-50')).toBe(false);
+            expect(div?.classList.contains('bg-card')).toBe(false);
+            expect(div?.classList.contains('bg-bg-secondary')).toBe(false);
         });
         it('applies white background for background="white"', () => {
             const { container } = render(PageContainer, { background: 'white' });
             const div = container.querySelector('div');
-            expect(div?.classList.contains('bg-white')).toBe(true);
+            expect(div?.classList.contains('bg-card')).toBe(true);
         });
         it('applies gray background for background="gray"', () => {
             const { container } = render(PageContainer, { background: 'gray' });
             const div = container.querySelector('div');
-            expect(div?.classList.contains('bg-gray-50')).toBe(true);
+            expect(div?.classList.contains('bg-bg-secondary')).toBe(true);
         });
     });
     describe('class prop', () => {

package/dist/components/Layout/__tests__/Text.test.js

@@ -10,7 +10,7 @@ describe('Text', () => {
         it('applies primary variant classes by default', () => {
             const { container } = render(Text);
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-900')).toBe(true);
+            expect(p?.classList.contains('text-text-primary')).toBe(true);
         });
         it('applies base size class by default', () => {
             const { container } = render(Text);
@@ -22,37 +22,37 @@ describe('Text', () => {
         it('applies primary variant classes', () => {
             const { container } = render(Text, { variant: 'primary' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-900')).toBe(true);
+            expect(p?.classList.contains('text-text-primary')).toBe(true);
         });
         it('applies secondary variant classes', () => {
             const { container } = render(Text, { variant: 'secondary' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-500')).toBe(true);
+            expect(p?.classList.contains('text-muted-foreground')).toBe(true);
         });
         it('applies muted variant classes', () => {
             const { container } = render(Text, { variant: 'muted' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-400')).toBe(true);
+            expect(p?.classList.contains('text-muted-foreground')).toBe(true);
         });
         it('applies error variant classes', () => {
             const { container } = render(Text, { variant: 'error' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-red-600')).toBe(true);
+            expect(p?.classList.contains('text-accent-danger')).toBe(true);
         });
         it('applies success variant classes', () => {
             const { container } = render(Text, { variant: 'success' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-green-600')).toBe(true);
+            expect(p?.classList.contains('text-accent-success')).toBe(true);
         });
         it('applies warning variant classes', () => {
             const { container } = render(Text, { variant: 'warning' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-yellow-600')).toBe(true);
+            expect(p?.classList.contains('text-accent-warning')).toBe(true);
         });
         it('applies info variant classes', () => {
             const { container } = render(Text, { variant: 'info' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-blue-600')).toBe(true);
+            expect(p?.classList.contains('text-brand-primary')).toBe(true);
         });
     });
     describe('size prop', () => {
@@ -138,7 +138,7 @@ describe('Text', () => {
         it('preserves default classes when adding custom classes', () => {
             const { container } = render(Text, { class: 'custom-class' });
             const p = container.querySelector('p');
-            expect(p?.classList.contains('text-gray-900')).toBe(true);
+            expect(p?.classList.contains('text-text-primary')).toBe(true);
             expect(p?.classList.contains('text-base')).toBe(true);
             expect(p?.classList.contains('custom-class')).toBe(true);
         });

package/dist/components/Text.spec.js

@@ -1,89 +1,89 @@
-import { render } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { expect, describe, test } from 'vitest';
-import Text from './Text.svelte';
-
-function textSnippet(text) {
-  return createRawSnippet(() => ({
-    render: () => `<span>${text}</span>`
-  }));
-}
-
-describe('Text', () => {
-  test('renders a span element', () => {
-    const { container } = render(Text, { props: { children: textSnippet('Hello') } });
-    expect(container.querySelector('span')).toBeInTheDocument();
-    expect(container.textContent).toContain('Hello');
-  });
-
-  test('default size is md (text-base)', () => {
-    const { container } = render(Text, { props: { children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-base');
-  });
-
-  test('size xs', () => {
-    const { container } = render(Text, { props: { size: 'xs', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-xs');
-  });
-
-  test('size lg', () => {
-    const { container } = render(Text, { props: { size: 'lg', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-lg');
-  });
-
-  test('size 2xl', () => {
-    const { container } = render(Text, { props: { size: '2xl', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-2xl');
-  });
-
-  test('default color is default (gray-900)', () => {
-    const { container } = render(Text, { props: { children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-gray-900');
-  });
-
-  test('color muted', () => {
-    const { container } = render(Text, { props: { color: 'muted', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-gray-500');
-  });
-
-  test('color success', () => {
-    const { container } = render(Text, { props: { color: 'success', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-green-600');
-  });
-
-  test('color error', () => {
-    const { container } = render(Text, { props: { color: 'error', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-red-600');
-  });
-
-  test('leading tight', () => {
-    const { container } = render(Text, { props: { leading: 'tight', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('leading-tight');
-  });
-
-  test('leading relaxed', () => {
-    const { container } = render(Text, { props: { leading: 'relaxed', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('leading-relaxed');
-  });
-
-  test('no leading class when not provided', () => {
-    const { container } = render(Text, { props: { children: textSnippet('T') } });
-    const cls = container.querySelector('span').className;
-    expect(cls).not.toContain('leading-');
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(Text, { props: { class: 'custom-text', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('custom-text');
-  });
-
-  test('invalid size falls back to text-base', () => {
-    const { container } = render(Text, { props: { size: 'invalid', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-base');
-  });
-
-  test('invalid color falls back gracefully', () => {
-    const { container } = render(Text, { props: { color: 'invalid', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toBeInTheDocument();
-  });
-});
+import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Text from './Text.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Text', () => {
+  test('renders a span element', () => {
+    const { container } = render(Text, { props: { children: textSnippet('Hello') } });
+    expect(container.querySelector('span')).toBeInTheDocument();
+    expect(container.textContent).toContain('Hello');
+  });
+
+  test('default size is md (text-base)', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-base');
+  });
+
+  test('size xs', () => {
+    const { container } = render(Text, { props: { size: 'xs', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-xs');
+  });
+
+  test('size lg', () => {
+    const { container } = render(Text, { props: { size: 'lg', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-lg');
+  });
+
+  test('size 2xl', () => {
+    const { container } = render(Text, { props: { size: '2xl', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-2xl');
+  });
+
+  test('default color is default (gray-900)', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-text-primary');
+  });
+
+  test('color muted', () => {
+    const { container } = render(Text, { props: { color: 'muted', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-muted-foreground');
+  });
+
+  test('color success', () => {
+    const { container } = render(Text, { props: { color: 'success', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-accent-success');
+  });
+
+  test('color error', () => {
+    const { container } = render(Text, { props: { color: 'error', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-accent-danger');
+  });
+
+  test('leading tight', () => {
+    const { container } = render(Text, { props: { leading: 'tight', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('leading-tight');
+  });
+
+  test('leading relaxed', () => {
+    const { container } = render(Text, { props: { leading: 'relaxed', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('leading-relaxed');
+  });
+
+  test('no leading class when not provided', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    const cls = container.querySelector('span').className;
+    expect(cls).not.toContain('leading-');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Text, { props: { class: 'custom-text', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('custom-text');
+  });
+
+  test('invalid size falls back to text-base', () => {
+    const { container } = render(Text, { props: { size: 'invalid', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-base');
+  });
+
+  test('invalid color falls back gracefully', () => {
+    const { container } = render(Text, { props: { color: 'invalid', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toBeInTheDocument();
+  });
+});