@surflane/ui 0.4.0 → 0.6.0

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,18 @@
 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, }: {
-    label: string;
+export type TooltipProps = {
+    /** What the trigger does, in a few words. It may hold an icon or emphasis, but
+     * nothing interactive: a tooltip never takes focus. */
+    label: React.ReactNode;
+    /** A keyboard shortcut for the same action, such as '⌘B', set apart after the
+     * label. */
+    shortcut?: string;
     enabled?: boolean;
     children: React.ReactElement;
-}): React.JSX.Element;
+} & Pick<React.ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>, 'side' | 'align' | 'sideOffset'>;
+export declare function Tooltip({ label, shortcut, enabled, side, align, sideOffset, children, }: TooltipProps): 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, shortcut, 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 }) }) })] }));
+    // Disabling keeps the trigger mounted, so turning the tooltip on or off never
+    // moves focus.
+    return (_jsxs(BaseTooltip.Root, { disabled: !enabled, 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: _jsxs(BaseTooltip.Popup, { className: 'pui-tooltip', "data-ui-size": scheme, children: [label, shortcut && _jsx("kbd", { className: 'pui-tooltip-shortcut', children: shortcut })] }) }) })] }));
 }

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -28,8 +28,6 @@
   ],
   "files": [
     "dist",
-    "src/styles.css",
-    "src/all.css",
     "LICENSE-MIT",
     "LICENSE-APACHE"
   ],
@@ -38,15 +36,84 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles.css": "./src/styles.css",
-    "./all.css": "./src/all.css",
+    "./styles.css": "./dist/css/styles.css",
+    "./all.css": "./dist/css/all.css",
+    "./button.css": "./dist/css/button.css",
+    "./toolbar.css": "./dist/css/toolbar.css",
+    "./input.css": "./dist/css/input.css",
+    "./select.css": "./dist/css/select.css",
+    "./native-select.css": "./dist/css/native-select.css",
+    "./field.css": "./dist/css/field.css",
+    "./fieldset.css": "./dist/css/fieldset.css",
+    "./form.css": "./dist/css/form.css",
+    "./textarea.css": "./dist/css/textarea.css",
+    "./combobox.css": "./dist/css/combobox.css",
+    "./autocomplete.css": "./dist/css/autocomplete.css",
+    "./number-field.css": "./dist/css/number-field.css",
+    "./slider.css": "./dist/css/slider.css",
+    "./otp-field.css": "./dist/css/otp-field.css",
+    "./date-picker.css": "./dist/css/date-picker.css",
+    "./file-upload.css": "./dist/css/file-upload.css",
+    "./checkbox.css": "./dist/css/checkbox.css",
+    "./checkbox-group.css": "./dist/css/checkbox-group.css",
+    "./radio-group.css": "./dist/css/radio-group.css",
+    "./switch.css": "./dist/css/switch.css",
+    "./toggle.css": "./dist/css/toggle.css",
+    "./toggle-group.css": "./dist/css/toggle-group.css",
+    "./choice-label.css": "./dist/css/choice-label.css",
+    "./popover.css": "./dist/css/popover.css",
+    "./menu.css": "./dist/css/menu.css",
+    "./context-menu.css": "./dist/css/context-menu.css",
+    "./tooltip.css": "./dist/css/tooltip.css",
+    "./preview-card.css": "./dist/css/preview-card.css",
+    "./dialog.css": "./dist/css/dialog.css",
+    "./alert-dialog.css": "./dist/css/alert-dialog.css",
+    "./sheet.css": "./dist/css/sheet.css",
+    "./drawer.css": "./dist/css/drawer.css",
+    "./tabs.css": "./dist/css/tabs.css",
+    "./accordion.css": "./dist/css/accordion.css",
+    "./collapsible.css": "./dist/css/collapsible.css",
+    "./navigation-menu.css": "./dist/css/navigation-menu.css",
+    "./menubar.css": "./dist/css/menubar.css",
+    "./link.css": "./dist/css/link.css",
+    "./breadcrumbs.css": "./dist/css/breadcrumbs.css",
+    "./pagination.css": "./dist/css/pagination.css",
+    "./bottom-navigation.css": "./dist/css/bottom-navigation.css",
+    "./avatar.css": "./dist/css/avatar.css",
+    "./badge.css": "./dist/css/badge.css",
+    "./card.css": "./dist/css/card.css",
+    "./table.css": "./dist/css/table.css",
+    "./code.css": "./dist/css/code.css",
+    "./syntax-highlighter.css": "./dist/css/syntax-highlighter.css",
+    "./markdown.css": "./dist/css/markdown.css",
+    "./list.css": "./dist/css/list.css",
+    "./stat.css": "./dist/css/stat.css",
+    "./sparkline.css": "./dist/css/sparkline.css",
+    "./tree.css": "./dist/css/tree.css",
+    "./chart.css": "./dist/css/chart.css",
+    "./scroll-area.css": "./dist/css/scroll-area.css",
+    "./separator.css": "./dist/css/separator.css",
+    "./progress.css": "./dist/css/progress.css",
+    "./meter.css": "./dist/css/meter.css",
+    "./toast.css": "./dist/css/toast.css",
+    "./inline-message.css": "./dist/css/inline-message.css",
+    "./spinner.css": "./dist/css/spinner.css",
+    "./skeleton.css": "./dist/css/skeleton.css",
+    "./empty-state.css": "./dist/css/empty-state.css",
+    "./layout.css": "./dist/css/layout.css",
+    "./typography.css": "./dist/css/typography.css",
+    "./icon.css": "./dist/css/icon.css",
+    "./sizing.css": "./dist/css/sizing.css",
+    "./app-shell.css": "./dist/css/app-shell.css",
+    "./page-header.css": "./dist/css/page-header.css",
+    "./filter-bar.css": "./dist/css/filter-bar.css",
     "./button": {
       "types": "./dist/button.d.ts",
       "import": "./dist/button.js"
     },
