@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/CircularProgress/CircularProgress.css

@@ -0,0 +1,115 @@
+:root {
+  --circular-progress-track-color: var(--color-border);
+  --circular-progress-fill-color: var(--color-accent);
+  --circular-progress-fill-color-default: var(--color-accent);
+  --circular-progress-fill-color-success: var(--color-success);
+  --circular-progress-fill-color-warning: var(--color-warning-strong);
+  --circular-progress-fill-color-danger: var(--color-danger);
+  --circular-progress-indeterminate-color: var(--color-accent);
+  --circular-progress-fill-transition: var(--transition-base);
+  --circular-progress-label-font-size: var(--font-size-sm);
+  --circular-progress-label-font-weight: var(--font-weight-medium);
+  --circular-progress-label-fg: var(--color-fg);
+}
+
+.CircularProgress__circular__0S_UP {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.CircularProgress__svg__hmSZ- {
+  transform: rotate(-90deg);
+  overflow: visible;
+}
+
+.CircularProgress__sizeSm__QknZH {
+  width: 16px;
+  height: 16px;
+}
+
+.CircularProgress__sizeMd__xpzvP {
+  width: 32px;
+  height: 32px;
+}
+
+.CircularProgress__sizeLg__FZzXb {
+  width: 56px;
+  height: 56px;
+}
+
+.CircularProgress__sizeSm__QknZH .CircularProgress__track__BXxja,
+.CircularProgress__sizeSm__QknZH .CircularProgress__fill__PuWlA {
+  stroke-width: 2;
+}
+
+.CircularProgress__sizeMd__xpzvP .CircularProgress__track__BXxja,
+.CircularProgress__sizeMd__xpzvP .CircularProgress__fill__PuWlA {
+  stroke-width: 3;
+}
+
+.CircularProgress__sizeLg__FZzXb .CircularProgress__track__BXxja,
+.CircularProgress__sizeLg__FZzXb .CircularProgress__fill__PuWlA {
+  stroke-width: 4;
+}
+
+.CircularProgress__track__BXxja {
+  fill: none;
+  stroke: var(--circular-progress-track-color);
+}
+
+.CircularProgress__fill__PuWlA {
+  fill: none;
+  stroke: var(--circular-progress-fill-color);
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--circular-progress-fill-transition);
+}
+
+.CircularProgress__toneDefault__9qYw- .CircularProgress__fill__PuWlA {
+  stroke: var(--circular-progress-fill-color-default);
+}
+
+.CircularProgress__toneSuccess__u6-KQ .CircularProgress__fill__PuWlA {
+  stroke: var(--circular-progress-fill-color-success);
+}
+
+.CircularProgress__toneWarning__4pPh9 .CircularProgress__fill__PuWlA {
+  stroke: var(--circular-progress-fill-color-warning);
+}
+
+.CircularProgress__toneDanger__MayAq .CircularProgress__fill__PuWlA {
+  stroke: var(--circular-progress-fill-color-danger);
+}
+
+.CircularProgress__indeterminate__yaHcg {
+  stroke-dasharray: 30 100 !important;
+  animation: CircularProgress__circular-spin__nHxUv 1.2s linear infinite;
+  transform-origin: center;
+  stroke: var(--circular-progress-indeterminate-color) !important;
+  transition: none;
+}
+
+@keyframes CircularProgress__circular-spin__nHxUv {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.CircularProgress__label__mhInz {
+  position: absolute;
+  font-size: var(--circular-progress-label-font-size);
+  font-weight: var(--circular-progress-label-font-weight);
+  color: var(--circular-progress-label-fg);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .CircularProgress__indeterminate__yaHcg {
+    animation: none;
+    stroke-dasharray: none !important;
+    stroke-dashoffset: 0 !important;
+  }
+  .CircularProgress__fill__PuWlA {
+    transition: none;
+  }
+}

package/dist/components/CircularProgress/CircularProgress.d.ts

@@ -0,0 +1,61 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Diameter + stroke pairing. */
+export type CircularProgressSize = 'sm' | 'md' | 'lg';
+/** Color tone for the fill stroke. Default `'default'` uses the accent color. */
+export type CircularProgressTone = 'default' | 'success' | 'warning' | 'danger';
+/** Label render mode. */
+export type CircularProgressLabel = boolean | ReactNode;
+export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /**
+     * Current progress value. Omit (or pass `undefined`) to render the
+     * indeterminate spinning animation.
+     *
+     * Two-channel behavior for out-of-range and degenerate values:
+     * - **Visual arc** is clamped to [0%, 100%]. Values outside [0, max]
+     *   render at the nearest valid bound.
+     * - **ARIA `aria-valuenow`** reports the raw number so consumer bugs
+     *   (a value drifting past max) surface in audits and SR announcements.
+     *
+     * Degenerate inputs fall back to the indeterminate spinner: `NaN`,
+     * `Infinity`, `-Infinity`, and the case where `max <= 0`. This is the
+     * common file-upload race condition (`bytes_uploaded / total_bytes`
+     * before `total_bytes` is known produces NaN).
+     */
+    value?: number;
+    /**
+     * Upper bound. Defaults to `100`. Consumers using fraction values
+     * (0.0–1.0) pass `max={1}`. Consumers tracking a count ("3 of 10")
+     * pass `max={10}`.
+     */
+    max?: number;
+    /**
+     * Diameter + stroke pairing.
+     * - `sm` — 16px diameter, 2px stroke (inline next to a button — also the
+     *   shape to use for "Saving…" loading affordances; pass no `value` for
+     *   the indeterminate spinner.)
+     * - `md` — 32px diameter, 3px stroke (default — near a heading)
+     * - `lg` — 56px diameter, 4px stroke (page-level loader)
+     */
+    size?: CircularProgressSize;
+    /**
+     * Stroke color tone. Defaults to `'default'` (accent blue). Same vocab
+     * as `<Progress>`. Indeterminate ignores tone — always accent.
+     */
+    tone?: CircularProgressTone;
+    /**
+     * Optional centered label.
+     * - `false` (default) — no label
+     * - `true` — render `{Math.round(percent)}%` centered. Auto-suppressed
+     *   at `size='sm'` (16px circle has no room for text) AND when
+     *   indeterminate.
+     * - `ReactNode` — render the node centered in BOTH modes. Still
+     *   auto-suppressed at `size='sm'` regardless — the geometry doesn't
+     *   change.
+     */
+    label?: CircularProgressLabel;
+}
+/**
+ * Circular progress primitive (donut shape); indeterminate mode is a spinner.
+ * @see docs/components/CircularProgress.md
+ */
+export declare const CircularProgress: import("react").ForwardRefExoticComponent<CircularProgressProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/CircularProgress/CircularProgress.js

