@surflane/ui 0.3.0 → 0.5.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,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) });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -29,6 +29,7 @@
   "files": [
     "dist",
     "src/styles.css",
+    "src/all.css",
     "LICENSE-MIT",
     "LICENSE-APACHE"
   ],
@@ -38,13 +39,14 @@
       "import": "./dist/index.js"
     },
     "./styles.css": "./src/styles.css",
+    "./all.css": "./src/all.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",
@@ -54,45 +56,313 @@
       "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"
     },
-    "./markdown": {
-      "types": "./dist/markdown.d.ts",
-      "import": "./dist/markdown.js"
+    "./drawer": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.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"
+    },
+    "./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",
       "import": "./dist/syntax-highlighter.js"
     },
+    "./syntax-highlighting": {
+      "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"
+    },
+    "./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"
+    },
+    "./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",
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@base-ui/react": "1.9.0",
+    "@base-ui/react": "1.9.0"
+  },
+  "peerDependencies": {
+    "@headless-tree/core": "^1.8.0",
+    "@headless-tree/react": "^1.8.0",
+    "@surflane/design-tokens": "^0.5.0",
+    "@tanstack/react-virtual": "^3.14.21",
+    "react": "^19.0.0",
+    "react-aria-components": "^1.22.1",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.10.1",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@headless-tree/core": {
+      "optional": true
+    },
+    "@headless-tree/react": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "react-aria-components": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
     "@headless-tree/core": "1.8.0",
     "@headless-tree/react": "1.8.0",
-    "@internationalized/date": "3.12.4",
     "@tanstack/react-virtual": "3.14.21",
     "react-aria-components": "1.22.1",
     "react-markdown": "10.1.0",
@@ -100,11 +370,6 @@
     "remark-gfm": "4.0.1",
     "shiki": "4.5.0"
   },
-  "peerDependencies": {
-    "@surflane/design-tokens": "^0.3.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
   "publishConfig": {
     "access": "public"
   }

package/src/all.css

@@ -0,0 +1,8 @@
+/* Every Surflane stylesheet in one import, in the recommended order: tokens, controls,
+ * composition, document typography and components. Each file keeps its cascade layer. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/controls.css';
+@import '@surflane/design-tokens/foundations.css';
+@import '@surflane/design-tokens/typography.css';
+@import './styles.css';