@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/internal/menu-surface.js

@@ -1,5 +1,12 @@
 /**
- * A dropdown and a context menu carry the same commands over the same dense rows, so both take this solid floating
- * surface; DESIGN.md ("Elevation & Depth") keeps glass for chrome over content that scrolls or moves under it.
+ * A dropdown and a context menu carry the same commands, so both take this floating glass surface (DESIGN.md
+ * "Elevation & Depth"): the content under an open menu stays in view, saturated, behind its rows.
  */
-export const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(14rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 bg-popover p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
+export const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(12.5rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass p-1.5 text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
+/**
+ * Every row of a menu, whatever it holds, so the parts of one menu never differ in height. A row that can be
+ * chosen shows the pointer cursor; one that cannot turns its text muted, never dimmed, keeps the default cursor
+ * and takes no highlight from the keyboard. The highlight is the row's fill alone: no text inside the row changes
+ * colour with it.
+ */
+export const menuRow = "relative flex min-h-touch-target cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-1 group-data-[density=comfortable]/menu:gap-2 group-data-[density=comfortable]/menu:px-2 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent data-inset:pl-7 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:focus:bg-transparent [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";

package/dist/internal/notice.d.ts

@@ -0,0 +1,25 @@
+import { type LucideIcon } from "lucide-react";
+import { type PageCommand } from "../components/page-actions.js";
+export type NoticeTone = "neutral" | "info" | "warning" | "destructive";
+/** The hue of a notice's edge: a light step of its text colour, neutral for the plain tone. */
+export declare const NOTICE_EDGE: Record<NoticeTone, string>;
+/** The mark a tone draws: Info for neutral and info, the triangle for warning and destructive. */
+export declare function NoticeMark({ icon, tone }: {
+    icon?: LucideIcon | undefined;
+    tone: NoticeTone;
+}): import("react").JSX.Element;
+/**
+ * A notice's one fix, drawn as an underlined 14 px link with no padding. In a `strip` it takes the
+ * darkest step of the strip's own hue (neutral takes the foreground) and returns to the strip's
+ * text on hover; `inline` it follows the sentence in the sentence's own colour.
+ */
+export declare function NoticeLink({ className, command, ...place }: {
+    className?: string;
+    command: PageCommand;
+} & ({
+    place: "inline";
+} | {
+    place: "strip";
+    tone: NoticeTone;
+})): import("react").JSX.Element;
+//# sourceMappingURL=notice.d.ts.map

package/dist/internal/notice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.d.ts","sourceRoot":"","sources":["../../src/internal/notice.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAiB,MAAM,cAAc,CAAC;AAEpE,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAGhF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAExE,+FAA+F;AAC/F,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKlD,CAAC;AAEF,kGAAkG;AAClG,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,+BAG7F;AAgBD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC;CACtB,GAAG,CAAC;IAAE,KAAK,EAAE,QAAQ,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,+BAc/D"}

package/dist/internal/notice.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Info, TriangleAlert } from "lucide-react";
+import { PageCommandButton } from "../components/page-actions.js";
+import { cn } from "../lib/utils.js";
+/** The hue of a notice's edge: a light step of its text colour, neutral for the plain tone. */
+export const NOTICE_EDGE = {
+    neutral: "border-border",
+    info: "border-info-soft-foreground/25",
+    warning: "border-warning-soft-foreground/25",
+    destructive: "border-destructive-soft-foreground/25",
+};
+/** The mark a tone draws: Info for neutral and info, the triangle for warning and destructive. */
+export function NoticeMark({ icon, tone }) {
+    const Mark = icon ?? (tone === "warning" || tone === "destructive" ? TriangleAlert : Info);
+    return _jsx(Mark, { "aria-hidden": "true" });
+}
+const LINK_LOOK = "[&_[data-slot=button]]:gap-0.5 [&_[data-slot=button]]:px-0! [&_[data-slot=button]]:text-body-sm [&_[data-slot=button]]:underline [&_[data-slot=button]_svg]:size-4!";
+const STRIP_LINK = "[&_[data-slot=button]]:h-6 [&_[data-slot=button]]:hover:text-inherit";
+const STRIP_LINK_TONE = {
+    neutral: "[&_[data-slot=button]]:text-foreground",
+    info: "[&_[data-slot=button]]:text-(--nc-cobalto-1000)",
+    warning: "[&_[data-slot=button]]:text-(--nc-giallo-1000)",
+    destructive: "[&_[data-slot=button]]:text-(--nc-rosso-1000)",
+};
+const INLINE_LINK = "align-bottom [&_[data-slot=button]]:h-5 [&_[data-slot=button]]:text-current";
+/**
+ * A notice's one fix, drawn as an underlined 14 px link with no padding. In a `strip` it takes the
+ * darkest step of the strip's own hue (neutral takes the foreground) and returns to the strip's
+ * text on hover; `inline` it follows the sentence in the sentence's own colour.
+ */
+export function NoticeLink({ className, command, ...place }) {
+    return (_jsx("span", { className: cn("inline-flex", LINK_LOOK, place.place === "strip" ? [STRIP_LINK, STRIP_LINK_TONE[place.tone]] : INLINE_LINK, className), "data-notice-action": true, children: _jsx(PageCommandButton, { command: command, size: "xs", variant: "link" }) }));
+}

package/dist/internal/overlay-stem.d.ts

@@ -0,0 +1,5 @@
+export declare const overlayStem = "z-50 flex h-1.5 w-3.5 data-[side=bottom]:bottom-full data-[side=bottom]:rotate-180 data-[side=inline-end]:top-1/2! data-[side=inline-end]:left-full data-[side=inline-end]:-translate-x-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-end]:-rotate-90 data-[side=inline-start]:top-1/2! data-[side=inline-start]:right-full data-[side=inline-start]:translate-x-1 data-[side=inline-start]:-translate-y-1/2 data-[side=inline-start]:rotate-90 data-[side=left]:top-1/2! data-[side=left]:left-full data-[side=left]:-translate-x-1 data-[side=left]:-translate-y-1/2 data-[side=left]:-rotate-90 data-[side=right]:top-1/2! data-[side=right]:right-full data-[side=right]:translate-x-1 data-[side=right]:-translate-y-1/2 data-[side=right]:rotate-90 data-[side=top]:top-full";
+export declare function OverlayStemShape({ outlined }: {
+    outlined?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=overlay-stem.d.ts.map

package/dist/internal/overlay-stem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-stem.d.ts","sourceRoot":"","sources":["../../src/internal/overlay-stem.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,qwBAC4uB,CAAC;AAOrwB,wBAAgB,gBAAgB,CAAC,EAAE,QAAgB,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,+BAO5E"}

package/dist/internal/overlay-stem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const overlayStem = "z-50 flex h-1.5 w-3.5 data-[side=bottom]:bottom-full data-[side=bottom]:rotate-180 data-[side=inline-end]:top-1/2! data-[side=inline-end]:left-full data-[side=inline-end]:-translate-x-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-end]:-rotate-90 data-[side=inline-start]:top-1/2! data-[side=inline-start]:right-full data-[side=inline-start]:translate-x-1 data-[side=inline-start]:-translate-y-1/2 data-[side=inline-start]:rotate-90 data-[side=left]:top-1/2! data-[side=left]:left-full data-[side=left]:-translate-x-1 data-[side=left]:-translate-y-1/2 data-[side=left]:-rotate-90 data-[side=right]:top-1/2! data-[side=right]:right-full data-[side=right]:translate-x-1 data-[side=right]:-translate-y-1/2 data-[side=right]:rotate-90 data-[side=top]:top-full";
+const STEM_SHAPE = "M13.8284 0H0.17157C0.702003 0 1.21071 0.210714 1.58578 0.585787L5.58578 4.58579C6.36683 5.36684 7.63316 5.36683 8.41421 4.58579L12.4142 0.585786C12.7893 0.210714 13.298 0 13.8284 0Z";
+const STEM_EDGE = "M0.17157 0C0.702003 0 1.21071 0.210714 1.58578 0.585787L5.58578 4.58579C6.36683 5.36684 7.63316 5.36683 8.41421 4.58579L12.4142 0.585786C12.7893 0.210714 13.298 0 13.8284 0";
+export function OverlayStemShape({ outlined = false }) {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "overflow-visible", height: "6", viewBox: "0 0 14 6", width: "14", children: [_jsx("path", { className: "fill-popover", d: STEM_SHAPE }), outlined ? _jsx("path", { className: "stroke-border", d: STEM_EDGE, fill: "none" }) : null] }));
+}

