@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/tabs.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { createContext, use } from "react";
+import { cn, tv, withBase } from "../lib/cn.js";
+const TabsVariantContext = createContext("underline");
+const slide = "transition-[translate] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy) motion-reduce:transition-none";
+const tabsStyles = tv({
+    slots: {
+        list: "relative flex shrink-0 select-none",
+        tab: [
+            "relative z-[1] inline-flex shrink-0 cursor-default items-center justify-center gap-1.5 whitespace-nowrap font-medium outline-none",
+            "text-fg-muted transition-colors duration-(--duration-fast) ease-(--ease-standard)",
+            "hover:text-fg data-active:text-fg focus-visible:ring-focus",
+            "data-disabled:pointer-events-none data-disabled:opacity-45",
+            "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        ],
+        indicator: ["pointer-events-none absolute", slide],
+    },
+    variants: {
+        variant: {
+            /** Ink line under the active tab — page-level navigation. */
+            underline: {
+                list: [
+                    "gap-1 data-[orientation=horizontal]:border-b data-[orientation=horizontal]:border-border-subtle",
+                    "data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-s data-[orientation=vertical]:border-border-subtle",
+                ],
+                tab: "h-9 rounded-md px-2 text-base focus-visible:outline-offset-[-2px] data-[orientation=vertical]:h-8 data-[orientation=vertical]:justify-start",
+                indicator: [
+                    "rounded-full bg-fg",
+                    "data-[orientation=horizontal]:bottom-[-1px] data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:h-0.5",
+                    "data-[orientation=horizontal]:w-(--active-tab-width) data-[orientation=horizontal]:translate-x-(--active-tab-left)",
+                    "data-[orientation=vertical]:top-0 data-[orientation=vertical]:start-[-1px] data-[orientation=vertical]:w-0.5",
+                    "data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:translate-y-(--active-tab-top)",
+                ],
+            },
+            /** Sliding raised pill on a sunken track — segmented control. */
+            pill: {
+                list: "inline-flex w-fit items-center gap-0.5 rounded-lg bg-bg-muted p-0.5 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+                tab: "h-7 rounded-md px-3 text-sm focus-visible:outline-offset-0",
+                // Base UI measures the active tab from the list's left edge in either direction.
+                indicator: [
+                    "top-0 left-0 rounded-md border border-border-subtle bg-surface shadow-xs",
+                    "h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top)",
+                ],
+            },
+        },
+    },
+    defaultVariants: { variant: "underline" },
+});
+/** Root. `variant` styles every List/Tab inside it. */
+export function Tabs({ variant = "underline", className, ...props }) {
+    return (_jsx(TabsVariantContext, { value: variant, children: _jsx(BaseTabs.Root, { "data-slot": "tabs", "data-variant": variant, className: withBase("flex flex-col gap-3 data-[orientation=vertical]:flex-row", className), ...props }) }));
+}
+/** The strip of tabs. Renders the sliding indicator automatically. */
+export function TabsList({ className, children, ...props }) {
+    const variant = use(TabsVariantContext);
+    const styles = tabsStyles({ variant });
+    return (_jsxs(BaseTabs.List, { "data-slot": "tabs-list", className: withBase(styles.list(), className), ...props, children: [children, _jsx(BaseTabs.Indicator, { "data-slot": "tabs-indicator", className: styles.indicator() })] }));
+}
+export function TabsTab({ className, ...props }) {
+    const variant = use(TabsVariantContext);
+    return (_jsx(BaseTabs.Tab, { "data-slot": "tabs-tab", className: withBase(tabsStyles({ variant }).tab(), className), ...props }));
+}
+/** Content for one tab; fades and rises in when it becomes active. */
+export function TabsPanel({ className, ...props }) {
+    return (_jsx(BaseTabs.Panel, { "data-slot": "tabs-panel", className: withBase(cn("min-w-0 flex-1 rounded-lg outline-none focus-visible:ring-focus", "transition-[opacity,translate] duration-(--duration-base) ease-(--ease-out)", "starting:translate-y-1 starting:opacity-0 motion-reduce:starting:translate-y-0"), className), ...props }));
+}

package/dist/components/text-link.d.ts

@@ -0,0 +1,54 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "../lib/cn.js";
+declare const textLink: import("tailwind-variants").TVReturnType<{
+    tone: {
+        /** In running text: ink, always underlined. */
+        default: "text-fg underline decoration-border-strong hover:decoration-fg";
+        /** In captions and footers: muted, underlined on hover. */
+        quiet: "text-fg-muted hover:text-fg hover:underline";
+        /** A name or title that is also a link: its own colour, underlined on hover. */
+        plain: "hover:underline";
+        /**
+         * A header's navigation: muted, padded to a target, never underlined; ink on hover and for the
+         * current page (`aria-current="page"`).
+         */
+        nav: "rounded-md px-3 py-1.5 text-sm text-fg-muted hover:text-fg aria-[current=page]:text-fg";
+    };
+}, undefined, string[], {
+    tone: {
+        /** In running text: ink, always underlined. */
+        default: "text-fg underline decoration-border-strong hover:decoration-fg";
+        /** In captions and footers: muted, underlined on hover. */
+        quiet: "text-fg-muted hover:text-fg hover:underline";
+        /** A name or title that is also a link: its own colour, underlined on hover. */
+        plain: "hover:underline";
+        /**
+         * A header's navigation: muted, padded to a target, never underlined; ink on hover and for the
+         * current page (`aria-current="page"`).
+         */
+        nav: "rounded-md px-3 py-1.5 text-sm text-fg-muted hover:text-fg aria-[current=page]:text-fg";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        /** In running text: ink, always underlined. */
+        default: "text-fg underline decoration-border-strong hover:decoration-fg";
+        /** In captions and footers: muted, underlined on hover. */
+        quiet: "text-fg-muted hover:text-fg hover:underline";
+        /** A name or title that is also a link: its own colour, underlined on hover. */
+        plain: "hover:underline";
+        /**
+         * A header's navigation: muted, padded to a target, never underlined; ink on hover and for the
+         * current page (`aria-current="page"`).
+         */
+        nav: "rounded-md px-3 py-1.5 text-sm text-fg-muted hover:text-fg aria-[current=page]:text-fg";
+    };
+}, undefined>>;
+export interface TextLinkProps extends useRender.ComponentProps<"a">, VariantProps<typeof textLink> {
+}
+/**
+ * A link inside text: inline, wraps with the sentence, one underline and focus ring for the whole
+ * app. An `<a>` by default; `render={<Link to="…" />}` for a route, `render={<button type="button" />}`
+ * for an action.
+ */
+export declare function TextLink({ tone, className, render, ref, ...props }: TextLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/components/text-link.js

@@ -0,0 +1,38 @@
+"use client";
+import { useRender } from "@base-ui/react/use-render";
+import { cn, tv } from "../lib/cn.js";
+const textLink = tv({
+    base: [
+        "rounded-xs underline-offset-4 outline-none focus-visible:ring-focus",
+        "transition-[color,text-decoration-color] duration-(--duration-fast) ease-(--ease-standard)",
+    ],
+    variants: {
+        tone: {
+            /** In running text: ink, always underlined. */
+            default: "text-fg underline decoration-border-strong hover:decoration-fg",
+            /** In captions and footers: muted, underlined on hover. */
+            quiet: "text-fg-muted hover:text-fg hover:underline",
+            /** A name or title that is also a link: its own colour, underlined on hover. */
+            plain: "hover:underline",
+            /**
+             * A header's navigation: muted, padded to a target, never underlined; ink on hover and for the
+             * current page (`aria-current="page"`).
+             */
+            nav: "rounded-md px-3 py-1.5 text-sm text-fg-muted hover:text-fg aria-[current=page]:text-fg",
+        },
+    },
+    defaultVariants: { tone: "default" },
+});
+/**
+ * A link inside text: inline, wraps with the sentence, one underline and focus ring for the whole
+ * app. An `<a>` by default; `render={<Link to="…" />}` for a route, `render={<button type="button" />}`
+ * for an action.
+ */
+export function TextLink({ tone, className, render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "a",
+        render,
+        ref,
+        props: { "data-slot": "text-link", className: cn(textLink({ tone }), className), ...props },
+    });
+}

package/dist/components/textarea.d.ts

@@ -0,0 +1,75 @@
+import { type ComponentProps, type Ref } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const textareaStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** Framed field, same chrome as Input. */
+        default: string[];
+        /** No chrome: embed inside a custom container, such as a message field with its own toolbar. */
+        bare: "rounded-none border-0 p-0 shadow-none";
+    };
+    size: {
+        sm: "rounded-md px-2 py-[3px] text-sm";
+        md: "rounded-lg px-2.5 py-1 text-base";
+        lg: "rounded-xl px-3 py-[7px] text-md";
+    };
+    autoGrow: {
+        true: "field-sizing-content";
+        false: "resize-y";
+    };
+}, undefined, string[], {
+    variant: {
+        /** Framed field, same chrome as Input. */
+        default: string[];
+        /** No chrome: embed inside a custom container, such as a message field with its own toolbar. */
+        bare: "rounded-none border-0 p-0 shadow-none";
+    };
+    size: {
+        sm: "rounded-md px-2 py-[3px] text-sm";
+        md: "rounded-lg px-2.5 py-1 text-base";
+        lg: "rounded-xl px-3 py-[7px] text-md";
+    };
+    autoGrow: {
+        true: "field-sizing-content";
+        false: "resize-y";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        /** Framed field, same chrome as Input. */
+        default: string[];
+        /** No chrome: embed inside a custom container, such as a message field with its own toolbar. */
+        bare: "rounded-none border-0 p-0 shadow-none";
+    };
+    size: {
+        sm: "rounded-md px-2 py-[3px] text-sm";
+        md: "rounded-lg px-2.5 py-1 text-base";
+        lg: "rounded-xl px-3 py-[7px] text-md";
+    };
+    autoGrow: {
+        true: "field-sizing-content";
+        false: "resize-y";
+    };
+}, undefined>>;
+type TextareaVariants = VariantProps<typeof textareaStyles>;
+export interface TextareaProps extends Omit<ComponentProps<"textarea">, "ref" | "rows" | "value" | "defaultValue">, Omit<TextareaVariants, "autoGrow"> {
+    ref?: Ref<HTMLTextAreaElement> | undefined;
+    value?: string;
+    defaultValue?: string;
+    /** Fires with the new text on every edit. */
+    onValueChange?: (value: string) => void;
+    /** Grow with content between `minRows` and `maxRows`. Default `true`. */
+    autoGrow?: boolean;
+    /** Minimum visible lines. Default 3 (1 for `bare`). */
+    minRows?: number;
+    /** Maximum visible lines before scrolling. Default 12. */
+    maxRows?: number;
+    /** Marks the field invalid outside of a <Field>. */
+    invalid?: boolean;
+}
+/**
+ * Multi-line text field. Auto-grows with CSS `field-sizing: content` and falls back to measuring
+ * `scrollHeight` where unsupported. Works inside <Field> for labels and validation. What a person
+ * writes takes its direction from its first letter (`dir="auto"`), so an English note reads left to
+ * right in a right-to-left interface; pass `dir` to fix it.
+ */
+export declare function Textarea({ ref, variant, size, autoGrow, minRows, maxRows, invalid, value, defaultValue, onValueChange, disabled, id, name, autoFocus, className, style, ...rest }: TextareaProps): import("react").JSX.Element;
+export {};

