@surflane/ui 0.1.0 → 0.2.0

package/dist/status.js

@@ -1,17 +1,17 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { useComponentSize } from "./sizing.js";
-import { useToneTransition } from "./tone-transition.js";
-export const Badge = React.forwardRef(function Badge({ tone = "neutral", icon, children, className, size, ...props }, ref) {
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { useToneTransition } from './tone-transition.js';
+export const Badge = React.forwardRef(function Badge({ tone = 'neutral', icon, children, className, size, ...props }, ref) {
     const scheme = useComponentSize(size);
     const elementRef = useToneTransition(tone, ref);
-    return (_jsxs("span", { ...props, ref: elementRef, className: ["pui-badge", className].filter(Boolean).join(" "), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: "pui-badge-icon", "aria-hidden": "true", children: icon })), children] }));
+    return (_jsxs("span", { ...props, ref: elementRef, className: ['pui-badge', className].filter(Boolean).join(' '), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: 'pui-badge-icon', "aria-hidden": 'true', children: icon })), children] }));
 });
 export function StatusIcon({ tone }) {
-    return (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: tone === "success" ? (_jsx("path", { d: "m5 12 4 4L19 6" })) : tone === "caution" ? (_jsxs(_Fragment, { children: [_jsx("path", { d: "m12 3 10 18H2L12 3Z" }), _jsx("path", { d: "M12 9v4m0 3v1" })] })) : tone === "danger" ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 7v6m0 3v1" })] })) : tone === "progress" ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 7v6l4 2" })] })) : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M8 12h8" })] })) }));
+    return (_jsx("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: tone === 'success' ? (_jsx("path", { d: 'm5 12 4 4L19 6' })) : tone === 'caution' ? (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 10 18H2L12 3Z' }), _jsx("path", { d: 'M12 9v4m0 3v1' })] })) : tone === 'danger' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6m0 3v1' })] })) : tone === 'progress' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6l4 2' })] })) : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M8 12h8' })] })) }));
 }
 /** Domain status labels and live announcements remain the caller's responsibility. */
-export const StatusBadge = React.forwardRef(function StatusBadge({ tone = "neutral", icon, ...props }, ref) {
+export const StatusBadge = React.forwardRef(function StatusBadge({ tone = 'neutral', icon, ...props }, ref) {
     return (_jsx(Badge, { ...props, ref: ref, tone: tone, icon: icon === undefined ? _jsx(StatusIcon, { tone: tone }) : icon }));
 });

package/dist/syntax-engine.js

@@ -1,29 +1,29 @@
-import { createHighlighterCore } from "shiki/core";
-import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 const loaders = {
-    tsx: () => import("shiki/langs/tsx.mjs"),
-    jsx: () => import("shiki/langs/jsx.mjs"),
-    typescript: () => import("shiki/langs/typescript.mjs"),
-    javascript: () => import("shiki/langs/javascript.mjs"),
-    css: () => import("shiki/langs/css.mjs"),
-    html: () => import("shiki/langs/html.mjs"),
-    json: () => import("shiki/langs/json.mjs"),
-    bash: () => import("shiki/langs/bash.mjs"),
-    yaml: () => import("shiki/langs/yaml.mjs"),
-    python: () => import("shiki/langs/python.mjs"),
-    sql: () => import("shiki/langs/sql.mjs"),
-    markdown: () => import("shiki/langs/markdown.mjs"),
+    tsx: () => import('shiki/langs/tsx.mjs'),
+    jsx: () => import('shiki/langs/jsx.mjs'),
+    typescript: () => import('shiki/langs/typescript.mjs'),
+    javascript: () => import('shiki/langs/javascript.mjs'),
+    css: () => import('shiki/langs/css.mjs'),
+    html: () => import('shiki/langs/html.mjs'),
+    json: () => import('shiki/langs/json.mjs'),
+    bash: () => import('shiki/langs/bash.mjs'),
+    yaml: () => import('shiki/langs/yaml.mjs'),
+    python: () => import('shiki/langs/python.mjs'),
+    sql: () => import('shiki/langs/sql.mjs'),
+    markdown: () => import('shiki/langs/markdown.mjs'),
 };
 const roles = [
-    "plain",
-    "comment",
-    "keyword",
-    "string",
-    "number",
-    "function",
-    "tag",
-    "attribute",
-    "punctuation",
+    'plain',
+    'comment',
+    'keyword',
+    'string',
+    'number',
+    'function',
+    'tag',
+    'attribute',
+    'punctuation',
 ];
 const colors = Object.fromEntries(roles.map((role, i) => [`#00000${i + 1}`, role]));
 const color = (index) => `#00000${index + 1}`;
@@ -35,53 +35,53 @@ function highlighter() {
         langs: [],
         themes: [
             {
-                name: "platform-quiet",
-                type: "dark",
+                name: 'platform-quiet',
+                type: 'dark',
                 colors: {
-                    "editor.foreground": color(0),
-                    "editor.background": "#000000",
+                    'editor.foreground': color(0),
+                    'editor.background': '#000000',
                 },
                 tokenColors: [
                     {
-                        scope: ["comment", "punctuation.definition.comment"],
+                        scope: ['comment', 'punctuation.definition.comment'],
                         settings: { foreground: color(1) },
                     },
                     {
-                        scope: ["keyword", "storage", "constant.language"],
+                        scope: ['keyword', 'storage', 'constant.language'],
                         settings: { foreground: color(2) },
                     },
                     {
-                        scope: ["string", "markup.inline.raw", "markup.fenced_code.block"],
+                        scope: ['string', 'markup.inline.raw', 'markup.fenced_code.block'],
                         settings: { foreground: color(3) },
                     },
                     {
-                        scope: ["constant.numeric", "constant.character"],
+                        scope: ['constant.numeric', 'constant.character'],
                         settings: { foreground: color(4) },
                     },
                     {
                         scope: [
-                            "entity.name.function",
-                            "support.function",
-                            "entity.name.type",
-                            "support.type",
-                            "entity.name.class",
+                            'entity.name.function',
+                            'support.function',
+                            'entity.name.type',
+                            'support.type',
+                            'entity.name.class',
                         ],
                         settings: { foreground: color(5) },
                     },
                     {
-                        scope: ["entity.name.tag", "markup.heading"],
+                        scope: ['entity.name.tag', 'markup.heading'],
                         settings: { foreground: color(6) },
                     },
                     {
                         scope: [
-                            "entity.other.attribute-name",
-                            "support.type.property-name",
-                            "variable.other.property",
+                            'entity.other.attribute-name',
+                            'support.type.property-name',
+                            'variable.other.property',
                         ],
                         settings: { foreground: color(7) },
                     },
                     {
-                        scope: ["punctuation", "meta.brace"],
+                        scope: ['punctuation', 'meta.brace'],
                         settings: { foreground: color(8) },
                     },
                 ],
@@ -115,10 +115,10 @@ export async function highlightCode(code, language) {
         }));
     await languages.get(language);
     const tokens = instance
-        .codeToTokensBase(code, { lang: language, theme: "platform-quiet" })
+        .codeToTokensBase(code, { lang: language, theme: 'platform-quiet' })
         .map((line) => line.map((token) => ({
         content: token.content,
-        role: colors[token.color?.toLowerCase() ?? ""] ?? "plain",
+        role: colors[token.color?.toLowerCase() ?? ''] ?? 'plain',
     })));
     if (code.length <= 8000) {
         cache.set(key, tokens);

package/dist/syntax-highlighter.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const syntaxLanguages: readonly ["tsx", "jsx", "typescript", "javascript", "css", "html", "json", "bash", "yaml", "python", "sql", "markdown", "text"];
-export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<"code">, "children"> & {
+export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<'code'>, 'children'> & {
     code: string;
     language?: string;
     inline?: boolean;

package/dist/syntax-highlighter.js

@@ -1,46 +1,46 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ScrollArea } from "./scroll-area.js";
+import * as React from 'react';
+import { ScrollArea } from './scroll-area.js';
 export const syntaxLanguages = [
-    "tsx",
-    "jsx",
-    "typescript",
-    "javascript",
-    "css",
-    "html",
-    "json",
-    "bash",
-    "yaml",
-    "python",
-    "sql",
-    "markdown",
-    "text",
+    'tsx',
+    'jsx',
+    'typescript',
+    'javascript',
+    'css',
+    'html',
+    'json',
+    'bash',
+    'yaml',
+    'python',
+    'sql',
+    'markdown',
+    'text',
 ];
 const aliases = {
-    ts: "typescript",
-    js: "javascript",
-    sh: "bash",
-    shell: "bash",
-    yml: "yaml",
-    py: "python",
-    md: "markdown",
-    xml: "html",
-    plaintext: "text",
-    txt: "text",
+    ts: 'typescript',
+    js: 'javascript',
+    sh: 'bash',
+    shell: 'bash',
+    yml: 'yaml',
+    py: 'python',
+    md: 'markdown',
+    xml: 'html',
+    plaintext: 'text',
+    txt: 'text',
 };
 /** Rendering remains selectable React text; it never inserts executable HTML. */
-export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ code, language = "text", inline = false, label = "Highlighted source", wrap = false, className, ...props }, ref) {
+export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ...props }, ref) {
     const name = language.trim().toLowerCase();
     const lang = aliases[name] ?? name;
     const [result, setResult] = React.useState();
     React.useEffect(() => {
         let current = true;
-        if (lang === "text" ||
+        if (lang === 'text' ||
             !syntaxLanguages.includes(lang) ||
             code.length > 50000)
             return;
-        import("./syntax-engine.js")
+        import('./syntax-engine.js')
             .then((engine) => engine.highlightCode(code, lang))
             .then((tokens) => {
             if (current)
@@ -57,8 +57,8 @@ export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ c
     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
-            ? 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)))
+    const element = (_jsx("code", { ...props, ref: ref, className: ['pui-syntax', className].filter(Boolean).join(' '), "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", children: _jsx("pre", { className: "pui-syntax-pre", "data-wrap": wrap || undefined, children: element }) }));
+    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/toast.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { Toast as BaseToast } from "@base-ui/react/toast";
-import { type StatusTone } from "./status.js";
+import * as React from 'react';
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { type StatusTone } from './status.js';
 export type ToastRootProps = React.ComponentPropsWithoutRef<typeof BaseToast.Root> & {
     tone?: StatusTone;
 };
 export type ToastViewportProps = React.ComponentPropsWithoutRef<typeof BaseToast.Viewport> & {
-    layout?: "stack" | "list" | "anchored";
+    layout?: 'stack' | 'list' | 'anchored';
 };
 export declare const Toast: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {

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. */