@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/ValidationError.spec.js

@@ -1,103 +1,103 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import ValidationError from './ValidationError.svelte';
-
-describe('ValidationError Component', () => {
-  it('renders error message when error prop is provided', () => {
-    const { container, getByText } = render(ValidationError, {
-      props: { error: 'This field is required' },
-    });
-    expect(getByText('This field is required')).toBeTruthy();
-  });
-
-  it('does not render when error is empty', () => {
-    const { container } = render(ValidationError, {
-      props: { error: '' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when show is false', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message', show: false },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('has role="alert" attribute', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-  });
-
-  it('has red text styling', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('text-red-500')).toBe(true);
-  });
-
-  it('renders WarningIcon', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    // The WarningIcon should render an SVG
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('renders error text in a paragraph', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Custom error text' },
-    });
-    const paragraph = container.querySelector('p');
-    expect(paragraph).toBeTruthy();
-    expect(paragraph.textContent).toBe('Custom error text');
-  });
-
-  it('shows when show is true and error exists', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message', show: true },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-  });
-
-  it('renders with flex layout', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('flex')).toBe(true);
-    expect(alert.classList.contains('items-start')).toBe(true);
-  });
-
-  it('has aria-live="assertive" for screen reader announcements', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('aria-live')).toBe('assertive');
-  });
-
-  it('renders with id when provided', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message', id: 'my-error-id' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('id')).toBe('my-error-id');
-  });
-
-  it('does not render id when not provided', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('id')).toBeFalsy();
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ValidationError from './ValidationError.svelte';
+
+describe('ValidationError Component', () => {
+  it('renders error message when error prop is provided', () => {
+    const { container, getByText } = render(ValidationError, {
+      props: { error: 'This field is required' },
+    });
+    expect(getByText('This field is required')).toBeTruthy();
+  });
+
+  it('does not render when error is empty', () => {
+    const { container } = render(ValidationError, {
+      props: { error: '' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when show is false', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', show: false },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('has role="alert" attribute', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+  });
+
+  it('has red text styling', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('text-red-600')).toBe(true);
+  });
+
+  it('renders WarningIcon', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    // The WarningIcon should render an SVG
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('renders error text in a paragraph', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Custom error text' },
+    });
+    const paragraph = container.querySelector('p');
+    expect(paragraph).toBeTruthy();
+    expect(paragraph.textContent).toBe('Custom error text');
+  });
+
+  it('shows when show is true and error exists', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', show: true },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+  });
+
+  it('renders with flex layout', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('flex')).toBe(true);
+    expect(alert.classList.contains('items-start')).toBe(true);
+  });
+
+  it('has aria-live="assertive" for screen reader announcements', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('aria-live')).toBe('assertive');
+  });
+
+  it('renders with id when provided', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', id: 'my-error-id' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('id')).toBe('my-error-id');
+  });
+
+  it('does not render id when not provided', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('id')).toBeFalsy();
+  });
+});

package/dist/primitives/ValidationError.stories.svelte

