@nadicodeai/ui 12.1.102 → 12.1.103

package/dist/internal/collection-note.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { PageCommandButton } from "../components/page-actions.js";
+import { textLinkVariants } from "../components/text-link.js";
+import { FooterStrip } from "./footer-strip.js";
+function LearnMore({ label, link }) {
+    return useRender({
+        defaultTagName: "a",
+        render: link,
+        props: { className: textLinkVariants({ kind: "quiet" }), children: label },
+    });
+}
+/** The note's strip, under a collection card's count and paging. */
+export function CollectionNoteStrip({ note }) {
+    return (_jsx(FooterStrip, { hint: _jsxs("span", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [note.text, note.learnMore ? _jsx(LearnMore, { ...note.learnMore }) : null] }), hintSlot: "table-card-note", children: note.action ? _jsx(PageCommandButton, { command: note.action, variant: "outline" }) : null }));
+}

package/dist/internal/collection-rail.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type EmptyStateKind } from "../components/empty-state.js";
+import { type IdentityMarkProps } from "../components/identity-mark.js";
+import { type PageCommand } from "../components/page-actions.js";
+import { type StatusBadgeTone } from "../components/status-badge.js";
+export type CollectionRailLinkProps = Omit<ComponentProps<"a">, "href"> & {
+    href: string;
+};
+export type CollectionRailItem = {
+    id: string;
+    /** The record's identity mark, drawn at 24 as on a feed line; a figure line has none. */
+    mark?: IdentityMarkProps;
+    title: string;
+    /** One muted line under the title: why it is here, or when. */
+    detail?: ReactNode;
+    /** A figure at the trailing edge, as Vercel's Usage card lists its amounts. */
+    value?: ReactNode;
+    /** Only for the exception, as in a row: the item's state word. */
+    status?: {
+        label: string;
+        tone: StatusBadgeTone;
+    };
+    /** Opens the record the item names. */
+    href?: string;
+};
+export type CollectionRailSection = {
+    id: string;
+    /** The card's name, set above it: "Needs attention". */
+    title: string;
+    /** Undefined while the column's read is in flight: the card holds its place with placeholder lines. */
+    items: readonly CollectionRailItem[] | undefined;
+    /** What the card says with no items: `cleared` for work that is done, `nothingYet` for a list that fills by itself. */
+    empty: EmptyStateKind<"cleared"> | EmptyStateKind<"nothingYet">;
+} & ({
+    /** One muted line at the card's top, such as the cycle: "October · 4 of 9 statements issued". */
+    summary: ReactNode;
+    /** One outline button at the summary's end, as Vercel's Usage card carries Billing beside its cycle. */
+    action?: PageCommand;
+} | {
+    summary?: undefined;
+    action?: never;
+});
+export type CollectionRail = {
+    /** Names the column for assistive technology: "About your customers". */
+    label: string;
+    sections: readonly CollectionRailSection[];
+    /** The column's read failed: one card says so in place of the sections, while the records beside it stay. */
+    failed?: EmptyStateKind<"failed">;
+    /** The product's router link for an item that opens its record. */
+    renderLink?: (props: CollectionRailLinkProps) => ReactNode;
+};
+/** The left column of a collection: titled cards of what matters about the records beside it. */
+export declare function CollectionRailColumn({ rail, className, }: {
+    rail: CollectionRail;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=collection-rail.d.ts.map

package/dist/internal/collection-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-rail.d.ts","sourceRoot":"","sources":["../../src/internal/collection-rail.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAGnE,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAG9E,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,eAAe,CAAA;KAAE,CAAC;IAClD,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,uGAAuG;IACvG,KAAK,EAAE,SAAS,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACjD,uHAAuH;IACvH,KAAK,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;CACjE,GAAG,CACA;IACE,iGAAiG;IACjG,OAAO,EAAE,SAAS,CAAC;IACnB,wGAAwG;IACxG,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,GACD;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC3C,6GAA6G;IAC7G,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,mEAAmE;IACnE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;CAC5D,CAAC;AA8FF,iGAAiG;AACjG,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,SAAS,GACV,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAsBA"}

package/dist/internal/collection-rail.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { Card } from "../components/card.js";
+import { EmptyState } from "../components/empty-state.js";
+import { IdentityMark } from "../components/identity-mark.js";
+import { PageCommandButton } from "../components/page-actions.js";
+import { Skeleton, SkeletonRegion } from "../components/skeleton.js";
+import { StatusBadge } from "../components/status-badge.js";
+import { cn } from "../lib/utils.js";
+function defaultLink(props) {
+    return _jsx("a", { ...props });
+}
+function RailItem({ item, renderLink, }) {
+    const body = (_jsxs(_Fragment, { children: [item.mark ? _jsx(IdentityMark, { ...item.mark, size: 24 }) : null, _jsxs("span", { className: "grid min-w-0 flex-1", children: [_jsx("span", { className: "truncate font-medium text-foreground", title: item.title, children: item.title }), item.detail ? (_jsx("span", { className: "line-clamp-2 text-body-sm break-words text-muted-foreground", children: item.detail })) : null] }), item.status ? _jsx(StatusBadge, { label: item.status.label, tone: item.status.tone }) : null, item.value === undefined ? null : (_jsx("span", { className: "shrink-0 text-right text-foreground tabular-nums", children: item.value }))] }));
+    const row = "flex min-h-9 min-w-0 items-center gap-3 px-4 py-2 text-sm";
+    return (_jsx("li", { "data-slot": "collection-rail-item", children: item.href ? (renderLink({
+            href: item.href,
+            className: cn(row, "nc-transition-paint hover:bg-accent"),
+            children: body,
+        })) : (_jsx("div", { className: row, children: body })) }));
+}
+const LOADING_LINES = ["first", "second", "third"];
+function RailSection({ section, renderLink, }) {
+    const headingId = useId();
+    return (_jsxs("section", { "aria-labelledby": headingId, className: "grid min-w-0 gap-3", "data-slot": "rail-section", children: [_jsx("h2", { className: "text-heading-xs", id: headingId, children: section.title }), _jsxs(Card, { className: "gap-0 py-0", size: "sm", children: [section.summary ? (_jsxs("div", { className: "flex min-h-11 items-center justify-between gap-3 border-b border-border px-4 py-1.5 text-body-sm text-muted-foreground", children: [_jsx("span", { className: "min-w-0", children: section.summary }), section.action ? (_jsx(PageCommandButton, { command: section.action, size: "sm", variant: "outline" })) : null] })) : null, section.items === undefined ? (_jsx("ul", { "aria-hidden": "true", className: "divide-y divide-border", children: LOADING_LINES.map((line) => (_jsx("li", { className: "flex min-h-11 items-center px-4", children: _jsx(Skeleton, { className: "h-4 w-full" }) }, line))) })) : section.items.length > 0 ? (_jsx("ul", { className: "divide-y divide-border", children: section.items.map((item) => (_jsx(RailItem, { item: item, renderLink: renderLink }, item.id))) })) : (_jsx(EmptyState, { ...section.empty, headingLevel: 3, scope: "line" }))] })] }));
+}
+/** The left column of a collection: titled cards of what matters about the records beside it. */
+export function CollectionRailColumn({ rail, className, }) {
+    const renderLink = rail.renderLink ?? defaultLink;
+    const loading = !rail.failed && rail.sections.some((section) => section.items === undefined);
+    return (_jsx("aside", { "aria-label": rail.label, className: cn("grid min-w-0 content-start gap-6", className), "data-slot": "collection-rail", children: _jsx(SkeletonRegion, { busy: loading, className: "contents", children: rail.failed ? (_jsx(Card, { className: "gap-0 py-0", size: "sm", children: _jsx(EmptyState, { ...rail.failed, headingLevel: 2, scope: "card" }) })) : (rail.sections.map((section) => (_jsx(RailSection, { renderLink: renderLink, section: section }, section.id)))) }) }));
+}

package/dist/internal/company-logo.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+/**
+ * A company's logo on its tile, and `fallback`, its initials, when the stored logo does not load,
+ * so a broken address never leaves an empty tile.
+ */
+export declare function CompanyLogo({ logo, colourTile, size, naming, fallback, }: {
+    logo: string;
+    colourTile: boolean;
+    size: number;
+    naming: {
+        role: "img";
+        "aria-label": string;
+    } | {
+        "aria-hidden": true;
+    };
+    fallback: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//# sourceMappingURL=company-logo.d.ts.map

package/dist/internal/company-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"company-logo.d.ts","sourceRoot":"","sources":["../../src/internal/company-logo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAIjD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,aAAa,EAAE,IAAI,CAAA;KAAE,CAAC;IACxE,QAAQ,EAAE,SAAS,CAAC;CACrB,+TAwBA"}

package/dist/internal/company-logo.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * A company's logo on its tile, and `fallback`, its initials, when the stored logo does not load,
+ * so a broken address never leaves an empty tile.
+ */
+export function CompanyLogo({ logo, colourTile, size, naming, fallback, }) {
+    const [failedLogo, setFailedLogo] = useState(null);
+    if (failedLogo === logo)
+        return fallback;
+    return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden", colourTile ? null : "bg-nc-identity-ink ring-1 ring-border ring-inset", size >= 40 ? "rounded-md" : "rounded-sm"), "data-kind": "company", "data-slot": "identity-mark", style: { width: size, height: size }, ...naming, children: _jsx("img", { alt: "", className: colourTile ? "size-full object-cover" : "max-h-[60%] max-w-[78%] object-contain", "data-slot": "identity-mark-logo", onError: () => setFailedLogo(logo), src: logo }) }));
+}

package/dist/internal/control-name.d.ts

@@ -0,0 +1,12 @@
+export type ControlName = {
+    "aria-label": string;
+    "aria-labelledby"?: undefined;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: undefined;
+} | {
+    id: string;
+    "aria-label"?: undefined;
+    "aria-labelledby"?: undefined;
+};
+//# sourceMappingURL=control-name.d.ts.map

package/dist/internal/control-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-name.d.ts","sourceRoot":"","sources":["../../src/internal/control-name.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC"}

package/dist/internal/control-name.js

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

package/dist/internal/diff-line.d.ts

@@ -0,0 +1,9 @@
+export declare const DIFF_ROW: {
+    readonly added: "bg-success-soft text-success-soft-foreground";
+    readonly removed: "bg-destructive-soft text-destructive-soft-foreground";
+};
+export declare const DIFF_MARK: {
+    readonly added: "+";
+    readonly removed: "−";
+};
+//# sourceMappingURL=diff-line.d.ts.map

package/dist/internal/diff-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-line.d.ts","sourceRoot":"","sources":["../../src/internal/diff-line.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGX,CAAC;AAEX,eAAO,MAAM,SAAS;;;CAGZ,CAAC"}

package/dist/internal/diff-line.js

@@ -0,0 +1,8 @@
+export const DIFF_ROW = {
+    added: "bg-success-soft text-success-soft-foreground",
+    removed: "bg-destructive-soft text-destructive-soft-foreground",
+};
+export const DIFF_MARK = {
+    added: "+",
+    removed: "−",
+};

package/dist/internal/empty.d.ts

@@ -1,10 +1,14 @@
-type EmptyScope = "page" | "region" | "card";
-declare function Empty({ className, scope, ...props }: React.ComponentProps<"div"> & {
+/** `line` is a card that lists a few items, such as a collection rail's: the absence is one row like an item. */
+type EmptyScope = "page" | "region" | "card" | "line";
+type EmptyTone = "neutral" | "error";
+declare function Empty({ className, scope, tone, ...props }: React.ComponentProps<"div"> & {
     scope?: EmptyScope;
+    tone?: EmptyTone;
 }): import("react").JSX.Element;
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+type EmptyMediaVariant = "picture" | "tile" | "error";
 declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & {
-    variant: "picture" | "warning";
+    variant: EmptyMediaVariant;
 }): import("react").JSX.Element;
 type EmptyPictureSize = "page" | "card";
 declare function EmptyPicture({ size, src }: {
@@ -14,5 +18,5 @@ declare function EmptyPicture({ size, src }: {
 declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function EmptyDescription({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
-export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, EmptyPicture, type EmptyPictureSize, type EmptyScope, };
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, EmptyPicture, type EmptyPictureSize, type EmptyScope, type EmptyTone, };
 //# sourceMappingURL=empty.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../src/internal/empty.tsx"],"names":[],"mappings":"AAIA,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7C,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,KAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAA;CAAE,+BActD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,EAAE,SAAS,GAAG,SAAS,CAAA;CAAE,+BAelE;AAED,KAAK,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,+BA0B3E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW7E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQzE;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,CAAC"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../src/internal/empty.tsx"],"names":[],"mappings":"AAIA,iHAAiH;AACjH,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AACtD,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAOrC,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,KAAgB,EAChB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,+BAkBxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQxE;AAED,KAAK,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtD,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,OAAO,EAAE,iBAAiB,CAAA;CAAE,+BAgB9D;AAED,KAAK,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,+BA6B3E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQvE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW7E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQzE;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,SAAS,GACf,CAAC"}

package/dist/internal/empty.js

@@ -1,18 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { cn } from "../lib/utils.js";
-function Empty({ className, scope = "region", ...props }) {
-    return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center", scope === "page" ? "px-6 pt-10 pb-11" : "px-5 py-7", scope !== "card" && "rounded-sm bg-card nc-elevation-resting", className), ...props, "data-scope": scope }));
+const FRAME = {
+    error: "rounded-sm border border-destructive-soft-foreground/25 bg-destructive-soft",
+    neutral: "rounded-sm bg-card nc-elevation-resting",
+};
+function Empty({ className, scope = "region", tone = "neutral", ...props }) {
+    return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-6 text-center", scope === "card" && "px-5 py-8", scope === "line" && "min-h-11 flex-row justify-start gap-2 px-4 py-2.5 text-left", (scope === "page" || scope === "region") && "px-17.5 py-12", tone === "error" && "gap-2 p-4 text-destructive-soft-foreground", (scope === "page" || scope === "region") && FRAME[tone], className), ...props, "data-scope": scope, "data-tone": tone }));
 }
 function EmptyHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm min-w-0 flex-col items-center gap-4", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm min-w-0 flex-col items-center gap-6", className), ...props }));
 }
 function EmptyMedia({ className, variant, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn("flex shrink-0 justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", variant === "warning" &&
-            "size-9 items-center rounded-md bg-destructive-soft text-destructive [&_svg:not([class*='size-'])]:size-4", variant === "picture" && "items-end", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn("flex shrink-0 justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", variant === "tile" &&
+            "size-13.5 items-center rounded-md border border-border bg-card text-muted-foreground [&_svg:not([class*='size-'])]:size-8", variant === "error" && "items-center [&_svg:not([class*='size-'])]:size-4", variant === "picture" && "items-end", className), ...props }));
 }
 function EmptyPicture({ size, src }) {
     const [loaded, setLoaded] = useState(false);
+    const [waiting, setWaiting] = useState(false);
     const arriveOnLoad = useCallback((img) => {
         if (!img)
             return;
@@ -20,17 +25,18 @@ function EmptyPicture({ size, src }) {
             setLoaded(true);
             return;
         }
+        setWaiting(true);
         const show = () => setLoaded(true);
         img.addEventListener("load", show, { once: true });
         return () => img.removeEventListener("load", show);
     }, []);
-    return (_jsx(EmptyMedia, { className: size === "page" ? "h-44 w-60" : "h-36 w-50", variant: "picture", children: _jsx("img", { alt: "", className: "max-h-full max-w-full object-contain object-bottom select-none", "data-loaded": loaded ? "" : undefined, "data-size": size, "data-slot": "empty-picture", draggable: false, ref: arriveOnLoad, src: src }) }));
+    return (_jsx(EmptyMedia, { className: size === "page" ? "h-44 w-60" : "h-36 w-50", variant: "picture", children: _jsx("img", { alt: "", className: "max-h-full max-w-full object-contain object-bottom select-none", "data-loaded": loaded ? "" : undefined, "data-waiting": waiting ? "" : undefined, "data-size": size, "data-slot": "empty-picture", draggable: false, ref: arriveOnLoad, src: src }) }));
 }
 function EmptyTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-title", className: cn("text-heading-xs text-foreground", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-title", className: cn("text-body-md font-medium text-foreground", className), ...props }));
 }
 function EmptyDescription({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-description", className: cn("max-w-[38ch] text-body-sm text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-description", className: cn("max-w-85 text-body-sm text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
 }
 function EmptyContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "empty-content", className: cn("flex min-w-0 flex-wrap items-center justify-center gap-2", className), ...props }));

