@freighttech/ui 0.13.18

package/src/primitives-v2/Button.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from './utils'
+
+/*
+  Figma source: FMS-Componenets → Button (component-set 44:92).
+
+  Variant × state matrix extracted from Figma (one entry per leaf
+  variant's `fills` / `strokes` / text fill):
+
+    | Variant     | State    | Background        | Border    | Text
+    |-------------|----------|-------------------|-----------|-----------
+    | primary     | default  | #0E3762 (-v2)     | —         | #FFFFFF
+    | primary     | hover    | #0B2C4F (-v2-hov) | —         | #FFFFFF
+    | primary     | disabled | #0E3762 @ 50%     | —         | #A0A0AA
+    | secondary   | default  | #F4F4F5           | #E4E4E7   | #18181A
+    | secondary   | hover    | #EDEDEF           | #E4E4E7   | #18181A
+    | secondary   | disabled | #F4F4F5           | #E4E4E7   | #A0A0AA
+    | outline     | default  | #FFFFFF           | #D4D4D8   | #18181A
+    | outline     | hover    | #F4F4F5           | #D4D4D8   | #18181A
+    | outline     | disabled | #FFFFFF           | #E4E4E7   | #A0A0AA
+    | ghost       | default  | transparent       | —         | #18181A
+    | ghost       | hover    | #F4F4F5           | —         | #18181A
+    | ghost       | disabled | transparent       | —         | #A0A0AA
+    | destructive | default  | #E7000B           | —         | #FFFFFF
+    | destructive | hover    | #C00009           | —         | #FFFFFF
+    | destructive | disabled | #F4F4F5           | —         | #A0A0AA
+
+  Colors live in `packages/ui/src/theme/tokens.css` as `-v2` tokens.
+
+  Sizes (Figma):
+    xs: h-7 (28px) · px-2.5 (10px) · gap-1 (4px)   — compact inline CTA
+    sm: h-8 (32px) · px-3 (12px) · gap-1.5 (6px)
+    md: h-9 (36px) · px-4 (16px) · gap-2 (8px)
+    lg: h-10 (40px) · px-6 (24px) · gap-2 (8px)
+  Radius: rounded-md (= 8px with --radius=0.625rem).
+  Text: sm/md/lg use `text-sm font-semibold` (Geist 14/600). The xs size
+  uses `text-body-regular-xs` (12px / 400) — matches the in-card "small
+  pill" CTA pattern from the FMS Teczka detail mockup.
+*/
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'
+export type ButtonIconPosition = 'left' | 'right'
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  /** Optional icon element. Renders before children by default; pass `iconPosition="right"` to flip. */
+  icon?: React.ReactNode
+  iconPosition?: ButtonIconPosition
+  /** When true, the button shrinks to a square and only renders the icon. `children` is ignored. */
+  iconOnly?: boolean
+  /**
+   * Render as a Radix `Slot`, merging the button styling onto the single
+   * child element (e.g. a Next.js `<Link>`) instead of a `<button>`. The
+   * caller owns the child's content — `icon` / `iconOnly` are ignored.
+   */
+  asChild?: boolean
+}
+
+/*
+  One row per variant. Each row carries default / hover / disabled
+  triplet, plus the focus ring color. Disabled rules use Tailwind's
+  `disabled:` modifier (works on native <button>) so callers don't
+  need to track state in React.
+*/
+/**
+ * Disabled state follows the Figma design system: each variant keeps its own
+ * brand color (faded navy, faded red, etc.) instead of collapsing to a neutral
+ * gray. We achieve that with `disabled:opacity-40` — preserving bg, text, and
+ * border tone, just dimmed. Hover affordances are gated on `enabled:` so they
+ * never trigger when the button is disabled.
+ */
+const VARIANT_CLASSES: Record<ButtonVariant, string> = {
+  primary: cn(
+    'bg-primary-v2 text-primary-v2-foreground',
+    'enabled:hover:bg-primary-v2-hover',
+    'focus-visible:ring-primary-v2',
+    'disabled:opacity-40',
+  ),
+  secondary: cn(
+    'bg-secondary-v2 text-secondary-v2-foreground border border-border-v2',
+    'enabled:hover:bg-secondary-v2-hover',
+    'focus-visible:ring-primary-v2',
+    'disabled:opacity-40',
+  ),
+  outline: cn(
+    'bg-background-v2 text-foreground-v2 border border-border-v2-strong',
+    'enabled:hover:bg-secondary-v2',
+    'focus-visible:ring-primary-v2',
+    'disabled:opacity-40',
+  ),
+  ghost: cn(
+    'bg-transparent text-foreground-v2',
+    'enabled:hover:bg-secondary-v2',
+    'focus-visible:ring-primary-v2',
+    'disabled:opacity-40',
+  ),
+  destructive: cn(
+    'bg-destructive-v2 text-destructive-v2-foreground',
+    'enabled:hover:bg-destructive-v2-hover',
+    'focus-visible:ring-destructive-v2',
+    'disabled:opacity-40',
+  ),
+}
+
+const SIZE_CLASSES: Record<ButtonSize, string> = {
+  xs: 'h-7 gap-1 rounded-md px-2.5 text-body-regular-xs',
+  sm: 'h-8 gap-1.5 rounded-md px-3 text-sm font-semibold',
+  md: 'h-9 gap-2 rounded-md px-4 text-sm font-semibold',
+  lg: 'h-10 gap-2 rounded-md px-6 text-sm font-semibold',
+}
+
+const ICON_ONLY_SIZE_CLASSES: Record<ButtonSize, string> = {
+  xs: 'h-7 w-7 rounded-md',
+  sm: 'h-8 w-8 rounded-md',
+  md: 'h-9 w-9 rounded-md',
+  lg: 'h-10 w-10 rounded-md',
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = 'primary',
+    size = 'md',
+    icon,
+    iconPosition = 'left',
+    iconOnly = false,
+    asChild = false,
+    className,
+    children,
+    type = 'button',
+    ...props
+  },
+  ref,
+) {
+  const base =
+    'inline-flex cursor-pointer items-center justify-center whitespace-nowrap transition-colors ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +
+    'focus-visible:ring-offset-background-v2 disabled:cursor-not-allowed'
+
+  const classes = cn(
+    base,
+    iconOnly ? ICON_ONLY_SIZE_CLASSES[size] : SIZE_CLASSES[size],
+    VARIANT_CLASSES[variant],
+    className,
+  )
+
+  if (asChild) {
+    // Slot forwards the styling onto the caller's child (e.g. a <Link>);
+    // the child owns its own content, so we don't inject `icon`/children.
+    return (
+      <Slot ref={ref as React.Ref<HTMLElement>} className={classes} {...props}>
+        {children}
+      </Slot>
+    )
+  }
+
+  return (
+    <button ref={ref} type={type} className={classes} {...props}>
+      {icon && iconPosition === 'left' && !iconOnly ? <ButtonIcon size={size}>{icon}</ButtonIcon> : null}
+      {!iconOnly && children}
+      {icon && iconPosition === 'right' && !iconOnly ? (
+        <ButtonIcon size={size}>{icon}</ButtonIcon>
+      ) : null}
+      {iconOnly ? <ButtonIcon size={size}>{icon}</ButtonIcon> : null}
+    </button>
+  )
+})
+
+function ButtonIcon({ size, children }: { size: ButtonSize; children: React.ReactNode }) {
+  const dim = size === 'xs' || size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'
+  return (
+    <span aria-hidden="true" className={cn('inline-flex shrink-0 items-center justify-center', dim)}>
+      {children}
+    </span>
+  )
+}