@@ -0,0 +1,64 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import CircularProgress_module_default from "./CircularProgress.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/CircularProgress/CircularProgress.tsx
+var SIZE_CLASS = {
+	sm: CircularProgress_module_default.sizeSm,
+	md: CircularProgress_module_default.sizeMd,
+	lg: CircularProgress_module_default.sizeLg
+};
+var TONE_CLASS = {
+	default: CircularProgress_module_default.toneDefault,
+	success: CircularProgress_module_default.toneSuccess,
+	warning: CircularProgress_module_default.toneWarning,
+	danger: CircularProgress_module_default.toneDanger
+};
+var RADIUS = 16;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+/**
+* Circular progress primitive (donut shape); indeterminate mode is a spinner.
+* @see docs/components/CircularProgress.md
+*/
+var CircularProgress = forwardRef(function CircularProgress({ value, max = 100, size = "md", tone = "default", label = false, className, ...rest }, ref) {
+	const determinate = typeof value === "number" && Number.isFinite(value) && max > 0;
+	const indeterminate = !determinate;
+	const percent = determinate ? Math.max(0, Math.min(100, value / max * 100)) : 0;
+	const strokeDashoffset = determinate ? CIRCUMFERENCE * (1 - percent / 100) : void 0;
+	const t = useTranslation();
+	const ariaLabel = rest["aria-label"];
+	const valuetext = indeterminate ? ariaLabel || t("progress.indeterminate") : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "progressbar",
+		className: clsx(CircularProgress_module_default.circular, SIZE_CLASS[size], TONE_CLASS[tone], className),
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": determinate ? value : void 0,
+		"aria-valuetext": valuetext,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 36 36",
+			className: CircularProgress_module_default.svg,
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: CircularProgress_module_default.track,
+				cx: "18",
+				cy: "18",
+				r: RADIUS
+			}), /* @__PURE__ */ jsx("circle", {
+				className: clsx(CircularProgress_module_default.fill, indeterminate && CircularProgress_module_default.indeterminate),
+				cx: "18",
+				cy: "18",
+				r: RADIUS,
+				strokeDasharray: CIRCUMFERENCE,
+				strokeDashoffset
+			})]
+		}), label !== false && size !== "sm" && !(label === true && indeterminate) && /* @__PURE__ */ jsx("span", {
+			className: CircularProgress_module_default.label,
+			children: label === true ? `${Math.round(percent)}%` : label
+		})]
+	});
+});
+export { CircularProgress };