package/dist/components/textarea.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field as BaseField } from "@base-ui/react/field";
+import { useCallback, useLayoutEffect, useRef, } from "react";
+import { cn, tv } from "../lib/cn.js";
+import { givenControlProps } from "../lib/control-props.js";
+import { fieldChrome } from "./input.js";
+const textareaStyles = tv({
+    base: [
+        "block w-full min-w-0 resize-none bg-transparent text-fg outline-none placeholder:text-fg-subtle",
+        // iOS zooms into a field whose text is under 16 px; touch screens get 16 px.
+        "pointer-coarse:text-[1rem]",
+        "focus-visible:outline-none disabled:pointer-events-none disabled:opacity-45",
+        "overflow-y-auto overscroll-contain",
+    ],
+    variants: {
+        variant: {
+            /** Framed field, same chrome as Input. */
+            default: [
+                fieldChrome,
+                "focus:border-border-strong focus:ring-3",
+                "read-only:bg-bg-subtle read-only:shadow-none",
+            ],
+            /** No chrome: embed inside a custom container, such as a message field with its own toolbar. */
+            bare: "rounded-none border-0 p-0 shadow-none",
+        },
+        size: {
+            sm: "rounded-md px-2 py-[3px] text-sm",
+            md: "rounded-lg px-2.5 py-1 text-base",
+            lg: "rounded-xl px-3 py-[7px] text-md",
+        },
+        autoGrow: { true: "field-sizing-content", false: "resize-y" },
+    },
+    compoundVariants: [{ variant: "bare", class: "rounded-none p-0" }],
+    defaultVariants: { variant: "default", size: "md", autoGrow: true },
+});
+/** Vertical padding + borders per size, so `minRows`/`maxRows` map to exact pixel heights. */
+const CHROME_PX = { sm: 8, md: 10, lg: 16 };
+const supportsFieldSizing = () => typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("field-sizing", "content");
+function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+/**
+ * Multi-line text field. Auto-grows with CSS `field-sizing: content` and falls back to measuring
+ * `scrollHeight` where unsupported. Works inside <Field> for labels and validation. What a person
+ * writes takes its direction from its first letter (`dir="auto"`), so an English note reads left to
+ * right in a right-to-left interface; pass `dir` to fix it.
+ */
+export function Textarea({ ref, variant = "default", size = "md", autoGrow = true, minRows, maxRows = 12, invalid, value, defaultValue, onValueChange, disabled, id, name, autoFocus, className, style, ...rest }) {
+    const innerRef = useRef(null);
+    const resolvedSize = size ?? "md";
+    const chrome = variant === "bare" ? 0 : CHROME_PX[resolvedSize];
+    const min = Math.max(1, minRows ?? (variant === "bare" ? 1 : 3));
+    const max = Math.max(min, maxRows);
+    const resize = useCallback(() => {
+        const el = innerRef.current;
+        if (!el || !autoGrow || supportsFieldSizing())
+            return;
+        el.style.height = "auto";
+        const borders = el.offsetHeight - el.clientHeight;
+        el.style.height = `${el.scrollHeight + borders}px`;
+    }, [autoGrow]);
+    // Fallback path only: re-measure when a controlled value changes from the outside.
+    useLayoutEffect(() => {
+        if (value !== undefined)
+            resize();
+    }, [value, resize]);
+    useLayoutEffect(() => {
+        resize();
+    }, [resize]);
+    const setRef = useCallback((node) => {
+        const el = node instanceof HTMLTextAreaElement ? node : null;
+        innerRef.current = el;
+        assignRef(ref, el);
+    }, [ref]);
+    const sizing = autoGrow
+        ? { minHeight: `calc(${min}lh + ${chrome}px)`, maxHeight: `calc(${max}lh + ${chrome}px)` }
+        : {};
+    return (_jsx(BaseField.Control, { ref: setRef, ...givenControlProps({ value, defaultValue, disabled, id, name, autoFocus }), onValueChange: (next) => {
+            onValueChange?.(next);
+            resize();
+        }, 
+        // Element form: Base UI merges its control props (and chains handlers) into the textarea.
+        // The callback form would round-trip `rest` through mergeProps' mapped type, which breaks
+        // consumers with exactOptionalPropertyTypes plus JSX augmentations (e.g. Next's `tw`).
+        render: _jsx("textarea", { dir: "auto", ...rest, "data-slot": "textarea", ...(invalid === true ? { "aria-invalid": true } : {}), rows: autoGrow ? 1 : min, style: { ...sizing, ...style }, className: cn(textareaStyles({ variant, size, autoGrow }), className) }) }));
+}

