@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/slider.js

@@ -1,26 +1,80 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { Input } from "./input.js";
 import { cn } from "../lib/utils.js";
+function snapToStep(value, min, max, step) {
+    const stepped = min + Math.round((value - min) / step) * step;
+    return Math.min(max, Math.max(min, Number(stepped.toFixed(10))));
+}
+function SliderValueInput({ label, value, lower, upper, min, max, step, disabled, onCommit, }) {
+    const [draft, setDraft] = React.useState(null);
+    const commit = () => {
+        if (draft === null)
+            return;
+        setDraft(null);
+        const typed = Number(draft);
+        if (draft.trim() === "" || !Number.isFinite(typed))
+            return;
+        onCommit(Math.min(upper, Math.max(lower, snapToStep(typed, min, max, step))));
+    };
+    return (_jsx(Input, { "aria-label": label, className: "w-12 tabular-nums", "data-slot": "slider-input", disabled: disabled, inputMode: "decimal", onBlur: commit, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+            if (event.key === "Enter")
+                commit();
+        }, size: "sm", value: draft ?? String(value) }));
+}
 /**
- * A bounded number chosen by a thumb's position on a track.
+ * A bounded number chosen by a thumb's position on a track, with its name and its live value.
  *
  * @family Inputs
- * @when A bounded number where the position matters more than the digit: a limit, a share.
- * @instead An exact number is `Input`; pair the two when precision counts. A few named levels are
- * radios.
- * @behaviour A 4 px track, the filled part in ink, a 12 px thumb edged in the input grey. Hover,
- * drag and focus outline the thumb. Arrows step, Page Up and Down jump, Home and End reach the
- * bounds. The thumb's touch target is 44 px.
- * @words The label names the quantity; the current value and its unit are always written beside it
- * (*€ 400*). The help states the bounds and the step.
- * @access `role="slider"` with a name, min, max and `aria-valuetext` carrying the unit.
+ * @when "Use a slider for ranged numeric input where shape and proximity matter more than
+ * precision: bandwidth caps, opacity, audio volume, color channels."
+ * (https://vercel.com/geist/slider) Ours: a limit, a share.
+ * @instead "For exact values like a port number or memory limit, pair the slider with a numeric
+ * `Input`; keyboard users default to typing." (https://vercel.com/geist/slider) Ours:
+ * `showEndInput`, and `showStartInput` on a range, add that box. A few named levels are radios.
+ * @behaviour "Snap to a sensible step (`1`, `5`, `10%`) so dragging never produces values like
+ * `47.83291`." (https://vercel.com/geist/slider) "Clamp `min` and `max` to real product limits."
+ * (https://vercel.com/geist/slider) "Always render the live value next to the track in tabular
+ * nums, and label what the number represents (`Sample Rate · 44 kHz`)."
+ * (https://vercel.com/geist/slider) "The track alone is not self-describing."
+ * (https://vercel.com/geist/slider) "Threshold colors (warning, error tints past a limit) should
+ * match the same numeric breakpoint surfaced elsewhere in the UI; don’t invent a slider-only
+ * threshold." (https://vercel.com/geist/slider) Ours: `label`, `min`, `max` and `step` are
+ * required. The label sits above the track at 13 px in the secondary grey, with the live value
+ * beside it. The track is 8 px high and grey, the filled part is blue, and the thumb is a 6 by 14
+ * px white bar; a disabled slider turns the filled part grey and leaves the rest. Colour: blue is
+ * the one hue, the filled part and nothing else. The thumb grows by a fifth while it is dragged
+ * (only the dragged one) or has keyboard focus, and hovering changes nothing. A range has two
+ * thumbs and cannot cross. A typed value is snapped to the step and kept inside the bounds when the
+ * box loses focus or Enter is pressed. `onValueCommitted` fires once when the change settles.
+ * @words Ours: the label names the quantity: *Monthly limit*. The unit comes from `format`, so the
+ * value reads *€400*, not 400. The help under the slider states the bounds and the step.
+ * @access "Give the slider an accessible name through a sibling `<label htmlFor>` or `aria-label`,
+ * and let the native arrow-key, Page Up/Down, Home/End behavior do the keyboard work."
+ * (https://vercel.com/geist/slider) "Don’t intercept those keys." (https://vercel.com/geist/slider)
+ * Ours: each thumb is `role="slider"` named by the label, with `aria-valuetext` carrying the unit
+ * from `format`. A single thumb and its box are named by the label; the two thumbs and the two
+ * boxes of a range by the label and their position, *Price 1* and *Price 2*.
  */
