@nadicodeai/ui 12.1.96 → 12.1.97

package/dist/components/house-icons.d.ts

@@ -1,5 +1,20 @@
 import { type LucideIcon } from "lucide-react";
 /** The company and its doors. */
+/**
+ * The house's own icons, the arch, the approvals arch and the Agent, as Lucide components.
+ *
+ * @family Status
+ * @when Wherever an icon names the company (`ArchIcon`), the work waiting on a person
+ * (`ApprovalsIcon`), or Agents as a section (`AgentIcon`). 12, 16, 20 and 24 px; 20 in persistent
+ * navigation.
+ * @instead Lucide for everything else. A particular Agent is her orb, not the agent icon. No Lucide
+ * glyph, a circle or a bot, stands in for these three.
+ * @behaviour Rendered exactly as Lucide: 1.5 px line (1.25 at 12), round caps and joins, no fill
+ * except the agent's dot, the text colour. Interchangeable with any Lucide icon wherever a
+ * `LucideIcon` is expected.
+ * @words Always beside its label in navigation: *Agents*, *Approvals*.
+ * @access Decorative beside text. An icon-only control carries its own `aria-label`.
+ */
 export declare const ArchIcon: LucideIcon;
 /** The arch with a check: work waiting on a person. */
 export declare const ApprovalsIcon: LucideIcon;

package/dist/components/house-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"house-icons.d.ts","sourceRoot":"","sources":["../../src/components/house-icons.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAsBjE,iCAAiC;AACjC,eAAO,MAAM,QAAQ,EAAE,UAA8D,CAAC;AAEtF,uDAAuD;AACvD,eAAO,MAAM,aAAa,EAAE,UAG3B,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,SAAS,EAAE,UAAgE,CAAC"}
+{"version":3,"file":"house-icons.d.ts","sourceRoot":"","sources":["../../src/components/house-icons.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAsBjE,iCAAiC;AACjC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,EAAE,UAA8D,CAAC;AAEtF,uDAAuD;AACvD,eAAO,MAAM,aAAa,EAAE,UAG3B,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,SAAS,EAAE,UAAgE,CAAC"}

package/dist/components/house-icons.js

@@ -19,6 +19,21 @@ const toNode = (node) => node.map(([element, attributes], index) => [
     { ...attributes, key: `${element}-${index}` },
 ]);
 /** The company and its doors. */
+/**
+ * The house's own icons, the arch, the approvals arch and the Agent, as Lucide components.
+ *
+ * @family Status
+ * @when Wherever an icon names the company (`ArchIcon`), the work waiting on a person
+ * (`ApprovalsIcon`), or Agents as a section (`AgentIcon`). 12, 16, 20 and 24 px; 20 in persistent
+ * navigation.
+ * @instead Lucide for everything else. A particular Agent is her orb, not the agent icon. No Lucide
+ * glyph, a circle or a bot, stands in for these three.
+ * @behaviour Rendered exactly as Lucide: 1.5 px line (1.25 at 12), round caps and joins, no fill
+ * except the agent's dot, the text colour. Interchangeable with any Lucide icon wherever a
+ * `LucideIcon` is expected.
+ * @words Always beside its label in navigation: *Agents*, *Approvals*.
+ * @access Decorative beside text. An icon-only control carries its own `aria-label`.
+ */
 export const ArchIcon = createLucideIcon("arch", toNode(houseIcons.arch));
 /** The arch with a check: work waiting on a person. */
 export const ApprovalsIcon = createLucideIcon("approvals", toNode(houseIcons.approvals));

package/dist/components/hover-card.d.ts

@@ -1,4 +1,19 @@
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+/**
+ * A preview of a few facts about something named in a dense row.
+ *
+ * @family Feedback
+ * @when A preview of a few facts about something named in a dense row: the exact moment behind a
+ * relative time, a record's summary.
+ * @instead For one phrase use `Tooltip`. For anything to edit or keep open use a `Sheet` or the
+ * record's page. Never the only way to an action.
+ * @behaviour Opens on hover and on focus, below by default, 4 px off; stays while the pointer is on
+ * it. Solid floating surface, 12 px padding.
+ * @words Facts, not prose: the date in words, the time with its zone, the machine timestamp. The
+ * trigger keeps its verb sentence: *Updated 3 hours ago*.
+ * @access The trigger is a real element with its own name (a `time` with its `datetime` for a
+ * moment), so the facts never depend on hover. Keyboard opening is tested, not assumed.
+ */
 declare function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props): import("react").JSX.Element;
 declare function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props): import("react").JSX.Element;
 declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;

