@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/badge.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { ChipRemoveButton, LocaleCount } from "../lib/islands.js";
+export const badgeVariants = cva("inline-flex shrink-0 items-center gap-1 whitespace-nowrap font-medium leading-none [&_svg]:size-3 [&_svg]:shrink-0", {
+    variants: {
+        tone: {
+            neutral: "bg-selected text-fg-muted",
+            accent: "bg-accent-soft text-accent-ink",
+            success: "tone-success tone-soft",
+            warning: "tone-warning tone-soft",
+            danger: "tone-danger tone-soft",
+            info: "tone-info tone-soft",
+            outline: "border border-field-border text-fg-muted",
+            /** Driven by the `color` prop (user-defined label colours). */
+            custom: "tone-soft",
+        },
+        size: {
+            sm: "h-5 px-2 text-[11px]",
+            md: "h-6 px-2.5 text-xs",
+            lg: "h-7 gap-1.5 px-3 text-[13px] [&_svg]:size-3.5",
+        },
+        shape: {
+            pill: "rounded-full",
+            /** Version / code tags. */
+            square: "rounded-ui-sm",
+        },
+        interactive: {
+            true: "cursor-pointer transition-[filter,background-color] hover:brightness-95 focus-ring",
+        },
+    },
+    defaultVariants: { tone: "neutral", size: "sm", shape: "pill" },
+});
+/**
+ * Status, count and label pill — and the kit's chip (`onRemove`), reused by Tag input,
+ * Combobox multi-select and Filter bar. Server-compatible (the remove button and count
+ * formatting are tiny client islands).
+ *
+ * ```tsx
+ * <Badge tone="success" dot>Published</Badge>
+ * <Badge count={128} tone="accent" />            // "99+"
+ * <Badge onRemove={() => drop("design")}>Design</Badge>
+ * <Badge asChild interactive><Link href="/posts?status=draft">Draft</Link></Badge>
+ * ```
+ *
+ * No CSS `uppercase` — it breaks Turkish (i → I) without the right `lang`; use `upperText()`.
+ */
+export const Badge = React.forwardRef(function Badge({ className, tone, size, shape, dot, color, count, max = 99, onRemove, removeLabel, disabled, asChild, children, style, ...props }, ref) {
+    const removable = Boolean(onRemove);
+    const Comp = asChild && !removable ? Slot.Root : "span";
+    const classes = cn(badgeVariants({ tone: color ? "custom" : tone, size, shape, interactive: asChild && !removable ? true : undefined }), count !== undefined && "tabular justify-center", count !== undefined && (size === "lg" ? "min-w-7 px-2" : size === "md" ? "min-w-6 px-2" : "min-w-5 px-1.5"), removable && "pe-1.5", disabled && "pointer-events-none opacity-50", className);
+    const content = count !== undefined ? _jsx(LocaleCount, { value: count, max: max }) : children;
+    if (Comp === Slot.Root) {
+        const slotProps = {
+            ref,
+            "data-slot": "badge",
+            className: classes,
+            style: color ? { ...style, ["--tone"]: color } : style,
+            "aria-disabled": disabled || undefined,
+            ...props,
+        };
+        // Slot needs the dot and the Slottable as direct children (no fragment).
+        return dot ? (_jsxs(Slot.Root, { ...slotProps, children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-current" }), _jsx(Slot.Slottable, { children: children })] })) : (_jsx(Slot.Root, { ...slotProps, children: children }));
+    }
+    return (_jsxs("span", { ref: ref, "data-slot": "badge", "data-tone": color ? "custom" : (tone ?? "neutral"), className: classes, style: color ? { ...style, ["--tone"]: color } : style, "aria-disabled": disabled || undefined, ...props, children: [dot ? _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-current" }) : null, content, onRemove ? (_jsx(ChipRemoveButton, { onRemove: onRemove, disabled: disabled, removeLabel: removeLabel, itemLabel: typeof children === "string" || typeof children === "number" ? String(children) : undefined })) : null] }));
+});

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+declare const breadcrumbLabels: {
+    label: string;
+    showHidden: string;
+    siblings: string;
+};
+type BreadcrumbSize = "sm" | "md";
+export interface BreadcrumbMenuLink {
+    label: React.ReactNode;
+    href: string;
+    /** Marks the sibling that is the current item. */
+    current?: boolean;
+}
+export interface BreadcrumbItemData {
+    label: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+    /** Jump to siblings ("Companies › Acme ▾" → other companies). */
+    menu?: BreadcrumbMenuLink[];
+}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /** Data-driven trail. The last item is the current page. Omit for the compound API. */
+    items?: BreadcrumbItemData[];
+    /** Collapse the middle into a "…" menu when there are more items (first + last `maxItems − 2` stay). */
+    maxItems?: number;
+    /** Separator between items. Default a chevron that flips in RTL. */
+    separator?: React.ReactNode;
+    size?: BreadcrumbSize;
+    /** Websites: also output a schema.org `BreadcrumbList` JSON-LD script (items with `href`). */
+    jsonLd?: boolean;
+    /** Origin used to make JSON-LD URLs absolute, e.g. `"https://vamos.ist"`. */
+    baseUrl?: string;
+    labels?: Partial<typeof breadcrumbLabels>;
+}
+/**
+ * Shows where a page sits in a hierarchy and offers a way up (WAI-ARIA Breadcrumb: `nav` + `ol`,
+ * `aria-current="page"` on the last item). Links go through the app's router `Link`.
+ *
+ * ```tsx
+ * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Acme", href: "/companies/acme" }, { label: "Contacts" }]} />
+ * ```
+ *
+ * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.
+ */
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
+/** The ordered list of crumbs. */
+export declare const BreadcrumbList: React.ForwardRefExoticComponent<React.OlHTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
+/** One crumb (`li`). */
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+export interface BreadcrumbLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    href?: string;
+    icon?: React.ReactNode;
+    /** Render your own link element instead (keeps the styles). */
+    asChild?: boolean;
+}
+/** A crumb that links up the hierarchy. Uses the app's router `Link` (external URLs open in a new tab). */
+export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface BreadcrumbPageProps extends React.HTMLAttributes<HTMLSpanElement> {
+    icon?: React.ReactNode;
+}
+/** The current page: plain text, `aria-current="page"` (override for a non-link middle crumb). */
+export declare const BreadcrumbPage: React.ForwardRefExoticComponent<BreadcrumbPageProps & React.RefAttributes<HTMLSpanElement>>;
+/** The separator between crumbs. Hidden from assistive tech. */
+export declare function BreadcrumbSeparator({ className, children, ...props }: React.LiHTMLAttributes<HTMLLIElement>): React.JSX.Element;
+export interface BreadcrumbEllipsisProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The hidden crumbs, offered in a menu. Without items it renders a static "…". */
+    items?: BreadcrumbMenuLink[];
+    labels?: Partial<typeof breadcrumbLabels>;
+}
+/** "…" for collapsed crumbs; opens a menu with the hidden pages. */
+export declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<BreadcrumbEllipsisProps & React.RefAttributes<HTMLButtonElement>>;
+/** A small ▾ after a crumb that jumps to its siblings. */
+export declare function BreadcrumbSiblings({ label, items, labels }: {
+    label: React.ReactNode;
+    items: BreadcrumbMenuLink[];
+    labels?: Partial<typeof breadcrumbLabels>;
+}): React.JSX.Element;
+export {};

package/dist/components/breadcrumb.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DropdownMenu, Slot } from "radix-ui";
+import { ChevronRight, ChevronsUpDown, MoreHorizontal } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { SmartLink } from "../lib/provider.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { itemVariants } from "../lib/variants.js";
+const breadcrumbLabels = {
+    label: "Breadcrumb",
+    showHidden: "Show hidden pages",
+    siblings: "Pages next to {label}",
+};
+const SizeContext = React.createContext("md");
+/**
+ * Shows where a page sits in a hierarchy and offers a way up (WAI-ARIA Breadcrumb: `nav` + `ol`,
+ * `aria-current="page"` on the last item). Links go through the app's router `Link`.
+ *
+ * ```tsx
+ * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Acme", href: "/companies/acme" }, { label: "Contacts" }]} />
+ * ```
+ *
+ * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.
+ */
+export const Breadcrumb = React.forwardRef(function Breadcrumb({ items, maxItems, separator, size = "md", jsonLd, baseUrl, labels, className, children, ...props }, ref) {
+    const t = useLabels("breadcrumb", breadcrumbLabels, labels);
+    return (_jsx(SizeContext.Provider, { value: size, children: _jsxs("nav", { ref: ref, "aria-label": t("label"), "data-slot": "breadcrumb", className: cn("min-w-0", className), ...props, children: [items ? _jsx(BreadcrumbTrail, { items: items, maxItems: maxItems, separator: separator, labels: labels }) : children, items && jsonLd ? _jsx(BreadcrumbJsonLd, { items: items, baseUrl: baseUrl }) : null] }) }));
+});
+function BreadcrumbTrail({ items, maxItems, separator, labels }) {
+    const tail = maxItems ? Math.max(1, maxItems - 2) : items.length;
+    const collapse = maxItems !== undefined && items.length > maxItems && items.length > tail + 1;
+    const hidden = collapse ? items.slice(1, items.length - tail) : [];
+    const visible = collapse
+        ? [{ item: items[0], index: 0 }, "ellipsis", ...items.slice(items.length - tail).map((item, i) => ({ item, index: items.length - tail + i }))]
+        : items.map((item, index) => ({ item, index }));
+    return (_jsx(BreadcrumbList, { children: visible.map((entry, i) => {
+            const sep = i > 0 ? _jsx(BreadcrumbSeparator, { children: separator }, `s${i}`) : null;
+            if (entry === "ellipsis") {
+                return (_jsxs(React.Fragment, { children: [sep, _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbEllipsis, { items: hidden.map((h) => ({ label: h.label, href: h.href ?? "" })).filter((h) => h.href), labels: labels }) })] }, "ellipsis"));
+            }
+            const { item, index } = entry;
+            const last = index === items.length - 1;
+            return (_jsxs(React.Fragment, { children: [sep, _jsxs(BreadcrumbItem, { children: [last || !item.href ? (_jsx(BreadcrumbPage, { icon: item.icon, "aria-current": last ? "page" : undefined, children: item.label })) : (_jsx(BreadcrumbLink, { href: item.href, icon: item.icon, children: item.label })), item.menu?.length ? _jsx(BreadcrumbSiblings, { label: item.label, items: item.menu, labels: labels }) : null] })] }, index));
+        }) }));
+}
+const listVariants = cva("flex min-w-0 flex-wrap items-center text-fg-muted", {
+    variants: { size: { sm: "gap-1 text-[13px] [&_svg]:size-3.5", md: "gap-1.5 text-sm [&_svg]:size-4" } },
+    defaultVariants: { size: "md" },
+});
+/** The ordered list of crumbs. */
+export const BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, ...props }, ref) {
+    const size = React.useContext(SizeContext);
+    return _jsx("ol", { ref: ref, "data-slot": "breadcrumb-list", className: cn(listVariants({ size }), className), ...props });
+});
+/** One crumb (`li`). */
+export const BreadcrumbItem = React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
+    return _jsx("li", { ref: ref, "data-slot": "breadcrumb-item", className: cn("inline-flex min-w-0 items-center gap-0.5", className), ...props });
+});
+const crumbClass = "inline-flex min-w-0 max-w-[16rem] items-center gap-1.5 rounded-ui-sm [&_svg]:shrink-0";
+/** A crumb that links up the hierarchy. Uses the app's router `Link` (external URLs open in a new tab). */
+export const BreadcrumbLink = React.forwardRef(function BreadcrumbLink({ href, icon, asChild, className, children, title, ...props }, ref) {
+    const classes = cn(crumbClass, "transition-colors hover:text-fg focus-ring", className);
+    if (asChild)
+        return _jsx(Slot.Root, { ref: ref, "data-slot": "breadcrumb-link", className: classes, ...props, children: children });
+    return (_jsxs(SmartLink, { ref: ref, href: href ?? "#", "data-slot": "breadcrumb-link", className: classes, title: title ?? (typeof children === "string" ? children : undefined), ...props, children: [icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }));
+});
+/** The current page: plain text, `aria-current="page"` (override for a non-link middle crumb). */
+export const BreadcrumbPage = React.forwardRef(function BreadcrumbPage({ icon, className, children, title, ...props }, ref) {
+    const current = !("aria-current" in props) || props["aria-current"] !== undefined;
+    return (_jsxs("span", { ref: ref, "data-slot": "breadcrumb-page", "aria-current": "page", title: title ?? (typeof children === "string" ? children : undefined), className: cn(crumbClass, current ? "font-medium text-fg" : "text-fg-muted", className), ...props, children: [icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }));
+});
+/** The separator between crumbs. Hidden from assistive tech. */
+export function BreadcrumbSeparator({ className, children, ...props }) {
+    return (_jsx("li", { role: "presentation", "aria-hidden": true, "data-slot": "breadcrumb-separator", className: cn("inline-flex text-fg-subtle [&>svg]:rtl:-scale-x-100", className), ...props, children: children ?? _jsx(ChevronRight, { strokeWidth: 1.75 }) }));
+}
+const menuContentClass = "surface-popover ui-pop z-(--z-popover) min-w-48 max-w-72 rounded-ui p-1";
+function CrumbMenu({ trigger, items }) {
+    const container = usePortalContainer();
+    return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }), _jsx(DropdownMenu.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(DropdownMenu.Content, { align: "start", sideOffset: 6, className: menuContentClass, children: items.map((it, i) => (_jsx(DropdownMenu.Item, { asChild: true, className: cn(itemVariants({ size: "sm" }), it.current && "font-medium"), children: _jsx(SmartLink, { href: it.href, "aria-current": it.current ? "page" : undefined, children: _jsx("span", { className: "min-w-0 flex-1 truncate", children: it.label }) }) }, i))) }) }) })] }));
+}
+const iconTrigger = "inline-flex size-6 items-center justify-center rounded-ui-sm text-fg-subtle transition-colors hover:bg-hover hover:text-fg focus-ring data-[state=open]:bg-hover data-[state=open]:text-fg";
+/** "…" for collapsed crumbs; opens a menu with the hidden pages. */
+export const BreadcrumbEllipsis = React.forwardRef(function BreadcrumbEllipsis({ items, labels, className, ...props }, ref) {
+    const t = useLabels("breadcrumb", breadcrumbLabels, labels);
+    if (!items?.length) {
+        return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", className: "inline-flex size-6 items-center justify-center text-fg-subtle", children: [_jsx(MoreHorizontal, { "aria-hidden": true }), _jsx("span", { className: "sr-only", children: t("showHidden") })] }));
+    }
+    return (_jsx(CrumbMenu, { items: items, trigger: _jsx("button", { ref: ref, type: "button", "data-slot": "breadcrumb-ellipsis", "aria-label": t("showHidden"), className: cn(iconTrigger, className), ...props, children: _jsx(MoreHorizontal, { "aria-hidden": true }) }) }));
+});
+/** A small ▾ after a crumb that jumps to its siblings. */
+export function BreadcrumbSiblings({ label, items, labels }) {
+    const t = useLabels("breadcrumb", breadcrumbLabels, labels);
+    const name = t("siblings", { label: typeof label === "string" ? label : "" }).trim();
+    return (_jsx(CrumbMenu, { items: items, trigger: _jsx("button", { type: "button", "data-slot": "breadcrumb-siblings", "aria-label": name, className: cn(iconTrigger, "size-5 [&_svg]:size-3!"), children: _jsx(ChevronsUpDown, { "aria-hidden": true }) }) }));
+}
+function BreadcrumbJsonLd({ items, baseUrl = "" }) {
+    const list = items
+        .filter((i) => i.href && typeof i.label === "string")
+        .map((i, n) => ({ "@type": "ListItem", position: n + 1, name: i.label, item: /^https?:/.test(i.href) ? i.href : `${baseUrl.replace(/\/$/, "")}${i.href}` }));
+    const json = JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", itemListElement: list }).replace(/</g, "\\u003c");
+    return _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } });
+}

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonProps } from "./button.js";
+/**
+ * Merged-edge styling for any row of controls. Corner rounding is done with logical
+ * properties (`rounded-s` / `rounded-e`), so the group is RTL-safe.
+ */
+export declare const buttonGroupVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    attached?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type GroupSize = "xs" | "sm" | "md" | "lg";
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof buttonGroupVariants>, "attached" | "orientation"> {
+    /** Merged borders (default). `false` keeps a small gap between the buttons. */
+    attached?: boolean;
+    orientation?: "horizontal" | "vertical";
+    /** Default variant for direct Button / IconButton children that don't set one. */
+    variant?: ButtonProps["variant"];
+    /** Default size for direct Button / IconButton children that don't set one. */
+    size?: GroupSize;
+}
+/**
+ * Related buttons merged into one control: split "Save ▾", pager arrows, an editor toolbar,
+ * a search field + "Go". `role="group"` — give it an `aria-label`. Every button stays its own
+ * tab stop. Server-compatible.
+ *
+ * ```tsx
+ * <ButtonGroup aria-label="Pagination" size="sm">
+ *   <IconButton label="Previous page"><ChevronLeft /></IconButton>
+ *   <ButtonGroupText>21–40 of 340</ButtonGroupText>
+ *   <IconButton label="Next page"><ChevronRight /></IconButton>
+ * </ButtonGroup>
+ * ```
+ *
+ * For a selected state (view switch, text alignment) use `ToggleGroup`; for a form value use
+ * `RadioGroup variant="segmented"`.
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface ButtonGroupSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Hairline between two attached buttons that share a fill (a primary split button), where
+ * the merged border would otherwise disappear.
+ */
+export declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<ButtonGroupSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ButtonGroupTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: GroupSize;
+}
+/** A static segment inside a group: "21–40 of 340", a unit, a prefix. */
+export declare const ButtonGroupText: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/button-group.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { Button, IconButton } from "./button.js";
+/**
+ * Merged-edge styling for any row of controls. Corner rounding is done with logical
+ * properties (`rounded-s` / `rounded-e`), so the group is RTL-safe.
+ */
+export const buttonGroupVariants = cva("relative isolate inline-flex w-fit max-w-full", {
+    variants: {
+        orientation: {
+            horizontal: "flex-row items-stretch",
+            vertical: "flex-col items-stretch",
+        },
+        attached: {
+            true: "[&>*:focus-visible]:z-10 [&>*:focus-within]:z-10 [&>*:hover]:z-[1] [&>[data-slot=button]]:shadow-none!",
+            false: "gap-2",
+        },
+    },
+    compoundVariants: [
+        {
+            orientation: "horizontal",
+            attached: true,
+            className: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none [&>*:not(:first-child)]:-ms-px [&>[data-slot=button-group-separator]+*]:ms-0",
+        },
+        {
+            orientation: "vertical",
+            attached: true,
+            className: "[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:-mt-px [&>[data-slot=button-group-separator]+*]:mt-0",
+        },
+    ],
+    defaultVariants: { orientation: "horizontal", attached: true },
+});
+/**
+ * Related buttons merged into one control: split "Save ▾", pager arrows, an editor toolbar,
+ * a search field + "Go". `role="group"` — give it an `aria-label`. Every button stays its own
+ * tab stop. Server-compatible.
+ *
+ * ```tsx
+ * <ButtonGroup aria-label="Pagination" size="sm">
+ *   <IconButton label="Previous page"><ChevronLeft /></IconButton>
+ *   <ButtonGroupText>21–40 of 340</ButtonGroupText>
+ *   <IconButton label="Next page"><ChevronRight /></IconButton>
+ * </ButtonGroup>
+ * ```
+ *
+ * For a selected state (view switch, text alignment) use `ToggleGroup`; for a form value use
+ * `RadioGroup variant="segmented"`.
+ */
+export const ButtonGroup = React.forwardRef(function ButtonGroup({ attached = true, orientation = "horizontal", variant, size, className, children, ...props }, ref) {
+    const content = variant || size
+        ? React.Children.map(children, (child) => {
+            if (!React.isValidElement(child))
+                return child;
+            if (child.type !== Button && child.type !== IconButton)
+                return child;
+            const p = child.props;
+            return React.cloneElement(child, {
+                variant: p.variant ?? variant,
+                size: p.size ?? size,
+            });
+        })
+        : children;
+    return (_jsx("div", { ref: ref, role: "group", "data-slot": "button-group", "data-orientation": orientation, "data-attached": attached ? "" : undefined, "data-variant": variant, className: cn(buttonGroupVariants({ orientation, attached }), variant === "primary" && "[--group-sep:color-mix(in_srgb,var(--accent-fg)_22%,transparent)]", className), ...props, children: content }));
+});
+/**
+ * Hairline between two attached buttons that share a fill (a primary split button), where
+ * the merged border would otherwise disappear.
+ */
+export const ButtonGroupSeparator = React.forwardRef(function ButtonGroupSeparator({ orientation = "vertical", className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "aria-hidden": true, "data-slot": "button-group-separator", className: cn("relative z-20 shrink-0 self-stretch bg-(--group-sep,var(--field-border))", orientation === "vertical" ? "w-px" : "h-px", className), ...props }));
+});
+/** A static segment inside a group: "21–40 of 340", a unit, a prefix. */
+export const ButtonGroupText = React.forwardRef(function ButtonGroupText({ size = "md", className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, "data-slot": "button-group-text", className: cn("inline-flex shrink-0 items-center whitespace-nowrap border border-field-border bg-surface-2 font-medium tabular text-fg-muted [&_svg]:size-4", size === "xs" ? "h-7 rounded-ui-sm px-2.5 text-xs" : size === "sm" ? "h-8 rounded-ui-sm px-3 text-[13px]" : size === "lg" ? "h-12 rounded-ui px-5 text-[15px]" : "h-(--control-h) rounded-ui px-3.5 text-sm", className), ...props }));
+});