package/src/primitives-v2/Checkbox.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Checkbox } from './Checkbox'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Figma: FMS-Componenets → Checkbox (45:73). Native input with custom paint. Focus and hover are CSS pseudo-classes — interact with the rendered element to see them.',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Showcase: Story = {
+  name: 'Checkbox',
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Checkbox label="Unchecked" />
+      <Checkbox label="Checked" defaultChecked />
+      <Checkbox label="Indeterminate" indeterminate />
+      <Checkbox label="Disabled (unchecked)" disabled />
+      <Checkbox label="Disabled (checked)" disabled defaultChecked />
+      <Checkbox label="Error" hasError />
+      <Checkbox label="Error + checked" hasError defaultChecked />
+    </div>
+  ),
+}

package/src/primitives-v2/Checkbox.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react'
+import { cn } from './utils'
+
+/*
+  Figma source: FMS-Componenets → Checkbox (component-set 45:73).
+  The checked / indeterminate fill is the brand blue `#3B82F6`
+  (Figma blue/500), stored as `--selection-v2` and shared with the
+  active Tab underline and the selected-row fill. (It was teal
+  `#0D9488` / `--accent-v2` until the Teczka design moved selection
+  states to blue.)
+
+    | State           | Bg                | Border           | Glyph
+    |-----------------|-------------------|-------------------|------
+    | unchecked       | #FFFFFF           | #D4D4D8           | —
+    | checked         | #3B82F6 (blue)    | #3B82F6           | white check
+    | indeterminate   | #3B82F6 (blue)    | #3B82F6           | white dash
+    | disabled        | #F4F4F5           | #E4E4E7           | dimmed
+    | error           | #FFFFFF           | #E7000B           | —
+    | focus           | (border blue)     | #3B82F6 (blue)    | — (ring)
+
+  Implementation: native `<input type="checkbox">` with `appearance: none`
+  and inline-SVG background-images for the check / dash glyphs. The
+  `indeterminate` flag is set imperatively via the ref (HTML has no
+  declarative attribute for it).
+*/
+
+export type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {
+  indeterminate?: boolean
+  hasError?: boolean
+  /** Inline label rendered to the right of the box. */
+  label?: React.ReactNode
+}
+
+const CHECK_SVG =
+  "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")"
+
+const DASH_SVG =
+  "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E\")"
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  { indeterminate = false, hasError = false, label, className, disabled, id, ...props },
+  forwardedRef,
+) {
+  const innerRef = React.useRef<HTMLInputElement | null>(null)
+  React.useImperativeHandle(forwardedRef, () => innerRef.current as HTMLInputElement)
+  React.useEffect(() => {
+    if (innerRef.current) innerRef.current.indeterminate = indeterminate
+  }, [indeterminate])
+
+  const generatedId = React.useId()
+  const inputId = id ?? generatedId
+
+  const box = (
+    <input
+      ref={innerRef}
+      id={inputId}
+      type="checkbox"
+      disabled={disabled}
+      aria-invalid={hasError || undefined}
+      style={
+        {
+          ['--cb-check-svg' as never]: CHECK_SVG,
+          ['--cb-dash-svg' as never]: DASH_SVG,
+        } as React.CSSProperties
+      }
+      className={cn(
+        'relative inline-flex h-4 w-4 shrink-0 cursor-pointer appearance-none rounded border bg-background-v2 transition-colors',
+        'border-border-v2-strong',
+        'checked:border-selection-v2 checked:bg-selection-v2',
+        'indeterminate:border-selection-v2 indeterminate:bg-selection-v2',
+        'checked:bg-[image:var(--cb-check-svg)] checked:bg-center checked:bg-no-repeat',
+        'indeterminate:bg-[image:var(--cb-dash-svg)] indeterminate:bg-center indeterminate:bg-no-repeat',
+        // Focus uses the brand blue selection accent.
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-selection-v2 focus-visible:ring-offset-1 focus-visible:ring-offset-background-v2',
+        // Disabled
+        'disabled:cursor-not-allowed disabled:border-border-v2 disabled:bg-secondary-v2',
+        'disabled:checked:border-muted-v2-foreground disabled:checked:bg-muted-v2-foreground',
+        'disabled:indeterminate:border-muted-v2-foreground disabled:indeterminate:bg-muted-v2-foreground',
+        // Error
+        hasError
+          ? 'border-destructive-v2 checked:border-destructive-v2 checked:bg-destructive-v2 indeterminate:border-destructive-v2 indeterminate:bg-destructive-v2 focus-visible:ring-destructive-v2'
+          : null,
+      )}
+      {...props}
+    />
+  )
+
+  if (label == null) return box
+
+  return (
+    <label
+      htmlFor={inputId}
+      className={cn(
+        'inline-flex cursor-pointer items-center gap-2 text-body-regular-sm text-foreground-v2',
+        disabled ? 'cursor-not-allowed text-muted-v2-foreground' : null,
+        className,
+      )}
+    >
+      {box}
+      <span className="select-none">{label}</span>
+    </label>
+  )
+})

