@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/breadcrumb.d.ts

@@ -1,25 +1,36 @@
 import * as React from "react";
 import { useRender } from "@base-ui/react/use-render";
+type BreadcrumbType = "text" | "menu";
 type BreadcrumbProps = Omit<React.ComponentProps<"nav">, "aria-label"> & {
     /** The path's name in the product's language, such as "Path". */
     "aria-label": string;
+    /** `text` is the line with a chevron between steps; `menu` is a row of small chips. */
+    type?: BreadcrumbType;
 };
 /**
  * The top bar's path to the page.
  *
  * @family Navigation
- * @when The top bar of every product page: the sidebar group or the parents, ending at the destination or the object. An object opened from search still shows its parent.
+ * @when "Navigation aid that shows the user's location within a site's hierarchy, with text and menu variants." (https://vercel.com/geist/breadcrumbs)
+ * Ours: the top bar of every product page: the sidebar group or the parents, ending at the destination or the object. An object opened from search still shows its parent.
  * @instead Never a back button in its place. A return link may remember a visit, beside the path, not instead of it. Sibling views are tabs.
- * @behaviour Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item.
+ * @behaviour Neutral only, one step of grey carries every state. `text` (the default) is a 20 px line of 14 px text with a 16 px chevron between steps and 6 px around each; `menu` is a row of 22 px chips with a rule and no chevrons, each chip cut with an ellipsis past 10 rem and carrying its full name in a tooltip, scrolling sideways when the path is long; a chip's rule darkens a step on hover. Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. An ancestor the person may not open is a `BreadcrumbLink` with `disabled`: the placeholder grey, which sits close to the muted grey, so `aria-disabled`, the not-allowed cursor and no hover carry the state, and the type refuses an `href` or a `render` on it, so it cannot navigate. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item.
  * @words The groups' and records' own names, exactly as the sidebar and the record write them. The `aria-label` and the ellipsis's `label` come from the product's catalogue: "Path", "More".
- * @access A labelled `nav` with an ordered list; the current item has `aria-current="page"`; the chevrons and the ⋯ glyph are hidden, and the folded middle reads its `label`.
+ * @access A labelled `nav` with an ordered list; the current item has `aria-current="page"`; a disabled ancestor has `aria-disabled`; the chevrons and the ⋯ glyph are hidden, and the folded middle reads its `label`.
  */
