@surflane/ui 0.0.0-stage → 0.1.0

package/dist/select.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useComponentSize } from "./sizing.js";
+import { Select as BaseSelect } from "@base-ui/react/select";
+const cx = (...v) => v.filter(Boolean).join(" ");
+function Chevron() {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) }));
+}
+function Check() {
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m5 12 4 4L19 6" }) }));
+}
+export function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }) {
+    const scheme = useComponentSize(size);
+    const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? "");
+    const nativeInput = React.useRef(null);
+    const initialValue = defaultValue ?? options[0]?.value ?? "";
+    const resetCallback = React.useRef(onValueChange);
+    resetCallback.current = onValueChange;
+    React.useEffect(() => {
+        const owner = nativeInput.current?.form;
+        if (!owner)
+            return;
+        const pending = new Set();
+        const reset = (event) => {
+            const timer = setTimeout(() => {
+                pending.delete(timer);
+                if (event.defaultPrevented)
+                    return;
+                setLocalValue(initialValue);
+                resetCallback.current?.(initialValue);
+            }, 0);
+            pending.add(timer);
+        };
+        owner.addEventListener("reset", reset);
+        return () => {
+            owner.removeEventListener("reset", reset);
+            pending.forEach(clearTimeout);
+        };
+    }, [initialValue, props.form]);
+    const selected = value ?? localValue;
+    const { name, form, required, disabled, id, ...aria } = props;
+    return (_jsx("span", { className: cx("pui-select control-shell select-control", className), "data-size": size, "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
+                setLocalValue(v ?? "");
+                onValueChange?.(v ?? "");
+            }, inputRef: (node) => {
+                nativeInput.current = node;
+                if (typeof inputRef === "function")
+                    inputRef(node);
+                else if (inputRef)
+                    inputRef.current = node;
+            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: triggerRef, className: "pui-select-trigger form-control", "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: "pui-select-icon select-chevron", children: _jsx(Chevron, {}) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "pui-positioner", sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "pui-select-popup", "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: options.map((o) => (_jsxs(BaseSelect.Item, { className: "pui-select-item", value: o.value, "data-option-value": o.value, disabled: o.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: "pui-select-check", children: _jsx(Check, {}) }), _jsx(BaseSelect.ItemText, { children: o.label })] }, o.value))) }) }) }) })] }) }));
+}
+function optionList(children) {
+    return React.Children.toArray(children).flatMap((child) => {
+        if (!React.isValidElement(child))
+            return [];
+        const p = child.props;
+        if (child.type === React.Fragment ||
+            child.type === "optgroup" ||
+            child.type === NativeSelectOptGroup)
+            return optionList(p.children);
+        return [
+            {
+                value: String(p.value ?? p.children ?? ""),
+                label: p.label ?? p.children,
+                disabled: p.disabled,
+            },
+        ];
+    });
+}
+/** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
+export const NativeSelect = React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
+    const input = React.useRef(null);
+    const options = optionList(children);
+    return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": props["aria-describedby"], "aria-invalid": props["aria-invalid"], onValueChange: (next) => {
+            if (!onChange)
+                return;
+            const target = input.current;
+            if (!target)
+                return;
+            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+            setter?.call(target, next);
+            const event = new Event("change", { bubbles: true });
+            Object.defineProperties(event, {
+                target: { value: target },
+                currentTarget: { value: target },
+            });
+            onChange(event);
+        } }));
+});
+export function NativeSelectOption(props) {
+    return _jsx("option", { ...props });
+}
+export function NativeSelectOptGroup(props) {
+    return _jsx("optgroup", { ...props });
+}

package/dist/sizing.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type ComponentSize = "small" | "default" | "large";
+export type ComponentSizeAlias = ComponentSize | "sm" | "md" | "lg";
+export declare const ComponentSizeContext: React.Context<ComponentSize | undefined>;
+export declare function normalizeSize(size?: ComponentSizeAlias): ComponentSize | undefined;
+/** Explicit sizes override the surrounding scheme; portals retain React context. */
+export declare function useComponentSize(size?: ComponentSizeAlias): ComponentSize | undefined;
+/** No layout box: grid/flex items and semantic children retain their own layout.
+ * For table internals, place the provider outside the table, never inside tbody. */
+export declare function SizeProvider({ size, children, }: {
+    size: ComponentSize;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/sizing.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export const ComponentSizeContext = React.createContext(undefined);
+export function normalizeSize(size) {
+    return size === "sm"
+        ? "small"
+        : size === "md"
+            ? "default"
+            : size === "lg"
+                ? "large"
+                : size;
+}
+/** Explicit sizes override the surrounding scheme; portals retain React context. */
+export function useComponentSize(size) {
+    const inherited = React.useContext(ComponentSizeContext);
+    return normalizeSize(size) ?? inherited;
+}
+/** No layout box: grid/flex items and semantic children retain their own layout.
+ * For table internals, place the provider outside the table, never inside tbody. */
+export function SizeProvider({ size, children, }) {
+    return (_jsx(ComponentSizeContext.Provider, { value: size, children: _jsx("div", { className: "pui-size-scope", "data-ui-size": size, children: children }) }));
+}

package/dist/slot.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function Slot({ children, ...props }: React.HTMLAttributes<HTMLElement>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/slot.js

@@ -0,0 +1,10 @@
+"use client";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+export function Slot({ children, ...props }) {
+    return useRender({
+        render: React.isValidElement(children) ? children : undefined,
+        props: React.isValidElement(children) ? props : { ...props, children },
+        defaultTagName: "span",
+    });
+}

package/dist/status.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type ComponentSize } from "./sizing.js";
+export type StatusTone = "neutral" | "success" | "danger" | "caution" | "progress";
+export type BadgeProps = React.ComponentPropsWithoutRef<"span"> & {
+    size?: ComponentSize;
+    tone?: StatusTone;
+    icon?: React.ReactNode;
+};
+export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    size?: ComponentSize;
+    tone?: StatusTone;
+    icon?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare function StatusIcon({ tone }: {
+    tone: StatusTone;
+}): React.JSX.Element;
+/** Domain status labels and live announcements remain the caller's responsibility. */
+export declare const StatusBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    size?: ComponentSize;
+    tone?: StatusTone;
+    icon?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/status.js

@@ -0,0 +1,17 @@
+"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) {
+    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] }));
+});
+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" })] })) }));
+}
+/** Domain status labels and live announcements remain the caller's responsibility. */
+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.d.ts

@@ -0,0 +1,5 @@
+export type SyntaxToken = {
+    content: string;
+    role: string;
+};
+export declare function highlightCode(code: string, language: string): Promise<SyntaxToken[][] | null>;

package/dist/syntax-engine.js

@@ -0,0 +1,129 @@
+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"),
+};
+const roles = [
+    "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}`;
+let engine;
+const languages = new Map();
+function highlighter() {
+    return (engine ??= createHighlighterCore({
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+        langs: [],
+        themes: [
+            {
+                name: "platform-quiet",
+                type: "dark",
+                colors: {
+                    "editor.foreground": color(0),
+                    "editor.background": "#000000",
+                },
+                tokenColors: [
+                    {
+                        scope: ["comment", "punctuation.definition.comment"],
+                        settings: { foreground: color(1) },
+                    },
+                    {
+                        scope: ["keyword", "storage", "constant.language"],
+                        settings: { foreground: color(2) },
+                    },
+                    {
+                        scope: ["string", "markup.inline.raw", "markup.fenced_code.block"],
+                        settings: { foreground: color(3) },
+                    },
+                    {
+                        scope: ["constant.numeric", "constant.character"],
+                        settings: { foreground: color(4) },
+                    },
+                    {
+                        scope: [
+                            "entity.name.function",
+                            "support.function",
+                            "entity.name.type",
+                            "support.type",
+                            "entity.name.class",
+                        ],
+                        settings: { foreground: color(5) },
+                    },
+                    {
+                        scope: ["entity.name.tag", "markup.heading"],
+                        settings: { foreground: color(6) },
+                    },
+                    {
+                        scope: [
+                            "entity.other.attribute-name",
+                            "support.type.property-name",
+                            "variable.other.property",
+                        ],
+                        settings: { foreground: color(7) },
+                    },
+                    {
+                        scope: ["punctuation", "meta.brace"],
+                        settings: { foreground: color(8) },
+                    },
+                ],
+            },
+        ],
+    }).catch((error) => {
+        engine = undefined;
+        throw error;
+    }));
+}
+/** Engine and grammars are singletons. Result cache is bounded by count and source length. */
+const cache = new Map();
+export async function highlightCode(code, language) {
+    const loader = loaders[language];
+    if (!loader || code.length > 50000)
+        return null;
+    const key = `${language}\0${code}`;
+    if (cache.has(key)) {
+        const value = cache.get(key);
+        cache.delete(key);
+        cache.set(key, value);
+        return value;
+    }
+    const instance = await highlighter();
+    if (!languages.has(language))
+        languages.set(language, loader()
+            .then((module) => instance.loadLanguage(module.default))
+            .catch((error) => {
+            languages.delete(language);
+            throw error;
+        }));
+    await languages.get(language);
+    const tokens = instance
+        .codeToTokensBase(code, { lang: language, theme: "platform-quiet" })
+        .map((line) => line.map((token) => ({
+        content: token.content,
+        role: colors[token.color?.toLowerCase() ?? ""] ?? "plain",
+    })));
+    if (code.length <= 8000) {
+        cache.set(key, tokens);
+        if (cache.size > 24)
+            cache.delete(cache.keys().next().value);
+    }
+    return tokens;
+}

package/dist/syntax-highlighter.d.ts

@@ -0,0 +1,17 @@
+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"> & {
+    code: string;
+    language?: string;
+    inline?: boolean;
+    label?: string;
+    wrap?: boolean;
+};
+/** Rendering remains selectable React text; it never inserts executable HTML. */
+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>>;

