@surflane/ui 0.4.0 → 0.5.0

package/dist/switch.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { skin, part } from './parts.js';
+import { useRootRef, useResetValue } from './form-state.js';
+const SwitchRoot = /* @__PURE__ */ React.forwardRef(function SwitchRoot({ size, checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    const [element, attach] = useRootRef(ref);
+    const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
+    return (_jsx(BaseSwitch.Root, { ...props, "data-ui-size": size ? scheme : undefined, form: form, ref: attach, checked: selected, className: skin('pui-switch', className), onCheckedChange: (next, event) => {
+            onCheckedChange?.(next, event);
+            if (checked === undefined && !event.isCanceled)
+                setSelected(next);
+        } }));
+});
+export const Switch = {
+    ...BaseSwitch,
+    Root: SwitchRoot,
+    Thumb: /* @__PURE__ */ part(BaseSwitch.Thumb, 'pui-switch-thumb'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { SwitchRoot };
+export const { Thumb: SwitchThumb } = Switch;

package/dist/syntax-highlighter.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ScrollArea } from './scroll-area.js';
 import { SyntaxEngineContext } from './syntax-context.js';
+import { cx } from './parts.js';
 export const syntaxLanguages = [
     'tsx',
     'jsx',
@@ -63,7 +64,7 @@ export const SyntaxHighlighter = /* @__PURE__ */ React.forwardRef(function Synta
     const tokens = result?.code === code && result.language === lang ? result.tokens : null;
     const eols = code.match(/\r\n|\n|\r/g) ?? [];
     const valid = tokens && tokens.length === eols.length + 1;
-    const element = (_jsx("code", { ...props, ref: ref, className: ['pui-syntax', className].filter(Boolean).join(' '), "data-language": lang, "data-highlighted": valid ? 'true' : 'false', children: valid
+    const element = (_jsx("code", { ...props, ref: ref, className: cx('pui-syntax', className), "data-language": lang, "data-highlighted": valid ? 'true' : 'false', children: valid
             ? tokens.map((line, i) => (_jsxs(React.Fragment, { children: [line.map((token, j) => (_jsx("span", { "data-syntax": token.role, children: token.content }, j))), eols[i] ?? ''] }, i)))
             : code }));
     return inline ? (element) : (_jsx(ScrollArea, { label: label, orientation: 'horizontal', rootClassName: 'pui-syntax-scroll', children: _jsx("pre", { className: 'pui-syntax-pre', "data-wrap": wrap || undefined, children: element }) }));

package/dist/{data.d.ts → table.d.ts}

@@ -7,6 +7,9 @@ declare const TableContainer: React.ForwardRefExoticComponent<Omit<Omit<React.De
     scrollChain?: "auto" | "contain";
 } & React.RefAttributes<HTMLDivElement>, "ref"> & {
     label: string;
+    /** Hangs the table into the gutter by its cell inset, so cell text lines up with
+     * the text around it and a row's hover reaches past it evenly on both sides. */
+    bleed?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export type TableDensity = 'default' | 'compact';
 declare const TableRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
@@ -55,6 +58,9 @@ export declare const Table: {
         scrollChain?: "auto" | "contain";
     } & React.RefAttributes<HTMLDivElement>, "ref"> & {
         label: string;
+        /** Hangs the table into the gutter by its cell inset, so cell text lines up with
+         * the text around it and a row's hover reaches past it evenly on both sides. */
+        bleed?: boolean;
     } & React.RefAttributes<HTMLDivElement>>;
     Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -97,38 +103,7 @@ export declare const Table: {
         colSpan: number;
     } & React.RefAttributes<HTMLTableCellElement>>;
 };
-declare const ListRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-declare const ListItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    selected?: boolean;
-} & React.RefAttributes<HTMLLIElement>>;
-export declare const List: {
-    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-        selected?: boolean;
-    } & React.RefAttributes<HTMLLIElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Title: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLParagraphElement>>;
-    Actions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
-export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
-export declare const ListContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ListTitle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>, ListDescription: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLParagraphElement>>, ListActions: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
+export { TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
 export declare const TableCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLTableCaptionElement>>, TableHead: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
@@ -138,3 +113,4 @@ export declare const TableCaption: React.ForwardRefExoticComponent<Omit<Omit<Rea
 } & React.RefAttributes<HTMLTableSectionElement>>, TableFoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLTableSectionElement>>;
+export { useTableSelection, type TableSelectionOptions, type TableSelectionCheckbox, } from './table-selection.js';

package/dist/{data.js → table.js}

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { Button } from './button.js';
-import { part } from './parts.js';
+import { part, cx } from './parts.js';
 import { ScrollArea } from './scroll-area.js';
-const TableContainer = /* @__PURE__ */ React.forwardRef(function TableContainer(props, ref) {
-    return _jsx(ScrollArea, { ...props, ref: ref });
+const TableContainer = /* @__PURE__ */ React.forwardRef(function TableContainer({ bleed, rootClassName, ...props }, ref) {
+    return (_jsx(ScrollArea, { ...props, ref: ref, rootClassName: cx(bleed && 'pui-table-bleed', rootClassName) }));
 });
 const RootPart = /* @__PURE__ */ part('table', 'pui-table');
 const TableRoot = /* @__PURE__ */ React.forwardRef(function TableRoot({ density, stickyHeader, ...props }, ref) {
@@ -25,28 +26,26 @@ const TableCell = /* @__PURE__ */ React.forwardRef(function TableCell({ align, n
     return _jsx(CellPart, { ...props, ...layout({ align, numeric }), ref: ref });
 });
 function SortIcon({ sort }) {
-    return (_jsx("svg", { className: 'pui-table-sort-icon', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round', "aria-hidden": 'true', children: _jsx("path", { d: sort === 'ascending'
-                ? 'M12 19V5m-6 6 6-6 6 6'
-                : sort === 'descending'
-                    ? 'M12 5v14m-6-6 6 6 6-6'
-                    : 'm8 9 4-4 4 4m-8 6 4 4 4-4' }) }));
+    return (_jsx(Icon, { name: sort === 'ascending'
+            ? 'arrow-up'
+            : sort === 'descending'
+                ? 'arrow-down'
+                : 'sort', className: 'pui-table-sort-icon' }));
 }
 /** A column header whose button sorts the column. aria-sort names the order on the sorted column only. */
 const TableSortHeader = /* @__PURE__ */ React.forwardRef(function TableSortHeader({ sort, onSort, disabled, children, className, ...props }, ref) {
-    return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: ['pui-table-sort-header', className].filter(Boolean).join(' '), children: _jsxs(Button, { variant: 'ghost', className: 'pui-table-sort', "data-sort": sort, disabled: disabled, onClick: onSort, children: [_jsx("span", { children: children }), _jsx(SortIcon, { sort: sort })] }) }));
+    return (_jsx(TableHeaderCell, { ...props, ref: ref, scope: 'col', "aria-sort": sort, className: cx('pui-table-sort-header', className), children: _jsxs(Button, { variant: 'ghost', className: 'pui-table-sort', "data-sort": sort, disabled: disabled, onClick: onSort, children: [_jsx("span", { children: children }), _jsx(SortIcon, { sort: sort })] }) }));
 });
 /** One-line text that ends in an ellipsis. String content also becomes the title. */
 const TableTruncate = /* @__PURE__ */ React.forwardRef(function TableTruncate({ className, title, children, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: ['pui-table-truncate', className].filter(Boolean).join(' '), children: children }));
+    return (_jsx("span", { ...props, ref: ref, title: title ?? (typeof children === 'string' ? children : undefined), className: cx('pui-table-truncate', className), children: children }));
 });
 /** A full-width body row for loading, empty, error and permission messages. It has no hover. */
 const TableMessage = /* @__PURE__ */ React.forwardRef(function TableMessage({ className, ...props }, ref) {
-    return (_jsx("tr", { className: 'pui-table-row pui-table-message-row', children: _jsx("td", { ...props, ref: ref, className: ['pui-table-cell pui-table-message', className]
-                .filter(Boolean)
-                .join(' ') }) }));
+    return (_jsx("tr", { className: 'pui-table-row pui-table-message-row', children: _jsx("td", { ...props, ref: ref, className: cx('pui-table-cell pui-table-message', className) }) }));
 });
 const TableRow = /* @__PURE__ */ React.forwardRef(function TableRow({ selected, className, ...props }, ref) {
-    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-table-row', className].filter(Boolean).join(' ') }));
+    return (_jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined, className: cx('pui-table-row', className) }));
 });
 export const Table = {
     Container: TableContainer,
@@ -62,21 +61,7 @@ export const Table = {
     Truncate: TableTruncate,
     Message: TableMessage,
 };
-const ListRoot = /* @__PURE__ */ React.forwardRef(function ListRoot({ className, ...props }, ref) {
-    return (_jsx("ul", { role: 'list', ...props, ref: ref, className: ['pui-list', className].filter(Boolean).join(' ') }));
-});
-const ListItem = /* @__PURE__ */ React.forwardRef(function ListItem({ selected, className, ...props }, ref) {
-    return (_jsx("li", { ...props, ref: ref, "data-selected": selected || undefined, className: ['pui-list-item', className].filter(Boolean).join(' ') }));
-});
-export const List = {
-    Root: ListRoot,
-    Item: ListItem,
-    Content: /* @__PURE__ */ part('div', 'pui-list-content'),
-    Title: /* @__PURE__ */ part('div', 'pui-list-title'),
-    Description: /* @__PURE__ */ part('p', 'pui-list-description'),
-    Actions: /* @__PURE__ */ part('div', 'pui-list-actions'),
-};
 // Flat names for React Server Components, which cannot dot into client exports.
-export { ListRoot, ListItem, TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
-export const { Content: ListContent, Title: ListTitle, Description: ListDescription, Actions: ListActions, } = List;
+export { TableContainer, TableRoot, TableRow, TableHeaderCell, TableSortHeader, TableCell, TableTruncate, TableMessage, };
 export const { Caption: TableCaption, Head: TableHead, Body: TableBody, Foot: TableFoot, } = Table;
+export { useTableSelection, } from './table-selection.js';

package/dist/textarea.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+/** A multi-line text field. Inside Field.Root it takes the label, description and
+ * error from the field, as Input does. */
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    size?: ComponentSizeAlias;
+} & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/textarea.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Field as BaseField } from '@base-ui/react/field';
+import { cx } from './parts.js';
+/** A multi-line text field. Inside Field.Root it takes the label, description and
+ * error from the field, as Input does. */
+export const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ className, size, rows, cols, wrap, ...props }, ref) {
+    const scheme = useComponentSize(size);
+    return (_jsx(BaseField.Control, { ...props, ref: ref, "data-ui-size": scheme, render: _jsx("textarea", { rows: rows, cols: cols, wrap: wrap }), className: cx('pui-input pui-textarea', className) }));
+});