-declare function Breadcrumb({ className, ...props }: BreadcrumbProps): React.JSX.Element;
+declare function Breadcrumb({ className, type, ...props }: BreadcrumbProps): React.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type BreadcrumbLinkProps = useRender.ComponentProps<"a"> & ({
+    disabled?: false | undefined;
+} | {
+    disabled: true;
+    href?: never;
+    render?: never;
+});
+declare function BreadcrumbLink({ children, className, disabled, render, ...props }: BreadcrumbLinkProps): React.JSX.Element;
+declare function BreadcrumbPage({ children, className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element | null;
 declare function BreadcrumbEllipsis({ className, label, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
     /** What the folded middle reads to a screen reader, such as "More". */
     label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,GAAG;IACvE,iEAAiE;IACjE,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;GASG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAE3D;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,0EAcrF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW5E;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAYzF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACf,qBAWA;AAED,YAAY,EAAE,eAAe,EAAE,CAAC;AAChC,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAMtD,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAItC,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,GAAG;IACvE,iEAAiE;IACjE,YAAY,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW1E;AA8BD,KAAK,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,GACtD,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAExF,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAsBrB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAmBtF;AAED,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,4BAczF;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACf,qBAWA;AAED,YAAY,EAAE,eAAe,EAAE,CAAC;AAChC,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}

package/dist/components/breadcrumb.js

@@ -1,44 +1,68 @@
+"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 { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { cn } from "../lib/utils.js";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+const BreadcrumbTypeContext = React.createContext("text");
 /**
  * The top bar's path to the page.
  *
  * @family Navigation
- * @when The top bar of every product page: the sidebar group or the parents, ending at the destination or the object. An object opened from search still shows its parent.
+ * @when "Navigation aid that shows the user's location within a site's hierarchy, with text and menu variants." (https://vercel.com/geist/breadcrumbs)
+ * Ours: the top bar of every product page: the sidebar group or the parents, ending at the destination or the object. An object opened from search still shows its parent.
  * @instead Never a back button in its place. A return link may remember a visit, beside the path, not instead of it. Sibling views are tabs.
- * @behaviour Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item.
+ * @behaviour Neutral only, one step of grey carries every state. `text` (the default) is a 20 px line of 14 px text with a 16 px chevron between steps and 6 px around each; `menu` is a row of 22 px chips with a rule and no chevrons, each chip cut with an ellipsis past 10 rem and carrying its full name in a tooltip, scrolling sideways when the path is long; a chip's rule darkens a step on hover. Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. An ancestor the person may not open is a `BreadcrumbLink` with `disabled`: the placeholder grey, which sits close to the muted grey, so `aria-disabled`, the not-allowed cursor and no hover carry the state, and the type refuses an `href` or a `render` on it, so it cannot navigate. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item.
  * @words The groups' and records' own names, exactly as the sidebar and the record write them. The `aria-label` and the ellipsis's `label` come from the product's catalogue: "Path", "More".
- * @access A labelled `nav` with an ordered list; the current item has `aria-current="page"`; the chevrons and the ⋯ glyph are hidden, and the folded middle reads its `label`.
+ * @access A labelled `nav` with an ordered list; the current item has `aria-current="page"`; a disabled ancestor has `aria-disabled`; the chevrons and the ⋯ glyph are hidden, and the folded middle reads its `label`.
  */
-function Breadcrumb({ className, ...props }) {
-    return _jsx("nav", { "data-slot": "breadcrumb", className: cn(className), ...props });
+function Breadcrumb({ className, type = "text", ...props }) {
+    return (_jsx(BreadcrumbTypeContext.Provider, { value: type, children: _jsx("nav", { "data-slot": "breadcrumb", "data-type": type, className: cn("group/breadcrumb min-w-0", className), ...props }) }));
 }
 function BreadcrumbList({ className, ...props }) {
-    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className), ...props }));
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-body-sm wrap-break-word text-muted-foreground group-data-[type=menu]/breadcrumb:flex-nowrap group-data-[type=menu]/breadcrumb:gap-2 group-data-[type=menu]/breadcrumb:overflow-x-auto group-data-[type=menu]/breadcrumb:text-caption", className), ...props }));
 }
 function BreadcrumbItem({ className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1", className), ...props }));
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1 group-data-[type=menu]/breadcrumb:shrink-0", className), ...props }));
 }
-function BreadcrumbLink({ className, render, ...props }) {
-    return useRender({
+const crumbShape = "rounded-xs-plus group-data-[type=menu]/breadcrumb:inline-block group-data-[type=menu]/breadcrumb:max-w-40 group-data-[type=menu]/breadcrumb:truncate group-data-[type=menu]/breadcrumb:border group-data-[type=menu]/breadcrumb:border-border group-data-[type=menu]/breadcrumb:bg-muted group-data-[type=menu]/breadcrumb:px-1.5 group-data-[type=menu]/breadcrumb:py-0.5";
+function ChipTooltip({ children, crumb, }) {
+    const type = React.useContext(BreadcrumbTypeContext);
+    if (type !== "menu" ||
+        children === null ||
+        children === undefined ||
+        children === true ||
+        children === false) {
+        return crumb;
+    }
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: crumb }), _jsx(TooltipContent, { children: children })] }));
+}
+function BreadcrumbLink({ children, className, disabled = false, render, ...props }) {
+    const crumb = useRender({
         defaultTagName: "a",
         props: mergeProps({
-            className: cn("transition-colors hover:text-foreground", className),
+            className: cn(crumbShape, "transition-colors not-aria-disabled:hover:text-foreground group-data-[type=menu]/breadcrumb:not-aria-disabled:hover:border-input group-data-[type=menu]/breadcrumb:not-aria-disabled:hover:bg-accent aria-disabled:cursor-not-allowed aria-disabled:text-placeholder", className),
+            children,
+            "aria-disabled": disabled || undefined,
+            role: disabled ? "link" : undefined,
         }, props),
         render,
         state: {
             slot: "breadcrumb-link",
         },
     });
+    return _jsx(ChipTooltip, { crumb: crumb, children: children });
 }
-function BreadcrumbPage({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props }));
+function BreadcrumbPage({ children, className, ...props }) {
+    return (_jsx(ChipTooltip, { crumb: _jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn(crumbShape, "font-normal text-foreground", className), ...props, children: children }), children: children }));
 }
 function BreadcrumbSeparator({ children, className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRightIcon, {}) }));