package/dist/components/toast.d.ts

@@ -0,0 +1,74 @@
+import type { MouseEvent, ReactNode } from "react";
+export type ToastKind = "default" | "success" | "error" | "warning" | "info" | "loading";
+export type ToastId = string | number;
+export interface ToastButton {
+    label: ReactNode;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+/** Options accepted by every `toast.*` call. */
+export interface ToastOptions {
+    /** Re-using an id replaces that toast in place (and restarts its timer) instead of stacking. */
+    id?: ToastId | undefined;
+    description?: ReactNode;
+    /** Primary ink button. The toast closes after it runs unless the handler calls `preventDefault()`. */
+    action?: ToastButton | undefined;
+    /** Quiet secondary button; the toast closes after it runs. */
+    cancel?: ToastButton | undefined;
+    /** Milliseconds before it dismisses itself; `0` or `Infinity` keeps it until dismissed. */
+    duration?: number | undefined;
+    /** Announce assertively (interrupts the screen reader). Default: polite. */
+    important?: boolean | undefined;
+}
+type PromiseMessage<T> = ReactNode | ((value: T) => ReactNode);
+export interface ToastPromiseMessages<T> {
+    loading: ReactNode;
+    success: PromiseMessage<T>;
+    error: PromiseMessage<unknown>;
+}
+/**
+ * `toast("Changes saved")`, `toast.success`, `.error`, `.warning`, `.info`, `.loading`,
+ * `.promise(fetchThing(), { loading, success, error })`, `toast.dismiss(id)`. Needs one mounted
+ * `<Toaster />`.
+ */
+export declare const toast: ((title: ReactNode, options?: ToastOptions) => ToastId) & {
+    success: (title: ReactNode, options?: ToastOptions) => ToastId;
+    error: (title: ReactNode, options?: ToastOptions) => ToastId;
+    warning: (title: ReactNode, options?: ToastOptions) => ToastId;
+    info: (title: ReactNode, options?: ToastOptions) => ToastId;
+    loading: (title: ReactNode, options?: ToastOptions) => ToastId;
+    /**
+     * One toast that follows the promise: loading, then success or error. Fire and forget: the
+     * caller still owns `promise` and its rejection.
+     */
+    promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>, options?: ToastOptions) => void;
+    /** Dismisses one toast, or every toast without an id. */
+    dismiss: (id?: ToastId) => void;
+};
+/** Bottom corners only: a toast at the top covers pane headers and tab bars. */
+export type ToastPosition = "bottom-end" | "bottom-start" | "bottom-center";
+type Inset = number | string;
+/** Insets from the window edges. Numbers are px. */
+export type ToastOffset = Inset | {
+    readonly bottom?: Inset | undefined;
+    readonly end?: Inset | undefined;
+};
+export interface ToasterProps {
+    /** Default `bottom-end`. */
+    position?: ToastPosition | undefined;
+    /**
+     * Distance from the window edges (default 16 px). Same as setting `--toast-inset-bottom` /
+     * `--toast-inset-x` in CSS; raise the bottom one to clear a docked toolbar or status bar.
+     */
+    offset?: ToastOffset | undefined;
+    /** Default auto-dismiss in ms (default 4000); `toast(…, { duration })` overrides per toast. */
+    duration?: number | undefined;
+    className?: string | undefined;
+}
+/**
+ * Mount once near the app root. Bottom-end by default, raised surfaces, semantic icons, swipe
+ * or ✕ to dismiss, F6 to reach the stack from the keyboard; announced politely. The viewport sits on
+ * the `toast` layer, under `overlay` (dialogs, popovers), so a modal's backdrop covers the stack and
+ * its close button always stays clickable. Fire toasts with `toast(...)`.
+ */
+export declare function Toaster({ position, offset, duration, className }: ToasterProps): import("react").JSX.Element;
+export {};

