@getmicdrop/svelte-components 1.0.1 → 1.0.3

package/dist/components/Calendar/QuarterView.svelte.d.ts

@@ -0,0 +1,30 @@
+/** @typedef {typeof __propDef.props}  QuarterViewProps */
+/** @typedef {typeof __propDef.events}  QuarterViewEvents */
+/** @typedef {typeof __propDef.slots}  QuarterViewSlots */
+export default class QuarterView extends SvelteComponent<{
+    selectedDates: any;
+    saveStatus?: string | undefined;
+    currentevents?: any[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type QuarterViewProps = typeof __propDef.props;
+export type QuarterViewEvents = typeof __propDef.events;
+export type QuarterViewSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        selectedDates: any;
+        saveStatus?: string | undefined;
+        currentevents?: any[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=QuarterView.svelte.d.ts.map

package/dist/components/Calendar/QuarterView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuarterView.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/QuarterView.svelte.js"],"names":[],"mappings":"AA8XA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;gCAhYJ,QAAQ;AA6XxC;;;;;;;;;;;;EAAgH"}

package/dist/components/Card.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Card.spec.d.ts.map

package/dist/components/Card.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.spec.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.spec.js"],"names":[],"mappings":""}

package/dist/components/Card.spec.js

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Card from "./Card.svelte";
+
+describe("Card Component Tests", () => {
+  test("Renders card section element", () => {
+    render(Card, { props: {} });
+    const section = document.querySelector("section");
+    expect(section).toBeInTheDocument();
+  });
+
+  test("Applies base classes", () => {
+    render(Card, { props: {} });
+    const section = document.querySelector("section");
+    expect(section).toHaveClass("w-full");
+    expect(section).toHaveClass("bg-bg-primary");
+  });
+
+  test("Applies custom className", () => {
+    render(Card, { props: { className: "custom-class mt-4" } });
+    const section = document.querySelector("section");
+    expect(section).toHaveClass("custom-class");
+    expect(section).toHaveClass("mt-4");
+  });
+
+  test("Has responsive padding classes", () => {
+    render(Card, { props: {} });
+    const section = document.querySelector("section");
+    // Check for responsive padding classes
+    expect(section.className).toMatch(/p-3\.5/);
+    expect(section.className).toMatch(/sm:p-4/);
+    expect(section.className).toMatch(/md:p-5/);
+  });
+
+  test("Has shadow and rounded on medium screens", () => {
+    render(Card, { props: {} });
+    const section = document.querySelector("section");
+    expect(section.className).toMatch(/md:shadow/);
+    expect(section.className).toMatch(/md:rounded-lg/);
+  });
+
+  test("Renders slot content", () => {
+    // Use a custom component with slot content
+    const { container } = render(Card, { props: {} });
+    expect(container.querySelector("section")).toBeInTheDocument();
+  });
+});

package/dist/components/Card.stories.svelte

@@ -0,0 +1,26 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Card from "./Card.svelte";
+
+  export const meta = {
+    title: "Components/Card",
+    component: Card,
+    argTypes: {
+      className: { control: "text" },
+    },
+  };
+</script>
+
+<Template let:args>
+  <Card {...args}>
+    <h3 class="text-lg font-semibold mb-2">Card Title</h3>
+    <p class="text-gray-600">This is the card content. Cards are used to group related information together.</p>
+  </Card>
+</Template>
+
+<Story name="Default Card">
+  <Card>
+    <h3 class="text-lg font-semibold mb-2">Default Card</h3>
+    <p class="text-gray-600">A default card with standard styling. Use className prop to customize.</p>
+  </Card>
+</Story>

package/dist/components/Card.stories.svelte.d.ts

@@ -0,0 +1,36 @@
+export namespace meta {
+    export let title: string;
+    export { Card as component };
+    export namespace argTypes {
+        namespace className {
+            let control: string;
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import Card from "./Card.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Card.stories.svelte.d.ts.map

package/dist/components/Card.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;AAgCA,mDAAmD;AACnD,qDAAqD;AACrD,mDAAmD;AAEnD;;;;;CACC;wBALa,OAAO,SAAS,CAAC,KAAK;yBACtB,OAAO,SAAS,CAAC,MAAM;wBACvB,OAAO,SAAS,CAAC,KAAK;iBA9BjB,eAAe;gCAJF,QAAQ;AA+BxC;;;;;;;;;;EAAgF"}

package/dist/components/Card.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let className;
+</script>
+
+<section
+  class={`w-full bg-bg-primary p-3.5 sm:p-4 md:p-5 md:shadow md:rounded-lg ${className}`}
+>
+  <slot />
+</section>

package/dist/components/Card.svelte.d.ts

@@ -0,0 +1,30 @@
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponent<{
+    className: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        className: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=Card.svelte.d.ts.map

package/dist/components/Card.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.svelte.js"],"names":[],"mappings":"AAcA,mDAAmD;AACnD,qDAAqD;AACrD,mDAAmD;AAEnD;;;;;;;CACC;wBALa,OAAO,SAAS,CAAC,KAAK;yBACtB,OAAO,SAAS,CAAC,MAAM;wBACvB,OAAO,SAAS,CAAC,KAAK;gCAhBJ,QAAQ;AAaxC;;;;;;;;;;;;EAAgF"}

package/dist/components/CardAudit.stories.svelte

@@ -0,0 +1,175 @@
+<script context="module">
+  import Card from "./Card.svelte";
+
+  export const meta = {
+    title: "Audit/Card Variants",
+    component: Card,
+  };
+</script>
+
+<script>
+  import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="All Card Variants">
+  <div class="performer-portal p-6 space-y-8 bg-BG-Primary min-h-screen">
+    <div class="max-w-2xl mx-auto">
+      <h1 class="text-2xl font-bold text-Text-Primary mb-2">Card Component Audit</h1>
+      <p class="text-Text-Tartiary mb-8">Card component usage across the performers portal</p>
+
+      <!-- SECTION: Base Card -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Base Card Component
+        </h2>
+        <p class="text-sm text-Text-Tartiary mb-4">
+          Simple wrapper component with consistent padding and styling.
+        </p>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Default Card (no className)
+            </div>
+            <Card>
+              <p class="text-Text-Primary">This is a basic card with default styling.</p>
+              <p class="text-Text-Tartiary text-sm mt-2">Cards provide consistent padding and shadow on desktop.</p>
+            </Card>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Card with custom className
+            </div>
+            <Card className="border-2 border-blue-500">
+              <p class="text-Text-Primary">Card with custom border styling via className prop.</p>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Real Usage Examples -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Real Usage Examples
+        </h2>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-primary-700 font-semibold mb-1">Profile Page - Info Section</div>
+            <Card>
+              <h3 class="text-lg font-semibold text-Text-Primary mb-2">Personal Information</h3>
+              <div class="space-y-2 text-sm text-Text-Tartiary">
+                <p><strong>Name:</strong> John Doe</p>
+                <p><strong>Email:</strong> john@example.com</p>
+                <p><strong>Phone:</strong> (555) 123-4567</p>
+              </div>
+            </Card>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-primary-700 font-semibold mb-1">Payment Settings - Payment Method Card</div>
+            <Card>
+              <div class="flex items-center justify-between">
+                <div>
+                  <p class="font-semibold text-Text-Primary">Venmo</p>
+                  <p class="text-sm text-Text-Tartiary">@johndoe</p>
+                </div>
+                <span class="text-green-500 text-sm">Active</span>
+              </div>
+            </Card>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-primary-700 font-semibold mb-1">Notification Settings - Toggle Group</div>
+            <Card>
+              <div class="space-y-4">
+                <div class="flex items-center justify-between">
+                  <span class="text-Text-Primary">Email notifications</span>
+                  <input type="checkbox" checked class="toggle" />
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-Text-Primary">SMS notifications</span>
+                  <input type="checkbox" class="toggle" />
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Props Summary -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Props Summary
+        </h2>
+
+        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
+          <table class="w-full text-left">
+            <thead>
+              <tr class="border-b border-stroke-Primary">
+                <th class="py-2 text-Text-Primary">Prop</th>
+                <th class="py-2 text-Text-Primary">Type</th>
+                <th class="py-2 text-Text-Primary">Description</th>
+              </tr>
+            </thead>
+            <tbody class="text-Text-Tartiary">
+              <tr>
+                <td class="py-2 font-mono text-xs">className</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">Additional CSS classes</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="mt-4 p-4 bg-BG-Secondary rounded-lg">
+          <h3 class="font-semibold text-Text-Primary mb-2">Built-in Styling</h3>
+          <ul class="list-disc list-inside text-sm text-Text-Tartiary space-y-1">
+            <li><code>w-full</code> - Full width</li>
+            <li><code>bg-bg-primary</code> - Background color (respects dark mode)</li>
+            <li><code>p-3.5 sm:p-4 md:p-5</code> - Responsive padding</li>
+            <li><code>md:shadow</code> - Shadow on desktop only</li>
+            <li><code>md:rounded-lg</code> - Rounded corners on desktop only</li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- SECTION: Consolidation Recommendations -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Consolidation Recommendations
+        </h2>
+
+        <div class="space-y-4 text-sm text-Text-Tartiary">
+          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Keep As-Is</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li>Simple, minimal component - does one thing well</li>
+              <li>Already uses bg-bg-primary which respects dark mode CSS variables</li>
+              <li>Responsive padding is appropriate</li>
+            </ul>
+          </div>
+
+          <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
+            <h3 class="font-semibold text-yellow-700 dark:text-yellow-400 mb-2">Consider Adding</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li><strong>variant prop</strong> - default, bordered, elevated</li>
+              <li><strong>padding prop</strong> - none, sm, md, lg</li>
+              <li><strong>header/footer slots</strong> - for consistent card layouts</li>
+            </ul>
+          </div>
+
+          <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <h3 class="font-semibold text-blue-700 dark:text-blue-400 mb-2">Related Components</h3>
+            <p class="mb-2">These page-specific "card" components could potentially use the base Card:</p>
+            <ul class="list-disc list-inside space-y-1">
+              <li><strong>ShowItemCard</strong> (933 lines) - complex, but could use Card as base</li>
+              <li><strong>VenueItemCard</strong> (222 lines) - could use Card as base</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</Story>

package/dist/components/CardAudit.stories.svelte.d.ts

@@ -0,0 +1,31 @@
+export namespace meta {
+    export let title: string;
+    export { Card as component };
+}
+/** @typedef {typeof __propDef.props}  CardAuditProps */
+/** @typedef {typeof __propDef.events}  CardAuditEvents */
+/** @typedef {typeof __propDef.slots}  CardAuditSlots */
+export default class CardAudit extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CardAuditProps = typeof __propDef.props;
+export type CardAuditEvents = typeof __propDef.events;
+export type CardAuditSlots = typeof __propDef.slots;
+import Card from "./Card.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=CardAudit.stories.svelte.d.ts.map

package/dist/components/CardAudit.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/CardAudit.stories.svelte.js"],"names":[],"mappings":";;;;AAyLA,wDAAwD;AACxD,0DAA0D;AAC1D,wDAAwD;AAExD;;;;;CACC;6BALa,OAAO,SAAS,CAAC,KAAK;8BACtB,OAAO,SAAS,CAAC,MAAM;6BACvB,OAAO,SAAS,CAAC,KAAK;iBAxLjB,eAAe;gCAHF,QAAQ;AAwLxC;;;;;;;;;;EAAgF"}

package/dist/components/CropImage/CropImage.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CropImage.spec.d.ts.map

package/dist/components/CropImage/CropImage.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CropImage.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CropImage/CropImage.spec.js"],"names":[],"mappings":""}

package/dist/components/CropImage/CropImage.spec.js

@@ -0,0 +1,216 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+
+// Mock svelte-easy-crop with the mock Svelte component
+vi.mock('svelte-easy-crop', async () => {
+  const MockCropper = await import('../../__mocks__/svelte-easy-crop.svelte');
+  return { default: MockCropper.default };
+});
+
+// Import after mock is set up
+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'));
+      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();
+      });
+    });
+  });
+});