@nadicodeai/ui 12.1.96 → 12.1.98

package/dist/components/tabs.js

@@ -6,6 +6,19 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
+/**
+ * Panels of one surface that switch in place.
+ *
+ * @family Navigation
+ * @when Sibling views of one object that switch in place inside one surface.
+ * @instead Views with their own URL are `TabsNav`. A choice that changes a value is a `RadioGroup`
+ * or `ToggleGroup`. A stable destination belongs in the `Sidebar`. A tab never opens a new scope.
+ * @behaviour One treatment among siblings, chosen through `variant`, never a page border. Arrow
+ * keys move, one tab stop. The underline fades on `confirm`, 180 ms.
+ * @words Nouns, one or two words: *Overview*, *Installations*. Italian (*Installazioni*) scrolls,
+ * never wraps or truncates.
+ * @access `tablist`, `tab`, `tabpanel` with `aria-selected`.
+ */
 function Tabs({ className, orientation = "horizontal", ...props }) {
     return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn("group/tabs flex min-w-0 gap-4 data-horizontal:flex-col", className), ...props }));
 }
@@ -30,6 +43,20 @@ function TabsTrigger({ className, ...props }) {
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("min-w-0 flex-1 text-sm outline-none", className), ...props }));
 }
+/**
+ * Sibling views of one object, each with its own URL, under the top bar.
+ *
+ * @family Navigation
+ * @when Sibling views of one object under the top bar, when each view has its own URL (an object's
+ * sections), with `TabsLink` for each.
+ * @instead Panels that switch in place are `Tabs`. A stable destination belongs in the `Sidebar`.
+ * An object's ancestry is the `Breadcrumb`.
+ * @behaviour Overflow scrolls sideways and brings the current link into view. The current link
+ * takes the underline.
+ * @words Nouns, one or two words: *Overview*, *Installations*. Italian scrolls, never wraps or
+ * truncates.
+ * @access A labelled `nav` of links with `aria-current="page"` on the current one.
+ */
 function TabsNav({ className, children, variant = "default", ...props }) {
     const navigation = React.useRef(null);
     const current = React.useRef(null);

package/dist/components/tag.d.ts

@@ -11,8 +11,18 @@ type TagProps = Omit<ComponentProps<"span">, "children"> & {
     note?: ReactNode;
 };
 /**
- * One categorical fact in a row, as a pill. A tag never carries
- * a status: that is a StatusBadge.
+ * One categorical fact in a row, as a pill.
+ *
+ * @family Status
+ * @when One categorical fact in a row: the installation, the partner, the company a record belongs
+ * to. A 24 px pill with its 12 px mark.
+ * @instead For a state use `StatusBadge`; a tag never carries one. For a removable filter use
+ * `CollectionFilters`. For a way to the thing, a link.
+ * @behaviour Static, truncates inside its width. The same category keeps the same tone across a
+ * surface and after sorting. Dashed and muted when it states an absence.
+ * @words The thing's own name. A quiet tag names the absence in two or three words (*Direct
+ * customer*); the note says whose (*Your account*).
+ * @access Text; the mark is decorative. Never focusable unless wrapped by a real link.
  */
 declare function Tag({ children, className, mark, note, quiet, tone, ...props }: TagProps): import("react").JSX.Element;
 export { Tag, type TagProps, type TagTone };

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/components/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAU/D,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,iBAAS,GAAG,CAAC,EACX,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAa,EACb,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,QAAQ,+BA4BV;AAED,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/components/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAU/D,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,iBAAS,GAAG,CAAC,EACX,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAa,EACb,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,QAAQ,+BA4BV;AAED,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,CAAC"}

package/dist/components/tag.js

@@ -8,8 +8,18 @@ const TONE_CLASS = {
     pink: "border-transparent bg-category-pink text-category-pink-foreground",
 };
 /**
- * One categorical fact in a row, as a pill. A tag never carries
- * a status: that is a StatusBadge.
+ * One categorical fact in a row, as a pill.
+ *
+ * @family Status
+ * @when One categorical fact in a row: the installation, the partner, the company a record belongs
+ * to. A 24 px pill with its 12 px mark.
+ * @instead For a state use `StatusBadge`; a tag never carries one. For a removable filter use
+ * `CollectionFilters`. For a way to the thing, a link.
+ * @behaviour Static, truncates inside its width. The same category keeps the same tone across a
+ * surface and after sorting. Dashed and muted when it states an absence.
+ * @words The thing's own name. A quiet tag names the absence in two or three words (*Direct
+ * customer*); the note says whose (*Your account*).
+ * @access Text; the mark is decorative. Never focusable unless wrapped by a real link.
  */
 function Tag({ children, className, mark, note, quiet = false, tone = "neutral", ...props }) {
     return (_jsxs("span", { className: cn("inline-flex h-6 max-w-full min-w-0 shrink-0 items-center gap-1.5 rounded-full border ps-2 pe-2.5 text-xs whitespace-nowrap", quiet ? "border-dashed border-border text-muted-foreground" : TONE_CLASS[tone], className), "data-quiet": quiet ? "" : undefined, "data-slot": "tag", ...props, children: [mark ? (_jsx("span", { className: "flex size-3 shrink-0 items-center justify-center [&>svg]:size-3", "data-slot": "tag-mark", children: mark })) : null, _jsx("span", { className: "truncate", children: children }), note ? (_jsx("span", { className: "shrink-0 text-muted-foreground", "data-slot": "tag-note", children: note })) : null] }));

package/dist/components/text-link.d.ts

@@ -1,4 +1,21 @@
 import { type VariantProps } from "class-variance-authority";
+/**
+ * The classes of a link that reads as text: `inline` inside a sentence, `plain` on its own, `quiet`
+ * for a muted way out.
+ *
+ * @family Navigation
+ * @when A link inside a sentence (`inline`, blue and underlined), a link that stands alone as text
+ * (`plain`), or a muted secondary way to somewhere such as a footer's *Learn more* (`quiet`).
+ * @instead A command is a `Button`; a destination drawn as a button is a link with
+ * `buttonVariants`. Going to a record from its row is the record's name in `RecordIdentity`.
+ * @behaviour Classes only: the caller renders the real anchor or router link. `inline` thickens its
+ * underline on hover; `plain` and `quiet` underline on hover. Paint changes ride the shared paint
+ * transition.
+ * @words The link's text names where it goes: *Open Billing*, *Read the privacy notice*; never
+ * *Click here* or a bare URL.
+ * @access A real `a` with an `href`. A link that leaves the product says so in its text or carries
+ * the arrow with a name. Focus is the base layer's 2 px outline.
+ */
 declare const textLinkVariants: (props?: ({
     kind?: "plain" | "inline" | "quiet" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/text-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-link.d.ts","sourceRoot":"","sources":["../../src/components/text-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,QAAA,MAAM,gBAAgB;;8EAYpB,CAAC;AAEH,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,CAAC"}
+{"version":3,"file":"text-link.d.ts","sourceRoot":"","sources":["../../src/components/text-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,gBAAgB;;8EAYpB,CAAC;AAEH,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/components/text-link.js

@@ -1,4 +1,21 @@
 import { cva } from "class-variance-authority";
+/**
+ * The classes of a link that reads as text: `inline` inside a sentence, `plain` on its own, `quiet`
+ * for a muted way out.
+ *
+ * @family Navigation
+ * @when A link inside a sentence (`inline`, blue and underlined), a link that stands alone as text
+ * (`plain`), or a muted secondary way to somewhere such as a footer's *Learn more* (`quiet`).
+ * @instead A command is a `Button`; a destination drawn as a button is a link with
+ * `buttonVariants`. Going to a record from its row is the record's name in `RecordIdentity`.
+ * @behaviour Classes only: the caller renders the real anchor or router link. `inline` thickens its
+ * underline on hover; `plain` and `quiet` underline on hover. Paint changes ride the shared paint
+ * transition.
+ * @words The link's text names where it goes: *Open Billing*, *Read the privacy notice*; never
+ * *Click here* or a bare URL.
+ * @access A real `a` with an `href`. A link that leaves the product says so in its text or carries
+ * the arrow with a name. Focus is the base layer's 2 px outline.
+ */
 const textLinkVariants = cva("nc-transition-paint rounded-sm underline-offset-4", {
     variants: {
         kind: {

package/dist/components/textarea.d.ts

@@ -1,4 +1,18 @@
 import * as React from "react";
+/**
+ * Several lines of free text that grow with their content.
+ *
+ * @family Inputs
+ * @when Several lines of free text: an Agent's instructions, a description, notes.
+ * @instead One line is `Input`. Code or a value to copy is `CodeBlock`, read-only.
+ * @behaviour At least 64 px, then it grows with its content (`field-sizing: content`). The same
+ * edge, focus, invalid and disabled as `Input`. Whitespace is kept exactly; nothing trims it. A
+ * character count shows only when a real limit exists.
+ * @words The label names the content (*Instructions*); the help says who reads it and when. The
+ * placeholder is a short example, not a paragraph.
+ * @access A visible label tied by `id`; help and error through `aria-describedby`. In a dialog, the
+ * footer's Save stays reachable while the box grows.
+ */
 declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;GAaG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/textarea.js

@@ -1,5 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+/**
+ * Several lines of free text that grow with their content.
+ *
+ * @family Inputs
+ * @when Several lines of free text: an Agent's instructions, a description, notes.
+ * @instead One line is `Input`. Code or a value to copy is `CodeBlock`, read-only.
+ * @behaviour At least 64 px, then it grows with its content (`field-sizing: content`). The same
+ * edge, focus, invalid and disabled as `Input`. Whitespace is kept exactly; nothing trims it. A
+ * character count shows only when a real limit exists.
+ * @words The label names the content (*Instructions*); the help says who reads it and when. The
+ * placeholder is a short example, not a paragraph.
+ * @access A visible label tied by `id`; help and error through `aria-describedby`. In a dialog, the
+ * footer's Save stays reachable while the box grows.
+ */
 function Textarea({ className, ...props }) {
     return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-sm border border-input bg-background px-control-padding-inline py-2 text-base transition-colors placeholder:text-placeholder disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive md:text-sm", className), ...props }));
 }

package/dist/components/theme-mode-switcher.d.ts

@@ -19,8 +19,29 @@ export type ThemeModeSwitcherProps = Omit<React.ComponentProps<typeof RadioGroup
     renderItem?: (option: ThemeModeOption) => React.ReactNode;
     value: ThemeMode;
 };
+/**
+ * The three appearances side by side, each with its glyph and its name.
+ *
+ * @family Choices
+ * @when An Appearance setting on a settings page, where the choice has room to show its names.
+ * @instead Inside a menu, the same choice is ThemeModeMenu; a choice that is not the appearance is a RadioGroup or a ToggleGroup.
+ * @behaviour Exclusive: one mode is selected, and choosing one applies it at once with no Save. The order is System, Light, Dark everywhere.
+ * @words The setting's name, then each mode's name from the product's catalogue: "System", "Light", "Dark".
+ * @access A radio group named by `aria-label`; each mode is a radio with its name, moved through with the arrow keys.
+ */
 declare function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }: ThemeModeSwitcherProps): React.JSX.Element;
 export { ThemeModeSwitcher };
+/**
+ * The appearance as one row of a menu: its name and the current mode's glyph
+ * leading, the three modes as compact choices at its end.
+ *
+ * @family Menus
+ * @when The account menu's Theme row, in the Portal and in Nadia.
+ * @instead On a settings page the choice is ThemeModeSwitcher, with its names shown.
+ * @behaviour Choosing a mode applies it at once and keeps the menu open, so the result shows without reopening it. The order is System, Light, Dark.
+ * @words The row's name ("Theme") and each mode's name, read as the choice's accessible name and tooltip.
+ * @access A radio group inside the menu, named by the row's label; each mode is a menu radio item with its name.
+ */
 export declare function ThemeModeMenu({ label, labels, value, onValueChange, disabled, }: {
     label: string;
     labels: ThemeModeOptionLabels;

package/dist/components/theme-mode-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA6CxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAkBA"}
+{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF;;;;;;;;;GASG;AACH,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA6CxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAoBA"}

package/dist/components/theme-mode-switcher.js

@@ -12,6 +12,16 @@ const themeModeIcons = {
     dark: MoonIcon,
     system: MonitorIcon,
 };
+/**
+ * The three appearances side by side, each with its glyph and its name.
+ *
+ * @family Choices
+ * @when An Appearance setting on a settings page, where the choice has room to show its names.
+ * @instead Inside a menu, the same choice is ThemeModeMenu; a choice that is not the appearance is a RadioGroup or a ToggleGroup.
+ * @behaviour Exclusive: one mode is selected, and choosing one applies it at once with no Save. The order is System, Light, Dark everywhere.
+ * @words The setting's name, then each mode's name from the product's catalogue: "System", "Light", "Dark".
+ * @access A radio group named by `aria-label`; each mode is a radio with its name, moved through with the arrow keys.
+ */
 function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }) {
     return (_jsx(RadioGroup, { "aria-label": ariaLabel, className: cn("max-w-full grid-cols-3", className), disabled: disabled, onValueChange: (nextMode) => {
             if (isThemeMode(nextMode)) {
@@ -25,8 +35,20 @@ function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false
         }) }));
 }
 export { ThemeModeSwitcher };
+/**
+ * The appearance as one row of a menu: its name and the current mode's glyph
+ * leading, the three modes as compact choices at its end.
+ *
+ * @family Menus
+ * @when The account menu's Theme row, in the Portal and in Nadia.
+ * @instead On a settings page the choice is ThemeModeSwitcher, with its names shown.
+ * @behaviour Choosing a mode applies it at once and keeps the menu open, so the result shows without reopening it. The order is System, Light, Dark.
+ * @words The row's name ("Theme") and each mode's name, read as the choice's accessible name and tooltip.
+ * @access A radio group inside the menu, named by the row's label; each mode is a menu radio item with its name.
+ */
 export function ThemeModeMenu({ label, labels, value, onValueChange, disabled, }) {
-    return (_jsx(MenuChoiceRow, { "data-slot": "theme-mode-menu", label: label, disabled: disabled, value: value, onValueChange: onValueChange, options: ["system", "light", "dark"].map((mode) => {
+    const CurrentModeIcon = themeModeIcons[value];
+    return (_jsx(MenuChoiceRow, { "data-slot": "theme-mode-menu", icon: _jsx(CurrentModeIcon, { "aria-hidden": "true" }), label: label, disabled: disabled, value: value, onValueChange: onValueChange, options: themeModes.map((mode) => {
             const Icon = themeModeIcons[mode];
             return {
                 value: mode,

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

@@ -3,6 +3,19 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
 import { type VariantProps } from "class-variance-authority";
 import { toggleVariants } from "./toggle.js";
+/**
+ * Pressed buttons that belong together.
+ *
+ * @family Choices
+ * @when Pressed buttons that belong together: a list or grid view, which details a chat shows.
+ * @instead A segmented control that sets a value, such as the theme or a period, is a `RadioGroup`
+ * drawn with the toggle classes, as `ThemeModeSwitcher` does. Panels of one object are `Tabs`.
+ * @behaviour Spacing 0 joins the members into one outline with one seam; spacing 2 keeps them 8 px
+ * apart. Single or multiple pressed. Arrow keys move between members; Space presses.
+ * @words Text members are short words of equal weight. Icon members always carry a name: *List*,
+ * *Grid*.
+ * @access `role="group"` with a name; each member a button with `aria-pressed`.
+ */
 declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, ...props }: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
     spacing?: number;
     orientation?: "horizontal" | "vertical";

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,GAC3B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,qBA2BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsB7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD;;;;;;;;;;;;GAYG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,GAC3B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,qBA2BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsB7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/toggle-group.js

@@ -11,6 +11,19 @@ const ToggleGroupContext = React.createContext({
     spacing: 2,
     orientation: "horizontal",
 });
+/**
+ * Pressed buttons that belong together.
+ *
+ * @family Choices
+ * @when Pressed buttons that belong together: a list or grid view, which details a chat shows.
+ * @instead A segmented control that sets a value, such as the theme or a period, is a `RadioGroup`
+ * drawn with the toggle classes, as `ThemeModeSwitcher` does. Panels of one object are `Tabs`.
+ * @behaviour Spacing 0 joins the members into one outline with one seam; spacing 2 keeps them 8 px
+ * apart. Single or multiple pressed. Arrow keys move between members; Space presses.
+ * @words Text members are short words of equal weight. Icon members always carry a name: *List*,
+ * *Grid*.
+ * @access `role="group"` with a name; each member a button with `aria-pressed`.
+ */
 function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", style, children, ...props }) {
     return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, orientation: orientation, 
         // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.

package/dist/components/toggle.d.ts

@@ -4,6 +4,20 @@ declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A button that stays pressed.
+ *
+ * @family Choices
+ * @when A button that stays pressed, where pressing is the action: pin a chat, mute a thread, show
+ * hidden rows in a toolbar.
+ * @instead A setting saved with its section is a `Switch`. Choosing one value of several is a
+ * `RadioGroup`, drawn segmented when it is short.
+ * @behaviour Space or Enter flips `aria-pressed`. Pressed takes the accent fill and weight 600; the
+ * label does not change. Hover is the muted fill. Disabled is 50%.
+ * @words The label is the action and stays the same in both states: *Pin*, never *Pinned* or
+ * *Unpin*.
+ * @access A `button` with `aria-pressed`. An icon-only toggle names what it does: *Pin chat*.
+ */
 declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/toggle.js

@@ -20,6 +20,20 @@ const toggleVariants = cva("group/toggle inline-flex min-h-touch-target min-w-to
         size: "default",
     },
 });
+/**
+ * A button that stays pressed.
+ *
+ * @family Choices
+ * @when A button that stays pressed, where pressing is the action: pin a chat, mute a thread, show
+ * hidden rows in a toolbar.
+ * @instead A setting saved with its section is a `Switch`. Choosing one value of several is a
+ * `RadioGroup`, drawn segmented when it is short.
+ * @behaviour Space or Enter flips `aria-pressed`. Pressed takes the accent fill and weight 600; the
+ * label does not change. Hover is the muted fill. Disabled is 50%.
+ * @words The label is the action and stays the same in both states: *Pin*, never *Pinned* or
+ * *Unpin*.
+ * @access A `button` with `aria-pressed`. An icon-only toggle names what it does: *Pin chat*.
+ */
 function Toggle({ className, variant = "default", size = "default", ...props }) {
     return (_jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
 }

package/dist/components/tool-icon.d.ts

@@ -1,8 +1,18 @@
-import type * as React from "react";
-export interface ToolIconProps extends Omit<React.ComponentProps<"svg">, "name"> {
+import { type LucideProps } from "lucide-react";
+export interface ToolIconProps extends Omit<LucideProps, "name" | "ref"> {
+    /** The tool's kind as the conversation names it; an unknown one draws the question mark. */
     name: string;
-    size?: number | string;
 }
-declare function ToolIcon({ className, name, size, style, ...props }: ToolIconProps): React.JSX.Element;
+/**
+ * The mark of a tool an Agent used, at the head of its row in the conversation.
+ *
+ * @family Other
+ * @when A tool call's row in an Agent's conversation: running a command, reading or editing a file, searching, browsing.
+ * @instead A file in a list takes its `FileTypeIcon`; an app takes its brand mark in `AppMark`; an Agent is her `AgentOrb`.
+ * @behaviour Lucide's glyph for the tool's kind, 1.5 px line in the text colour, 14 px unless `size` says otherwise. An unknown kind draws the question mark, so a new tool still has a mark.
+ * @words None. The tool's title stands beside it.
+ * @access Hidden: the row's title is the name.
+ */
+declare function ToolIcon({ className, name, size, ...props }: ToolIconProps): import("react").JSX.Element;
 export { ToolIcon };
 //# sourceMappingURL=tool-icon.d.ts.map

package/dist/components/tool-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-icon.d.ts","sourceRoot":"","sources":["../../src/components/tool-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAgDpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AACD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAiB,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAevF;AACD,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"tool-icon.d.ts","sourceRoot":"","sources":["../../src/components/tool-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,WAAW,EAKjB,MAAM,cAAc,CAAC;AAmBtB,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC;IACtE,4FAA4F;IAC5F,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAahF;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/tool-icon.js

@@ -1,47 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleQuestionMark, Clock, Eye, File as FileIcon, FileDiff, FileImage, Files, Globe, Pencil, Search, SquareTerminal, Wrench, } from "lucide-react";
 import { cn } from "../lib/utils.js";
-const FILE_PATH = "M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM152,88V44l44,44Z";
-const QUESTION_PATH = "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z";
-const TOOL_ICON_PATHS = new Map([
-    [
-        "diff",
-        "M118.18,213.08A8,8,0,0,1,112,216H64a8,8,0,0,1,0-16H92.69L55,162.34a23.85,23.85,0,0,1-7-17V95a32,32,0,1,1,16,0v50.38A8,8,0,0,0,66.34,151L104,188.69V160a8,8,0,0,1,16,0v48a8,8,0,0,1-1.82,5.08ZM208,161V110.63a23.85,23.85,0,0,0-7-17L163.31,56H192a8,8,0,0,0,0-16H144a8,8,0,0,0-8,8V96a8,8,0,0,0,16,0V67.31L189.66,105a8,8,0,0,1,2.34,5.66V161a32,32,0,1,0,16,0Z",
-    ],
-    [
-        "edit",
-        "M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM192,108.68,147.31,64l24-24L216,84.68Z",
-    ],
-    [
-        "eye",
-        "M247.31,124.76C246.96,123.97,213,48,128,48S9,123.97,8.69,124.76a8,8,0,0,0,0,6.5C9,132.05,43,208,128,208s119-75.95,119.31-76.74a8,8,0,0,0,0-6.5ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z",
-    ],
-    ["file", FILE_PATH],
-    ["file-media", FILE_PATH],
-    ["files", FILE_PATH],
-    [
-        "globe",
-        "M128,24a104,104,0,1,0,104,104A104.12,104.12,0,0,0,128,24Zm0,19c10,11,19,27,26,45h-52c7-18,16-34,26-45Zm0,170c-10-11-19-27-26-45h52c-7,18-16,34-26,45Zm-30-61a141,141,0,0,1,0-48h60a141,141,0,0,1,0,48Z",
-    ],
-    ["question", QUESTION_PATH],
-    [
-        "search",
-        "M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z",
-    ],
-    [
-        "terminal",
-        "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm-91,94.25-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32a8,8,0,0,1,0,12.5ZM176,168H136a8,8,0,0,1,0-16h40a8,8,0,0,1,0,16Z",
-    ],
-    [
-        "tools",
-        "M232,96a72,72,0,0,1-100.94,66L79,222.22a32,32,0,0,1-45.65-44.84L94,124.94a72.07,72.07,0,0,1,83.54-98.78,8,8,0,0,1,3.93,13.19L144,80l5.66,26.35L176,112l40.65-37.52a8,8,0,0,1,13.19,3.93A72.6,72.6,0,0,1,232,96Z",
-    ],
-    [
-        "watch",
-        "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm56,112H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48a8,8,0,0,1,0,16Z",
-    ],
+const TOOL_ICONS = Object.fromEntries([
+    ["diff", FileDiff],
+    ["edit", Pencil],
+    ["eye", Eye],
+    ["file", FileIcon],
+    ["file-media", FileImage],
+    ["files", Files],
+    ["globe", Globe],
+    ["question", CircleQuestionMark],
+    ["search", Search],
+    ["terminal", SquareTerminal],
+    ["tools", Wrench],
+    ["watch", Clock],
 ]);
-function ToolIcon({ className, name, size = "0.875rem", style, ...props }) {
-    const path = TOOL_ICON_PATHS.get(name) ?? QUESTION_PATH;
-    return (_jsx("svg", { "aria-hidden": "true", className: cn("shrink-0", className), "data-slot": "tool-icon", fill: "currentColor", style: { height: size, width: size, ...style }, viewBox: "0 0 256 256", ...props, children: _jsx("path", { d: path }) }));
+/**
+ * The mark of a tool an Agent used, at the head of its row in the conversation.
+ *
+ * @family Other
+ * @when A tool call's row in an Agent's conversation: running a command, reading or editing a file, searching, browsing.
+ * @instead A file in a list takes its `FileTypeIcon`; an app takes its brand mark in `AppMark`; an Agent is her `AgentOrb`.
+ * @behaviour Lucide's glyph for the tool's kind, 1.5 px line in the text colour, 14 px unless `size` says otherwise. An unknown kind draws the question mark, so a new tool still has a mark.
+ * @words None. The tool's title stands beside it.
+ * @access Hidden: the row's title is the name.
+ */
+function ToolIcon({ className, name, size = "0.875rem", ...props }) {
+    const Icon = TOOL_ICONS[name] ?? CircleQuestionMark;
+    return (_jsx(Icon, { "aria-hidden": "true", className: cn("shrink-0", className), "data-slot": "tool-icon", "data-tool": name, size: size, strokeWidth: 1.5, ...props }));
 }
 export { ToolIcon };

package/dist/components/tooltip.d.ts

@@ -1,5 +1,20 @@
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
+/**
+ * A short, optional fact about its trigger.
+ *
+ * @family Feedback
+ * @when A short, optional fact the visible label cannot hold: why a value looks as it does, or an
+ * icon-only button's name, a shortcut only when one is bound.
+ * @instead For a preview with several facts use `HoverCard`. Help with a link uses a popover. A
+ * disabled command's reason is written under it, never only here.
+ * @behaviour Opens on hover and focus with no delay, above by default, 4 px off. Escape closes it.
+ * Never interactive; never the only home of a warning, a price or a reason.
+ * @words One phrase, sentence case, no full stop: *Resets on 1 November*. Never repeats the visible
+ * label (*Save* on Save).
+ * @access The trigger keeps its own name; the tooltip describes it. An icon-only button carries
+ * `aria-label` whether or not the tooltip is open.
+ */
 declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
 declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
 declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,eAAe,CAAC,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAEhF;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,+BAyBzF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKrE,iBAAS,eAAe,CAAC,EAAE,KAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAEhF;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAEnE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,+BAyBzF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/tooltip.js

@@ -5,6 +5,21 @@ import { anchoredOverlayMotion } from "../lib/motion.js";
 function TooltipProvider({ delay = 0, ...props }) {
     return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
 }
+/**
+ * A short, optional fact about its trigger.
+ *
+ * @family Feedback
+ * @when A short, optional fact the visible label cannot hold: why a value looks as it does, or an
+ * icon-only button's name, a shortcut only when one is bound.
+ * @instead For a preview with several facts use `HoverCard`. Help with a link uses a popover. A
+ * disabled command's reason is written under it, never only here.
+ * @behaviour Opens on hover and focus with no delay, above by default, 4 px off. Escape closes it.
+ * Never interactive; never the only home of a warning, a price or a reason.
+ * @words One phrase, sentence case, no full stop: *Resets on 1 November*. Never repeats the visible
+ * label (*Save* on Save).
+ * @access The trigger keeps its own name; the tooltip describes it. An icon-only button carries
+ * `aria-label` whether or not the tooltip is open.
+ */
 function Tooltip({ ...props }) {
     return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }

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

@@ -9,13 +9,28 @@ type TrendDirection = "up" | "down" | "flat";
 type TrendTone = "positive" | "negative" | "neutral";
 /** Direction crossed with whether up is good here. A flat or neutral change takes no tone. */
 declare function trendTone(direction: TrendDirection, upIsGood?: boolean, neutral?: boolean): TrendTone;
+/**
+ * A change against a stated period, as an outline badge with its direction.
+ *
+ * @family Charts
+ * @when A change against a stated period: on a `KpiCard` top right, in a chart's summary, on a
+ * Trending row. A figure with no comparison shows no badge.
+ * @instead A level that crosses a threshold is the card's own tone; crossing it is a notification.
+ * Status is a `StatusBadge`, never a delta.
+ * @behaviour Direction crossed with whether up is good (`trendTone`) sets the icon's tone: success
+ * green or blocked red; flat or a neutral measure stays grey. The badge text stays ink.
+ * @words Signed value with a true minus and its unit (+12.4%, −€360), then *vs previous 30 days* or
+ * *vs August 2026*. Never bare signed text, colour alone or a triangle glyph.
+ * @access The icon is hidden and the direction is read as a word (*up*, *down*, *unchanged*) in the
+ * reader's language; tabular figures keep the digits aligned.
+ */
 declare function TrendBadge({ value, direction, tone, directionLabel, }: {
     /** The formatted change, e.g. "+12.5%". */
     value: React.ReactNode;
     direction: TrendDirection;
     tone: TrendTone;
     /** The direction in the reader's language, because an arrow alone is not a reading. */
-    directionLabel?: string;
+    directionLabel: string;
 }): React.JSX.Element;
 export { TrendBadge, trendTone };
 export type { TrendDirection, TrendTone };

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

@@ -1 +1 @@
-{"version":3,"file":"trend-badge.d.ts","sourceRoot":"","sources":["../../src/components/trend-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC;;;;;GAKG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAqBrD,8FAA8F;AAC9F,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,EAAE,OAAO,UAAQ,GAAG,SAAS,CAGzF;AAED,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,cAAc,GACf,EAAE;IACD,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,qBAeA;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AACjC,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"trend-badge.d.ts","sourceRoot":"","sources":["../../src/components/trend-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC;;;;;GAKG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAcrD,8FAA8F;AAC9F,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,EAAE,OAAO,UAAQ,GAAG,SAAS,CAGzF;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,cAAc,GACf,EAAE;IACD,2CAA2C;IAC3C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,uFAAuF;IACvF,cAAc,EAAE,MAAM,CAAC;CACxB,qBAeA;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AACjC,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/trend-badge.js

@@ -6,12 +6,6 @@ const TREND_ICONS = {
     down: TrendingDownIcon,
     flat: MinusIcon,
 };
-/** The fallback reading for a caller with no dictionary; a localized caller passes `directionLabel`. */
-const TREND_DIRECTION_TEXT = {
-    up: "up",
-    down: "down",
-    flat: "unchanged",
-};
 const TREND_TONE_CLASS = {
     positive: "text-(--nc-state-complete)",
     negative: "text-(--nc-state-blocked)",
@@ -23,8 +17,23 @@ function trendTone(direction, upIsGood = true, neutral = false) {
         return "neutral";
     return (direction === "up") === upIsGood ? "positive" : "negative";
 }
+/**
+ * A change against a stated period, as an outline badge with its direction.
+ *
+ * @family Charts
+ * @when A change against a stated period: on a `KpiCard` top right, in a chart's summary, on a
+ * Trending row. A figure with no comparison shows no badge.
+ * @instead A level that crosses a threshold is the card's own tone; crossing it is a notification.
+ * Status is a `StatusBadge`, never a delta.
+ * @behaviour Direction crossed with whether up is good (`trendTone`) sets the icon's tone: success
+ * green or blocked red; flat or a neutral measure stays grey. The badge text stays ink.
+ * @words Signed value with a true minus and its unit (+12.4%, −€360), then *vs previous 30 days* or
+ * *vs August 2026*. Never bare signed text, colour alone or a triangle glyph.
+ * @access The icon is hidden and the direction is read as a word (*up*, *down*, *unchanged*) in the
+ * reader's language; tabular figures keep the digits aligned.
+ */
 function TrendBadge({ value, direction, tone, directionLabel, }) {
     const Icon = TREND_ICONS[direction];
-    return (_jsxs(Badge, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: "tabular-nums", children: [_jsx(Icon, { "aria-hidden": "true", className: TREND_TONE_CLASS[tone] }), _jsx("span", { className: "sr-only", children: directionLabel ?? TREND_DIRECTION_TEXT[direction] }), value] }));
+    return (_jsxs(Badge, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: "tabular-nums", children: [_jsx(Icon, { "aria-hidden": "true", className: TREND_TONE_CLASS[tone] }), _jsx("span", { className: "sr-only", children: directionLabel }), value] }));
 }
 export { TrendBadge, trendTone };