package/dist/toast.js

@@ -1,20 +1,21 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { useComponentSize } from './sizing.js';
 import { Toast as BaseToast } from '@base-ui/react/toast';
-import { part, skin } from './parts.js';
+import { part, skin, cx } from './parts.js';
 import { StatusIcon } from './status.js';
 const ToneContext = /* @__PURE__ */ React.createContext('neutral');
 const Root = /* @__PURE__ */ React.forwardRef(function Root({ tone = 'neutral', className, ...props }, ref) {
     return (_jsx(ToneContext.Provider, { value: tone, children: _jsx(BaseToast.Root, { ...props, ref: ref, "data-tone": tone, className: skin('pui-toast', className) }) }));
 });
-const Icon = /* @__PURE__ */ React.forwardRef(function Icon({ tone, children, className, ...props }, ref) {
+const ToneIcon = /* @__PURE__ */ React.forwardRef(function ToastIcon({ tone, children, className, ...props }, ref) {
     const inherited = React.useContext(ToneContext);
-    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: ['pui-toast-icon', className].filter(Boolean).join(' '), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: cx('pui-toast-icon', className), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
 });
 const Close = /* @__PURE__ */ React.forwardRef(function Close({ className, children, ...props }, ref) {
-    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon-sm', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-close', 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 6 12 12M18 6 6 18' }) })) }));
+    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon-sm', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-close', className), children: children ?? _jsx(Icon, { name: 'close' }) }));
 });
 const Action = /* @__PURE__ */ React.forwardRef(function Action({ className, ...props }, ref) {
     return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'small', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
@@ -85,7 +86,7 @@ const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = '
 export const Toast = {
     ...BaseToast,
     Root,
-    Icon,
+    Icon: ToneIcon,
     Close,
     Action,
     Viewport,
@@ -93,7 +94,7 @@ export const Toast = {
     Title: /* @__PURE__ */ part(BaseToast.Title, 'pui-toast-title'),
     Description: /* @__PURE__ */ part(BaseToast.Description, 'pui-toast-description'),
     Text: /* @__PURE__ */ part('div', 'pui-toast-text'),
-    Positioner: /* @__PURE__ */ part(BaseToast.Positioner, 'pui-positioner'),
+    Positioner: /* @__PURE__ */ part(BaseToast.Positioner, 'pui-positioner', { portal: true }),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Action: ToastAction, Arrow: ToastArrow, Close: ToastClose, Content: ToastContent, Description: ToastDescription, Portal: ToastPortal, Positioner: ToastPositioner, Provider: ToastProvider, Root: ToastRoot, Title: ToastTitle, Viewport: ToastViewport, Icon: ToastIcon, Text: ToastText, } = Toast;

package/dist/toggle-group.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+export declare function ToggleGroup<Value extends string>({ className, ref, ...props }: BaseToggleGroup.Props<Value> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;

package/dist/toggle-group.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { skin } from './parts.js';
+export function ToggleGroup({ className, ref, ...props }) {
+    return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin('pui-toggle-group', className) }));
+}

package/dist/toggle.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+export declare function Toggle<Value extends string>({ className, size, ref, ...props }: BaseToggle.Props<Value> & {
+    size?: ComponentSizeAlias | 'icon';
+    ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;

package/dist/toggle.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useComponentSize } from './sizing.js';
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { sizeName, skin } from './parts.js';
+export function Toggle({ className, size, ref, ...props }) {
+    const scheme = useComponentSize(size === 'icon' ? undefined : size);
+    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('pui-button pui-toggle', className), "data-size": sizeName(size), "data-ui-size": scheme }));
+}