-    "./slot": {
-      "types": "./dist/slot.d.ts",
-      "import": "./dist/slot.js"
+    "./toolbar": {
+      "types": "./dist/toolbar.d.ts",
+      "import": "./dist/toolbar.js"
     },
     "./input": {
       "types": "./dist/input.d.ts",
@@ -56,37 +123,173 @@
       "types": "./dist/select.d.ts",
       "import": "./dist/select.js"
     },
+    "./native-select": {
+      "types": "./dist/native-select.d.ts",
+      "import": "./dist/native-select.js"
+    },
+    "./field": {
+      "types": "./dist/field.d.ts",
+      "import": "./dist/field.js"
+    },
+    "./fieldset": {
+      "types": "./dist/fieldset.d.ts",
+      "import": "./dist/fieldset.js"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js"
+    },
+    "./textarea": {
+      "types": "./dist/textarea.d.ts",
+      "import": "./dist/textarea.js"
+    },
+    "./combobox": {
+      "types": "./dist/combobox.d.ts",
+      "import": "./dist/combobox.js"
+    },
+    "./autocomplete": {
+      "types": "./dist/autocomplete.d.ts",
+      "import": "./dist/autocomplete.js"
+    },
+    "./number-field": {
+      "types": "./dist/number-field.d.ts",
+      "import": "./dist/number-field.js"
+    },
+    "./slider": {
+      "types": "./dist/slider.d.ts",
+      "import": "./dist/slider.js"
+    },
+    "./otp-field": {
+      "types": "./dist/otp-field.d.ts",
+      "import": "./dist/otp-field.js"
+    },
+    "./date-picker": {
+      "types": "./dist/date-picker.d.ts",
+      "import": "./dist/date-picker.js"
+    },
+    "./file-upload": {
+      "types": "./dist/file-upload.d.ts",
+      "import": "./dist/file-upload.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js"
+    },
+    "./checkbox-group": {
+      "types": "./dist/checkbox-group.d.ts",
+      "import": "./dist/checkbox-group.js"
+    },
+    "./radio-group": {
+      "types": "./dist/radio-group.d.ts",
+      "import": "./dist/radio-group.js"
+    },
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "import": "./dist/switch.js"
+    },
+    "./toggle": {
+      "types": "./dist/toggle.d.ts",
+      "import": "./dist/toggle.js"
+    },
+    "./toggle-group": {
+      "types": "./dist/toggle-group.d.ts",
+      "import": "./dist/toggle-group.js"
+    },
+    "./choice-label": {
+      "types": "./dist/choice-label.d.ts",
+      "import": "./dist/choice-label.js"
+    },
     "./popover": {
       "types": "./dist/popover.d.ts",
       "import": "./dist/popover.js"
     },
