@surflane/ui 0.1.0 → 0.3.0

package/dist/toast.js

@@ -1,74 +1,74 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useComponentSize } from "./sizing.js";
-import { Toast as BaseToast } from "@base-ui/react/toast";
-import { part, skin } from "./parts.js";
-import { StatusIcon } from "./status.js";
-const ToneContext = React.createContext("neutral");
-const Root = 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) }) }));
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { part, skin } from './parts.js';
+import { StatusIcon } from './status.js';
+const ToneContext = React.createContext('neutral');
+const Root = 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 = React.forwardRef(function Icon({ 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: ['pui-toast-icon', className].filter(Boolean).join(' '), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
 });
 const Close = 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", ...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', ...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' }) })) }));
 });
 const Action = React.forwardRef(function Action({ className, ...props }, ref) {
-    return (_jsx(BaseToast.Action, { "data-variant": "outline", "data-size": "sm", ...props, ref: ref, className: skin("pui-button pui-toast-action", className) }));
+    return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'sm', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
 });
-const Viewport = React.forwardRef(function Viewport({ layout = "stack", className, ...props }, ref) {
+const Viewport = React.forwardRef(function Viewport({ layout = 'stack', className, ...props }, ref) {
     const viewportRef = React.useRef(null);
     React.useLayoutEffect(() => {
         const viewport = viewportRef.current;
-        if (!viewport || layout !== "stack")
+        if (!viewport || layout !== 'stack')
             return;
         const resize = new ResizeObserver(update);
         function update() {
-            const cards = Array.from(viewport.querySelectorAll(".pui-toast:not([data-limited])"));
+            const cards = Array.from(viewport.querySelectorAll('.pui-toast:not([data-limited])'));
             const gap = parseFloat(getComputedStyle(viewport).rowGap) || 0;
             const height = cards.reduce((sum, card) => {
-                const natural = parseFloat(getComputedStyle(card).getPropertyValue("--toast-height"));
+                const natural = parseFloat(getComputedStyle(card).getPropertyValue('--toast-height'));
                 return (sum + (Number.isFinite(natural) ? natural : card.offsetHeight));
             }, 0) +
                 Math.max(0, cards.length - 1) * gap;
-            const wasOverflow = viewport.hasAttribute("data-stack-overflow");
+            const wasOverflow = viewport.hasAttribute('data-stack-overflow');
             const pinned = viewport.scrollTop >=
                 viewport.scrollHeight - viewport.clientHeight - 8;
             const overflowing = height + 48 > window.innerHeight;
-            viewport.toggleAttribute("data-stack-overflow", overflowing);
+            viewport.toggleAttribute('data-stack-overflow', overflowing);
             const value = `${height}px`;
-            if (viewport.style.getPropertyValue("--toast-stack-height") !== value)
-                viewport.style.setProperty("--toast-stack-height", value);
+            if (viewport.style.getPropertyValue('--toast-stack-height') !== value)
+                viewport.style.setProperty('--toast-stack-height', value);
             if (overflowing && (!wasOverflow || pinned))
                 viewport.scrollTop = viewport.scrollHeight;
         }
         function refresh() {
             resize.disconnect();
             viewport
-                .querySelectorAll(".pui-toast:not([data-limited])")
+                .querySelectorAll('.pui-toast:not([data-limited])')
                 .forEach((card) => resize.observe(card));
             update();
         }
         const mutation = new MutationObserver((records) => {
             // Natural-height variables are on roots; ignore our own viewport sizing writes.
             if (records.some((record) => record.target !== viewport ||
-                record.attributeName === "data-expanded"))
+                record.attributeName === 'data-expanded'))
                 refresh();
         });
         mutation.observe(viewport, {
             childList: true,
             subtree: true,
             attributes: true,
-            attributeFilter: ["data-limited", "data-expanded", "style"],
+            attributeFilter: ['data-limited', 'data-expanded', 'style'],
         });
         refresh();
-        window.addEventListener("resize", update);
+        window.addEventListener('resize', update);
         return () => {
-            window.removeEventListener("resize", update);
-            viewport.removeAttribute("data-stack-overflow");
+            window.removeEventListener('resize', update);
+            viewport.removeAttribute('data-stack-overflow');
             resize.disconnect();
             mutation.disconnect();
         };
@@ -76,11 +76,11 @@ const Viewport = React.forwardRef(function Viewport({ layout = "stack", classNam
     const scheme = useComponentSize();
     return (_jsx(BaseToast.Viewport, { ...props, ref: (element) => {
             viewportRef.current = element;
-            if (typeof ref === "function")
+            if (typeof ref === 'function')
                 ref(element);
             else if (ref)
                 ref.current = element;
-        }, "data-layout": layout, "data-ui-size": scheme, className: skin("pui-toast-viewport", className) }));
+        }, "data-layout": layout, "data-ui-size": scheme, className: skin('pui-toast-viewport', className) }));
 });
 export const Toast = {
     ...BaseToast,
@@ -89,11 +89,11 @@ export const Toast = {
     Close,
     Action,
     Viewport,
-    Content: part(BaseToast.Content, "pui-toast-content"),
-    Title: part(BaseToast.Title, "pui-toast-title"),
-    Description: part(BaseToast.Description, "pui-toast-description"),
-    Text: part("div", "pui-toast-text"),
-    Positioner: part(BaseToast.Positioner, "pui-positioner"),
+    Content: part(BaseToast.Content, 'pui-toast-content'),
+    Title: part(BaseToast.Title, 'pui-toast-title'),
+    Description: part(BaseToast.Description, 'pui-toast-description'),
+    Text: part('div', 'pui-toast-text'),
+    Positioner: part(BaseToast.Positioner, 'pui-positioner'),
 };
 // 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/tone-transition.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 /** Animate a scalar so the color-mix expression, not a browser's default
  * color interpolation space, determines every intermediate status color. */
 export declare function useToneTransition<Element extends HTMLElement>(tone: string, forwardedRef: React.ForwardedRef<Element>): React.RefObject<Element | null>;

package/dist/tone-transition.js

@@ -1,5 +1,5 @@
-"use client";
-import * as React from "react";
+'use client';
+import * as React from 'react';
 /** Animate a scalar so the color-mix expression, not a browser's default
  * color interpolation space, determines every intermediate status color. */
 export function useToneTransition(tone, forwardedRef) {
@@ -16,7 +16,7 @@ export function useToneTransition(tone, forwardedRef) {
         animation.current?.cancel();
         animation.current = null;
         const element = ref.current;
-        element?.removeAttribute("data-status-transition");
+        element?.removeAttribute('data-status-transition');
         for (let i = 0; i < 3; i++) {
             element?.style.removeProperty(`--pui-status-from-${i}`);
             element?.style.removeProperty(`--pui-status-to-${i}`);
@@ -34,23 +34,23 @@ export function useToneTransition(tone, forwardedRef) {
         paint.current = to;
         if (!changed ||
             !element.animate ||
-            matchMedia("(prefers-reduced-motion: reduce), (forced-colors: active)")
+            matchMedia('(prefers-reduced-motion: reduce), (forced-colors: active)')
                 .matches ||
-            document.documentElement.hasAttribute("data-theme-switching"))
+            document.documentElement.hasAttribute('data-theme-switching'))
             return;
         const durationToken = getComputedStyle(element)
-            .getPropertyValue("--motion-feedback")
+            .getPropertyValue('--motion-feedback')
             .trim();
-        const duration = parseFloat(durationToken) * (durationToken.endsWith("ms") ? 1 : 1000);
+        const duration = parseFloat(durationToken) * (durationToken.endsWith('ms') ? 1 : 1000);
         if (!Number.isFinite(duration) || duration <= 0)
             return;
         from.forEach((value, i) => element.style.setProperty(`--pui-status-from-${i}`, value));
         to.forEach((value, i) => element.style.setProperty(`--pui-status-to-${i}`, value));
-        element.setAttribute("data-status-transition", "");
-        animation.current = element.animate([{ "--pui-status-progress": "0" }, { "--pui-status-progress": "1" }], {
+        element.setAttribute('data-status-transition', '');
+        animation.current = element.animate([{ '--pui-status-progress': '0' }, { '--pui-status-progress': '1' }], {
             duration,
-            easing: getComputedStyle(element).getPropertyValue("--ease-out").trim() ||
-                "ease-out",
+            easing: getComputedStyle(element).getPropertyValue('--ease-out').trim() ||
+                'ease-out',
         });
         animation.current.onfinish = clear;
     }, [tone, clear]);
@@ -63,17 +63,17 @@ export function useToneTransition(tone, forwardedRef) {
         const observer = new MutationObserver(refresh);
         observer.observe(document.documentElement, {
             attributes: true,
-            attributeFilter: ["data-theme", "data-theme-switching"],
+            attributeFilter: ['data-theme', 'data-theme-switching'],
         });
         const media = [
-            matchMedia("(prefers-reduced-motion: reduce)"),
-            matchMedia("(forced-colors: active)"),
-            matchMedia("(prefers-color-scheme: light)"),
+            matchMedia('(prefers-reduced-motion: reduce)'),
+            matchMedia('(forced-colors: active)'),
+            matchMedia('(prefers-color-scheme: light)'),
         ];
-        media.forEach((query) => query.addEventListener("change", refresh));
+        media.forEach((query) => query.addEventListener('change', refresh));
         return () => {
             observer.disconnect();
-            media.forEach((query) => query.removeEventListener("change", refresh));
+            media.forEach((query) => query.removeEventListener('change', refresh));
             clear();
         };
     }, [clear]);

package/dist/tooltip.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare function TooltipProvider({ delayDuration, skipDelayDuration, children, }: {
     delayDuration?: number;
     skipDelayDuration?: number;

package/dist/tooltip.js

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useComponentSize } from "./sizing.js";
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { useComponentSize } from './sizing.js';
+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 }));
 }
@@ -9,5 +9,5 @@ export function Tooltip({ label, enabled = true, 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: 'right', sideOffset: 10, collisionPadding: 8, className: 'pui-positioner pui-tooltip-positioner', children: _jsx(BaseTooltip.Popup, { className: 'pui-tooltip', "data-ui-size": scheme, children: label }) }) })] }));
 }

