@surflane/ui 0.3.0 → 0.5.0

package/README.md

@@ -12,17 +12,13 @@ npm install @surflane/ui @surflane/design-tokens
 
 ## Usage
 
-Import the stylesheets once at the application root:
+Import the stylesheets once at the application root. `all.css` brings the tokens, controls, composition, document typography and component styles:
 
 ```css
-@import '@surflane/design-tokens/tokens.css';
-@import '@surflane/design-tokens/controls.css';
-@import '@surflane/design-tokens/foundations.css';
-@import '@surflane/design-tokens/typography.css';
-@import '@surflane/ui/styles.css';
+@import '@surflane/ui/all.css';
 ```
 
-Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`.
+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 {
@@ -45,7 +41,21 @@ 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
+
+Chart, DatePicker, Markdown, Tree and syntax highlighting have their own entry points, and their libraries are optional peer dependencies. Install a library only when you use its component:
+
+| Import                                                                                             | Install                                                            |
+| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| `Chart` from `@surflane/ui/chart`                                                                  | `recharts`                                                         |
+| `DatePicker`, `DateRangePicker`, `TimeField`, `DateLocaleProvider` from `@surflane/ui/date-picker` | `react-aria-components`                                            |
+| `Markdown` from `@surflane/ui/markdown`                                                            | `react-markdown remark-gfm`                                        |
+| `Tree` from `@surflane/ui/tree`                                                                    | `@headless-tree/core @headless-tree/react @tanstack/react-virtual` |
+| `SyntaxHighlighting` from `@surflane/ui/syntax-highlighting`                                       | `shiki`                                                            |
+
+`CodeBlock` and `SyntaxHighlighter` render plain text until a `<SyntaxHighlighting>` provider wraps them.
 
 ## Frameworks
 

package/dist/accordion.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+declare function AccordionRoot<Value = string>({ className, ...props }: BaseAccordion.Root.Props<Value>): React.JSX.Element;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
+    indicator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const AccordionPanel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Accordion: {
+    Root: typeof AccordionRoot;
+    Item: 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>>;
+    Header: 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>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
+        indicator?: React.ReactNode;
+    } & React.RefAttributes<HTMLElement>>;
+    Panel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/accordion").AccordionPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+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>>;

package/dist/accordion.js

@@ -0,0 +1,27 @@
+'use client';
+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 { 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(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 ??
+            ((panelProps, state) => (_jsx("div", { ...panelProps, inert: state.transitionStatus === 'ending' || undefined, "aria-hidden": state.transitionStatus === 'ending' || undefined }))), children: _jsx("div", { className: 'pui-disclosure-body', children: children }) }));
+});
+export const Accordion = {
+    ...BaseAccordion,
+    Root: AccordionRoot,
+    Item: /* @__PURE__ */ part(BaseAccordion.Item, 'pui-accordion-item'),
+    Header: /* @__PURE__ */ part(BaseAccordion.Header, 'pui-accordion-header'),
+    Trigger: AccordionTrigger,
+    Panel: AccordionPanel,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { AccordionPanel, AccordionRoot, AccordionTrigger };
+export const { Header: AccordionHeader, Item: AccordionItem } = Accordion;

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.js

@@ -1,35 +1,35 @@
 '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(' ');
+import { cx } from './parts.js';
 /** Layout only. Routing, session, theme and mobile disclosure belong to the caller. */
-const Root = 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) }));
+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: cx('pui-app-shell', className) }));
 });
-const Header = React.forwardRef(function AppShellHeader({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-header', className) }));
+const Header = /* @__PURE__ */ React.forwardRef(function AppShellHeader({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-header', className) }));
 });
-const Sidebar = 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, ...props }, ref) {
+    return (_jsx("aside", { ...props, ref: ref, className: cx('pui-app-shell-sidebar', className) }));
 });
-const Content = React.forwardRef(function AppShellContent({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-content', className) }));
+const Content = /* @__PURE__ */ React.forwardRef(function AppShellContent({ className, ...props }, ref) {
+    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 = React.forwardRef(function AppShellPage({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-page', className) }));
+const Page = /* @__PURE__ */ React.forwardRef(function AppShellPage({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-page', className) }));
 });
-const Footer = React.forwardRef(function AppShellFooter({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-footer', className) }));
+const Footer = /* @__PURE__ */ React.forwardRef(function AppShellFooter({ className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-footer', className) }));
 });
-const Label = React.forwardRef(function AppShellLabel({ className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, className: skin('pui-app-shell-label', className) }));
+const Label = /* @__PURE__ */ React.forwardRef(function AppShellLabel({ className, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, className: cx('pui-app-shell-label', className) }));
 });
-const Link = 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 Link = /* @__PURE__ */ React.forwardRef(function AppShellLink({ icon, label, className, ...props }, ref) {
+    return (_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,

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);
@@ -15,15 +15,16 @@ const AutocompleteRoot = function AutocompleteRoot({ children, form, value, defa
                 setQuery(next);
         }, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
 };
-const AutoTrigger = 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' }) })) }));
+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(Icon, { name: 'chevron-down' }) }));
 });
-const AutoClear = React.forwardRef(function AutoClear(props, ref) {
+const AutoClear = /* @__PURE__ */ React.forwardRef(function AutoClear(props, ref) {
     return _jsx(Combobox.Clear, { "aria-label": 'Clear input', ...props, ref: ref });
 });
 export const Autocomplete = {
     ...BaseAutocomplete,
     Root: AutocompleteRoot,
+    Portal: /* @__PURE__ */ scopedPortal(BaseAutocomplete.Portal),
     Content: Combobox.Content,
     Popup: Combobox.Popup,
     Positioner: Combobox.Positioner,
@@ -35,30 +36,10 @@ export const Autocomplete = {
     GroupLabel: Combobox.GroupLabel,
     Clear: AutoClear,
     Trigger: AutoTrigger,
-    InputGroup: part(BaseAutocomplete.InputGroup, 'pui-combobox-group'),
-    Item: part(BaseAutocomplete.Item, 'pui-combobox-item'),
-    Separator: 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: part(BaseSlider.Label, 'pui-slider-label'),
-    Value: part(BaseSlider.Value, 'pui-slider-value'),
-    Control: part(BaseSlider.Control, 'pui-slider-control'),
-    Track: part(BaseSlider.Track, 'pui-slider-track'),
-    Indicator: part(BaseSlider.Indicator, 'pui-slider-indicator'),
-    Thumb: part(BaseSlider.Thumb, 'pui-slider-thumb'),
+    InputGroup: /* @__PURE__ */ part(BaseAutocomplete.InputGroup, 'pui-combobox-group'),
+    Item: /* @__PURE__ */ part(BaseAutocomplete.Item, 'pui-combobox-item'),
+    Separator: /* @__PURE__ */ part(BaseAutocomplete.Separator, 'pui-combobox-separator'),
 };
 // 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.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    size?: ComponentSizeAlias;
+} & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+        size?: ComponentSizeAlias;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Status: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Fallback: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/avatar").AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Image: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLImageElement>>;
+};
+export { AvatarFallback, AvatarRoot };
+export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLImageElement>>, AvatarStatus: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/avatar.js

@@ -0,0 +1,24 @@
+'use client';
+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';
+const AvatarRoot = /* @__PURE__ */ React.forwardRef(function AvatarRoot({ size, className, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    return (_jsx(BaseAvatar.Root, { ...props, ref: ref, "data-size": sizeName(size), "data-ui-size": scheme, className: skin('pui-avatar', className) }));
+});
+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(Icon, { name: 'user' }) }));
+});
+export const Avatar = {
+    ...BaseAvatar,
+    Root: AvatarRoot,
+    Status: /* @__PURE__ */ part('span', 'pui-avatar-status'),
+    Fallback: AvatarFallback,
+    Image: /* @__PURE__ */ part(BaseAvatar.Image, 'pui-avatar-image'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { AvatarFallback, AvatarRoot };
+export const { Image: AvatarImage, Status: AvatarStatus } = Avatar;

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 }));
+});

package/dist/breadcrumbs.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare function BreadcrumbSeparator({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function BreadcrumbCurrent({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export declare const Breadcrumbs: {
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<import("./link.js").LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    Separator: typeof BreadcrumbSeparator;
+    Current: typeof BreadcrumbCurrent;
+};
+export declare const BreadcrumbsRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, BreadcrumbsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>, BreadcrumbsItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>, BreadcrumbsLink: React.ForwardRefExoticComponent<import("./link.js").LinkProps & React.RefAttributes<HTMLAnchorElement>>, BreadcrumbsSeparator: typeof BreadcrumbSeparator, BreadcrumbsCurrent: typeof BreadcrumbCurrent;
+export {};

package/dist/breadcrumbs.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon } from './icon.js';
+import { cx } from './parts.js';
+import { Link } from './link.js';
+const BreadcrumbRoot = /* @__PURE__ */ React.forwardRef(function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ...props }, ref) {
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: cx('pui-breadcrumbs', className) }));
+});
+const BreadcrumbList = /* @__PURE__ */ React.forwardRef(function BreadcrumbList({ className, role = 'list', ...props }, ref) {
+    return (_jsx("ol", { ...props, role: role, ref: ref, className: cx('pui-breadcrumb-list', className) }));
+});
+const BreadcrumbItem = /* @__PURE__ */ React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
+    return (_jsx("li", { ...props, ref: ref, className: cx('pui-breadcrumb-item', className) }));
+});
+function BreadcrumbSeparator({ className, ...props }) {
+    return (_jsx("span", { ...props, className: cx('pui-breadcrumb-separator', className), "aria-hidden": 'true', children: _jsx(Icon, { name: 'chevron-forward' }) }));
+}
+function BreadcrumbCurrent({ className, ...props }) {
+    return (_jsx("span", { ...props, className: cx('pui-breadcrumb-current', className), "aria-current": 'page' }));
+}
+export const Breadcrumbs = {
+    Root: BreadcrumbRoot,
+    List: BreadcrumbList,
+    Item: BreadcrumbItem,
+    Link,
+    Separator: BreadcrumbSeparator,
+    Current: BreadcrumbCurrent,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Root: BreadcrumbsRoot, List: BreadcrumbsList, Item: BreadcrumbsItem, Link: BreadcrumbsLink, Separator: BreadcrumbsSeparator, Current: BreadcrumbsCurrent, } = Breadcrumbs;

package/dist/button.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
 import { type ComponentSizeAlias } from './sizing.js';
 /** Visual priority. `default` remains a compatibility alias of `primary`. */
 export type ButtonVariant = 'primary' | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
@@ -9,3 +10,13 @@ export type ButtonProps = React.ComponentProps<typeof BaseButton> & {
     size?: ButtonSize;
 };
 export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type LinkButtonProps = Omit<useRender.ComponentProps<'a'>, 'ref'> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+/** A link that looks like a Button. It navigates, so it stays a link for assistive
+ * technology; pass a router's link element as `render` to keep client navigation. */
+export declare const LinkButton: React.ForwardRefExoticComponent<Omit<useRender.ComponentProps<"a", {}, import("@base-ui/react/types").HTMLProps>, "ref"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/button.js

@@ -2,15 +2,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
 import { useComponentSize } from './sizing.js';
-import { skin } from './parts.js';
-export const Button = React.forwardRef(function Button({ className, variant = 'default', size, ...props }, ref) {
-    const scheme = useComponentSize(size === 'icon-sm' || size === 'icon-xs'
+import { sizeName, skin, cx } from './parts.js';
+/** The size scheme a button size implies: icon sizes follow the scale, xs and icon
+ * keep the surrounding scheme. */
+function schemeOf(size) {
+    return size === 'icon-sm' || size === 'icon-xs'
         ? 'small'
         : size === 'icon-lg'
             ? 'large'
             : size === 'xs' || size === 'icon'
                 ? undefined
-                : size);
-    return (_jsx(BaseButton, { ref: ref, ...props, className: skin('pui-button', className), "data-variant": variant, "data-size": size, "data-ui-size": scheme }));
+                : size;
+}
+export const Button = /* @__PURE__ */ React.forwardRef(function Button({ className, variant = 'default', size, ...props }, ref) {
+    const scheme = useComponentSize(schemeOf(size));
+    return (_jsx(BaseButton, { ref: ref, ...props, className: skin('pui-button', className), "data-variant": variant, "data-size": sizeName(size), "data-ui-size": scheme }));
+});
+/** A link that looks like a Button. It navigates, so it stays a link for assistive
+ * technology; pass a router's link element as `render` to keep client navigation. */
+export const LinkButton = /* @__PURE__ */ React.forwardRef(function LinkButton({ render, className, variant = 'default', size, ...props }, ref) {
+    const scheme = useComponentSize(schemeOf(size));
+    return useRender({
+        defaultTagName: 'a',
+        render,
+        ref,
+        props: {
+            ...props,
+            className: cx('pui-button', className),
+            'data-variant': variant,
+            'data-size': sizeName(size),
+            'data-ui-size': scheme,
+        },
+    });
 });