+    "./menu": {
+      "types": "./dist/menu.d.ts",
+      "import": "./dist/menu.js"
+    },
+    "./context-menu": {
+      "types": "./dist/context-menu.d.ts",
+      "import": "./dist/context-menu.js"
+    },
     "./tooltip": {
       "types": "./dist/tooltip.d.ts",
       "import": "./dist/tooltip.js"
     },
+    "./preview-card": {
+      "types": "./dist/preview-card.d.ts",
+      "import": "./dist/preview-card.js"
+    },
     "./dialog": {
       "types": "./dist/dialog.d.ts",
       "import": "./dist/dialog.js"
     },
-    "./sizing": {
-      "types": "./dist/sizing.d.ts",
-      "import": "./dist/sizing.js"
+    "./alert-dialog": {
+      "types": "./dist/alert-dialog.d.ts",
+      "import": "./dist/alert-dialog.js"
     },
-    "./chart": {
-      "types": "./dist/chart.d.ts",
-      "import": "./dist/chart.js"
+    "./sheet": {
+      "types": "./dist/sheet.d.ts",
+      "import": "./dist/sheet.js"
     },
-    "./date-picker": {
-      "types": "./dist/date-picker.d.ts",
-      "import": "./dist/date-picker.js"
+    "./drawer": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.js"
     },
-    "./tree": {
-      "types": "./dist/tree.d.ts",
-      "import": "./dist/tree.js"
+    "./tabs": {
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.js"
     },
-    "./markdown": {
-      "types": "./dist/markdown.d.ts",
-      "import": "./dist/markdown.js"
+    "./accordion": {
+      "types": "./dist/accordion.d.ts",
+      "import": "./dist/accordion.js"
+    },
+    "./collapsible": {
+      "types": "./dist/collapsible.d.ts",
+      "import": "./dist/collapsible.js"
+    },
+    "./navigation-menu": {
+      "types": "./dist/navigation-menu.d.ts",
+      "import": "./dist/navigation-menu.js"
+    },
+    "./menubar": {
+      "types": "./dist/menubar.d.ts",
+      "import": "./dist/menubar.js"
+    },
+    "./link": {
+      "types": "./dist/link.d.ts",
+      "import": "./dist/link.js"
+    },
+    "./breadcrumbs": {
+      "types": "./dist/breadcrumbs.d.ts",
+      "import": "./dist/breadcrumbs.js"
+    },
+    "./pagination": {
+      "types": "./dist/pagination.d.ts",
+      "import": "./dist/pagination.js"
+    },
+    "./bottom-navigation": {
+      "types": "./dist/bottom-navigation.d.ts",
+      "import": "./dist/bottom-navigation.js"
+    },
+    "./avatar": {
+      "types": "./dist/avatar.d.ts",
+      "import": "./dist/avatar.js"
+    },
+    "./badge": {
+      "types": "./dist/badge.d.ts",
+      "import": "./dist/badge.js"
+    },
+    "./card": {
+      "types": "./dist/card.d.ts",
+      "import": "./dist/card.js"
+    },
+    "./table": {
+      "types": "./dist/table.d.ts",
+      "import": "./dist/table.js"
+    },
+    "./code": {
+      "types": "./dist/code.d.ts",
+      "import": "./dist/code.js"
     },
     "./syntax-highlighter": {
       "types": "./dist/syntax-highlighter.d.ts",
@@ -96,10 +299,106 @@
       "types": "./dist/syntax-highlighting.d.ts",
       "import": "./dist/syntax-highlighting.js"
     },
+    "./markdown": {
+      "types": "./dist/markdown.d.ts",
+      "import": "./dist/markdown.js"
+    },
+    "./list": {
+      "types": "./dist/list.d.ts",
+      "import": "./dist/list.js"
+    },
+    "./stat": {
+      "types": "./dist/stat.d.ts",
+      "import": "./dist/stat.js"
+    },
+    "./sparkline": {
+      "types": "./dist/sparkline.d.ts",
+      "import": "./dist/sparkline.js"
+    },
+    "./tree": {
+      "types": "./dist/tree.d.ts",
+      "import": "./dist/tree.js"
+    },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "import": "./dist/chart.js"
+    },
+    "./scroll-area": {
+      "types": "./dist/scroll-area.d.ts",
+      "import": "./dist/scroll-area.js"
+    },
+    "./separator": {
+      "types": "./dist/separator.d.ts",
+      "import": "./dist/separator.js"
+    },
+    "./progress": {
+      "types": "./dist/progress.d.ts",
+      "import": "./dist/progress.js"
+    },
+    "./meter": {
+      "types": "./dist/meter.d.ts",
+      "import": "./dist/meter.js"
+    },
+    "./toast": {
+      "types": "./dist/toast.d.ts",
+      "import": "./dist/toast.js"
+    },
+    "./inline-message": {
+      "types": "./dist/inline-message.d.ts",
+      "import": "./dist/inline-message.js"
+    },
+    "./spinner": {
+      "types": "./dist/spinner.d.ts",
+      "import": "./dist/spinner.js"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton.d.ts",
+      "import": "./dist/skeleton.js"
+    },
+    "./empty-state": {
+      "types": "./dist/empty-state.d.ts",
+      "import": "./dist/empty-state.js"
+    },
+    "./layout": {
+      "types": "./dist/layout.d.ts",
+      "import": "./dist/layout.js"
+    },
+    "./typography": {
+      "types": "./dist/typography.d.ts",
+      "import": "./dist/typography.js"
+    },
+    "./icon": {
+      "types": "./dist/icon.d.ts",
+      "import": "./dist/icon.js"
+    },
+    "./sizing": {
+      "types": "./dist/sizing.d.ts",
+      "import": "./dist/sizing.js"
+    },
+    "./slot": {
+      "types": "./dist/slot.d.ts",
+      "import": "./dist/slot.js"
+    },
+    "./format": {
+      "types": "./dist/format.d.ts",
+      "import": "./dist/format.js"
+    },
+    "./app-shell": {
+      "types": "./dist/app-shell.d.ts",
+      "import": "./dist/app-shell.js"
+    },
+    "./page-header": {
+      "types": "./dist/page-header.d.ts",
+      "import": "./dist/page-header.js"
+    },
+    "./filter-bar": {
+      "types": "./dist/filter-bar.d.ts",
+      "import": "./dist/filter-bar.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json && node ../../scripts/build-styles.mjs",
     "prepack": "npm run build"
   },
   "dependencies": {
@@ -108,7 +407,7 @@
   "peerDependencies": {
     "@headless-tree/core": "^1.8.0",
     "@headless-tree/react": "^1.8.0",
-    "@surflane/design-tokens": "^0.4.0",
+    "@surflane/design-tokens": "^0.6.0",
     "@tanstack/react-virtual": "^3.14.21",
     "react": "^19.0.0",
     "react-aria-components": "^1.22.1",

package/dist/chevron.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-/** The disclosure and breadcrumb chevron. Internal: not exported from the package. */
-export declare function Chevron(): React.JSX.Element;

package/dist/chevron.js

@@ -1,6 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-/** The disclosure and breadcrumb chevron. Internal: not exported from the package. */
-export function Chevron() {
-    return (_jsx("svg", { className: 'pui-disclosure-chevron', width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) }));
-}

package/dist/commands.js

@@ -1,27 +0,0 @@
-'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 { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
-import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar';
-import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
-import { sizeName, skin, part } 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 }));
-}
-export function ToggleGroup({ className, ref, ...props }) {
-    return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin('pui-toggle-group', className) }));
-}
-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'),
-};
-export const Menubar = /* @__PURE__ */ part(BaseMenubar, 'pui-menubar');
-// 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;