package/dist/components/CircularProgress/CircularProgress.module.js

@@ -0,0 +1,32 @@
+import "./CircularProgress.css";
+// src/components/CircularProgress/CircularProgress.module.scss
+var circular = "CircularProgress__circular__0S_UP";
+var svg = "CircularProgress__svg__hmSZ-";
+var sizeSm = "CircularProgress__sizeSm__QknZH";
+var sizeMd = "CircularProgress__sizeMd__xpzvP";
+var sizeLg = "CircularProgress__sizeLg__FZzXb";
+var track = "CircularProgress__track__BXxja";
+var fill = "CircularProgress__fill__PuWlA";
+var toneDefault = "CircularProgress__toneDefault__9qYw-";
+var toneSuccess = "CircularProgress__toneSuccess__u6-KQ";
+var toneWarning = "CircularProgress__toneWarning__4pPh9";
+var toneDanger = "CircularProgress__toneDanger__MayAq";
+var indeterminate = "CircularProgress__indeterminate__yaHcg";
+var label = "CircularProgress__label__mhInz";
+var CircularProgress_module_default = {
+	circular,
+	svg,
+	sizeSm,
+	sizeMd,
+	sizeLg,
+	track,
+	fill,
+	toneDefault,
+	toneSuccess,
+	toneWarning,
+	toneDanger,
+	indeterminate,
+	"circular-spin": "CircularProgress__circular-spin__nHxUv",
+	label
+};
+export { circular, CircularProgress_module_default as default, fill, indeterminate, label, sizeLg, sizeMd, sizeSm, svg, toneDanger, toneDefault, toneSuccess, toneWarning, track };

package/dist/components/CircularProgress/index.d.ts

@@ -0,0 +1,2 @@
+export { CircularProgress } from './CircularProgress.js';
+export type { CircularProgressProps, CircularProgressSize, CircularProgressTone, CircularProgressLabel, } from './CircularProgress.js';

package/dist/components/Cluster/Cluster.css

