@surflane/ui 0.4.0 → 0.6.0

package/README.md

@@ -18,7 +18,7 @@ Import the stylesheets once at the application root. `all.css` brings the tokens
 @import '@surflane/ui/all.css';
 ```
 
-The rules sit in `surflane.*` cascade layers, so your unlayered CSS overrides them. Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`. The [install guide](https://surflane.page/install) walks through Vite, Next.js, React Router and Astro, with or without Tailwind CSS.
+To ship only what you use, import component stylesheets instead, such as `@surflane/ui/button.css` and `@surflane/ui/dialog.css`. Each brings the tokens and the styles of what its component renders. The rules sit in `surflane.*` cascade layers, so your unlayered CSS overrides them. Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`. The [install guide](https://surflane.page/install) walks through Vite, Next.js, React Router and Astro, with or without Tailwind CSS.
 
 ```tsx
 import {
@@ -41,7 +41,7 @@ export function Example() {
 }
 ```
 
-Compound components are available both as namespaces (`Dialog.Root`) and as flat names (`DialogRoot`). Use flat names in React Server Components, which cannot dot into client exports. Subpath entry points such as `@surflane/ui/button` and `@surflane/ui/dialog` keep bundles small.
+Compound components are available both as namespaces (`Dialog.Root`) and as flat names (`DialogRoot`). Use flat names in React Server Components, which cannot dot into client exports. Every component also has its own entry point, named after its page in the catalog, such as `@surflane/ui/checkbox` or `@surflane/ui/sheet`.
 
 ## Optional components
 

package/dist/{disclosure.d.ts → accordion.d.ts}

@@ -18,25 +18,9 @@ export declare const Accordion: {
     } & React.RefAttributes<HTMLElement>>;
     Panel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
-declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    indicator?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
-declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Collapsible: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-        indicator?: React.ReactNode;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Panel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-export { AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleTrigger, };
+export { AccordionPanel, AccordionRoot, AccordionTrigger };
 export declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionHeaderProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLHeadingElement>>, AccordionItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/accordion").AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;

package/dist/{disclosure.js → accordion.js}

@@ -2,14 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
-import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
-import { Chevron } from './chevron.js';
+import { Icon } from './icon.js';
 import { skin, part } from './parts.js';
 function AccordionRoot({ className, ...props }) {
     return (_jsx(BaseAccordion.Root, { ...props, className: skin('pui-accordion', className) }));
 }
 const AccordionTrigger = /* @__PURE__ */ React.forwardRef(function AccordionTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseAccordion.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
+    return (_jsxs(BaseAccordion.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? (_jsx(Icon, { name: 'chevron-forward', className: 'pui-disclosure-chevron' })) : (indicator)] }));
 });
 const AccordionPanel = /* @__PURE__ */ React.forwardRef(function AccordionPanel({ className, children, render, ...props }, ref) {
     return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, className: skin('pui-accordion-panel', className), render: render ??
@@ -23,19 +22,6 @@ export const Accordion = {
     Trigger: AccordionTrigger,
     Panel: AccordionPanel,
 };
-const CollapsibleTrigger = /* @__PURE__ */ React.forwardRef(function CollapsibleTrigger({ className, children, indicator, ...props }, ref) {
-    return (_jsxs(BaseCollapsible.Trigger, { ...props, ref: ref, className: skin('pui-disclosure-trigger', className), children: [_jsx("span", { className: 'pui-disclosure-label', children: children }), indicator === undefined ? _jsx(Chevron, {}) : indicator] }));
-});
-const CollapsiblePanel = /* @__PURE__ */ React.forwardRef(function CollapsiblePanel({ className, children, ...props }, ref) {
-    return (_jsx(BaseCollapsible.Panel, { ...props, ref: ref, className: skin('pui-collapsible-panel', className), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
-});
-export const Collapsible = {
-    ...BaseCollapsible,
-    Root: /* @__PURE__ */ part(BaseCollapsible.Root, 'pui-collapsible'),
-    Trigger: CollapsibleTrigger,
-    Panel: CollapsiblePanel,
-};
 // Flat names for React Server Components, which cannot dot into client exports.
-export { AccordionPanel, AccordionRoot, AccordionTrigger, CollapsiblePanel, CollapsibleTrigger, };
+export { AccordionPanel, AccordionRoot, AccordionTrigger };
 export const { Header: AccordionHeader, Item: AccordionItem } = Accordion;
-export const { Root: CollapsibleRoot } = Collapsible;

package/dist/alert-dialog.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { DialogFooter, DialogHeader } from './dialog.js';
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/alert-dialog").AlertDialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Width and density; an alert dialog is small unless set. */
+    size?: ComponentSizeAlias;
+    focusBoundaryLabel?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertDialog: {
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/alert-dialog").AlertDialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        /** Width and density; an alert dialog is small unless set. */
+        size?: ComponentSizeAlias;
+        focusBoundaryLabel?: string;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Header: typeof DialogHeader;
+    Footer: typeof DialogFooter;
+    Root: typeof BaseAlertDialog.Root;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Trigger: BaseAlertDialog.Trigger;
+    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Handle: typeof BaseAlertDialog.Handle;
+    createHandle: typeof BaseAlertDialog.createHandle;
+};
+export { AlertDialogContent };
+export declare const AlertDialogBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, AlertDialogDescription: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>, AlertDialogHandle: typeof BaseAlertDialog.Handle, AlertDialogPopup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogRoot: typeof BaseAlertDialog.Root, AlertDialogTitle: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>, AlertDialogTrigger: BaseAlertDialog.Trigger, AlertDialogViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AlertDialogHeader: typeof DialogHeader, AlertDialogFooter: typeof DialogFooter;

package/dist/alert-dialog.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { sizeName, skin } from './parts.js';
+import { useDialogFocusBoundary } from './dialog-focus.js';
+import { useComponentSize } from './sizing.js';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { DialogFooter, DialogHeader } from './dialog.js';
+const AlertDialogContent = /* @__PURE__ */ React.forwardRef(function AlertDialogContent({ size, className, focusBoundaryLabel = 'Continue dialog navigation', ...props }, ref) {
+    const scheme = useComponentSize(size);
+    const portalRef = useDialogFocusBoundary(focusBoundaryLabel);
+    return (_jsxs(BaseAlertDialog.Portal, { ref: portalRef, children: [_jsx(BaseAlertDialog.Backdrop, { className: 'pui-dialog-backdrop' }), _jsx(BaseAlertDialog.Popup, { "data-ui-size": scheme, "data-size": sizeName(size), ...props, ref: ref, className: skin('pui-dialog-popup pui-dialog-content pui-confirm-content', className) })] }));
+});
+export const AlertDialog = {
+    ...BaseAlertDialog,
+    Content: AlertDialogContent,
+    Header: DialogHeader,
+    Footer: DialogFooter,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { AlertDialogContent };
+export const { Backdrop: AlertDialogBackdrop, Close: AlertDialogClose, Description: AlertDialogDescription, Handle: AlertDialogHandle, Popup: AlertDialogPopup, Portal: AlertDialogPortal, Root: AlertDialogRoot, Title: AlertDialogTitle, Trigger: AlertDialogTrigger, Viewport: AlertDialogViewport, Header: AlertDialogHeader, Footer: AlertDialogFooter, } = AlertDialog;

package/dist/app-shell.d.ts

@@ -1,11 +1,43 @@
 import * as React from 'react';
+import { type ButtonProps } from './button.js';
+export type AppShellRootProps = React.ComponentPropsWithoutRef<'div'> & {
+    layout?: 'header' | 'workspace';
+    /** Whether the sidebar is collapsed to its rail. Pass it to control the state. */
+    collapsed?: boolean;
+    /** The starting state when the shell controls it. */
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** A localStorage key that remembers the state across visits. A server-rendered
+     * app reads a cookie into defaultCollapsed instead, so the first paint is right. */
+    persist?: string;
+    /** ⌘B, or Ctrl+B, toggles the sidebar unless focus is in a text field. */
+    shortcut?: boolean;
+};
+export type AppShellSidebarToggleProps = Omit<ButtonProps, 'children'> & {
+    /** The button's name in each state; it is also the tooltip. */
+    labels?: {
+        collapse?: string;
+        expand?: string;
+    };
+    children?: React.ReactNode;
+};
 export declare const AppShell: {
     Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        collapsed?: boolean;
         layout?: "header" | "workspace";
+        /** Whether the sidebar is collapsed to its rail. Pass it to control the state. */
+        collapsed?: boolean;
+        /** The starting state when the shell controls it. */
+        defaultCollapsed?: boolean;
+        onCollapsedChange?: (collapsed: boolean) => void;
+        /** A localStorage key that remembers the state across visits. A server-rendered
+         * app reads a cookie into defaultCollapsed instead, so the first paint is right. */
+        persist?: string;
+        /** ⌘B, or Ctrl+B, toggles the sidebar unless focus is in a text field. */
+        shortcut?: boolean;
     } & React.RefAttributes<HTMLDivElement>>;
     Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    SidebarToggle: React.ForwardRefExoticComponent<Omit<AppShellSidebarToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Page: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -16,9 +48,18 @@ export declare const AppShell: {
     } & React.RefAttributes<HTMLAnchorElement>>;
 };
 export declare const AppShellRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    collapsed?: boolean;
     layout?: "header" | "workspace";
-} & React.RefAttributes<HTMLDivElement>>, AppShellHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellSidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, AppShellContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, AppShellLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "children"> & {
+    /** Whether the sidebar is collapsed to its rail. Pass it to control the state. */
+    collapsed?: boolean;
+    /** The starting state when the shell controls it. */
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** A localStorage key that remembers the state across visits. A server-rendered
+     * app reads a cookie into defaultCollapsed instead, so the first paint is right. */
+    persist?: string;
+    /** ⌘B, or Ctrl+B, toggles the sidebar unless focus is in a text field. */
+    shortcut?: boolean;
+} & React.RefAttributes<HTMLDivElement>>, AppShellHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellSidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, AppShellSidebarToggle: React.ForwardRefExoticComponent<Omit<AppShellSidebarToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, AppShellContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, AppShellLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "children"> & {
     icon: React.ReactNode;
     label: string;
 } & React.RefAttributes<HTMLAnchorElement>>;

package/dist/app-shell.js

@@ -1,40 +1,113 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-const skin = (base, extra) => [base, extra].filter(Boolean).join(' ');
-/** Layout only. Routing, session, theme and mobile disclosure belong to the caller. */
-const Root = /* @__PURE__ */ React.forwardRef(function AppShellRoot({ collapsed = false, layout = 'header', className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, "data-layout": layout, "data-sidebar": collapsed ? 'collapsed' : 'expanded', className: skin('pui-app-shell', className) }));
+import { cx, skin } from './parts.js';
+import { Button } from './button.js';
+import { Icon } from './icon.js';
+import { Tooltip } from './tooltip.js';
+const ShellContext = /* @__PURE__ */ React.createContext(null);
+const SidebarContext = /* @__PURE__ */ React.createContext(false);
+const editable = (target) => target instanceof HTMLElement &&
+    (target.isContentEditable ||
+        /^(input|textarea|select)$/i.test(target.tagName));
+const apple = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+/** The sidebar shortcut as this platform writes it. */
+const shortcutLabel = () => (apple() ? '⌘B' : 'Ctrl+B');
+/** Layout only. Routing, session, theme and mobile disclosure belong to the caller;
+ * the shell keeps the sidebar's collapsed state unless you control it. */
+const Root = /* @__PURE__ */ React.forwardRef(function AppShellRoot({ collapsed, defaultCollapsed = false, onCollapsedChange, persist, shortcut = true, layout = 'header', className, children, ...props }, ref) {
+    const [own, setOwn] = React.useState(defaultCollapsed);
+    const value = collapsed ?? own;
+    const latest = React.useRef(value);
+    latest.current = value;
+    const setCollapsed = React.useCallback((next) => {
+        if (collapsed === undefined)
+            setOwn(next);
+        onCollapsedChange?.(next);
+        if (persist)
+            try {
+                localStorage.setItem(persist, next ? 'collapsed' : 'expanded');
+            }
+            catch { }
+    }, [collapsed, onCollapsedChange, persist]);
+    React.useLayoutEffect(() => {
+        if (!persist || collapsed !== undefined)
+            return;
+        try {
+            const stored = localStorage.getItem(persist);
+            if (stored)
+                setOwn(stored === 'collapsed');
+        }
+        catch { }
+    }, [persist, collapsed]);
+    React.useEffect(() => {
+        if (!shortcut)
+            return;
+        const toggle = (event) => {
+            if (event.key.toLowerCase() !== 'b' ||
+                event.altKey ||
+                event.shiftKey ||
+                !(apple() ? event.metaKey : event.ctrlKey) ||
+                editable(event.target))
+                return;
+            event.preventDefault();
+            setCollapsed(!latest.current);
+        };
+        document.addEventListener('keydown', toggle);
+        return () => document.removeEventListener('keydown', toggle);
+    }, [shortcut, setCollapsed]);
+    const sidebarId = React.useId();
+    const shell = React.useMemo(() => ({ collapsed: value, setCollapsed, sidebarId, shortcut }), [value, setCollapsed, sidebarId, shortcut]);
+    return (_jsx(ShellContext.Provider, { value: shell, children: _jsx("div", { ...props, ref: ref, "data-layout": layout, "data-sidebar": value ? 'collapsed' : 'expanded', className: cx('pui-app-shell', className), children: children }) }));
+});
+/** Collapses the sidebar to its rail and back. Its tooltip names the shortcut. */
+const SidebarToggle = /* @__PURE__ */ React.forwardRef(function AppShellSidebarToggle({ labels, className, children, onClick, ...props }, ref) {
+    const shell = React.useContext(ShellContext);
+    if (!shell)
+        throw new Error('AppShell.SidebarToggle belongs in AppShell.Root');
+    const label = shell.collapsed
+        ? (labels?.expand ?? 'Expand sidebar')
+        : (labels?.collapse ?? 'Collapse sidebar');
+    return (_jsx(Tooltip, { label: label, shortcut: shell.shortcut ? shortcutLabel() : undefined, children: _jsx(Button, { variant: 'ghost', size: 'icon', ...props, ref: ref, "aria-label": label, "aria-expanded": !shell.collapsed, "aria-controls": shell.sidebarId, className: skin('pui-app-shell-toggle', className), onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    shell.setCollapsed(!shell.collapsed);
+            }, children: children ?? _jsx(Icon, { name: 'sidebar' }) }) }));
 });
 const Header = /* @__PURE__ */ React.forwardRef(function AppShellHeader({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-header', className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-header', className) }));
 });
-const Sidebar = /* @__PURE__ */ React.forwardRef(function AppShellSidebar({ className, ...props }, ref) {
-    return (_jsx("aside", { ...props, ref: ref, className: skin('pui-app-shell-sidebar', className) }));
+const Sidebar = /* @__PURE__ */ React.forwardRef(function AppShellSidebar({ className, id, ...props }, ref) {
+    const shell = React.useContext(ShellContext);
+    return (_jsx(SidebarContext.Provider, { value: true, children: _jsx("aside", { ...props, ref: ref, id: id ?? shell?.sidebarId, className: cx('pui-app-shell-sidebar', className) }) }));
 });
 const Content = /* @__PURE__ */ React.forwardRef(function AppShellContent({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-content', className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-content', className) }));
 });
 /**
  * The page surface inside a workspace Content. It insets from the shell on every
  * side but the sidebar's; without the sidebar, on narrow screens, it insets evenly.
  */
 const Page = /* @__PURE__ */ React.forwardRef(function AppShellPage({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-page', className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-page', className) }));
 });
 const Footer = /* @__PURE__ */ React.forwardRef(function AppShellFooter({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-footer', className) }));
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-footer', className) }));
 });
 const Label = /* @__PURE__ */ React.forwardRef(function AppShellLabel({ className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, className: skin('pui-app-shell-label', className) }));
+    return (_jsx("span", { ...props, ref: ref, className: cx('pui-app-shell-label', className) }));
 });
 const Link = /* @__PURE__ */ React.forwardRef(function AppShellLink({ icon, label, className, ...props }, ref) {
-    return (_jsxs("a", { ...props, ref: ref, "aria-label": props['aria-label'] ?? label, className: skin('pui-app-shell-link', className), children: [_jsx("span", { className: 'pui-app-shell-icon', "aria-hidden": 'true', children: icon }), _jsx(Label, { "aria-hidden": 'true', children: label })] }));
+    const shell = React.useContext(ShellContext);
+    const inSidebar = React.useContext(SidebarContext);
+    // On the collapsed rail only the icon shows, so the name appears as a tooltip.
+    return (_jsx(Tooltip, { label: label, enabled: Boolean(shell?.collapsed && inSidebar), children: _jsxs("a", { ...props, ref: ref, "aria-label": props['aria-label'] ?? label, className: cx('pui-app-shell-link', className), children: [_jsx("span", { className: 'pui-app-shell-icon', "aria-hidden": 'true', children: icon }), _jsx(Label, { "aria-hidden": 'true', children: label })] }) }));
 });
 export const AppShell = {
     Root,
     Header,
     Sidebar,
+    SidebarToggle,
     Content,
     Page,
     Footer,
@@ -42,4 +115,4 @@ export const AppShell = {
     Link,
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;
+export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, SidebarToggle: AppShellSidebarToggle, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;

package/dist/{input-extensions.d.ts → autocomplete.d.ts}

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
-import { Slider as BaseSlider } from '@base-ui/react/slider';
 declare const AutocompleteRoot: typeof BaseAutocomplete.Root;
 export declare const Autocomplete: {
     Root: typeof BaseAutocomplete.Root;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & {
         positionerProps?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>;
     } & React.RefAttributes<HTMLDivElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -44,7 +44,6 @@ export declare const Autocomplete: {
     } & React.RefAttributes<HTMLDivElement>>;
     Value: typeof BaseAutocomplete.Value;
     Icon: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Row: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -52,31 +51,7 @@ export declare const Autocomplete: {
     useFilter: typeof import("@base-ui/react/internals/filter").getFilter;
     useFilteredItems: typeof BaseAutocomplete.useFilteredItems;
 };
-declare function SliderRoot<Value extends number | readonly number[]>({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment, ...props }: BaseSlider.Root.Props<Value> & {
-    ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-export declare const Slider: {
-    Root: typeof SliderRoot;
-    Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLOutputElement>>;
-    Control: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
-export { AutocompleteRoot, SliderRoot };
+export { AutocompleteRoot };
 export declare const AutocompleteArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, AutocompleteClear: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, AutocompleteCollection: typeof BaseAutocomplete.Collection, AutocompleteEmpty: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, AutocompleteGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -99,19 +74,6 @@ export declare const AutocompleteArrow: React.ForwardRefExoticComponent<Omit<imp
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLDivElement>>, AutocompleteStatus: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/autocomplete").AutocompleteStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, AutocompleteTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, AutocompleteValue: typeof BaseAutocomplete.Value, AutocompleteContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+} & React.RefAttributes<HTMLDivElement>>, AutocompleteTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/autocomplete").AutocompleteTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, AutocompleteValue: typeof BaseAutocomplete.Value, AutocompleteContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & Pick<Omit<Omit<import("@base-ui/react/autocomplete").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "side" | "align" | "sideOffset" | "collisionPadding"> & {
     positionerProps?: React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner>;
 } & React.RefAttributes<HTMLDivElement>>;
-export declare const SliderControl: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, SliderValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLOutputElement>>;

package/dist/{input-extensions.js → autocomplete.js}

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
-import { Slider as BaseSlider } from '@base-ui/react/slider';
-import { Combobox } from './advanced-forms.js';
-import { skin, part } from './parts.js';
-import { useResetValue, useRootRef } from './form-state.js';
+import { Combobox } from './combobox.js';
+import { part, scopedPortal, skin } from './parts.js';
+import { useResetValue } from './form-state.js';
 const AutocompleteRoot = function AutocompleteRoot({ children, form, value, defaultValue, onValueChange, ...props }) {
     const anchor = React.useRef(null);
     const [query, setQuery, revision] = useResetValue(value, defaultValue ?? '', anchor, form);
@@ -16,7 +16,7 @@ const AutocompleteRoot = function AutocompleteRoot({ children, form, value, defa
         }, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
 };
 const AutoTrigger = /* @__PURE__ */ React.forwardRef(function AutoTrigger({ className, children, ...props }, ref) {
-    return (_jsx(BaseAutocomplete.Trigger, { "aria-label": 'Show suggestions', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 9 6 6 6-6' }) })) }));
+    return (_jsx(BaseAutocomplete.Trigger, { "aria-label": 'Show suggestions', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? _jsx(Icon, { name: 'chevron-down' }) }));
 });
 const AutoClear = /* @__PURE__ */ React.forwardRef(function AutoClear(props, ref) {
     return _jsx(Combobox.Clear, { "aria-label": 'Clear input', ...props, ref: ref });
@@ -24,6 +24,7 @@ const AutoClear = /* @__PURE__ */ React.forwardRef(function AutoClear(props, ref
 export const Autocomplete = {
     ...BaseAutocomplete,
     Root: AutocompleteRoot,
+    Portal: /* @__PURE__ */ scopedPortal(BaseAutocomplete.Portal),
     Content: Combobox.Content,
     Popup: Combobox.Popup,
     Positioner: Combobox.Positioner,
@@ -39,26 +40,6 @@ export const Autocomplete = {
     Item: /* @__PURE__ */ part(BaseAutocomplete.Item, 'pui-combobox-item'),
     Separator: /* @__PURE__ */ part(BaseAutocomplete.Separator, 'pui-combobox-separator'),
 };
-function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = 'edge', ...props }) {
-    const [element, attach] = useRootRef(ref);
-    const [selected, setSelected] = useResetValue(value, (defaultValue ?? props.min ?? 0), element, form);
-    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin('pui-slider', className), onValueChange: (next, event) => {
-            onValueChange?.(next, event);
-            if (value === undefined && !event.isCanceled)
-                setSelected(next);
-        } }));
-}
-export const Slider = {
-    ...BaseSlider,
-    Root: SliderRoot,
-    Label: /* @__PURE__ */ part(BaseSlider.Label, 'pui-slider-label'),
-    Value: /* @__PURE__ */ part(BaseSlider.Value, 'pui-slider-value'),
-    Control: /* @__PURE__ */ part(BaseSlider.Control, 'pui-slider-control'),
-    Track: /* @__PURE__ */ part(BaseSlider.Track, 'pui-slider-track'),
-    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'pui-slider-indicator'),
-    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'pui-slider-thumb'),
-};
 // Flat names for React Server Components, which cannot dot into client exports.
-export { AutocompleteRoot, SliderRoot };
+export { AutocompleteRoot };
 export const { Arrow: AutocompleteArrow, Backdrop: AutocompleteBackdrop, Clear: AutocompleteClear, Collection: AutocompleteCollection, Empty: AutocompleteEmpty, Group: AutocompleteGroup, GroupLabel: AutocompleteGroupLabel, Icon: AutocompleteIcon, Input: AutocompleteInput, InputGroup: AutocompleteInputGroup, Item: AutocompleteItem, List: AutocompleteList, Popup: AutocompletePopup, Portal: AutocompletePortal, Positioner: AutocompletePositioner, Row: AutocompleteRow, Separator: AutocompleteSeparator, Status: AutocompleteStatus, Trigger: AutocompleteTrigger, Value: AutocompleteValue, Content: AutocompleteContent, } = Autocomplete;
-export const { Control: SliderControl, Indicator: SliderIndicator, Label: SliderLabel, Thumb: SliderThumb, Track: SliderTrack, Value: SliderValue, } = Slider;

package/dist/avatar.js

@@ -1,6 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
 import { useComponentSize } from './sizing.js';
 import { sizeName, skin, part } from './parts.js';
@@ -8,11 +9,8 @@ const AvatarRoot = /* @__PURE__ */ React.forwardRef(function AvatarRoot({ size,
     const scheme = useComponentSize(size);
     return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": sizeName(size), "data-ui-size": scheme, className: skin('pui-avatar', className) }));
 });
-function Person() {
-    return (_jsxs("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '8', r: '4' }), _jsx("path", { d: 'M4 21v-2a8 8 0 0 1 16 0v2' })] }));
-}
 const AvatarFallback = /* @__PURE__ */ React.forwardRef(function AvatarFallback({ children, className, ...props }, ref) {
-    return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin('pui-avatar-fallback', className), children: children ?? _jsx(Person, {}) }));
+    return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, className: skin('pui-avatar-fallback', className), children: children ?? _jsx(Icon, { name: 'user' }) }));
 });
 export const Avatar = {
     ...BaseAvatar,

package/dist/badge.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type ComponentSize } from './sizing.js';
+import { type StatusTone } from './status.js';
+export type BadgeProps = React.ComponentPropsWithoutRef<'span'> & {
+    size?: ComponentSize;
+    tone?: StatusTone;
+    icon?: React.ReactNode;
+};
+export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    size?: ComponentSize;
+    tone?: StatusTone;
+    icon?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
+/** Domain status labels and live announcements remain the caller's responsibility. */
+export declare const StatusBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    size?: ComponentSize;
+    tone?: StatusTone;
+    icon?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
+export type { StatusTone } from './status.js';

package/dist/badge.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { useToneTransition } from './tone-transition.js';
+import { cx } from './parts.js';
+import { StatusIcon } from './status.js';
+export const Badge = /* @__PURE__ */ React.forwardRef(function Badge({ tone = 'neutral', icon, children, className, size, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    const elementRef = useToneTransition(tone, ref);
+    return (_jsxs("span", { ...props, ref: elementRef, className: cx('pui-badge', className), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: 'pui-badge-icon', "aria-hidden": 'true', children: icon })), children] }));
+});
+/** Domain status labels and live announcements remain the caller's responsibility. */
+export const StatusBadge = /* @__PURE__ */ React.forwardRef(function StatusBadge({ tone = 'neutral', icon, ...props }, ref) {
+    return (_jsx(Badge, { ...props, ref: ref, tone: tone, icon: icon === undefined ? _jsx(StatusIcon, { tone: tone }) : icon }));
+});