package/dist/components/hover-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/components/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKlF,iBAAS,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,+BAE/D;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,+BAEzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GACjC,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,+BAsB7F;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/components/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKlF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,+BAE/D;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,+BAEzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GACjC,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,+BAsB7F;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/hover-card.js

@@ -3,6 +3,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
 import { anchoredOverlayMotion } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
+/**
+ * A preview of a few facts about something named in a dense row.
+ *
+ * @family Feedback
+ * @when A preview of a few facts about something named in a dense row: the exact moment behind a
+ * relative time, a record's summary.
+ * @instead For one phrase use `Tooltip`. For anything to edit or keep open use a `Sheet` or the
+ * record's page. Never the only way to an action.
+ * @behaviour Opens on hover and on focus, below by default, 4 px off; stays while the pointer is on
+ * it. Solid floating surface, 12 px padding.
+ * @words Facts, not prose: the date in words, the time with its zone, the machine timestamp. The
+ * trigger keeps its verb sentence: *Updated 3 hours ago*.
+ * @access The trigger is a real element with its own name (a `time` with its `datetime` for a
+ * moment), so the facts never depend on hover. Keyboard opening is tested, not assumed.
+ */
 function HoverCard({ ...props }) {
     return _jsx(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props });
 }

package/dist/components/identity-mark.d.ts

@@ -0,0 +1,55 @@
+import type { ComponentType, CSSProperties, ReactElement, ReactNode } from "react";
+import { type AgentOrbFigure, type AgentOrbState } from "./agent-orb.js";
+import { type AppMarkGlyph } from "./app-mark.js";
+export type IdentityMarkSize = 20 | 24 | 28 | 32 | 40 | 64;
+/** A navigation icon from any Lucide build: the package's and Hermes's ship different versions of the same icons. */
+export type IconComponent = ComponentType<{
+    className?: string;
+    size?: number;
+    "aria-hidden"?: boolean | "true" | "false";
+}>;
+export type IdentityMarkProps = {
+    /** 32 in a row, 64 at an object's head, 24 in a feed or a sidebar identity line, 40 for a Library entry. */
+    size?: IdentityMarkSize;
+    /** Its accessible name where it stands without its name beside it (a narrow rail). Decorative otherwise. */
+    label?: string;
+} & ({
+    kind: "agent";
+    orb: {
+        form: AgentOrbFigure;
+        color?: CSSProperties["color"];
+        state?: AgentOrbState;
+    };
+    /** Wraps the drawn orb, such as in the product's view transition that carries her to her page. */
+    frame?: (orb: ReactElement) => ReactNode;
+} | ({
+    kind: "app";
+    app: string;
+} & AppMarkGlyph) | {
+    kind: "company";
+    name: string;
+} | {
+    kind: "person";
+    name: string;
+    image?: string;
+} | {
+    kind: "record";
+    /** The kind's own icon, the one its section has in the navigation: Mail for a mailbox. */
+    icon: IconComponent;
+    /** A catalogue kind's ground; neutral is the ringed card ground. */
+    tone?: "neutral" | "skill" | "plugin" | "teal";
+});
+/**
+ * What says which thing a record is, at a fixed size at the start of its row,
+ * its object's head or its feed line: an Agent's orb, an app's logo, a
+ * company's initials, a person's picture, or a record kind's icon on its tile.
+ *
+ * @family Status
+ * @when The first thing in a record's row (32), at the head of its object page (64), in a feed or a sidebar identity line (24), on a Library entry (40): wherever it tells a person which thing they are looking at.
+ * @instead An icon beside a card's title, a KPI's label or a section heading only repeats the words and is left out. A picture for a first use or a whole-page moment is the empty state's or the page's own. A model is its `ModelIdentity`.
+ * @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her orb from the orb engine, never an avatar or a painted circle, and `frame` lets the product wrap that orb, such as in the transition that carries her to her page; an app keeps its own logo on the white tile; a company is two initials on the ringed card tile; a person is their picture, then their initials; a record with no picture of its own takes its kind's navigation icon, on the purple ground for a skill and the blue one for a plugin.
+ * @words None of its own: the record's name stands beside it. Initials are the first letters of the name's first two words.
+ * @access Decorative beside the record's name. Alone, as in a narrow rail, `label` names it.
+ */
+export declare function IdentityMark(props: IdentityMarkProps): ReactNode;
+//# sourceMappingURL=identity-mark.d.ts.map

package/dist/components/identity-mark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"identity-mark.d.ts","sourceRoot":"","sources":["../../src/components/identity-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,aAAa,EACnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAInE,MAAM,MAAM,gBAAgB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE3D,qHAAqH;AACrH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4GAA4G;IAC5G,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,CACA;IACE,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE;QAAE,IAAI,EAAE,cAAc,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAE,CAAC;IACrF,kGAAkG;IAClG,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,SAAS,CAAC;CAC1C,GACD,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAAC,GAC7C;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,0FAA0F;IAC1F,IAAI,EAAE,aAAa,CAAC;IACpB,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAChD,CACJ,CAAC;AAqEF;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAoDhE"}

package/dist/components/identity-mark.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AgentOrb, } from "./agent-orb.js";
+import { AppMark } from "./app-mark.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { cn } from "../lib/utils.js";
+const MEASURES = {
+    20: { orb: 20, icon: 12, initials: 8 },
+    24: { orb: 24, icon: 14, initials: 9 },
+    28: { orb: 24, icon: 16, initials: 10 },
+    32: { orb: 32, icon: 16, initials: 11 },
+    40: { orb: 40, icon: 20, initials: 13 },
+    64: { orb: 64, icon: 24, initials: 20 },
+};
+const TONES = {
+    neutral: "bg-card text-muted-foreground ring-1 ring-border ring-inset",
+    skill: "bg-category-purple text-category-purple-foreground",
+    plugin: "bg-info-soft text-info-soft-foreground",
+    teal: "bg-category-teal text-category-teal-foreground",
+};
+function identityInitials(name) {
+    return name
+        .split(/\s+/)
+        .map((word) => word.match(/^[\p{L}\p{N}]/u)?.[0])
+        .filter((initial) => initial !== undefined)
+        .slice(0, 2)
+        .join("")
+        .toUpperCase();
+}
+function naming(label) {
+    return label
+        ? { role: "img", "aria-label": label }
+        : { "aria-hidden": true };
+}
+function Tile({ kind, label, size, tone, children, }) {
+    return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", size >= 40 ? "rounded-md" : "rounded-sm", TONES[tone]), "data-kind": kind, "data-slot": "identity-mark", style: { width: size, height: size }, ...naming(label), children: children }));
+}
+/**
+ * What says which thing a record is, at a fixed size at the start of its row,
+ * its object's head or its feed line: an Agent's orb, an app's logo, a
+ * company's initials, a person's picture, or a record kind's icon on its tile.
+ *
+ * @family Status
+ * @when The first thing in a record's row (32), at the head of its object page (64), in a feed or a sidebar identity line (24), on a Library entry (40): wherever it tells a person which thing they are looking at.
+ * @instead An icon beside a card's title, a KPI's label or a section heading only repeats the words and is left out. A picture for a first use or a whole-page moment is the empty state's or the page's own. A model is its `ModelIdentity`.
+ * @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her orb from the orb engine, never an avatar or a painted circle, and `frame` lets the product wrap that orb, such as in the transition that carries her to her page; an app keeps its own logo on the white tile; a company is two initials on the ringed card tile; a person is their picture, then their initials; a record with no picture of its own takes its kind's navigation icon, on the purple ground for a skill and the blue one for a plugin.
+ * @words None of its own: the record's name stands beside it. Initials are the first letters of the name's first two words.
+ * @access Decorative beside the record's name. Alone, as in a narrow rail, `label` names it.
+ */
+export function IdentityMark(props) {
+    const size = props.size ?? 32;
+    const measures = MEASURES[size];
+    switch (props.kind) {
+        case "agent": {
+            const orb = props.label ? (_jsx(AgentOrb, { ...props.orb, label: props.label, size: measures.orb })) : (_jsx(AgentOrb, { ...props.orb, decorative: true, size: measures.orb }));
+            return props.frame ? props.frame(orb) : orb;
+        }
+        case "app":
+            return props.platform ? (_jsx(AppMark, { app: props.app, label: props.label, platform: props.platform, size: size })) : (_jsx(AppMark, { app: props.app, label: props.label, logo: props.logo, size: size }));
+        case "person":
+            return (_jsxs(Avatar, { "data-kind": "person", "data-slot": "identity-mark", style: { width: size, height: size }, ...naming(props.label), children: [props.image ? _jsx(AvatarImage, { alt: "", src: props.image }) : null, _jsx(AvatarFallback, { style: { fontSize: measures.initials }, children: identityInitials(props.name) })] }));
+        case "company":
+            return (_jsx(Tile, { kind: "company", label: props.label, size: size, tone: "neutral", children: _jsx("span", { "aria-hidden": "true", className: "leading-none font-semibold", style: { fontSize: measures.initials }, children: identityInitials(props.name) }) }));
+        case "record":
+            return (_jsx(Tile, { kind: "record", label: props.label, size: size, tone: props.tone ?? "neutral", children: _jsx(props.icon, { "aria-hidden": "true", size: measures.icon }) }));
+    }
+}