@@ -0,0 +1,107 @@
+:root {
+  --cluster-gap-xs: var(--space-1);
+  --cluster-gap-sm: var(--space-2);
+  --cluster-gap-md: var(--space-3);
+  --cluster-gap-lg: var(--space-4);
+  --cluster-gap-xl: var(--space-6);
+  --cluster-gap-2xl: var(--space-8);
+}
+
+.Cluster__cluster__dA0-o {
+  display: flex;
+  flex-direction: row;
+}
+
+.Cluster__minWidth0__mbXQt {
+  min-width: 0;
+}
+
+.Cluster__stretchWrapped__pHUdZ::before {
+  content: "";
+  flex: 999 1 0;
+  /* stylelint-disable-next-line property-disallowed-list -- cancels the gap before the invisible spacer so it adds no width to line breaking; not layout on the component boundary. */
+  margin-inline-start: calc(-1 * var(--cluster-gap-current, 0px));
+}
+
+:where(.Cluster__stretchWrapped__pHUdZ > :first-child) {
+  order: -1;
+  max-width: 100%;
+}
+
+:where(.Cluster__stretchWrapped__pHUdZ > :not(:first-child)) {
+  flex: 1 1 auto;
+}
+
+.Cluster__maxWidthFull__nz-dn {
+  max-width: 100%;
+}
+
+.Cluster__inline__vwhKb {
+  display: inline-flex;
+}
+
+.Cluster__wrap__Y5fbH {
+  flex-wrap: wrap;
+}
+
+.Cluster__gapXs__SnxVe {
+  --cluster-gap-current: var(--cluster-gap-xs);
+  gap: var(--cluster-gap-current);
+}
+
+.Cluster__gapSm__aeFd8 {
+  --cluster-gap-current: var(--cluster-gap-sm);
+  gap: var(--cluster-gap-current);
+}
+
+.Cluster__gapMd__SETzh {
+  --cluster-gap-current: var(--cluster-gap-md);
+  gap: var(--cluster-gap-current);
+}
+
+.Cluster__gapLg__64YVH {
+  --cluster-gap-current: var(--cluster-gap-lg);
+  gap: var(--cluster-gap-current);
+}
+
+.Cluster__gapXl__CI92m {
+  --cluster-gap-current: var(--cluster-gap-xl);
+  gap: var(--cluster-gap-current);
+}
+
+.Cluster__gap2xl__qy5Vb {
+  --cluster-gap-current: var(--cluster-gap-2xl);
+  gap: var(--cluster-gap-current);
+}
+
+.Cluster__justifyStart__uA1Td {
+  justify-content: flex-start;
+}
+
+.Cluster__justifyCenter__pt1HX {
+  justify-content: center;
+}
+
+.Cluster__justifyEnd__-uGdE {
+  justify-content: flex-end;
+}
+
+.Cluster__justifyBetween__2Nr16 {
+  justify-content: space-between;
+}
+
+.Cluster__alignStart__l3rtA {
+  align-items: flex-start;
+}
+
+.Cluster__alignCenter__UW1zt {
+  align-items: center;
+}
+
+.Cluster__alignEnd__azosQ {
+  align-items: flex-end;
+}
+
+.Cluster__alignBaseline__v_vug {
+  align-items: baseline;
+}

package/dist/components/Cluster/Cluster.d.ts

