@nadicodeai/ui 12.1.164 → 12.1.166

package/dist/components/tabs-nav.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tabShape } from "../internal/tab-row.js";
+import { cn } from "../lib/utils.js";
+/** Which ends of a scrolled row hide links, so the row fades there to say more stand beyond. */
+function hiddenTabs(element) {
+    const start = element.scrollLeft > 1;
+    const end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
+    return start && end ? "both" : start ? "start" : end ? "end" : "none";
+}
+const HIDDEN_FADE = {
+    none: undefined,
+    start: "[mask-image:linear-gradient(to_right,transparent,black_2rem)]",
+    end: "[mask-image:linear-gradient(to_left,transparent,black_2rem)]",
+    both: "[mask-image:linear-gradient(to_right,transparent,black_2rem,black_calc(100%_-_2rem),transparent)]",
+};
+/**
+ * Sibling views of one object, each with its own URL, under the top bar.
+ *
+ * @family Navigation
+ * @when Sibling views of one object under the top bar, when each view has its own URL (an object's
+ * sections), with `TabsLink` for each.
+ * @instead Panels that switch in place are `Tabs`. A stable destination belongs in the `Sidebar`.
+ * An object's ancestry is the `Breadcrumb`.
+ * @behaviour "Reflect the active tab in the URL (query param or path) so deep-links and refresh restore state." (https://vercel.com/geist/tabs)
+ * Ours: each view is its own URL, so a link carries it. Overflow scrolls sideways and brings the
+ * current link into view, and the row fades out over 32 px at each end where links stand beyond it.
+ * The current link takes the selection fill, or in `line` a 2 px ink underline over the row's 1 px
+ * rule; the other links are muted until hover, with no hue. Sizes and spacing follow `Tabs`. The
+ * row holds at most 7 links; in a `band`, which a phone scrolls sideways instead of holding
+ * fewer, that is 7 at every width, as an Agent's six views do, and a `line` row follows the 7 and 4 cap of `Tabs`. The sub-pages of one object stand as the filled-pill row in a
+ * `band` under the top bar, as Vercel draws a deployment's tabs: the band is this component's, with `above` for the
+ * object's identity, so no page draws the border, the fill or the gutters around the row. The band
+ * keeps the page's own column and gutter, and the first link's words start at the page title's edge,
+ * its fill reaching into the gutter as Vercel's tabs do. The
+ * `line` row has its own rule and takes no band.
+ * @words "`tabs[].title` is Title Case, 1–2 words, and names the destination noun (`Overview`, `Logs`, `Settings`). Verbs belong on buttons; `View Logs` is wrong on a tab." (https://vercel.com/geist/tabs)
+ * "Don’t append a count to the title (`Logs (12)`); use a badge slot instead and drop the badge at zero." (https://vercel.com/geist/tabs)
+ * Ours: the title is sentence case (*Overview*, *Installations*), not Title Case. There is no badge
+ * slot: a count belongs to the list's footer. A link has no icon. Italian scrolls, never wraps or
+ * truncates.
+ * @access "Label the tablist with `aria-label` when no visible heading sits above it (`aria-label="Sections"`)." (https://vercel.com/geist/tabs)
+ * "Maintain a visible focus ring on the active tab; don’t suppress focus styles for visual polish." (https://vercel.com/geist/tabs)
+ * Ours: a `nav` of links named by `aria-label` or `aria-labelledby`, which the type requires, with
+ * `aria-current="page"` on the current one.
+ */
+function TabsNav({ className, children, variant = "default", band = false, above, ...props }) {
+    const navigation = React.useRef(null);
+    const current = React.useRef(null);
+    const [hidden, setHidden] = React.useState("none");
+    React.useEffect(() => {
+        const element = navigation.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => setHidden(hiddenTabs(element));
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        element.addEventListener("scroll", measure, { passive: true });
+        return () => {
+            observer.disconnect();
+            element.removeEventListener("scroll", measure);
+        };
+    }, []);
+    React.useEffect(() => {
+        const element = navigation.current;
+        const link = element?.querySelector('[aria-current="page"]') ?? null;
+        if (!element || link === current.current)
+            return;
+        current.current = link;
+        if (link && element.scrollWidth > element.clientWidth) {
+            link.scrollIntoView({ block: "nearest", inline: "nearest" });
+        }
+    });
+    const row = (_jsx("nav", { ref: navigation, "data-slot": "tabs-nav", "data-variant": variant, className: cn("group/tabs-nav group/tabs-list min-w-0 overflow-x-auto", HIDDEN_FADE[hidden], variant === "line" && "pb-px shadow-[inset_0_-1px_0_0_var(--border)]", className), ...props, children: _jsx("ul", { className: "flex w-max min-w-full items-center gap-0 group-data-[variant=line]/tabs-nav:gap-6", children: children }) }));
+    if (!band)
+        return row;
+    return (_jsx("div", { "data-slot": "tabs-nav-band", className: "border-b bg-background", children: _jsxs("div", { className: "mx-auto w-full max-w-7xl px-6", children: [above, _jsx("div", { className: "-mx-3 py-2", children: row })] }) }));
+}
+function TabsLink({ current = false, className, render, ...props }) {
+    const link = useRender({
+        defaultTagName: "a",
+        render,
+        props: mergeProps({
+            "aria-current": current ? "page" : undefined,
+            className: cn(tabShape, "group-data-[variant=line]/tabs-nav:-mb-px group-data-[variant=line]/tabs-nav:h-12.5 group-data-[variant=line]/tabs-nav:px-0.5", "group-data-[variant=default]/tabs-nav:aria-[current=page]:bg-selection group-data-[variant=default]/tabs-nav:aria-[current=page]:text-selection-foreground", "group-data-[variant=line]/tabs-nav:aria-[current=page]:text-foreground", "after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:opacity-0 group-data-[variant=line]/tabs-nav:aria-[current=page]:after:opacity-100", className),
+        }, props),
+        state: { slot: "tabs-link", current },
+    });
+    return _jsx("li", { className: "flex", children: link });
+}
+export { TabsNav, TabsLink };