package/dist/internal/phone-sheet.d.ts

@@ -0,0 +1,4 @@
+export type PhoneLayout = "sheet" | "centred";
+/** A centred modal popup docked to the bottom edge, full width, under 640 px. */
+export declare const phoneSheetLayout = "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none";
+//# sourceMappingURL=phone-sheet.d.ts.map

package/dist/internal/phone-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-sheet.d.ts","sourceRoot":"","sources":["../../src/internal/phone-sheet.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9C,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,oIACsG,CAAC"}

package/dist/internal/phone-sheet.js

@@ -0,0 +1,2 @@
+/** A centred modal popup docked to the bottom edge, full width, under 640 px. */
+export const phoneSheetLayout = "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none";

package/dist/internal/present-content.d.ts

@@ -0,0 +1,3 @@
+/** Content that exists: not `null`, `undefined` or a boolean, so a required slot cannot be filled with nothing. */
+export type PresentContent = Exclude<React.ReactNode, boolean | null | undefined>;
+//# sourceMappingURL=present-content.d.ts.map

package/dist/internal/present-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"present-content.d.ts","sourceRoot":"","sources":["../../src/internal/present-content.ts"],"names":[],"mappings":"AAAA,mHAAmH;AACnH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC"}

package/dist/internal/present-content.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/record-menu-items.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { MenuCommand, RecordMenu } from "../components/action-menu.js";
-import type { PageCommandAction } from "../components/page-actions.js";
+import type { PageCommand, PageCommandAction } from "../components/page-actions.js";
 export declare function menuItemAction(action: PageCommandAction): {
     render: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     nativeButton: boolean;
@@ -10,10 +10,11 @@ export declare function menuItemAction(action: PageCommandAction): {
     render?: undefined;
     nativeButton?: undefined;
 };
-export declare function MenuCommandRow({ command, value }: {
+export declare function MenuCommandRow({ command, iconEnd, value, }: {
     command: MenuCommand;
+    iconEnd?: boolean;
     value?: ReactNode;
 }): import("react").JSX.Element;
-export declare function soleMenuButton(commands: readonly MenuCommand[]): MenuCommand | undefined;
+export declare function soleMenuButton(commands: readonly MenuCommand[]): PageCommand | undefined;
 export declare function RecordMenuItems({ record, commands }: Omit<RecordMenu, "label">): import("react").JSX.Element;
 //# sourceMappingURL=record-menu-items.d.ts.map

package/dist/internal/record-menu-items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-menu-items.d.ts","sourceRoot":"","sources":["../../src/internal/record-menu-items.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB;;;;;;;;EAIvD;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,+BAqB7F;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,GAAG,WAAW,GAAG,SAAS,CAGxF;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,+BAe9E"}
+{"version":3,"file":"record-menu-items.d.ts","sourceRoot":"","sources":["../../src/internal/record-menu-items.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQxE,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEhF,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB;;;;;;;;EAMvD;AAYD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,OAAe,EACf,KAAK,GACN,EAAE;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,+BAuBA;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,GAAG,WAAW,GAAG,SAAS,CAKxF;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,+BAe9E"}

package/dist/internal/record-menu-items.js

@@ -2,16 +2,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropdownMenuCommand, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, } from "../components/dropdown-menu.js";
 export function menuItemAction(action) {
-    return action.render
-        ? { render: action.render, nativeButton: action.render.type === "button" }
-        : { onClick: action.onClick };
+    if (action.link)
+        return { render: action.link, nativeButton: false };
+    if (action.render) {
+        return { render: action.render, nativeButton: action.render.type === "button" };
+    }
+    return { onClick: action.onClick };
 }
-export function MenuCommandRow({ command, value }) {
-    return (_jsx(DropdownMenuCommand, { "aria-label": command.accessibleName, disabled: command.disabled, icon: command.icon, detail: command.detail, reason: command.reason, variant: command.destructive ? "destructive" : "default", ...menuItemAction(command), children: value === undefined ? (command.label) : (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1", children: command.label }), " ", _jsx(DropdownMenuShortcut, { children: value })] })) }));
+function commandAction(command) {
+    return command.link ? { link: command.link } : menuItemAction(command);
+}
+function commandState(command) {
+    return command.locked
+        ? { locked: true, reason: command.reason }
+        : { disabledReason: command.disabledReason };
+}
+export function MenuCommandRow({ command, iconEnd = false, value, }) {
+    return (_jsx(DropdownMenuCommand, { "aria-label": command.accessibleName, icon: command.icon, iconEnd: iconEnd, detail: command.detail, variant: command.destructive ? "destructive" : "default", ...commandState(command), loading: command.pending === true, loadingLabel: command.pendingLabel ?? command.label, ...commandAction(command), children: value === undefined ? (command.label) : (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1", children: command.label }), " ", _jsx(DropdownMenuShortcut, { children: value })] })) }));
 }
 export function soleMenuButton(commands) {
     const [only] = commands;
-    return commands.length === 1 && only && !only.destructive ? only : undefined;
+    if (commands.length !== 1 || !only || only.destructive)
+        return undefined;
+    if (only.locked === true || only.disabledReason !== undefined)
+        return undefined;
+    return only;
 }
 export function RecordMenuItems({ record, commands }) {
     const kept = commands.filter((command) => !command.destructive);

package/dist/internal/settings-save.d.ts

@@ -6,13 +6,20 @@ export type SettingsSaveFailure = {
     field?: string;
 };
 export type SettingsSave = {
-    /** Saves the section's fields; resolves to null once saved. */
+    /**
+     * Saves the section's fields; resolves to null once saved. A state change after its await goes in
+     * `startTransition`, or React renders it while Save still says Saving; what the page shows once saved goes in
+     * `saved`.
+     */
     action: (formData: FormData) => Promise<SettingsSaveFailure | null>;
     /** "Save" */
     label: string;
     /** "Saving" */
     pendingLabel: string;
-    /** Called once a save resolves null: the product announces it through its own toast. */
+    /**
+     * Called once a save resolves null, in the transition that ends the save: the product announces it through its
+     * own toast, and a state change made here renders with Save ready again.
+     */
     saved: () => void;
     /** What is specific to this card, on the footer's left: a limit, what a value is for, a plan it needs, a link. Absent: nothing. */
     hint?: ReactNode;

package/dist/internal/settings-save.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-save.d.ts","sourceRoot":"","sources":["../../src/internal/settings-save.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAOtF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpE,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mIAAmI;IACnI,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3F;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgGF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAkFA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,sCA2B1D"}
+{"version":3,"file":"settings-save.d.ts","sourceRoot":"","sources":["../../src/internal/settings-save.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAMf,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAOtF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpE,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mIAAmI;IACnI,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3F;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA4FF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAsFA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,sCAqC1D"}

package/dist/internal/settings-save.js

@@ -1,11 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, use, useCallback, useEffect, useRef, useState, } from "react";
+import { createContext, startTransition, use, useCallback, useEffect, useRef, useState, } from "react";
 import { useFormStatus } from "react-dom";
 import { Button } from "../components/button.js";
 import { FieldError } from "../components/field.js";
 import { MessageNotice } from "../components/message-notice.js";
-import { PendingLabel } from "../components/pending-label.js";
 import { messageSentences } from "../components/product-message.js";
 import { CardContent } from "../components/card.js";
 import { WaitingLine } from "../components/waiting-line.js";
@@ -55,7 +54,7 @@ function editableValues(form) {
 }
 function SaveFooter({ save, changed }) {
     const { pending } = useFormStatus();
-    return (_jsxs(FooterStrip, { hint: save.hint, hintSlot: "settings-section-hint", children: [save.cancel ? (_jsx(Button, { "aria-busy": save.cancel.pending || undefined, disabled: pending || save.cancel.pending, onClick: save.cancel.onCancel, type: "button", variant: "outline", children: _jsx(PendingLabel, { pending: save.cancel.pending ?? false, pendingLabel: save.cancel.pendingLabel ?? save.cancel.label, children: save.cancel.label }) })) : null, _jsx(FormSubmitButton, { submit: {
+    return (_jsxs(FooterStrip, { hint: save.hint, hintSlot: "settings-section-hint", children: [save.cancel ? (_jsx(Button, { disabled: pending, loading: save.cancel.pending ?? false, loadingLabel: save.cancel.pendingLabel ?? save.cancel.label, onClick: save.cancel.onCancel, type: "button", variant: "outline", children: save.cancel.label })) : null, _jsx(FormSubmitButton, { submit: {
                     label: save.label,
                     pendingLabel: save.pendingLabel,
                     pending,
@@ -100,9 +99,13 @@ export function SettingsSaveForm({ save, titleId, children, }) {
     return (_jsx(SettingsSaveContext, { value: { failure, claim }, children: _jsxs("form", { ref: form, "aria-labelledby": titleId, className: "contents", "data-slot": "settings-section-form", action: async (formData) => {
                 const result = await save.action(formData);
                 keepValuesOnReset.current = result !== null;
-                setFailure(result);
-                if (result === null)
-                    save.saved();
+                // React leaves an update after an await out of the action, so it would render while Save still says
+                // Saving; inside a transition it renders with the end of the save.
+                startTransition(() => {
+                    setFailure(result);
+                    if (result === null)
+                        save.saved();
+                });
             }, onChange: (event) => {
                 const edited = event.target;
                 if (edited instanceof Element &&
@@ -130,6 +133,16 @@ export function SettingsFieldFailure({ id }) {
         const invalid = control.getAttribute("aria-invalid");
         control.setAttribute("aria-invalid", "true");
         control.setAttribute("aria-describedby", describedBy ? `${describedBy} ${failureId}` : failureId);
+        // The person pressed Save and the save failed about this field: the field takes the focus, now that the
+        // failure rendered with the end of the save and the field is enabled again. Focus they moved elsewhere stays.
+        const active = document.activeElement;
+        const leftOnSave = !active ||
+            active === document.body ||
+            (active instanceof HTMLButtonElement &&
+                active.type === "submit" &&
+                active.form === control.closest("form"));
+        if (leftOnSave && control instanceof HTMLElement)
+            control.focus();
         return () => {
             if (invalid === null)
                 control.removeAttribute("aria-invalid");

package/dist/internal/table-compact-line.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { type TableCompactLayout } from "../components/table-layouts.js";
+export type TableDetailFact = {
+    id: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** The value is prose a reader needs whole, such as why a check failed: the line wraps instead of ending in an ellipsis. */
+    wraps?: boolean;
+};
+export declare function DetailFacts({ facts, leadingSeparator, }: {
+    facts: readonly TableDetailFact[];
+    leadingSeparator?: boolean;
+}): React.JSX.Element[];
+type TableCompactLineValue = {
+    layout: TableCompactLayout;
+    facts: readonly TableDetailFact[];
+};
+/**
+ * The facts an entity row moves onto the line under its name on a card narrower than its
+ * columns, so the record stays one 72 px row: the name over one muted line. `RecordIdentity`
+ * draws them after its own line.
+ */
+export declare function TableCompactLine({ children, ...value }: TableCompactLineValue & {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** The compact facts of the row this stands in, after a middle dot; nothing outside such a row or on a card wide enough for the columns. */
+export declare function TableCompactFacts(): React.JSX.Element | null;
+/**
+ * Whether the entity rows around it are laid out compact now, read from the layout the browser
+ * drew: a row's cells move what does not fit beside the name under it instead.
+ */
+export declare function TableLaidOutCompact({ compact, children, }: {
+    compact: boolean;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useTableLaidOutCompact(): boolean;
+export {};
+//# sourceMappingURL=table-compact-line.d.ts.map

package/dist/internal/table-compact-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAehC;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAED,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}

package/dist/internal/table-compact-line.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { tableCompactLayouts } from "../components/table-layouts.js";
+import { cn } from "../lib/utils.js";
+export function DetailFacts({ facts, leadingSeparator = false, }) {
+    return facts.map((fact, index) => (_jsxs("span", { children: [index > 0 || leadingSeparator ? _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }) : null, _jsxs("span", { className: "sr-only", children: [fact.label, ": "] }), fact.value] }, fact.id)));
+}
+const TableCompactLineContext = React.createContext(null);
+/**
+ * The facts an entity row moves onto the line under its name on a card narrower than its
+ * columns, so the record stays one 72 px row: the name over one muted line. `RecordIdentity`
+ * draws them after its own line.
+ */
+export function TableCompactLine({ children, ...value }) {
+    return _jsx(TableCompactLineContext, { value: value, children: children });
+}
+/** The compact facts of the row this stands in, after a middle dot; nothing outside such a row or on a card wide enough for the columns. */
+export function TableCompactFacts() {
+    const line = React.useContext(TableCompactLineContext);
+    if (!line || line.facts.length === 0)
+        return null;
+    return (_jsx("span", { className: cn("[&_[data-slot=tag]]:contents [&>span>:is(div,p,.block,.grid,.flex)]:inline", tableCompactLayouts[line.layout].details), "data-slot": "table-detail-line", "data-wraps": line.facts.some((fact) => fact.wraps) || undefined, children: _jsx(DetailFacts, { facts: line.facts, leadingSeparator: true }) }));
+}
+const TableLaidOutCompactContext = React.createContext(false);
+/**
+ * Whether the entity rows around it are laid out compact now, read from the layout the browser
+ * drew: a row's cells move what does not fit beside the name under it instead.
+ */
+export function TableLaidOutCompact({ compact, children, }) {
+    return _jsx(TableLaidOutCompactContext, { value: compact, children: children });
+}
+export function useTableLaidOutCompact() {
+    return React.useContext(TableLaidOutCompactContext);
+}

package/dist/internal/title-when-cut.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+/**
+ * Names an element whole in its title while some of its text is cut by an ellipsis and no title
+ * inside it reads that text whole, such as the line under a name whose own title holds only the
+ * name, and drops the title once everything fits.
+ */
+export declare function titleWhenCut(event: React.SyntheticEvent<HTMLElement>): void;
+//# sourceMappingURL=title-when-cut.d.ts.map

package/dist/internal/title-when-cut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-when-cut.d.ts","sourceRoot":"","sources":["../../src/internal/title-when-cut.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,QAiBpE"}

package/dist/internal/title-when-cut.js

@@ -0,0 +1,22 @@
+const read = (text) => (text ?? "").replace(/\s+/g, " ").trim();
+/**
+ * Names an element whole in its title while some of its text is cut by an ellipsis and no title
+ * inside it reads that text whole, such as the line under a name whose own title holds only the
+ * name, and drops the title once everything fits.
+ */
+export function titleWhenCut(event) {
+    const element = event.currentTarget;
+    const readWholeInside = (node) => {
+        const titled = node.closest("[title]");
+        return (titled !== null &&
+            titled !== element &&
+            element.contains(titled) &&
+            read(titled.title).includes(read(node.textContent)));
+    };
+    const cut = [element, ...element.querySelectorAll("*")].some((node) => node.scrollWidth > node.clientWidth && !readWholeInside(node));
+    const text = read(element.textContent);
+    if (cut && text)
+        element.title = text;
+    else
+        element.removeAttribute("title");
+}

package/dist/internal/unsaved-guard.d.ts

@@ -0,0 +1,18 @@
+import type { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+/** Input a person typed that closing the surface would lose. */
+export type UnsavedGuard = {
+    dirty: boolean;
+    /** Runs when a dismissal was held back, so the caller can ask what to do. */
+    onDismissBlocked: () => void;
+};
+/** What a surface's `onOpenChange` is told about why it closes; the Drawer's reasons are a superset of the Dialog's. */
+export type DismissDetails = Pick<DrawerPrimitive.Root.ChangeEventDetails, "reason" | "cancel">;
+/**
+ * Escape, a press outside, a swipe and the system back gesture are accidents, so with unsaved
+ * input they are held back (the close is cancelled) and reported; Close and Cancel are deliberate
+ * and always go through. Returns whether the close was held back.
+ */
+export declare function holdBackUnsavedDismissal(open: boolean, details: DismissDetails, unsaved?: UnsavedGuard): boolean;
+/** The `onOpenChange` of a form surface that reports only whether it is open. */
+export declare function guardUnsaved(onOpenChange: (open: boolean) => void, unsaved?: UnsavedGuard): (open: boolean, details: DismissDetails) => void;
+//# sourceMappingURL=unsaved-guard.d.ts.map

package/dist/internal/unsaved-guard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unsaved-guard.d.ts","sourceRoot":"","sources":["../../src/internal/unsaved-guard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEvE,gEAAgE;AAChE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,6EAA6E;IAC7E,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,wHAAwH;AACxH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAchG;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,cAAc,EACvB,OAAO,CAAC,EAAE,YAAY,GACrB,OAAO,CAKT;AAED,iFAAiF;AACjF,wBAAgB,YAAY,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,EAAE,OAAO,CAAC,EAAE,YAAY,IAChF,MAAM,OAAO,EAAE,SAAS,cAAc,UAI/C"}

package/dist/internal/unsaved-guard.js

@@ -0,0 +1,31 @@
+const HELD_BACK_WHEN_DIRTY = {
+    "escape-key": true,
+    "outside-press": true,
+    swipe: true,
+    "close-watcher": true,
+    "trigger-press": false,
+    "close-press": false,
+    "focus-out": false,
+    "imperative-action": false,
+    none: false,
+};
+/**
+ * Escape, a press outside, a swipe and the system back gesture are accidents, so with unsaved
+ * input they are held back (the close is cancelled) and reported; Close and Cancel are deliberate
+ * and always go through. Returns whether the close was held back.
+ */
+export function holdBackUnsavedDismissal(open, details, unsaved) {
+    if (open || !unsaved?.dirty || !HELD_BACK_WHEN_DIRTY[details.reason])
+        return false;
+    details.cancel();
+    unsaved.onDismissBlocked();
+    return true;
+}
+/** The `onOpenChange` of a form surface that reports only whether it is open. */
+export function guardUnsaved(onOpenChange, unsaved) {
+    return (open, details) => {
+        if (holdBackUnsavedDismissal(open, details, unsaved))
+            return;
+        onOpenChange(open);
+    };
+}

package/dist/lib/merge-tokens.generated.js

@@ -1,7 +1,7 @@
 // Generated by scripts/generate-merge-tokens.mjs from @nadicodeai/design-system/css.
 // Do not edit: `npm run generate:merge-tokens -w @nadicodeai/ui` rewrites it.
 export const themeMergeTokens = {
-    spacing: "control-height control-padding-inline nadicode-2xl nadicode-3xl nadicode-4xl nadicode-5xl nadicode-6xl nadicode-card-padding nadicode-content-max nadicode-control-height nadicode-control-height-lg nadicode-control-height-sm nadicode-control-height-xs nadicode-control-padding-inline nadicode-focus-outline-offset nadicode-focus-outline-width nadicode-guide nadicode-gutter-desktop nadicode-gutter-mobile nadicode-gutter-tablet nadicode-icon-stroke nadicode-icon-stroke-sm nadicode-lg nadicode-md nadicode-section-step-desktop nadicode-section-step-mobile nadicode-sm nadicode-touch-target nadicode-xl nadicode-xs nadicode-xxs touch-target".split(" "),
-    radius: "2xl 3xl full lg md none sm xl xs".split(" "),
+    spacing: "button-padding-inline button-padding-inline-lg button-padding-inline-sm control-height control-padding-inline nadicode-2xl nadicode-3xl nadicode-4xl nadicode-5xl nadicode-6xl nadicode-button-padding-inline nadicode-button-padding-inline-lg nadicode-button-padding-inline-sm nadicode-card-padding nadicode-content-max nadicode-control-height nadicode-control-height-lg nadicode-control-height-sm nadicode-control-height-xs nadicode-control-padding-inline nadicode-focus-outline-offset nadicode-focus-outline-width nadicode-guide nadicode-gutter-desktop nadicode-gutter-mobile nadicode-gutter-tablet nadicode-icon-stroke nadicode-icon-stroke-sm nadicode-lg nadicode-md nadicode-section-step-desktop nadicode-section-step-mobile nadicode-sm nadicode-touch-target nadicode-xl nadicode-xs nadicode-xxs touch-target".split(" "),
+    radius: "2xl 3xl full lg md none sm xl xs xs-plus".split(" "),
     text: "body-compact body-display body-lead body-lg body-md body-sm button button-lg button-xs caption code display-lg display-md display-section display-wide display-xl heading-compact heading-lg heading-md heading-sm heading-xs label label-display label-lg label-md label-mono label-mono-lg label-mono-md label-sm".split(" "),
 };

package/dist/showcase/foundations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/showcase/foundations.tsx"],"names":[],"mappings":"AAgFA,wBAAgB,WAAW,gCAwH1B"}
+{"version":3,"file":"foundations.d.ts","sourceRoot":"","sources":["../../src/showcase/foundations.tsx"],"names":[],"mappings":"AA0FA,wBAAgB,WAAW,gCAqI1B"}

package/dist/showcase/foundations.js

@@ -8,7 +8,7 @@ import { Button } from "../components/button.js";
 import { Card, CardDescription, CardHeader, CardTitle } from "../components/card.js";
 import { CardRow } from "../components/card-row.js";
 import { GlassControl } from "../components/glass-control.js";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "../components/input-group.js";
+import { Input } from "../components/input.js";
 import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "../components/popover.js";
 import { ARANCIO, COBALTO, VERDE } from "./samples.js";
 const NEUTRAL_ROLES = [
@@ -39,7 +39,9 @@ const TYPE_TOKENS = [
     ["heading-md", "nc-type-heading-md", "A page or object title"],
     ["heading-sm", "nc-type-heading-sm", "A card or settings title"],
     ["heading-xs", "nc-type-heading-xs", "A compact card title"],
+    ["button-lg", "nc-type-button-lg", "Save changes"],
     ["button", "nc-type-button", "Save changes"],
+    ["button-xs", "nc-type-button-xs", "Save changes"],
     ["label-md", "nc-type-label-md", "Item title"],
     ["label", "nc-type-label", "Field label"],
     ["label-sm", "nc-type-label-sm", "Secondary metadata"],
@@ -50,6 +52,12 @@ const TYPE_TOKENS = [
     ["caption", "nc-type-caption", "Badges, compact chrome labels, footer lines."],
     ["code", "nc-type-code", "tool.call(invoice.draft, { month: 'september' })"],
 ];
+const EMPHASIS_ROLES = [
+    ["heading-md, Subtle", "nc-type-heading-md", "text-heading-md", "A page or object", "title"],
+    ["label-md, Strong", "nc-type-label-md", "text-label-md", "Item", "title"],
+    ["body-sm, Strong", "nc-type-body-sm", "text-body-sm", "Default product", "descriptions"],
+];
+const SURFACE_CORNERS = { resting: 6, raised: 12, outlined: 6, plain: 6 };
 function Name({ children }) {
     return _jsx("code", { className: "font-mono text-xs text-muted-foreground", children: children });
 }
@@ -57,5 +65,5 @@ function Group({ title, children }) {
     return (_jsxs("section", { "aria-label": title, className: "grid gap-4", children: [_jsx("h3", { className: "text-sm font-semibold", children: title }), children] }));
 }
 export function Foundations() {
-    return (_jsxs("div", { className: "grid gap-12", children: [_jsxs(Group, { title: "Colour", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-3 lg:grid-cols-6", children: [NEUTRAL_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border border-border ${fill}` }), _jsx(Name, { children: role })] }, role))), EDGE_ROLES.map(([role, edge]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border-2 bg-background ${edge}` }), _jsx(Name, { children: role })] }, role)))] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-5", children: CHART_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md ${fill}` }), _jsx(Name, { children: role })] }, role))) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsxs(Alert, { variant: "info", children: [_jsx(AlertTitle, { children: "Info" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "info-soft" }) })] }), _jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: "Warning" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "warning-soft" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "destructive-soft" }) })] })] })] }), _jsx(Group, { title: "Type", children: _jsx("div", { className: "grid gap-4", children: TYPE_TOKENS.map(([token, typeClass, sample]) => (_jsxs("div", { className: "grid gap-1 border-b border-border pb-4 last:border-0", children: [_jsx(Name, { children: token }), _jsx("p", { className: `m-0 ${typeClass}`, children: sample })] }, token))) }) }), _jsx(Group, { title: "Heights", children: _jsxs(CardRow, { columns: 3, from: "md", children: [["resting", "raised", "outlined", "plain"].map((surface) => (_jsx(Card, { surface: surface, children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "capitalize", children: surface }), _jsx(CardDescription, { children: _jsx(Name, { children: `Card surface="${surface}"` }) })] }) }, surface))), ["floating", "modal"].map((height) => (_jsxs("div", { className: `nc-elevation-${height} grid gap-1 rounded-md bg-popover p-6 text-popover-foreground`, children: [_jsx("p", { className: "text-base font-semibold capitalize", children: height }), _jsx(Name, { children: `nc-elevation-${height}` })] }, height)))] }) }), _jsx(Group, { title: "Glass", children: _jsx("div", { className: "overflow-hidden rounded-md", children: _jsxs(BrandField, { className: "relative isolate grid min-h-80 content-center p-6 sm:p-10", children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10 flex items-center justify-around", children: [_jsx(AgentOrb, { color: COBALTO, decorative: true, form: "globe", motion: "ambient", size: 160 }), _jsx(AgentOrb, { color: VERDE, decorative: true, form: "network", motion: "ambient", size: 96 }), _jsx(AgentOrb, { color: ARANCIO, decorative: true, form: "morph", motion: "ambient", size: 160 })] }), _jsxs(GlassControl, { className: "mx-auto flex w-full max-w-3xl flex-wrap gap-2 p-2", children: [_jsx("div", { className: "min-w-48 flex-1", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(Search, { "aria-hidden": "true" }) }), _jsx(InputGroupInput, { "aria-label": "Find", placeholder: "Find an Agent" })] }) }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsx(Button, { variant: "outline", children: "Popover" }) }), _jsx(PopoverContent, { align: "end", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Glass over colour" }), _jsx(PopoverDescription, { children: "The stage and the moving Agents show through." })] }) })] })] })] }) }) })] }));
+    return (_jsxs("div", { className: "grid gap-12", children: [_jsxs(Group, { title: "Colour", children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-3 lg:grid-cols-6", children: [NEUTRAL_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border border-border ${fill}` }), _jsx(Name, { children: role })] }, role))), EDGE_ROLES.map(([role, edge]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md border-2 bg-background ${edge}` }), _jsx(Name, { children: role })] }, role)))] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-5", children: CHART_ROLES.map(([role, fill]) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("div", { className: `h-16 rounded-md ${fill}` }), _jsx(Name, { children: role })] }, role))) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsxs(Alert, { variant: "info", children: [_jsx(AlertTitle, { children: "Info" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "info-soft" }) })] }), _jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: "Warning" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "warning-soft" }) })] }), _jsxs(Alert, { variant: "destructive", children: [_jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: _jsx(Name, { children: "destructive-soft" }) })] })] })] }), _jsxs(Group, { title: "Type", children: [_jsx("div", { className: "grid gap-4", children: TYPE_TOKENS.map(([token, typeClass, sample]) => (_jsxs("div", { className: "grid gap-1 border-b border-border pb-4 last:border-0", children: [_jsx(Name, { children: token }), _jsx("p", { className: `m-0 ${typeClass}`, children: sample })] }, token))) }), _jsx("div", { className: "grid gap-4", children: EMPHASIS_ROLES.map(([token, typeClass, textClass, lead, emphasised]) => (_jsxs("div", { className: "grid gap-1 border-b border-border pb-4 last:border-0", children: [_jsx(Name, { children: token }), _jsxs("p", { className: `m-0 ${typeClass}`, children: [lead, " ", _jsx("strong", { children: emphasised })] }), _jsxs("p", { className: `m-0 ${textClass}`, children: [lead, " ", _jsx("strong", { children: emphasised })] })] }, token))) })] }), _jsx(Group, { title: "Heights", children: _jsxs(CardRow, { columns: 3, from: "md", children: [["resting", "raised", "outlined", "plain"].map((surface) => (_jsx(Card, { surface: surface, children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "capitalize", children: surface }), _jsxs(CardDescription, { className: "grid gap-1", children: [_jsx(Name, { children: `Card surface="${surface}"` }), _jsx(Name, { children: `${SURFACE_CORNERS[surface]} px corner` })] })] }) }, surface))), ["floating", "modal"].map((height) => (_jsxs("div", { className: `nc-elevation-${height} grid gap-1 rounded-md bg-popover p-6 text-popover-foreground`, children: [_jsx("p", { className: "text-base font-semibold capitalize", children: height }), _jsx(Name, { children: `nc-elevation-${height}` })] }, height)))] }) }), _jsx(Group, { title: "Glass", children: _jsx("div", { className: "overflow-hidden rounded-md", children: _jsxs(BrandField, { className: "relative isolate grid min-h-80 content-center p-6 sm:p-10", children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 -z-10 flex items-center justify-around", children: [_jsx(AgentOrb, { color: COBALTO, decorative: true, form: "globe", motion: "ambient", size: 160 }), _jsx(AgentOrb, { color: VERDE, decorative: true, form: "network", motion: "ambient", size: 96 }), _jsx(AgentOrb, { color: ARANCIO, decorative: true, form: "morph", motion: "ambient", size: 160 })] }), _jsxs(GlassControl, { className: "mx-auto flex w-full max-w-3xl flex-wrap gap-2 p-2", children: [_jsx("div", { className: "min-w-48 flex-1", children: _jsx(Input, { "aria-label": "Find", placeholder: "Find an Agent", prefix: _jsx(Search, { "aria-hidden": "true" }) }) }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsx(Button, { variant: "outline", children: "Popover" }) }), _jsx(PopoverContent, { align: "end", children: _jsxs(PopoverHeader, { children: [_jsx(PopoverTitle, { children: "Glass over colour" }), _jsx(PopoverDescription, { children: "The stage and the moving Agents show through." })] }) })] })] })] }) }) })] }));
 }

package/dist/showcase/specimens/actions.d.ts

@@ -1,6 +1,8 @@
 export declare const ACTIONS: {
     Button: () => import("react").JSX.Element;
+    ButtonLink: () => import("react").JSX.Element;
     ButtonGroup: () => import("react").JSX.Element;
+    LoadMoreButton: () => import("react").JSX.Element;
     CopyButton: () => import("react").JSX.Element;
     PageActions: () => import("react").JSX.Element;
 };

package/dist/showcase/specimens/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/actions.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,OAAO;;;;;CA2EO,CAAC"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/actions.tsx"],"names":[],"mappings":"AAmDA,eAAO,MAAM,OAAO;;;;;;;CA6NO,CAAC"}