@@ -0,0 +1,143 @@
+import { type HTMLAttributes } from 'react';
+/** Horizontal gap between children. Values in pixels: 4 / 8 / 12 / 16 / 24 / 32. */
+export type ClusterGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Main-axis distribution. `between` is the toolbar pattern. */
+export type ClusterJustify = 'start' | 'center' | 'end' | 'between';
+/** Cross-axis alignment. */
+export type ClusterAlign = 'start' | 'center' | 'end' | 'baseline';
+/**
+ * Rendered element. A small union rather than a fully generic polymorphic
+ * `as`, mirroring `TextAs`; details on the `as` prop.
+ */
+export type ClusterAs = 'div' | 'span' | 'section' | 'aside';
+export interface ClusterProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Element to render. Defaults to `'div'`.
+     * - `div` (default) — block-level flex container; right for nearly all uses.
+     * - `span` — renders `display: inline-flex`, for phrasing-content contexts
+     *   where a block element is invalid HTML: inside `<button>` (e.g. a
+     *   `ButtonGroup.Item` icon + label), `<a>`, or `<label>`.
+     * - `section` — only for a genuinely standalone, nameable region; pair with
+     *   `aria-label`/`aria-labelledby` (an unnamed section is just a div to AT).
+     * - `aside` — exposes a `complementary` landmark to screen readers; label it,
+     *   and never use it for mere visual grouping.
+     *
+     * `span` is the ONLY value valid inside `<button>`/`<a>`/`<label>` —
+     * `section` and `aside` are flow content and remain invalid HTML there.
+     */
+    as?: ClusterAs;
+    /**
+     * Gap between children, in pixels:
+     * `xs` (4) / `sm` (8) / `md` (12, default) / `lg` (16) / `xl` (24) / `2xl` (32).
+     */
+    gap?: ClusterGap;
+    /**
+     * Horizontal distribution.
+     * - `start` (default) — items at the start.
+     * - `center` — items centered.
+     * - `end` — items at the end. Canonical form-footer pattern.
+     * - `between` — first item at start, last at end, gap between. Canonical toolbar pattern (title left, actions right).
+     */
+    justify?: ClusterJustify;
+    /**
+     * Vertical alignment.
+     * - `start` / `center` (default) / `end` / `baseline`.
+     */
+    align?: ClusterAlign;
+    /**
+     * Lets the container shrink below its content's intrinsic width
+     * (`min-width: 0`), so a `<Text truncate>` inside can ellipsize instead of
+     * being hard-cut by a clipping ancestor.
+     *
+     * Reach for it when this Cluster is an item of a **row** flex container (or a
+     * grid item) that clips — a `Calendar` `renderEvent` chip, a `Card.Header`
+     * row. Without it the flex default (`min-width: auto`) floors the
+     * container at its content's min-content width and the ellipsis never
+     * appears. That floor applies because a Cluster sets no `overflow` — per CSS
+     * Flexbox §4.5 a flex item keeps its automatic minimum size while its computed
+     * `overflow` is non-scrollable (`visible` or `clip`); the scrollable values
+     * (`hidden`/`auto`/`scroll`) drop it to `0`. That is why a `<Text truncate>`
+     * (overflow hidden) never needs this and a Cluster around it does.
+     *
+     * It is a **no-op** inside a column `Stack` (the automatic minimum size
+     * applies only on the flex MAIN axis, so there is no horizontal floor), and
+     * inside a plain block or a table cell (the automatic minimum size applies
+     * to flex and grid ITEMS only, so `min-width: auto` is just `0` there). A table cell is
+     * a no-op for a different reason than it looks: auto table layout floors the
+     * cell at its content's min-content width regardless, so what makes text
+     * truncate there is `table-layout: fixed` or a `max-width` on the cell — not
+     * this prop.
+     *
+     * Opt-in rather than the default on purpose: a container that CAN shrink
+     * also VOLUNTEERS for shrink, so turning it on where the content is NOT
+     * truncatable (buttons, badges, icons) lets that content be clipped
+     * instead. Set it on the container whose text should give way, not on one
+     * holding controls.
+     *
+     * Related: `<Constrain flex="grow">` applies the same `min-width: 0` but
+     * also forces `flex: 1 1 0`, and renders a `<div>` — reach for this prop
+     * when you want only the shrink permission, or when you are inside a
+     * `<button>`/`<a>`/`<label>` where a `<div>` is invalid HTML.
+     *
+     * @default false
+     */
+    minWidth0?: boolean;
+    /**
+     * Caps the cluster at its container's width (`max-width: 100%`). Meant for
+     * `as="span"` inside running text: an inline cluster otherwise sizes to its
+     * content, so a `<Text as="span" truncate>` child with a long title makes
+     * the cluster overflow the paragraph instead of ellipsizing at the line
+     * edge. Combine with `wrap={false}` + a truncating child. The chip is one
+     * inline box: if the text before it leaves too little room on the line, the
+     * whole chip wraps to the next line, then ellipsizes at the full paragraph
+     * width. Phrasing-safe (still a span) — unlike `<Constrain maxWidth>`, which
+     * renders a `<div>` that is invalid inside `<p>` (#571).
+     *
+     * For an entity link row (icon, KEY, title, status, adornments) prefer
+     * `<EntityChip truncate trailing={…}>`, which does exactly this.
+     *
+     * @default false
+     */
+    maxWidthFull?: boolean;
+    /**
+     * Content-driven switch between one row and stacked. While the children fit
+     * on one line they stay content-sized and the free space collects between
+     * the first child and the rest (the rest sit at the end). When they no
+     * longer fit, every child that wraps onto its own line stretches to fill
+     * that line.
+     *
+     * Canonical case: a status pill plus a `<Grid columns={2}>` of two buttons —
+     * pill left and buttons right while there is room, buttons dropping under the
+     * pill at full width (equal columns) when there is not. No breakpoint to guess,
+     * unlike `Grid collapseBelow`.
+     *
+     * How: an invisible `::before` spacer soaks up a shared line's slack, so the
+     * children there get a negligible share (at most 1px per 1000px of slack); a
+     * non-first child alone on a wrapped line takes the whole line. Children
+     * wrapped together share it. The spacer cancels its own gap, so it adds no
+     * width: the switch happens exactly when the content stops fitting, also
+     * with a single child or `as="span"`.
+     *
+     * Limits: `justify` is inert while this is on (the spacer owns the slack);
+     * `wrap={false}` makes it moot (nothing wraps); a consumer `order` on
+     * children breaks it — don't. A child's own `flex` (via its `className`)
+     * overrides the stretch for that child. "First child" means the first
+     * ELEMENT: a leading bare text node is not it — wrap text in an element
+     * (e.g. `<Text>`).
+     *
+     * @default false
+     */
+    stretchWrapped?: boolean;
+    /**
+     * Whether children wrap to additional lines when the container is narrow.
+     * - `true` (default) — natural for toolbars and tag lists.
+     * - `false` — use sparingly, when overflow is preferable to wrapping
+     *   (e.g. inside a narrow table cell with fixed-width action buttons).
+     */
+    wrap?: boolean;
+}
+/**
+ * Horizontal layout primitive that wraps.
+ * @see docs/components/Cluster.md
+ */
+export declare const Cluster: import("react").ForwardRefExoticComponent<ClusterProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Cluster/Cluster.js