package/dist/tree.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { type ComponentSize } from "./sizing.js";
+import * as React from 'react';
+import { type ComponentSize } from './sizing.js';
 export type TreeNode = {
     id: string;
     label: string;
@@ -15,13 +15,13 @@ export type TreeProps = {
     selectedIds?: readonly string[];
     defaultSelectedIds?: readonly string[];
     onSelectedIdsChange?: (ids: string[]) => void;
-    selectionMode?: "single" | "multiple";
+    selectionMode?: 'single' | 'multiple';
     height?: number;
     rowHeight?: number;
     size?: ComponentSize;
     virtualized?: boolean;
     emptyLabel?: string;
-    dir?: "ltr" | "rtl";
+    dir?: 'ltr' | 'rtl';
     className?: string;
 };
 /** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */

package/dist/tree.js

@@ -1,23 +1,23 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import * as React from "react";
-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";
-const normalize = (text) => text.normalize("NFKC").toLocaleLowerCase();
+import * as React from 'react';
+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';
+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, }) {
+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, }) {
     const scheme = useComponentSize(size);
     const touchFloor = React.useSyncExternalStore((listener) => {
-        const query = matchMedia("(max-width: 760px), (pointer: coarse)");
-        query.addEventListener("change", listener);
-        return () => query.removeEventListener("change", listener);
-    }, () => matchMedia("(max-width: 760px), (pointer: coarse)").matches, () => false);
+        const query = matchMedia('(max-width: 760px), (pointer: coarse)');
+        query.addEventListener('change', listener);
+        return () => query.removeEventListener('change', listener);
+    }, () => matchMedia('(max-width: 760px), (pointer: coarse)').matches, () => false);
     const rowHeight = explicitRowHeight ??