package/dist/components/input-group.d.ts

@@ -1,6 +1,22 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Button } from "./button.js";
+/**
+ * One input box with something fixed inside it: a mark, a prefix, a button.
+ *
+ * @family Inputs
+ * @when A single-line value with something fixed inside the box: a search mark, a clear button, a
+ * prefix like *https://*, a copy button.
+ * @instead A collection's search is `CollectionSearch`, never a hand-built group. A plain value is
+ * `Input`. Many known values to filter is `Combobox`.
+ * @behaviour The group draws the edge and the focus outline for the input inside it. The clear
+ * button empties the value and puts focus back in the box. Escape clears only while the box holds
+ * the interaction and has a value; otherwise it closes the overlay as usual.
+ * @words Prefix and suffix are literal text, never the label. An inline button names what it does:
+ * *Clear search*, *Copy address*.
+ * @access `role="group"` around the box. The input inside keeps its own label. Inline buttons are
+ * named: *Clear search*, *Copy address*.
+ */
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;

package/dist/components/input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/components/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYvE;AAED,QAAA,MAAM,uBAAuB;;8EAiB5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAkB5E;AAED,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AAEH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,qBAUF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAU5E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW9E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAWpF;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/components/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYvE;AAED,QAAA,MAAM,uBAAuB;;8EAiB5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAkB5E;AAED,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AAEH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,qBAUF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAU5E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW9E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAWpF;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAC"}

package/dist/components/input-group.js

@@ -5,6 +5,22 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
+/**
+ * One input box with something fixed inside it: a mark, a prefix, a button.
+ *
+ * @family Inputs
+ * @when A single-line value with something fixed inside the box: a search mark, a clear button, a
+ * prefix like *https://*, a copy button.
+ * @instead A collection's search is `CollectionSearch`, never a hand-built group. A plain value is
+ * `Input`. Many known values to filter is `Combobox`.
+ * @behaviour The group draws the edge and the focus outline for the input inside it. The clear
+ * button empties the value and puts focus back in the box. Escape clears only while the box holds
+ * the interaction and has a value; otherwise it closes the overlay as usual.
+ * @words Prefix and suffix are literal text, never the label. An inline button names what it does:
+ * *Clear search*, *Copy address*.
+ * @access `role="group"` around the box. The input inside keeps its own label. Inline buttons are
+ * named: *Clear search*, *Copy address*.
+ */
 function InputGroup({ className, ...props }) {
     return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-control-height min-h-touch-target w-full min-w-0 items-center rounded-sm border border-input bg-background transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit has-disabled:bg-input/50 has-disabled:opacity-50 not-in-data-[slot=combobox-content]:has-[[data-slot=input-group-control]:focus-visible]:nc-focus-outline has-[[data-slot=input-group-control]:focus-visible]:outline-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:nc-focus-outline has-[[data-slot][aria-invalid=true]]:outline-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-0", className), ...props }));
 }

package/dist/components/input-otp.d.ts

@@ -1,5 +1,20 @@
 import * as React from "react";
 import { OTPInput } from "input-otp";
+/**
+ * A fixed-length code typed into one slot per character.
+ *
+ * @family Inputs
+ * @when A fixed-length code a person types: the two-factor code at the Portal's sign-in.
+ * @instead A code a person only compares between two screens is `PairingCode`. A long token is
+ * `Input` with a copy or paste action.
+ * @behaviour One real input behind the slots: paste fills them all, Backspace walks back. The
+ * active slot carries the focus outline and a still caret. A wrong code turns the group red and
+ * keeps the digits so the person can correct them. Resend follows the product's real policy.
+ * @words The label says where the code comes from. The error says what to do: *That code didn't
+ * match. Check the newest code in your app.*
+ * @access One labelled input with `autocomplete="one-time-code"` and `inputMode="numeric"`. The
+ * separator is decorative to the reader.
+ */
 declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
     containerClassName?: string;
 }): React.JSX.Element;

package/dist/components/input-otp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../src/components/input-otp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAC;AAKtD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,qBAoBA;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,qBAsBA;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWnE;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../src/components/input-otp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAC;AAKtD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,qBAoBA;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW1E;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,qBAsBA;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWnE;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/input-otp.js

@@ -4,6 +4,21 @@ import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { cn } from "../lib/utils.js";
 import { MinusIcon } from "lucide-react";