-function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
-    const _values = Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-            ? defaultValue
-            : [min, max];
-    return (_jsx(SliderPrimitive.Root, { className: cn("data-horizontal:w-full data-vertical:h-full", className), "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", ...props, children: _jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1", children: _jsx(SliderPrimitive.Indicator, { "data-slot": "slider-range", className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full" }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "relative block size-3 shrink-0 rounded-full border border-input bg-background transition-colors select-none after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 hover:nc-focus-outline active:nc-focus-outline disabled:pointer-events-none disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:after:hidden" }, index)))] }) }));
+function Slider({ label, value, defaultValue, onValueChange, onValueCommitted, showStartInput, showEndInput, className, min, max, step, disabled, ...props }) {
+    const [internal, setInternal] = React.useState(defaultValue ?? [min]);
+    const values = value ?? internal;
+    const last = values.length - 1;
+    // SAFETY: Base UI returns one number per thumb, so a change keeps the length of the values it was given.
+    const asValues = (next) => next;
+    const change = (next) => {
+        setInternal(next);
+        onValueChange?.(asValues(next));
+    };
+    const commit = (next) => onValueCommitted?.(asValues(next));
+    const thumbName = values.length > 1 ? (index) => `${label} ${index + 1}` : undefined;
+    const input = (index) => (_jsx(SliderValueInput, { disabled: disabled, label: values.length > 1 ? `${label} ${index + 1}` : label, lower: index > 0 ? (values[index - 1] ?? min) : min, max: max, min: min, onCommit: (typed) => {
+            const next = values.map((current, position) => (position === index ? typed : current));
+            change(next);
+            commit(next);
+        }, step: step, upper: index < last ? (values[index + 1] ?? max) : max, value: values[index] ?? min }));
+    return (_jsxs(SliderPrimitive.Root, { className: cn("grid w-full gap-2 data-disabled:cursor-not-allowed", className), "data-slot": "slider", disabled: disabled, max: max, min: min, onValueChange: change, onValueCommitted: commit, step: step, thumbAlignment: "edge", value: values, ...props, children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx(SliderPrimitive.Label, { className: "text-label-sm text-muted-foreground", children: label }), _jsx(SliderPrimitive.Value, { className: "text-label-sm text-muted-foreground tabular-nums" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [showStartInput ? input(0) : null, _jsxs(SliderPrimitive.Control, { className: "relative flex w-full flex-1 touch-none items-center select-none", children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative h-2 w-full grow overflow-hidden rounded-full bg-border select-none", children: _jsx(SliderPrimitive.Indicator, { "data-slot": "slider-range", className: "h-full bg-info select-none data-disabled:bg-muted-foreground/30" }) }), values.map((_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", getAriaLabel: thumbName, getAriaValueText: (formatted) => formatted, index: index, className: "relative block h-3.5 w-1.5 shrink-0 rounded-xs border border-input bg-background nc-transition-transform select-none after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 data-disabled:pointer-events-none data-dragging:has-focus:scale-120 has-focus-visible:scale-120 has-focus-visible:nc-focus-outline has-focus-visible:outline-ring [@media(hover:hover)_and_(pointer:fine)]:after:hidden" }, index)))] }), showEndInput ? input(last) : null] })] }));
 }
 export { Slider };

package/dist/components/snippet.d.ts

@@ -0,0 +1,57 @@
+import type { ReactElement } from "react";
+import { type CopyButtonProps } from "./copy-button.js";
+type SnippetContent = {
+    text: string | readonly string[];
+    copyText?: undefined;
+    placeholder?: undefined;
+} | {
+    text: ReactElement;
+    copyText: string;
+    placeholder?: undefined;
+} | {
+    text: "";
+    placeholder: string;
+    copyText?: undefined;
+};
+type SnippetVariant = "default" | "inverted" | "info" | "warning" | "destructive";
+type SnippetProps = SnippetContent & {
+    variant?: SnippetVariant | undefined;
+    prompt?: boolean | undefined;
+    copied?: boolean | undefined;
+    onCopy?: (() => void) | undefined;
+    className?: string | undefined;
+} & Pick<CopyButtonProps, "copyLabel" | "copiedLabel" | "copyFailedLabel">;
+/**
+ * One command a person copies and runs in a terminal.
+ *
+ * @family Data
+ * @when “Use Snippet for a runnable shell command the user is meant to copy. For inline tokens (env var names, paths) use `InlineCode`, and for multi-line source use `CodeBlock`.” (https://vercel.com/geist/snippet)
+ * Ours: a command or a short sequence of commands to paste into a terminal: an install, a sign-in, a
+ * pairing step.
+ * @instead Ours: a value that is not a command (an identifier, a URL, a checksum) is `TextWithCopyButton`. A
+ * script someone reads before running is a `CodeBlock`. A token inside a sentence is inline code.
+ * @behaviour “Pass the command as `text`. Authors never type a leading `$`; the component renders the prompt, so `text="$ vercel deploy"` displays as `$ $ vercel deploy`.” (https://vercel.com/geist/snippet)
+ * “Set `prompt={false}` for non-shell content (URLs, JSON, output you want copied verbatim) so the rendered string matches what gets copied.” (https://vercel.com/geist/snippet)
+ * “Keep one command per Snippet. Pass an array to `text` for a short multi-line block; for longer scripts, switch to `CodeBlock` so users can read before they copy.” (https://vercel.com/geist/snippet)
+ * “Use `copyText` only when `text` contains rich nodes (`<span>` highlights, conditional fragments) and the clipboard payload should be plain text. For a string `text`, `copyText` is redundant.” (https://vercel.com/geist/snippet)
+ * “Use the `copied` prop to control the copy button animation externally. This lets you copy different text (e.g. from a context card) while reusing the snippet's checkmark feedback.” (https://vercel.com/geist/snippet)
+ * “Use `copied` plus an `onCopy` callback when a parent surface (a card, a tooltip) needs to show the same checkmark feedback while copying different text.” (https://vercel.com/geist/snippet)
+ * Ours: an array of strings is copied joined by line breaks, one row each after its own prompt; the
+ * prompt is never copied. The shell is as wide as its text, up to its row (`className="w-full"`
+ * fills the row); a longer line scrolls sideways with no scrollbar. `text=""` with a `placeholder`
+ * shows the placeholder, copies nothing and has no button. `text` that is an element needs
+ * `copyText`; a string needs none. `onCopy` reports a copy once the clipboard confirms. `variant`
+ * puts one colour on the whole shell, its text and the copy mark together: `info`, `warning` or
+ * `destructive` for a command inside a note of that kind, `inverted` for a dark block on a light
+ * page; the default is neutral, which is what almost every snippet is. Hovering the copy mark dims
+ * it and draws a 1 px ring; it never takes a fill or leaves the shell's text colour.
+ * @words “Pair `placeholder` with `text=""` for an empty state. Sentence case, no trailing period, no `Please`: `Run vercel link to fetch env vars`. The placeholder is informational, not copied.” (https://vercel.com/geist/snippet)
+ * Ours: the command as typed. The placeholder example is *Run nadia login to connect this computer*.
+ * `copyLabel` names the command (*Copy install command*); `copiedLabel` and `copyFailedLabel` are
+ * required with it.
+ * @access Ours: the text is read as text; the prompt is hidden from assistive technology. The button is
+ * named by `copyLabel`, and the result is read once from its status.
+ */
+declare function Snippet(props: SnippetProps): import("react").JSX.Element;
+export { Snippet, type SnippetProps };
+//# sourceMappingURL=snippet.d.ts.map