package/dist/components/tabs.d.ts

@@ -1,14 +1,7 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
-type TabGroupName = {
-    "aria-label": string;
-    "aria-labelledby"?: string | undefined;
-} | {
-    "aria-labelledby": string;
-    "aria-label"?: string | undefined;
-};
+import { type TabGroupName } from "../internal/tab-row.js";
 type TabDisabling = {
     disabled?: false | undefined;
     disabledReason?: undefined;
@@ -67,53 +60,6 @@ declare const tabsListVariants: (props?: ({
 declare function TabsList({ className, variant, ...props }: Omit<TabsPrimitive.List.Props, "aria-label" | "aria-labelledby"> & VariantProps<typeof tabsListVariants> & TabGroupName): React.JSX.Element;
 declare function TabsTrigger({ className, disabled, disabledReason, "aria-describedby": describedBy, ...props }: TabsTriggerProps): React.JSX.Element;
 declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): React.JSX.Element;
-/**
- * Sibling views of one object, each with its own URL, under the top bar.
- *
- * @family Navigation
- * @when Sibling views of one object under the top bar, when each view has its own URL (an object's
- * sections), with `TabsLink` for each.
- * @instead Panels that switch in place are `Tabs`. A stable destination belongs in the `Sidebar`.
- * An object's ancestry is the `Breadcrumb`.
- * @behaviour "Reflect the active tab in the URL (query param or path) so deep-links and refresh restore state." (https://vercel.com/geist/tabs)
- * Ours: each view is its own URL, so a link carries it. Overflow scrolls sideways and brings the
- * current link into view, and the row fades out over 32 px at each end where links stand beyond it.
- * The current link takes the selection fill, or in `line` a 2 px ink underline over the row's 1 px
- * rule; the other links are muted until hover, with no hue. Sizes and spacing follow `Tabs`. The
- * row holds at most 7 links; in a `band`, which a phone scrolls sideways instead of holding
- * fewer, that is 7 at every width, as an Agent's six views do, and a `line` row follows the 7 and 4 cap of `Tabs`. The sub-pages of one object stand as the filled-pill row in a
- * `band` under the top bar, as Vercel draws a deployment's tabs: the band is this component's, with `above` for the
- * object's identity, so no page draws the border, the fill or the gutters around the row. The band
- * keeps the page's own column and gutter, and the first link's words start at the page title's edge,
- * its fill reaching into the gutter as Vercel's tabs do. The
- * `line` row has its own rule and takes no band.
- * @words "`tabs[].title` is Title Case, 1–2 words, and names the destination noun (`Overview`, `Logs`, `Settings`). Verbs belong on buttons; `View Logs` is wrong on a tab." (https://vercel.com/geist/tabs)
- * "Don’t append a count to the title (`Logs (12)`); use a badge slot instead and drop the badge at zero." (https://vercel.com/geist/tabs)
- * Ours: the title is sentence case (*Overview*, *Installations*), not Title Case. There is no badge
- * slot: a count belongs to the list's footer. A link has no icon. Italian scrolls, never wraps or
- * truncates.
- * @access "Label the tablist with `aria-label` when no visible heading sits above it (`aria-label="Sections"`)." (https://vercel.com/geist/tabs)
- * "Maintain a visible focus ring on the active tab; don’t suppress focus styles for visual polish." (https://vercel.com/geist/tabs)
- * Ours: a `nav` of links named by `aria-label` or `aria-labelledby`, which the type requires, with
- * `aria-current="page"` on the current one.
- */
-declare function TabsNav({ className, children, variant, band, above, ...props }: Omit<React.ComponentProps<"nav">, "aria-label" | "aria-labelledby"> & TabGroupName & ({
-    variant?: "default" | "line" | null;
-    band?: false;
-    above?: never;
-} | {
-    variant?: "default" | null;
-    /**
-     * The row stands in a full-width band under the top bar: a 1 px rule below, the page's
-     * background, the page's gutters, and the reading column centred inside.
-     */
-    band: true;
-    /** The object's identity, in the band's column above the row. */
-    above?: React.ReactNode;
-})): React.JSX.Element;
-declare function TabsLink({ current, className, render, ...props }: useRender.ComponentProps<"a"> & {
-    current?: boolean;
-}): React.JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, TabsLink, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
 export type { TabsProps };
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGjE,KAAK,YAAY,GACb;IAAE,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAAC,cAAc,CAAC,EAAE,SAAS,CAAA;CAAE,GAC5D;IACE,QAAQ,EAAE,IAAI,CAAC;IACf,qEAAqE;IACrE,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEN,KAAK,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC;AAEjF,KAAK,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,cAAc,GAAG,eAAe,CAAC,GAAG;IAC5F,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC;CAC7F,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAU3E;AAED,QAAA,MAAM,gBAAgB;;8EAarB,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,GACjE,YAAY,CAAC,OAAO,gBAAgB,CAAC,GACrC,YAAY,qBAUb;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,cAAc,EACd,kBAAkB,EAAE,WAAW,EAC/B,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAmClB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,qBAQtE;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC;AACtE,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/tabs.js

@@ -2,10 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { tabShape } from "../internal/tab-row.js";
 import { cn } from "../lib/utils.js";
 /**
  * Panels of one surface that switch in place.
@@ -61,7 +60,6 @@ const tabsListVariants = cva("group/tabs-list inline-flex max-w-full w-fit items
 function TabsList({ className, variant = "default", ...props }) {
     return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-nc-ui": "", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
 }
-const tabShape = "nc-transition-paint relative inline-flex shrink-0 h-nadicode-control-height-sm min-h-touch-target min-w-touch-target items-center justify-center gap-1.5 rounded-sm px-3 text-label-sm font-normal whitespace-nowrap text-muted-foreground not-aria-disabled:hover:text-foreground aria-disabled:cursor-not-allowed focus-visible:-outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:text-body-sm";
 function TabsTrigger({ className, disabled, disabledReason, "aria-describedby": describedBy, ...props }) {
     const reasonId = React.useId();
     const description = [describedBy, disabledReason === undefined ? undefined : reasonId].filter(Boolean).join(" ") ||
@@ -74,91 +72,4 @@ function TabsTrigger({ className, disabled, disabledReason, "aria-describedby":
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("min-w-0 flex-1 text-sm outline-none", className), ...props }));
 }
-/** Which ends of a scrolled row hide links, so the row fades there to say more stand beyond. */
-function hiddenTabs(element) {
-    const start = element.scrollLeft > 1;
-    const end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
-    return start && end ? "both" : start ? "start" : end ? "end" : "none";
-}
-const HIDDEN_FADE = {
-    none: undefined,
-    start: "[mask-image:linear-gradient(to_right,transparent,black_2rem)]",
-    end: "[mask-image:linear-gradient(to_left,transparent,black_2rem)]",
-    both: "[mask-image:linear-gradient(to_right,transparent,black_2rem,black_calc(100%_-_2rem),transparent)]",
-};
-/**
- * Sibling views of one object, each with its own URL, under the top bar.
- *
- * @family Navigation
- * @when Sibling views of one object under the top bar, when each view has its own URL (an object's
- * sections), with `TabsLink` for each.
- * @instead Panels that switch in place are `Tabs`. A stable destination belongs in the `Sidebar`.
- * An object's ancestry is the `Breadcrumb`.
- * @behaviour "Reflect the active tab in the URL (query param or path) so deep-links and refresh restore state." (https://vercel.com/geist/tabs)
- * Ours: each view is its own URL, so a link carries it. Overflow scrolls sideways and brings the
- * current link into view, and the row fades out over 32 px at each end where links stand beyond it.
- * The current link takes the selection fill, or in `line` a 2 px ink underline over the row's 1 px
- * rule; the other links are muted until hover, with no hue. Sizes and spacing follow `Tabs`. The
- * row holds at most 7 links; in a `band`, which a phone scrolls sideways instead of holding
- * fewer, that is 7 at every width, as an Agent's six views do, and a `line` row follows the 7 and 4 cap of `Tabs`. The sub-pages of one object stand as the filled-pill row in a
- * `band` under the top bar, as Vercel draws a deployment's tabs: the band is this component's, with `above` for the
- * object's identity, so no page draws the border, the fill or the gutters around the row. The band
- * keeps the page's own column and gutter, and the first link's words start at the page title's edge,
- * its fill reaching into the gutter as Vercel's tabs do. The
- * `line` row has its own rule and takes no band.
- * @words "`tabs[].title` is Title Case, 1–2 words, and names the destination noun (`Overview`, `Logs`, `Settings`). Verbs belong on buttons; `View Logs` is wrong on a tab." (https://vercel.com/geist/tabs)
- * "Don’t append a count to the title (`Logs (12)`); use a badge slot instead and drop the badge at zero." (https://vercel.com/geist/tabs)
- * Ours: the title is sentence case (*Overview*, *Installations*), not Title Case. There is no badge
- * slot: a count belongs to the list's footer. A link has no icon. Italian scrolls, never wraps or
- * truncates.
- * @access "Label the tablist with `aria-label` when no visible heading sits above it (`aria-label="Sections"`)." (https://vercel.com/geist/tabs)
- * "Maintain a visible focus ring on the active tab; don’t suppress focus styles for visual polish." (https://vercel.com/geist/tabs)
- * Ours: a `nav` of links named by `aria-label` or `aria-labelledby`, which the type requires, with
- * `aria-current="page"` on the current one.
- */
-function TabsNav({ className, children, variant = "default", band = false, above, ...props }) {
-    const navigation = React.useRef(null);
-    const current = React.useRef(null);
-    const [hidden, setHidden] = React.useState("none");
-    React.useEffect(() => {
-        const element = navigation.current;
-        if (!element || typeof ResizeObserver === "undefined")
-            return;
-        const measure = () => setHidden(hiddenTabs(element));
-        measure();
-        const observer = new ResizeObserver(measure);
-        observer.observe(element);
-        element.addEventListener("scroll", measure, { passive: true });
-        return () => {
-            observer.disconnect();
-            element.removeEventListener("scroll", measure);
-        };
-    }, []);
-    React.useEffect(() => {
-        const element = navigation.current;
-        const link = element?.querySelector('[aria-current="page"]') ?? null;
-        if (!element || link === current.current)
-            return;
-        current.current = link;
-        if (link && element.scrollWidth > element.clientWidth) {
-            link.scrollIntoView({ block: "nearest", inline: "nearest" });
-        }
-    });
-    const row = (_jsx("nav", { ref: navigation, "data-slot": "tabs-nav", "data-variant": variant, className: cn("group/tabs-nav group/tabs-list min-w-0 overflow-x-auto", HIDDEN_FADE[hidden], variant === "line" && "pb-px shadow-[inset_0_-1px_0_0_var(--border)]", className), ...props, children: _jsx("ul", { className: "flex w-max min-w-full items-center gap-0 group-data-[variant=line]/tabs-nav:gap-6", children: children }) }));
-    if (!band)
-        return row;
-    return (_jsx("div", { "data-slot": "tabs-nav-band", className: "border-b bg-background", children: _jsxs("div", { className: "mx-auto w-full max-w-7xl px-6", children: [above, _jsx("div", { className: "-mx-3 py-2", children: row })] }) }));
-}
-function TabsLink({ current = false, className, render, ...props }) {
-    const link = useRender({
-        defaultTagName: "a",
-        render,
-        props: mergeProps({
-            "aria-current": current ? "page" : undefined,
-            className: cn(tabShape, "group-data-[variant=line]/tabs-nav:-mb-px group-data-[variant=line]/tabs-nav:h-12.5 group-data-[variant=line]/tabs-nav:px-0.5", "group-data-[variant=default]/tabs-nav:aria-[current=page]:bg-selection group-data-[variant=default]/tabs-nav:aria-[current=page]:text-selection-foreground", "group-data-[variant=line]/tabs-nav:aria-[current=page]:text-foreground", "after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:opacity-0 group-data-[variant=line]/tabs-nav:aria-[current=page]:after:opacity-100", className),
-        }, props),
-        state: { slot: "tabs-link", current },
-    });
-    return _jsx("li", { className: "flex", children: link });
-}
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, TabsLink, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

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

@@ -9,8 +9,7 @@ import { type VariantProps } from "class-variance-authority";
  * a secondary way out beside the content, such as a card header's *See everything*, which takes the
  * same blue treatment as `inline`; or a muted way to somewhere such as a footer's *Learn more*
  * (`quiet`).
- * @instead A command is a `Button`; a destination drawn as a button is a link with
- * `buttonVariants`. Going to a record from its row is the record's name in `RecordIdentity`.
+ * @instead A command is a `Button`; a destination drawn as a button is a `ButtonLink`. Going to a record from its row is the record's name in `RecordIdentity`.
  * Breadcrumb and back navigation are not text links: they keep their own quieter navigation
  * treatment.
  * @behaviour Classes only: the caller renders the real anchor or router link. `inline` thickens its

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

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

package/dist/components/text-link.js

@@ -9,8 +9,7 @@ import { cva } from "class-variance-authority";
  * a secondary way out beside the content, such as a card header's *See everything*, which takes the
  * same blue treatment as `inline`; or a muted way to somewhere such as a footer's *Learn more*
  * (`quiet`).
- * @instead A command is a `Button`; a destination drawn as a button is a link with
- * `buttonVariants`. Going to a record from its row is the record's name in `RecordIdentity`.
+ * @instead A command is a `Button`; a destination drawn as a button is a `ButtonLink`. Going to a record from its row is the record's name in `RecordIdentity`.
  * Breadcrumb and back navigation are not text links: they keep their own quieter navigation
  * treatment.
  * @behaviour Classes only: the caller renders the real anchor or router link. `inline` thickens its

package/dist/components/textarea.d.ts

@@ -7,6 +7,8 @@ type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
     description?: string;
     /** The message under the box, in the product's words; it also marks the box invalid. */
     error?: string;
+    /** One control in the box's bottom-end corner, inside its ring: a prompt's Ask. */
+    action?: React.ReactNode;
 } & FieldName;
 /**
  * Several lines of free text that grow with their content.
@@ -32,7 +34,8 @@ type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
  * newlines don’t pass a `required` check." (https://vercel.com/geist/textarea) Ours: typing keeps
  * every space and newline; the save of `FormDialog`, `FormDrawer`, `RowEditForm` and
  * `SettingsSection` trims the ends (see `Field`). A character count shows only when a real limit
- * exists.
+ * exists. `action` puts one control in the bottom-end corner inside the box's ring, as a prompt's
+ * Ask sits under what was typed.
  * @words "Labels are short Title Case nouns (`Description`, `Release Notes`); placeholders show an
  * example value, not instructions like `Enter a description`." (https://vercel.com/geist/textarea)
  * "Validation names the field and constraint, ends in a period, and skips `please` (`Description is
@@ -44,6 +47,6 @@ type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
  * @access A visible label tied by `id`, or `aria-label`; the error through `aria-describedby`. In a
  * dialog, the footer's Save stays reachable while the box grows.
  */
-declare function Textarea({ label, description, error, size, className, ...props }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, description, error, size, action, className, ...props }: TextareaProps): React.JSX.Element;
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAqB7F,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,GAAG;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EACL,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,qBAgBf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAqB7F,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,GAAG;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,GAAG,SAAS,CAAC;AAKd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EACL,IAAgB,EAChB,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,qBA2Bf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/textarea.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
+import { InputGroup, InputGroupAddon } from "./input-group.js";
 import { FieldFrame } from "../internal/field-frame.js";
 import { fieldDisabled, fieldRing, fieldStates } from "../internal/input-box.js";
 const textareaVariants = cva([
@@ -18,6 +19,7 @@ const textareaVariants = cva([
     },
     defaultVariants: { size: "default" },
 });
+const inGroup = "flex-1 resize-none rounded-none bg-transparent shadow-none focus-visible:outline-none disabled:bg-transparent aria-invalid:outline-none";
 /**
  * Several lines of free text that grow with their content.
  *
@@ -42,7 +44,8 @@ const textareaVariants = cva([
  * newlines don’t pass a `required` check." (https://vercel.com/geist/textarea) Ours: typing keeps
  * every space and newline; the save of `FormDialog`, `FormDrawer`, `RowEditForm` and
  * `SettingsSection` trims the ends (see `Field`). A character count shows only when a real limit
- * exists.
+ * exists. `action` puts one control in the bottom-end corner inside the box's ring, as a prompt's
+ * Ask sits under what was typed.
  * @words "Labels are short Title Case nouns (`Description`, `Release Notes`); placeholders show an
  * example value, not instructions like `Enter a description`." (https://vercel.com/geist/textarea)
  * "Validation names the field and constraint, ends in a period, and skips `please` (`Description is
@@ -54,7 +57,12 @@ const textareaVariants = cva([
  * @access A visible label tied by `id`, or `aria-label`; the error through `aria-describedby`. In a
  * dialog, the footer's Save stays reachable while the box grows.
  */
-function Textarea({ label, description, error, size = "default", className, ...props }) {
-    return (_jsx(FieldFrame, { label: label, description: description, error: error, size: size, control: props, children: (aria) => (_jsx("textarea", { "data-slot": "textarea", "data-nc-ui": "", "data-size": size, "data-field-frame": "", className: cn(textareaVariants({ size }), className), ...props, ...aria })) }));
+function Textarea({ label, description, error, size = "default", action, className, ...props }) {
+    return (_jsx(FieldFrame, { label: label, description: description, error: error, size: size, control: props, children: (aria) => {
+            const box = (_jsx("textarea", { "data-slot": action === undefined ? "textarea" : "input-group-control", "data-nc-ui": "", "data-size": size, "data-field-frame": "", className: cn(textareaVariants({ size }), action !== undefined && inGroup, className), ...props, ...aria }));
+            if (action === undefined)
+                return box;
+            return (_jsxs(InputGroup, { size: size, children: [box, _jsx(InputGroupAddon, { align: "block-end", className: "justify-end", children: action })] }));
+        } }));
 }
 export { Textarea };

package/dist/components/toast.d.ts

@@ -1,5 +1,7 @@
 import { type ResolvedMessage } from "./product-message.js";
 export type MessageToastTone = "success" | "info" | "warning" | "error";
+/** Takes down every toast on screen, such as between two tests that share the toaster. */
+export declare function dismissToasts(): void;
 export declare function showMessageToast(message: ResolvedMessage, options: {
     tone: MessageToastTone;
     id?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/components/toast.ts"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAExE,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAC/C,IAAI,CAON"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/components/toast.ts"],"names":[],"mappings":"AAIA,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAExE,0FAA0F;AAC1F,wBAAgB,aAAa,IAAI,IAAI,CAEpC;AAED,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE;IAAE,IAAI,EAAE,gBAAgB,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAC/C,IAAI,CAON"}

package/dist/components/toast.js

@@ -2,6 +2,10 @@
 // a string, so sonner is imported here and nowhere else.
 import { toast } from "sonner";
 import { bodyBeyondTitle } from "./product-message.js";
+/** Takes down every toast on screen, such as between two tests that share the toaster. */
+export function dismissToasts() {
+    toast.dismiss();
+}
 export function showMessageToast(message, options) {
     const action = message.actions.find((command) => command.onClick !== undefined);
     toast[options.tone](message.title, {

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

@@ -36,7 +36,9 @@ type ToggleGroupMemberName = {
  * *Reasoning*.
  * @access `role="group"` with a name; each member a button with `aria-pressed`.
  */
-declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, ...props }: Omit<ToggleGroupPrimitive.Props, "aria-label" | "aria-labelledby"> & ToggleGroupName & VariantProps<typeof toggleVariants> & {
+declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, ...props }: Omit<ToggleGroupPrimitive.Props, "aria-label" | "aria-labelledby" | "style"> & {
+    style?: React.CSSProperties;
+} & ToggleGroupName & VariantProps<typeof toggleVariants> & {
     spacing?: number;
     orientation?: "horizontal" | "vertical";
 }): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD,KAAK,eAAe,GAChB;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,CAAC;AAE5D,KAAK,qBAAqB,GACtB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3C;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEzD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,GACnE,eAAe,GACf,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,qBA4BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,GACxC,qBAAqB,GACrB,YAAY,CAAC,OAAO,cAAc,CAAC,qBAuBpC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD,KAAK,eAAe,GAChB;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,CAAC;AAE5D,KAAK,qBAAqB,GACtB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3C;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEzD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,YAAY,GAAG,iBAAiB,GAAG,OAAO,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,eAAe,GACjB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,qBAyBF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,GACxC,qBAAqB,GACrB,YAAY,CAAC,OAAO,cAAc,CAAC,qBAuBpC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/toggle-group.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
 import { cn } from "../lib/utils.js";
+import { cssVariables } from "../lib/css-variables.js";
 import { toggleVariants } from "./toggle.js";
 const ToggleGroupContext = React.createContext({
     size: "default",
@@ -31,12 +32,8 @@ const ToggleGroupContext = React.createContext({
  * @access `role="group"` with a name; each member a button with `aria-pressed`.
  */
 function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", style, children, ...props }) {
-    return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-nc-ui": "", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, orientation: orientation, 
-        // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
-        style: {
-            ...style,
-            "--gap": spacing,
-        }, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-sm data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children: children }) }));
+    const groupContext = React.useMemo(() => ({ variant, size, spacing, orientation }), [variant, size, spacing, orientation]);
+    return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-nc-ui": "", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, orientation: orientation, style: cssVariables({ ...style, "--gap": spacing }), className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-sm data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: groupContext, children: children }) }));
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
     const context = React.useContext(ToggleGroupContext);

package/dist/components/toggle.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
-const toggleVariants = cva("group/toggle inline-flex has-[>svg:only-child]:aspect-square has-[>svg:only-child]:px-0 min-h-touch-target min-w-touch-target items-center justify-center gap-1 rounded-sm border border-transparent text-button font-medium whitespace-nowrap transition-[background-color,border-color,color,opacity] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-pressed:bg-accent aria-pressed:font-semibold aria-pressed:text-accent-foreground data-pressed:bg-accent data-pressed:font-semibold data-pressed:text-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const toggleVariants = cva("group/toggle inline-flex has-[>svg:only-child]:aspect-square has-[>svg:only-child]:px-0 min-h-touch-target min-w-touch-target items-center justify-center gap-1 rounded-sm border border-transparent text-button font-medium whitespace-nowrap nc-transition-paint   hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-pressed:bg-accent aria-pressed:font-semibold aria-pressed:text-accent-foreground data-pressed:bg-accent data-pressed:font-semibold data-pressed:text-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
             default: "bg-transparent",

package/dist/components/tooltip.d.ts

@@ -1,5 +1,6 @@
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import type { PresentContent } from "../internal/present-content.js";
+import { type KbdProps } from "./kbd.js";
+import { type TooltipContentFrameProps } from "../internal/tooltip-content-frame.js";
 declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
 /**
  * A short, optional fact about its trigger.
@@ -28,9 +29,10 @@ declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.
  * wide, 13 px text balanced over its lines. Never interactive. `arrow={false}` drops the stem (Geist's
  * `tip={false}`); `centerText={false}` left-aligns a tooltip that wraps (Geist's `center={false}`).
  * Geist's coloured `type` is not provided. `TooltipContent` requires its text as
- * children. Colour: one inverted neutral, the page's ink as the fill and its surface as the
- * text, with a stem of the same fill and no hue, in both themes; a shortcut is a `Kbd` after the
- * text, drawn 20 px high.
+ * children, one string, so no control, link or second overlay fits inside it. Colour: one
+ * inverted neutral, the page's ink as the fill and its surface as the text, with a stem of the
+ * same fill and no hue, in both themes; a shortcut is `shortcut`, the `Kbd`'s props, drawn as a
+ * `Kbd` after the text, 20 px high.
  * @words "One sentence or fragment in `text`." "Sentence case, no period for a single fragment."
  * "Skip tooltips that repeat the visible label (`text="Rate Limit"` on a `Rate Limit` button) or
  * describe the interaction (`text="Click to override"`)." "Lifecycle Tooltips follow `{Label}:
@@ -41,15 +43,13 @@ declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.
  * context, it doesn’t replace the label." "Escape closes the tooltip and returns focus to the
  * trigger." (https://vercel.com/geist/tooltip)
  */
-declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
+declare function Tooltip({ ...props }: Omit<TooltipPrimitive.Root.Props, "defaultOpen">): import("react").JSX.Element;
 declare function TooltipTrigger({ delay, ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function TooltipContent({ className, side, sideOffset, align, alignOffset, arrow, centerText, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
-    /** The text of the tooltip; a tooltip without one does not compile. */
-    children: PresentContent;
-    /** The stem pointing at the trigger; `false` for a tooltip that sits against it. */
-    arrow?: boolean;
-    /** Centres the text of a tooltip that wraps; `false` left-aligns it. */
-    centerText?: boolean;
+declare function TooltipContent({ children, shortcut, ...props }: Omit<TooltipContentFrameProps, "children"> & {
+    /** The text of the tooltip: words only, so no control or second overlay fits inside it. */
+    children: string;
+    /** The key that runs the trigger's command, drawn as a `Kbd` after the text. */
+    shortcut?: KbdProps;
 }): import("react").JSX.Element;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 //# sourceMappingURL=tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAQjE,iBAAS,eAAe,CAAC,EAAE,KAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAM5F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAS1E;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAe,EACf,KAAgB,EAChB,WAAe,EACf,KAAY,EACZ,UAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG;IACzF,uEAAuE;IACvE,QAAQ,EAAE,cAAc,CAAC;IACzB,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,+BA+BF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAGrE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAC;AAM1C,iBAAS,eAAe,CAAC,EAAE,KAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,+BAM5F;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,+BAE9E;AAED,iBAAS,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,+BAS1E;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,wBAAwB,EAAE,UAAU,CAAC,GAAG;IAC9C,2FAA2F;IAC3F,QAAQ,EAAE,MAAM,CAAC;IACjB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,+BAYA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/tooltip.js

@@ -1,10 +1,9 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 import { createContext, useContext } from "react";
-import { overlayStem, OverlayStemShape } from "../internal/overlay-stem.js";
-import { cn } from "../lib/utils.js";
-import { anchoredOverlayMotion } from "../lib/motion.js";
+import { Kbd } from "./kbd.js";
+import { TooltipContentFrame, } from "../internal/tooltip-content-frame.js";
 const TOOLTIP_DELAY = 150;
 const TooltipDelay = createContext(TOOLTIP_DELAY);
 function TooltipProvider({ delay = TOOLTIP_DELAY, ...props }) {
@@ -37,9 +36,10 @@ function TooltipProvider({ delay = TOOLTIP_DELAY, ...props }) {
  * wide, 13 px text balanced over its lines. Never interactive. `arrow={false}` drops the stem (Geist's
  * `tip={false}`); `centerText={false}` left-aligns a tooltip that wraps (Geist's `center={false}`).
  * Geist's coloured `type` is not provided. `TooltipContent` requires its text as
- * children. Colour: one inverted neutral, the page's ink as the fill and its surface as the
- * text, with a stem of the same fill and no hue, in both themes; a shortcut is a `Kbd` after the
- * text, drawn 20 px high.
+ * children, one string, so no control, link or second overlay fits inside it. Colour: one
+ * inverted neutral, the page's ink as the fill and its surface as the text, with a stem of the
+ * same fill and no hue, in both themes; a shortcut is `shortcut`, the `Kbd`'s props, drawn as a
+ * `Kbd` after the text, 20 px high.
  * @words "One sentence or fragment in `text`." "Sentence case, no period for a single fragment."
  * "Skip tooltips that repeat the visible label (`text="Rate Limit"` on a `Rate Limit` button) or
  * describe the interaction (`text="Click to override"`)." "Lifecycle Tooltips follow `{Label}:
@@ -57,7 +57,7 @@ function TooltipTrigger({ delay, ...props }) {
     const inheritedDelay = useContext(TooltipDelay);
     return (_jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", delay: delay ?? inheritedDelay, ...props }));
 }
-function TooltipContent({ className, side = "top", sideOffset = 10, align = "center", alignOffset = 0, arrow = true, centerText = true, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", "data-nc-ui": "", className: cn("z-50 w-fit max-w-62.5 rounded-md border-0 bg-foreground px-nadicode-xs py-1.5 text-body-compact text-balance text-background nc-elevation-floating has-data-[slot=kbd]:inline-flex has-data-[slot=kbd]:items-center has-data-[slot=kbd]:gap-1 has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:h-5 **:data-[slot=kbd]:min-w-5 **:data-[slot=kbd]:text-caption **:data-[slot=kbd]:leading-5", centerText ? "text-center" : "text-left", anchoredOverlayMotion, className), ...props, children: [children, arrow ? (_jsx(TooltipPrimitive.Arrow, { className: cn(overlayStem, "[&_path]:fill-foreground"), children: _jsx(OverlayStemShape, {}) })) : null] }) }) }));
+function TooltipContent({ children, shortcut, ...props }) {
+    return (_jsxs(TooltipContentFrame, { ...props, children: [children, shortcut ? (_jsxs(_Fragment, { children: [" ", _jsx(Kbd, { ...shortcut })] })) : null] }));
 }
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/components/trend-badge.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
-import { Badge } from "./badge.js";
+import { BadgeFrame } from "../internal/badge-frame.js";
 const TREND_ICONS = {
     up: TrendingUpIcon,
     down: TrendingDownIcon,
@@ -34,6 +34,6 @@ function trendTone(direction, upIsGood = true, neutral = false) {
  */
 function TrendBadge({ value, direction, tone, directionLabel, }) {
     const Icon = TREND_ICONS[direction];
-    return (_jsxs(Badge, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: "tabular-nums", icon: _jsx(Icon, { "aria-hidden": "true", className: TREND_TONE_CLASS[tone] }), children: [_jsx("span", { className: "sr-only", children: directionLabel }), value] }));
+    return (_jsxs(BadgeFrame, { "data-slot": "trend-badge", "data-direction": direction, "data-tone": tone, variant: "outline", className: "tabular-nums", icon: _jsx(Icon, { "aria-hidden": "true", className: TREND_TONE_CLASS[tone] }), children: [_jsx("span", { className: "sr-only", children: directionLabel }), value] }));
 }
 export { TrendBadge, trendTone };