package/dist/{commands.d.ts → toolbar.d.ts}

@@ -1,14 +1,4 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
-import { Toggle as BaseToggle } from '@base-ui/react/toggle';
-import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
-export declare function Toggle<Value extends string>({ className, size, ref, ...props }: BaseToggle.Props<Value> & {
-    size?: ComponentSizeAlias | 'icon';
-    ref?: React.Ref<HTMLButtonElement>;
-}): React.JSX.Element;
-export declare function ToggleGroup<Value extends string>({ className, ref, ...props }: BaseToggleGroup.Props<Value> & {
-    ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
 export declare const Toolbar: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -29,9 +19,6 @@ export declare const Toolbar: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export declare const Menubar: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menubar").MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDivElement>>;
 export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;
 } & React.RefAttributes<HTMLButtonElement>>, ToolbarGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {

package/dist/toolbar.js

@@ -0,0 +1,14 @@
+'use client';
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
+import { part } from './parts.js';
+export const Toolbar = {
+    ...BaseToolbar,
+    Root: /* @__PURE__ */ part(BaseToolbar.Root, 'pui-toolbar'),
+    Group: /* @__PURE__ */ part(BaseToolbar.Group, 'pui-toolbar-group'),
+    Button: /* @__PURE__ */ part(BaseToolbar.Button, 'pui-button pui-toolbar-button'),
+    Link: /* @__PURE__ */ part(BaseToolbar.Link, 'pui-button pui-toolbar-link'),
+    Input: /* @__PURE__ */ part(BaseToolbar.Input, 'pui-input pui-toolbar-input'),
+    Separator: /* @__PURE__ */ part(BaseToolbar.Separator, 'pui-toolbar-separator'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Button: ToolbarButton, Group: ToolbarGroup, Input: ToolbarInput, Link: ToolbarLink, Root: ToolbarRoot, Separator: ToolbarSeparator, } = Toolbar;

package/dist/tooltip.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 export declare function TooltipProvider({ delayDuration, skipDelayDuration, children, }: {
     delayDuration?: number;
     skipDelayDuration?: number;
     children: React.ReactNode;
 }): React.JSX.Element;
-export declare function Tooltip({ label, enabled, children, }: {
+export declare function Tooltip({ label, enabled, side, align, sideOffset, children, }: {
     label: string;
     enabled?: boolean;
     children: React.ReactElement;
-}): React.JSX.Element;
+} & Pick<React.ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>, 'side' | 'align' | 'sideOffset'>): React.JSX.Element;

package/dist/tooltip.js

@@ -5,9 +5,9 @@ import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 export function TooltipProvider({ delayDuration = 150, skipDelayDuration = 300, children, }) {
     return (_jsx(BaseTooltip.Provider, { delay: delayDuration, closeDelay: 0, timeout: skipDelayDuration, children: children }));
 }
-export function Tooltip({ label, enabled = true, children, }) {
+export function Tooltip({ label, enabled = true, side = 'right', align, sideOffset = 10, children, }) {
     const scheme = useComponentSize();
     if (!enabled)
         return children;
-    return (_jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: 'right', sideOffset: 10, collisionPadding: 8, className: 'pui-positioner pui-tooltip-positioner', children: _jsx(BaseTooltip.Popup, { className: 'pui-tooltip', "data-ui-size": scheme, children: label }) }) })] }));
+    return (_jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 8, className: 'pui-positioner pui-tooltip-positioner', children: _jsx(BaseTooltip.Popup, { className: 'pui-tooltip', "data-ui-size": scheme, children: label }) }) })] }));
 }

