@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/patterns/forms/FormActions.stories.svelte

@@ -1,97 +1,97 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  const { Story } = defineMeta({
-    title: 'Components/FormActions',
-    component: FormActions,
-    tags: ['autodocs'],
-    argTypes: {
-      submitLabel: { control: 'text' },
-      cancelLabel: { control: 'text' },
-      isSubmitting: { control: 'boolean' },
-      isSuccess: { control: 'boolean' },
-      disabled: { control: 'boolean' },
-      showCancel: { control: 'boolean' },
-    },
-  });
-
-</script>
-
-<script>
-    import FormActions from './FormActions.svelte';
-
-  let submitting = false;
-  let success = false;
-
-  function handleSubmit() {
-    submitting = true;
-    setTimeout(() => {
-      submitting = false;
-      success = true;
-      setTimeout(() => success = false, 2000);
-    }, 2000);
-  }
-</script>
-
-
-<Story
-  name="Default"
-  args={{
-    submitLabel: 'Save',
-    cancelLabel: 'Cancel',
-    onCancel: () => console.log('Cancel clicked'),
-    onSubmit: () => console.log('Submit clicked'),
-  }}
-/>
-
-<Story
-  name="Submitting State"
-  args={{
-    isSubmitting: true,
-    submitLabel: 'Save Changes',
-  }}
-/>
-
-<Story
-  name="Success State"
-  args={{
-    isSuccess: true,
-    submitLabel: 'Save Changes',
-  }}
-/>
-
-<Story name="Interactive Submit">
-  <div class="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg">
-    <FormActions
-      submitLabel="Save Changes"
-      isSubmitting={submitting}
-      isSuccess={success}
-      onSubmit={handleSubmit}
-      onCancel={() => console.log('Cancelled')}
-    />
-  </div>
-</Story>
-
-<Story
-  name="No Cancel Button"
-  args={{
-    showCancel: false,
-    submitLabel: 'Continue',
-  }}
-/>
-
-<Story
-  name="Disabled State"
-  args={{
-    disabled: true,
-    submitLabel: 'Submit',
-  }}
-/>
-
-<Story
-  name="Custom Labels"
-  args={{
-    submitLabel: 'Confirm Payment',
-    cancelLabel: 'Go Back',
-  }}
-/>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const { Story } = defineMeta({
+    title: 'Components/FormActions',
+    component: FormActions,
+    tags: ['autodocs'],
+    argTypes: {
+      submitLabel: { control: 'text' },
+      cancelLabel: { control: 'text' },
+      isSubmitting: { control: 'boolean' },
+      isSuccess: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+      showCancel: { control: 'boolean' },
+    },
+  });
+
+</script>
+
+<script>
+    import FormActions from './FormActions.svelte';
+
+  let submitting = false;
+  let success = false;
+
+  function handleSubmit() {
+    submitting = true;
+    setTimeout(() => {
+      submitting = false;
+      success = true;
+      setTimeout(() => success = false, 2000);
+    }, 2000);
+  }
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    submitLabel: 'Save',
+    cancelLabel: 'Cancel',
+    onCancel: () => console.log('Cancel clicked'),
+    onSubmit: () => console.log('Submit clicked'),
+  }}
+/>
+
+<Story
+  name="Submitting State"
+  args={{
+    isSubmitting: true,
+    submitLabel: 'Save Changes',
+  }}
+/>
+
+<Story
+  name="Success State"
+  args={{
+    isSuccess: true,
+    submitLabel: 'Save Changes',
+  }}
+/>
+
+<Story name="Interactive Submit">
+  <div class="bg-bg-secondary p-8 rounded-lg">
+    <FormActions
+      submitLabel="Save Changes"
+      isSubmitting={submitting}
+      isSuccess={success}
+      onSubmit={handleSubmit}
+      onCancel={() => console.log('Cancelled')}
+    />
+  </div>
+</Story>
+
+<Story
+  name="No Cancel Button"
+  args={{
+    showCancel: false,
+    submitLabel: 'Continue',
+  }}
+/>
+
+<Story
+  name="Disabled State"
+  args={{
+    disabled: true,
+    submitLabel: 'Submit',
+  }}
+/>
+
+<Story
+  name="Custom Labels"
+  args={{
+    submitLabel: 'Confirm Payment',
+    cancelLabel: 'Go Back',
+  }}
+/>

