@freighttech/ui 0.13.18

package/src/primitives-v2/Tab.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react'
+import { cn } from './utils'
+
+/*
+  Figma source: FMS-Componenets → Tab (component-set 45:90) and
+  TabBar (component-set 183:453).
+
+  Built from Tier 3 endpoints only — Tier 1 was rate-limited when this
+  was added. Visual reference: per-variant thumbnails downloaded via
+  `GET /v1/files/:key/components` + each component's `thumbnail_url`.
+  See `.ai/figma-rules.md` "Rate limit" section.
+
+  Variant matrix (verified by thumbnail + user correction):
+    | State    | Text color           | Underline
+    |----------|----------------------|---------------------------
+    | default  | --status-v2-neutral- | —
+    |          |   text (#71717A)     |
+    | active   | --foreground-v2      | 2px --tab-v2-indicator
+    |          |   (#18181A) + medium |   (Figma blue/500)
+    | disabled | --muted-v2-foreground| —
+    |          |   (#A0A0AA)          |
+
+  Underline color was updated from `--accent-v2-bright` (teal-400) to
+  the brand blue (`--tab-v2-indicator`) per FMS Teczka design — the
+  teal Figma value read too cold against the navy primary CTAs in this
+  app.
+
+  Figma's `Tab` variant axis is just `state`. The `hasBadge` / `count`
+  are **configurable component properties** (text + boolean), not
+  variants — we expose them as React props (`badge`).
+
+  `TabBar` provides context so multiple Tab children share a single
+  `value` / `onChange` pair. Tabs can also be controlled by passing
+  `isActive` directly when used outside a TabBar.
+*/
+
+// ── Context ──────────────────────────────────────────────────────
+
+type TabBarContextValue = {
+  value?: string
+  onChange?: (next: string) => void
+}
+
+const TabBarContext = React.createContext<TabBarContextValue | null>(null)
+
+// ── TabBar ───────────────────────────────────────────────────────
+
+export type TabBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  /** Currently active tab `value`. */
+  value?: string
+  /** Called when a child Tab is clicked. */
+  onChange?: (next: string) => void
+  /** Optional aria-label for the tablist landmark. */
+  ariaLabel?: string
+}
+
+export function TabBar({
+  value,
+  onChange,
+  ariaLabel,
+  className,
+  children,
+  ...props
+}: TabBarProps) {
+  const ctx = React.useMemo<TabBarContextValue>(() => ({ value, onChange }), [value, onChange])
+  return (
+    <TabBarContext.Provider value={ctx}>
+      <div
+        role="tablist"
+        aria-label={ariaLabel}
+        className={cn(
+          'flex items-end gap-6 border-b border-border-v2',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </TabBarContext.Provider>
+  )
+}
+
+// ── Tab ──────────────────────────────────────────────────────────
+
+export type TabProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
+  /** Identifier used by the parent TabBar to track which tab is active. */
+  value?: string
+  /** Use this if the Tab is rendered outside a TabBar. Inside a TabBar the
+   *  active state is derived from the bar's `value` prop. */
+  isActive?: boolean
+  /** Optional numeric/text badge rendered after the label. */
+  badge?: React.ReactNode
+}
+
+export const Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(
+  { value, isActive, badge, className, children, disabled, onClick, ...props },
+  ref,
+) {
+  const ctx = React.useContext(TabBarContext)
+  const active =
+    isActive !== undefined ? isActive : ctx && value !== undefined && ctx.value === value
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(e)
+    if (e.defaultPrevented) return
+    if (ctx?.onChange && value !== undefined) ctx.onChange(value)
+  }
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="tab"
+      aria-selected={active || undefined}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        'relative inline-flex items-center gap-1.5 pb-2 pt-1 text-body-medium-sm transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-v2 focus-visible:ring-offset-1',
+        active
+          ? // active: dark text + --tab-v2-indicator underline (offset to overlap the TabBar's border-bottom)
+            cn(
+              'text-foreground-v2 font-medium cursor-pointer',
+              'after:absolute after:inset-x-0 after:-bottom-px after:h-[2px] after:bg-tab-v2-indicator after:content-[""]',
+            )
+          : disabled
+            ? 'text-muted-v2-foreground cursor-not-allowed'
+            : 'text-status-v2-neutral-text hover:text-foreground-v2 cursor-pointer',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {badge != null ? (
+        <span
+          className={cn(
+            'inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1.5 text-label-semibold-xs',
+            active
+              ? 'bg-accent-v2/10 text-accent-v2'
+              : 'bg-status-v2-neutral-bg text-status-v2-neutral-text',
+          )}
+        >
+          {badge}
+        </span>
+      ) : null}
+    </button>
+  )
+})

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

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Tag } from './Tag'
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  parameters: {
+    backgrounds: {
+      default: 'figma-surface',
+      values: [{ name: 'figma-surface', value: '#F8F8FA' }],
+    },
+    docs: {
+      description: {
+        component:
+          'Figma: FMS-Componenets → Tag (46:38). Three **identity** variants (`default`, `container`, `teczka`) plus six additive **status-color** variants (`success`, `error`, `warning`, `info`, `purple`, `orange`) that reuse the `--status-v2-*` palette so the same chip shape can render status pills (e.g. `Loaded`, `Przeterminowana`). Each can be `removable` via `onRemove`. `size`: `sm` (12 px / 2 px padding — used in dense rows) or `md` (13 px / 3 px — the Figma default).',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Tag>
+
+export const Showcase: Story = {
+  name: 'All variants',
+  render: () => (
+    <div className="space-y-8">
+      <Section
+        title="Identity (Figma source)"
+        subtitle="default · container · teczka — paired with their removable state"
+      >
+        <Row label="default">
+          <Tag variant="default">FCL 40&apos;</Tag>
+          <Tag variant="default" onRemove={() => {}}>FCL 40&apos;</Tag>
+        </Row>
+        <Row label="container">
+          <Tag variant="container">MSCU7234561</Tag>
+          <Tag variant="container" onRemove={() => {}}>MSCU7234561</Tag>
+        </Row>
+        <Row label="teczka">
+          <Tag variant="teczka">SPOL-2025-041</Tag>
+          <Tag variant="teczka" onRemove={() => {}}>SPOL-2025-041</Tag>
+        </Row>
+      </Section>
+
+      <Section
+        title="Status colors (additive)"
+        subtitle="Reuse the `--status-v2-*` palette so the same chip shape covers status pills."
+      >
+        <Row label="success">
+          <Tag variant="success">Załadowany</Tag>
+          <Tag variant="success" size="sm">Zapłacona</Tag>
+        </Row>
+        <Row label="error">
+          <Tag variant="error">Przeterminowana</Tag>
+          <Tag variant="error" size="sm">Failed</Tag>
+        </Row>
+        <Row label="warning">
+          <Tag variant="warning">Oczekuje</Tag>
+          <Tag variant="warning" size="sm">Partial</Tag>
+        </Row>
+        <Row label="info">
+          <Tag variant="info">Planowanie</Tag>
+          <Tag variant="info" size="sm">Estimated</Tag>
+        </Row>
+        <Row label="purple">
+          <Tag variant="purple">Estimated</Tag>
+          <Tag variant="purple" size="sm">Invoiced</Tag>
+        </Row>
+        <Row label="orange">
+          <Tag variant="orange">Partially Delivered</Tag>
+          <Tag variant="orange" size="sm">In Transit</Tag>
+        </Row>
+      </Section>
+
+      <Section
+        title="Size"
+        subtitle="`md` (Figma default, 13 px / 3 px padding) vs `sm` (compact, 12 px / 2 px padding)."
+      >
+        <Row label="md">
+          <Tag variant="default" size="md">IMPORT</Tag>
+          <Tag variant="success" size="md">Załadowany</Tag>
+          <Tag variant="container" size="md">MSCU7234561</Tag>
+        </Row>
+        <Row label="sm">
+          <Tag variant="default" size="sm">IMPORT</Tag>
+          <Tag variant="success" size="sm">Załadowany</Tag>
+          <Tag variant="container" size="sm">MSCU7234561</Tag>
+        </Row>
+      </Section>
+    </div>
+  ),
+}
+
+function Section({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string
+  subtitle: string
+  children: React.ReactNode
+}) {
+  return (
+    <div>
+      <h3 className="text-heading-semibold-md text-foreground-v2 mb-1">{title}</h3>
+      <p className="text-body-regular-xs text-status-v2-neutral-text mb-3">{subtitle}</p>
+      <div className="grid grid-cols-[100px_minmax(0,1fr)] items-center gap-x-6 gap-y-2.5">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <>
+      <span className="text-label-medium-md text-foreground-v2">{label}</span>
+      <div className="flex flex-wrap items-center gap-2">{children}</div>
+    </>
+  )
+}

package/src/primitives-v2/Tag.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { cn } from './utils'
+
+/*
+  Figma source: FMS-Componenets → Tag (component-set 46:38).
+
+  Variant matrix (extracted from each variant's `fills`/`strokes`/text fill):
+    | Variant   | Background | Border  | Text    | Notes
+    |-----------|-----------|---------|---------|------
+    | default   | #F4F4F5   | #E4E4E7 | #71717A | gray, generic
+    | container | #E8EEF4   | #C9D9E7 | #18181A | "kontener" — container IDs
+    | teczka    | #CCFBF1   | #99E7D8 | #0D9488 | folder/project IDs
+
+  Plus status-color variants (success / error / warning / info / purple /
+  orange) that reuse the `--status-v2-*` tokens shared with `Badge`. These
+  let callers render a Tag-shaped chip (rectangular w/ 6px radius) for
+  status pills like "AKTYWNA" / "Ready" / "Pending" without falling back
+  to the pill-shaped Badge component. They're additive — `default` /
+  `container` / `teczka` still match the Figma source exactly.
+
+  Plus a `state` of `default | removable`. Removable adds a trailing
+  "×" close button.
+
+  Layout: gap 4px, padding 3px 8px (default) / 3px 6px 3px 8px (removable),
+  radius 6px (`rounded-[6px]`), text 13px / Geist Regular 400. Matches
+  the FMS Teczka detail mockup's chip — visible corner roundness but
+  still reads as a rectangular tag rather than a pill at small heights.
+*/
+
+export type TagVariant =
+  | 'default'
+  | 'container'
+  | 'teczka'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'purple'
+  | 'orange'
+
+/**
+ * `md` (default): Figma source — 13px / 3px padding.
+ * `sm`: compact 12px / 2px padding — matches the in-card "chip" pattern
+ * from the FMS Teczka detail mockup (e.g. IMPORT / AKTYWNA).
+ */
+export type TagSize = 'sm' | 'md'
+
+export type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onSelect'> & {
+  variant?: TagVariant
+  size?: TagSize
+  /** When provided, renders a close "×" button after the children and calls this on click. */
+  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  /** Accessible label for the close button. Falls back to "Usuń". */
+  removeAriaLabel?: string
+  /** Optional leading element (icon, dot, avatar). */
+  leading?: React.ReactNode
+}
+
+const VARIANT_CLASSES: Record<TagVariant, string> = {
+  default: 'bg-status-v2-neutral-bg border-status-v2-neutral-border text-status-v2-neutral-text',
+  container: 'bg-status-v2-primary-bg border-status-v2-primary-border text-status-v2-primary-text',
+  teczka: 'bg-status-v2-teal-bg border-status-v2-teal-border text-status-v2-teal-text',
+  success: 'bg-status-v2-success-bg border-status-v2-success-border text-status-v2-success-text',
+  error: 'bg-status-v2-error-bg border-status-v2-error-border text-status-v2-error-text',
+  warning: 'bg-status-v2-warning-bg border-status-v2-warning-border text-status-v2-warning-text',
+  info: 'bg-status-v2-info-bg border-status-v2-info-border text-status-v2-info-text',
+  purple: 'bg-status-v2-purple-bg border-status-v2-purple-border text-status-v2-purple-text',
+  orange: 'bg-status-v2-orange-bg border-status-v2-orange-border text-status-v2-orange-text',
+}
+
+const SIZE_CLASSES: Record<TagSize, string> = {
+  sm: 'py-[2px] text-label-semibold-xs',
+  md: 'py-[3px] text-[13px]',
+}
+
+export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(function Tag(
+  { variant = 'default', size = 'md', onRemove, removeAriaLabel = 'Usuń', leading, className, children, ...props },
+  ref,
+) {
+  const removable = typeof onRemove === 'function'
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        // Tag text is always uppercase — matches the FMS chip convention
+        // (IMPORT / AKTYWNA / LOADED / …). Callers can opt out with
+        // `className="normal-case"` if they ever need raw casing.
+        'inline-flex items-center gap-1 rounded-[6px] border uppercase tracking-wide',
+        SIZE_CLASSES[size],
+        removable ? 'pl-2 pr-1.5' : 'px-2',
+        VARIANT_CLASSES[variant],
+        className,
+      )}
+      {...props}
+    >
+      {leading != null ? <span className="inline-flex shrink-0">{leading}</span> : null}
+      <span>{children}</span>
+      {removable ? (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={removeAriaLabel}
+          className={cn(
+            'ml-0.5 inline-flex h-3 w-3 shrink-0 items-center justify-center rounded-sm',
+            'opacity-70 transition-opacity hover:bg-black/5 hover:opacity-100',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1',
+          )}
+        >
+          <X className="h-3 w-3" />
+        </button>
+      ) : null}
+    </span>
+  )
+})

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Toggle } from './Toggle'
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Figma: FMS-Componenets → Toggle (45:80). Native `<input type="checkbox" role="switch">` with a styled track + thumb. Two sizes — Figma defines one, we expose `sm` and `md`.',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toggle>
+
+export const Showcase: Story = {
+  name: 'Toggle',
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <Toggle label="Off (default)" />
+        <Toggle label="On" defaultChecked />
+        <Toggle label="Disabled (off)" disabled />
+        <Toggle label="Disabled (on)" disabled defaultChecked />
+      </div>
+      <div className="flex items-center gap-6">
+        <Toggle toggleSize="sm" label="Small" defaultChecked />
+        <Toggle toggleSize="md" label="Medium (default)" defaultChecked />
+      </div>
+    </div>
+  ),
+}