package/src/primitives-v2/IconButton.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { MoreHorizontal, Trash2, Pencil } from 'lucide-react'
+import { IconButton } from './IconButton'
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Figma: FMS-Componenets → IconButton (148:377). Square button for icon-only actions (close, more, sort). Inherits all visual states from `Button`. **Always pass `aria-label`** — there is no visible text.',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof IconButton>
+
+export const Showcase: Story = {
+  name: 'IconButton',
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-3">
+        <IconButton variant="primary" icon={<Pencil />} aria-label="Edytuj" />
+        <IconButton variant="secondary" icon={<Pencil />} aria-label="Edytuj" />
+        <IconButton variant="outline" icon={<Pencil />} aria-label="Edytuj" />
+        <IconButton variant="ghost" icon={<Pencil />} aria-label="Edytuj" />
+        <IconButton variant="destructive" icon={<Trash2 />} aria-label="Usuń" />
+      </div>
+      <div className="flex items-center gap-3">
+        <IconButton size="sm" icon={<MoreHorizontal />} aria-label="Więcej" />
+        <IconButton size="md" icon={<MoreHorizontal />} aria-label="Więcej" />
+        <IconButton size="lg" icon={<MoreHorizontal />} aria-label="Więcej" />
+      </div>
+    </div>
+  ),
+}