-        Math.max(touchFloor && scheme ? 44 : 0, scheme === "small" ? 36 : scheme === "large" ? 52 : 44);
+        Math.max(touchFloor && scheme ? 44 : 0, scheme === 'small' ? 36 : scheme === 'large' ? 52 : 44);
     const rootId = React.useId();
     const model = React.useMemo(() => {
         const data = new Map();
@@ -42,7 +42,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
     const expanded = React.useMemo(() => [...new Set(expandedIds ?? localExpanded)].filter((id) => model.data.get(id)?.children?.length), [expandedIds, localExpanded, model]);
     const selected = React.useMemo(() => {
         const ids = [...new Set(selectedIds ?? localSelected)].filter((id) => model.data.has(id) && !model.data.get(id)?.disabled);
-        return selectionMode === "single" ? ids.slice(-1) : ids;
+        return selectionMode === 'single' ? ids.slice(-1) : ids;
     }, [selectedIds, localSelected, model, selectionMode]);
     const visibleIds = React.useMemo(() => {
         const result = [], open = new Set(expanded);
@@ -66,7 +66,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
     const viewport = React.useRef(null), container = React.useRef(null);
     const virtualizerRef = React.useRef(null);
     const pendingFocus = React.useRef(null), focusWithin = React.useRef(false), anchor = React.useRef(null);
-    const typeahead = React.useRef({ text: "", time: 0 });
+    const typeahead = React.useRef({ text: '', time: 0 });
     function changeExpanded(ids) {
         const next = [...new Set(ids)];
         if (expandedIds === undefined)
@@ -75,7 +75,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
     }
     function changeSelected(ids) {
         const allowed = [...new Set(ids)].filter((id) => model.data.has(id) && !model.data.get(id)?.disabled);
-        const next = selectionMode === "single" ? allowed.slice(-1) : allowed;
+        const next = selectionMode === 'single' ? allowed.slice(-1) : allowed;
         if (selectedIds === undefined)
             setLocalSelected(next);
         onSelectedIdsChange?.(next);
@@ -91,14 +91,14 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
             getChildren: (id) => model.data.get(id)?.children?.map((node) => node.id) ?? [],
         },
         state: { expandedItems: expanded, focusedItem: focused },
-        setExpandedItems: (update) => changeExpanded(typeof update === "function" ? update(expanded) : update),
-        setFocusedItem: (update) => setLocalFocus(typeof update === "function" ? update(focused) : update),
+        setExpandedItems: (update) => changeExpanded(typeof update === 'function' ? update(expanded) : update),
+        setFocusedItem: (update) => setLocalFocus(typeof update === 'function' ? update(focused) : update),
         scrollToItem: (item) => virtualizerRef.current?.scrollToIndex(item.getItemMeta().index, {
-            align: "auto",
+            align: 'auto',
         }),
     });
     const items = tree.getItems();
-    const focusedIndex = visibleIds.indexOf(focused ?? "");
+    const focusedIndex = visibleIds.indexOf(focused ?? '');
     const virtualizer = useVirtualizer({
         count: items.length,
         getScrollElement: () => viewport.current,
@@ -121,7 +121,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
         pendingFocus.current = item.getId();
         item.setFocused();
         if (virtualized)
-            virtualizer.scrollToIndex(item.getItemMeta().index, { align: "auto" });
+            virtualizer.scrollToIndex(item.getItemMeta().index, { align: 'auto' });
         else if (viewport.current) {
             const top = item.getItemMeta().index * rowHeight;
             if (top < viewport.current.scrollTop)
@@ -157,7 +157,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
         const id = item.getId();
         if (item.getItemData().disabled)
             return;
-        if (selectionMode === "single")
+        if (selectionMode === 'single')
             changeSelected([id]);
         else if (range && anchor.current && visibleIds.includes(anchor.current)) {
             const a = visibleIds.indexOf(anchor.current), b = visibleIds.indexOf(id);
@@ -173,9 +173,9 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
     function keydown(event) {
         if (event.defaultPrevented ||
             event.nativeEvent.isComposing ||
-            event.target.closest("button"))
+            event.target.closest('button'))
             return;
-        const targetId = event.target.closest("[data-tree-id]")?.dataset.treeId;
+        const targetId = event.target.closest('[data-tree-id]')?.dataset.treeId;
         const item = targetId
             ? tree.getItemInstance(targetId)
             : focused
@@ -184,20 +184,20 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
         if (!item)
             return;
         if ([
-            "ArrowDown",
-            "ArrowUp",
-            "ArrowLeft",
-            "ArrowRight",
-            "Home",
-            "End",
+            'ArrowDown',
+            'ArrowUp',
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End',
         ].includes(event.key))
-            typeahead.current = { text: "", time: 0 };
+            typeahead.current = { text: '', time: 0 };
         const index = item.getItemMeta().index;
-        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
-        const forward = rtl ? "ArrowLeft" : "ArrowRight", backward = rtl ? "ArrowRight" : "ArrowLeft";
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const forward = rtl ? 'ArrowLeft' : 'ArrowRight', backward = rtl ? 'ArrowRight' : 'ArrowLeft';
         if ((event.ctrlKey || event.metaKey) &&
-            event.key.toLowerCase() === "a" &&
-            selectionMode === "multiple") {
+            event.key.toLowerCase() === 'a' &&
+            selectionMode === 'multiple') {
             event.preventDefault();
             changeSelected(visibleIds);
             return;
@@ -205,26 +205,26 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
         if (event.ctrlKey || event.metaKey || event.altKey)
             return;
         if ([
-            "ArrowDown",
-            "ArrowUp",
-            "Home",
-            "End",
+            'ArrowDown',
+            'ArrowUp',
+            'Home',
+            'End',
             forward,
             backward,
-            "Enter",
-            " ",
-            "*",
+            'Enter',
+            ' ',
+            '*',
         ].includes(event.key))
             event.preventDefault();
-        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            const next = items[index + (event.key === "ArrowDown" ? 1 : -1)];
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const next = items[index + (event.key === 'ArrowDown' ? 1 : -1)];
             focusItem(next);
-            if (event.shiftKey && selectionMode === "multiple" && next)
+            if (event.shiftKey && selectionMode === 'multiple' && next)
                 select(next, true);
         }
-        else if (event.key === "Home")
+        else if (event.key === 'Home')
             focusItem(items[0]);
-        else if (event.key === "End")
+        else if (event.key === 'End')
             focusItem(items.at(-1));
         else if (event.key === forward &&
             !item.getItemData().disabled &&
@@ -240,9 +240,9 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
             else if (item.getItemMeta().level > 0)
                 focusItem(item.getParent());
         }
-        else if (event.key === "Enter" || event.key === " ")
+        else if (event.key === 'Enter' || event.key === ' ')
             select(item, event.shiftKey);
-        else if (event.key === "*")
+        else if (event.key === '*')
             changeExpanded([
                 ...expanded,
                 ...items
@@ -252,7 +252,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
                     .map((sibling) => sibling.getId()),
             ]);
         else if (event.key.length === 1) {
-            const now = performance.now(), char = normalize(event.key), previous = now - typeahead.current.time < 700 ? typeahead.current.text : "";
+            const now = performance.now(), char = normalize(event.key), previous = now - typeahead.current.time < 700 ? typeahead.current.text : '';
             const prefix = previous === char ? char : previous + char;
             typeahead.current = { text: prefix, time: now };
             for (let offset = 1; offset <= items.length; offset++) {
@@ -271,16 +271,16 @@ 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: ['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) => {
                 container.current = element;
                 containerProps.ref(element);
-            }, dir: dir, className: "pui-tree", "data-ui-size": scheme, "aria-multiselectable": selectionMode === "multiple" || undefined, onKeyDown: keydown, onFocusCapture: () => {
+            }, dir: dir, className: 'pui-tree', "data-ui-size": scheme, "aria-multiselectable": selectionMode === 'multiple' || undefined, onKeyDown: keydown, onFocusCapture: () => {
                 focusWithin.current = true;
             }, onBlurCapture: (event) => {
                 if (event.relatedTarget &&
                     !event.currentTarget.contains(event.relatedTarget)) {
                     focusWithin.current = false;
-                    typeahead.current.text = "";
+                    typeahead.current.text = '';
                 }
             }, style: {
                 blockSize: virtualized
@@ -288,24 +288,24 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
                     : items.length * rowHeight,
             }, children: rows.map(({ index, start }) => {
                 const item = items[index], node = item.getItemData(), props = item.getProps();
-                return (_createElement("div", { ...props, key: item.getId(), className: "pui-tree-item", "data-tree-id": node.id, "aria-disabled": node.disabled || undefined, "aria-selected": node.disabled ? undefined : selected.includes(node.id), title: node.label, onFocus: () => item.setFocused(), onClick: (event) => {
+                return (_createElement("div", { ...props, key: item.getId(), className: 'pui-tree-item', "data-tree-id": node.id, "aria-disabled": node.disabled || undefined, "aria-selected": node.disabled ? undefined : selected.includes(node.id), title: node.label, onFocus: () => item.setFocused(), onClick: (event) => {
                         focusItem(item);
                         select(item, event.shiftKey);
                     }, style: {
-                        position: "absolute",
+                        position: 'absolute',
                         insetInline: 0,
                         top: start,
                         blockSize: rowHeight,
                         paddingInlineStart: `calc(var(--space-2) + ${Math.min(item.getItemMeta().level, 8)} * var(--space-4))`,
                     } },
-                    item.isFolder() ? (_jsx("button", { type: "button", className: "pui-tree-toggle", tabIndex: -1, disabled: node.disabled, "aria-label": `${item.isExpanded() ? "Collapse" : "Expand"} ${node.label}`, onClick: (event) => {
+                    item.isFolder() ? (_jsx("button", { type: 'button', className: 'pui-tree-toggle', tabIndex: -1, disabled: node.disabled, "aria-label": `${item.isExpanded() ? 'Collapse' : 'Expand'} ${node.label}`, onClick: (event) => {
                             event.stopPropagation();
                             focusItem(item);
                             if (item.isExpanded())
                                 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" })),
-                    _jsx("span", { className: "pui-tree-label", children: node.label })));
-            }) })) : (_jsx("div", { role: "status", className: "pui-tree-empty", children: emptyLabel })) }));
+                        }, 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' })),
+                    _jsx("span", { className: 'pui-tree-label', children: node.label })));
+            }) })) : (_jsx("div", { role: 'status', className: 'pui-tree-empty', children: emptyLabel })) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -101,7 +101,7 @@
     "shiki": "4.5.0"
   },
   "peerDependencies": {
-    "@surflane/design-tokens": "^0.1.0",
+    "@surflane/design-tokens": "^0.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },