@surflane/ui 0.1.0 → 0.2.0

package/README.md

@@ -15,11 +15,11 @@ npm install @surflane/ui @surflane/design-tokens
 Import the stylesheets once at the application root:
 
 ```css
-@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 "@surflane/ui/styles.css";
+@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 '@surflane/ui/styles.css';
 ```
 
 Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`.
@@ -31,17 +31,17 @@ import {
   DialogRoot,
   DialogTitle,
   DialogTrigger,
-} from "@surflane/ui";
+} from '@surflane/ui'
 
 export function Example() {
   return (
     <DialogRoot>
-      <DialogTrigger render={<Button variant="primary" />}>Open</DialogTrigger>
+      <DialogTrigger render={<Button variant='primary' />}>Open</DialogTrigger>
       <DialogContent>
         <DialogTitle>Surflane</DialogTitle>
       </DialogContent>
     </DialogRoot>
-  );
+  )
 }
 ```
 

package/dist/advanced-forms.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import * as React from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false, Item = Value>({ children, form, ...props }: BaseCombobox.Root.Props<Value, Multiple, Item>): React.JSX.Element;
 export declare const Combobox: {
     Root: typeof ComboboxRoot;

package/dist/advanced-forms.js

@@ -1,21 +1,21 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
-import { skin, part } from "./parts.js";
-import { useRootRef, useResetValue } from "./form-state.js";
+import * as React from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import { skin, part } from './parts.js';
+import { useRootRef, useResetValue } from './form-state.js';
 function Mark({ kind, }) {
-    const path = kind === "check"
-        ? "m5 12 4 4L19 6"
-        : kind === "clear"
-            ? "m6 6 12 12M6 18 18 6"
-            : kind === "expand"
-                ? "m6 9 6 6 6-6"
-                : kind === "plus"
-                    ? "M5 12h14M12 5v14"
-                    : "M5 12h14";
-    return (_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: path }) }));
+    const path = kind === 'check'
+        ? 'm5 12 4 4L19 6'
+        : kind === 'clear'
+            ? 'm6 6 12 12M6 18 18 6'
+            : kind === 'expand'
+                ? 'm6 9 6 6 6-6'
+                : kind === 'plus'
+                    ? 'M5 12h14M12 5v14'
+                    : 'M5 12h14';
+    return (_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: path }) }));
 }
 function ComboboxRoot({ children, form, ...props }) {
     const anchor = React.useRef(null);
@@ -24,22 +24,22 @@ function ComboboxRoot({ children, form, ...props }) {
     const [, , revision] = useResetValue(true, true, anchor, form);
     return (_jsxs(BaseCombobox.Root, { ...props, form: form, children: [_jsx("span", { hidden: true, ref: anchor }), children] }, revision));
 }
-const ComboPopup = part(BaseCombobox.Popup, "pui-combobox-popup");
-const ComboPositioner = part(BaseCombobox.Positioner, "pui-positioner");
+const ComboPopup = part(BaseCombobox.Popup, 'pui-combobox-popup');
+const ComboPositioner = part(BaseCombobox.Positioner, 'pui-positioner');
 const ComboContent = React.forwardRef(function ComboContent({ positionerProps, ...props }, ref) {
     return (_jsx(BaseCombobox.Portal, { children: _jsx(ComboPositioner, { sideOffset: 6, ...positionerProps, children: _jsx(ComboPopup, { ...props, ref: ref }) }) }));
 });
 const ComboTrigger = React.forwardRef(function ComboTrigger({ children, className, ...props }, ref) {
-    return (_jsx(BaseCombobox.Trigger, { "aria-label": "Show options", ...props, ref: ref, className: skin("pui-combobox-action", className), children: children ?? _jsx(Mark, { kind: "expand" }) }));
+    return (_jsx(BaseCombobox.Trigger, { "aria-label": 'Show options', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? _jsx(Mark, { kind: 'expand' }) }));
 });
 const ComboClear = React.forwardRef(function ComboClear({ children, className, ...props }, ref) {
-    return (_jsx(BaseCombobox.Clear, { "aria-label": "Clear selection", ...props, ref: ref, className: skin("pui-combobox-action", className), children: children ?? _jsx(Mark, { kind: "clear" }) }));
+    return (_jsx(BaseCombobox.Clear, { "aria-label": 'Clear selection', ...props, ref: ref, className: skin('pui-combobox-action', className), children: children ?? _jsx(Mark, { kind: 'clear' }) }));
 });
 const ComboIndicator = React.forwardRef(function ComboIndicator({ children, className, ...props }, ref) {
-    return (_jsx(BaseCombobox.ItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin("pui-combobox-indicator", className), children: children ?? _jsx(Mark, { kind: "check" }) }));
+    return (_jsx(BaseCombobox.ItemIndicator, { keepMounted: true, ...props, ref: ref, className: skin('pui-combobox-indicator', className), children: children ?? _jsx(Mark, { kind: 'check' }) }));
 });
 const ComboRemove = React.forwardRef(function ComboRemove({ children, className, ...props }, ref) {
-    return (_jsx(BaseCombobox.ChipRemove, { ...props, ref: ref, className: skin("pui-combobox-chip-remove", className), children: children ?? _jsx(Mark, { kind: "clear" }) }));
+    return (_jsx(BaseCombobox.ChipRemove, { ...props, ref: ref, className: skin('pui-combobox-chip-remove', className), children: children ?? _jsx(Mark, { kind: 'clear' }) }));
 });
 export const Combobox = {
     ...BaseCombobox,
@@ -51,41 +51,41 @@ export const Combobox = {
     Clear: ComboClear,
     ItemIndicator: ComboIndicator,
     ChipRemove: ComboRemove,
-    Input: part(BaseCombobox.Input, "pui-input pui-combobox-input"),
-    InputGroup: part(BaseCombobox.InputGroup, "pui-combobox-group"),
-    List: part(BaseCombobox.List, "pui-combobox-list scroll-area"),
-    Item: part(BaseCombobox.Item, "pui-combobox-item"),
-    Empty: part(BaseCombobox.Empty, "pui-combobox-empty"),
-    Status: part(BaseCombobox.Status, "pui-combobox-status"),
-    Group: part(BaseCombobox.Group, "pui-combobox-section"),
-    GroupLabel: part(BaseCombobox.GroupLabel, "pui-combobox-section-label"),
-    Separator: part(BaseCombobox.Separator, "pui-combobox-separator"),
-    Chips: part(BaseCombobox.Chips, "pui-combobox-chips"),
-    Chip: part(BaseCombobox.Chip, "pui-combobox-chip"),
+    Input: part(BaseCombobox.Input, 'pui-input pui-combobox-input'),
+    InputGroup: part(BaseCombobox.InputGroup, 'pui-combobox-group'),
+    List: part(BaseCombobox.List, 'pui-combobox-list scroll-area'),
+    Item: part(BaseCombobox.Item, 'pui-combobox-item'),
+    Empty: part(BaseCombobox.Empty, 'pui-combobox-empty'),
+    Status: part(BaseCombobox.Status, 'pui-combobox-status'),
+    Group: part(BaseCombobox.Group, 'pui-combobox-section'),
+    GroupLabel: part(BaseCombobox.GroupLabel, 'pui-combobox-section-label'),
+    Separator: part(BaseCombobox.Separator, 'pui-combobox-separator'),
+    Chips: part(BaseCombobox.Chips, 'pui-combobox-chips'),
+    Chip: part(BaseCombobox.Chip, 'pui-combobox-chip'),
 };
 const NumberRoot = React.forwardRef(function NumberRoot({ value, defaultValue, onValueChange, className, form, ...props }, ref) {
     const [element, attach] = useRootRef(ref);
     const [numeric, setNumeric] = useResetValue(value, defaultValue ?? null, element, form);
-    return (_jsx(BaseNumberField.Root, { ...props, form: form, ref: attach, value: numeric, className: skin("pui-number-field", className), onValueChange: (next, event) => {
+    return (_jsx(BaseNumberField.Root, { ...props, form: form, ref: attach, value: numeric, className: skin('pui-number-field', className), onValueChange: (next, event) => {
             onValueChange?.(next, event);
             if (value === undefined && !event.isCanceled)
                 setNumeric(next);
         } }));
 });
 const NumberIncrement = React.forwardRef(function NumberIncrement({ className, children, ...props }, ref) {
-    return (_jsx(BaseNumberField.Increment, { "aria-label": "Increase value", ...props, ref: ref, className: skin("pui-number-step", className), children: children ?? _jsx(Mark, { kind: "plus" }) }));
+    return (_jsx(BaseNumberField.Increment, { "aria-label": 'Increase value', ...props, ref: ref, className: skin('pui-number-step', className), children: children ?? _jsx(Mark, { kind: 'plus' }) }));
 });
 const NumberDecrement = React.forwardRef(function NumberDecrement({ className, children, ...props }, ref) {
-    return (_jsx(BaseNumberField.Decrement, { "aria-label": "Decrease value", ...props, ref: ref, className: skin("pui-number-step", className), children: children ?? _jsx(Mark, { kind: "minus" }) }));
+    return (_jsx(BaseNumberField.Decrement, { "aria-label": 'Decrease value', ...props, ref: ref, className: skin('pui-number-step', className), children: children ?? _jsx(Mark, { kind: 'minus' }) }));
 });
 export const NumberField = {
     ...BaseNumberField,
     Root: NumberRoot,
     Increment: NumberIncrement,
     Decrement: NumberDecrement,
-    Group: part(BaseNumberField.Group, "pui-number-group"),
-    Input: part(BaseNumberField.Input, "pui-number-input"),
-    ScrubArea: part(BaseNumberField.ScrubArea, "pui-number-scrub"),
+    Group: part(BaseNumberField.Group, 'pui-number-group'),
+    Input: part(BaseNumberField.Input, 'pui-number-input'),
+    ScrubArea: part(BaseNumberField.ScrubArea, 'pui-number-scrub'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { ComboboxRoot };

package/dist/app-shell.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const AppShell: {
     Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         collapsed?: boolean;

package/dist/app-shell.js

@@ -1,28 +1,28 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-const skin = (base, extra) => [base, extra].filter(Boolean).join(" ");
+import * as React from 'react';
+const skin = (base, extra) => [base, extra].filter(Boolean).join(' ');
 /** Layout only. Routing, session, theme and mobile disclosure belong to the caller. */
-const Root = React.forwardRef(function AppShellRoot({ collapsed = false, layout = "header", className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, "data-layout": layout, "data-sidebar": collapsed ? "collapsed" : "expanded", className: skin("pui-app-shell", className) }));
+const Root = React.forwardRef(function AppShellRoot({ collapsed = false, layout = 'header', className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-layout": layout, "data-sidebar": collapsed ? 'collapsed' : 'expanded', className: skin('pui-app-shell', className) }));
 });
 const Header = React.forwardRef(function AppShellHeader({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin("pui-app-shell-header", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-header', className) }));
 });
 const Sidebar = React.forwardRef(function AppShellSidebar({ className, ...props }, ref) {
-    return (_jsx("aside", { ...props, ref: ref, className: skin("pui-app-shell-sidebar", className) }));
+    return (_jsx("aside", { ...props, ref: ref, className: skin('pui-app-shell-sidebar', className) }));
 });
 const Content = React.forwardRef(function AppShellContent({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin("pui-app-shell-content", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-content', className) }));
 });
 const Footer = React.forwardRef(function AppShellFooter({ className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, className: skin("pui-app-shell-footer", className) }));
+    return (_jsx("div", { ...props, ref: ref, className: skin('pui-app-shell-footer', className) }));
 });
 const Label = React.forwardRef(function AppShellLabel({ className, ...props }, ref) {
-    return (_jsx("span", { ...props, ref: ref, className: skin("pui-app-shell-label", className) }));
+    return (_jsx("span", { ...props, ref: ref, className: skin('pui-app-shell-label', className) }));
 });
 const Link = React.forwardRef(function AppShellLink({ icon, label, className, ...props }, ref) {
-    return (_jsxs("a", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: skin("pui-app-shell-link", className), children: [_jsx("span", { className: "pui-app-shell-icon", "aria-hidden": "true", children: icon }), _jsx(Label, { "aria-hidden": "true", children: label })] }));
+    return (_jsxs("a", { ...props, ref: ref, "aria-label": props['aria-label'] ?? label, className: skin('pui-app-shell-link', className), children: [_jsx("span", { className: 'pui-app-shell-icon', "aria-hidden": 'true', children: icon }), _jsx(Label, { "aria-hidden": 'true', children: label })] }));
 });
 export const AppShell = { Root, Header, Sidebar, Content, Footer, Label, Link };
 // Flat names for React Server Components, which cannot dot into client exports.

package/dist/button.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { Button as BaseButton } from "@base-ui/react/button";
-import { type ComponentSizeAlias } from "./sizing.js";
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { type ComponentSizeAlias } from './sizing.js';
 /** Visual priority. `default` remains a compatibility alias of `primary`. */
-export type ButtonVariant = "primary" | "default" | "secondary" | "outline" | "ghost" | "destructive" | "link";
-export type ButtonSize = ComponentSizeAlias | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+export type ButtonVariant = 'primary' | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+export type ButtonSize = ComponentSizeAlias | 'xs' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg';
 export type ButtonProps = React.ComponentProps<typeof BaseButton> & {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/button.js

@@ -1,16 +1,16 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Button as BaseButton } from "@base-ui/react/button";
-import { useComponentSize } from "./sizing.js";
-import { skin } from "./parts.js";
-export const Button = React.forwardRef(function Button({ className, variant = "default", size, ...props }, ref) {
-    const scheme = useComponentSize(size === "icon-sm" || size === "icon-xs"
-        ? "small"
-        : size === "icon-lg"
-            ? "large"
-            : size === "xs" || size === "icon"
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { useComponentSize } from './sizing.js';
+import { skin } from './parts.js';
+export const Button = React.forwardRef(function Button({ className, variant = 'default', size, ...props }, ref) {
+    const scheme = useComponentSize(size === 'icon-sm' || size === 'icon-xs'
+        ? 'small'
+        : size === 'icon-lg'
+            ? 'large'
+            : size === 'xs' || size === 'icon'
                 ? undefined
                 : size);
-    return (_jsx(BaseButton, { ref: ref, ...props, className: skin("pui-button", className), "data-variant": variant, "data-size": size, "data-ui-size": scheme }));
+    return (_jsx(BaseButton, { ref: ref, ...props, className: skin('pui-button', className), "data-variant": variant, "data-size": size, "data-ui-size": scheme }));
 });

package/dist/chart.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export type ChartDatum = {
     id: string;
     label: string;
@@ -8,7 +8,7 @@ export type ChartSeries = {
     key: string;
     label: string;
 };
-export type ChartProps = Omit<React.ComponentPropsWithoutRef<"figure">, "children" | "title"> & {
+export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'children' | 'title'> & {
     title: string;
     description: string;
     data: readonly ChartDatum[];
@@ -16,7 +16,7 @@ export type ChartProps = Omit<React.ComponentPropsWithoutRef<"figure">, "childre
     unit: string;
     xLabel: string;
     yLabel: string;
-    type?: "line" | "bar" | "area";
+    type?: 'line' | 'bar' | 'area';
     height?: number;
     locale?: string;
     formatValue?: (value: number) => string;

package/dist/chart.js

@@ -1,27 +1,27 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { Area, Bar, CartesianGrid, ComposedChart, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
-import { Table } from "./data.js";
-import { Button } from "./button.js";
-const dashes = [undefined, "7 4", "2 4", "10 3 2 3", "12 5", "4 3"];
+import * as React from 'react';
+import { Area, Bar, CartesianGrid, ComposedChart, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { Table } from './data.js';
+import { Button } from './button.js';
+const dashes = [undefined, '7 4', '2 4', '10 3 2 3', '12 5', '4 3'];
 const colorFor = (index) => `var(--chart-series-${(index % 3) + 1})`;
 function Marker({ cx, cy, color, index, }) {
-    if (typeof cx !== "number" ||
-        typeof cy !== "number" ||
+    if (typeof cx !== 'number' ||
+        typeof cy !== 'number' ||
         !Number.isFinite(cx) ||
         !Number.isFinite(cy))
         return null;
-    const props = { fill: "var(--canvas)", stroke: color, strokeWidth: 1.8 };
+    const props = { fill: 'var(--canvas)', stroke: color, strokeWidth: 1.8 };
     return index % 3 === 0 ? (_jsx("circle", { cx: cx, cy: cy, r: 3.5, ...props })) : index % 3 === 1 ? (_jsx("rect", { x: cx - 3.5, y: cy - 3.5, width: 7, height: 7, ...props })) : (_jsx("path", { d: `M${cx},${cy - 4.5}l4.5,8h-9Z`, ...props }));
 }
 function Pattern({ id, index, color, }) {
-    return (_jsxs("pattern", { id: id, patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [_jsx("rect", { width: "8", height: "8", fill: color }), index % 3 === 1 ? (_jsx("path", { d: "M-2 2L2-2M0 8L8 0M6 10L10 6", stroke: "var(--canvas)", strokeWidth: "1.5" })) : index % 3 === 2 ? (_jsx("circle", { cx: "4", cy: "4", r: "1.4", fill: "var(--canvas)" })) : null] }));
+    return (_jsxs("pattern", { id: id, patternUnits: 'userSpaceOnUse', width: '8', height: '8', children: [_jsx("rect", { width: '8', height: '8', fill: color }), index % 3 === 1 ? (_jsx("path", { d: 'M-2 2L2-2M0 8L8 0M6 10L10 6', stroke: 'var(--canvas)', strokeWidth: '1.5' })) : index % 3 === 2 ? (_jsx("circle", { cx: '4', cy: '4', r: '1.4', fill: 'var(--canvas)' })) : null] }));
 }
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export const Chart = React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = "line", height = 280, locale = "en-US", formatValue, missingLabel = "Not available", emptyLabel = "No numeric measurements to display.", hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
-    const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, "_");
+export const Chart = React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, locale = 'en-US', formatValue, missingLabel = 'Not available', emptyLabel = 'No numeric measurements to display.', hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
+    const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, '_');
     const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
     const hidden = new Set(hiddenSeries ?? internalHidden);
     const visible = series.filter((s) => !hidden.has(s.key));
@@ -38,28 +38,28 @@ export const Chart = React.forwardRef(function Chart({ title, description, data,
     }, [restoreRequested, visible.length]);
     const number = React.useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
     const compact = React.useMemo(() => new Intl.NumberFormat(locale, {
-        notation: "compact",
+        notation: 'compact',
         maximumFractionDigits: 1,
     }), [locale]);
-    const format = (value) => typeof value === "number" && Number.isFinite(value)
+    const format = (value) => typeof value === 'number' && Number.isFinite(value)
         ? `${formatValue ? formatValue(value) : number.format(value)} ${unit}`
         : missingLabel;
     const rows = React.useMemo(() => {
         const ids = new Set(), keys = new Set();
         for (const s of series) {
             if (!s.key || keys.has(s.key))
-                throw new Error("Chart series keys must be non-empty and unique");
+                throw new Error('Chart series keys must be non-empty and unique');
             keys.add(s.key);
         }
         return data.map((row) => {
             if (!row.id || ids.has(row.id))
-                throw new Error("Chart datum IDs must be non-empty and unique");
+                throw new Error('Chart datum IDs must be non-empty and unique');
             ids.add(row.id);
             return {
                 ...row,
                 values: Object.fromEntries(series.map((s) => [
                     s.key,
-                    typeof row.values[s.key] === "number" &&
+                    typeof row.values[s.key] === 'number' &&
                         Number.isFinite(row.values[s.key])
                         ? row.values[s.key]
                         : null,
@@ -70,7 +70,7 @@ export const Chart = React.forwardRef(function Chart({ title, description, data,
     const byId = new Map(rows.map((row) => [row.id, row]));
     const values = rows
         .flatMap((row) => visible.map((s) => row.values[s.key]))
-        .filter((value) => typeof value === "number");
+        .filter((value) => typeof value === 'number');
     const min = values.reduce((a, b) => Math.min(a, b), 0), max = values.reduce((a, b) => Math.max(a, b), 0);
     const hasValues = values.length > 0;
     const changeHidden = (next) => {
@@ -82,28 +82,30 @@ export const Chart = React.forwardRef(function Chart({ title, description, data,
         .filter((s) => (s.key === key ? !hidden.has(key) : hidden.has(s.key)))
         .map((s) => s.key));
     const chartHeight = Number.isFinite(height) ? Math.max(200, height) : 280;
-    return (_jsxs("figure", { ...props, ref: ref, className: ["pui-chart", className].filter(Boolean).join(" "), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: "pui-chart-caption", children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsx("ul", { className: "pui-chart-legend", "aria-label": `${title} series`, children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: "button", className: "pui-chart-legend-button", "aria-label": `${s.label} series`, "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx("svg", { width: "32", height: "20", viewBox: "0 0 32 20", "aria-hidden": "true", children: type === "bar" ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: `${id}-legend-${index}`, color: colorFor(index), index: index }) }), _jsx("rect", { x: "4", y: "3", width: "24", height: "14", rx: "2", fill: `url(#${id}-legend-${index})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: "M1 10h30", stroke: colorFor(index), strokeWidth: "2", strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: colorFor(index) })] })) }), _jsx("span", { children: s.label })] }) }, s.key))) }), _jsxs("p", { className: "pui-chart-axis-label", children: [yLabel, " (", unit, ")"] }), hasValues ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "pui-chart-help", id: `${id}-keys`, children: "Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series." }), _jsx("div", { className: "pui-chart-plot", onKeyDownCapture: (event) => {
-                            if (event.key === "Escape")
+    return (_jsxs("figure", { ...props, ref: ref, className: ['pui-chart', className].filter(Boolean).join(' '), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'pui-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsx("ul", { className: 'pui-chart-legend', "aria-label": `${title} series`, children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'pui-chart-legend-button', "aria-label": `${s.label} series`, "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx("svg", { width: '32', height: '20', viewBox: '0 0 32 20', "aria-hidden": 'true', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: `${id}-legend-${index}`, color: colorFor(index), index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${id}-legend-${index})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: colorFor(index), strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: colorFor(index) })] })) }), _jsx("span", { children: s.label })] }) }, s.key))) }), _jsxs("p", { className: 'pui-chart-axis-label', children: [yLabel, " (", unit, ")"] }), hasValues ? (_jsxs(_Fragment, { children: [_jsx("p", { className: 'pui-chart-help', id: `${id}-keys`, children: "Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series." }), _jsx("div", { className: 'pui-chart-plot', onKeyDownCapture: (event) => {
+                            if (event.key === 'Escape')
                                 setDismissed(true);
-                            else if (event.key === "ArrowLeft" || event.key === "ArrowRight")
+                            else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
                                 setDismissed(false);
-                        }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: _jsx(ResponsiveContainer, { width: "100%", height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: "application", "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: "var(--line)" }), _jsx(XAxis, { dataKey: "id", tickFormatter: (value) => {
+                        }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: _jsx(ResponsiveContainer, { width: '100%', height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: 'application', "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: 'var(--line)' }), _jsx(XAxis, { dataKey: 'id', tickFormatter: (value) => {
                                             const label = byId.get(String(value))?.label ?? String(value);
-                                            return label.length > 14 ? label.slice(0, 13) + "…" : label;
-                                        }, tick: { fill: "var(--ink-muted)", fontSize: 12 }, tickLine: false, axisLine: { stroke: "var(--line)" }, minTickGap: 24, interval: "preserveStartEnd" }), _jsx(YAxis, { width: 56, tickFormatter: (value) => compact.format(Number(value)), tick: { fill: "var(--ink-muted)", fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max] }), _jsx(ReferenceLine, { y: 0, stroke: "var(--ink-muted)" }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
+                                            // minTickGap already drops ticks that would overlap; the cap
+                                            // only keeps one very long label from crowding the axis.
+                                            return label.length > 24 ? label.slice(0, 23) + '…' : label;
+                                        }, tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: { stroke: 'var(--line)' }, minTickGap: 24, interval: 'preserveStartEnd' }), _jsx(YAxis, { width: 56, tickFormatter: (value) => compact.format(Number(value)), tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max] }), _jsx(ReferenceLine, { y: 0, stroke: 'var(--ink-muted)' }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
                                             ? false
                                             : {
-                                                stroke: "var(--control-border)",
-                                                fill: "transparent",
+                                                stroke: 'var(--control-border)',
+                                                fill: 'transparent',
                                             }, wrapperStyle: {
-                                            position: "static",
-                                            visibility: "visible",
-                                            pointerEvents: "auto",
+                                            position: 'static',
+                                            visibility: 'visible',
+                                            pointerEvents: 'auto',
                                         }, content: (tooltip) => {
                                             const row = tooltip.active && !dismissed
                                                 ? byId.get(String(tooltip.label))
                                                 : undefined;
-                                            return (_jsx("div", { className: "pui-chart-readout", "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))) })] })) : (_jsx("span", { children: "Hover, touch or use chart arrow keys to inspect a measurement." })) }));
+                                            return (_jsx("div", { className: 'pui-chart-readout', "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))) })] })) : (_jsx("span", { children: "Hover, touch or use chart arrow keys to inspect a measurement." })) }));
                                         } })), series.map((s, index) => {
                                         const common = {
                                             name: s.label,
@@ -112,13 +114,13 @@ export const Chart = React.forwardRef(function Chart({ title, description, data,
                                             isAnimationActive: false,
                                             stroke: colorFor(index),
                                         };
-                                        return type === "bar" ? (_jsx(Bar, { ...common, fill: `url(#${id}-pattern-${index})`, maxBarSize: 48 }, s.key)) : type === "area" ? (_jsx(Area, { ...common, type: "linear", strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], fill: `url(#${id}-pattern-${index})`, fillOpacity: 0.12, connectNulls: false, dot: rows.length > 40
+                                        return type === 'bar' ? (_jsx(Bar, { ...common, fill: `url(#${id}-pattern-${index})`, maxBarSize: 48 }, s.key)) : type === 'area' ? (_jsx(Area, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], fill: `url(#${id}-pattern-${index})`, fillOpacity: 0.12, connectNulls: false, dot: rows.length > 40
                                                 ? false
-                                                : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key)) : (_jsx(Line, { ...common, type: "linear", strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], connectNulls: false, dot: rows.length > 40
+                                                : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key)) : (_jsx(Line, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], connectNulls: false, dot: rows.length > 40
                                                 ? false
                                                 : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key));
-                                    })] }) }) }), _jsx("p", { className: "pui-chart-axis-label pui-chart-x-label", children: xLabel })] })) : (_jsx("div", { className: "pui-chart-empty", role: "status", children: visible.length === 0 && series.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "No series selected." }), _jsx(Button, { variant: "outline", onClick: () => {
+                                    })] }) }) }), _jsx("p", { className: 'pui-chart-axis-label pui-chart-x-label', children: xLabel })] })) : (_jsx("div", { className: 'pui-chart-empty', role: 'status', children: visible.length === 0 && series.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "No series selected." }), _jsx(Button, { variant: 'outline', onClick: () => {
                                 setRestoreRequested(true);
                                 changeHidden([]);
-                            }, children: "Show all series" })] })) : (_jsx("p", { children: emptyLabel })) })), _jsx("div", { className: "pui-chart-inspector", ref: setHost, role: "status", "aria-live": "polite", "aria-atomic": "true", "aria-label": `${title} values`, hidden: !hasValues }), _jsxs("details", { className: "pui-chart-table", children: [_jsx("summary", { children: "View data table" }), _jsx(Table.Container, { label: `${title} data table`, orientation: "both", scrollChain: "contain", style: { maxHeight: 320 }, children: _jsxs(Table.Root, { children: [_jsxs(Table.Caption, { children: ["All input measurements, including hidden series. Unit: ", unit, "."] }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: "col", children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: "col", children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: "row", children: row.label }), series.map((s) => (_jsx(Table.Cell, { children: format(row.values[s.key]) }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: "No rows." }) })) })] }) })] })] }));
+                            }, children: "Show all series" })] })) : (_jsx("p", { children: emptyLabel })) })), _jsx("div", { className: 'pui-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": `${title} values`, hidden: !hasValues }), _jsxs("details", { className: 'pui-chart-table', children: [_jsx("summary", { children: "View data table" }), _jsx(Table.Container, { label: `${title} data table`, orientation: 'both', scrollChain: 'contain', style: { maxHeight: 320 }, children: _jsxs(Table.Root, { children: [_jsxs(Table.Caption, { children: ["All input measurements, including hidden series. Unit: ", unit, "."] }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { children: format(row.values[s.key]) }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: "No rows." }) })) })] }) })] })] }));
 });