@@ -0,0 +1,38 @@
+'use client';
+import Cluster_module_default from "./Cluster.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+// src/components/Cluster/Cluster.tsx
+var gapClass = {
+	xs: Cluster_module_default.gapXs,
+	sm: Cluster_module_default.gapSm,
+	md: Cluster_module_default.gapMd,
+	lg: Cluster_module_default.gapLg,
+	xl: Cluster_module_default.gapXl,
+	"2xl": Cluster_module_default.gap2xl
+};
+var justifyClass = {
+	start: Cluster_module_default.justifyStart,
+	center: Cluster_module_default.justifyCenter,
+	end: Cluster_module_default.justifyEnd,
+	between: Cluster_module_default.justifyBetween
+};
+var alignClass = {
+	start: Cluster_module_default.alignStart,
+	center: Cluster_module_default.alignCenter,
+	end: Cluster_module_default.alignEnd,
+	baseline: Cluster_module_default.alignBaseline
+};
+/**
+* Horizontal layout primitive that wraps.
+* @see docs/components/Cluster.md
+*/
+var Cluster = forwardRef(function Cluster({ as = "div", gap = "md", justify = "start", align = "center", wrap = true, minWidth0 = false, stretchWrapped = false, maxWidthFull = false, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(as, {
+		ref,
+		className: clsx(Cluster_module_default.cluster, as === "span" && Cluster_module_default.inline, gapClass[gap], justifyClass[justify], alignClass[align], wrap && Cluster_module_default.wrap, minWidth0 && Cluster_module_default.minWidth0, stretchWrapped && Cluster_module_default.stretchWrapped, maxWidthFull && Cluster_module_default.maxWidthFull, className),
+		...props
+	});
+});
+export { Cluster };

package/dist/components/Cluster/Cluster.module.js

@@ -0,0 +1,45 @@
+import "./Cluster.css";
+// src/components/Cluster/Cluster.module.scss
+var cluster = "Cluster__cluster__dA0-o";
+var minWidth0 = "Cluster__minWidth0__mbXQt";
+var stretchWrapped = "Cluster__stretchWrapped__pHUdZ";
+var maxWidthFull = "Cluster__maxWidthFull__nz-dn";
+var inline = "Cluster__inline__vwhKb";
+var wrap = "Cluster__wrap__Y5fbH";
+var gapXs = "Cluster__gapXs__SnxVe";
+var gapSm = "Cluster__gapSm__aeFd8";
+var gapMd = "Cluster__gapMd__SETzh";
+var gapLg = "Cluster__gapLg__64YVH";
+var gapXl = "Cluster__gapXl__CI92m";
+var gap2xl = "Cluster__gap2xl__qy5Vb";
+var justifyStart = "Cluster__justifyStart__uA1Td";
+var justifyCenter = "Cluster__justifyCenter__pt1HX";
+var justifyEnd = "Cluster__justifyEnd__-uGdE";
+var justifyBetween = "Cluster__justifyBetween__2Nr16";
+var alignStart = "Cluster__alignStart__l3rtA";
+var alignCenter = "Cluster__alignCenter__UW1zt";
+var alignEnd = "Cluster__alignEnd__azosQ";
+var alignBaseline = "Cluster__alignBaseline__v_vug";
+var Cluster_module_default = {
+	cluster,
+	minWidth0,
+	stretchWrapped,
+	maxWidthFull,
+	inline,
+	wrap,
+	gapXs,
+	gapSm,
+	gapMd,
+	gapLg,
+	gapXl,
+	gap2xl,
+	justifyStart,
+	justifyCenter,
+	justifyEnd,
+	justifyBetween,
+	alignStart,
+	alignCenter,
+	alignEnd,
+	alignBaseline
+};
+export { alignBaseline, alignCenter, alignEnd, alignStart, cluster, Cluster_module_default as default, gap2xl, gapLg, gapMd, gapSm, gapXl, gapXs, inline, justifyBetween, justifyCenter, justifyEnd, justifyStart, maxWidthFull, minWidth0, stretchWrapped, wrap };

package/dist/components/Cluster/index.d.ts

@@ -0,0 +1,2 @@
+export { Cluster } from './Cluster.js';
+export type { ClusterProps, ClusterAs, ClusterGap, ClusterJustify, ClusterAlign } from './Cluster.js';

package/dist/components/Code/Code.css

@@ -0,0 +1,36 @@
+:root {
+  --code-font-size: var(--font-size-code);
+  --code-padding-x: var(--space-1);
+  --code-radius: var(--radius-sm);
+  --code-bg: var(--color-bg-muted);
+  --code-fg: var(--color-fg);
+  --code-fg-default: var(--color-fg);
+  --code-fg-muted: var(--color-fg-muted);
+  --code-fg-accent: var(--color-accent);
+  --code-fg-danger: var(--color-danger);
+}
+
+.Code__code__zqXAs {
+  font-family: var(--font-family-mono);
+  font-size: var(--code-font-size);
+  padding: 0 var(--code-padding-x);
+  border-radius: var(--code-radius);
+  background: var(--code-bg);
+  color: var(--code-fg);
+}
+
+.Code__toneDefault__Tnyb2 {
+  color: var(--code-fg-default);
+}
+
+.Code__toneMuted__ETLJ_ {
+  color: var(--code-fg-muted);
+}
+
+.Code__toneAccent__j56Tf {
+  color: var(--code-fg-accent);
+}
+
+.Code__toneDanger__hTIW0 {
+  color: var(--code-fg-danger);
+}

package/dist/components/Code/Code.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Color tone. */
+export type CodeTone = 'default' | 'muted' | 'accent' | 'danger';
+export interface CodeProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Color tone for the code text. The chip background stays the same;
+     * only the text color changes.
+     * - `default` — `--color-fg`
+     * - `muted` — `--color-fg-muted`
+     * - `accent` — `--color-accent`
+     * - `danger` — `--color-danger`
+     */
+    tone?: CodeTone;
+    /** Code content. */
+    children: ReactNode;
+}
+/**
+ * Inline `<code>` primitive: monospace text with a subtle chip background.
+ * @see docs/components/Code.md
+ */
+export declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;