@freighttech/ui 0.13.18

package/src/theme/typography.css

@@ -0,0 +1,163 @@
+/*
+  FMS Foundation — Typography tokens.
+
+  Mirrors the 20 textStyles defined in the Figma "FMS Foundation" file
+  (page "🔤 Typography System"). Each token registers a Tailwind v4
+  text utility: e.g. `text-heading-bold-md` sets font-size, line-height,
+  letter-spacing, and font-weight in a single class.
+
+  Source family:
+    - sans (heading, body, label, caption) → var(--font-sans)  [Geist]
+    - mono (code)                          → var(--font-mono)  [Geist Mono]
+
+  Heading family carries a tightened tracking of -2.5% (= -0.025em).
+  Body / label / caption / code use the default 0 tracking.
+*/
+
+@theme {
+  /* ── Headings ─────────────────────────────────────────────────── */
+  --text-heading-bold-2xl: 1.5rem;        /* 24 / 32 */
+  --text-heading-bold-2xl--line-height: 2rem;
+  --text-heading-bold-2xl--letter-spacing: -0.025em;
+  --text-heading-bold-2xl--font-weight: 700;
+
+  --text-heading-bold-xl: 1.25rem;        /* 20 / 28 */
+  --text-heading-bold-xl--line-height: 1.75rem;
+  --text-heading-bold-xl--letter-spacing: -0.025em;
+  --text-heading-bold-xl--font-weight: 700;
+
+  --text-heading-bold-lg: 1.125rem;       /* 18 / 28 */
+  --text-heading-bold-lg--line-height: 1.75rem;
+  --text-heading-bold-lg--letter-spacing: -0.025em;
+  --text-heading-bold-lg--font-weight: 700;
+
+  --text-heading-bold-md: 1rem;           /* 16 / 24 */
+  --text-heading-bold-md--line-height: 1.5rem;
+  --text-heading-bold-md--letter-spacing: -0.025em;
+  --text-heading-bold-md--font-weight: 700;
+
+  --text-heading-semibold-2xl: 1.5rem;    /* 24 / 32 */
+  --text-heading-semibold-2xl--line-height: 2rem;
+  --text-heading-semibold-2xl--letter-spacing: -0.025em;
+  --text-heading-semibold-2xl--font-weight: 600;
+
+  --text-heading-semibold-xl: 1.25rem;    /* 20 / 28 */
+  --text-heading-semibold-xl--line-height: 1.75rem;
+  --text-heading-semibold-xl--letter-spacing: -0.025em;
+  --text-heading-semibold-xl--font-weight: 600;
+
+  --text-heading-semibold-lg: 1.125rem;   /* 18 / 28 */
+  --text-heading-semibold-lg--line-height: 1.75rem;
+  --text-heading-semibold-lg--letter-spacing: -0.025em;
+  --text-heading-semibold-lg--font-weight: 600;
+
+  --text-heading-semibold-md: 1rem;       /* 16 / 24 */
+  --text-heading-semibold-md--line-height: 1.5rem;
+  --text-heading-semibold-md--letter-spacing: -0.025em;
+  --text-heading-semibold-md--font-weight: 600;
+
+  --text-heading-semibold-sm: 0.875rem;   /* 14 / 20 */
+  --text-heading-semibold-sm--line-height: 1.25rem;
+  --text-heading-semibold-sm--letter-spacing: -0.025em;
+  --text-heading-semibold-sm--font-weight: 600;
+
+  /* ── Body ─────────────────────────────────────────────────────── */
+  --text-body-regular-md: 1rem;           /* 16 / 24 */
+  --text-body-regular-md--line-height: 1.5rem;
+  --text-body-regular-md--font-weight: 400;
+
+  --text-body-regular-sm: 0.875rem;       /* 14 / 20 */
+  --text-body-regular-sm--line-height: 1.25rem;
+  --text-body-regular-sm--font-weight: 400;
+
+  --text-body-regular-xs: 0.75rem;        /* 12 / 16 */
+  --text-body-regular-xs--line-height: 1rem;
+  --text-body-regular-xs--font-weight: 400;
+
+  --text-body-medium-md: 1rem;            /* 16 / 24 */
+  --text-body-medium-md--line-height: 1.5rem;
+  --text-body-medium-md--font-weight: 500;
+
+  --text-body-medium-sm: 0.875rem;        /* 14 / 20 */
+  --text-body-medium-sm--line-height: 1.25rem;
+  --text-body-medium-sm--font-weight: 500;
+
+  /* 11 / 14 — DENSE grid data cells only (DynamicTable [data-density-level="dense"]).
+     Not a general-purpose UI size: 11px is below the readable floor for prose.
+     Line-height 14px (1.27) is the number that actually buys rows — it is the
+     tightest leading at which Geist's descenders (g, j, y) clear the ascenders
+     of the line below at this size. Tracking +1% counteracts the optical
+     crowding Geist shows under 12px; without it, dense numeric columns
+     (container refs, amounts) smear. */
+  --text-body-regular-2xs: 0.6875rem;
+  --text-body-regular-2xs--line-height: 0.875rem;
+  --text-body-regular-2xs--letter-spacing: 0.01em;
+  --text-body-regular-2xs--font-weight: 400;
+
+  /* ── Label ────────────────────────────────────────────────────── */
+  --text-label-medium-md: 0.875rem;       /* 14 / 20 */
+  --text-label-medium-md--line-height: 1.25rem;
+  --text-label-medium-md--font-weight: 500;
+
+  --text-label-semibold-md: 0.875rem;     /* 14 / 20 — Figma `label/semibold/md` (Topbar current crumb) */
+  --text-label-semibold-md--line-height: 1.25rem;
+  --text-label-semibold-md--font-weight: 600;
+
+  --text-label-semibold-xs: 0.75rem;      /* 12 / 16 */
+  --text-label-semibold-xs--line-height: 1rem;
+  --text-label-semibold-xs--font-weight: 600;
+
+  /* 10 / 12 — DENSE grid COLUMN HEADERS only. A header is read once to locate a
+     column, then never again, so it can go a step below the data it labels;
+     spending 12px on a permanently-visible header bar is the worst px-per-bit
+     trade in the grid. Semibold + tracking +2% is what keeps a 10px word
+     legible: at this size weight, not size, carries the letterform, and the
+     extra tracking stops short ALL-CAPS-ish labels (ETA, POD, NIP) from
+     reading as a single blob. */
+  --text-label-semibold-2xs: 0.625rem;
+  --text-label-semibold-2xs--line-height: 0.75rem;
+  --text-label-semibold-2xs--letter-spacing: 0.02em;
+  --text-label-semibold-2xs--font-weight: 600;
+
+  /* ── Caption ──────────────────────────────────────────────────── */
+  --text-caption-medium-lg: 0.875rem;     /* 14 / 20 */
+  --text-caption-medium-lg--line-height: 1.25rem;
+  --text-caption-medium-lg--font-weight: 500;
+
+  --text-caption-medium-md: 0.75rem;      /* 12 / 16 */
+  --text-caption-medium-md--line-height: 1rem;
+  --text-caption-medium-md--font-weight: 500;
+
+  /* ── Code (monospace) ─────────────────────────────────────────── */
+  --text-code-regular-md: 0.875rem;       /* 14 / 24 */
+  --text-code-regular-md--line-height: 1.5rem;
+  --text-code-regular-md--font-weight: 400;
+
+  --text-code-regular-sm: 0.75rem;        /* 12 / 16 */
+  --text-code-regular-sm--line-height: 1rem;
+  --text-code-regular-sm--font-weight: 400;
+
+  /* 11 / 14 — DENSE mono cells. Exists purely so the mono ramp has a step that
+     shares `body/regular/2xs`'s METRICS: in the grid, mono and sans cells sit
+     side by side in the same row, so a mono step with a taller line-height
+     would silently set the row height for the whole table. Same +1% tracking;
+     on Geist Mono the advance width is fixed, so the tracking lands as extra
+     space between glyphs, which is exactly what a 20px row of container
+     numbers needs. */
+  --text-code-regular-2xs: 0.6875rem;
+  --text-code-regular-2xs--line-height: 0.875rem;
+  --text-code-regular-2xs--letter-spacing: 0.01em;
+  --text-code-regular-2xs--font-weight: 400;
+}
+
+/*
+  Tailwind v4's `--text-*` token tuple doesn't include font-family, so
+  the code utilities need it pinned to the monospace stack separately.
+*/
+@layer utilities {
+  .text-code-regular-md,
+  .text-code-regular-sm,
+  .text-code-regular-2xs {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
+  }
+}