+    const type = React.useContext(BreadcrumbTypeContext);
+    if (type === "menu")
+        return null;
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-4", className), ...props, children: children ?? _jsx(ChevronRightIcon, {}) }));
 }
 function BreadcrumbEllipsis({ className, label, ...props }) {
     return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className), ...props, children: [_jsx(MoreHorizontalIcon, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: label })] }));

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

@@ -1,5 +1,6 @@
 import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
+import type { AccessibleName } from "./button.js";
 import { Separator } from "./separator.js";
 declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
@@ -9,23 +10,19 @@ declare const buttonGroupVariants: (props?: ({
  *
  * @family Actions
  * @when Two or three buttons that act on one thing and read as one control: an applied filter with
- * its remove, a pager. A split action (*Download PDF* with its chevron for CSV and Excel) is a
- * group of a `Button` and a `DropdownMenu` trigger.
- * @instead Choosing one value of several is a `RadioGroup` drawn as a segmented control, or a
- * `ToggleGroup`. Unrelated actions stay separate buttons 8 px apart. A destructive command never
- * sits in a split, neither as the default nor in its menu.
- * @behaviour One shared edge between members and rounded outer corners only. The focused member
- * rises above its neighbours so its whole outline shows. Each member keeps its own tab stop. In a
- * split, the left half runs the default and the chevron opens the menu with the default listed
- * first and checked.
+ * its remove, a pager.
+ * @instead Two or three views of one surface are a `SegmentedControl`; one value of several is a
+ * `RadioGroup`; pressed buttons that can be several or none are a `ToggleGroup`. Unrelated actions
+ * stay separate buttons 8 px apart.
+ * @behaviour One shared edge between members and rounded outer corners only, at the radius of the
+ * members' size. The focused member rises above its neighbours so its whole outline shows. Each
+ * member keeps its own tab stop.
  * @words Each member is labelled on its own. The group's name says what it holds: *Status filter*,
- * *Pages*. A split's default names its variant (*Download PDF*); its chevron names the family:
- * *More download formats*.
- * @access `role="group"` with an `aria-label`. An icon member names its action and target: *Remove
- * filter: Status*. A split's chevron has `aria-haspopup="menu"`, `aria-expanded` and its own
- * `aria-label`.
+ * *Pages*.
+ * @access `role="group"` named by `aria-label` or `aria-labelledby`, and the type requires it. An
+ * icon member names its action and target: *Remove filter: Status*.
  */
-declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & AccessibleName & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
 declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/components/button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,+BAUxE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,8FAiBxF;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,+BAYxC;AAED,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/components/button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,+BAUzF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,8FAiBxF;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,+BAYxC;AAED,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/button-group.js

@@ -7,8 +7,8 @@ import { Separator } from "./separator.js";
 const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-sm [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     variants: {
         orientation: {
-            horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-sm! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
-            vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-sm! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+            horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-sm! [&>:is([data-size=lg],[data-size=icon-lg]):not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+            vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-sm! [&>:is([data-size=lg],[data-size=icon-lg]):not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
         },
     },
     defaultVariants: {
@@ -20,21 +20,17 @@ const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relati
  *
  * @family Actions
  * @when Two or three buttons that act on one thing and read as one control: an applied filter with
- * its remove, a pager. A split action (*Download PDF* with its chevron for CSV and Excel) is a
- * group of a `Button` and a `DropdownMenu` trigger.
- * @instead Choosing one value of several is a `RadioGroup` drawn as a segmented control, or a
- * `ToggleGroup`. Unrelated actions stay separate buttons 8 px apart. A destructive command never
- * sits in a split, neither as the default nor in its menu.
- * @behaviour One shared edge between members and rounded outer corners only. The focused member
- * rises above its neighbours so its whole outline shows. Each member keeps its own tab stop. In a
- * split, the left half runs the default and the chevron opens the menu with the default listed
- * first and checked.
+ * its remove, a pager.
+ * @instead Two or three views of one surface are a `SegmentedControl`; one value of several is a
+ * `RadioGroup`; pressed buttons that can be several or none are a `ToggleGroup`. Unrelated actions
+ * stay separate buttons 8 px apart.
+ * @behaviour One shared edge between members and rounded outer corners only, at the radius of the
+ * members' size. The focused member rises above its neighbours so its whole outline shows. Each
+ * member keeps its own tab stop.
  * @words Each member is labelled on its own. The group's name says what it holds: *Status filter*,
- * *Pages*. A split's default names its variant (*Download PDF*); its chevron names the family:
- * *More download formats*.
- * @access `role="group"` with an `aria-label`. An icon member names its action and target: *Remove
- * filter: Status*. A split's chevron has `aria-haspopup="menu"`, `aria-expanded` and its own
- * `aria-label`.
+ * *Pages*.
+ * @access `role="group"` named by `aria-label` or `aria-labelledby`, and the type requires it. An
+ * icon member names its action and target: *Remove filter: Status*.
  */
 function ButtonGroup({ className, orientation, ...props }) {
     return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
@@ -43,7 +39,7 @@ function ButtonGroupText({ className, render, ...props }) {
     return useRender({
         defaultTagName: "div",
         props: mergeProps({
-            className: cn("flex items-center gap-2 rounded-sm border bg-muted px-control-padding-inline text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+            className: cn("flex items-center gap-2 rounded-sm border bg-muted px-4 text-button font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
         }, props),
         render,
         state: {

package/dist/components/button.d.ts

@@ -1,36 +1,139 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
+import { type ReactNode } from "react";
 declare const buttonClasses: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "brandGhost" | "brandSolid" | "destructive" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "brandGhost" | "brandSolid" | "destructive" | "warning" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    shape?: "square" | "rounded" | "circle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariant = NonNullable<VariantProps<typeof buttonClasses>["variant"]>;
+type ButtonSize = NonNullable<VariantProps<typeof buttonClasses>["size"]>;
+type IconSize = Extract<ButtonSize, `icon${string}`>;
+type TextSize = Exclude<ButtonSize, IconSize>;
 /**
- * The button classes for an element that is not a `Button`, such as a link
- * drawn as one. They pass through `cn` as `Button`'s do, so a variant's
- * border, fill or text replaces the base one instead of losing to it in the
- * stylesheet: unmerged, the base `border-transparent` hides every outline edge.
+ * The button classes for an element that is not a `Button`, such as a calendar's
+ * day arrows. They pass through `cn` as `Button`'s do, so a variant's border,
+ * fill or text replaces the base one instead of losing to it in the stylesheet:
+ * unmerged, the base `border-transparent` hides every outline edge. A link
+ * drawn as a button is a `ButtonLink`.
  */
 declare function buttonVariants(props?: Parameters<typeof buttonClasses>[0]): string;
+export type LoadingWord = {
+    loading?: undefined;
+    loadingLabel?: undefined;
+} | {
+    loading: boolean;
+    loadingLabel: string;
+};
+type TextLook = LoadingWord & {
+    size?: TextSize | undefined;
+    shape?: "square" | "rounded" | undefined;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+};
+export type AccessibleName = {
+    "aria-label": string;
+    "aria-labelledby"?: string | undefined;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: string | undefined;
+};
+type IconLook = AccessibleName & {
+    size: IconSize;
+    shape?: "square" | "circle" | undefined;
+    loading?: boolean | undefined;
+    loadingLabel?: undefined;
+    prefix?: undefined;
+    suffix?: undefined;
+};
+type ButtonBase = Omit<ButtonPrimitive.Props, "aria-busy" | "prefix"> & {
+    variant?: ButtonVariant | undefined;
+};
+export type TextButtonProps = ButtonBase & TextLook;
+export type IconButtonProps = ButtonBase & IconLook;
+export type ButtonProps = TextButtonProps | IconButtonProps;
+/** An icon button a component draws and names itself: the caller may change the look or the name. */
+export type IconButtonPartProps = Omit<IconButtonProps, "size" | "aria-label" | "aria-labelledby"> & {
+    size?: IconButtonProps["size"] | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+};
 /**
- * The package's one button: five looks at 36 px, the label naming the result.
+ * The package's one button: a command, its label naming the result.
  *
  * @family Actions
- * @when A command that changes something or opens a surface. One `default` per surface: the thing
- * this page or dialog is for.
- * @instead Going somewhere is a link drawn with `buttonVariants`, and a link inside a sentence is
- * `TextLink`, blue and underlined. A record's secondary commands go in `ActionMenu`. An on/off
- * value is a `Switch`.
- * @behaviour Enter and Space run it. A press settles at 97% scale in 180 ms, except on a trigger
- * that opens a popup. Disabled is 50% and ignores the pointer, and its reason is written beside it.
- * On touch the target grows to 44 px while the drawing stays 36. `sm` and `xs` are for a control
- * nested in dense content, such as a composer or an input group, never for chrome.
- * @words Sentence case, verb + noun naming the result: *Invite member*, *Remove mailbox*; never OK,
- * Submit or Confirm. Italian runs about a third longer (*Rimuovi casella*), so a footer leaves room
- * and a label never wraps.
- * @access A native `button`, `type="button"` unless it submits. An icon-only button carries an
- * `aria-label` naming action and target. Focus is the 2 px ink outline at 2 px offset, drawn once
- * by the base layer, never repainted.
+ * @when "Use `Button` for actions that mutate state (deploy, save, delete); use `ButtonLink` for navigation that changes the URL." (https://vercel.com/geist/button)
+ * Ours: one `default` per surface, the thing this page or dialog is for.
+ * @instead "Switch to a `Menu` or `Split Button` when more than one related action shares a row." (https://vercel.com/geist/button)
+ * Ours: a link inside a sentence is `TextLink`. A record's secondary commands go in `ActionMenu`. Appending to a list is a
+ * `LoadMoreButton`. An on/off value is a `Switch`.
+ * @behaviour "Default `Button` is primary." (https://vercel.com/geist/button)
+ * "Pass `type="secondary"` for the supporting action and `type="error"` for destructive confirmations." (https://vercel.com/geist/button)
+ * "`primary`, `success`, `ghost`, and `violet` are not valid `type` values." (https://vercel.com/geist/button)
+ * "For form submits, use `typeName="submit"`." (https://vercel.com/geist/button)
+ * "The HTML `type` attribute lives on `typeName`, not on `type`, which controls the visual variant." (https://vercel.com/geist/button)
+ * Ours: the look is `variant` (`default`, `secondary`, `outline`, `ghost`, `link`, `destructive` for
+ * Geist's error, `warning`) and `type` is the HTML type, `button` unless it submits.
+ * "The default size is medium." (https://vercel.com/geist/button)
+ * Ours: `xs`, `sm`, `default` (medium) and `lg`; `sm` and `xs` are for a control nested in dense
+ * content, such as a composer or an input group, never for chrome.
+ * "Pass `loading` instead of swapping in a spinner so the button stays focusable and announces the busy state to assistive tech." (https://vercel.com/geist/button)
+ * Ours: `loading` is the only busy state: the button keeps its place and focus, says `loadingLabel`
+ * in the label's place, ignores a second press and shows no spinner.
+ * "Disable a button only when the action is impossible right now (missing input, insufficient permission); pair with a `Tooltip` that explains why." (https://vercel.com/geist/button)
+ * Ours: the reason is written beside the button.
+ * "Icon-only buttons should include the `svgOnly` prop and an `aria-label`." (https://vercel.com/geist/button)
+ * Ours: an icon-only button takes an `icon` size and its icon as the child; `shape="circle"` is only
+ * for it. An icon with text passes as `prefix` or `suffix`.
+ * "Combination of `shape="rounded"` and the `shadow` prop, often used on marketing pages." (https://vercel.com/geist/button)
+ * Ours: `shape="rounded"` is a pill for a call to action that stands apart (a banner's or a
+ * scroller's), with no `shadow` prop.
+ * Ours: text children sit in a label box that adds 6 px each side to the padding; an element child
+ * (a `render` target, a row with a trailing `Kbd`) lays itself out and gets no box. Colour sits on
+ * the whole button for three looks: `default` is ink, `destructive` is the error fill for permanent
+ * loss (Delete project), `warning` is the amber fill for a disruptive command that can be undone
+ * (Pause project). `link` is the link colour as text, with the arrow as `suffix` when the
+ * destination is outside the product. `outline` and `secondary` are neutral with a hairline edge,
+ * `ghost` has no chrome, and no look puts a hue on its edge. Held (disabled or `loading`), a filled
+ * look drops its hue to the muted fill, the muted text and the hairline, so it reads as unavailable;
+ * `ghost` and `link` dim instead. Pressed looks like hover, with no movement.
+ * @words "Title Case the label and name what happens: `Deploy Project`, `Invite Member`, `Rotate Key`." (https://vercel.com/geist/button)
+ * "Avoid bare verbs (`Submit`) and generic confirms (`OK`, `Confirm`)." (https://vercel.com/geist/button)
+ * "Destructive buttons follow `Verb + Noun` and pair 1:1 with their toast: `Delete Project` then `Project deleted`." (https://vercel.com/geist/button)
+ * "Mode-switch buttons append `Instead`: `Use a Recovery Code Instead`." (https://vercel.com/geist/button)
+ * Ours: sentence case, not Title Case: *Invite member*, *Remove mailbox* then *Mailbox removed*, *Use a
+ * recovery code instead*. `loadingLabel` is the same words in the -ing form: *Inviting member*. Italian
+ * runs about a third longer (*Rimuovi casella*), so a footer leaves room and a label never wraps.
+ * @access "Icon-only buttons require both `svgOnly` and `aria-label`; the validator throws without them." (https://vercel.com/geist/button)
+ * "The `aria-label` names the action and the target (`Copy deployment URL`), not the icon (`Copy`)." (https://vercel.com/geist/button)
+ * "Don’t set `aria-label` on a button that already has visible text; it overrides the label and creates a screen-reader mismatch." (https://vercel.com/geist/button)
+ * Ours: the type requires `aria-label` or `aria-labelledby` on an icon-only button. A native
+ * `button`, `type="button"` unless it submits. `loading` sets `aria-busy`. Focus shows the base
+ * outline in one colour for every look; nothing repaints it.
  */
-declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonClasses>): import("react").JSX.Element;
-export { Button, buttonVariants };
+declare function Button({ children, className, disabled, focusableWhenDisabled, loading, loadingLabel, prefix, shape, size, suffix, variant, ...props }: ButtonProps): import("react").JSX.Element;
+type ButtonLinkBase = Omit<useRender.ComponentProps<"a">, "aria-busy" | "aria-disabled" | "prefix"> & {
+    variant?: ButtonVariant | undefined;
+    disabled?: boolean | undefined;
+};
+export type ButtonLinkProps = ButtonLinkBase & (TextLook | IconLook);
+/**
+ * A link drawn as a button, with the props of `Button`.
+ *
+ * @family Actions
+ * @when "Use `Button` for actions that mutate state (deploy, save, delete); use `ButtonLink` for navigation that changes the URL." (https://vercel.com/geist/button)
+ * Ours: a sign-in, a download, a record's page. It is read as a link and drawn as a button.
+ * @instead A command that changes something is a `Button`. A link inside a sentence is `TextLink`.
+ * The product's router link keeps its own behaviour through `render`: `render={<Link href="/agents" />}`.
+ * @behaviour "Use `ButtonLink` for links with the same props as `Button`." (https://vercel.com/geist/button)
+ * Ours: takes the looks, sizes, `prefix`, `suffix` and `loading` of `Button`. While it is `loading`
+ * or `disabled` it ignores a click and stays focusable.
+ * @words Sentence case, verb + noun naming the destination or the result: *Open Portal*, *Download
+ * invoice*. A destination outside the product ends in the arrow as `suffix`.
+ * @access A native `a` with an `href`, never `role="button"`. An icon-only link carries an
+ * `aria-label` or `aria-labelledby` naming destination, and the type requires it.
+ */
+declare function ButtonLink({ children, className, disabled, loading, loadingLabel, onClick, prefix, render, shape, size, suffix, variant, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Button, ButtonLink, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;;8EAsClB,CAAC;AAEF;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAE3E;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,+BAQ5D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUjE,QAAA,MAAM,aAAa;;;;8EA+DlB,CAAC;AAEF,KAAK,aAAa,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AAChF,KAAK,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC1E,KAAK,QAAQ,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,MAAM,EAAE,CAAC,CAAC;AACrD,KAAK,QAAQ,GAAG,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAE9C;;;;;;GAMG;AACH,iBAAS,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAE3E;AAED,MAAM,MAAM,WAAW,GACnB;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,GACjD;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,KAAK,QAAQ,GAAG,WAAW,GAAG;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACzC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GACtB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,GAChE;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAErE,KAAK,QAAQ,GAAG,cAAc,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,KAAK,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAC,GAAG;IACtE,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,eAAe,CAAC;AAE5D,qGAAqG;AACrG,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,eAAe,EACf,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAC1C,GAAG;IACF,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC,CAAC;AAiFF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,qBAAqB,EACrB,OAAO,EACP,YAAY,EACZ,MAAM,EACN,KAAgB,EAChB,IAAgB,EAChB,MAAM,EACN,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,WAAW,+BAwBb;AAED,KAAK,cAAc,GAAG,IAAI,CACxB,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,EAC7B,WAAW,GAAG,eAAe,GAAG,QAAQ,CACzC,GAAG;IACF,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAMrE;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,OAAO,EACP,MAAM,EACN,MAAM,EACN,KAAgB,EAChB,IAAgB,EAChB,MAAM,EACN,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,eAAe,8FA4BjB;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}