@surflane/ui 0.9.0 → 0.10.0

package/dist/slider.js

@@ -6,7 +6,7 @@ import { useResetValue, useRootRef } from './form-state.js';
 function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = 'edge', ...props }) {
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected] = useResetValue(value, (defaultValue ?? props.min ?? 0), element, form);
-    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin('pui-slider', className), onValueChange: (next, event) => {
+    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin('surf-slider', className), onValueChange: (next, event) => {
             onValueChange?.(next, event);
             if (value === undefined && !event.isCanceled)
                 setSelected(next);
@@ -15,12 +15,12 @@ function SliderRoot({ value, defaultValue, onValueChange, ref, className, form,
 export const Slider = {
     ...BaseSlider,
     Root: SliderRoot,
-    Label: /* @__PURE__ */ part(BaseSlider.Label, 'pui-slider-label'),
-    Value: /* @__PURE__ */ part(BaseSlider.Value, 'pui-slider-value'),
-    Control: /* @__PURE__ */ part(BaseSlider.Control, 'pui-slider-control'),
-    Track: /* @__PURE__ */ part(BaseSlider.Track, 'pui-slider-track'),
-    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'pui-slider-indicator'),
-    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'pui-slider-thumb'),
+    Label: /* @__PURE__ */ part(BaseSlider.Label, 'surf-slider-label'),
+    Value: /* @__PURE__ */ part(BaseSlider.Value, 'surf-slider-value'),
+    Control: /* @__PURE__ */ part(BaseSlider.Control, 'surf-slider-control'),
+    Track: /* @__PURE__ */ part(BaseSlider.Track, 'surf-slider-track'),
+    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'surf-slider-indicator'),
+    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'surf-slider-thumb'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { SliderRoot };

package/dist/sparkline.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ComponentSizeAlias } from './sizing.js';
+import type { ComponentSizeAlias } from './size.js';
 export type SparklineTrend = 'auto' | 'up' | 'down' | 'flat' | 'neutral';
 export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'children' | 'role' | 'aria-label'> & {
     /** Values in order. A missing value leaves a gap. */
@@ -7,7 +7,7 @@ export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'childr
     /** What the line shows and how it moved, such as "KOSPI, 30 days, up 2.3%". The
      * line is an image; this is its name. */
     label: string;
-    /** 24, 32 or 48px tall. Set --sparkline-height for another height. */
+    /** 24, 32 or 48px tall. Set --surf-sparkline-height for another height. */
     size?: ComponentSizeAlias;
     /** A reference line: a value, the first value, or none. */
     baseline?: number | 'first' | 'none';
@@ -21,21 +21,6 @@ export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'childr
 };
 /** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
  * when people need to read values. */
-export declare const Sparkline: React.ForwardRefExoticComponent<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "children" | "role" | "aria-label"> & {
-    /** Values in order. A missing value leaves a gap. */
-    data: readonly (number | null | undefined)[];
-    /** What the line shows and how it moved, such as "KOSPI, 30 days, up 2.3%". The
-     * line is an image; this is its name. */
-    label: string;
-    /** 24, 32 or 48px tall. Set --sparkline-height for another height. */
-    size?: ComponentSizeAlias;
-    /** A reference line: a value, the first value, or none. */
-    baseline?: number | "first" | "none";
-    /** Marks the last value with a dot. */
-    marker?: boolean;
-    /** The line's color. auto compares the last value with the baseline, or with the
-     * first value when there is none. */
-    trend?: SparklineTrend;
-    /** For measures where a fall is good: the colors swap. */
-    lowerIsBetter?: boolean;
-} & React.RefAttributes<SVGSVGElement>>;
+export declare const Sparkline: ({ data, label, size, baseline, marker, trend, lowerIsBetter, className, ref, ...props }: SparklineProps & {
+    ref?: React.Ref<SVGSVGElement>;
+}) => React.JSX.Element;

package/dist/sparkline.js

@@ -1,11 +1,9 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { cx, sizeName } from './parts.js';
+import { cx, sizeName } from './class-names.js';
 const finite = (value) => typeof value === 'number' && Number.isFinite(value);
 /** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
  * when people need to read values. */
-export const Sparkline = /* @__PURE__ */ React.forwardRef(function Sparkline({ data, label, size, baseline = 'none', marker = true, trend = 'auto', lowerIsBetter = false, className, ...props }, ref) {
+export const Sparkline = function Sparkline({ data, label, size, baseline = 'none', marker = true, trend = 'auto', lowerIsBetter = false, className, ref, ...props }) {
     const values = data.filter(finite);
     const first = values[0];
     const last = values[values.length - 1];
@@ -43,8 +41,8 @@ export const Sparkline = /* @__PURE__ */ React.forwardRef(function Sparkline({ d
     let end = data.length - 1;
     while (end >= 0 && !finite(data[end]))
         end--;
-    return (_jsxs("svg", { ...props, ref: ref, role: 'img', "aria-label": label, className: cx('pui-sparkline', className), "data-size": sizeName(size), "data-tone": tone, viewBox: '0 0 100 100', preserveAspectRatio: 'none', focusable: 'false', children: [finite(reference) && (_jsx("path", { className: 'pui-sparkline-baseline', d: `M0 ${y(reference)}H100`, vectorEffect: 'non-scaling-stroke' })), _jsx("path", { className: 'pui-sparkline-line', d: path, vectorEffect: 'non-scaling-stroke' }), marker && end >= 0 && (
+    return (_jsxs("svg", { ...props, ref: ref, role: 'img', "aria-label": label, className: cx('surf-sparkline', className), "data-size": sizeName(size), "data-tone": tone, viewBox: '0 0 100 100', preserveAspectRatio: 'none', focusable: 'false', children: [finite(reference) && (_jsx("path", { className: 'surf-sparkline-baseline', d: `M0 ${y(reference)}H100`, vectorEffect: 'non-scaling-stroke' })), _jsx("path", { className: 'surf-sparkline-line', d: path, vectorEffect: 'non-scaling-stroke' }), marker && end >= 0 && (
             // A zero-length segment with a round cap stays a circle however the
             // line stretches.
-            _jsx("path", { className: 'pui-sparkline-marker', d: `M${x(end)} ${y(data[end])}h0`, vectorEffect: 'non-scaling-stroke' }))] }));
-});
+            _jsx("path", { className: 'surf-sparkline-marker', d: `M${x(end)} ${y(data[end])}h0`, vectorEffect: 'non-scaling-stroke' }))] }));
+};

package/dist/spinner.d.ts

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSizeAlias } from './size.js';
 export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
     label?: string;
     decorative?: boolean;
     size?: ComponentSizeAlias;
 };
 /** Use decorative within a loading region that already owns the announcement. */
-export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
-    label?: string;
-    decorative?: boolean;
-    size?: ComponentSizeAlias;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const Spinner: ({ label, decorative, size, className, ref, ...props }: SpinnerProps & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element;

package/dist/spinner.js

@@ -1,10 +1,9 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useComponentSize } from './sizing.js';
-import { sizeName, cx } from './parts.js';
+import { normalizeSize } from './size.js';
+import { sizeName, cx } from './class-names.js';
 /** Use decorative within a loading region that already owns the announcement. */
-export const Spinner = /* @__PURE__ */ React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
-    const scheme = useComponentSize(size);
-    return (_jsxs("span", { ...props, ref: ref, className: cx('pui-spinner', className), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
-});
+export const Spinner = function Spinner({ label = 'Loading', decorative = false, size, className, ref, ...props }) {
+    // An omitted size follows the surrounding size scope through CSS.
+    const scheme = normalizeSize(size);
+    return (_jsxs("span", { ...props, ref: ref, className: cx('surf-spinner', className), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'surf-feedback-sr', children: label })] }));
+};