package/src/primitives-v2/Toggle.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react'
+import { cn } from './utils'
+
+/*
+  Figma source: FMS-Componenets → Toggle (component-set 45:80).
+  Colours verified by visual diff against the Figma frame (we never
+  walked the Figma variants — rate-limit hit on the first attempt —
+  but the side-by-side screenshot confirmed teal `#0D9488` is the
+  on-state track, matching Checkbox's checked fill, Input's focus
+  border, and Tag's `teczka` variant. Stored as `--accent-v2`.
+
+    off:       track #E4E4E7, thumb #FFFFFF
+    on:        track #0D9488 (accent), thumb #FFFFFF
+    disabled:  track #F4F4F5, thumb dimmed (via opacity)
+    focus:     accent ring (matches Input / Checkbox)
+
+  Built on `<input type="checkbox" role="switch">` with a styled track
+  + absolute-positioned thumb. Two sizes — Figma ships one (md); we
+  also expose `sm` for inline / table-row usage.
+*/
+
+export type ToggleSize = 'sm' | 'md'
+
+export type ToggleProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {
+  toggleSize?: ToggleSize
+  /** Optional label rendered to the right of the switch. */
+  label?: React.ReactNode
+}
+
+const TRACK_SIZE: Record<ToggleSize, string> = {
+  sm: 'h-4 w-7',
+  md: 'h-5 w-9',
+}
+
+const THUMB_SIZE: Record<ToggleSize, string> = {
+  sm: 'h-3 w-3 translate-x-0.5 peer-checked:translate-x-3.5',
+  md: 'h-4 w-4 translate-x-0.5 peer-checked:translate-x-4',
+}
+
+export const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
+  { toggleSize = 'md', label, className, disabled, id, ...props },
+  ref,
+) {
+  const generatedId = React.useId()
+  const inputId = id ?? generatedId
+
+  const control = (
+    <span className="relative inline-flex shrink-0 items-center">
+      <input
+        ref={ref}
+        id={inputId}
+        type="checkbox"
+        role="switch"
+        disabled={disabled}
+        className="peer sr-only"
+        {...props}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          'inline-flex shrink-0 cursor-pointer rounded-full bg-border-v2 transition-colors',
+          TRACK_SIZE[toggleSize],
+          'peer-checked:bg-accent-v2',
+          'peer-focus-visible:ring-2 peer-focus-visible:ring-accent-v2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-background-v2',
+          'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        )}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          'pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full bg-background-v2 shadow-sm transition-transform',
+          THUMB_SIZE[toggleSize],
+        )}
+      />
+    </span>
+  )
+
+  if (label == null) return control
+
+  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,
+      )}
+    >
+      {control}
+      <span className="select-none">{label}</span>
+    </label>
+  )
+})

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Bell, CircleHelp, Plus } from 'lucide-react'
+import { Topbar } from './Topbar'
+import { Breadcrumb } from './Breadcrumb'
+import { SearchInput } from './SearchInput'
+import { IconButton } from './IconButton'
+import { Avatar } from './Avatar'
+import { Badge } from './Badge'
+import { Button } from './Button'
+
+const meta: Meta<typeof Topbar> = {
+  title: 'Components/Topbar',
+  component: Topbar,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'figma-surface',
+      values: [{ name: 'figma-surface', value: '#F8F8FA' }],
+    },
+    docs: {
+      description: {
+        component:
+          'Figma: FMS-Componenets → Topbar (150:367 — 1440×52). Three slots: `leading`, `center`, `trailing`. Composition of the other components.',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Topbar>
+
+export const Showcase: Story = {
+  name: 'Topbar',
+  render: () => (
+    <Topbar
+      leading={
+        <Breadcrumb
+          items={[
+            { label: 'Faktury', href: '/invoices' },
+            { label: 'FV/2025/0041' },
+          ]}
+        />
+      }
+      center={<SearchInput inputSize="sm" className="w-[280px]" placeholder="Szukaj…" shortcut="⌘K" />}
+      trailing={
+        <>
+          <Button size="sm" icon={<Plus />}>
+            Nowa faktura
+          </Button>
+          <span className="relative inline-flex">
+            <IconButton size="sm" icon={<Bell />} aria-label="Powiadomienia" />
+            <span className="absolute -right-1 -top-1">
+              <Badge variant="error" size="sm">
+                3
+              </Badge>
+            </span>
+          </span>
+          <IconButton size="sm" icon={<CircleHelp />} aria-label="Pomoc" />
+          <Avatar size="sm" name="Karolina Firmowe" />
+        </>
+      }
+    />
+  ),
+}

package/src/primitives-v2/Topbar.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { cn } from './utils'
+
+/*
+  Figma source: FMS-Componenets → Topbar (component 150:367, 1440×52).
+  Three-slot composition: leading (breadcrumb / page title), center
+  (search / context controls), trailing (org selector / actions /
+  avatar). Height pinned to 52px to match Figma; horizontal padding
+  24px.
+
+  Stays presentation-only — no router wiring; pass whatever JSX you
+  need into each slot. The Storybook story shows a realistic FMS
+  composition.
+*/
+
+export type TopbarProps = React.HTMLAttributes<HTMLElement> & {
+  leading?: React.ReactNode
+  center?: React.ReactNode
+  trailing?: React.ReactNode
+}
+
+export function Topbar({ leading, center, trailing, className, ...props }: TopbarProps) {
+  return (
+    <header
+      className={cn(
+        'flex h-13 w-full shrink-0 items-center gap-3 border-b border-border-v2 bg-background-v2 px-6',
+        className,
+      )}
+      style={{ height: 52 }}
+      {...props}
+    >
+      <div className="flex min-w-0 flex-1 items-center gap-3">{leading}</div>
+      {center ? <div className="flex shrink-0 items-center gap-2">{center}</div> : null}
+      <div className="flex shrink-0 items-center gap-2">{trailing}</div>
+    </header>
+  )
+}

package/src/primitives-v2/index.ts

@@ -0,0 +1,31 @@
+/*
+  Public surface of the FMS-Componenets-aligned design-system layer.
+
+  Components live alongside their Storybook stories so designers and
+  engineers see the same artefacts. The legacy primitives under
+  `../primitives/` are kept for Tier-3 backwards compatibility but
+  carry `@deprecated` JSDoc pointing here.
+*/
+
+export { Alert, type AlertProps, type AlertVariant } from './Alert'
+export { Avatar, AvatarStack, type AvatarProps, type AvatarSize, type AvatarStackProps } from './Avatar'
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant } from './Badge'
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from './Breadcrumb'
+export {
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+  type ButtonSize,
+  type ButtonIconPosition,
+} from './Button'
+export { Checkbox, type CheckboxProps } from './Checkbox'
+export { IconButton, type IconButtonProps } from './IconButton'
+export { Input, type InputProps, type InputSize } from './Input'
+export { NavGroup, type NavGroupProps } from './NavGroup'
+export { NavItem, type NavItemProps } from './NavItem'
+export { SearchInput, type SearchInputProps } from './SearchInput'
+export { Sidebar, SidebarFooter, SidebarHeader, type SidebarProps, type SidebarHeaderProps, type SidebarFooterProps } from './Sidebar'
+export { Tab, TabBar, type TabProps, type TabBarProps } from './Tab'
+export { Tag, type TagProps, type TagVariant } from './Tag'
+export { Toggle, type ToggleProps, type ToggleSize } from './Toggle'
+export { Topbar, type TopbarProps } from './Topbar'

package/src/primitives-v2/utils.ts

@@ -0,0 +1,9 @@
+/*
+  Local className concatenation helper. The legacy primitives in
+  `../primitives/` depend on `@open-mercato/shared/lib/utils#cn`, but
+  that subpath isn't in the shared package's `exports` map. The new
+  components in this directory deliberately avoid that coupling.
+*/
+export function cn(...classes: Array<string | undefined | null | false>): string {
+  return classes.filter(Boolean).join(' ')
+}