+/**
+ * A fixed-length code typed into one slot per character.
+ *
+ * @family Inputs
+ * @when A fixed-length code a person types: the two-factor code at the Portal's sign-in.
+ * @instead A code a person only compares between two screens is `PairingCode`. A long token is
+ * `Input` with a copy or paste action.
+ * @behaviour One real input behind the slots: paste fills them all, Backspace walks back. The
+ * active slot carries the focus outline and a still caret. A wrong code turns the group red and
+ * keeps the digits so the person can correct them. Resend follows the product's real policy.
+ * @words The label says where the code comes from. The error says what to do: *That code didn't
+ * match. Check the newest code in your app.*
+ * @access One labelled input with `autocomplete="one-time-code"` and `inputMode="numeric"`. The
+ * separator is decorative to the reader.
+ */
 function InputOTP({ className, containerClassName, ...props }) {
     return (_jsx(OTPInput, { "data-slot": "input-otp", containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName), spellCheck: false, 
         // The hidden native input spans the whole container; the active slot is

package/dist/components/input.d.ts

@@ -1,4 +1,19 @@
 import * as React from "react";
+/**
+ * One line of free text, edged in the input grey.
+ *
+ * @family Inputs
+ * @when One free-form value on one line: a name, an address, a number.
+ * @instead Text with a fixed prefix, an icon or a button inside is `InputGroup`. Several lines are
+ * `Textarea`. A known set of values is a select, radios or a combobox.
+ * @behaviour 36 px, edged in the `input` role's grey with no shadow, 6 px corners. Focus is the 2 px outline. Invalid keeps a red edge and a red outline even without
+ * focus. Disabled is 50% on a half-grey fill. The value survives a failed save.
+ * @words The label is a noun in sentence case with no colon. The placeholder is an example (*Bizeta
+ * Arredamenti*), never the label or an instruction. In a configuration section the box stops at 20
+ * rem under its label.
+ * @access A visible `label` tied by `id`, the help and the error joined through `aria-describedby`,
+ * `aria-invalid` when wrong. Use the right `type`, `autocomplete` and `inputMode`.
+ */
 declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
 export { Input };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAY1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;GAcG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAY1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/input.js

@@ -1,6 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input as InputPrimitive } from "@base-ui/react/input";
 import { cn } from "../lib/utils.js";
+/**
+ * One line of free text, edged in the input grey.
+ *
+ * @family Inputs
+ * @when One free-form value on one line: a name, an address, a number.
+ * @instead Text with a fixed prefix, an icon or a button inside is `InputGroup`. Several lines are
+ * `Textarea`. A known set of values is a select, radios or a combobox.
+ * @behaviour 36 px, edged in the `input` role's grey with no shadow, 6 px corners. Focus is the 2 px outline. Invalid keeps a red edge and a red outline even without
+ * focus. Disabled is 50% on a half-grey fill. The value survives a failed save.
+ * @words The label is a noun in sentence case with no colon. The placeholder is an example (*Bizeta
+ * Arredamenti*), never the label or an instruction. In a configuration section the box stops at 20
+ * rem under its label.
+ * @access A visible `label` tied by `id`, the help and the error joined through `aria-describedby`,
+ * `aria-invalid` when wrong. Use the right `type`, `autocomplete` and `inputMode`.
+ */
 function Input({ className, type, ...props }) {
     return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-control-height min-h-touch-target w-full min-w-0 rounded-sm border border-input bg-background px-control-padding-inline py-1 text-base transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-placeholder disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 md:text-sm", className), ...props }));
 }

package/dist/components/item.d.ts

@@ -17,6 +17,22 @@ declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
     size?: "default" | "xs" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A row said in a sentence: media, a title, one line of description, trailing actions.
+ *
+ * @family Data
+ * @when Things best said in a sentence: an activity feed, a Library shelf, connected accounts.
+ * Media, a title, one line of description, trailing actions.
+ * @instead Facts that compare across records are a `DataTable`. A page whose job is one collection
+ * is `CollectionPage`. Agents in a gallery are `AgentListRow`; Library entries `CatalogEntry`.
+ * @behaviour Inside a card the group is `divided`: no gaps, one hairline between items. An item
+ * that is an `a` or `button` takes the `accent` hover and is one hit target; nested controls stay
+ * independent. The title holds one line.
+ * @words Title: the name, or what happened as a short sentence (*Nadia filed 12 invoices*).
+ * Description: one sentence. One primary action as a button; the rest in the three dots.
+ * @access The group is a `list` and each item a list item. A linked item's text is its name; image
+ * media is decorative beside the title.
+ */
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
     variant?: "image" | "default" | "icon" | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/components/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,0EAmBA;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBAWrF;AAED,QAAA,MAAM,YAAY;;;8EAoBjB,CAAC;AAEF,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,0EAgBrE;AAED,QAAA,MAAM,iBAAiB;;8EAetB,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,qBAStE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,4FAA4F;IAC5F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,qBAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,GACX,CAAC"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../src/components/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,0EAmBA;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBAWrF;AAED,QAAA,MAAM,YAAY;;;8EAoBjB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,0EAgBrE;AAED,QAAA,MAAM,iBAAiB;;8EAetB,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,qBAStE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWtE;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,4FAA4F;IAC5F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,qBAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,aAAa,EACb,SAAS,EACT,eAAe,EACf,UAAU,EACV,UAAU,GACX,CAAC"}

package/dist/components/item.js

@@ -38,6 +38,22 @@ const itemVariants = cva("nc-transition-paint group/item flex w-full flex-wrap i
         size: "default",
     },
 });