package/dist/components/button.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { type TooltipContentProps } from "./tooltip.js";
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "danger" | "ghost" | "solid" | "primary" | "secondary" | "soft" | "danger-ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "icon" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    block?: boolean | null | undefined;
+    pill?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render as the child element (e.g. Next <Link>), keeping the styles. */
+    asChild?: boolean;
+    /** Spinner, `aria-busy` and click lock. */
+    loading?: boolean;
+    /** Text shown (and announced) while loading, e.g. "Saving…". Replaces the label. */
+    loadingText?: string;
+    /**
+     * `"inline"` (default): the spinner sits before the label (replacing a leading icon).
+     * `"replace"`: the label is hidden and the spinner centred — the width never changes.
+     */
+    loadingMode?: "inline" | "replace";
+}
+/**
+ * Starts an action. One `primary` per screen; the rest `secondary` or `ghost`.
+ *
+ * ```tsx
+ * <Button variant="primary" loading={saving} loadingText="Publishing…">Publish</Button>
+ * <Button asChild><Link href="/posts/new">New post</Link></Button>
+ * ```
+ *
+ * Defaults to `type="button"` (no accidental form submits). With `asChild` + `disabled`/`loading`
+ * the element gets `aria-disabled`, leaves the tab order and ignores clicks.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface IconButtonProps extends Omit<ButtonProps, "size" | "aria-label" | "loadingText" | "loadingMode"> {
+    /** Accessible name — required for icon-only controls. Also shown as the tooltip. */
+    label: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Tooltip text. Default: `label`. A string shows different text (the accessible name stays `label`);
+     * `false` turns the tooltip off and uses the native `title` instead.
+     * Inside a `TooltipProvider` (App shell ships one) the label is a Tooltip; without one it falls back to `title`.
+     */
+    tooltip?: boolean | string;
+    /** Side the tooltip opens on. Default `"top"`. */
+    tooltipSide?: TooltipContentProps["side"];
+    /** Shortcut hint in the tooltip, e.g. `"mod+e"`. */
+    shortcut?: string | string[];
+}
+/**
+ * Icon-only button. `label` is required: it becomes the accessible name and the tooltip.
+ *
+ * ```tsx
+ * <IconButton label="Delete post" variant="danger-ghost"><Trash2 /></IconButton>
+ * <IconButton label="Edit" shortcut="mod+e"><Pencil /></IconButton>
+ * ```
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { Spinner } from "./spinner.js";
+import { IconButtonTooltip } from "./tooltip.js";
+export const buttonVariants = cva([
+    "relative inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap font-medium",
+    "transition-[background-color,border-color,box-shadow,color,filter,opacity] duration-150 focus-ring",
+    "disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45",
+    "motion-safe:active:translate-y-px [&_svg]:shrink-0",
+    // loading: the spinner replaces a leading icon instead of adding a second one
+    "[&[data-loading]>[data-slot=spinner]+svg]:hidden",
+], {
+    variants: {
+        variant: {
+            /** The one loud action on a screen. */
+            primary: "bg-accent text-accent-fg font-semibold shadow-[inset_0_1px_0_rgb(255_255_255/0.35),0_1px_2px_rgb(0_0_0/0.12)] ring-1 ring-[color-mix(in_srgb,var(--fg)_10%,transparent)] hover:brightness-[1.04]",
+            /** Default: a calm action on a surface. */
+            secondary: "border border-field-border bg-field text-fg shadow-[0_1px_1px_rgb(0_0_0/0.04)] hover:border-field-border-hover hover:bg-hover glass:border-field-border-hover",
+            ghost: "text-fg hover:bg-hover",
+            soft: "bg-accent-soft text-accent-ink hover:brightness-95",
+            /** Dark, typographic action for decisive steps ("Publish"). */
+            solid: "bg-fg text-scene hover:opacity-90",
+            danger: "bg-danger-solid text-white shadow-sm hover:brightness-110",
+            "danger-ghost": "text-danger hover:bg-[color-mix(in_srgb,var(--danger)_10%,transparent)]",
+            link: "h-auto! p-0! text-accent-ink underline-offset-4 hover:underline",
+        },
+        size: {
+            xs: "h-7 gap-1 rounded-ui-sm px-2.5 text-xs [&_svg]:size-3.5",
+            sm: "h-8 gap-1.5 rounded-ui-sm px-3 text-[13px] [&_svg]:size-3.5",
+            md: "h-(--control-h) gap-2 rounded-ui px-4 text-sm [&_svg]:size-4",
+            lg: "h-12 gap-2.5 rounded-ui px-6 text-[15px] [&_svg]:size-[18px]",
+            /** Hero / website CTA. */
+            xl: "h-14 gap-3 rounded-ui px-8 text-base [&_svg]:size-5",
+            "icon-xs": "size-7 rounded-ui-sm [&_svg]:size-3.5",
+            "icon-sm": "size-8 rounded-ui-sm [&_svg]:size-4",
+            icon: "size-(--control-h) rounded-ui [&_svg]:size-[18px]",
+            "icon-lg": "size-12 rounded-ui [&_svg]:size-5",
+        },
+        block: { true: "w-full" },
+        pill: { true: "rounded-full!" },
+    },
+    defaultVariants: { variant: "secondary", size: "md" },
+});
+const spinnerSize = (size) => (size === "xs" || size === "sm" || size === "icon-xs" ? "xs" : size === "lg" || size === "xl" || size === "icon-lg" ? "md" : "sm");
+/**
+ * Starts an action. One `primary` per screen; the rest `secondary` or `ghost`.
+ *
+ * ```tsx
+ * <Button variant="primary" loading={saving} loadingText="Publishing…">Publish</Button>
+ * <Button asChild><Link href="/posts/new">New post</Link></Button>
+ * ```
+ *
+ * Defaults to `type="button"` (no accidental form submits). With `asChild` + `disabled`/`loading`
+ * the element gets `aria-disabled`, leaves the tab order and ignores clicks.
+ */
+export const Button = React.forwardRef(function Button({ className, variant, size, block, pill, asChild, loading, loadingText, loadingMode = "inline", disabled, children, type, onClick, ...props }, ref) {
+    const classes = cn(buttonVariants({ variant, size, block, pill }), className);
+    const state = {
+        "data-slot": "button",
+        "data-variant": variant ?? "secondary",
+        "data-size": size ?? "md",
+        "data-loading": loading ? "" : undefined,
+        "aria-busy": loading || undefined,
+    };
+    const spinner = _jsx(Spinner, { size: spinnerSize(size), className: loadingMode === "replace" ? "absolute" : undefined });
+    if (asChild) {
+        const inert = disabled || loading;
+        const slotProps = {
+            ref,
+            className: classes,
+            ...state,
+            "aria-disabled": inert || undefined,
+            tabIndex: inert ? -1 : undefined,
+            // No wrapper function here, so Button stays usable from server components. While inert the
+            // element leaves the tab order and `aria-disabled:pointer-events-none` blocks pointer clicks.
+            onClick: inert ? undefined : onClick,
+            ...props,
+        };
+        // Slot needs the spinner and the Slottable as direct children (no fragment).
+        return loading ? (_jsxs(Slot.Root, { ...slotProps, children: [spinner, _jsx(Slot.Slottable, { children: children })] })) : (_jsx(Slot.Root, { ...slotProps, children: children }));
+    }
+    let content = children;
+    if (loading && loadingText)
+        content = loadingMode === "replace" ? _jsxs(_Fragment, { children: [_jsx("span", { className: "invisible", children: children }), _jsx("span", { className: "sr-only", children: loadingText })] }) : loadingText;
+    // opacity-0 (not visibility:hidden) keeps the label in the accessibility tree, so the busy button keeps its name.
+    else if (loading && loadingMode === "replace")
+        content = _jsx("span", { className: "inline-flex items-center gap-[inherit] opacity-0", children: children });
+    return (_jsxs("button", { ref: ref, type: type ?? "button", className: classes, disabled: disabled || loading, onClick: onClick, ...state, ...props, children: [loading ? spinner : null, content] }));
+});
+const iconSize = { xs: "icon-xs", sm: "icon-sm", md: "icon", lg: "icon-lg" };
+/**
+ * Icon-only button. `label` is required: it becomes the accessible name and the tooltip.
+ *
+ * ```tsx
+ * <IconButton label="Delete post" variant="danger-ghost"><Trash2 /></IconButton>
+ * <IconButton label="Edit" shortcut="mod+e"><Pencil /></IconButton>
+ * ```
+ */
+export const IconButton = React.forwardRef(function IconButton({ label, size = "md", variant = "ghost", title, loading, tooltip = true, tooltipSide, shortcut, children, ...props }, ref) {
+    if (tooltip === false) {
+        return (_jsx(Button, { ref: ref, "aria-label": label, title: title ?? label, variant: variant, size: iconSize[size], loading: loading, loadingMode: "replace", ...props, children: children }));
+    }
+    return (_jsx(IconButtonTooltip, { label: typeof tooltip === "string" ? tooltip : label, side: tooltipSide, shortcut: shortcut, children: _jsx(Button, { ref: ref, "aria-label": label, ...(title !== undefined ? { title } : null), variant: variant, size: iconSize[size], loading: loading, loadingMode: "replace", ...props, children: children }) }));
+});