package/dist/syntax-highlighter.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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",
+];
+const aliases = {
+    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) {
+    const name = language.trim().toLowerCase();
+    const lang = aliases[name] ?? name;
+    const [result, setResult] = React.useState();
+    React.useEffect(() => {
+        let current = true;
+        if (lang === "text" ||
+            !syntaxLanguages.includes(lang) ||
+            code.length > 50000)
+            return;
+        import("./syntax-engine.js")
+            .then((engine) => engine.highlightCode(code, lang))
+            .then((tokens) => {
+            if (current)
+                setResult({ code, language: lang, tokens });
+        })
+            .catch(() => {
+            if (current)
+                setResult({ code, language: lang, tokens: null });
+        });
+        return () => {
+            current = false;
+        };
+    }, [code, lang]);
+    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)))
+            : code }));
+    return inline ? (element) : (_jsx(ScrollArea, { label: label, orientation: "horizontal", children: _jsx("pre", { className: "pui-syntax-pre", "data-wrap": wrap || undefined, children: element }) }));
+});

package/dist/toast.d.ts

@@ -0,0 +1,59 @@
+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";
+};
+export declare const Toast: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        tone?: StatusTone;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Icon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        tone?: StatusTone;
+    } & React.RefAttributes<HTMLSpanElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Action: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        layout?: "stack" | "list" | "anchored";
+    } & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Text: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Provider: React.FC<import("@base-ui/react/toast").ToastProviderProps>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    useToastManager: typeof BaseToast.useToastManager;
+    createToastManager: typeof BaseToast.createToastManager;
+};
+export declare const ToastAction: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, ToastArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ToastClose: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>, ToastContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastContentProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ToastDescription: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLParagraphElement>>, ToastPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ToastPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ToastProvider: React.FC<import("@base-ui/react/toast").ToastProviderProps>, ToastRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    tone?: StatusTone;
+} & React.RefAttributes<HTMLDivElement>>, ToastTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toast").ToastTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLHeadingElement>>, ToastViewport: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    layout?: "stack" | "list" | "anchored";
+} & React.RefAttributes<HTMLDivElement>>, ToastIcon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    tone?: StatusTone;
+} & React.RefAttributes<HTMLSpanElement>>, ToastText: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/toast.js

@@ -0,0 +1,99 @@
+"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) }) }));
+});
+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 }) }));
+});
+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" }) })) }));
+});
+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) }));
+});
+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")
+            return;
+        const resize = new ResizeObserver(update);
+        function update() {
+            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"));
+                return (sum + (Number.isFinite(natural) ? natural : card.offsetHeight));
+            }, 0) +
+                Math.max(0, cards.length - 1) * gap;
+            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);
+            const value = `${height}px`;
+            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])")
+                .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"))
+                refresh();
+        });
+        mutation.observe(viewport, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["data-limited", "data-expanded", "style"],
+        });
+        refresh();
+        window.addEventListener("resize", update);
+        return () => {
+            window.removeEventListener("resize", update);
+            viewport.removeAttribute("data-stack-overflow");
+            resize.disconnect();
+            mutation.disconnect();
+        };
+    }, [layout]);
+    const scheme = useComponentSize();
+    return (_jsx(BaseToast.Viewport, { ...props, ref: (element) => {
+            viewportRef.current = element;
+            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) }));
+});
+export const Toast = {
+    ...BaseToast,
+    Root,
+    Icon,
+    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"),
+};
+// 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

@@ -0,0 +1,4 @@
+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>;