package/dist/components/snippet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snippet.d.ts","sourceRoot":"","sources":["../../src/components/snippet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAG5E,KAAK,cAAc,GACf;IACE,IAAI,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB,GACD;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB,GACD;IACE,IAAI,EAAE,EAAE,CAAC;IACT,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEN,KAAK,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAElF,KAAK,YAAY,GAAG,cAAc,GAAG;IACnC,OAAO,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAuB3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,+BA8DnC;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/components/snippet.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from "./copy-button.js";
+import { cn } from "../lib/utils.js";
+const SHELL = {
+    default: "border-border bg-background",
+    inverted: "border-border bg-foreground text-background",
+    info: "border-info/30 bg-info-soft text-info-soft-foreground",
+    warning: "border-warning/50 bg-warning-soft text-warning-soft-foreground",
+    destructive: "border-destructive/30 bg-destructive-soft text-destructive-soft-foreground",
+};
+const COPY_KEEPS_SHELL_COLOUR = "[&_[data-slot=button]]:hover:bg-transparent [&_[data-slot=button]]:hover:text-inherit [&_[data-slot=button]]:active:bg-transparent [&_[data-slot=button]]:active:text-inherit";
+function copiedValue(content) {
+    if (content.copyText !== undefined)
+        return content.copyText;
+    return [content.text].flat().join("\n");
+}
+function linesOf(content) {
+    if (content.copyText !== undefined)
+        return [content.text];
+    return [content.text].flat();
+}
+/**
+ * One command a person copies and runs in a terminal.
+ *
+ * @family Data
+ * @when “Use Snippet for a runnable shell command the user is meant to copy. For inline tokens (env var names, paths) use `InlineCode`, and for multi-line source use `CodeBlock`.” (https://vercel.com/geist/snippet)
+ * Ours: a command or a short sequence of commands to paste into a terminal: an install, a sign-in, a
+ * pairing step.
+ * @instead Ours: a value that is not a command (an identifier, a URL, a checksum) is `TextWithCopyButton`. A
+ * script someone reads before running is a `CodeBlock`. A token inside a sentence is inline code.
+ * @behaviour “Pass the command as `text`. Authors never type a leading `$`; the component renders the prompt, so `text="$ vercel deploy"` displays as `$ $ vercel deploy`.” (https://vercel.com/geist/snippet)
+ * “Set `prompt={false}` for non-shell content (URLs, JSON, output you want copied verbatim) so the rendered string matches what gets copied.” (https://vercel.com/geist/snippet)
+ * “Keep one command per Snippet. Pass an array to `text` for a short multi-line block; for longer scripts, switch to `CodeBlock` so users can read before they copy.” (https://vercel.com/geist/snippet)
+ * “Use `copyText` only when `text` contains rich nodes (`<span>` highlights, conditional fragments) and the clipboard payload should be plain text. For a string `text`, `copyText` is redundant.” (https://vercel.com/geist/snippet)
+ * “Use the `copied` prop to control the copy button animation externally. This lets you copy different text (e.g. from a context card) while reusing the snippet's checkmark feedback.” (https://vercel.com/geist/snippet)
+ * “Use `copied` plus an `onCopy` callback when a parent surface (a card, a tooltip) needs to show the same checkmark feedback while copying different text.” (https://vercel.com/geist/snippet)
+ * Ours: an array of strings is copied joined by line breaks, one row each after its own prompt; the
+ * prompt is never copied. The shell is as wide as its text, up to its row (`className="w-full"`
+ * fills the row); a longer line scrolls sideways with no scrollbar. `text=""` with a `placeholder`
+ * shows the placeholder, copies nothing and has no button. `text` that is an element needs
+ * `copyText`; a string needs none. `onCopy` reports a copy once the clipboard confirms. `variant`
+ * puts one colour on the whole shell, its text and the copy mark together: `info`, `warning` or
+ * `destructive` for a command inside a note of that kind, `inverted` for a dark block on a light
+ * page; the default is neutral, which is what almost every snippet is. Hovering the copy mark dims
+ * it and draws a 1 px ring; it never takes a fill or leaves the shell's text colour.
+ * @words “Pair `placeholder` with `text=""` for an empty state. Sentence case, no trailing period, no `Please`: `Run vercel link to fetch env vars`. The placeholder is informational, not copied.” (https://vercel.com/geist/snippet)
+ * Ours: the command as typed. The placeholder example is *Run nadia login to connect this computer*.
+ * `copyLabel` names the command (*Copy install command*); `copiedLabel` and `copyFailedLabel` are
+ * required with it.
+ * @access Ours: the text is read as text; the prompt is hidden from assistive technology. The button is
+ * named by `copyLabel`, and the result is read once from its status.
+ */
+function Snippet(props) {
+    const { className, copied, copiedLabel, copyFailedLabel, copyLabel, onCopy, prompt = true, variant = "default", } = props;
+    const value = copiedValue(props);
+    const empty = props.placeholder !== undefined;
+    return (_jsxs("div", { "data-slot": "snippet", "data-variant": variant, className: cn("relative flex w-fit max-w-full min-w-0 flex-col rounded-sm border py-2.5 pl-3 font-label-mono-md text-label-mono-md", empty ? "pr-3" : "pr-12", SHELL[variant], className), children: [_jsx("div", { className: "min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: empty ? (_jsx("span", { className: variant === "default" ? "text-placeholder" : "opacity-70", children: props.placeholder })) : (linesOf(props).map((line, index) => (_jsxs("div", { className: "flex gap-2 whitespace-pre", children: [prompt ? (_jsx("span", { "aria-hidden": "true", className: "select-none", children: "$" })) : null, _jsx("span", { children: line })] }, index)))) }), empty ? null : (_jsx("div", { className: cn("nc-transition-opacity absolute top-1/2 right-1 -translate-y-1/2 rounded-sm hover:opacity-80 hover:ring-1 hover:ring-border", COPY_KEEPS_SHELL_COLOUR), children: _jsx(CopyButton, { value: value, copyLabel: copyLabel, copiedLabel: copiedLabel, copyFailedLabel: copyFailedLabel, copied: copied, onCopy: onCopy, size: "icon-sm" }) }))] }));
+}
+export { Snippet };

package/dist/components/sonner.d.ts

@@ -1,22 +1,21 @@
 import { type ToasterProps } from "sonner";
+type ToasterLabels = {
+    /** The close button's name: "Close notification". */
+    closeLabel: string;
+    /** The region's name, for a keyboard or screen reader user: "Notifications". */
+    regionLabel: string;
+};
+type ToasterOwnProps = Omit<ToasterProps, "closeButton" | "containerAriaLabel" | "duration" | "icons" | "toastOptions">;
 /**
  * The one place toasts appear, mounted once per product.
  *
  * @family Feedback
- * @when One acknowledgement of an action the person took, when the result is not already visible
- * where they are looking; and the Undo of a reversible removal. Mount it once; raise toasts through
- * `toast`.
- * @instead For a failure that must stay, use `MessageNotice` by the control. For unsaved work,
- * failed payment or lost access never a toast alone. For a condition use a banner.
- * @behaviour Tone `success`, `info`, `warning`, `error`; mark in the deep step. The first action
- * with a handler becomes its one button. Undo only where a safe rollback exists. A toast that stays
- * up shows the waiting line, not a spinner.
- * @words Completion is noun, past participle: *Mailbox removed*, *Agent created*, paired one to one
- * with its button *Remove mailbox*. No *successfully*, no exclamation.
- * @access Announced by the toaster's live region. Never the only route to recovery: the record's
- * own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while
- * it shows.
+ * @when "A succinct message that is displayed temporarily." (https://vercel.com/geist/toast) "Use a toast for non-blocking acknowledgments of user-initiated actions: `Domain added`, `Project archived`, `Deployment canceled`." (https://vercel.com/geist/toast) "Pick the method by how the user experienced the event, not by HTTP status. A user-canceled deploy is `toasts.message('Deployment canceled')`, not `success`. A partial deploy with skipped routes is `toasts.warning(...)`." (https://vercel.com/geist/toast) Ours: mount it once and raise toasts through `showMessageToast`. `toasts.message` is the tone `info`, and `success`, `warning` and `error` keep their names.
+ * @instead "Don’t use a toast alone for billing failures, permission denials, or build failures the user has to triage. Pair a ≤6-word toast (`Build failed`) with a persistent row carrying the recovery step and a stable identifier." (https://vercel.com/geist/toast) "Field-level validation belongs on the `Input`, not in a toast. Persistent configuration warnings belong in `Note` or `Banner`." (https://vercel.com/geist/toast) Ours: the persistent row is a `MessageNotice`, a field's wrong value stays on the field (`FieldError`), and a lasting condition is a `NoticeBanner`.
+ * @behaviour "Default toasts auto-dismiss; pass `preserve` only when the user must read or act on the message before it disappears." (https://vercel.com/geist/toast) "Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single `Undo` action button." (https://vercel.com/geist/toast) "Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step." (https://vercel.com/geist/toast) Ours: `showMessageToast` takes no `preserve`, so every toast leaves after 6 s, which is also the Undo window; the first action with a handler becomes the toast's one button. Colour sits on the whole toast: `success` fills it with the accent blue (Geist's blue success, the same hue as an `info` note), `warning` and `error` with their solid colour, each with that colour's text; `info` stays the plain surface. The tone's mark stays, because a tone must read without colour and the hidden tone word Geist uses would need a word in the product's language that `showMessageToast` does not take. A toast is 420 px wide at most, 16 px padded, with a close button of 32 px at its trailing edge. A toast that stays up shows the waiting line, not a spinner. Required: `closeLabel` and `regionLabel`, because the close button and the region need a name in the product's language.
+ * @words "One sentence, sentence case, no trailing period when the toast is a single sentence." (https://vercel.com/geist/toast) "Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." (https://vercel.com/geist/toast) "Error toasts are two sentences with periods and end with a recovery step: `Couldn’t verify domain. Try again.` Use `Couldn’t` for user-state errors and `Failed to` for system or infra errors; match adjacent shipped copy and don’t flip mid-flow." (https://vercel.com/geist/toast) "Pair the toast verb 1:1 with the destructive button verb (`Delete Project` then `Project deleted`, never `Project removed`)." (https://vercel.com/geist/toast) "Undo snackbars use the literal label `Undo`, never `Restore`, `Bring Back`, or `Cancel`. Only use the pattern when the rollback is safe." (https://vercel.com/geist/toast) Ours: the words come from the catalogue; *Mailbox removed* pairs with its button *Remove mailbox*.
+ * @access "The toast region announces with `aria-live="polite"`; reserve `assertive` for blocking errors that interrupt a flow." (https://vercel.com/geist/toast) "Don’t put primary navigation inside a toast; transient surfaces vanish before keyboard users can reach them." (https://vercel.com/geist/toast) Ours: the toaster's live region is named by `regionLabel` and the close button by `closeLabel`. Navigation is never the only route to recovery: the record's own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while it shows.
  */
-declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
+declare const Toaster: ({ closeLabel, regionLabel, ...props }: ToasterOwnProps & ToasterLabels) => import("react").JSX.Element;
 export { Toaster };
 //# sourceMappingURL=sonner.d.ts.map

package/dist/components/sonner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAM9D;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,gCAiC1C,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/components/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAQ9D,KAAK,aAAa,GAAG;IACnB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,eAAe,GAAG,IAAI,CACzB,YAAY,EACZ,aAAa,GAAG,oBAAoB,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAC7E,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,OAAO,GAAI,uCAAuC,eAAe,GAAG,aAAa,gCAiDtF,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/sonner.js

@@ -2,47 +2,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon } from "lucide-react";
+import { CircleCheckIcon, InfoIcon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { WaitingLine } from "./waiting-line.js";
 import { isThemeMode } from "../lib/theme-mode.js";
+const TOAST_DURATION_MS = 6000;
 /**
  * The one place toasts appear, mounted once per product.
  *
  * @family Feedback
- * @when One acknowledgement of an action the person took, when the result is not already visible
- * where they are looking; and the Undo of a reversible removal. Mount it once; raise toasts through
- * `toast`.
- * @instead For a failure that must stay, use `MessageNotice` by the control. For unsaved work,
- * failed payment or lost access never a toast alone. For a condition use a banner.
- * @behaviour Tone `success`, `info`, `warning`, `error`; mark in the deep step. The first action
- * with a handler becomes its one button. Undo only where a safe rollback exists. A toast that stays
- * up shows the waiting line, not a spinner.
- * @words Completion is noun, past participle: *Mailbox removed*, *Agent created*, paired one to one
- * with its button *Remove mailbox*. No *successfully*, no exclamation.
- * @access Announced by the toaster's live region. Never the only route to recovery: the record's
- * own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while
- * it shows.
+ * @when "A succinct message that is displayed temporarily." (https://vercel.com/geist/toast) "Use a toast for non-blocking acknowledgments of user-initiated actions: `Domain added`, `Project archived`, `Deployment canceled`." (https://vercel.com/geist/toast) "Pick the method by how the user experienced the event, not by HTTP status. A user-canceled deploy is `toasts.message('Deployment canceled')`, not `success`. A partial deploy with skipped routes is `toasts.warning(...)`." (https://vercel.com/geist/toast) Ours: mount it once and raise toasts through `showMessageToast`. `toasts.message` is the tone `info`, and `success`, `warning` and `error` keep their names.
+ * @instead "Don’t use a toast alone for billing failures, permission denials, or build failures the user has to triage. Pair a ≤6-word toast (`Build failed`) with a persistent row carrying the recovery step and a stable identifier." (https://vercel.com/geist/toast) "Field-level validation belongs on the `Input`, not in a toast. Persistent configuration warnings belong in `Note` or `Banner`." (https://vercel.com/geist/toast) Ours: the persistent row is a `MessageNotice`, a field's wrong value stays on the field (`FieldError`), and a lasting condition is a `NoticeBanner`.
+ * @behaviour "Default toasts auto-dismiss; pass `preserve` only when the user must read or act on the message before it disappears." (https://vercel.com/geist/toast) "Undo snackbars stay on screen for 5–10 seconds and pair the past-tense toast with a single `Undo` action button." (https://vercel.com/geist/toast) "Don’t stack toasts to narrate one async flow; emit the success or error toast at the terminal step." (https://vercel.com/geist/toast) Ours: `showMessageToast` takes no `preserve`, so every toast leaves after 6 s, which is also the Undo window; the first action with a handler becomes the toast's one button. Colour sits on the whole toast: `success` fills it with the accent blue (Geist's blue success, the same hue as an `info` note), `warning` and `error` with their solid colour, each with that colour's text; `info` stays the plain surface. The tone's mark stays, because a tone must read without colour and the hidden tone word Geist uses would need a word in the product's language that `showMessageToast` does not take. A toast is 420 px wide at most, 16 px padded, with a close button of 32 px at its trailing edge. A toast that stays up shows the waiting line, not a spinner. Required: `closeLabel` and `regionLabel`, because the close button and the region need a name in the product's language.
+ * @words "One sentence, sentence case, no trailing period when the toast is a single sentence." (https://vercel.com/geist/toast) "Completion toasts follow `{Noun} {past-participle}`: `Blob deleted`, `Domain added`, `Environment variable saved`. Never include `successfully`; the action name implies it." (https://vercel.com/geist/toast) "Error toasts are two sentences with periods and end with a recovery step: `Couldn’t verify domain. Try again.` Use `Couldn’t` for user-state errors and `Failed to` for system or infra errors; match adjacent shipped copy and don’t flip mid-flow." (https://vercel.com/geist/toast) "Pair the toast verb 1:1 with the destructive button verb (`Delete Project` then `Project deleted`, never `Project removed`)." (https://vercel.com/geist/toast) "Undo snackbars use the literal label `Undo`, never `Restore`, `Bring Back`, or `Cancel`. Only use the pattern when the rollback is safe." (https://vercel.com/geist/toast) Ours: the words come from the catalogue; *Mailbox removed* pairs with its button *Remove mailbox*.
+ * @access "The toast region announces with `aria-live="polite"`; reserve `assertive` for blocking errors that interrupt a flow." (https://vercel.com/geist/toast) "Don’t put primary navigation inside a toast; transient surfaces vanish before keyboard users can reach them." (https://vercel.com/geist/toast) Ours: the toaster's live region is named by `regionLabel` and the close button by `closeLabel`. Navigation is never the only route to recovery: the record's own row keeps its controls. Undo is reachable by keyboard (Alt+T moves focus to the toasts) while it shows.
  */
-const Toaster = ({ ...props }) => {
+const Toaster = ({ closeLabel, regionLabel, ...props }) => {
     const { theme = "system" } = useTheme();
-    return (_jsx(Sonner, { theme: isThemeMode(theme) ? theme : "system", className: "toaster group", icons: {
-            success: _jsx(CircleCheckIcon, { className: "size-4 text-success-soft-foreground" }),
-            info: _jsx(InfoIcon, { className: "size-4 text-info-soft-foreground" }),
-            warning: _jsx(TriangleAlertIcon, { className: "size-4 text-warning-soft-foreground" }),
-            error: _jsx(OctagonXIcon, { className: "size-4 text-destructive-soft-foreground" }),
+    return (_jsx(Sonner, { theme: isThemeMode(theme) ? theme : "system", className: "toaster group", closeButton: true, containerAriaLabel: regionLabel, duration: TOAST_DURATION_MS, icons: {
+            success: _jsx(CircleCheckIcon, { className: "size-4" }),
+            info: _jsx(InfoIcon, { className: "size-4" }),
+            warning: _jsx(TriangleAlertIcon, { className: "size-4" }),
+            error: _jsx(OctagonXIcon, { className: "size-4" }),
+            close: _jsx(XIcon, { className: "size-4" }),
             // A toast that stays up is already past a second, so its mark is the
             // one waiting line rather than a spinning glyph.
             loading: _jsx(WaitingLine, { className: "w-8", decorative: true }),
         }, 
         // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
         style: {
-            "--normal-bg": "var(--popover)",
+            "--normal-bg": "color-mix(in srgb, var(--popover) var(--nc-material-glass-opacity), transparent)",
             "--normal-text": "var(--popover-foreground)",
             "--normal-border": "transparent",
             "--border-radius": "var(--radius-lg)",
+            "--width": "420px",
         }, toastOptions: {
+            closeButtonAriaLabel: closeLabel,
             classNames: {
-                toast: "nc-toast nc-elevation-floating",
+                toast: "nc-toast nc-glass nc-elevation-floating min-h-16 pr-16! text-body-sm!",
+                title: "font-normal!",
+                description: "text-current!",
+                closeButton: "top-4! right-4! left-auto! size-8! transform-none! rounded-sm! border-0! bg-transparent! opacity-100! hover:bg-current/10!",
+                actionButton: "h-nadicode-control-height-sm! rounded-sm! bg-primary! px-button-padding-inline-sm! text-button! font-medium! text-primary-foreground!",
+                success: "[--normal-bg:var(--info)] [--normal-text:var(--info-foreground)]",
+                warning: "[--normal-bg:var(--warning)] [--normal-text:var(--warning-foreground)]",
+                error: "[--normal-bg:var(--destructive)] [--normal-text:var(--destructive-foreground)]",
             },
         }, ...props }));
 };

package/dist/components/status-badge.d.ts

@@ -1,8 +1,13 @@
 import type { ComponentProps } from "react";
+import { type BadgeSize } from "./badge.js";
 type StatusBadgeTone = "success" | "warning" | "danger" | "info" | "neutral";
-type StatusBadgeProps = Omit<ComponentProps<"span">, "children"> & {
+type StatusBadgeEmphasis = "subtle" | "solid";
+type StatusBadgeProps = Omit<ComponentProps<"span">, "children" | "onClick"> & {
     tone: StatusBadgeTone;
     label: string;
+    size?: BadgeSize;
+    /** `subtle` in rows, tables, lists and menus; `solid` where the status stands on its own. */
+    emphasis?: StatusBadgeEmphasis;
     /** How long the status has held, set after the word in tabular figures. */
     since?: string;
 };
@@ -10,17 +15,38 @@ type StatusBadgeProps = Omit<ComponentProps<"span">, "children"> & {
  * A record's state: a mark and a word in one of five tones.
  *
  * @family Status
- * @when A record's state, when it sets the row apart: failed, waiting on a person, a step in
+ * @when "Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role." (https://vercel.com/geist/badge)
+ * Ours: a record's state, when it sets the row apart: failed, waiting on a person, a step in
  * motion, paused, connected. Gray is every terminal state that needs no action.
- * @instead For a category (an installation, a partner) use `Tag`. For a control reporting its own
- * action use `ActionStatus`. For a mark beside a word that already names the state, `StatusDot`.
- * @behaviour Still: a status never moves and is never a button. Each app keeps one value-to-tone
- * map in one module; nothing else picks a status colour. A healthy record shows no badge.
- * @words A state, not a verb: *Failed*, *Waiting for you*. Sentence case, one to three words, no
+ * "Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral." (https://vercel.com/geist/badge)
+ * Ours: success is green, danger red, warning amber, info blue, neutral gray, whatever the state's
+ * name, in our colour values. The tone and the word are required, and the type asks for both.
+ * @instead "For non-deployment statuses (Workflow runs, Queue messages, Sandbox, Cron jobs), use a `Badge` with the canonical state vocabulary instead of repurposing the dot." (https://vercel.com/geist/status-dot)
+ * Ours: that `Badge` is `StatusBadge`. For a category (an installation, a partner) use `Tag`. For
+ * plain metadata (a role, a plan) use `Badge`. For a control reporting its own action use
+ * `ActionStatus`. For a mark beside a word that already names the state, `StatusDot`.
+ * @behaviour "Badges are static labels." (https://vercel.com/geist/badge)
+ * "Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value." (https://vercel.com/geist/badge)
+ * Ours: a status never moves and is never a button.
+ * "The `-subtle` suffix tones any of them down on dense surfaces." (https://vercel.com/geist/badge)
+ * Ours: `subtle`, the default, is for rows, tables, lists and menus: it fills the pill with the
+ * tone's soft ground and sets the mark and the word in its strong shade; gray takes the foreground
+ * colour, never a muted one. `solid` is for a status that stands on its own, such as an object's
+ * page header or a card title: it fills the pill with the tone's strong colour and sets the mark
+ * and the word on it. No border and no ring either way.
+ * "Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal." (https://vercel.com/geist/badge)
+ * Ours: it always draws its tone's mark, even for success and error: the mark repeats the tone as a
+ * shape so a status reads without colour. Each app keeps one value-to-tone map in one module;
+ * nothing else picks a status colour. A healthy record shows no badge.
+ * @words "Title Case, one word when possible, two max: `Active`, `Pending`, `Pro`, `Enterprise Trial`." (https://vercel.com/geist/badge)
+ * Ours: a state, not a verb (*Failed*, *Waiting for you*), in sentence case, one to three words, no
  * trailing ellipsis. Italian runs a third longer: *In attesa di te*.
- * @access The word is the name; the mark is `aria-hidden` and repeats the tone as a shape, so
- * colour never carries the state alone. Not focusable.
+ * "Match the canonical API or log term: `Production` not `Prod`, `Deployed` not `Live`, `Canceled` not `Cancelled` (the Vercel API uses one L)." (https://vercel.com/geist/badge)
+ * "Skip stuffing sentences inside (`Currently Active`, `You are on Pro`); the surrounding row supplies the context." (https://vercel.com/geist/badge)
+ * @access "Don’t rely on color alone; the text has to be readable without it." (https://vercel.com/geist/badge)
+ * Ours: the word is the name; the mark is `aria-hidden`, so colour never carries the state alone.
+ * Not focusable.
  */
-declare function StatusBadge({ tone, label, since, className, ...props }: StatusBadgeProps): import("react").JSX.Element;
-export { StatusBadge, type StatusBadgeProps, type StatusBadgeTone };
+declare function StatusBadge({ tone, label, since, className, size, emphasis, ...props }: StatusBadgeProps): import("react").JSX.Element;
+export { StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeTone };
 //# sourceMappingURL=status-badge.d.ts.map

package/dist/components/status-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/components/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAoB7E,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAmBjF;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,CAAC"}
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/components/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG3D,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7E,KAAK,mBAAmB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAgD9C,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAC7E,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAW,EACX,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAqBlB;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,CAAC"}

package/dist/components/status-badge.js

@@ -3,11 +3,31 @@ import { CircleCheck, CircleDot, CirclePause, CircleX, Clock } from "lucide-reac
 import { Badge } from "./badge.js";
 import { cn } from "../lib/utils.js";
 const FILL_BY_TONE = {
-    success: { name: "green", classes: "bg-success-soft text-success-soft-foreground" },
-    warning: { name: "amber", classes: "bg-warning-soft text-warning-soft-foreground" },
-    danger: { name: "red", classes: "bg-destructive-soft text-destructive-soft-foreground" },
-    info: { name: "blue", classes: "bg-info-soft text-info-soft-foreground" },
-    neutral: { name: "gray", classes: "bg-accent text-muted-foreground" },
+    success: {
+        name: "green",
+        subtle: "bg-success-soft text-success-soft-foreground",
+        solid: "bg-success text-success-foreground",
+    },
+    warning: {
+        name: "amber",
+        subtle: "bg-warning-soft text-warning-soft-foreground",
+        solid: "bg-warning text-warning-foreground",
+    },
+    danger: {
+        name: "red",
+        subtle: "bg-destructive-soft text-destructive-soft-foreground",
+        solid: "bg-destructive text-destructive-foreground",
+    },
+    info: {
+        name: "blue",
+        subtle: "bg-info-soft text-info-soft-foreground",
+        solid: "bg-info text-info-foreground",
+    },
+    neutral: {
+        name: "gray",
+        subtle: "bg-accent text-foreground",
+        solid: "bg-muted-foreground text-background",
+    },
 };
 // One mark per tone, always the same one: the tone said again as a shape, so a
 // status reads without colour. The info dot is filled and still.
@@ -18,24 +38,52 @@ const MARK_BY_TONE = {
     info: CircleDot,
     neutral: CirclePause,
 };
+// Every mark is a circle, which has less air round it than a square glyph, so
+// it sits closer to the pill's edge.
+const CIRCLE_MARK_INSET = {
+    sm: "has-data-[icon=inline-start]:pl-1",
+    md: "has-data-[icon=inline-start]:pl-1.25",
+    lg: "has-data-[icon=inline-start]:pl-2",
+};
 /**
  * A record's state: a mark and a word in one of five tones.
  *
  * @family Status
- * @when A record's state, when it sets the row apart: failed, waiting on a person, a step in
+ * @when "Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role." (https://vercel.com/geist/badge)
+ * Ours: a record's state, when it sets the row apart: failed, waiting on a person, a step in
  * motion, paused, connected. Gray is every terminal state that needs no action.
- * @instead For a category (an installation, a partner) use `Tag`. For a control reporting its own
- * action use `ActionStatus`. For a mark beside a word that already names the state, `StatusDot`.
- * @behaviour Still: a status never moves and is never a button. Each app keeps one value-to-tone
- * map in one module; nothing else picks a status colour. A healthy record shows no badge.
- * @words A state, not a verb: *Failed*, *Waiting for you*. Sentence case, one to three words, no
+ * "Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral." (https://vercel.com/geist/badge)
+ * Ours: success is green, danger red, warning amber, info blue, neutral gray, whatever the state's
+ * name, in our colour values. The tone and the word are required, and the type asks for both.
+ * @instead "For non-deployment statuses (Workflow runs, Queue messages, Sandbox, Cron jobs), use a `Badge` with the canonical state vocabulary instead of repurposing the dot." (https://vercel.com/geist/status-dot)
+ * Ours: that `Badge` is `StatusBadge`. For a category (an installation, a partner) use `Tag`. For
+ * plain metadata (a role, a plan) use `Badge`. For a control reporting its own action use
+ * `ActionStatus`. For a mark beside a word that already names the state, `StatusDot`.
+ * @behaviour "Badges are static labels." (https://vercel.com/geist/badge)
+ * "Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value." (https://vercel.com/geist/badge)
+ * Ours: a status never moves and is never a button.
+ * "The `-subtle` suffix tones any of them down on dense surfaces." (https://vercel.com/geist/badge)
+ * Ours: `subtle`, the default, is for rows, tables, lists and menus: it fills the pill with the
+ * tone's soft ground and sets the mark and the word in its strong shade; gray takes the foreground
+ * colour, never a muted one. `solid` is for a status that stands on its own, such as an object's
+ * page header or a card title: it fills the pill with the tone's strong colour and sets the mark
+ * and the word on it. No border and no ring either way.
+ * "Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal." (https://vercel.com/geist/badge)
+ * Ours: it always draws its tone's mark, even for success and error: the mark repeats the tone as a
+ * shape so a status reads without colour. Each app keeps one value-to-tone map in one module;
+ * nothing else picks a status colour. A healthy record shows no badge.
+ * @words "Title Case, one word when possible, two max: `Active`, `Pending`, `Pro`, `Enterprise Trial`." (https://vercel.com/geist/badge)
+ * Ours: a state, not a verb (*Failed*, *Waiting for you*), in sentence case, one to three words, no
  * trailing ellipsis. Italian runs a third longer: *In attesa di te*.
- * @access The word is the name; the mark is `aria-hidden` and repeats the tone as a shape, so
- * colour never carries the state alone. Not focusable.
+ * "Match the canonical API or log term: `Production` not `Prod`, `Deployed` not `Live`, `Canceled` not `Cancelled` (the Vercel API uses one L)." (https://vercel.com/geist/badge)
+ * "Skip stuffing sentences inside (`Currently Active`, `You are on Pro`); the surrounding row supplies the context." (https://vercel.com/geist/badge)
+ * @access "Don’t rely on color alone; the text has to be readable without it." (https://vercel.com/geist/badge)
+ * Ours: the word is the name; the mark is `aria-hidden`, so colour never carries the state alone.
+ * Not focusable.
  */
-function StatusBadge({ tone, label, since, className, ...props }) {
+function StatusBadge({ tone, label, since, className, size = "md", emphasis = "subtle", ...props }) {
     const Mark = MARK_BY_TONE[tone];
     const fill = FILL_BY_TONE[tone];
-    return (_jsxs(Badge, { className: cn(fill.classes, "has-data-[icon=inline-start]:pl-2", className), "data-variant": fill.name, ...props, children: [_jsx(Mark, { "aria-hidden": "true", "data-icon": "inline-start" }), label, since ? (_jsx("span", { className: "tabular-nums", "data-slot": "status-badge-since", children: since })) : null] }));
+    return (_jsxs(Badge, { className: cn(fill[emphasis], CIRCLE_MARK_INSET[size], className), "data-emphasis": emphasis, "data-variant": fill.name, icon: _jsx(Mark, { "aria-hidden": "true" }), size: size, ...props, children: [label, since ? (_jsx("span", { className: "tabular-nums", "data-slot": "status-badge-since", children: since })) : null] }));
 }
 export { StatusBadge };