package/dist/components/toast.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { buttonStyles } from "./button.js";
+import { Spinner } from "./spinner.js";
+// Not locale-bound: it only queues what callers pass. The <Toaster> renders it in its locale.
+const manager = BaseToast.createToastManager();
+function addOptions(kind, title, options = {}) {
+    const { id, description, action, cancel, duration, important } = options;
+    const timeout = duration === undefined ? (kind === "loading" ? 0 : undefined) : duration;
+    return {
+        ...(id !== undefined && { id: String(id) }),
+        title,
+        type: kind,
+        ...(description !== undefined && { description }),
+        ...(timeout !== undefined && { timeout: Number.isFinite(timeout) ? timeout : 0 }),
+        priority: important === true ? "high" : "low",
+        data: { action, cancel },
+    };
+}
+const show = (kind) => (title, options) => manager.add(addOptions(kind, title, options));
+const resolveMessage = (message, value) => typeof message === "function" ? message(value) : message;
+/**
+ * `toast("Changes saved")`, `toast.success`, `.error`, `.warning`, `.info`, `.loading`,
+ * `.promise(fetchThing(), { loading, success, error })`, `toast.dismiss(id)`. Needs one mounted
+ * `<Toaster />`.
+ */
+export const toast = Object.assign(show("default"), {
+    success: show("success"),
+    error: show("error"),
+    warning: show("warning"),
+    info: show("info"),
+    loading: show("loading"),
+    /**
+     * One toast that follows the promise: loading, then success or error. Fire and forget: the
+     * caller still owns `promise` and its rejection.
+     */
+    promise: (promise, messages, options) => {
+        // The promise owns one toast, so per-state options can't carry an id.
+        const { id: _id, ...rest } = options ?? {};
+        const state = (kind, title) => {
+            const { id: _ignored, ...update } = addOptions(kind, title, rest);
+            return update;
+        };
+        manager
+            .promise(promise, {
+            loading: state("loading", messages.loading),
+            success: (value) => state("success", resolveMessage(messages.success, value)),
+            error: (error) => state("error", resolveMessage(messages.error, error)),
+        })
+            .catch(() => undefined);
+    },
+    /** Dismisses one toast, or every toast without an id. */
+    dismiss: (id) => manager.close(id === undefined ? undefined : String(id)),
+});
+/* ------------------------------------------------------------------------------------------ */
+/* Toaster                                                                                    */
+/* ------------------------------------------------------------------------------------------ */
+const ICONS = {
+    default: null,
+    success: _jsx(CircleCheck, { "aria-hidden": true, className: "size-4 text-success-fg" }),
+    error: _jsx(CircleAlert, { "aria-hidden": true, className: "size-4 text-danger-fg" }),
+    warning: _jsx(TriangleAlert, { "aria-hidden": true, className: "size-4 text-warning-fg" }),
+    info: _jsx(Info, { "aria-hidden": true, className: "size-4 text-info-fg" }),
+    loading: _jsx(Spinner, { size: "md", className: "text-fg-muted" }),
+};
+const isKind = (type) => type !== undefined && Object.hasOwn(ICONS, type);
+/** Stack geometry from Base UI's variables: the front toast sits at the bottom, the rest peek above. */
+const ROOT_CLASS = cn("group/toast absolute inset-x-0 bottom-0 origin-bottom select-none", "flex items-start gap-2.5 rounded-xl p-3 pe-3.5 text-base text-fg surface-raised", "[--gap:0.5rem] [--peek:0.5rem] [--scale:calc(max(0,1-(var(--toast-index)*0.05)))] [--shrink:calc(1-var(--scale))]", "[--height:var(--toast-frontmost-height,var(--toast-height))]", "[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "z-[calc(100-var(--toast-index))] h-(--height) data-expanded:h-(--toast-height)", "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]", "data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", 
+// The hover bridge between stacked toasts, so the stack doesn't collapse while moving across gaps.
+"after:absolute after:top-full after:start-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']", "data-starting-style:[transform:translateY(150%)] data-limited:opacity-0 data-ending-style:opacity-0", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "[transition:transform_var(--duration-spring-smooth)_var(--ease-spring-smooth),opacity_var(--duration-base)]", "motion-reduce:[transition:opacity_var(--duration-fast)]", "outline-none focus-visible:ring-focus");
+function ToastItem({ toast: item }) {
+    const t = useUiStrings().toast;
+    const kind = isKind(item.type) ? item.type : "default";
+    const { action, cancel } = item.data ?? {};
+    const run = (button) => (event) => {
+        button.onClick(event);
+        if (!event.defaultPrevented)
+            manager.close(item.id);
+    };
+    return (_jsx(BaseToast.Root, { toast: item, "data-slot": "toast", "data-kind": kind, className: ROOT_CLASS, children: _jsxs(BaseToast.Content, { className: "flex min-w-0 flex-1 items-start gap-2.5 overflow-hidden transition-opacity duration-(--duration-base) data-behind:opacity-0 data-expanded:opacity-100", children: [ICONS[kind] !== null && (_jsx("span", { className: "relative mt-0.5 flex size-4 shrink-0 items-center justify-center", children: ICONS[kind] })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(BaseToast.Title, { className: "font-medium leading-5 text-fg" }), _jsx(BaseToast.Description, { render: _jsx("div", {}), className: "text-sm text-fg-muted text-pretty" })] }), (cancel !== undefined || action !== undefined) && (_jsxs("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 self-center", children: [cancel !== undefined && (_jsx("button", { type: "button", className: buttonStyles({ variant: "ghost", size: "xs" }), onClick: run(cancel), children: cancel.label })), action !== undefined && (_jsx(BaseToast.Action, { className: buttonStyles({ variant: "primary", size: "xs" }), onClick: run(action), children: action.label }))] })), _jsx(BaseToast.Close, { "aria-label": t.close, className: cn("absolute -top-1.5 -start-1.5 z-10 grid size-5 place-items-center rounded-full", "border border-border bg-surface-raised text-fg-muted shadow-xs outline-none", "opacity-0 transition-opacity duration-(--duration-fast) group-hover/toast:opacity-100 focus-visible:opacity-100", "hover:text-fg focus-visible:ring-focus"), children: _jsx(X, { "aria-hidden": true, className: "size-3" }) })] }) }));
+}
+function ToastList() {
+    const { toasts } = BaseToast.useToastManager();
+    return toasts.map((item) => _jsx(ToastItem, { toast: item }, item.id));
+}
+const length = (value) => (typeof value === "number" ? `${value}px` : value);
+function insetVars(offset) {
+    if (offset === undefined)
+        return {};
+    if (typeof offset === "number" || typeof offset === "string") {
+        return { "--toast-inset-bottom": length(offset), "--toast-inset-x": length(offset) };
+    }
+    const x = offset.end;
+    return {
+        ...(offset.bottom !== undefined && { "--toast-inset-bottom": length(offset.bottom) }),
+        ...(x !== undefined && { "--toast-inset-x": length(x) }),
+    };
+}
+function placement(position) {
+    switch (position) {
+        case "bottom-start":
+            return "start-(--toast-inset-x)";
+        case "bottom-center":
+            return "left-1/2 -translate-x-1/2";
+        case "bottom-end":
+            return "end-(--toast-inset-x)";
+        default: {
+            const never = position;
+            return never;
+        }
+    }
+}
+/**
+ * Mount once near the app root. Bottom-end by default, raised surfaces, semantic icons, swipe
+ * or ✕ to dismiss, F6 to reach the stack from the keyboard; announced politely. The viewport sits on
+ * the `toast` layer, under `overlay` (dialogs, popovers), so a modal's backdrop covers the stack and
+ * its close button always stays clickable. Fire toasts with `toast(...)`.
+ */
+export function Toaster({ position = "bottom-end", offset, duration = 4000, className }) {
+    const container = usePortalContainer();
+    const t = useUiStrings().toast;
+    return (_jsx(BaseToast.Provider, { toastManager: manager, limit: 4, timeout: duration, children: _jsx(BaseToast.Portal, { container: container, children: _jsx(BaseToast.Viewport, { "data-slot": "toaster", "data-position": position, "aria-label": t.notifications, className: cn("fixed z-(--z-toast) font-sans outline-none [--toast-inset-bottom:1rem] [--toast-inset-x:1rem]", "bottom-[calc(var(--toast-inset-bottom)+env(safe-area-inset-bottom))]", "w-[min(22.5rem,calc(100vw-2*var(--toast-inset-x)))]", placement(position), className), style: insetVars(offset), children: _jsx(ToastList, {}) }) }) }));
+}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,50 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+/** Wrap the app once: tooltips opened in quick succession skip their delay. */
+export declare function TooltipProvider({ delay, closeDelay, ...props }: ComponentProps<typeof BaseTooltip.Provider>): import("react").JSX.Element;
+export interface TooltipContentProps extends ComponentProps<typeof BaseTooltip.Popup> {
+    side?: ComponentProps<typeof BaseTooltip.Positioner>["side"];
+    align?: ComponentProps<typeof BaseTooltip.Positioner>["align"];
+    sideOffset?: number;
+}
+export declare function TooltipContent({ side, align, sideOffset, className, ...props }: TooltipContentProps): import("react").JSX.Element;
+export interface TooltipProps {
+    /** Tooltip text. */
+    content: ReactNode;
+    /**
+     * The action this control triggers: its keys, from the host's keymap (`ShortcutProvider`), show
+     * after the text, and nothing shows when it has no binding. Prefer it to `shortcut`.
+     */
+    action?: string;
+    /** Keys shown after the text when there is no `action` (keys the caller already read from the keymap). */
+    shortcut?: readonly string[];
+    /** The trigger element; must accept a ref and DOM props (e.g. <IconButton>). */
+    children: ReactElement;
+    side?: TooltipContentProps["side"];
+    align?: TooltipContentProps["align"];
+    disabled?: boolean;
+}
+/** Keycaps styled for the tooltip's dark popup (a tooltip that lists several actions uses one per row). */
+export declare function TooltipKeys({ keys }: {
+    readonly keys: readonly string[];
+}): import("react").JSX.Element;
+/**
+ * What a control with a `disabledReason` adds to the disabled look: it still takes the pointer, so its
+ * tooltip opens on hover, and it doesn't press.
+ */
+export declare const disabledReasonClass = "data-disabled:pointer-events-auto data-disabled:active:scale-100";
+/**
+ * A disabled control that says why (`disabledReason` on Button, IconButton and SegmentedControlItem):
+ * the reason is its tooltip and its accessible description. The control stays focusable
+ * (`aria-disabled`), so a keyboard reaches the reason too.
+ */
+export declare function DisabledReasonTooltip({ reason, children, }: {
+    readonly reason: string;
+    /** The disabled control; must accept a ref and DOM props. */
+    readonly children: ReactElement;
+}): import("react").JSX.Element;
+/**
+ * Convenience wrapper: `<Tooltip content="Copy" shortcut={["mod","c"]}><IconButton …/></Tooltip>`.
+ * A `shortcut` also sets `aria-keyshortcuts` on the trigger; the keycaps in the popup are hidden.
+ */
+export declare function Tooltip({ content, action, shortcut: given, children, side, align, disabled }: TooltipProps): import("react").JSX.Element;

package/dist/components/tooltip.js

@@ -0,0 +1,46 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { useId } from "react";
+import { cn, resolveClassName } from "../lib/cn.js";
+import { keyShortcutsProps } from "../lib/keys.js";
+import { useShortcut } from "../lib/shortcut-context.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Shortcut } from "./kbd.js";
+/** Wrap the app once: tooltips opened in quick succession skip their delay. */
+export function TooltipProvider({ delay = 450, closeDelay = 0, ...props }) {
+    return _jsx(BaseTooltip.Provider, { delay: delay, closeDelay: closeDelay, ...props });
+}
+export function TooltipContent({ side = "top", align = "center", sideOffset = 6, className, ...props }) {
+    const container = usePortalContainer();
+    return (_jsx(BaseTooltip.Portal, { container: container, children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: sideOffset, className: "z-(--z-tooltip)", children: _jsx(BaseTooltip.Popup, { "data-slot": "tooltip", className: (state) => cn("popup-motion flex max-w-72 items-center gap-2 rounded-md px-2 py-1 text-xs font-medium", "bg-gray-12 text-gray-1 shadow-md data-instant:transition-none", resolveClassName(className, state)), ...props }) }) }));
+}
+/** Keycaps styled for the tooltip's dark popup (a tooltip that lists several actions uses one per row). */
+export function TooltipKeys({ keys }) {
+    return (_jsx(Shortcut, { keys: keys, size: "sm", className: "[&_kbd]:border-transparent [&_kbd]:bg-gray-11/30 [&_kbd]:text-gray-1 [&_kbd]:shadow-none" }));
+}
+/**
+ * What a control with a `disabledReason` adds to the disabled look: it still takes the pointer, so its
+ * tooltip opens on hover, and it doesn't press.
+ */
+export const disabledReasonClass = "data-disabled:pointer-events-auto data-disabled:active:scale-100";
+/**
+ * A disabled control that says why (`disabledReason` on Button, IconButton and SegmentedControlItem):
+ * the reason is its tooltip and its accessible description. The control stays focusable
+ * (`aria-disabled`), so a keyboard reaches the reason too.
+ */
+export function DisabledReasonTooltip({ reason, children, }) {
+    const descriptionId = useId();
+    return (_jsxs(_Fragment, { children: [_jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children, "aria-describedby": descriptionId }), _jsx(TooltipContent, { children: _jsx("span", { children: reason }) })] }), _jsx("span", { id: descriptionId, hidden: true, children: reason })] }));
+}
+/**
+ * Convenience wrapper: `<Tooltip content="Copy" shortcut={["mod","c"]}><IconButton …/></Tooltip>`.
+ * A `shortcut` also sets `aria-keyshortcuts` on the trigger; the keycaps in the popup are hidden.
+ */
+export function Tooltip({ content, action, shortcut: given, children, side, align, disabled }) {
+    const bound = useShortcut(action);
+    const shortcut = bound ?? given;
+    if (disabled)
+        return children;
+    return (_jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children, ...keyShortcutsProps(shortcut) }), _jsxs(TooltipContent, { ...(side && { side }), ...(align && { align }), children: [_jsx("span", { children: content }), shortcut && _jsx(TooltipKeys, { keys: shortcut })] })] }));
+}

package/dist/components/truncated-text.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type TooltipContentProps } from "./tooltip.js";
+export interface TruncatedTextProps extends Omit<ComponentProps<"span">, "children"> {
+    /** The text; cut to one line with an ellipsis when it doesn't fit. */
+    readonly children: ReactNode;
+    /** What the tooltip shows (default: the text itself). */
+    readonly full?: ReactNode;
+    readonly side?: TooltipContentProps["side"];
+}
+/**
+ * One line of text that truncates with an ellipsis when its box is too narrow, and then shows the
+ * whole of it in a tooltip on hover. Text that fits has no tooltip. Screen readers always get the
+ * full text (the cut is visual). Use it for names and titles that must stay on one line.
+ */
+export declare function TruncatedText({ children, full, side, className, ...props }: TruncatedTextProps): import("react").JSX.Element;