package/src/primitives-v2/IconButton.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button'
+
+/*
+  Figma source: FMS-Componenets → IconButton (component-set 148:377).
+  Matrix: state × size. Built as a thin wrapper around Button with
+  `iconOnly` always true and the icon passed as the only content.
+  This keeps the visual contract (radius, hover, focus ring, variants)
+  in sync with Button — change one, change both.
+*/
+
+export type IconButtonProps = Omit<ButtonProps, 'iconOnly' | 'children' | 'icon' | 'iconPosition'> & {
+  /** The icon to render. Required unless `asChild` is set (the child owns its content). */
+  icon?: React.ReactNode
+  /** Accessible label — required since the button has no visible text. */
+  'aria-label': string
+  variant?: ButtonVariant
+  size?: ButtonSize
+  /**
+   * Render the square icon-button styling onto a single child element
+   * (e.g. a Next.js `<Link>`) via Radix `Slot`. Pass the icon as the
+   * child instead of the `icon` prop.
+   */
+  asChild?: boolean
+  children?: React.ReactNode
+}
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { icon, variant = 'ghost', size = 'md', asChild = false, children, ...props },
+  ref,
+) {
+  if (asChild) {
+    return (
+      <Button ref={ref} variant={variant} size={size} iconOnly asChild {...props}>
+        {children}
+      </Button>
+    )
+  }
+  return <Button ref={ref} variant={variant} size={size} iconOnly icon={icon} {...props} />
+})

