@surflane/ui 0.4.0 → 0.5.0

package/README.md

@@ -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.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 = /* @__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) }));
+    return (_jsx("div", { ...props, ref: ref, "data-layout": layout, "data-sidebar": collapsed ? 'collapsed' : 'expanded', className: cx('pui-app-shell', className) }));
 });
 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) }));
+    return (_jsx("aside", { ...props, ref: ref, 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 })] }));
+    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);
@@ -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 }));
+});

package/dist/{navigation.d.ts → breadcrumbs.d.ts}

@@ -1,17 +1,13 @@
 import * as React from 'react';
-export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/separator").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 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<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    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<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>, BreadcrumbsSeparator: typeof BreadcrumbSeparator, BreadcrumbsCurrent: 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 { sizeName, skin } from './parts.js';
-export const Button = /* @__PURE__ */ 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);
+                : 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,
+        },
+    });
+});

package/dist/{content.d.ts → card.d.ts}

@@ -1,15 +1,17 @@
 import * as React from 'react';
 declare const CardRoot: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    tone?: "canvas" | "subtle";
-    padding?: import("./foundations.js").Space;
+    surface?: import("./layout.js").SurfaceKind;
+    tone?: import("./layout.js").SurfaceKind;
+    padding?: import("./layout.js").Space;
 }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     level?: 2 | 3 | 4 | 5 | 6;
 } & React.RefAttributes<HTMLHeadingElement>>;
 export declare const Card: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-        tone?: "canvas" | "subtle";
-        padding?: import("./foundations.js").Space;
+        surface?: import("./layout.js").SurfaceKind;
+        tone?: import("./layout.js").SurfaceKind;
+        padding?: import("./layout.js").Space;
     }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Header: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -27,26 +29,6 @@ export declare const Card: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onCopy'> & {
-    code: string;
-    label?: string;
-    language?: string;
-    wrap?: boolean;
-    copyLabel?: string;
-    copiedLabel?: string;
-    copyErrorLabel?: string;
-    onCopy?: (code: string) => void | Promise<void>;
-};
-export declare const CodeBlock: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onCopy"> & {
-    code: string;
-    label?: string;
-    language?: string;
-    wrap?: boolean;
-    copyLabel?: string;
-    copiedLabel?: string;
-    copyErrorLabel?: string;
-    onCopy?: (code: string) => void | Promise<void>;
-} & React.RefAttributes<HTMLDivElement>>;
 export { CardRoot, CardTitle };
 export declare const CardHeader: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;

package/dist/card.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Surface } from './layout.js';
+import { part, cx } from './parts.js';
+const CardRoot = /* @__PURE__ */ React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
+    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: cx('pui-card', className) }));
+});
+const CardTitle = /* @__PURE__ */ React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
+    return React.createElement(`h${level}`, {
+        ...props,
+        ref,
+        className: cx('pui-card-title', className),
+    });
+});
+export const Card = {
+    Root: CardRoot,
+    Header: /* @__PURE__ */ part('div', 'pui-card-header'),
+    Title: CardTitle,
+    Description: /* @__PURE__ */ part('p', 'pui-card-description'),
+    Body: /* @__PURE__ */ part('div', 'pui-card-body'),
+    Footer: /* @__PURE__ */ part('div', 'pui-card-footer'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { CardRoot, CardTitle };
+export const { Header: CardHeader, Description: CardDescription, Body: CardBody, Footer: CardFooter, } = Card;