package/dist/patterns/forms/FormActions.svelte

@@ -1,46 +1,46 @@
-<script>
-  import Button from "../../primitives/Button/Button.svelte";
-
-  let {
-    onCancel = () => {},
-    onSubmit = () => {},
-    submitLabel = "Save",
-    cancelLabel = "Cancel",
-    isSubmitting = false,
-    isSuccess = false,
-    disabled = false,
-    showCancel = true,
-    submitVariant = "default",
-    cancelVariant = "alternative",
-    submitType = "submit",
-    className = "",
-  } = $props();
-</script>
-
-<div
-  class="w-full md:static flex bg-white dark:bg-gray-800 md:bg-transparent md:dark:bg-transparent md:rounded-b-lg items-center justify-center md:justify-end gap-4 py-5 px-4 {className}"
->
-  {#if showCancel}
-    <Button
-      variant={cancelVariant}
-      type="button"
-      size="full-md-auto"
-      minWidth="action"
-      onclick={onCancel}
-    >
-      {cancelLabel}
-    </Button>
-  {/if}
-  <Button
-    variant={submitVariant}
-    type={submitType}
-    size="full-md-auto"
-    minWidth="action"
-    loading={isSubmitting}
-    success={isSuccess}
-    disabled={disabled || isSubmitting}
-    onclick={onSubmit}
-  >
-    {submitLabel}
-  </Button>
-</div>
+<script>
+  import Button from "../../primitives/Button/Button.svelte";
+
+  let {
+    onCancel = () => {},
+    onSubmit = () => {},
+    submitLabel = "Save",
+    cancelLabel = "Cancel",
+    isSubmitting = false,
+    isSuccess = false,
+    disabled = false,
+    showCancel = true,
+    submitVariant = "default",
+    cancelVariant = "alternative",
+    submitType = "submit",
+    className = "",
+  } = $props();
+</script>
+
+<div
+  class="w-full md:static flex bg-card md:bg-transparent md: md:rounded-b-lg items-center justify-center md:justify-end gap-4 py-5 px-4 {className}"
+>
+  {#if showCancel}
+    <Button
+      variant={cancelVariant}
+      type="button"
+      size="full-md-auto"
+      minWidth="action"
+      onclick={onCancel}
+    >
+      {cancelLabel}
+    </Button>
+  {/if}
+  <Button
+    variant={submitVariant}
+    type={submitType}
+    size="full-md-auto"
+    minWidth="action"
+    loading={isSubmitting}
+    success={isSuccess}
+    disabled={disabled || isSubmitting}
+    onclick={onSubmit}
+  >
+    {submitLabel}
+  </Button>
+</div>

package/dist/patterns/forms/FormGrid.svelte

@@ -1,33 +1,33 @@
-<script>
-  let {
-    cols = 2,
-    gap = 4,
-    class: className = '',
-    children,
-  } = $props();
-
-  // Map cols to Tailwind grid classes
-  const colsClass = {
-    1: 'md:grid-cols-1',
-    2: 'md:grid-cols-2',
-    3: 'md:grid-cols-3',
-    4: 'md:grid-cols-4'
-  };
-
-  // Map gap to Tailwind gap classes
-  const gapClass = {
-    2: 'gap-2',
-    3: 'gap-3',
-    4: 'gap-4',
-    5: 'gap-5',
-    6: 'gap-6',
-    8: 'gap-8'
-  };
-
-  let gridCols = $derived(colsClass[cols] || colsClass[2]);
-  let gridGap = $derived(gapClass[gap] || gapClass[4]);
-</script>
-
-<div class="grid grid-cols-1 {gridCols} {gridGap} {className}">
-  {@render children?.()}
-</div>
+<script>
+  let {
+    cols = 2,
+    gap = 4,
+    class: className = '',
+    children,
+  } = $props();
+
+  // Map cols to Tailwind grid classes
+  const colsClass = {
+    1: 'md:grid-cols-1',
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4'
+  };
+
+  // Map gap to Tailwind gap classes
+  const gapClass = {
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    5: 'gap-5',
+    6: 'gap-6',
+    8: 'gap-8'
+  };
+
+  let gridCols = $derived(colsClass[cols] || colsClass[2]);
+  let gridGap = $derived(gapClass[gap] || gapClass[4]);
+</script>
+
+<div class="grid grid-cols-1 {gridCols} {gridGap} {className}">
+  {@render children?.()}
+</div>

package/dist/patterns/forms/FormSection.spec.js

@@ -101,16 +101,16 @@ describe('FormSection Divider', () => {
     expect(container.querySelector('hr')).not.toBeInTheDocument();
   });
 
-  test('divider has border-gray-200', () => {
+  test('divider has border-border', () => {
     const { container } = render(FormSection, { props: { divider: true } });
     const hr = container.querySelector('hr');
-    expect(hr).toHaveClass('border-gray-200');
+    expect(hr).toHaveClass('border-border');
   });
 
-  test('divider has dark mode class', () => {
+  test('divider uses token-based border class', () => {
     const { container } = render(FormSection, { props: { divider: true } });
     const hr = container.querySelector('hr');
-    expect(hr).toHaveClass('dark:border-gray-700');
+    expect(hr).toHaveClass('border-border');
   });
 });
 

package/dist/patterns/forms/FormSection.svelte

@@ -1,33 +1,33 @@
-<script>
-  import { typography } from '../../tokens/typography';
-
-  let {
-    title = '',
-    description = '',
-    bordered = false,
-    divider = false,
-    class: className = '',
-    children,
-  } = $props();
-</script>
-
-<section class="space-y-4 {bordered ? 'border border-gray-200 dark:border-gray-700 rounded-lg p-4' : ''} {className}">
-  {#if divider}
-    <hr class="border-gray-200 dark:border-gray-700" />
-  {/if}
-
-  {#if title || description}
-    <div class="space-y-1">
-      {#if title}
-        <h3 class={typography.h3}>{title}</h3>
-      {/if}
-      {#if description}
-        <p class={typography.smMuted}>{description}</p>
-      {/if}
-    </div>
-  {/if}
-
-  <div class="space-y-4">
-    {@render children?.()}
-  </div>
-</section>
+<script>
+  import { typography } from '../../tokens/typography';
+
+  let {
+    title = '',
+    description = '',
+    bordered = false,
+    divider = false,
+    class: className = '',
+    children,
+  } = $props();
+</script>
+
+<section class="space-y-4 {bordered ? 'border border-border rounded-lg p-4' : ''} {className}">
+  {#if divider}
+    <hr class="border-border" />
+  {/if}
+
+  {#if title || description}
+    <div class="space-y-1">
+      {#if title}
+        <h3 class={typography.h3}>{title}</h3>
+      {/if}
+      {#if description}
+        <p class={typography.smMuted}>{description}</p>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="space-y-4">
+    {@render children?.()}
+  </div>
+</section>

package/dist/patterns/forms/FormValidationSummary.spec.js

@@ -154,8 +154,8 @@ describe('FormValidationSummary Component', () => {
             },
         });
         const alert = container.querySelector('[role="alert"]');
-        expect(alert.classList.contains('bg-red-50')).toBe(true);
-        expect(alert.classList.contains('border-red-200')).toBe(true);
+        expect(alert.classList.contains('bg-status-error-bg')).toBe(true);
+        expect(alert.classList.contains('border-status-error-border')).toBe(true);
     });
     it('renders warning icon', () => {
         const { container } = render(FormValidationSummary, {

package/dist/patterns/forms/FormValidationSummary.stories.svelte

@@ -1,97 +1,97 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import FormValidationSummary from './FormValidationSummary.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/FormValidationSummary',
-    component: FormValidationSummary,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  
-  const sampleErrors = {
-    firstName: 'First name is required',
-    email: 'Please enter a valid email address',
-    phone: 'Phone number must be 10 digits',
-  };
-
-  const fieldLabels = {
-    firstName: 'First Name',
-    email: 'Email Address',
-    phone: 'Phone Number',
-  };
-</script>
-
-<Story name="Default">
-  <FormValidationSummary
-    errors={sampleErrors}
-    {fieldLabels}
-    show={true}
-  />
-</Story>
-
-<Story name="Single Error">
-  <FormValidationSummary
-    errors={{ email: 'Email is required' }}
-    fieldLabels={{ email: 'Email Address' }}
-    show={true}
-  />
-</Story>
-
-<Story name="Multiple Errors">
-  <FormValidationSummary
-    errors={{
-      firstName: 'First name is required',
-      lastName: 'Last name is required',
-      email: 'Invalid email format',
-      password: 'Password must be at least 8 characters',
-      confirmPassword: 'Passwords do not match',
-    }}
-    fieldLabels={{
-      firstName: 'First Name',
-      lastName: 'Last Name',
-      email: 'Email',
-      password: 'Password',
-      confirmPassword: 'Confirm Password',
-    }}
-    show={true}
-  />
-</Story>
-
-<Story name="With Form">
-  <div class="max-w-md">
-    <FormValidationSummary
-      errors={sampleErrors}
-      {fieldLabels}
-      show={true}
-    />
-
-    <div class="space-y-4 mt-4">
-      <div>
-        <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
-        <input id="firstName" type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-      <div>
-        <label for="email" class="block text-sm font-medium mb-1">Email</label>
-        <input id="email" type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-      <div>
-        <label for="phone" class="block text-sm font-medium mb-1">Phone</label>
-        <input id="phone" type="tel" class="w-full px-3 py-2 border border-red-300 rounded" />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Hidden State">
-  <FormValidationSummary
-    errors={sampleErrors}
-    {fieldLabels}
-    show={false}
-  />
-  <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">The validation summary is hidden</p>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import FormValidationSummary from './FormValidationSummary.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/FormValidationSummary',
+    component: FormValidationSummary,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  
+  const sampleErrors = {
+    firstName: 'First name is required',
+    email: 'Please enter a valid email address',
+    phone: 'Phone number must be 10 digits',
+  };
+
+  const fieldLabels = {
+    firstName: 'First Name',
+    email: 'Email Address',
+    phone: 'Phone Number',
+  };
+</script>
+
+<Story name="Default">
+  <FormValidationSummary
+    errors={sampleErrors}
+    {fieldLabels}
+    show={true}
+  />
+</Story>
+
+<Story name="Single Error">
+  <FormValidationSummary
+    errors={{ email: 'Email is required' }}
+    fieldLabels={{ email: 'Email Address' }}
+    show={true}
+  />
+</Story>
+
+<Story name="Multiple Errors">
+  <FormValidationSummary
+    errors={{
+      firstName: 'First name is required',
+      lastName: 'Last name is required',
+      email: 'Invalid email format',
+      password: 'Password must be at least 8 characters',
+      confirmPassword: 'Passwords do not match',
+    }}
+    fieldLabels={{
+      firstName: 'First Name',
+      lastName: 'Last Name',
+      email: 'Email',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+    }}
+    show={true}
+  />
+</Story>
+
+<Story name="With Form">
+  <div class="max-w-md">
+    <FormValidationSummary
+      errors={sampleErrors}
+      {fieldLabels}
+      show={true}
+    />
+
+    <div class="space-y-4 mt-4">
+      <div>
+        <label for="firstName" class="block text-sm font-medium mb-1">First Name</label>
+        <input id="firstName" type="text" class="w-full px-3 py-2 border border-status-error-border rounded" />
+      </div>
+      <div>
+        <label for="email" class="block text-sm font-medium mb-1">Email</label>
+        <input id="email" type="email" class="w-full px-3 py-2 border border-status-error-border rounded" />
+      </div>
+      <div>
+        <label for="phone" class="block text-sm font-medium mb-1">Phone</label>
+        <input id="phone" type="tel" class="w-full px-3 py-2 border border-status-error-border rounded" />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Hidden State">
+  <FormValidationSummary
+    errors={sampleErrors}
+    {fieldLabels}
+    show={false}
+  />
+  <p class="text-sm text-muted-foreground mt-2">The validation summary is hidden</p>
+</Story>