package/dist/internal/field-frame.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { AccessibleName } from "../components/button.js";
+import type { FieldSize } from "./input-box.js";
+export type FieldAria = Pick<React.AriaAttributes, "aria-invalid" | "aria-describedby">;
+/**
+ * Every field has a name. A visible `label` is tied to its control by `id`; where the name is
+ * drawn elsewhere on the screen (a toolbar's search, a cell of a table), `aria-label` or
+ * `aria-labelledby` carries it. A field with none of the three does not compile.
+ */
+export type FieldName = {
+    label: string;
+    id: string;
+    "aria-label"?: undefined;
+    "aria-labelledby"?: undefined;
+} | (AccessibleName & {
+    label?: undefined;
+});
+type FieldControl = Pick<React.ComponentProps<"input">, "id" | "aria-invalid" | "aria-describedby">;
+/**
+ * The `label`, `description` and `error` props of a field: the `Field` parts drawn around the
+ * control, the description as one muted sentence under it. The control takes back the
+ * `aria-invalid` and `aria-describedby` that join it to the description and the error.
+ */
+export declare function FieldFrame({ label, description, error, size, control, children, }: {
+    label: string | undefined;
+    description?: string | undefined;
+    error: string | undefined;
+    size?: FieldSize;
+    control: FieldControl;
+    children: (aria: FieldAria) => React.ReactNode;
+}): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export {};
+//# sourceMappingURL=field-frame.d.ts.map