package/src/primitives-v2/Input.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Search } from 'lucide-react'
+import { Input } from './Input'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    backgrounds: {
+      default: 'figma-surface',
+      values: [{ name: 'figma-surface', value: '#F8F8FA' }],
+    },
+    docs: {
+      description: {
+        component:
+          'Figma: FMS-Componenets → Input (147:379). 5 states × 2 sizes in Figma (we add `lg` for parity with Button). **Focus border is teal `#0D9488`**, not navy — a deliberate accent. Tab into a field to see it.',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Input>
+
+export const Showcase: Story = {
+  name: 'Input',
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <div className="grid grid-cols-[100px_repeat(2,_minmax(240px,_auto))] items-center gap-x-4 gap-y-3">
+        <span />
+        <span className="text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text">sm</span>
+        <span className="text-label-semibold-xs uppercase tracking-wider text-status-v2-neutral-text">md</span>
+
+        <span className="text-label-medium-md text-foreground-v2">default</span>
+        <Input inputSize="sm" placeholder="Placeholder..." />
+        <Input inputSize="md" placeholder="Placeholder..." />
+
+        <span className="text-label-medium-md text-foreground-v2">filled</span>
+        <Input inputSize="sm" defaultValue="Wartość" />
+        <Input inputSize="md" defaultValue="Wartość" />
+
+        <span className="text-label-medium-md text-foreground-v2">error</span>
+        <Input inputSize="sm" defaultValue="Niepoprawna wartość" hasError />
+        <Input inputSize="md" defaultValue="Niepoprawna wartość" hasError />
+
+        <span className="text-label-medium-md text-foreground-v2">disabled</span>
+        <Input inputSize="sm" defaultValue="Wyłączone" disabled />
+        <Input inputSize="md" defaultValue="Wyłączone" disabled />
+      </div>
+      <div className="flex w-[420px] flex-col gap-3">
+        <Input placeholder="Szukaj kontrahenta…" leftAddon={<Search />} />
+        <Input
+          defaultValue="12 450,00"
+          rightAddon={<span className="text-body-regular-sm text-muted-v2-foreground">PLN</span>}
+        />
+      </div>
+    </div>
+  ),
+}

package/src/primitives-v2/Input.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react'
+import { cn } from './utils'
+
+/*
+  Figma source: FMS-Componenets → Input (component-set 147:379).
+
+  State × size matrix (extracted per-variant):
+    | State    | Background | Border             | Text content |
+    |----------|-----------|--------------------|--------------|
+    | default  | #FFFFFF   | #D4D4D8            | #71717A (placeholder)
+    | hover    | #FFFFFF   | #A0A0AA            | #18181A
+    | focus    | #FFFFFF   | #0D9488 (teal!)    | #18181A
+    | error    | #FFFFFF   | #E7000B            | #18181A
+    | disabled | #F4F4F5   | #E4E4E7            | #71717A
+
+  Sizes in Figma: sm (h=32) and md (h=36). We add a `lg` (h=40) for
+  parity with Button; not present in Figma.
+
+  Notable: focus border is **teal**, not the navy primary — a
+  deliberate accent. Reuses `--status-v2-teal-text` from the v2
+  status palette so the focus color stays consistent with Tag's
+  `teczka` variant.
+
+  Text: 13px Geist Regular. Padding 0 12px (sm) / same (md).
+*/
+
+export type InputSize = 'sm' | 'md' | 'lg'
+
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+  inputSize?: InputSize
+  /** Marks the input as invalid; border + focus ring switch to destructive. */
+  hasError?: boolean
+  /** Optional element rendered inside the input at the start (icon, currency, …). */
+  leftAddon?: React.ReactNode
+  /** Optional element rendered inside the input at the end. */
+  rightAddon?: React.ReactNode
+}
+
+const SIZE_CLASSES: Record<InputSize, string> = {
+  sm: 'h-8 text-[13px]',
+  md: 'h-9 text-[13px]',
+  lg: 'h-10 text-sm',
+}
+
+const PADDING_CLASSES: Record<InputSize, { base: string; left: string; right: string }> = {
+  sm: { base: 'px-3', left: 'pl-9', right: 'pr-9' },
+  md: { base: 'px-3', left: 'pl-9', right: 'pr-9' },
+  lg: { base: 'px-4', left: 'pl-10', right: 'pr-10' },
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
+  { inputSize = 'md', hasError = false, leftAddon, rightAddon, className, disabled, ...props },
+  ref,
+) {
+  const pad = PADDING_CLASSES[inputSize]
+  const padClass = cn(leftAddon ? pad.left : null, rightAddon ? pad.right : null, !leftAddon && !rightAddon ? pad.base : null)
+
+  const baseStateClasses = hasError
+    ? // Error: red border, red focus ring
+      'border-destructive-v2 text-foreground-v2 placeholder:text-muted-v2-foreground focus-visible:border-destructive-v2 focus-visible:ring-destructive-v2/30'
+    : disabled
+      ? // Disabled: muted bg, soft border, no focus
+        'bg-secondary-v2 border-border-v2 text-muted-v2-foreground placeholder:text-muted-v2-foreground cursor-not-allowed'
+      : // Idle → hover (darker border) → focus (teal accent)
+        'border-border-v2-strong text-foreground-v2 placeholder:text-muted-v2-foreground hover:border-muted-v2-foreground focus-visible:border-accent-v2 focus-visible:ring-accent-v2/30'
+
+  const input = (
+    <input
+      ref={ref}
+      disabled={disabled}
+      aria-invalid={hasError || undefined}
+      className={cn(
+        'w-full rounded-md border bg-background-v2 transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0',
+        SIZE_CLASSES[inputSize],
+        padClass,
+        baseStateClasses,
+        className,
+      )}
+      {...props}
+    />
+  )
+
+  if (!leftAddon && !rightAddon) return input
+
+  return (
+    <div className="relative inline-flex w-full items-center">
+      {leftAddon ? (
+        <span
+          aria-hidden="true"
+          className={cn(
+            'pointer-events-none absolute inset-y-0 left-0 flex items-center text-muted-v2-foreground [&>svg]:h-4 [&>svg]:w-4',
+            inputSize === 'sm' ? 'pl-2.5' : inputSize === 'lg' ? 'pl-3.5' : 'pl-3',
+          )}
+        >
+          {leftAddon}
+        </span>
+      ) : null}
+      {input}
+      {rightAddon ? (
+        <span
+          aria-hidden="true"
+          className={cn(
+            'pointer-events-none absolute inset-y-0 right-0 flex items-center text-muted-v2-foreground [&>svg]:h-4 [&>svg]:w-4',
+            inputSize === 'sm' ? 'pr-2.5' : inputSize === 'lg' ? 'pr-3.5' : 'pr-3',
+          )}
+        >
+          {rightAddon}
+        </span>
+      ) : null}
+    </div>
+  )
+})