@@ -1,49 +1,49 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import ValidationError from './ValidationError.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/ValidationError',
-    component: ValidationError,
-    tags: ['autodocs'],
-    argTypes: {
-      error: { control: 'text' },
-      show: { control: 'boolean' },
-      id: { control: 'text' },
-    },
-  });
-
-</script>
-
-<script>
-  </script>
-
-
-<Story
-  name="Default"
-  args={{
-    error: 'This field is required',
-    show: true,
-  }}
-/>
-
-<Story
-  name="Email Validation"
-  args={{
-    error: 'Please enter a valid email address',
-    show: true,
-  }}
-/>
-
-<Story
-  name="Password Validation"
-  args={{
-    error: 'Password must be at least 8 characters',
-    show: true,
-  }}
-/>
-
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import ValidationError from './ValidationError.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/ValidationError',
+    component: ValidationError,
+    tags: ['autodocs'],
+    argTypes: {
+      error: { control: 'text' },
+      show: { control: 'boolean' },
+      id: { control: 'text' },
+    },
+  });
+
+</script>
+
+<script>
+  </script>
+
+
+<Story
+  name="Default"
+  args={{
+    error: 'This field is required',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Email Validation"
+  args={{
+    error: 'Please enter a valid email address',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Password Validation"
+  args={{
+    error: 'Password must be at least 8 characters',
+    show: true,
+  }}
+/>
+
 <Story name="With Input Field">
   <div class="max-w-md">
     <label for="email-field" class="block text-sm font-medium mb-1">Email Address</label>
@@ -87,26 +87,26 @@
     <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Validation error is hidden until field is touched</p>
   </div>
 </Story>
-
-<Story name="Accessible with aria-describedby">
-  <div class="max-w-md">
-    <label for="accessible-email" class="block text-sm font-medium mb-1">Email Address</label>
-    <input
-      id="accessible-email"
-      type="email"
-      aria-describedby="email-error"
-      aria-invalid="true"
-      class="w-full px-3 py-2 border border-red-300 rounded focus:ring-red-500 focus:border-red-500"
-      value="invalid-email"
-    />
-    <ValidationError
-      id="email-error"
-      error="Please enter a valid email address"
-      show={true}
-    />
-    <p class="text-sm text-gray-500 mt-4">
-      This example shows proper accessibility: the input references the error via aria-describedby,
-      and the error has aria-live="assertive" for screen reader announcements.
-    </p>
-  </div>
-</Story>
+
+<Story name="Accessible with aria-describedby">
+  <div class="max-w-md">
+    <label for="accessible-email" class="block text-sm font-medium mb-1">Email Address</label>
+    <input
+      id="accessible-email"
+      type="email"
+      aria-describedby="email-error"
+      aria-invalid="true"
+      class="w-full px-3 py-2 border border-red-300 rounded focus:ring-red-500 focus:border-red-500"
+      value="invalid-email"
+    />
+    <ValidationError
+      id="email-error"
+      error="Please enter a valid email address"
+      show={true}
+    />
+    <p class="text-sm text-gray-500 mt-4">
+      This example shows proper accessibility: the input references the error via aria-describedby,
+      and the error has aria-live="assertive" for screen reader announcements.
+    </p>
+  </div>
+</Story>

package/dist/primitives/ValidationError.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-  import { safeSlide } from "../utils/transitions.js";
-  import { cubicOut } from "svelte/easing";
-  import WarningIcon from "./Icons/WarningIcon.svelte";
-
-  interface Props {
-    /** Error message to display */
-    error?: string;
-    /** Whether to show the error */
-    show?: boolean;
-    /** Optional ID for aria-describedby linking from input fields */
-    id?: string;
-  }
-
-  let { error = '', show = true, id }: Props = $props();
-</script>
-
-{#if error && show}
-  <div
-    transition:safeSlide={{ duration: 300, easing: cubicOut }}
-    class="flex items-start gap-1.5 text-red-600 dark:text-red-500 mt-2"
-    role="alert"
-    aria-live="assertive"
-    {id}
-  >
-    <WarningIcon class="shrink-0 mt-[1px]" />
-    <p class="text-sm leading-tight m-0">{error}</p>
-  </div>
-{/if}
+<script lang="ts">
+  import { safeSlide } from "../utils/transitions.js";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "./Icons/WarningIcon.svelte";
+
+  interface Props {
+    /** Error message to display */
+    error?: string;
+    /** Whether to show the error */
+    show?: boolean;
+    /** Optional ID for aria-describedby linking from input fields */
+    id?: string;
+  }
+
+  let { error = '', show = true, id }: Props = $props();
+</script>
+
+{#if error && show}
+  <div
+    transition:safeSlide={{ duration: 300, easing: cubicOut }}
+    class="flex items-start gap-1.5 text-red-600 dark:text-red-500 mt-2"
+    role="alert"
+    aria-live="assertive"
+    {id}
+  >
+    <WarningIcon class="shrink-0 mt-[1px]" />
+    <p class="text-sm leading-tight m-0">{error}</p>
+  </div>
+{/if}

package/dist/primitives/index.d.ts

@@ -19,6 +19,7 @@ export { default as Input } from "./Input/Input.svelte";
 export { default as Select } from "./Input/Select.svelte";
 export { default as Textarea } from "./Input/Textarea.svelte";
 export { default as Label } from "./Label/Label.svelte";
+export { default as NumberInput } from "./NumberInput/NumberInput.svelte";
 export { default as Modal } from "./Modal/Modal.svelte";
 export { default as Pagination } from "./Pagination/Pagination.svelte";
 export { default as Radio } from "./Radio/Radio.svelte";

package/dist/primitives/index.js

@@ -1,81 +1,84 @@
-// =============================================================================
-// PRIMITIVES - Pure visual components (Layer 1)
-// =============================================================================
-
-// Accordion
-export { default as Accordion } from './Accordion/Accordion.svelte';
-export { default as AccordionItem } from './Accordion/AccordionItem.svelte';
-
-// Alert
-export { default as Alert } from './Alert/Alert.svelte';
-
-// Avatar
-export { default as Avatar } from './Avatar/Avatar.svelte';
-
-// Badge
-export { default as Badge } from './Badges/Badge.svelte';
-
-// BottomSheet
-export { default as BottomSheet } from './BottomSheet/BottomSheet.svelte';
-
-// Breadcrumb
-export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
-
-// Button
-export { default as Button } from './Button/Button.svelte';
-export { default as ButtonSaveDemo } from './Button/ButtonSaveDemo.svelte';
-
-// Card
-export { default as Card } from './Card.svelte';
-
-// Checkbox
-export { default as Checkbox } from './Checkbox/Checkbox.svelte';
-
-// DarkModeToggle
-export { default as DarkModeToggle } from './DarkModeToggle.svelte';
-
-// Drawer
-export { default as Drawer } from './Drawer/Drawer.svelte';
-
-// Dropdown
-export { default as Dropdown } from './Dropdown/Dropdown.svelte';
-export { default as DropdownItem } from './Dropdown/DropdownItem.svelte';
-
-// Icons - re-export from Icons/index.js
-export * from './Icons/index.js';
-
-// Input (primitives only - Select, Textarea are here; recipes are in recipes/inputs)
-export { default as Input } from './Input/Input.svelte';
-export { default as Select } from './Input/Select.svelte';
-export { default as Textarea } from './Input/Textarea.svelte';
-
-// Label
-export { default as Label } from './Label/Label.svelte';
-
-// Modal (base only - composite modals are in recipes/modals)
-export { default as Modal } from './Modal/Modal.svelte';
-
-// Pagination
-export { default as Pagination } from './Pagination/Pagination.svelte';
-
-// Radio
-export { default as Radio } from './Radio/Radio.svelte';
-
-// Skeleton - re-export from Skeleton/index.js
-export * from './Skeleton/index.js';
-
-// Spinner
-export { default as Spinner } from './Spinner/Spinner.svelte';
-
-// Tabs
-export { default as Tabs } from './Tabs/Tabs.svelte';
-export { default as TabItem } from './Tabs/TabItem.svelte';
-
-// Toggle
-export { default as Toggle } from './Toggle.svelte';
-
-// Typography
-export { default as Typography } from './Typography/Typography.svelte';
-
-// ValidationError
-export { default as ValidationError } from './ValidationError.svelte';
+// =============================================================================
+// PRIMITIVES - Pure visual components (Layer 1)
+// =============================================================================
+
+// Accordion
+export { default as Accordion } from './Accordion/Accordion.svelte';
+export { default as AccordionItem } from './Accordion/AccordionItem.svelte';
+
+// Alert
+export { default as Alert } from './Alert/Alert.svelte';
+
+// Avatar
+export { default as Avatar } from './Avatar/Avatar.svelte';
+
+// Badge
+export { default as Badge } from './Badges/Badge.svelte';
+
+// BottomSheet
+export { default as BottomSheet } from './BottomSheet/BottomSheet.svelte';
+
+// Breadcrumb
+export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
+
+// Button
+export { default as Button } from './Button/Button.svelte';
+export { default as ButtonSaveDemo } from './Button/ButtonSaveDemo.svelte';
+
+// Card
+export { default as Card } from './Card.svelte';
+
+// Checkbox
+export { default as Checkbox } from './Checkbox/Checkbox.svelte';
+
+// DarkModeToggle
+export { default as DarkModeToggle } from './DarkModeToggle.svelte';
+
+// Drawer
+export { default as Drawer } from './Drawer/Drawer.svelte';
+
+// Dropdown
+export { default as Dropdown } from './Dropdown/Dropdown.svelte';
+export { default as DropdownItem } from './Dropdown/DropdownItem.svelte';
+
+// Icons - re-export from Icons/index.js
+export * from './Icons/index.js';
+
+// Input (primitives only - Select, Textarea are here; recipes are in recipes/inputs)
+export { default as Input } from './Input/Input.svelte';
+export { default as Select } from './Input/Select.svelte';
+export { default as Textarea } from './Input/Textarea.svelte';
+
+// Label
+export { default as Label } from './Label/Label.svelte';
+
+// NumberInput
+export { default as NumberInput } from './NumberInput/NumberInput.svelte';
+
+// Modal (base only - composite modals are in recipes/modals)
+export { default as Modal } from './Modal/Modal.svelte';
+
+// Pagination
+export { default as Pagination } from './Pagination/Pagination.svelte';
+
+// Radio
+export { default as Radio } from './Radio/Radio.svelte';
+
+// Skeleton - re-export from Skeleton/index.js
+export * from './Skeleton/index.js';
+
+// Spinner
+export { default as Spinner } from './Spinner/Spinner.svelte';
+
+// Tabs
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as TabItem } from './Tabs/TabItem.svelte';
+
+// Toggle
+export { default as Toggle } from './Toggle.svelte';
+
+// Typography
+export { default as Typography } from './Typography/Typography.svelte';
+
+// ValidationError
+export { default as ValidationError } from './ValidationError.svelte';