@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

package/src/primitives/__tests__/accordion.test.tsx

@@ -0,0 +1,197 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../accordion'
+
+function renderBasic(
+  props: Partial<React.ComponentProps<typeof AccordionTrigger>> = {},
+  itemProps: Partial<React.ComponentProps<typeof AccordionItem>> = {},
+) {
+  return render(
+    <Accordion type="single" collapsible>
+      <AccordionItem value="one" {...itemProps}>
+        <AccordionTrigger {...props}>How do I update my account?</AccordionTrigger>
+        <AccordionContent>Visit Settings → Profile to edit your details.</AccordionContent>
+      </AccordionItem>
+    </Accordion>,
+  )
+}
+
+describe('Accordion primitive', () => {
+  it('renders the trigger label', () => {
+    renderBasic()
+    expect(screen.getByText('How do I update my account?')).toBeInTheDocument()
+  })
+
+  it('starts closed by default (single + collapsible)', () => {
+    const { container } = renderBasic()
+    const item = container.querySelector('[data-slot="accordion-item"]')
+    expect(item).toHaveAttribute('data-state', 'closed')
+  })
+
+  it('opens the item when the trigger is clicked', () => {
+    const { container } = renderBasic()
+    fireEvent.click(screen.getByRole('button', { name: /How do I update/ }))
+    expect(container.querySelector('[data-slot="accordion-item"]')).toHaveAttribute('data-state', 'open')
+  })
+
+  it('closes the item on a second click when collapsible', () => {
+    const { container } = renderBasic()
+    const trigger = screen.getByRole('button', { name: /How do I update/ })
+    fireEvent.click(trigger)
+    fireEvent.click(trigger)
+    expect(container.querySelector('[data-slot="accordion-item"]')).toHaveAttribute('data-state', 'closed')
+  })
+
+  it('only opens one item at a time with type="single"', () => {
+    const { container } = render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="a">
+          <AccordionTrigger>A</AccordionTrigger>
+          <AccordionContent>A body</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>B</AccordionTrigger>
+          <AccordionContent>B body</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'A' }))
+    fireEvent.click(screen.getByRole('button', { name: 'B' }))
+    const items = container.querySelectorAll('[data-slot="accordion-item"]')
+    expect(items[0]).toHaveAttribute('data-state', 'closed')
+    expect(items[1]).toHaveAttribute('data-state', 'open')
+  })
+
+  it('allows multiple items to stay open with type="multiple"', () => {
+    const { container } = render(
+      <Accordion type="multiple">
+        <AccordionItem value="a">
+          <AccordionTrigger>A</AccordionTrigger>
+          <AccordionContent>A body</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>B</AccordionTrigger>
+          <AccordionContent>B body</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'A' }))
+    fireEvent.click(screen.getByRole('button', { name: 'B' }))
+    const items = container.querySelectorAll('[data-slot="accordion-item"]')
+    expect(items[0]).toHaveAttribute('data-state', 'open')
+    expect(items[1]).toHaveAttribute('data-state', 'open')
+  })
+
+  it('marks the root slots with data-slot attributes', () => {
+    const { container } = renderBasic()
+    expect(container.querySelector('[data-slot="accordion-item"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="accordion-trigger"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="accordion-content"]')).not.toBeNull()
+  })
+
+  it('renders the Plus/Minus indicator by default (plus-minus triggerIcon)', () => {
+    const { container } = renderBasic()
+    const indicator = container.querySelector('[data-slot="accordion-trigger-indicator"]')
+    expect(indicator).not.toBeNull()
+    // Plus and Minus are both present; CSS toggles visibility via data-state.
+    expect(indicator?.querySelectorAll('svg').length).toBe(2)
+  })
+
+  it('renders a single ChevronDown when triggerIcon="chevron"', () => {
+    const { container } = renderBasic({ triggerIcon: 'chevron' })
+    const indicator = container.querySelector('[data-slot="accordion-trigger-indicator"]')
+    expect(indicator?.querySelectorAll('svg').length).toBe(1)
+  })
+
+  it('omits the indicator entirely when triggerIcon="none"', () => {
+    const { container } = renderBasic({ triggerIcon: 'none' })
+    expect(container.querySelector('[data-slot="accordion-trigger-indicator"]')).toBeNull()
+  })
+
+  it('renders a custom indicator node when provided (overrides triggerIcon)', () => {
+    const { container } = renderBasic({
+      triggerIcon: 'chevron',
+      indicator: <span data-testid="custom-indicator">42</span>,
+    })
+    expect(screen.getByTestId('custom-indicator')).toBeInTheDocument()
+    // No Chevron rendered when indicator override is supplied.
+    const indicator = container.querySelector('[data-slot="accordion-trigger-indicator"]')
+    expect(indicator?.querySelector('svg')).toBeNull()
+  })
+
+  it('renders leftIcon in a dedicated slot before the label', () => {
+    const { container } = renderBasic({ leftIcon: <span data-testid="left-icon" /> })
+    expect(container.querySelector('[data-slot="accordion-trigger-left-icon"]')).not.toBeNull()
+    expect(screen.getByTestId('left-icon')).toBeInTheDocument()
+  })
+
+  it('suppresses leftIcon when iconPosition="start" (indicator owns the leading slot)', () => {
+    const { container } = renderBasic({
+      leftIcon: <span data-testid="left-icon" />,
+      iconPosition: 'start',
+    })
+    expect(container.querySelector('[data-slot="accordion-trigger-left-icon"]')).toBeNull()
+    expect(screen.queryByTestId('left-icon')).toBeNull()
+  })
+
+  it('places the indicator at the start of the trigger when iconPosition="start"', () => {
+    const { container } = renderBasic({ iconPosition: 'start' })
+    const trigger = container.querySelector('[data-slot="accordion-trigger"]')!
+    const indicator = trigger.querySelector('[data-slot="accordion-trigger-indicator"]')
+    const label = trigger.querySelector('[data-slot="accordion-trigger-label"]')
+    expect(indicator).not.toBeNull()
+    // Indicator precedes the label in DOM order.
+    expect(indicator?.compareDocumentPosition(label!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+
+  it('applies card variant classes by default (border + shadow + bg-card)', () => {
+    const { container } = renderBasic()
+    const item = container.querySelector('[data-slot="accordion-item"]')!
+    expect(item).toHaveClass('border-border')
+    expect(item).toHaveClass('bg-card')
+    expect(item).toHaveClass('shadow-xs')
+  })
+
+  it('applies borderless variant classes when variant="borderless"', () => {
+    const { container } = renderBasic({}, { variant: 'borderless' })
+    const item = container.querySelector('[data-slot="accordion-item"]')!
+    expect(item).toHaveClass('border-transparent')
+    expect(item).toHaveClass('bg-transparent')
+    expect(item).toHaveClass('shadow-none')
+  })
+
+  it('exposes --accordion-indent on the item with a Tailwind has-[] promoter for the leftIcon case', () => {
+    const { container } = renderBasic({ leftIcon: <span /> })
+    const item = container.querySelector('[data-slot="accordion-item"]')!
+    // We can't assert the resolved CSS variable value in jsdom (no real CSS engine),
+    // so we assert the Tailwind utility that flips the variable is on the item.
+    expect(item.className).toContain('[--accordion-indent:14px]')
+    expect(item.className).toContain('has-[[data-slot=accordion-trigger-left-icon]]:[--accordion-indent:44px]')
+  })
+
+  it('forwards refs to the underlying Radix Item / Trigger / Content nodes', () => {
+    const itemRef = React.createRef<HTMLDivElement>()
+    const triggerRef = React.createRef<HTMLButtonElement>()
+    const contentRef = React.createRef<HTMLDivElement>()
+    render(
+      <Accordion type="single" collapsible defaultValue="one">
+        <AccordionItem ref={itemRef} value="one">
+          <AccordionTrigger ref={triggerRef}>Title</AccordionTrigger>
+          <AccordionContent ref={contentRef}>Body</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    )
+    expect(itemRef.current).not.toBeNull()
+    expect(triggerRef.current?.tagName).toBe('BUTTON')
+    expect(contentRef.current).not.toBeNull()
+  })
+})

package/src/primitives/__tests__/alert.test.tsx

@@ -0,0 +1,204 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Alert, AlertDescription, AlertTitle } from '../alert'
+
+describe('Alert primitive', () => {
+  it('renders with role="alert"', () => {
+    render(<Alert>Hello</Alert>)
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+  })
+
+  it('defaults to status="information" + style="light" + size="sm"', () => {
+    const { container } = render(<Alert>Body</Alert>)
+    const alert = container.querySelector('[data-slot="alert"]')
+    expect(alert).toHaveAttribute('data-status', 'information')
+    expect(alert).toHaveAttribute('data-style', 'light')
+    expect(alert).toHaveClass('min-h-9')
+    expect(alert).toHaveClass('rounded-lg')
+  })
+
+  describe('Figma tokens — status × style matrix', () => {
+    it('error / filled: bg-status-error-icon + text-white', () => {
+      const { container } = render(<Alert status="error" style="filled">Oops</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-error-icon')
+      expect(alert).toHaveClass('text-white')
+    })
+
+    it('error / light: bg-status-error-border + text-status-error-text (Figma #fecaca)', () => {
+      const { container } = render(<Alert status="error" style="light">Oops</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-error-border')
+      expect(alert).toHaveClass('text-foreground')
+    })
+
+    it('error / lighter: bg-status-error-bg + text-status-error-text (Figma #fef2f2)', () => {
+      const { container } = render(<Alert status="error" style="lighter">Oops</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-error-bg')
+      expect(alert).toHaveClass('text-foreground')
+    })
+
+    it('stroke style: bg-background + text-foreground + border-border + shadow-lg', () => {
+      const { container } = render(<Alert status="warning" style="stroke">Heads up</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-background')
+      expect(alert).toHaveClass('text-foreground')
+      expect(alert).toHaveClass('border-border')
+      expect(alert).toHaveClass('shadow-lg')
+    })
+
+    it('feature status maps to status-neutral tokens (NOT brand-violet)', () => {
+      const { container } = render(<Alert status="feature" style="light">New release</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-neutral-border')
+      expect(alert).toHaveClass('text-foreground')
+      expect(alert).not.toHaveClass('bg-brand-violet')
+    })
+
+    it('feature / filled: bg-status-neutral-icon + text-white', () => {
+      const { container } = render(<Alert status="feature" style="filled">Hi</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-neutral-icon')
+      expect(alert).toHaveClass('text-white')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('size="xs" applies min-h-8 + rounded-lg + text-xs', () => {
+      const { container } = render(<Alert size="xs">xs</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('min-h-8')
+      expect(alert).toHaveClass('rounded-lg')
+      expect(alert).toHaveClass('text-xs')
+    })
+
+    it('size="sm" applies min-h-9 + rounded-lg + text-sm (Figma Paragraph/Small)', () => {
+      const { container } = render(<Alert size="sm">sm</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('min-h-9')
+      expect(alert).toHaveClass('rounded-lg')
+      expect(alert).toHaveClass('text-sm')
+    })
+
+    it('size="default" applies rounded-xl + larger padding + no min height', () => {
+      const { container } = render(<Alert size="default">default</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('rounded-xl')
+      expect(alert).toHaveClass('text-sm')
+    })
+  })
+
+  describe('Icon badge (non-filled styles)', () => {
+    it('renders a badge wrap with status-x-icon bg + white icon for light style', () => {
+      const { container } = render(<Alert status="success" style="light">Saved</Alert>)
+      const badge = container.querySelector('[data-slot="alert-icon-badge"]')
+      expect(badge).not.toBeNull()
+      expect(badge).toHaveAttribute('data-status', 'success')
+      expect(badge).toHaveClass('bg-status-success-icon')
+      expect(badge).toHaveClass('rounded-full')
+      expect(badge).toHaveClass('text-white')
+    })
+
+    it('renders a badge wrap for lighter style too', () => {
+      const { container } = render(<Alert status="information" style="lighter">FYI</Alert>)
+      expect(container.querySelector('[data-slot="alert-icon-badge"]')).not.toBeNull()
+    })
+
+    it('renders a badge wrap for stroke style too', () => {
+      const { container } = render(<Alert status="error" style="stroke">Oops</Alert>)
+      expect(container.querySelector('[data-slot="alert-icon-badge"]')).not.toBeNull()
+    })
+
+    it('does NOT render a badge wrap for filled style — plain icon instead', () => {
+      const { container } = render(<Alert status="error" style="filled">Oops</Alert>)
+      expect(container.querySelector('[data-slot="alert-icon-badge"]')).toBeNull()
+      expect(container.querySelector('[data-slot="alert-icon"]')).not.toBeNull()
+    })
+
+    it('hides the icon entirely when showIcon is false', () => {
+      const { container } = render(
+        <Alert status="success" showIcon={false}>Done</Alert>,
+      )
+      expect(container.querySelector('[data-slot="alert-icon-badge"]')).toBeNull()
+      expect(container.querySelector('[data-slot="alert-icon"]')).toBeNull()
+    })
+
+    it('respects a custom icon override inside the badge', () => {
+      const Custom = () => <svg data-testid="custom-icon" aria-hidden="true" />
+      render(<Alert status="information" style="light" icon={<Custom />}>Info</Alert>)
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
+  })
+
+  describe('Action slot + dismiss', () => {
+    it('renders an inline action slot to the right of the description', () => {
+      render(
+        <Alert action={<button data-testid="action-link">Undo</button>}>Saved</Alert>,
+      )
+      expect(screen.getByTestId('action-link')).toBeInTheDocument()
+    })
+
+    it('renders a dismiss button when dismissible is true', () => {
+      render(<Alert dismissible onDismiss={() => {}}>Closable</Alert>)
+      expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument()
+    })
+
+    it('fires onDismiss when the dismiss button is clicked', () => {
+      const onDismiss = jest.fn()
+      render(<Alert dismissible onDismiss={onDismiss}>Closable</Alert>)
+      fireEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+      expect(onDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it('honors a custom dismissAriaLabel for i18n', () => {
+      render(
+        <Alert dismissible onDismiss={() => {}} dismissAriaLabel="Zamknij">
+          Closable
+        </Alert>,
+      )
+      expect(screen.getByRole('button', { name: 'Zamknij' })).toBeInTheDocument()
+    })
+  })
+
+  it('AlertTitle and AlertDescription compose inside the body slot', () => {
+    render(
+      <Alert status="success">
+        <AlertTitle>Saved</AlertTitle>
+        <AlertDescription>Your changes were saved.</AlertDescription>
+      </Alert>,
+    )
+    expect(screen.getByText('Saved').tagName).toBe('H5')
+    expect(screen.getByText('Your changes were saved.').tagName).toBe('P')
+  })
+
+  describe('legacy variant prop (BC)', () => {
+    it('maps variant="destructive" to status="error" with the new light default', () => {
+      const { container } = render(<Alert variant="destructive">Oops</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveAttribute('data-status', 'error')
+      expect(alert).toHaveAttribute('data-style', 'light')
+      expect(alert).toHaveClass('bg-status-error-border')
+      expect(alert).toHaveClass('text-foreground')
+    })
+
+    it('maps variant="info" to status="information"', () => {
+      const { container } = render(<Alert variant="info">FYI</Alert>)
+      expect(container.querySelector('[data-slot="alert"]')).toHaveAttribute('data-status', 'information')
+    })
+
+    it('maps variant="default" to status="information"', () => {
+      const { container } = render(<Alert variant="default">Hello</Alert>)
+      expect(container.querySelector('[data-slot="alert"]')).toHaveAttribute('data-status', 'information')
+    })
+
+    it('explicit status overrides the legacy variant prop', () => {
+      const { container } = render(<Alert variant="destructive" status="success">Saved</Alert>)
+      expect(container.querySelector('[data-slot="alert"]')).toHaveAttribute('data-status', 'success')
+    })
+  })
+})

package/src/primitives/__tests__/compact-select.test.tsx

@@ -0,0 +1,98 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import {
+  CompactSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from '../compact-select'
+
+function renderCompactSelect(
+  props: Partial<React.ComponentProps<typeof CompactSelectTrigger>> = {},
+  defaultValue: string = 'all',
+) {
+  return render(
+    <Select defaultValue={defaultValue}>
+      <CompactSelectTrigger aria-label="View" {...props}>
+        <SelectValue />
+      </CompactSelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All</SelectItem>
+        <SelectItem value="open">Open</SelectItem>
+      </SelectContent>
+    </Select>,
+  )
+}
+
+describe('CompactSelect primitive', () => {
+  it('renders the trigger at h-7 (xs) regardless of explicit size attempts', () => {
+    const { container } = renderCompactSelect()
+    const trigger = container.querySelector('[data-slot="compact-select-trigger"]')
+    expect(trigger).not.toBeNull()
+    expect(trigger).toHaveClass('h-7')
+  })
+
+  it('uses the smaller px-2 text-xs styling of the xs size variant', () => {
+    const { container } = renderCompactSelect()
+    const trigger = container.querySelector('[data-slot="compact-select-trigger"]')!
+    expect(trigger).toHaveClass('px-2')
+    expect(trigger).toHaveClass('text-xs')
+  })
+
+  it('renders the triggerLabel prefix when provided', () => {
+    renderCompactSelect({ triggerLabel: 'View:' })
+    expect(screen.getByText('View:')).toBeInTheDocument()
+  })
+
+  it('omits the triggerLabel slot when no label is provided', () => {
+    const { container } = renderCompactSelect()
+    expect(container.querySelector('[data-slot="compact-select-trigger-label"]')).toBeNull()
+  })
+
+  it('marks the trigger label slot with data-slot for styling hooks', () => {
+    const { container } = renderCompactSelect({ triggerLabel: 'Sort:' })
+    const slot = container.querySelector('[data-slot="compact-select-trigger-label"]')
+    expect(slot).not.toBeNull()
+    expect(slot?.textContent).toBe('Sort:')
+  })
+
+  it('forwards the trigger to a ref consumer', () => {
+    const ref = React.createRef<HTMLButtonElement>()
+    render(
+      <Select defaultValue="a">
+        <CompactSelectTrigger ref={ref} aria-label="Pick">
+          <SelectValue />
+        </CompactSelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">A</SelectItem>
+        </SelectContent>
+      </Select>,
+    )
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('BUTTON')
+  })
+
+  it('applies className alongside the size variant', () => {
+    const { container } = renderCompactSelect({ className: 'rounded-full border-brand-violet' })
+    const trigger = container.querySelector('[data-slot="compact-select-trigger"]')
+    expect(trigger).toHaveClass('rounded-full')
+    expect(trigger).toHaveClass('border-brand-violet')
+    expect(trigger).toHaveClass('h-7')
+  })
+
+  it('forwards SelectTrigger ARIA props to the underlying Radix trigger', () => {
+    renderCompactSelect({ 'aria-label': 'Period selector' })
+    expect(screen.getByRole('combobox', { name: 'Period selector' })).toBeInTheDocument()
+  })
+
+  it('renders aria-invalid styling when aria-invalid is set', () => {
+    const { container } = renderCompactSelect({ 'aria-invalid': true })
+    const trigger = container.querySelector('[aria-invalid="true"]')
+    expect(trigger).not.toBeNull()
+  })
+})

package/src/primitives/__tests__/counter-input.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { CounterInput } from '../counter-input'
+
+describe('CounterInput primitive', () => {
+  it('renders the value passed via the value prop', () => {
+    render(<CounterInput value={5} onChange={() => {}} />)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    expect(input.value).toBe('5')
+  })
+
+  it('renders an empty string when value is null', () => {
+    render(<CounterInput value={null} onChange={() => {}} />)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    expect(input.value).toBe('')
+  })
+
+  it('increments by step when + is clicked', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={3} onChange={onChange} step={2} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(5)
+  })
+
+  it('decrements by step when - is clicked', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={10} onChange={onChange} step={3} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Decrease' }))
+    expect(onChange).toHaveBeenCalledWith(7)
+  })
+
+  it('defaults step to 1', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={0} onChange={onChange} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(1)
+  })
+
+  it('clamps to max when incrementing past max', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={9} onChange={onChange} max={10} step={5} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(10)
+  })
+
+  it('clamps to min when decrementing below min', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={2} onChange={onChange} min={0} step={5} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Decrease' }))
+    expect(onChange).toHaveBeenCalledWith(0)
+  })
+
+  it('disables the increment button when value is at max', () => {
+    render(<CounterInput value={10} onChange={() => {}} max={10} />)
+    expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Decrease' })).not.toBeDisabled()
+  })
+
+  it('disables the decrement button when value is at min', () => {
+    render(<CounterInput value={1} onChange={() => {}} min={1} />)
+    expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Increase' })).not.toBeDisabled()
+  })
+
+  it('disables both buttons when disabled prop is set', () => {
+    render(<CounterInput value={5} onChange={() => {}} disabled />)
+    expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled()
+    expect(screen.getByRole('spinbutton')).toBeDisabled()
+  })
+
+  it('commits valid number typed directly', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={0} onChange={onChange} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '42' } })
+    expect(onChange).toHaveBeenCalledWith(42)
+  })
+
+  it('emits null when input is cleared', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={5} onChange={onChange} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '' } })
+    expect(onChange).toHaveBeenCalledWith(null)
+  })
+
+  it('clamps typed value to max', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={0} onChange={onChange} max={100} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '999' } })
+    expect(onChange).toHaveBeenCalledWith(100)
+  })
+
+  it('clamps typed value to min', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={0} onChange={onChange} min={1} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '-5' } })
+    expect(onChange).toHaveBeenCalledWith(1)
+  })
+
+  it('formats output to precision decimals', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={1} onChange={onChange} precision={2} step={0.5} />)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    expect(input.value).toBe('1.00')
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(1.5)
+  })
+
+  it('ArrowUp increments by step', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={2} onChange={onChange} step={3} />)
+    fireEvent.keyDown(screen.getByRole('spinbutton'), { key: 'ArrowUp' })
+    expect(onChange).toHaveBeenCalledWith(5)
+  })
+
+  it('ArrowDown decrements by step', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={5} onChange={onChange} step={2} />)
+    fireEvent.keyDown(screen.getByRole('spinbutton'), { key: 'ArrowDown' })
+    expect(onChange).toHaveBeenCalledWith(3)
+  })
+
+  it('uncontrolled mode keeps internal state and emits onChange', () => {
+    const onChange = jest.fn()
+    render(<CounterInput onChange={onChange} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(1)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    expect(input.value).toBe('1')
+  })
+
+  it('honors custom decrement / increment aria labels', () => {
+    render(
+      <CounterInput
+        value={0}
+        onChange={() => {}}
+        decrementAriaLabel="Zmniejsz"
+        incrementAriaLabel="Zwiększ"
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Zmniejsz' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Zwiększ' })).toBeInTheDocument()
+  })
+
+  it('renders aria-invalid styling when aria-invalid is set', () => {
+    const { container } = render(
+      <CounterInput value={5} onChange={() => {}} aria-invalid />,
+    )
+    const input = container.querySelector('input')
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('applies size variants to the wrapper', () => {
+    const { container, rerender } = render(<CounterInput value={1} onChange={() => {}} size="sm" />)
+    expect(container.querySelector('[data-slot="counter-input"]')).toHaveClass('h-8')
+    rerender(<CounterInput value={1} onChange={() => {}} size="default" />)
+    expect(container.querySelector('[data-slot="counter-input"]')).toHaveClass('h-9')
+    rerender(<CounterInput value={1} onChange={() => {}} size="lg" />)
+    expect(container.querySelector('[data-slot="counter-input"]')).toHaveClass('h-10')
+  })
+})