package/dist/tree.js

@@ -2,11 +2,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import * as React from 'react';
+import { Icon } from './icon.js';
 import { useComponentSize } from './sizing.js';
 import { buildProxiedInstance, syncDataLoaderFeature, } from '@headless-tree/core';
 import { useTree } from '@headless-tree/react';
 import { defaultRangeExtractor, useVirtualizer, } from '@tanstack/react-virtual';
 import { ScrollArea } from './scroll-area.js';
+import { cx } from './parts.js';
 const normalize = (text) => text.normalize('NFKC').toLocaleLowerCase();
 /** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
 export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, selectedIds, defaultSelectedIds = [], onSelectedIdsChange, selectionMode = 'single', height = 320, rowHeight: explicitRowHeight, size, virtualized = true, emptyLabel = 'No items.', dir, className, }) {
@@ -271,7 +273,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
             .getVirtualItems()
             .map((row) => ({ index: row.index, start: row.start }))
         : items.map((_, index) => ({ index, start: index * rowHeight }));
-    return (_jsx(ScrollArea, { orientation: 'vertical', label: `${label} scroll area`, tabIndex: -1, ref: viewport, scrollChain: 'contain', rootClassName: ['pui-tree-scroll', className].filter(Boolean).join(' '), dir: dir, rootStyle: { blockSize: height, direction: dir }, className: 'pui-tree-viewport', children: items.length ? (_jsx("div", { ...containerProps, ref: (element) => {
+    return (_jsx(ScrollArea, { orientation: 'vertical', label: `${label} scroll area`, tabIndex: -1, ref: viewport, scrollChain: 'contain', rootClassName: cx('pui-tree-scroll', className), dir: dir, rootStyle: { blockSize: height, direction: dir }, className: 'pui-tree-viewport', children: items.length ? (_jsx("div", { ...containerProps, ref: (element) => {
                 container.current = element;
                 containerProps.ref(element);
             }, dir: dir, className: 'pui-tree', "data-ui-size": scheme, "aria-multiselectable": selectionMode === 'multiple' || undefined, onKeyDown: keydown, onFocusCapture: () => {
@@ -305,7 +307,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
                                 item.collapse();
                             else
                                 item.expand();
-                        }, children: _jsx("svg", { "aria-hidden": 'true', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "data-expanded": item.isExpanded() || undefined, children: _jsx("path", { d: 'm9 5 7 7-7 7' }) }) })) : (_jsx("span", { className: 'pui-tree-leaf', "aria-hidden": 'true' })),
+                        }, children: _jsx(Icon, { name: 'chevron-forward', "data-expanded": item.isExpanded() || undefined }) })) : (_jsx("span", { className: 'pui-tree-leaf', "aria-hidden": 'true' })),
                     _jsx("span", { className: 'pui-tree-label', children: node.label })));
             }) })) : (_jsx("div", { role: 'status', className: 'pui-tree-empty', children: emptyLabel })) }));
 }

package/dist/typography.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export declare function Heading({ level, size, className, ...props }: React.HTMLAttributes<HTMLHeadingElement> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 'display' | 'title' | 'page' | 'section' | 'subsection' | 'workspace' | 'document';
+}): React.JSX.Element;
+export declare function Text({ as: Tag, variant, color, weight, className, ...props }: React.HTMLAttributes<HTMLElement> & {
+    as?: 'p' | 'span' | 'div';
+    variant?: 'body' | 'reading' | 'table' | 'caption' | 'label' | 'mono' | 'metric';
+    color?: 'primary' | 'secondary' | 'muted';
+    weight?: 'regular' | 'medium';
+}): React.JSX.Element;
+export declare const Prose: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/typography.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx } from './parts.js';
+export function Heading({ level = 2, size = 'section', className, ...props }) {
+    const Tag = `h${level}`;
+    return (_jsx(Tag, { ...props, className: cx('pui-heading', className), "data-size": size }));
+}
+export function Text({ as: Tag = 'p', variant = 'body', color = 'primary', weight = 'regular', className, ...props }) {
+    return (_jsx(Tag, { ...props, className: cx('pui-text', className), "data-variant": variant, "data-color": color, "data-weight": weight }));
+}
+export const Prose = /* @__PURE__ */ React.forwardRef(function Prose({ className, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: cx('pui-prose', className) });
+});