@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/primitives/index.js

@@ -1,92 +1,92 @@
-// =============================================================================
-// 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 ButtonGroup } from './Button/ButtonGroup.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';
-export { default as DropdownDivider } from './Dropdown/DropdownDivider.svelte';
-
-// Helper
-export { default as Helper } from './Helper/Helper.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';
-
-// Tooltip
-export { default as Tooltip } from './Tooltip/Tooltip.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 ButtonGroup } from './Button/ButtonGroup.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';
+export { default as DropdownDivider } from './Dropdown/DropdownDivider.svelte';
+
+// Helper
+export { default as Helper } from './Helper/Helper.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';
+
+// Tooltip
+export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+
+// Typography
+export { default as Typography } from './Typography/Typography.svelte';
+
+// ValidationError
+export { default as ValidationError } from './ValidationError.svelte';

package/dist/recipes/CropImage/CropImage.spec.js

@@ -1,208 +1,208 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
-import CropImage from './CropImage.svelte';
-
-describe('CropImage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('when showModal is false', () => {
-    it('does not render modal content', () => {
-      const { container } = render(CropImage, {
-        props: { showModal: false, imageSrc: '' },
-      });
-      expect(container.querySelector('.fixed')).toBeNull();
-    });
-  });
-
-  describe('when showModal is true', () => {
-    const defaultProps = {
-      showModal: true,
-      imageSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
-      onSave: vi.fn(),
-      onCancel: vi.fn(),
-    };
-
-    it('renders the modal', () => {
-      const { container } = render(CropImage, { props: defaultProps });
-      expect(container.querySelector('.fixed')).toBeInTheDocument();
-    });
-
-    it('renders the header with title', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText('Crop image')).toBeInTheDocument();
-    });
-
-    it('renders cancel button', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-    });
-
-    it('renders save button', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText('Save')).toBeInTheDocument();
-    });
-
-    it('renders instructions text', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText(/Drag to position/)).toBeInTheDocument();
-    });
-
-    it('renders zoom controls', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByLabelText('Zoom out')).toBeInTheDocument();
-      expect(screen.getByLabelText('Zoom in')).toBeInTheDocument();
-      expect(screen.getByLabelText('Zoom level')).toBeInTheDocument();
-    });
-
-    it('shows loading state initially', () => {
-      render(CropImage, { props: defaultProps });
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
-
-    it('calls onCancel when cancel button clicked', async () => {
-      const onCancel = vi.fn();
-      render(CropImage, { props: { ...defaultProps, onCancel } });
-
-      await fireEvent.click(screen.getByText('Cancel'));
-      expect(onCancel).toHaveBeenCalled();
-    });
-
-    it('calls onCancel when close button clicked', async () => {
-      const onCancel = vi.fn();
-      render(CropImage, { props: { ...defaultProps, onCancel } });
-
-      await fireEvent.click(screen.getByLabelText('Close modal'));
-      expect(onCancel).toHaveBeenCalled();
-    });
-
-    it('calls onCancel when clicking backdrop', async () => {
-      const onCancel = vi.fn();
-      const { container } = render(CropImage, { props: { ...defaultProps, onCancel } });
-
-      const backdrop = container.querySelector('.fixed');
-      await fireEvent.click(backdrop);
-      expect(onCancel).toHaveBeenCalled();
-    });
-
-    it('zoom out button decreases zoom', async () => {
-      render(CropImage, { props: defaultProps });
-      const zoomOutBtn = screen.getByLabelText('Zoom out');
-      const slider = screen.getByLabelText('Zoom level');
-
-      // Initial zoom is 1
-      expect(slider.value).toBe('1');
-
-      // Click zoom out (should stay at 1 since that's min)
-      await fireEvent.click(zoomOutBtn);
-      expect(slider.value).toBe('1');
-    });
-
-    it('zoom in button increases zoom', async () => {
-      render(CropImage, { props: defaultProps });
-      const zoomInBtn = screen.getByLabelText('Zoom in');
-      const slider = screen.getByLabelText('Zoom level');
-
-      await fireEvent.click(zoomInBtn);
-      expect(parseFloat(slider.value)).toBeGreaterThan(1);
-    });
-
-    it('hides loading state after crop complete', async () => {
-      render(CropImage, { props: defaultProps });
-
-      // Initially loading
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-      // Wait for the mock cropper to emit cropcomplete
-      await waitFor(() => {
-        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-      }, { timeout: 100 });
-    });
-
-    it('slider controls zoom value', async () => {
-      render(CropImage, { props: defaultProps });
-      const slider = screen.getByLabelText('Zoom level');
-
-      await fireEvent.input(slider, { target: { value: '2' } });
-      expect(slider.value).toBe('2');
-    });
-
-    it('handles save button click when not loading', async () => {
-      const onSave = vi.fn();
-      render(CropImage, { props: { ...defaultProps, onSave } });
-
-      // Wait for loading to complete
-      await waitFor(() => {
-        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-      }, { timeout: 200 });
-
-      // Try clicking save button
-      const saveButton = screen.getByText('Save');
-      await fireEvent.click(saveButton);
-    });
-
-    it('disables save button while loading', () => {
-      render(CropImage, { props: defaultProps });
-      const saveButton = screen.getByText('Save');
-      // Save button should be disabled during loading
-      expect(saveButton.closest('button')).toBeDefined();
-    });
-
-    it('resets state when modal reopens with new image', async () => {
-      const { rerender } = render(CropImage, { props: defaultProps });
-
-      // Change imageSrc to trigger reset
-      await rerender({
-        showModal: true,
-        imageSrc: 'data:image/png;base64,differentImage',
-        onSave: vi.fn(),
-        onCancel: vi.fn(),
-      });
-
-      expect(screen.getByText('Crop image')).toBeInTheDocument();
-    });
-
-    it('updates zoom progress based on zoom value', async () => {
-      render(CropImage, { props: defaultProps });
-      const slider = screen.getByLabelText('Zoom level');
-
-      // Set zoom to middle value
-      await fireEvent.input(slider, { target: { value: '2' } });
-      expect(slider.value).toBe('2');
-
-      // Set zoom to max
-      await fireEvent.input(slider, { target: { value: '3' } });
-      expect(slider.value).toBe('3');
-    });
-
-    it('zoom value stays within bounds', async () => {
-      render(CropImage, { props: defaultProps });
-      const slider = screen.getByLabelText('Zoom level');
-      const zoomOutBtn = screen.getByLabelText('Zoom out');
-      const zoomInBtn = screen.getByLabelText('Zoom in');
-
-      // Spam zoom out - should not go below 1
-      for (let i = 0; i < 10; i++) {
-        await fireEvent.click(zoomOutBtn);
-      }
-      expect(parseFloat(slider.value)).toBe(1);
-
-      // Set to max and spam zoom in
-      await fireEvent.input(slider, { target: { value: '3' } });
-      for (let i = 0; i < 10; i++) {
-        await fireEvent.click(zoomInBtn);
-      }
-      expect(parseFloat(slider.value)).toBeLessThanOrEqual(3);
-    });
-
-    it('renders cropper component with correct props', async () => {
-      const { container } = render(CropImage, { props: defaultProps });
-
-      // Wait for render
-      await waitFor(() => {
-        expect(container.querySelector('.cropper-container')).toBeInTheDocument();
-      });
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import CropImage from './CropImage.svelte';
+
+describe('CropImage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('when showModal is false', () => {
+    it('does not render modal content', () => {
+      const { container } = render(CropImage, {
+        props: { showModal: false, imageSrc: '' },
+      });
+      expect(container.querySelector('.fixed')).toBeNull();
+    });
+  });
+
+  describe('when showModal is true', () => {
+    const defaultProps = {
+      showModal: true,
+      imageSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
+      onSave: vi.fn(),
+      onCancel: vi.fn(),
+    };
+
+    it('renders the modal', () => {
+      const { container } = render(CropImage, { props: defaultProps });
+      expect(container.querySelector('.fixed')).toBeInTheDocument();
+    });
+
+    it('renders the header with title', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText('Crop image')).toBeInTheDocument();
+    });
+
+    it('renders cancel button', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+
+    it('renders save button', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+
+    it('renders instructions text', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText(/Drag to position/)).toBeInTheDocument();
+    });
+
+    it('renders zoom controls', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByLabelText('Zoom out')).toBeInTheDocument();
+      expect(screen.getByLabelText('Zoom in')).toBeInTheDocument();
+      expect(screen.getByLabelText('Zoom level')).toBeInTheDocument();
+    });
+
+    it('shows loading state initially', () => {
+      render(CropImage, { props: defaultProps });
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('calls onCancel when cancel button clicked', async () => {
+      const onCancel = vi.fn();
+      render(CropImage, { props: { ...defaultProps, onCancel } });
+
+      await fireEvent.click(screen.getByText('Cancel'));
+      expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('calls onCancel when close button clicked', async () => {
+      const onCancel = vi.fn();
+      render(CropImage, { props: { ...defaultProps, onCancel } });
+
+      await fireEvent.click(screen.getByLabelText('Close modal'));
+      expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('calls onCancel when clicking backdrop', async () => {
+      const onCancel = vi.fn();
+      const { container } = render(CropImage, { props: { ...defaultProps, onCancel } });
+
+      const backdrop = container.querySelector('.fixed');
+      await fireEvent.click(backdrop);
+      expect(onCancel).toHaveBeenCalled();
+    });
+
+    it('zoom out button decreases zoom', async () => {
+      render(CropImage, { props: defaultProps });
+      const zoomOutBtn = screen.getByLabelText('Zoom out');
+      const slider = screen.getByLabelText('Zoom level');
+
+      // Initial zoom is 1
+      expect(slider.value).toBe('1');
+
+      // Click zoom out (should stay at 1 since that's min)
+      await fireEvent.click(zoomOutBtn);
+      expect(slider.value).toBe('1');
+    });
+
+    it('zoom in button increases zoom', async () => {
+      render(CropImage, { props: defaultProps });
+      const zoomInBtn = screen.getByLabelText('Zoom in');
+      const slider = screen.getByLabelText('Zoom level');
+
+      await fireEvent.click(zoomInBtn);
+      expect(parseFloat(slider.value)).toBeGreaterThan(1);
+    });
+
+    it('hides loading state after crop complete', async () => {
+      render(CropImage, { props: defaultProps });
+
+      // Initially loading
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+      // Wait for the mock cropper to emit cropcomplete
+      await waitFor(() => {
+        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+      }, { timeout: 100 });
+    });
+
+    it('slider controls zoom value', async () => {
+      render(CropImage, { props: defaultProps });
+      const slider = screen.getByLabelText('Zoom level');
+
+      await fireEvent.input(slider, { target: { value: '2' } });
+      expect(slider.value).toBe('2');
+    });
+
+    it('handles save button click when not loading', async () => {
+      const onSave = vi.fn();
+      render(CropImage, { props: { ...defaultProps, onSave } });
+
+      // Wait for loading to complete
+      await waitFor(() => {
+        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+      }, { timeout: 200 });
+
+      // Try clicking save button
+      const saveButton = screen.getByText('Save');
+      await fireEvent.click(saveButton);
+    });
+
+    it('disables save button while loading', () => {
+      render(CropImage, { props: defaultProps });
+      const saveButton = screen.getByText('Save');
+      // Save button should be disabled during loading
+      expect(saveButton.closest('button')).toBeDefined();
+    });
+
+    it('resets state when modal reopens with new image', async () => {
+      const { rerender } = render(CropImage, { props: defaultProps });
+
+      // Change imageSrc to trigger reset
+      await rerender({
+        showModal: true,
+        imageSrc: 'data:image/png;base64,differentImage',
+        onSave: vi.fn(),
+        onCancel: vi.fn(),
+      });
+
+      expect(screen.getByText('Crop image')).toBeInTheDocument();
+    });
+
+    it('updates zoom progress based on zoom value', async () => {
+      render(CropImage, { props: defaultProps });
+      const slider = screen.getByLabelText('Zoom level');
+
+      // Set zoom to middle value
+      await fireEvent.input(slider, { target: { value: '2' } });
+      expect(slider.value).toBe('2');
+
+      // Set zoom to max
+      await fireEvent.input(slider, { target: { value: '3' } });
+      expect(slider.value).toBe('3');
+    });
+
+    it('zoom value stays within bounds', async () => {
+      render(CropImage, { props: defaultProps });
+      const slider = screen.getByLabelText('Zoom level');
+      const zoomOutBtn = screen.getByLabelText('Zoom out');
+      const zoomInBtn = screen.getByLabelText('Zoom in');
+
+      // Spam zoom out - should not go below 1
+      for (let i = 0; i < 10; i++) {
+        await fireEvent.click(zoomOutBtn);
+      }
+      expect(parseFloat(slider.value)).toBe(1);
+
+      // Set to max and spam zoom in
+      await fireEvent.input(slider, { target: { value: '3' } });
+      for (let i = 0; i < 10; i++) {
+        await fireEvent.click(zoomInBtn);
+      }
+      expect(parseFloat(slider.value)).toBeLessThanOrEqual(3);
+    });
+
+    it('renders cropper component with correct props', async () => {
+      const { container } = render(CropImage, { props: defaultProps });
+
+      // Wait for render
+      await waitFor(() => {
+        expect(container.querySelector('.cropper-container')).toBeInTheDocument();
+      });
+    });
+  });
+});