@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/radio.js

@@ -0,0 +1,54 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+/** Single choice from a set of <Radio>/<RadioCard>. Arrow keys move the selection. */
+export function RadioGroup({ orientation = "vertical", className, ...props }) {
+    return (_jsx(BaseRadioGroup, { "data-slot": "radio-group", className: (state) => cn("flex", orientation === "vertical" ? "flex-col gap-2.5" : "flex-row flex-wrap gap-x-5 gap-y-2.5", resolveClassName(className, state)), ...props }));
+}
+const radioStyles = tv({
+    base: [
+        "group/radio relative inline-flex shrink-0 items-center justify-center rounded-full outline-none touch-target",
+        "border border-border-strong bg-surface shadow-xs",
+        "transition-[border-color,box-shadow,scale] duration-(--duration-fast) ease-(--ease-standard)",
+        "hover:border-fg-subtle active:scale-90 motion-reduce:active:scale-100",
+        "focus-visible:ring-focus",
+        "data-checked:border-primary data-checked:hover:border-primary-hover",
+        "data-invalid:data-unchecked:border-danger-border",
+        "data-disabled:pointer-events-none data-disabled:opacity-45 data-readonly:pointer-events-none",
+    ],
+    variants: {
+        size: {
+            sm: "size-3.5",
+            md: "size-4",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/** The ink dot; springs in from nothing when checked. */
+const dotClass = cn("block rounded-full bg-primary", "transition-[scale,opacity] duration-(--duration-spring-snappy) ease-(--ease-spring-bouncy)", "data-unchecked:scale-0 data-unchecked:opacity-0 data-unchecked:duration-(--duration-fast) data-unchecked:ease-(--ease-in)", "motion-reduce:transition-none");
+export function Radio({ size, label, description, className, ...props }) {
+    const control = (_jsx(BaseRadio.Root, { "data-slot": "radio", className: (state) => cn(radioStyles({ size }), (label !== undefined || description !== undefined) && "mt-[3px]", resolveClassName(className, state)), ...props, children: _jsx(BaseRadio.Indicator, { keepMounted: true, className: cn(dotClass, size === "sm" ? "size-1.5" : "size-2") }) }));
+    if (label === undefined && description === undefined)
+        return control;
+    return (_jsxs("label", { "data-slot": "radio-label", className: "inline-flex max-w-full cursor-default select-none items-start gap-2 has-data-disabled:opacity-45", children: [control, _jsxs("span", { className: "flex min-w-0 flex-col", children: [label !== undefined && _jsx("span", { className: "text-base text-fg", children: label }), description !== undefined && _jsx("span", { className: "text-sm text-fg-subtle", children: description })] })] }));
+}
+/** A whole card as one radio — for weighty choices like permission modes, or ones best shown (a theme). */
+export function RadioCard({ label, description, icon, trailing, preview, previewSide = "top", className, ...props }) {
+    const content = (_jsxs(_Fragment, { children: [icon !== undefined && (_jsx("span", { "aria-hidden": true, className: "mt-0.5 flex size-4 shrink-0 items-center justify-center text-fg-subtle transition-colors group-data-checked/radio-card:text-fg [&_svg]:size-4", children: icon })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-base font-medium text-pretty break-words text-fg", children: label }), description !== undefined && (_jsx("span", { className: "text-sm text-pretty break-words text-fg-subtle", children: description }))] }), trailing, _jsx("span", { "aria-hidden": true, className: cn(radioStyles({ size: "md" }), "pointer-events-none mt-[3px] group-hover/radio-card:border-fg-subtle", "group-data-checked/radio-card:border-primary"), children: _jsx(BaseRadio.Indicator, { keepMounted: true, className: cn(dotClass, "size-2") }) })] }));
+    return (_jsx(BaseRadio.Root, { "data-slot": "radio-card", className: (state) => cn("group/radio-card relative flex w-full cursor-default select-none rounded-xl text-start outline-none", preview === undefined
+            ? "items-start gap-3 p-3"
+            : previewSide === "auto"
+                ? "@container/radio-card overflow-hidden"
+                : "flex-col overflow-hidden", "border border-border bg-surface shadow-xs", "transition-[border-color,background-color,box-shadow] duration-(--duration-fast) ease-(--ease-standard)", "hover:border-border-strong hover:bg-bg-subtle", "focus-visible:ring-focus", "data-checked:border-primary data-checked:bg-surface data-checked:[box-shadow:var(--shadow-sm),inset_0_0_0_0.5px_var(--primary)]", "data-disabled:pointer-events-none data-disabled:opacity-45 data-readonly:pointer-events-none", resolveClassName(className, state)), ...props, children: preview === undefined ? (content) : previewSide === "auto" ? (_jsxs("span", { className: "flex w-full flex-col @sm/radio-card:flex-row", children: [_jsx("span", { "aria-hidden": true, "data-slot": "radio-card-preview", className: "block border-b border-border-subtle @sm/radio-card:w-32 @sm/radio-card:shrink-0 @sm/radio-card:border-e @sm/radio-card:border-b-0", children: preview }), _jsx("span", { className: "flex min-w-0 flex-1 items-start gap-3 px-3 py-2.5", children: content })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, "data-slot": "radio-card-preview", className: "block border-b border-border-subtle", children: preview }), _jsx("span", { className: "flex items-start gap-3 px-3 py-2.5", children: content })] })) }));
+}
+/**
+ * One choice shown as what it looks like — a colour or a picture — in a `RadioGroup`: a real radio
+ * (arrow keys move the choice, one tab stop), the chosen one outlined. Name each by `label`.
+ */
+export function RadioSwatch({ label, color, children, size = "md", className, ...props }) {
+    return (_jsxs(BaseRadio.Root, { "data-slot": "radio-swatch", "aria-label": label, className: (state) => cn("relative inline-flex shrink-0 items-center justify-center rounded-full touch-target", "transition-[scale,box-shadow] duration-(--duration-fast) ease-(--ease-standard)", "hover:scale-110 motion-reduce:hover:scale-100", 
+        // The chosen one is ringed in ink; focus is the outline beyond it, so both show at once.
+        "data-checked:ring-2 data-checked:ring-primary", "outline-none focus-visible:ring-focus", "data-disabled:pointer-events-none data-disabled:opacity-45 data-readonly:pointer-events-none", resolveClassName(className, state)), ...props, children: [color !== undefined && (_jsx("span", { "aria-hidden": true, className: cn("block rounded-full inset-ring inset-ring-border", size === "sm" ? "size-4" : "size-5"), style: { background: color } })), children] }));
+}

package/dist/components/remote-image-gate.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+/**
+ * The host of a remote http(s) image, or undefined when it loads without leaving this page.
+ * `data:image/svg+xml` counts as local: safe only because it is rendered as `<img>` (no scripts, no
+ * external refs). Rendering SVG inline, via `<object>` or CSS, would need its own guard.
+ */
+export declare function remoteImageHost(src: string, base?: string): string | undefined;
+export interface RemoteImageGateProps {
+    /** The image's `src`. */
+    src: string;
+    /** The image's alt text; names the placeholder when present. */
+    alt: string;
+    /** Remote hosts trusted to load on render. */
+    allowHosts?: ReadonlySet<string> | undefined;
+    /** The <img> to render once allowed. */
+    children: ReactNode;
+}
+/**
+ * A remote image waits for the reader: untrusted content (generated or pasted markdown,
+ * a url-kind image part) must not fetch — and leak — the moment it renders, on any surface, CSP or
+ * not. Same-origin, relative, data: and blob: images render at once; a cross-origin http(s) one shows
+ * what it is and where from, and "Load image" fetches it on purpose.
+ */
+export declare function RemoteImageGate({ src, alt, allowHosts, children }: RemoteImageGateProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/**
+ * A remote image where the page may not load one (a page whose CSP keeps other sites' images out,
+ * so a message can't fetch, and leak, anything by rendering): what it is and where it lives, and
+ * the link to open it in the browser.
+ */
+export declare function RemoteImageCard({ src, alt, host }: {
+    src: string;
+    alt: string;
+    host: string;
+}): import("react").JSX.Element;

package/dist/components/remote-image-gate.js

@@ -0,0 +1,60 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ImageOff } from "lucide-react";
+import { useState } from "react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { cardStyles } from "./card.js";
+import { ExternalLinkCheck, useLinkPolicy } from "./link-policy.js";
+import { TextLink } from "./text-link.js";
+/**
+ * The host of a remote http(s) image, or undefined when it loads without leaving this page.
+ * `data:image/svg+xml` counts as local: safe only because it is rendered as `<img>` (no scripts, no
+ * external refs). Rendering SVG inline, via `<object>` or CSS, would need its own guard.
+ */
+export function remoteImageHost(src, base) {
+    if (/^(?:data:image\/|blob:)/iu.test(src))
+        return undefined;
+    let url;
+    try {
+        url = new URL(src, base ?? globalThis.location?.href ?? "about:blank");
+    }
+    catch {
+        return undefined;
+    }
+    if (url.protocol !== "http:" && url.protocol !== "https:")
+        return undefined;
+    const origin = globalThis.location?.origin;
+    return origin !== undefined && url.origin === origin ? undefined : url.host;
+}
+/**
+ * A remote image waits for the reader: untrusted content (generated or pasted markdown,
+ * a url-kind image part) must not fetch — and leak — the moment it renders, on any surface, CSP or
+ * not. Same-origin, relative, data: and blob: images render at once; a cross-origin http(s) one shows
+ * what it is and where from, and "Load image" fetches it on purpose.
+ */
+export function RemoteImageGate({ src, alt, allowHosts, children }) {
+    const t = useUiStrings().markdown;
+    const [loaded, setLoaded] = useState(false);
+    const host = remoteImageHost(src);
+    if (host === undefined || loaded || allowHosts?.has(host) === true)
+        return children;
+    return (_jsxs("span", { "data-slot": "remote-image", className: cn(cardStyles({ variant: "inset", size: "flush" }), "inline-flex max-w-full flex-row items-center gap-2 px-3 py-2 align-middle text-sm"), children: [_jsx(ImageOff, { "aria-hidden": true, className: "size-4 shrink-0 text-fg-subtle" }), _jsx("span", { className: "min-w-0 truncate text-fg-muted", children: alt === "" ? t.remoteImage({ host }) : t.remoteImageNamed({ alt, host }) }), _jsx(TextLink, { tone: "plain", className: "shrink-0 px-1 font-medium text-fg", render: _jsx("button", { type: "button" }), onClick: () => setLoaded(true), children: t.loadImage })] }));
+}
+/**
+ * A remote image where the page may not load one (a page whose CSP keeps other sites' images out,
+ * so a message can't fetch, and leak, anything by rendering): what it is and where it lives, and
+ * the link to open it in the browser.
+ */
+export function RemoteImageCard({ src, alt, host }) {
+    const t = useUiStrings().imageViewer;
+    // Under `check`, the image's whole address shows before it opens: its words are never the address.
+    const policy = useLinkPolicy();
+    const open = (onCheck) => (_jsx(TextLink, { tone: "plain", href: src, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 px-1 font-medium text-fg", ...(onCheck !== undefined && {
+            onClick: (event) => {
+                event.preventDefault();
+                onCheck();
+            },
+        }), children: t.openInBrowser }));
+    return (_jsxs("span", { "data-slot": "remote-image", className: cn(cardStyles({ variant: "inset", size: "flush" }), "inline-flex max-w-full flex-row items-center gap-2 px-3 py-2 align-middle text-sm"), children: [_jsx(ImageOff, { "aria-hidden": true, className: "size-4 shrink-0 text-fg-subtle" }), alt === "" ? (_jsx("span", { className: "shrink-0 text-fg-muted", children: t.remote({ host }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate text-fg-muted", children: alt }), _jsx("span", { className: "shrink-0 text-fg-muted", children: t.remoteHost({ host }) })] })), policy === "check" ? _jsx(ExternalLinkCheck, { href: src, trigger: open }) : open()] }));
+}

package/dist/components/resizable.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { Group, Panel, Separator } from "react-resizable-panels";
+export type { GroupImperativeHandle as ResizableGroupHandle, Layout as ResizableLayout, PanelImperativeHandle as ResizablePanelHandle, PanelSize as ResizablePanelSize, } from "react-resizable-panels";
+export { 
+/** Persist a group's layout (e.g. to localStorage): spread the result onto ResizablePanelGroup. */
+useDefaultLayout as useResizableLayout, useGroupRef as useResizableGroupRef, usePanelRef as useResizablePanelRef, } from "react-resizable-panels";
+/** Lays out panels side by side (`horizontal`) or stacked (`vertical`). */
+export declare function ResizablePanelGroup({ orientation, className, ...props }: ComponentProps<typeof Group>): import("react").JSX.Element;
+/**
+ * One resizable region. Sizes: numbers are px, unitless strings are %, or use explicit units
+ * (`"240px"`, `"30%"`, `"16rem"`).
+ */
+export declare function ResizablePanel({ className, ...props }: ComponentProps<typeof Panel>): import("react").JSX.Element;
+export interface ResizableHandleProps extends ComponentProps<typeof Separator> {
+    /** Show the grip pill at rest, not only on hover/drag. */
+    withGrip?: boolean;
+}
+/**
+ * Hairline divider that thickens and reveals a grip on hover, focus and drag. Keyboard: focus and
+ * use arrow keys (Home/End jump to min/max). Double-click resets the neighbouring panel to its
+ * default size.
+ */
+export declare function ResizableHandle({ withGrip, className, ...props }: ResizableHandleProps): import("react").JSX.Element;

package/dist/components/resizable.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group, Panel, Separator } from "react-resizable-panels";
+import { cn } from "../lib/cn.js";
+export { 
+/** Persist a group's layout (e.g. to localStorage): spread the result onto ResizablePanelGroup. */
+useDefaultLayout as useResizableLayout, useGroupRef as useResizableGroupRef, usePanelRef as useResizablePanelRef, } from "react-resizable-panels";
+/** Lays out panels side by side (`horizontal`) or stacked (`vertical`). */
+export function ResizablePanelGroup({ orientation = "horizontal", className, ...props }) {
+    return (_jsx(Group, { "data-slot": "resizable-group", orientation: orientation, resizeTargetMinimumSize: { fine: 9, coarse: 28 }, className: cn("size-full", className), ...props }));
+}
+/**
+ * One resizable region. Sizes: numbers are px, unitless strings are %, or use explicit units
+ * (`"240px"`, `"30%"`, `"16rem"`).
+ */
+export function ResizablePanel({ className, ...props }) {
+    return _jsx(Panel, { "data-slot": "resizable-panel", className: cn("min-h-0 min-w-0", className), ...props });
+}
+/**
+ * Hairline divider that thickens and reveals a grip on hover, focus and drag. Keyboard: focus and
+ * use arrow keys (Home/End jump to min/max). Double-click resets the neighbouring panel to its
+ * default size.
+ */
+export function ResizableHandle({ withGrip = false, className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "resizable-handle", className: cn("group/handle relative flex shrink-0 items-center justify-center bg-border-subtle outline-none", 
+        // Hairline along the split axis. aria-orientation is the separator's own orientation.
+        "aria-[orientation=vertical]:w-px aria-[orientation=horizontal]:h-px", 
+        // The visible bar: grows from the hairline, sits above neighbours while active.
+        "before:pointer-events-none before:absolute before:z-10 before:rounded-full before:bg-transparent before:content-['']", "before:transition-[background-color,scale] before:duration-(--duration-spring-snappy) before:ease-(--ease-spring-snappy)", "aria-[orientation=vertical]:before:inset-y-0 aria-[orientation=vertical]:before:start-[-1px] aria-[orientation=vertical]:before:w-[3px] aria-[orientation=vertical]:before:scale-x-[0.34]", "aria-[orientation=horizontal]:before:inset-x-0 aria-[orientation=horizontal]:before:top-[-1px] aria-[orientation=horizontal]:before:h-[3px] aria-[orientation=horizontal]:before:scale-y-[0.34]", "data-[separator=hover]:before:scale-100 data-[separator=hover]:before:bg-border-strong", "data-[separator=active]:before:scale-100 data-[separator=active]:before:bg-fg-subtle", "data-[separator=focus]:before:scale-100 data-[separator=focus]:before:bg-focus", "data-[separator=disabled]:opacity-50", "motion-reduce:before:transition-none", className), ...props, children: _jsx("span", { "aria-hidden": true, className: cn("pointer-events-none z-20 flex items-center justify-center rounded-full border border-border bg-surface-raised shadow-xs", "transition-[opacity,scale] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy) motion-reduce:transition-none", "group-aria-[orientation=vertical]/handle:h-6 group-aria-[orientation=vertical]/handle:w-1.5", "group-aria-[orientation=horizontal]/handle:h-1.5 group-aria-[orientation=horizontal]/handle:w-6", withGrip ? "opacity-100" : "scale-75 opacity-0", "group-data-[separator=hover]/handle:scale-100 group-data-[separator=hover]/handle:opacity-100", "group-data-[separator=active]/handle:scale-100 group-data-[separator=active]/handle:opacity-100", "group-data-[separator=focus]/handle:scale-100 group-data-[separator=focus]/handle:opacity-100") }) }));
+}

package/dist/components/rolling-number.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentProps } from "react";
+export interface RollingTextProps extends Omit<ComponentProps<"span">, "children"> {
+    /** The formatted value ("3", "$2.07", "4 need you"); only the digits that change roll. */
+    readonly value: string;
+}
+/**
+ * A count or an amount whose changed digits roll in place: down when they're new, never moving the
+ * text around them (tabular figures). The words around a number stay one run of text, so letters
+ * keep their shapes and the sentence keeps its order. A number reads left to right in every
+ * language and is isolated as such: in a right-to-left sentence "12" stays "12". Screen readers get
+ * the plain value; under Reduce Motion the digits cross-fade.
+ */
+export declare function RollingText({ value, className, ...props }: RollingTextProps): import("react").JSX.Element;

package/dist/components/rolling-number.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import { useMemo } from "react";
+import { cn } from "../lib/cn.js";
+import { KitMotion } from "../lib/kit-motion.js";
+import { spring } from "../lib/motion.js";
+import { graphemesOf } from "../lib/text.js";
+const DIGIT = /^\p{Nd}$/u;
+/**
+ * One mark between two digits keeps them one number: a group or decimal mark ("1,234.5", "1 234,5",
+ * "١٬٢٣٤٫٥") or the punctuation of a time, a date or a range ("10:30", "2026-10-28", "3–5").
+ */
+const MARK = /^[\p{P}\p{Zs}]$/u;
+/** Written against the digits and part of the number: a sign, a currency symbol, a percent sign. */
+const AFFIX = /^[\p{Sc}\p{Pd}%‰‱+−]$/u;
+const isDigit = (grapheme) => grapheme !== undefined && DIGIT.test(grapheme);
+const isAffix = (grapheme) => grapheme !== undefined && AFFIX.test(grapheme);
+/**
+ * The value as numbers and the text between them, by grapheme, so a letter that joins its
+ * neighbours or a character outside the BMP stays whole. A number takes the marks between its
+ * digits and the sign or symbol written against it.
+ */
+function runsOf(value) {
+    const graphemes = graphemesOf(value);
+    const runs = [];
+    let text = [];
+    let index = 0;
+    while (index < graphemes.length) {
+        const grapheme = graphemes[index] ?? "";
+        if (!isDigit(grapheme)) {
+            text.push(grapheme);
+            index += 1;
+            continue;
+        }
+        const number = [];
+        while (isAffix(text.at(-1)))
+            number.unshift(text.pop() ?? "");
+        if (text.length > 0)
+            runs.push({ number: false, graphemes: text });
+        text = [];
+        for (; index < graphemes.length; index += 1) {
+            const next = graphemes[index] ?? "";
+            const joins = MARK.test(next) && isDigit(graphemes[index + 1]);
+            if (!isDigit(next) && !joins)
+                break;
+            number.push(next);
+        }
+        for (; isAffix(graphemes[index]); index += 1)
+            number.push(graphemes[index] ?? "");
+        runs.push({ number: true, graphemes: number });
+    }
+    if (text.length > 0)
+        runs.push({ number: false, graphemes: text });
+    return runs;
+}
+/**
+ * A count or an amount whose changed digits roll in place: down when they're new, never moving the
+ * text around them (tabular figures). The words around a number stay one run of text, so letters
+ * keep their shapes and the sentence keeps its order. A number reads left to right in every
+ * language and is isolated as such: in a right-to-left sentence "12" stays "12". Screen readers get
+ * the plain value; under Reduce Motion the digits cross-fade.
+ */
+export function RollingText({ value, className, ...props }) {
+    const reduced = useReducedMotion() === true;
+    const runs = useMemo(() => runsOf(value), [value]);
+    return (_jsxs("span", { "data-slot": "rolling-text", className: cn("whitespace-pre tabular", className), ...props, children: [_jsx("span", { className: "sr-only", children: value }), runs.map((run, at) => run.number ? (_jsx("span", { "aria-hidden": true, dir: "ltr", className: "inline-flex", children: run.graphemes.map((grapheme, i) => (_jsx("span", { className: "relative inline-grid overflow-hidden", children: _jsx(KitMotion, { children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(m.span, { initial: reduced ? { opacity: 0 } : { y: "-90%", opacity: 0 }, animate: { y: 0, opacity: 1, transition: spring.snappy }, exit: reduced ? { opacity: 0 } : { y: "90%", opacity: 0, transition: { duration: 0.12 } }, children: grapheme }, grapheme) }) }) }, i))) }, at)) : (_jsx("span", { "aria-hidden": true, children: run.graphemes.join("") }, at)))] }));
+}

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,17 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type { ComponentProps, ReactNode, Ref } from "react";
+export declare function ScrollAreaViewport({ className, ...props }: ComponentProps<typeof BaseScrollArea.Viewport>): import("react").JSX.Element;
+/** Thin overlay bar: invisible at rest, fades in while hovering or scrolling. */
+export declare function ScrollAreaScrollbar({ orientation, className, ...props }: ComponentProps<typeof BaseScrollArea.Scrollbar>): import("react").JSX.Element;
+export interface ScrollAreaProps extends Omit<ComponentProps<typeof BaseScrollArea.Root>, "children"> {
+    children?: ReactNode;
+    /** Which axes scroll. */
+    orientation?: "vertical" | "horizontal" | "both";
+    /** Soft mask at edges that have more content beyond them. */
+    fade?: boolean;
+    /** Classes for the scrolling viewport (e.g. padding). */
+    viewportClassName?: string;
+    viewportRef?: Ref<HTMLDivElement>;
+}
+/** Native scrolling with calm, overlay scrollbars. Give it a bounded height (or flex-1 min-h-0). */
+export declare function ScrollArea({ orientation, fade, viewportClassName, viewportRef, className, children, ...props }: ScrollAreaProps): import("react").JSX.Element;

package/dist/components/scroll-area.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { cn, withBase } from "../lib/cn.js";
+/*
+ * Edge fades grow with the distance scrolled from each edge (Base UI exposes it as CSS vars), so
+ * content never looks clipped at rest and the fade never hides the first/last line.
+ */
+const fadeY = "[mask-image:linear-gradient(to_bottom,transparent_0,black_min(12px,var(--scroll-area-overflow-y-start,0px)),black_calc(100%_-_min(12px,var(--scroll-area-overflow-y-end,0px))),transparent_100%)]";
+const fadeX = "[mask-image:linear-gradient(to_right,transparent_0,black_min(12px,var(--scroll-area-overflow-x-start,0px)),black_calc(100%_-_min(12px,var(--scroll-area-overflow-x-end,0px))),transparent_100%)]";
+export function ScrollAreaViewport({ className, ...props }) {
+    return (_jsx(BaseScrollArea.Viewport, { "data-slot": "scroll-area-viewport", className: withBase("size-full overscroll-contain rounded-[inherit] outline-none focus-visible:ring-focus focus-visible:outline-offset-[-2px]", className), ...props }));
+}
+/** Thin overlay bar: invisible at rest, fades in while hovering or scrolling. */
+export function ScrollAreaScrollbar({ orientation = "vertical", className, ...props }) {
+    return (_jsx(BaseScrollArea.Scrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: withBase(cn("pointer-events-none z-10 flex touch-none select-none p-0.5 opacity-0", "transition-opacity delay-300 duration-(--duration-slow) ease-(--ease-out)", "data-hovering:pointer-events-auto data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-(--duration-fast)", "data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-0", "data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col"), className), ...props, children: _jsx(BaseScrollArea.Thumb, { "data-slot": "scroll-area-thumb", className: cn("relative rounded-full bg-fg/20 transition-colors duration-(--duration-fast) hover:bg-fg/35 active:bg-fg/45", "data-[orientation=vertical]:w-full data-[orientation=horizontal]:h-full", 
+            // Generous invisible hit area around the slim thumb.
+            "before:absolute before:-inset-1 before:content-['']") }) }));
+}
+/** Native scrolling with calm, overlay scrollbars. Give it a bounded height (or flex-1 min-h-0). */
+export function ScrollArea({ orientation = "vertical", fade = false, viewportClassName, viewportRef, className, children, ...props }) {
+    const y = orientation !== "horizontal";
+    const x = orientation !== "vertical";
+    return (_jsxs(BaseScrollArea.Root, { "data-slot": "scroll-area", className: withBase("relative min-h-0 overflow-hidden", className), ...props, children: [_jsx(ScrollAreaViewport, { ...(viewportRef && { ref: viewportRef }), className: cn(fade && (y ? fadeY : fadeX), viewportClassName), children: children }), y && _jsx(ScrollAreaScrollbar, { orientation: "vertical" }), x && _jsx(ScrollAreaScrollbar, { orientation: "horizontal" }), x && y && _jsx(BaseScrollArea.Corner, {})] }));
+}

package/dist/components/section-label.d.ts

@@ -0,0 +1,10 @@
+import { useRender } from "@base-ui/react/use-render";
+export interface SectionLabelProps extends useRender.ComponentProps<"span"> {
+}
+/**
+ * The small uppercase eyebrow over a group ("INCLUDED", "PERMISSIONS"): one size, weight, tracking
+ * and colour for the whole app. A `<span>` by default; `render={(props) => <h3 {...props} />}` when
+ * it heads a section (the function form: biome's useHeadingContent reads `<h3 />` as an empty
+ * heading), `render={<figcaption />}` and the like for other elements.
+ */
+export declare function SectionLabel({ className, render, ref, ...props }: SectionLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/section-label.js

@@ -0,0 +1,21 @@
+"use client";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../lib/cn.js";
+/**
+ * The small uppercase eyebrow over a group ("INCLUDED", "PERMISSIONS"): one size, weight, tracking
+ * and colour for the whole app. A `<span>` by default; `render={(props) => <h3 {...props} />}` when
+ * it heads a section (the function form: biome's useHeadingContent reads `<h3 />` as an empty
+ * heading), `render={<figcaption />}` and the like for other elements.
+ */
+export function SectionLabel({ className, render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "span",
+        render,
+        ref,
+        props: {
+            "data-slot": "section-label",
+            className: cn("text-xs font-medium tracking-wide text-fg-subtle uppercase", className),
+            ...props,
+        },
+    });
+}

package/dist/components/section-nav.d.ts

@@ -0,0 +1,22 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactNode } from "react";
+/**
+ * A page's own sections (a settings page's): put it in the page's `<nav>`, beside whatever else the
+ * nav holds (a search field, a group's heading, a hint). Several lists may share one nav, one per group.
+ */
+export declare function SectionNavList({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export interface SectionNavItemProps extends useRender.ComponentProps<"button"> {
+    /** The section's glyph, sized and toned for you. */
+    readonly icon?: ReactNode;
+    /** The section on screen: it takes the selection and `aria-current="page"`. */
+    readonly active?: boolean | undefined;
+    /** At the row's end: a count or a status (`CountBadge`). */
+    readonly trailing?: ReactNode;
+}
+/**
+ * One section: a button by default; `render={<Link to="…" />}` when the section has an address of its
+ * own (copying the link works, and hovering can start its reads).
+ */
+export declare function SectionNavItem({ icon, active, trailing, render, ref, className, children, ...props }: SectionNavItemProps): import("react").JSX.Element;
+/** A hairline between groups of sections in one list: across the column, or upright between rows' items. */
+export declare function SectionNavSeparator({ className, ...props }: Omit<ComponentProps<"li">, "children">): import("react").JSX.Element;

package/dist/components/section-nav.js

@@ -0,0 +1,80 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { useState } from "react";
+import { cn, tv } from "../lib/cn.js";
+/*
+ * The list takes its layout from its own width (`@3xs/section-nav`), not the page's: in a rail beside
+ * the page, narrower than 16rem, the sections stand in a column; across the top of a narrow page they
+ * wrap onto more rows, so none hides in an unmarked scroller. The page's breakpoint, where the nav
+ * moves beside it, can't drift from the list's.
+ */
+const sectionNavItem = tv({
+    slots: {
+        // `min-w-0`: a flex item is otherwise as wide as its unbroken name, past the column.
+        item: "min-w-0 shrink-0 basis-full @3xs/section-nav:basis-auto",
+        control: [
+            // Touch screens: a 44 px row, drawn, not an invisible layer that would overlap the next one.
+            "flex h-8 w-full min-w-0 items-center gap-2 rounded-md px-2 text-start text-base whitespace-nowrap outline-none focus-visible:ring-focus pointer-coarse:h-11",
+            "transition-[color,background-color,opacity] duration-(--duration-fast) ease-(--ease-standard)",
+        ],
+        icon: "flex shrink-0 [&_svg]:size-4",
+        // A name longer than the rail ends in an ellipsis, never in the next column.
+        label: "min-w-0 truncate",
+        trailing: "ms-auto flex shrink-0 items-center",
+    },
+    variants: {
+        // The selection moves at once, never glides.
+        active: {
+            true: { control: "bg-selected text-fg", icon: "text-fg" },
+            false: { control: "text-fg-muted hover:bg-hover hover:text-fg", icon: "text-fg-subtle" },
+        },
+    },
+    defaultVariants: { active: false },
+});
+/**
+ * A page's own sections (a settings page's): put it in the page's `<nav>`, beside whatever else the
+ * nav holds (a search field, a group's heading, a hint). Several lists may share one nav, one per group.
+ */
+export function SectionNavList({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "section-nav", className: cn("@container/section-nav flex flex-wrap gap-0.5", className), ...props }));
+}
+/**
+ * One section: a button by default; `render={<Link to="…" />}` when the section has an address of its
+ * own (copying the link works, and hovering can start its reads).
+ */
+export function SectionNavItem({ icon, active = false, trailing, render, ref, className, children, ...props }) {
+    const styles = sectionNavItem({ active });
+    const control = useRender({
+        defaultTagName: "button",
+        render,
+        ref,
+        props: {
+            ...(render === undefined && { type: "button" }),
+            "data-slot": "section-nav-item",
+            "aria-current": active ? "page" : undefined,
+            className: styles.control({ className }),
+            children: (_jsxs(_Fragment, { children: [icon !== undefined && (_jsx("span", { "aria-hidden": true, className: styles.icon(), children: icon })), _jsx(TruncatedLabel, { className: styles.label(), children: children }), trailing !== undefined && _jsx("span", { className: styles.trailing(), children: trailing })] })),
+            ...props,
+        },
+    });
+    return _jsx("li", { className: styles.item(), children: control });
+}
+/**
+ * A label that may end in an ellipsis: while it's cut short, pointing at it shows the whole name (the
+ * native title, the way a macOS sidebar shows a clipped name); the row's accessible name is whole.
+ */
+function TruncatedLabel({ className, children, }) {
+    const [whole, setWhole] = useState(undefined);
+    const measure = (element) => {
+        const clipped = element.scrollWidth > element.clientWidth;
+        setWhole(clipped ? (element.textContent ?? undefined) : undefined);
+    };
+    return (_jsx("span", { className: className, title: whole, onPointerEnter: (event) => measure(event.currentTarget), children: children }));
+}
+/** A hairline between groups of sections in one list: across the column, or upright between rows' items. */
+export function SectionNavSeparator({ className, ...props }) {
+    return (_jsx("li", { "aria-hidden": true, "data-slot": "section-nav-separator", className: cn(
+        // Across the column it shrinks by its margins; upright it keeps its hairline.
+        "mx-1 my-2 h-px basis-full bg-border-subtle", "@3xs/section-nav:my-0 @3xs/section-nav:h-auto @3xs/section-nav:w-px @3xs/section-nav:shrink-0 @3xs/section-nav:basis-auto", className), ...props }));
+}

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,125 @@
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { type ComponentProps, type ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const segmentedControlStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string;
+            item: string;
+            pill: string;
+        };
+        md: {
+            root: string;
+            item: string;
+            pill: string;
+        };
+    };
+    /** Stretch to the container; segments share the width equally. */
+    block: {
+        true: {
+            root: string;
+            item: string;
+            text: string;
+        };
+    };
+    /** Icon-only segments: square buttons. */
+    iconOnly: {
+        true: {};
+    };
+}, {
+    root: string[];
+    item: string[];
+    pill: string[];
+    text: string;
+    label: string[];
+}, undefined, {
+    size: {
+        sm: {
+            root: string;
+            item: string;
+            pill: string;
+        };
+        md: {
+            root: string;
+            item: string;
+            pill: string;
+        };
+    };
+    /** Stretch to the container; segments share the width equally. */
+    block: {
+        true: {
+            root: string;
+            item: string;
+            text: string;
+        };
+    };
+    /** Icon-only segments: square buttons. */
+    iconOnly: {
+        true: {};
+    };
+}, {
+    root: string[];
+    item: string[];
+    pill: string[];
+    text: string;
+    label: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            root: string;
+            item: string;
+            pill: string;
+        };
+        md: {
+            root: string;
+            item: string;
+            pill: string;
+        };
+    };
+    /** Stretch to the container; segments share the width equally. */
+    block: {
+        true: {
+            root: string;
+            item: string;
+            text: string;
+        };
+    };
+    /** Icon-only segments: square buttons. */
+    iconOnly: {
+        true: {};
+    };
+}, {
+    root: string[];
+    item: string[];
+    pill: string[];
+    text: string;
+    label: string[];
+}>>;
+type SegmentedControlVariants = VariantProps<typeof segmentedControlStyles>;
+export interface SegmentedControlProps extends Omit<ComponentProps<typeof BaseToggleGroup>, "value" | "defaultValue" | "onValueChange" | "multiple">, Omit<SegmentedControlVariants, "iconOnly"> {
+    /** The selected segment (controlled). A segmented control always has exactly one selection. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Accessible name for the group, e.g. "Permission mode". */
+    "aria-label"?: string;
+    children: ReactNode;
+}
+/**
+ * Single-select segmented control. The selected segment takes the pill at once: nothing slides.
+ * Arrow keys move focus; Space/Enter select.
+ */
+export declare function SegmentedControl({ value: valueProp, defaultValue, onValueChange, size, block, className, children, ...props }: SegmentedControlProps): import("react").JSX.Element;
+export interface SegmentedControlItemProps extends Omit<ComponentProps<typeof BaseToggle>, "value" | "pressed" | "defaultPressed" | "onPressedChange"> {
+    value: string;
+    /** Leading icon. With no children the segment becomes a square icon button (needs `aria-label`). */
+    icon?: ReactNode;
+    /**
+     * Disables the segment and says why: the reason is its tooltip and its accessible description, and
+     * the segment stays in the arrow keys' path (`aria-disabled`) so a keyboard reaches it.
+     */
+    disabledReason?: string | undefined;
+}
+export declare function SegmentedControlItem({ value, icon, disabledReason, className, children, ...props }: SegmentedControlItemProps): import("react").JSX.Element;
+export {};