package/dist/internal/field-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-frame.d.ts","sourceRoot":"","sources":["../../src/internal/field-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,cAAc,GAAG,kBAAkB,CAAC,CAAC;AAExF;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACtF,CAAC,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7C,KAAK,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;AAEpG;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,KAAK,EACL,IAAgB,EAChB,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CAChD,mSAsBA"}

package/dist/internal/field-frame.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../components/field.js";
+/**
+ * The `label`, `description` and `error` props of a field: the `Field` parts drawn around the
+ * control, the description as one muted sentence under it. The control takes back the
+ * `aria-invalid` and `aria-describedby` that join it to the description and the error.
+ */
+export function FieldFrame({ label, description, error, size = "default", control, children, }) {
+    const descriptionId = React.useId();
+    const errorId = React.useId();
+    const invalid = error ? true : control["aria-invalid"];
+    const describedBy = [control["aria-describedby"], description && descriptionId, error && errorId]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    const field = children({ "aria-invalid": invalid, "aria-describedby": describedBy });
+    if (!label && !description && !error)
+        return field;
+    return (_jsxs(Field, { "data-invalid": error ? true : undefined, children: [label ? _jsx(FieldLabel, { htmlFor: control.id, children: label }) : null, field, description ? _jsx(FieldDescription, { id: descriptionId, children: description }) : null, error ? (_jsx(FieldError, { id: errorId, size: size === "lg" ? "lg" : "default", children: error })) : null] }));
+}