package/src/theme/typography.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+  TYPOGRAPHY_GROUPS,
+  TYPOGRAPHY_TOKENS,
+  type TypographyGroup,
+  type TypographyToken,
+} from './typography.tokens'
+
+const meta: Meta = {
+  title: 'Foundation/Typography',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'FMS Foundation — Typography. Mirrors the "🔤 Typography System" page in the Figma "FMS-Foundation" file. 20 named text utilities, registered via Tailwind v4 `@theme` in `packages/ui/src/theme/typography.css`.',
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+function GroupedTable({ group }: { group: TypographyGroup }) {
+  const rows = TYPOGRAPHY_TOKENS.filter((t) => t.group === group)
+  const { label, subtitle } = TYPOGRAPHY_GROUPS[group]
+  return (
+    <section className="mb-10">
+      <header className="mb-3 flex items-baseline gap-3 border-b border-zinc-200 pb-2">
+        <h2 className="text-heading-semibold-md uppercase tracking-wider text-zinc-700">{label}</h2>
+        <span className="text-body-regular-xs text-zinc-500">{subtitle}</span>
+      </header>
+      <table className="w-full table-fixed border-collapse">
+        <thead>
+          <tr className="text-label-semibold-xs uppercase tracking-wider text-zinc-500">
+            <th className="w-[12rem] py-2 pr-3 text-left">Style</th>
+            <th className="w-[14rem] py-2 pr-3 text-left">Token</th>
+            <th className="w-[5rem] py-2 pr-3 text-left">Rem</th>
+            <th className="w-[18rem] py-2 pr-3 text-left">Description</th>
+            <th className="py-2 text-left">Demo</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <TokenRow key={row.name} row={row} />
+          ))}
+        </tbody>
+      </table>
+    </section>
+  )
+}
+
+function TokenRow({ row }: { row: TypographyToken }) {
+  return (
+    <tr className="border-t border-zinc-100 align-top">
+      <td className="py-3 pr-3">
+        <div className="text-body-medium-sm text-zinc-900">
+          {row.name.split('/').slice(1).join('/')}
+        </div>
+        <div className="text-caption-medium-md text-zinc-500">{row.group}</div>
+      </td>
+      <td className="py-3 pr-3">
+        <code className="text-code-regular-sm rounded bg-zinc-100 px-1.5 py-0.5 text-zinc-700">
+          {row.className}
+        </code>
+        <div className="mt-1 text-caption-medium-md text-zinc-500">
+          ≈ {row.tailwindEquivalent}
+        </div>
+      </td>
+      <td className="py-3 pr-3">
+        <code className="text-code-regular-sm text-zinc-700">{row.rem}</code>
+        <div className="mt-1 text-caption-medium-md text-zinc-500">
+          {row.lineHeightPx}px · {row.fontWeight}
+        </div>
+      </td>
+      <td className="py-3 pr-3">
+        <span className="text-body-regular-xs text-zinc-600">{row.description}</span>
+      </td>
+      <td className="py-3">
+        <span className={row.className}>{row.sample}</span>
+      </td>
+    </tr>
+  )
+}
+
+export const Typography: Story = {
+  name: 'Typography',
+  render: () => (
+    <div className="mx-auto max-w-[1184px] px-6 py-8">
+      <header className="mb-8">
+        <h1 className="text-heading-bold-2xl text-zinc-900">Typography System</h1>
+        <p className="mt-1 text-body-regular-sm text-zinc-600">
+          {TYPOGRAPHY_TOKENS.length} styles · Geist + Geist Mono · bound to <code className="text-code-regular-sm">font/family</code> &amp;{' '}
+          <code className="text-code-regular-sm">font/scale</code>
+        </p>
+      </header>
+      {(Object.keys(TYPOGRAPHY_GROUPS) as TypographyGroup[]).map((g) => (
+        <GroupedTable key={g} group={g} />
+      ))}
+    </div>
+  ),
+}
+
+export const LiveSample: Story = {
+  name: 'Live sample · invoice card',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Realistic composition showing how the tokens stack on a single screen (invoice header card).',
+      },
+    },
+  },
+  render: () => (
+    <div className="mx-auto max-w-[640px] px-6 py-8">
+      <article className="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm">
+        <div className="mb-4 flex items-center justify-between">
+          <span className="text-label-semibold-xs rounded bg-emerald-50 px-2 py-1 uppercase tracking-wider text-emerald-700">
+            Przypisana
+          </span>
+          <span className="text-caption-medium-md text-zinc-500">2025-04-15 · ETD Gdańsk</span>
+        </div>
+        <h1 className="text-heading-bold-2xl text-zinc-900">Faktury przychodzące</h1>
+        <h2 className="mt-1 text-heading-semibold-md text-zinc-700">Kontrahent · Maersk Line A/S</h2>
+
+        <p className="mt-4 text-body-regular-md text-zinc-700">
+          Faktura przekazana do weryfikacji przed alokacją.
+        </p>
+
+        <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-3">
+          <div>
+            <dt className="text-label-medium-md text-zinc-500">Numer faktury</dt>
+            <dd className="text-code-regular-md text-zinc-900">FV/2025/0041</dd>
+          </div>
+          <div>
+            <dt className="text-label-medium-md text-zinc-500">Kwota</dt>
+            <dd className="text-body-medium-md text-zinc-900">12 450,00 PLN</dd>
+          </div>
+          <div>
+            <dt className="text-label-medium-md text-zinc-500">Kontener</dt>
+            <dd className="text-code-regular-md text-zinc-900">MSCU7234561</dd>
+          </div>
+          <div>
+            <dt className="text-label-medium-md text-zinc-500">Teczka</dt>
+            <dd className="text-code-regular-md text-zinc-900">SPOL-2025-041</dd>
+          </div>
+        </dl>
+
+        <p className="mt-4 text-body-regular-xs text-zinc-500">
+          NIP musi zawierać 10 cyfr.
+        </p>
+      </article>
+    </div>
+  ),
+}