+/**
+ * A row said in a sentence: media, a title, one line of description, trailing actions.
+ *
+ * @family Data
+ * @when Things best said in a sentence: an activity feed, a Library shelf, connected accounts.
+ * Media, a title, one line of description, trailing actions.
+ * @instead Facts that compare across records are a `DataTable`. A page whose job is one collection
+ * is `CollectionPage`. Agents in a gallery are `AgentListRow`; Library entries `CatalogEntry`.
+ * @behaviour Inside a card the group is `divided`: no gaps, one hairline between items. An item
+ * that is an `a` or `button` takes the `accent` hover and is one hit target; nested controls stay
+ * independent. The title holds one line.
+ * @words Title: the name, or what happened as a short sentence (*Nadia filed 12 invoices*).
+ * Description: one sentence. One primary action as a button; the rest in the three dots.
+ * @access The group is a `list` and each item a list item. A linked item's text is its name; image
+ * media is decorative beside the title.
+ */
 function Item({ className, variant = "default", size = "default", render, ...props }) {
     return useRender({
         defaultTagName: "div",

package/dist/components/kbd.d.ts

@@ -1,3 +1,17 @@
+/**
+ * One key of a shortcut, beside the command it triggers.
+ *
+ * @family Data
+ * @when A shortcut hint next to the command it triggers: Find with ⌘K, the sidebar with ⌘B. 20 px,
+ * 2 px corners, mono 12 on the recessed fill.
+ * @instead A key a person types into is an `Input`; a code a person types is `InputOTP`. In a
+ * command list, `CommandShortcut`.
+ * @behaviour Not interactive. Only shortcuts actually bound are shown. The caller maps the
+ * platform: ⌘ on macOS, Ctrl on Windows and Linux.
+ * @words One key per `Kbd`; symbols for macOS modifiers (⌘ ⇧ ⌥), words elsewhere (*Ctrl*).
+ * Surrounding prose stays outside the key.
+ * @access A `kbd` element, read in order; the command's own name carries the meaning.
+ */
 declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react").JSX.Element;
 declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 export { Kbd, KbdGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../src/components/kbd.tsx"],"names":[],"mappings":"AAEA,iBAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWhE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQrE;AAED,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../src/components/kbd.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,iBAAS,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAWhE;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQrE;AAED,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/kbd.js

@@ -1,5 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+/**
+ * One key of a shortcut, beside the command it triggers.
+ *
+ * @family Data
+ * @when A shortcut hint next to the command it triggers: Find with ⌘K, the sidebar with ⌘B. 20 px,
+ * 2 px corners, mono 12 on the recessed fill.
+ * @instead A key a person types into is an `Input`; a code a person types is `InputOTP`. In a
+ * command list, `CommandShortcut`.
+ * @behaviour Not interactive. Only shortcuts actually bound are shown. The caller maps the
+ * platform: ⌘ on macOS, Ctrl on Windows and Linux.
+ * @words One key per `Kbd`; symbols for macOS modifiers (⌘ ⇧ ⌥), words elsewhere (*Ctrl*).
+ * Surrounding prose stays outside the key.
+ * @access A `kbd` element, read in order; the command's own name carries the meaning.
+ */
 function Kbd({ className, ...props }) {
     return (_jsx("kbd", { "data-slot": "kbd", className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs border border-border bg-recessed px-1 font-label-mono text-caption font-normal text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-recessed in-data-[slot=tooltip-content]:text-popover-foreground [&_svg:not([class*='size-'])]:size-3", className), ...props }));
 }

package/dist/components/kpi-card.d.ts

@@ -1,11 +1,6 @@
-import * as React from "react";
+import type * as React from "react";
 import type { useRender } from "@base-ui/react/use-render";
 import { type TrendDirection } from "./trend-badge.js";
-/**
- * kpi-card — one measured figure, the way the dashboard-01 section card shows
- * it: the label above the value, the change top right as a badge, and the
- * named comparison in the footer (`rule/kpi-card-trend-top-right`). Use the inline presentation for measurements already grouped inside a section.
- */
 type KpiCardDirection = TrendDirection;
 type KpiCardTone = "default" | "warning" | "critical";
 type KpiCardDelta = {
@@ -19,19 +14,32 @@ type KpiCardDelta = {
     /** The whole comparison line in the reader's language, e.g. "vs August", "rispetto al mese di agosto". */
     comparison: string;
     /** The direction in the reader's language, for a screen reader. */
-    directionLabel?: string;
+    directionLabel: string;
 };
-declare function KpiCard({ label, value, delta, note, tone, render, presentation, className, }: {
-    presentation?: "card" | "inline";
-    label: React.ReactNode;
+type KpiCardProps = {
+    /** Words only: no icon sits beside a figure's label. */
+    label: string;
     value: React.ReactNode;
     delta?: KpiCardDelta;
     note?: React.ReactNode;
     tone?: KpiCardTone;
     /** Binds an app link or element without replacing the card's presentation. */
     render?: useRender.ComponentProps<"div">["render"];
-    className?: string;
-}): React.JSX.Element;
+    /** `inline` for measurements already grouped inside a section. */
+    presentation?: "card" | "inline";
+};
+/**
+ * One measured figure, the way the dashboard-01 section card shows it: the label above the value, the change top
+ * right as a badge, and the named comparison in the footer (`rule/kpi-card-trend-top-right`).
+ *
+ * @family Charts
+ * @when One figure a person checks at a glance: Active Agents, Spend, Tasks done, Need attention, in an overview's row of figures.
+ * @instead A figure read over time is a `ChartCard`, and a single figure is never nested inside one. A ratio beside two money measures is a `KpiCard` next to the chart, never a second axis. A level against a cap is `Progress`.
+ * @behaviour Label left and the change badge right on the first line, the value under them, the comparison in the footer. A figure with no comparison shows no badge and no empty footer. Direction crossed with whether up is good sets the badge icon's tone: success, blocked, or grey for a flat or neutral measure. `tone` marks the value itself as warning or critical when it crosses a threshold.
+ * @words The label names the measure in sentence case: "Active Agents", "Spend". The change is signed with a true minus and its unit ("+12.4%", "−1"), the comparison names the period: "vs 16 last week", "vs August 2026". No icon beside the label.
+ * @access The trend icon is hidden and the direction is read as a word in the reader's language (`directionLabel`). Figures use tabular digits. The value is text, never only colour.
+ */
+declare function KpiCard({ label, value, delta, note, tone, render, presentation, }: KpiCardProps): React.JSX.Element;
 export { KpiCard };
-export type { KpiCardDelta, KpiCardDirection, KpiCardTone };
+export type { KpiCardDelta, KpiCardDirection, KpiCardProps, KpiCardTone };
 //# sourceMappingURL=kpi-card.d.ts.map

package/dist/components/kpi-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kpi-card.d.ts","sourceRoot":"","sources":["../../src/components/kpi-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAW3D,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtF;;;;GAIG;AAEH,KAAK,gBAAgB,GAAG,cAAc,CAAC;AACvC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,UAAU,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAQF,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,MAAM,EACN,YAAqB,EACrB,SAAS,GACV,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBA+DA;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"kpi-card.d.ts","sourceRoot":"","sources":["../../src/components/kpi-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAW3D,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtF,KAAK,gBAAgB,GAAG,cAAc,CAAC;AACvC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,UAAU,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAClC,CAAC;AAQF;;;;;;;;;;GAUG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAgB,EAChB,MAAM,EACN,YAAqB,GACtB,EAAE,YAAY,qBAyDd;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/kpi-card.js

@@ -10,10 +10,21 @@ const VALUE_TONE_CLASS = {
     warning: "text-warning-soft-foreground",
     critical: "text-destructive-soft-foreground",
 };
-function KpiCard({ label, value, delta, note, tone = "default", render, presentation = "card", className, }) {
+/**
+ * One measured figure, the way the dashboard-01 section card shows it: the label above the value, the change top
+ * right as a badge, and the named comparison in the footer (`rule/kpi-card-trend-top-right`).
+ *
+ * @family Charts
+ * @when One figure a person checks at a glance: Active Agents, Spend, Tasks done, Need attention, in an overview's row of figures.
+ * @instead A figure read over time is a `ChartCard`, and a single figure is never nested inside one. A ratio beside two money measures is a `KpiCard` next to the chart, never a second axis. A level against a cap is `Progress`.
+ * @behaviour Label left and the change badge right on the first line, the value under them, the comparison in the footer. A figure with no comparison shows no badge and no empty footer. Direction crossed with whether up is good sets the badge icon's tone: success, blocked, or grey for a flat or neutral measure. `tone` marks the value itself as warning or critical when it crosses a threshold.
+ * @words The label names the measure in sentence case: "Active Agents", "Spend". The change is signed with a true minus and its unit ("+12.4%", "−1"), the comparison names the period: "vs 16 last week", "vs August 2026". No icon beside the label.
+ * @access The trend icon is hidden and the direction is read as a word in the reader's language (`directionLabel`). Figures use tabular digits. The value is text, never only colour.
+ */
+function KpiCard({ label, value, delta, note, tone = "default", render, presentation = "card", }) {
     if (presentation === "inline") {
-        return (_jsxs("div", { className: "grid min-w-0 content-start gap-2", "data-slot": "metric-summary", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("p", { className: cn("text-2xl font-semibold tabular-nums", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), ...(delta.directionLabel ? { directionLabel: delta.directionLabel } : {}) })) : null] }), delta ? _jsx("p", { className: "text-xs text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("p", { className: "text-xs text-muted-foreground", children: note }) : null] }));
+        return (_jsxs("div", { className: "grid min-w-0 content-start gap-2", "data-slot": "metric-summary", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("p", { className: cn("text-2xl font-semibold tabular-nums", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), directionLabel: delta.directionLabel })) : null] }), delta ? _jsx("p", { className: "text-xs text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("p", { className: "text-xs text-muted-foreground", children: note }) : null] }));
     }
-    return (_jsxs(Card, { size: "sm", "data-slot": "kpi-card", "data-tone": tone, className: className, ...(render ? { render } : {}), children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { className: "line-clamp-2 min-h-10", children: label }), _jsx(CardTitle, { className: cn("text-heading-md tabular-nums group-data-[size=sm]/card:text-heading-md", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(CardAction, { "data-kpi-delta": delta.direction, children: _jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), ...(delta.directionLabel ? { directionLabel: delta.directionLabel } : {}) }) })) : null] }), delta || note ? (_jsxs(CardFooter, { className: "flex-col items-start gap-1.5 text-sm", children: [delta ? _jsx("div", { className: "text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("div", { className: "text-muted-foreground", children: note }) : null] })) : null] }));
+    return (_jsxs(Card, { size: "sm", "data-slot": "kpi-card", "data-tone": tone, ...(render ? { render } : {}), children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { className: "line-clamp-2 min-h-10", children: label }), _jsx(CardTitle, { className: cn("text-heading-md tabular-nums group-data-[size=sm]/card:text-heading-md", VALUE_TONE_CLASS[tone]), children: value }), delta ? (_jsx(CardAction, { "data-kpi-delta": delta.direction, children: _jsx(TrendBadge, { value: delta.value, direction: delta.direction, tone: trendTone(delta.direction, delta.upIsGood, delta.neutral), directionLabel: delta.directionLabel }) })) : null] }), delta || note ? (_jsxs(CardFooter, { className: "flex-col items-start gap-1.5 text-sm", children: [delta ? _jsx("div", { className: "text-muted-foreground", children: delta.comparison }) : null, note ? _jsx("div", { className: "text-muted-foreground", children: note }) : null] })) : null] }));
 }
 export { KpiCard };

package/dist/components/label-system.d.ts

@@ -1,4 +1,16 @@
 import * as React from "react";
+/**
+ * A small muted label of metadata, and its mono sibling for a command's suffix.
+ *
+ * @family Status
+ * @when A short fixed fact set beside a name in dense chrome: *Built in*, *Read only*.
+ * `CommandSuffix` holds a count or a key after a command.
+ * @instead A state is `StatusBadge`; a category is `Tag`; a plan or role is `Badge`. A bound
+ * shortcut is `Kbd`.
+ * @behaviour 20 px, 6 px corners, the muted fill, never interactive, never wraps.
+ * @words One or two words in sentence case.
+ * @access Read in place as text.
+ */
 declare function MetaLabel({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function CommandSuffix({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 export { CommandSuffix, MetaLabel };