@eocrm/design-system 0.0.0-stage → 0.6.18

package/docs/theming.md

@@ -0,0 +1,95 @@
+# Theming
+
+Dark theme and per-component token overrides.
+
+## Dark theme
+
+The library ships a full dark palette, driven entirely by CSS. There is **no theme component, no React context, no JS API** — you control it with one attribute on `<html>`:
+
+| `<html>` attribute   | Result                                                 |
+| -------------------- | ------------------------------------------------------ |
+| _(none)_             | **System** — follows the OS via `prefers-color-scheme` |
+| `data-theme="light"` | **Forced light** (wins over a dark OS)                 |
+| `data-theme="dark"`  | **Forced dark** (wins over a light OS)                 |
+
+```html
+<html data-theme="dark">
+  …
+</html>
+```
+
+An opt-in brand accent (`data-accent` on `<html>`) is independent of `data-theme`; see [Accent](../README.md#accent).
+
+`color-scheme` is set automatically for each state, so native form controls and the browser chrome match the theme. The reset paints `body` with `--document-background` (default `var(--color-bg-subtle)`), matching the base beneath `<Screen>` and `<AppLayout>` so a sibling route swap does not flash a contrasting document color. Override that token in `:root` after the global stylesheet import when an application needs a different canvas; do not replace the reset's `body` rule. Scrollbars go a step further: `reset.scss` applies `scrollbar-width: thin` + a token-colored `scrollbar-color` to every element, so every scroller in the app is thin and theme-colored rather than OS-default. Opt a scroller out with its own `scrollbar-width: auto` / `scrollbar-color: auto` — or drop the bar altogether with `scrollbar-width: none`, which is what a **collapsed** `<Rail>` does: a gutter is a quarter of the 56px rail's inner width. With no bar to drag, it scrolls by wheel/trackpad and scroll-into-view on Tab.
+
+**What flips for free:** every component whose colors resolve through the design tokens — which is all of them. Surfaces, text, borders, the accent and semantic palettes, shadows, overlays, focus rings, Badge tones, and Tooltip all redefine under dark with zero markup changes.
+
+**Your responsibility:**
+
+- **Set the attribute.** The library reads it; it never writes it (it performs no _imperative_ DOM mutation — the one thing `<AppProvider>` injects is a declarative `<style>` for `tokens` overrides, see [Setup](setup.md#setup-once-per-consuming-app)). Persist the user's choice (e.g. `localStorage`) and apply it: `'light'`/`'dark'` → `document.documentElement.dataset.theme = choice`; `'system'` → remove the attribute.
+- **Add the no-flash snippet** (below) so a forced light/dark choice doesn't flash the default theme before your bundle boots.
+- **Theme-aware images.** Raw `<img>` assets with baked-in colors (e.g. a logo SVG) can't be recolored by CSS — swap the `src` per theme if it matters. The `<Logo>` wordmark _text_ flips automatically (`--color-fg`); the image mark does not.
+
+The 30-color categorical `--color-palette-*` set flips in dark too — same hue, dark tinted bg + light fg.
+
+**Out of scope (theme-independent by design):** avatar identity colors and BrandIcon brand marks.
+
+### No-flash snippet
+
+Inline this in your app's `<head>` **before** your bundle loads. It applies the persisted choice before first paint. `'system'`/unset writes nothing → the CSS media query handles it with no flash either way.
+
+```html
+<script>
+  (function () {
+    try {
+      var t = localStorage.getItem('your-theme-key');
+      if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
+    } catch (e) {
+      /* localStorage blocked (private mode) — fall back to System */
+    }
+  })();
+</script>
+```
+
+## Theming via component tokens
+
+Every component ships a `Component.tokens.scss` file alongside its `.module.scss`, defining `--<component>-<part>-<state>` CSS custom properties at `:root`. The `.module.scss` references those tokens instead of the global primitives. This lets consumers re-theme one component without affecting others.
+
+**Pattern:**
+
+- Token name: `--<component>-<part>[-<state>]`. Component is kebab-cased (`--data-table-*`, `--dropdown-menu-*`, `--page-header-*`). Part is the surface (`bg` / `fg` / `border-color` / `radius` / `padding-x` / `height` / `ring` / etc.). State is appended when there's a state variant (`hover` / `active` / `focus` / `disabled` / `checked` / `selected` / `invalid`).
+- Defaults: every component token defaults to the same primitive the SCSS used before this layer existed. Overriding the token re-themes the component without touching the primitive.
+
+**Override globally (every Button in the app turns red):**
+
+```css
+:root {
+  --button-bg: red;
+  --button-bg-hover: darkred;
+}
+```
+
+**Override per-scope (only Buttons inside this region turn red):**
+
+```css
+.danger-zone {
+  --button-bg: red;
+  --button-bg-hover: darkred;
+}
+```
+
+```tsx
+<div className="danger-zone">
+  <Button>Delete</Button>
+</div>
+```
+
+**Override per-instance (one Button, inline):**
+
+```tsx
+<Button style={{ '--button-bg': 'red' } as React.CSSProperties}>Delete</Button>
+```
+
+The authoritative list of tokens per component lives in that component's `<Name>.tokens.scss` file. Read it to see what's available.
+
+**Deprecated:** `--color-badge-<tone>-bg/-fg` tokens are aliased to the new `--badge-bg-<tone>` / `--badge-fg-<tone>` tokens. They still work but will be removed in a future major version.

package/docs/tokens.md

@@ -0,0 +1,123 @@
+# Tokens (the only "values" you write)
+
+All available as CSS custom properties after you import `global.scss`:
+
+| Family          | Tokens                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Neutral colors  | `--color-bg`, `--color-bg-subtle`, `--color-bg-muted`, `--color-bg-sunken`, `--color-border`, `--color-border-strong`, `--color-fg`, `--color-fg-muted` (the secondary neutral; it clears AA as text on `--color-bg`, `--color-bg-subtle`, `--color-bg-muted`, `--color-bg-sunken`/`--color-bg-hover` and `--color-accent-bg-subtle`, in both themes — reach for it when the surface is tinted, sunken, or not known at authoring time. **ONE exception: `--color-bg-muted-hover`**, where it reads 4.45:1 in light and fails; put `--color-fg` on that surface, as `Table`'s hovered header and `OptionsPicker`'s hovered group header already do), `--color-fg-subtle` (text, `--color-bg`/`--color-bg-subtle` ONLY — fails AA on `--color-bg-muted` in both themes; use `--color-fg-muted` there), `--color-fg-disabled` / `--color-bg-hover` / `--color-bg-muted-hover` (hover surfaces — use these, NOT `--color-bg-subtle`, which is only one step and moves the wrong way from a muted base) |
+| Accent colors   | `--color-accent`, `--color-accent-hover`, `--color-accent-pressed`, `--color-accent-fg`, `--color-accent-subtle-bg`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| Semantic colors | `--color-danger`, `--color-danger-hover`, `--color-danger-fg`, `--color-bg-danger-subtle`, `--color-success`, `--color-success-hover`, `--color-success-fg`, `--color-warning`, `--color-info`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| Badge palette   | `--badge-{bg,fg}-{neutral,info,success,warning,danger,purple}` (was `--color-badge-<tone>-{bg,fg}`, kept as deprecated aliases)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| Avatar palette  | `--color-avatar-fg`, `--color-avatar-1` through `--color-avatar-6`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| Spacing         | `--space-0` `--space-1` (4) `--space-2` (8) `--space-3` (12) `--space-4` (16) `--space-5` (20) `--space-6` (24) `--space-8` (32) `--space-10` (40) `--space-12` (48) `--space-16` (64)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| Radii           | `--radius-sm` (3) / `--radius-md` (4) / `--radius-lg` (8) / `--radius-full`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| Font sizes      | `--font-size-xs/sm/md/lg/xl/2xl/3xl`, `--font-size-code` (0.92em for inline mono)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| Font weights    | `--font-weight-regular/medium/semibold/bold`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| Line heights    | `--line-height-tight` / `--line-height-normal` / `--line-height-none` (1)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| Control sizes   | `--size-sm/md/lg` (heights), `--size-badge` (20), `--size-badge-sm` (16), `--size-chip` (18), `--size-dropdown-min-width` (160), `--size-popover-min-width` (220), `--size-dropdown-indicator` (16)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| Borders         | `--border-width` (1) / `--border-width-emphasis` (2) / `--border-width-strong` (3)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| Letter spacing  | `--letter-spacing-caps` (0.03em)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| Shadows         | `--shadow-sm` / `--shadow-md` / `--shadow-lg`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| Focus rings     | `--ring-accent` / `--ring-danger` / `--ring-success` / `--ring-width` / `--ring-offset` / `--ring-on-scrim`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| Motion          | `--transition-fast` (100ms) / `--transition-base` (140ms)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| Layer (z-index) | `--z-app-chrome` / `--z-dropdown` / `--z-popover` / `--z-flowcanvas-maximized` / `--z-modal` / `--z-overlay-floating` / `--z-toast` / `--z-tooltip`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+
+**Focus rings are an `outline`, not a `box-shadow`.** Use the mixin —
+`@include focus-ring;` or `@include focus-ring(var(--your-ring));` — which emits
+`outline: var(--ring-width) solid <colour>` plus `outline-offset:
+var(--ring-offset)`. Do **not** hand-roll `box-shadow: 0 0 0 var(--ring-width)
+…`.
+
+Some components predate the mixin. **They are not the pattern to copy**, and
+they fall into two different groups — grep `:focus-visible` alongside `outline:`
+or `box-shadow: 0 0 0` for the current set rather than trusting a list here:
+
+- **Hand-rolled but real** — `AvatarGroup` and `IconPicker`, and only those
+  two, as of the focus-ring migration. `AvatarGroup` needs an inner layer between the chip and the
+  overlapping avatars, so its ring is a `box-shadow` on purpose.
+  `IconPicker` hand-rolls an `outline` with its own width token:
+  `--icon-picker-focus-ring-width` is a documented public override in
+  `IconPicker.tsx`'s consumer-facing token list, and `focus-ring` has no width
+  parameter — calling the mixin would silently delete that override surface, a
+  breaking change, not a refactor. Giving the mixin a `$width` argument is the
+  way to close it, and is a design decision, not cleanup. The
+  `structure.test.ts` gate carries `IconPicker` as a named waiver with that
+  reason, and fails if the waiver ever stops matching a real hand-rolled ring.
+  `ColorPicker` (x3), `ImageCrop` and `DashboardCanvas` used to be on this list
+  — they hand-rolled with `--border-width-emphasis`, `--ring-width`'s own value
+  under a global-primitive name, so the emission was identical and nothing
+  looked wrong. The migration moved all five to `@include focus-ring(…)` (the first
+  two outset, `DashboardCanvas` inset via `$offset`) and deleted the four inert
+  `stylelint-disable-next-line` comments their raw `2px` offsets carried.
+  `DashboardCanvas` passes `var(--color-accent)` explicitly rather than taking
+  the default: the two tokens are identical in both themes today, but
+  `buildThemeTokenCss` lets a consumer override `--color-accent` alone, and a
+  bare `@include focus-ring` would stop following that override.
+- **Suppressed, not hand-rolled** — nothing, as of this PR. Four components
+  legitimately suppress the ring under a focus pseudo and stay: `AvatarGroup`
+  (box-shadow ring — an offset gap there would reveal another avatar, not a
+  surface), `FlowCanvas` (deliberate), `LiquidEditor` (delegates to
+  `.root:focus-within`) and `TopBar`'s `.searchInput`, which sets it under
+  plain `:focus` and delegates the same way, to `.search:focus-within`. Do not
+  trust that list: it is now a waiver table in `structure.test.ts`
+  ("a focus ring is not suppressed without a recorded reason"), each entry
+  carrying its own reason, and a fifth suppression fails the build until it is
+  argued there. Read the table, not this paragraph.
+
+  A further `structure.test.ts` gate bans the same-rule
+  `outline: none` spelling shared between `:hover` and `:focus-visible`; it
+  does not catch `outline: 0`, `outline-style: none`, a shared block whose
+  body contains a nested block, or a suppression sitting in a separate base
+  rule from the shared block — `DropdownMenu`'s shape before this PR — all of
+  which still need a human to catch.
+
+Separately, `FlowCanvas`, `Lightbox`, `RichTextEditor` and Calendar's
+`TimedEvent` each carry an `outline:` or `box-shadow: 0 0 0 var(--ring-width) …`
+that is a decorative or state marker — an active chip, a connect target, a
+drag-refusal outline — not a focus ring. They look like the anti-pattern and are
+not examples of this rule at all.
+
+Two things follow from the mechanism:
+
+- **The offset gap shows whatever is actually behind the element**, which is what
+  lets one ring colour work against both a page surface and the element's own
+  fill. It is why `--ring-accent` can equal `--color-accent` and still be visible
+  around a focused primary Button.
+- **An outset ring needs room.** If the focusable sits flush against an ancestor
+  with `overflow` other than `visible`, the ring clips — invisibly to the test
+  suite, which checks ring colour but not geometry. Where that applies,
+  draw it inset by passing `$offset: calc(-1 * var(--ring-offset))` to the
+  mixin — NOT a separate `outline-offset` declaration after the `@include`,
+  which a `structure.test.ts` gate now fails the build on. For the current
+  set run `grep -rn "@include focus-ring(" src/components` and read the
+  `$offset` arguments. Do not trust a count or a list written in prose here:
+  every attempt at one in this file has gone stale within the same PR that
+  wrote it.
+- **Inset gives the gap up.** An outset ring is bounded on both sides by the
+  backdrop, which is what the contrast gate measures. An inset one touches the
+  element's OWN fill, so check it against the fills the component can take. The
+  only fills a consumer picks freely are the palette ones a `.colored` Calendar
+  event takes, and the worst of those thirty is `--ring-accent` on
+  `--color-palette-olive-bg` at 3.95:1 in dark — comfortably over 1.4.11's 3:1.
+  `contrast.test.ts` now recomputes that figure AND holds a 3:1 floor under
+  every palette fill, so a darker one reddens CI instead of eroding it silently.
+  No such floor exists for a component-specific fill an inset
+  ring lands on: that side is still yours to check.
+
+`--ring-on-scrim` is for chrome painted on a surface that is dark in **both**
+themes (Lightbox), because the surface does not follow the theme and the tone
+rings do. The twelve pairs are `--ring-accent` / `--ring-danger` /
+`--ring-success` against the four surfaces Lightbox chrome sits on — the scrim
+itself, and `--lightbox-thumb-strip-bg` / `--lightbox-control-bg` /
+`--lightbox-control-bg-hover` composited over it. Mostly a light-theme failure
+— 10 of the 12 tone/surface pairs are under 1.4.11's 3:1 there — but not
+exclusively:
+`--ring-danger` on `--lightbox-control-bg-hover` reads 2.95:1 in dark.
+
+Every figure in this section is recomputed by `contrast.test.ts`, which also
+refuses any `N.NN:1` or `N of the M` written anywhere in this file that it
+cannot reproduce from the generated tokens. What it cannot check is a
+measurement phrased without one of those two shapes — read its docblock before
+adding a number here.
+
+---

package/docs/transient-state.md

@@ -0,0 +1,56 @@
+# Transient state and screen readers
+
+Which components announce their own transient state, and what you must not wrap.
+
+Components in this library handle their own transient state (`loading`, `busy`, async failure). For the components that do, you do not need to wrap them in a live region — and you should not, because two regions announcing one event talk over each other. **But not every component does**: see Known gaps below, and check the component's `docs/components/<Name>.md` before assuming.
+
+For your OWN outcomes — a consumer-level event with no visible text of its own (e.g. "Authenticator app added") — reach for `<LiveRegion>` rather than hand-rolling a live region; see [`LiveRegion`](components/LiveRegion.md).
+
+The rule the library follows, so you can predict any component:
+
+- **State you meet by arriving** — an `EntityChip` placeholder you tab onto — is folded into the **accessible name**. Its name therefore _changes_ when the state resolves, so don't select those elements by exact name in tests while a placeholder can be on screen.
+- **State that changes while you are elsewhere** — a `Switch` saving, a `DataTable` loading, a `PillMenu` committing, a `Select` resolving its async options, a `FileUpload` batch finishing, a `ConfirmationPopover` going pending — is announced from a **live region the component owns**. Names stay stable.
+- **Purely visual state** — `Badge` tone, `Skeleton` — is yours to announce if it matters. These are documented as visual-only.
+- **One deliberate exception to the noise rule.** `Textarea`'s character counter is an `aria-live="polite"` region that updates on every keystroke — the same per-keystroke announcing that was rejected for `Field`'s validation errors. It is kept because a counter is only useful while you are typing in the field it belongs to, where the user's attention already is, and because a remaining-characters count that arrives after you have run out is not a warning. If that trade is wrong for your form, `Textarea` takes `showCount={false}`. Noted here because the rule above would otherwise imply the library never announces per keystroke, and it does, once.
+- **`Progress` / `CircularProgress`** carry `role="progressbar"`. A _determinate_ one exposes its value through `aria-valuenow`; an _indeterminate_ one has no `aria-valuenow` at all and puts its meaning in `aria-valuetext`, whose fallback is translated via `progress.indeterminate`. Don't wrap either — but do pass an `aria-label`, because that fallback is the only thing spoken if you don't.
+
+**Form validation is yours to announce, and that is a decision, not a gap.** `Field` links its error with `aria-describedby`, which is read on focus — so an error appearing after a submit reaches nobody until focus arrives. A live region per `Field` would be worse: validate-on-change announces every keystroke, and a failed submit fires one announcement per field, over each other. The form knows how many failed and when the user asked; the field does not. Announce a summary on submit:
+
+```tsx
+<div role="status" aria-live="polite">
+  {submitted && errorCount > 0 ? `${errorCount} fields need attention` : ''}
+</div>
+```
+
+Known gaps: **none currently open**, with one boundary case worth stating. A fluid `Image`'s error tile is DISCOVERABLE but not announced: the failure is visible text in the accessible tree, reachable in browse mode, and the icon is named by `alt` alone. It is deliberately not folded into the name — that made a reader hear the sentence twice — and deliberately not a live region, because an image failing is not worth interrupting for. A fixed-`size` `Image` renders no text, so there the failure IS folded into the icon's name; still discoverable, still not announced. If your case needs it to interrupt, that announcement is yours. The three that stood here — `ConfirmationPopover` while pending, `FileUpload` per-file failure and its `pending` state, and `Select`'s async loading/error rows — all announce for themselves now, so do NOT wrap them. `FileUpload`'s `uploading` state still carries a `Progress` that is readable on focus rather than announced; don't wrap that either. Assume nothing about a component not named in **this list** — every component appears somewhere on this page, so the list, not the page, is the boundary. Check the component's `docs/components/<Name>.md`. `Field`'s validation errors are covered above — documented behaviour, not an oversight.
+
+One consequence for your tests: components that own a region expose `role="status"`, so `getByRole('status')` on a page containing a `Switch`, `PillMenu` or `DataTable` may now match more than one element. Scope the query, or select by the text you expect.
+
+What this means for you:
+
+```tsx
+// ✅ First load of an empty table: the component announces it, and the
+//    outcome ("Rows loaded" / "No rows loaded"). Nothing to add.
+<DataTable instance={table} loading={isFetching} aria-label="Deals" />
+
+// ⚠️ A refetch OVER rows that are already on screen is deliberately silent —
+//    nothing changes visually, so a 30s poll shouldn't interrupt a reader.
+//    This depends on rows STAYING on screen: if your fetch layer clears data
+//    during a refetch (react-query v5 without `placeholderData: keepPreviousData`),
+//    the skeleton returns and every poll announces — correctly, because the
+//    screen really does change.
+
+// ❌ Don't wrap the first-load case — your region and the component's
+//    both fire for one event.
+<div aria-live="polite">
+  <DataTable instance={table} loading={isFetching} aria-label="Deals" />
+</div>
+
+// ✅ Skeleton is aria-hidden by design — this one IS yours to announce.
+<div role="status" aria-live="polite">
+  {isFetching ? 'Loading contacts…' : ''}
+</div>
+{isFetching ? <Skeleton variant="text" /> : <ContactList items={items} />}
+```
+
+`aria-busy` appears on several components for tooling and testing. **Do not rely on it to inform a user** — no mainstream screen reader speaks it on a non-live element, which is why the components above carry a live region as well.

package/package.json

@@ -1,6 +1,88 @@
 {
   "name": "@eocrm/design-system",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.6.18",
+  "description": "Design system for the EOCRM product — React 19 + SCSS modules + CSS custom properties.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles/global.scss": "./src/styles/global.scss",
+    "./styles/tokens.scss": "./src/styles/tokens.scss",
+    "./styles/reset.scss": "./src/styles/reset.scss",
+    "./styles/typography.scss": "./src/styles/typography.scss",
+    "./styles/mixins.scss": "./src/styles/mixins.scss",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "AI-PRIMER.md",
+    "docs",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.test.js",
+    "!src/**/*.test.jsx",
+    "!src/**/*.spec.ts",
+    "!src/**/*.spec.tsx",
+    "!src/**/*.spec.js",
+    "!src/**/*.spec.jsx",
+    "!src/**/*.testutil.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=1.16.0 <2.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@eocrm/design-tokens": "0.6.18",
+    "@floating-ui/react-dom": "^2.1.8",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.2.0",
+    "clsx": "^2.1.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "libphonenumber-js": "^1.13.7",
+    "prism-react-renderer": "^2.4.1",
+    "qrcode-generator": "^2.0.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^29.1.1",
+    "postcss": "^8.5.25",
+    "sass-embedded": "^1.100.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.7"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build:manifest": "node scripts/generate-manifest.mjs",
+    "build:docs": "node scripts/generate-component-docs.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eocrm/design-system.git",
+    "directory": "packages/design-system"
+  }
+}