package/src/theme/typography.tokens.ts

@@ -0,0 +1,326 @@
+/*
+  Mirrors the rows in Figma "FMS Foundation" → page "🔤 Typography System".
+  The Storybook story renders this list directly; keep it in sync with
+  `./typography.css` when tokens are added or removed.
+*/
+
+export type TypographyGroup = 'heading' | 'body' | 'label' | 'caption' | 'code'
+
+export type TypographyToken = {
+  /** Figma token name (slash-namespaced), e.g. `heading/bold/md`. */
+  name: string
+  /** Group heading shown above each section in the table. */
+  group: TypographyGroup
+  /** Tailwind utility class produced by `--text-*` in `typography.css`. */
+  className: string
+  /** Equivalent Tailwind utility(ies) — what the row labels in Figma show. */
+  tailwindEquivalent: string
+  /** Font size in rem (matches Figma's REM column). */
+  rem: string
+  /** Resolved line-height (px) for human readability in the story. */
+  lineHeightPx: number
+  /** Resolved font-weight. */
+  fontWeight: 400 | 500 | 600 | 700
+  /**
+   * Resolved letter-spacing in `em`, when the token declares one.
+   * Headings carry −0.025em; the `2xs` micro steps carry POSITIVE tracking
+   * (optical compensation below 12px). Omitted = 0 (the default).
+   */
+  letterSpacingEm?: number
+  /**
+   * Set on tokens that are NOT general-purpose UI type — names the single
+   * place the token is allowed. Today this is the `2xs` micro ramp, which
+   * exists only for the DynamicTable's `dense` density level.
+   *
+   * The Storybook story does not surface this yet; it is here so the
+   * restriction travels with the data rather than living only in
+   * `.ai/typography-rules.md`, and so a lint/review pass can read it.
+   */
+  restrictedTo?: string
+  /** Polish description from Figma's DESCRIPTION column. */
+  description: string
+  /** Sample text from Figma's DEMO column (Polish FMS-flavoured). */
+  sample: string
+}
+
+export const TYPOGRAPHY_GROUPS: Record<TypographyGroup, { label: string; subtitle: string }> = {
+  heading: { label: 'Heading', subtitle: '9 styles · Geist · letter-spacing −2.5%' },
+  body: { label: 'Body', subtitle: '6 styles · Geist' },
+  /* NOTE: `--text-label-semibold-md` exists in typography.css but has never had
+     a row here (pre-existing drift, left alone deliberately — adding it is a
+     Storybook change, not a density change). Counts below describe THIS array. */
+  label: { label: 'Label', subtitle: '3 styles · Geist' },
+  caption: { label: 'Caption', subtitle: '2 styles · Geist' },
+  code: { label: 'Code / Mono', subtitle: '3 styles · Geist Mono' },
+}
+
+export const TYPOGRAPHY_TOKENS: TypographyToken[] = [
+  // ── Heading ───────────────────────────────────────────────────────
+  {
+    name: 'heading/bold/2xl',
+    group: 'heading',
+    className: 'text-heading-bold-2xl',
+    tailwindEquivalent: 'text-2xl font-bold',
+    rem: '1.5rem',
+    lineHeightPx: 32,
+    fontWeight: 700,
+    description: 'Page title · h1 · jedna na stronę',
+    sample: 'Faktury przychodzące',
+  },
+  {
+    name: 'heading/bold/xl',
+    group: 'heading',
+    className: 'text-heading-bold-xl',
+    tailwindEquivalent: 'text-xl font-bold',
+    rem: '1.25rem',
+    lineHeightPx: 28,
+    fontWeight: 700,
+    description: 'Section title · h2',
+    sample: 'Krok 1 — Weryfikacja',
+  },
+  {
+    name: 'heading/bold/lg',
+    group: 'heading',
+    className: 'text-heading-bold-lg',
+    tailwindEquivalent: 'text-lg font-bold',
+    rem: '1.125rem',
+    lineHeightPx: 28,
+    fontWeight: 700,
+    description: 'Subsection · h3 · dialog title',
+    sample: 'Dane faktury',
+  },
+  {
+    name: 'heading/bold/md',
+    group: 'heading',
+    className: 'text-heading-bold-md',
+    tailwindEquivalent: 'text-base font-bold',
+    rem: '1rem',
+    lineHeightPx: 24,
+    fontWeight: 700,
+    description: 'Card title · h4',
+    sample: 'SPOL-2025-041',
+  },
+  {
+    name: 'heading/semibold/2xl',
+    group: 'heading',
+    className: 'text-heading-semibold-2xl',
+    tailwindEquivalent: 'text-2xl font-semibold',
+    rem: '1.5rem',
+    lineHeightPx: 32,
+    fontWeight: 600,
+    description: 'Page title alt · lżejszy od bold',
+    sample: 'Teczki projektów',
+  },
+  {
+    name: 'heading/semibold/xl',
+    group: 'heading',
+    className: 'text-heading-semibold-xl',
+    tailwindEquivalent: 'text-xl font-semibold',
+    rem: '1.25rem',
+    lineHeightPx: 28,
+    fontWeight: 600,
+    description: 'Section alt · SectionHeader',
+    sample: 'Alokacja kosztów',
+  },
+  {
+    name: 'heading/semibold/lg',
+    group: 'heading',
+    className: 'text-heading-semibold-lg',
+    tailwindEquivalent: 'text-lg font-semibold',
+    rem: '1.125rem',
+    lineHeightPx: 28,
+    fontWeight: 600,
+    description: 'SectionHeader komponent · h3 alt',
+    sample: 'Pozycje faktury',
+  },
+  {
+    name: 'heading/semibold/md',
+    group: 'heading',
+    className: 'text-heading-semibold-md',
+    tailwindEquivalent: 'text-base font-semibold',
+    rem: '1rem',
+    lineHeightPx: 24,
+    fontWeight: 600,
+    description: 'Form section label · card header',
+    sample: 'Kontrahent',
+  },
+  {
+    name: 'heading/semibold/sm',
+    group: 'heading',
+    className: 'text-heading-semibold-sm',
+    tailwindEquivalent: 'text-sm font-semibold',
+    rem: '0.875rem',
+    lineHeightPx: 20,
+    fontWeight: 600,
+    description: 'Table th · breadcrumb · nav active',
+    sample: 'Rodzaj kosztu',
+  },
+
+  // ── Body ──────────────────────────────────────────────────────────
+  {
+    name: 'body/regular/sm',
+    group: 'body',
+    className: 'text-body-regular-sm',
+    tailwindEquivalent: 'text-sm',
+    rem: '0.875rem',
+    lineHeightPx: 20,
+    fontWeight: 400,
+    description: '★ Default UI · tabele · listy · sidebary',
+    sample: 'Maersk Line A/S · 12 450,00 PLN',
+  },
+  {
+    name: 'body/regular/md',
+    group: 'body',
+    className: 'text-body-regular-md',
+    tailwindEquivalent: 'text-base',
+    rem: '1rem',
+    lineHeightPx: 24,
+    fontWeight: 400,
+    description: 'Długi tekst · opisy · content areas',
+    sample: 'Faktura przekazana do weryfikacji przed alokacją.',
+  },
+  {
+    name: 'body/regular/xs',
+    group: 'body',
+    className: 'text-body-regular-xs',
+    tailwindEquivalent: 'text-xs',
+    rem: '0.75rem',
+    lineHeightPx: 16,
+    fontWeight: 400,
+    description: 'Helper text · hint pod inputem · meta',
+    sample: 'NIP musi zawierać 10 cyfr',
+  },
+  {
+    name: 'body/medium/sm',
+    group: 'body',
+    className: 'text-body-medium-sm',
+    tailwindEquivalent: 'text-sm font-medium',
+    rem: '0.875rem',
+    lineHeightPx: 20,
+    fontWeight: 500,
+    description: 'Emphasized body · form description',
+    sample: 'Kontener przypisany do teczki',
+  },
+  {
+    name: 'body/medium/md',
+    group: 'body',
+    className: 'text-body-medium-md',
+    tailwindEquivalent: 'text-base font-medium',
+    rem: '1rem',
+    lineHeightPx: 24,
+    fontWeight: 500,
+    description: 'Strong body · ważny opis',
+    sample: 'Actual Cost = $0 — wymaga alokacji',
+  },
+  {
+    name: 'body/regular/2xs',
+    group: 'body',
+    className: 'text-body-regular-2xs',
+    tailwindEquivalent: 'text-[11px]/[14px] tracking-[0.01em]',
+    rem: '0.6875rem',
+    lineHeightPx: 14,
+    letterSpacingEm: 0.01,
+    fontWeight: 400,
+    description: 'DynamicTable · gęstość „dense" · komórki danych',
+    restrictedTo: 'DynamicTable [data-density-level="dense"]',
+    sample: 'Maersk Line A/S · 12 450,00 PLN',
+  },
+
+  // ── Label ─────────────────────────────────────────────────────────
+  {
+    name: 'label/semibold/xs',
+    group: 'label',
+    className: 'text-label-semibold-xs',
+    tailwindEquivalent: 'text-xs font-semibold',
+    rem: '0.75rem',
+    lineHeightPx: 16,
+    fontWeight: 600,
+    description: 'Badge · tag · kbd · overline',
+    sample: 'PRZYPISANA',
+  },
+  {
+    name: 'label/medium/md',
+    group: 'label',
+    className: 'text-label-medium-md',
+    tailwindEquivalent: 'text-sm font-medium',
+    rem: '0.875rem',
+    lineHeightPx: 20,
+    fontWeight: 500,
+    description: 'Chip · dropdown item · badge label',
+    sample: "FCL 40'",
+  },
+  {
+    name: 'label/semibold/2xs',
+    group: 'label',
+    className: 'text-label-semibold-2xs',
+    tailwindEquivalent: 'text-[10px]/[12px] font-semibold tracking-[0.02em]',
+    rem: '0.625rem',
+    lineHeightPx: 12,
+    letterSpacingEm: 0.02,
+    fontWeight: 600,
+    description: 'DynamicTable · gęstość „dense" · nagłówki kolumn',
+    restrictedTo: 'DynamicTable [data-density-level="dense"]',
+    sample: 'ETA · POD · NR KONTENERA',
+  },
+
+  // ── Caption ───────────────────────────────────────────────────────
+  {
+    name: 'caption/medium/lg',
+    group: 'caption',
+    className: 'text-caption-medium-lg',
+    tailwindEquivalent: 'text-sm font-medium',
+    rem: '0.875rem',
+    lineHeightPx: 20,
+    fontWeight: 500,
+    description: 'Hint · secondary info · subtitle',
+    sample: 'Przed chwilą · FV/2025/0041',
+  },
+  {
+    name: 'caption/medium/md',
+    group: 'caption',
+    className: 'text-caption-medium-md',
+    tailwindEquivalent: 'text-xs font-medium',
+    rem: '0.75rem',
+    lineHeightPx: 16,
+    fontWeight: 500,
+    description: 'Timestamp · status pill · meta mini',
+    sample: '2025-04-15 · ETD Gdańsk',
+  },
+
+  // ── Code / Mono ───────────────────────────────────────────────────
+  {
+    name: 'code/regular/md',
+    group: 'code',
+    className: 'text-code-regular-md',
+    tailwindEquivalent: 'text-sm font-mono',
+    rem: '0.875rem',
+    lineHeightPx: 24,
+    fontWeight: 400,
+    description: 'Nr kontenera · NIP · kwoty · booking ref',
+    sample: 'MSCU7234561 → SPOL-2025-041',
+  },
+  {
+    name: 'code/regular/sm',
+    group: 'code',
+    className: 'text-code-regular-sm',
+    tailwindEquivalent: 'text-xs font-mono',
+    rem: '0.75rem',
+    lineHeightPx: 16,
+    fontWeight: 400,
+    description: 'Badge ID · kody portów · tabela ref',
+    sample: 'FV/2025/0041 · 521-000-00-000',
+  },
+  {
+    name: 'code/regular/2xs',
+    group: 'code',
+    className: 'text-code-regular-2xs',
+    tailwindEquivalent: 'text-[11px]/[14px] font-mono tracking-[0.01em]',
+    rem: '0.6875rem',
+    lineHeightPx: 14,
+    letterSpacingEm: 0.01,
+    fontWeight: 400,
+    description: 'DynamicTable · gęstość „dense" · komórki mono',
+    restrictedTo: 'DynamicTable [data-density-level="dense"]',
+    sample: 'MSCU7234561 · 2026-08-03',
+  },
+]

package/src/types/react-big-calendar.d.ts

@@ -0,0 +1,16 @@
+declare module 'react-big-calendar' {
+  import * as React from 'react'
+
+  export type View = 'month' | 'week' | 'day' | 'agenda' | string
+
+  export type SlotInfo = {
+    start: Date
+    end: Date
+    slots: Date[]
+    action: 'select' | 'click' | 'doubleClick'
+  }
+
+  export function dateFnsLocalizer(_config: Record<string, unknown>): unknown
+
+  export const Calendar: React.ComponentType<Record<string, unknown>>
+}