package/dist/commands.d.ts

@@ -1,9 +1,9 @@
-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";
+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";
+    size?: ComponentSizeAlias | 'icon';
     ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 export declare function ToggleGroup<Value extends string>({ className, ref, ...props }: BaseToggleGroup.Props<Value> & {

package/dist/commands.js

@@ -1,27 +1,27 @@
-"use client";
+'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 { skin, part } from "./parts.js";
+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 { 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": size, "data-ui-size": scheme }));
+    const scheme = useComponentSize(size === 'icon' ? undefined : size);
+    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin('pui-button pui-toggle', className), "data-size": size, "data-ui-size": scheme }));
 }
 export function ToggleGroup({ className, ref, ...props }) {
-    return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin("pui-toggle-group", className) }));
+    return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin('pui-toggle-group', className) }));
 }
 export const Toolbar = {
     ...BaseToolbar,
-    Root: part(BaseToolbar.Root, "pui-toolbar"),
-    Group: part(BaseToolbar.Group, "pui-toolbar-group"),
-    Button: part(BaseToolbar.Button, "pui-button pui-toolbar-button"),
-    Link: part(BaseToolbar.Link, "pui-button pui-toolbar-link"),
-    Input: part(BaseToolbar.Input, "pui-input pui-toolbar-input"),
-    Separator: part(BaseToolbar.Separator, "pui-toolbar-separator"),
+    Root: part(BaseToolbar.Root, 'pui-toolbar'),
+    Group: part(BaseToolbar.Group, 'pui-toolbar-group'),
+    Button: part(BaseToolbar.Button, 'pui-button pui-toolbar-button'),
+    Link: part(BaseToolbar.Link, 'pui-button pui-toolbar-link'),
+    Input: part(BaseToolbar.Input, 'pui-input pui-toolbar-input'),
+    Separator: part(BaseToolbar.Separator, 'pui-toolbar-separator'),
 };
-export const Menubar = part(BaseMenubar, "pui-menubar");
+export const Menubar = 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;

package/dist/content.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 declare const CardRoot: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     tone?: "canvas" | "subtle";
     padding?: import("./foundations.js").Space;
@@ -27,7 +27,7 @@ export declare const Card: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onCopy"> & {
+export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onCopy'> & {
     code: string;
     label?: string;
     language?: string;