package/src/primitives-v2/NavGroup.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Folder, FileText, Truck } from 'lucide-react'
+import { NavGroup } from './NavGroup'
+import { NavItem } from './NavItem'
+
+const meta: Meta<typeof NavGroup> = {
+  title: 'Components/NavGroup',
+  component: NavGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Figma: FMS-Componenets → NavGroup (72:154). Section header + collapsible list of `NavItem`s. Figma\'s 10 boolean `itemN_show` flags become plain React children — pass any number of items.',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof NavGroup>
+
+export const Showcase: Story = {
+  name: 'NavGroup',
+  render: () => (
+    <div className="w-[240px] rounded-md bg-sidebar-v2 p-2">
+      <div className="flex flex-col gap-3">
+        <NavGroup title="Workspace">
+          <NavItem icon={<Folder />} isActive>
+            Pulpit
+          </NavItem>
+          <NavItem icon={<FileText />} badge="3">
+            Powiadomienia
+          </NavItem>
+        </NavGroup>
+        <NavGroup title="Operacje">
+          <NavItem icon={<Folder />}>Teczki</NavItem>
+          <NavItem icon={<FileText />} badge="12">
+            Faktury
+          </NavItem>
+          <NavItem icon={<Truck />}>Transporty</NavItem>
+        </NavGroup>
+        <NavGroup title="Archiwum" defaultCollapsed>
+          <NavItem>2024</NavItem>
+          <NavItem>2023</NavItem>
+        </NavGroup>
+      </div>
+    </div>
+  ),
+}