package/dist/stat.d.ts

@@ -14,46 +14,38 @@ export type StatChangeProps = Omit<React.ComponentPropsWithoutRef<'dd'>, 'childr
 /** A key figure: what it measures, its value, how it moved and what it covers. Renders
  * a description list, so the label names the value for assistive technology. */
 export declare const Stat: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDListElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Value: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Change: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
-        /** The change, such as 0.023 for 2.3%. Its sign sets the direction. */
-        value: number;
-        /** Text for the change. Defaults to a signed percentage of `value`. */
-        format?: (value: number) => React.ReactNode;
-        /** Overrides the direction the sign gives. */
-        direction?: StatDirection;
-        /** For measures where a fall is good, such as latency: the colors swap, the arrow
-         * still points the way the value moved. */
-        lowerIsBetter?: boolean;
-    } & React.RefAttributes<HTMLElement>>;
-    Caption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
+    Root: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLDListElement> | undefined;
+    }) => React.JSX.Element;
+    Label: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Value: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Change: ({ value, format, direction, lowerIsBetter, className, ref, ...props }: StatChangeProps & {
+        ref?: React.Ref<HTMLElement>;
+    }) => React.JSX.Element;
+    Caption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
 };
-export declare const StatRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDListElement>>, StatLabel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>, StatValue: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>, StatChange: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
-    /** The change, such as 0.023 for 2.3%. Its sign sets the direction. */
-    value: number;
-    /** Text for the change. Defaults to a signed percentage of `value`. */
-    format?: (value: number) => React.ReactNode;
-    /** Overrides the direction the sign gives. */
-    direction?: StatDirection;
-    /** For measures where a fall is good, such as latency: the colors swap, the arrow
-     * still points the way the value moved. */
-    lowerIsBetter?: boolean;
-} & React.RefAttributes<HTMLElement>>, StatCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>;
+export declare const StatRoot: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLDListElement> | undefined;
+}) => React.JSX.Element, StatLabel: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element, StatValue: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element, StatChange: ({ value, format, direction, lowerIsBetter, className, ref, ...props }: StatChangeProps & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element, StatCaption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element;

package/dist/stat.js

@@ -1,26 +1,25 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
-import { part, cx } from './parts.js';
+import { cx } from './class-names.js';
+import { elementPart } from './element-part.js';
 import { formatPercent } from './format.js';
 const signed = (value) => formatPercent(value, { signed: true });
 const arrows = { up: 'arrow-up', down: 'arrow-down', flat: 'minus' };
 /** A change against an earlier value: an arrow, a signed figure and its direction's
  * color. The sign and the arrow carry the direction, so color is never alone. */
-const ChangePart = /* @__PURE__ */ React.forwardRef(function StatChange({ value, format = signed, direction, lowerIsBetter, className, ...props }, ref) {
+const ChangePart = function StatChange({ value, format = signed, direction, lowerIsBetter, className, ref, ...props }) {
     const way = direction ?? (value > 0 ? 'up' : value < 0 ? 'down' : 'flat');
     const tone = way === 'flat' || !lowerIsBetter ? way : way === 'up' ? 'down' : 'up';
-    return (_jsxs("dd", { ...props, ref: ref, "data-direction": way, "data-tone": tone, className: cx('pui-stat-change', className), children: [_jsx(Icon, { name: arrows[way] }), format(value)] }));
-});
+    return (_jsxs("dd", { ...props, ref: ref, "data-direction": way, "data-tone": tone, className: cx('surf-stat-change', className), children: [_jsx(Icon, { name: arrows[way] }), format(value)] }));
+};
 /** A key figure: what it measures, its value, how it moved and what it covers. Renders
  * a description list, so the label names the value for assistive technology. */
 export const Stat = {
-    Root: /* @__PURE__ */ part('dl', 'pui-stat'),
-    Label: /* @__PURE__ */ part('dt', 'pui-stat-label'),
-    Value: /* @__PURE__ */ part('dd', 'pui-stat-value'),
+    Root: /* @__PURE__ */ elementPart('dl', 'surf-stat'),
+    Label: /* @__PURE__ */ elementPart('dt', 'surf-stat-label'),
+    Value: /* @__PURE__ */ elementPart('dd', 'surf-stat-value'),
     Change: ChangePart,
-    Caption: /* @__PURE__ */ part('dd', 'pui-stat-caption'),
+    Caption: /* @__PURE__ */ elementPart('dd', 'surf-stat-caption'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Root: StatRoot, Label: StatLabel, Value: StatValue, Change: StatChange, Caption: StatCaption, } = Stat;

package/dist/status.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from './icon.js';
 const statusIcons = {

package/dist/switch.d.ts

@@ -1,13 +1,22 @@
 import * as React from 'react';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import { type ChoiceSize } from './choice.js';
-declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
+declare const SwitchRoot: ({ size, checked, defaultChecked, onCheckedChange, className, form, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseSwitch.Root> & ChoiceSize & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseSwitch.Root>>;
+}) => React.JSX.Element;
 export declare const Switch: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
-    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
+    Root: ({ size, checked, defaultChecked, onCheckedChange, className, form, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseSwitch.Root> & ChoiceSize & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseSwitch.Root>>;
+    }) => React.JSX.Element;
+    Thumb: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
 };
 export { SwitchRoot };
-export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const SwitchThumb: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element;

package/dist/switch.js

@@ -1,24 +1,23 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { useComponentSize } from './sizing.js';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import { skin, part } from './parts.js';
 import { useRootRef, useResetValue } from './form-state.js';
-const SwitchRoot = /* @__PURE__ */ React.forwardRef(function SwitchRoot({ size, checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
+const SwitchRoot = function SwitchRoot({ size, checked, defaultChecked = false, onCheckedChange, className, form, ref, ...props }) {
     const scheme = useComponentSize(size);
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
-    return (_jsx(BaseSwitch.Root, { ...props, "data-ui-size": size ? scheme : undefined, form: form, ref: attach, checked: selected, className: skin('pui-switch', className), onCheckedChange: (next, event) => {
+    return (_jsx(BaseSwitch.Root, { ...props, "data-ui-size": size ? scheme : undefined, form: form, ref: attach, checked: selected, className: skin('surf-switch', className), onCheckedChange: (next, event) => {
             onCheckedChange?.(next, event);
             if (checked === undefined && !event.isCanceled)
                 setSelected(next);
         } }));
-});
+};
 export const Switch = {
     ...BaseSwitch,
     Root: SwitchRoot,
-    Thumb: /* @__PURE__ */ part(BaseSwitch.Thumb, 'pui-switch-thumb'),
+    Thumb: /* @__PURE__ */ part(BaseSwitch.Thumb, 'surf-switch-thumb'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { SwitchRoot };

package/dist/syntax-engine.js

@@ -115,7 +115,15 @@ 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',
+        // Shiki leaves the rest of a line plain once it has spent this long on it, and the
+        // lines after it too. Its 500ms default cut the first line short on a slow device,
+        // while the regular expressions were still compiling; the result was then cached.
+        // The limit stays only as a guard against runaway patterns.
+        tokenizeTimeLimit: 5000,
+    })
         .map((line) => line.map((token) => ({
         content: token.content,
         role: colors[token.color?.toLowerCase() ?? ''] ?? 'plain',

package/dist/syntax-highlighter.d.ts

@@ -11,10 +11,6 @@ export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<'code'>
  * Rendering remains selectable React text; it never inserts executable HTML. Tokens are
  * colored inside a SyntaxHighlighting provider; without one, the code renders plain.
  */
-export declare const SyntaxHighlighter: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
-    code: string;
-    language?: string;
-    inline?: boolean;
-    label?: string;
-    wrap?: boolean;
-} & React.RefAttributes<HTMLElement>>;
+export declare const SyntaxHighlighter: ({ code, language, inline, label, wrap, className, ref, ...props }: SyntaxHighlighterProps & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element;

package/dist/syntax-highlighter.js

@@ -38,7 +38,7 @@ function Highlighted({ tokens, render, }) {
  * Rendering remains selectable React text; it never inserts executable HTML. Tokens are
  * colored inside a SyntaxHighlighting provider; without one, the code renders plain.
  */
-export const SyntaxHighlighter = /* @__PURE__ */ React.forwardRef(function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ...props }, ref) {
+export const SyntaxHighlighter = function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ref, ...props }) {
     const source = React.useContext(SyntaxEngineContext);
     const name = language.trim().toLowerCase();
     const lang = aliases[name] ?? name;
@@ -70,7 +70,7 @@ export const SyntaxHighlighter = /* @__PURE__ */ React.forwardRef(function Synta
     const render = (tokens) => {
         const eols = code.match(/\r\n|\n|\r/g) ?? [];
         const valid = tokens && tokens.length === eols.length + 1;
-        return (_jsx("code", { ...props, ref: ref, className: cx('pui-syntax', className), "data-language": lang, "data-highlighted": valid ? 'true' : 'false', children: valid
+        return (_jsx("code", { ...props, ref: ref, className: cx('surf-syntax', className), "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 }));
     };
@@ -78,5 +78,5 @@ export const SyntaxHighlighter = /* @__PURE__ */ React.forwardRef(function Synta
     // meanwhile: a server render writes it highlighted and hydration keeps that HTML,
     // while a block that appears later never suspends anything around it.
     const element = suspense ? (_jsx(React.Suspense, { fallback: render(null), children: _jsx(Highlighted, { tokens: requestTokens(source.load, code, lang), render: render }) })) : (render(result?.code === code && result.language === lang ? result.tokens : null));
-    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 }) }));
-});
+    return inline ? (element) : (_jsx(ScrollArea, { label: label, orientation: 'horizontal', rootClassName: 'surf-syntax-scroll', children: _jsx("pre", { className: 'surf-syntax-pre', "data-wrap": wrap || undefined, children: element }) }));
+};

package/dist/syntax-highlighting.js

@@ -26,7 +26,7 @@ export function SyntaxHighlighting({ children, suspense = false, }) {
  * highlighted again.
  */
 export function preloadSyntaxHighlighting(root = document) {
-    return Promise.all(Array.from(root.querySelectorAll('code.pui-syntax[data-highlighted="true"]'), (code) => {
+    return Promise.all(Array.from(root.querySelectorAll('code.surf-syntax[data-highlighted="true"]'), (code) => {
         const text = code.textContent ?? '';
         const language = code.dataset.language;
         const tokens = readTokens(code, text);
@@ -51,7 +51,7 @@ function readTokens(code, text) {
         }
         else if (node.nodeType === Node.TEXT_NODE) {
             const breaks = node.textContent ?? '';
-            if (!/^(\r\n|\n|\r)*$/.test(breaks))
+            if (!/^[\r\n]*$/.test(breaks))
                 return null;
             const count = breaks.match(/\r\n|\n|\r/g)?.length ?? 0;
             for (let line = 0; line < count; line++)