package/dist/internal/final-focus.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Where focus goes when a dialog or sheet closes: back to its opener after every close but a pointer
+ * one, so a keyboard user or a close from the caller's own state (a save, a pick, Finish) keeps their
+ * place, and nowhere after a pointer close, so the opener does not keep a ring that reads as selected
+ * (as Vercel's dialogs do). Base UI leaves the close type empty when the caller closes through `open`.
+ */
+export declare function returnFocusUnlessPointer(closeType: string): boolean;
+//# sourceMappingURL=final-focus.d.ts.map

package/dist/internal/final-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"final-focus.d.ts","sourceRoot":"","sources":["../../src/internal/final-focus.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAEnE"}

package/dist/internal/final-focus.js

@@ -0,0 +1,10 @@
+const POINTER_CLOSES = new Set(["mouse", "touch", "pen"]);
+/**
+ * Where focus goes when a dialog or sheet closes: back to its opener after every close but a pointer
+ * one, so a keyboard user or a close from the caller's own state (a save, a pick, Finish) keeps their
+ * place, and nowhere after a pointer close, so the opener does not keep a ring that reads as selected
+ * (as Vercel's dialogs do). Base UI leaves the close type empty when the caller closes through `open`.
+ */
+export function returnFocusUnlessPointer(closeType) {
+    return !POINTER_CLOSES.has(closeType);
+}

package/dist/internal/footer-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer-strip.d.ts","sourceRoot":"","sources":["../../src/internal/footer-strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,4BAeA;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"footer-strip.d.ts","sourceRoot":"","sources":["../../src/internal/footer-strip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,4BA6BA;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/internal/footer-strip.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CardFooter } from "../components/card.js";
+import { cn } from "../lib/utils.js";
 function FooterStrip({ hint, hintSlot, children, }) {
     if (!hint && !children) {
         return null;
     }
-    return (_jsxs(CardFooter, { children: [hint && (_jsx("div", { "data-slot": hintSlot, className: "min-w-0 flex-1 text-muted-foreground", children: hint })), children && _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-3", children: children })] }));
+    const stacksWhenNarrow = hintSlot === "settings-section-hint";
+    return (_jsxs(CardFooter, { children: [hint && (_jsx("div", { "data-slot": hintSlot, className: cn("min-w-0 flex-1", stacksWhenNarrow && "max-sm:basis-full"), children: hint })), children && (_jsx("div", { className: cn("ml-auto flex flex-wrap items-center gap-3", stacksWhenNarrow && "max-sm:ml-0 max-sm:w-full max-sm:*:flex-1"), children: children }))] }));
 }
 export { FooterStrip };

package/dist/internal/form-submit.d.ts

@@ -2,15 +2,19 @@ import type { ComponentProps, ReactNode } from "react";
 /** The save of a drawer's, a dialog's or a row's form. */
 export type FormSubmit = {
     label: string;
-    /** The button's own word while the save runs. */
-    pendingLabel?: string;
-    /** The save is running: the button says so and holds, and the waiting line follows. */
-    pending?: boolean;
     /** Nothing to save yet, or a field still needs an answer. */
     disabled?: boolean;
     /** The id of the line that says why the save cannot run yet. */
     describedBy?: string;
-};
+} & ({
+    pending?: undefined;
+    pendingLabel?: string;
+} | {
+    /** The save is running: the button says so and holds, and the waiting line follows. */
+    pending: boolean;
+    /** The button's own word while the save runs: the label's -ing form, *Saving*. */
+    pendingLabel: string;
+});
 export type FormProps = Omit<ComponentProps<"form">, "children" | "className"> & {
     cancelLabel: string;
     submit: FormSubmit;

package/dist/internal/form-submit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-submit.d.ts","sourceRoot":"","sources":["../../src/internal/form-submit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC/E,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,+BAclE"}
+{"version":3,"file":"form-submit.d.ts","sourceRoot":"","sources":["../../src/internal/form-submit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,CACA;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9C;IACE,uFAAuF;IACvF,OAAO,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,YAAY,EAAE,MAAM,CAAC;CACtB,CACJ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC/E,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAoCF,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,+BAclE"}

package/dist/internal/form-submit.js

@@ -1,8 +1,37 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "../components/button.js";
-import { PendingLabel } from "../components/pending-label.js";
+const TRIMMED_INPUT_TYPES = new Set(["text", "email", "url", "search", "tel"]);
+function isTextField(field) {
+    return (field instanceof HTMLTextAreaElement ||
+        (field instanceof HTMLInputElement && TRIMMED_INPUT_TYPES.has(field.type)));
+}
+function replaceValue(field, value) {
+    const prototype = field instanceof HTMLTextAreaElement
+        ? HTMLTextAreaElement.prototype
+        : HTMLInputElement.prototype;
+    Object.getOwnPropertyDescriptor(prototype, "value")?.set?.call(field, value);
+    field.dispatchEvent(new Event("input", { bubbles: true }));
+}
+/**
+ * "Trim leading and trailing whitespace before submit so ` example.com` and `example.com` resolve
+ * to one value." (https://vercel.com/geist/input) "Trim leading and trailing whitespace on submit
+ * so empty newlines don’t pass a `required` check." (https://vercel.com/geist/textarea) Ours: a
+ * controlled field is told through its own `input` event; passwords and other types keep every
+ * character.
+ */
+function trimTextFields(form) {
+    if (!form)
+        return;
+    for (const field of form.elements) {
+        if (!isTextField(field) || field.readOnly || field.disabled)
+            continue;
+        const trimmed = field.value.trim();
+        if (trimmed !== field.value)
+            replaceValue(field, trimmed);
+    }
+}
 export function FormSubmitButton({ submit }) {
     const pending = submit.pending === true;
-    return (_jsx(Button, { "aria-busy": pending || undefined, "aria-describedby": submit.describedBy, disabled: pending || submit.disabled, type: "submit", children: _jsx(PendingLabel, { pending: pending, pendingLabel: submit.pendingLabel ?? submit.label, children: submit.label }) }));
+    return (_jsx(Button, { "aria-describedby": submit.describedBy, disabled: submit.disabled, loading: pending, loadingLabel: submit.pendingLabel ?? submit.label, onClick: (event) => trimTextFields(event.currentTarget.form), type: "submit", children: submit.label }));
 }

package/dist/internal/input-box.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type FieldSize = "sm" | "default" | "lg";
+/**
+ * The edge of every field-shaped box: a 1px ring drawn outside the box with a shadow, so the box
+ * keeps its size, and a 4px halo that is clear until focus or an error fills it. The states below
+ * only move the two colours.
+ */
+export declare const fieldRing = "[--field-edge:var(--color-border)] [--field-halo:transparent] shadow-[0_0_0_1px_var(--field-edge),0_0_0_4px_var(--field-halo)] transition-shadow";
+/** The states of a box that is itself the control: an input, a textarea, a select, a trigger. */
+export declare const fieldStates: string;
+/** A trigger whose list is open keeps the hover edge. */
+export declare const fieldOpen = "data-popup-open:not-aria-invalid:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]";
+/** A trigger that keeps the page's outline for keyboard focus, as a button does: no halo. */
+export declare const fieldTriggerStates: string;
+/** The same states for a box that holds the control, so the ring wraps its prefix and suffix. */
+export declare const fieldGroupStates: string;
+/** The same states for a box of chips, whose ring wraps the chips and the input among them. */
+export declare const fieldWithinStates: string;
+/** A disabled box steps down in fill and text, never in opacity. */
+export declare const fieldDisabled = "disabled:cursor-not-allowed disabled:bg-accent disabled:text-placeholder";
+export type InputBoxProps = Omit<React.ComponentProps<"input">, "size"> & {
+    size?: FieldSize;
+};
+/** The bare box of `Input` and `InputGroupControl`, so the group can wrap it without a cycle. */
+export declare function InputBox({ className, size, type, ...props }: InputBoxProps): React.JSX.Element;
+//# sourceMappingURL=input-box.d.ts.map

package/dist/internal/input-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-box.d.ts","sourceRoot":"","sources":["../../src/internal/input-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,SAAS,qJAC8H,CAAC;AAErJ,iGAAiG;AACjG,eAAO,MAAM,WAAW,QAIb,CAAC;AAEZ,yDAAyD;AACzD,eAAO,MAAM,SAAS,0GACmF,CAAC;AAE1G,6FAA6F;AAC7F,eAAO,MAAM,kBAAkB,QAIpB,CAAC;AAEZ,iGAAiG;AACjG,eAAO,MAAM,gBAAgB,QAKlB,CAAC;AAEZ,+FAA+F;AAC/F,eAAO,MAAM,iBAAiB,QAKnB,CAAC;AAEZ,oEAAoE;AACpE,eAAO,MAAM,aAAa,6EACkD,CAAC;AAqB7E,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,iGAAiG;AACjG,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAWtF"}

package/dist/internal/input-box.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+/**
+ * The edge of every field-shaped box: a 1px ring drawn outside the box with a shadow, so the box
+ * keeps its size, and a 4px halo that is clear until focus or an error fills it. The states below
+ * only move the two colours.
+ */
+export const fieldRing = "[--field-edge:var(--color-border)] [--field-halo:transparent] shadow-[0_0_0_1px_var(--field-edge),0_0_0_4px_var(--field-halo)] transition-shadow";
+/** The states of a box that is itself the control: an input, a textarea, a select, a trigger. */
+export const fieldStates = [
+    "enabled:not-focus-visible:not-aria-invalid:hover:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]",
+    "focus-visible:outline-none focus-visible:[--field-edge:var(--color-ring)] focus-visible:[--field-halo:color-mix(in_oklab,var(--color-ring)_16%,transparent)]",
+    "aria-invalid:outline-none aria-invalid:[--field-edge:var(--color-destructive)] aria-invalid:[--field-halo:var(--nc-rosso-300)] aria-invalid:enabled:not-focus-visible:hover:[--field-halo:var(--nc-rosso-500)]",
+].join(" ");
+/** A trigger whose list is open keeps the hover edge. */
+export const fieldOpen = "data-popup-open:not-aria-invalid:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]";
+/** A trigger that keeps the page's outline for keyboard focus, as a button does: no halo. */
+export const fieldTriggerStates = [
+    "enabled:not-aria-invalid:hover:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]",
+    fieldOpen,
+    "aria-invalid:outline-none aria-invalid:[--field-edge:var(--color-destructive)] aria-invalid:[--field-halo:var(--nc-rosso-300)] aria-invalid:enabled:hover:[--field-halo:var(--nc-rosso-500)]",
+].join(" ");
+/** The same states for a box that holds the control, so the ring wraps its prefix and suffix. */
+export const fieldGroupStates = [
+    "not-has-[[data-slot=input-group-control]:disabled]:not-has-[[data-slot=input-group-control]:focus-visible]:not-has-[[data-slot][aria-invalid=true]]:hover:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]",
+    "has-[[data-slot=input-group-control]:focus-visible]:[--field-edge:var(--color-ring)] has-[[data-slot=input-group-control]:focus-visible]:[--field-halo:color-mix(in_oklab,var(--color-ring)_16%,transparent)]",
+    "has-[[data-slot][aria-invalid=true]]:[--field-edge:var(--color-destructive)] has-[[data-slot][aria-invalid=true]]:[--field-halo:var(--nc-rosso-300)]",
+    "has-[[data-slot][aria-invalid=true]]:not-has-[[data-slot=input-group-control]:disabled]:not-has-[[data-slot=input-group-control]:focus-visible]:hover:[--field-halo:var(--nc-rosso-500)]",
+].join(" ");
+/** The same states for a box of chips, whose ring wraps the chips and the input among them. */
+export const fieldWithinStates = [
+    "not-focus-within:not-has-aria-invalid:hover:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]",
+    "focus-within:[--field-edge:var(--color-ring)] focus-within:[--field-halo:color-mix(in_oklab,var(--color-ring)_16%,transparent)]",
+    "has-aria-invalid:[--field-edge:var(--color-destructive)] has-aria-invalid:[--field-halo:var(--nc-rosso-300)]",
+    "has-aria-invalid:not-focus-within:hover:[--field-halo:var(--nc-rosso-500)]",
+].join(" ");
+/** A disabled box steps down in fill and text, never in opacity. */
+export const fieldDisabled = "disabled:cursor-not-allowed disabled:bg-accent disabled:text-placeholder";
+const inputBoxVariants = cva([
+    "min-h-touch-target w-full min-w-0 bg-(--nc-field,var(--background)) px-control-padding-inline py-0 text-base file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-placeholder [@media(hover:hover)_and_(pointer:fine)]:min-h-0",
+    fieldRing,
+    fieldStates,
+    fieldDisabled,
+], {
+    variants: {
+        size: {
+            sm: "h-nadicode-control-height-sm rounded-sm md:text-sm",
+            default: "h-control-height rounded-sm md:text-sm",
+            lg: "h-nadicode-control-height-lg rounded-md",
+        },
+    },
+    defaultVariants: { size: "default" },
+});
+/** The bare box of `Input` and `InputGroupControl`, so the group can wrap it without a cycle. */
+export function InputBox({ className, size = "default", type, ...props }) {
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", "data-size": size, "data-field-frame": "", className: cn(inputBoxVariants({ size }), className), ...props }));
+}

package/dist/internal/menu-surface.d.ts

@@ -1,6 +1,13 @@
 /**
- * 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 declare 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 declare 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 declare 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";
 //# sourceMappingURL=menu-surface.d.ts.map

package/dist/internal/menu-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-surface.d.ts","sourceRoot":"","sources":["../../src/internal/menu-surface.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,gSACuQ,CAAC"}
+{"version":3,"file":"menu-surface.d.ts","sourceRoot":"","sources":["../../src/internal/menu-surface.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,uRAC8P,CAAC;AAEvR;;;;;GAKG;AACH,eAAO,MAAM,OAAO,8iBACyhB,CAAC"}