@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/card.d.ts

@@ -0,0 +1,131 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps } from "react";
+import { type VariantProps } from "../lib/cn.js";
+export declare const cardStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** Default container: surface + hairline + whisper of shadow. */
+        surface: "border border-border bg-surface shadow-xs";
+        /**
+         * Quieter: a fainter hairline and no shadow, for lists and notes set into a page (a settings
+         * list, a usage summary, a notice). Usually `size="flush"`, `divided` for rows.
+         */
+        subtle: "border border-border-subtle bg-surface";
+        /** Structure without chrome — groups content on an existing surface. */
+        ghost: "border border-transparent [--avatar-ring:var(--bg)]";
+        /**
+         * Sunken into the surface it sits on: a quoted message, a preview, a plan's step or a field's
+         * note inside a card or a drawer. Usually `size="sm"` or `flush` with the content's padding.
+         */
+        inset: "border border-border-subtle bg-bg-subtle [--avatar-ring:var(--bg-subtle)]";
+        /** Clickable tile: lifts on hover. Render as <a>/<button> via `render`. */
+        interactive: string[];
+    };
+    size: {
+        sm: "gap-2.5 py-3";
+        md: "gap-4 py-4";
+        /**
+         * No padding or gap of its own: the card frames full-width rows (with `divided`), or one
+         * block the caller lays out and pads (a form, a stat, a checkbox).
+         */
+        flush: "";
+    };
+    /** A hairline between the card's children: a list of rows (settings, accounts, devices). */
+    divided: {
+        true: "divide-y divide-border-subtle";
+    };
+}, undefined, "group/card relative flex flex-col rounded-xl text-fg [--avatar-ring:var(--surface)]", {
+    variant: {
+        /** Default container: surface + hairline + whisper of shadow. */
+        surface: "border border-border bg-surface shadow-xs";
+        /**
+         * Quieter: a fainter hairline and no shadow, for lists and notes set into a page (a settings
+         * list, a usage summary, a notice). Usually `size="flush"`, `divided` for rows.
+         */
+        subtle: "border border-border-subtle bg-surface";
+        /** Structure without chrome — groups content on an existing surface. */
+        ghost: "border border-transparent [--avatar-ring:var(--bg)]";
+        /**
+         * Sunken into the surface it sits on: a quoted message, a preview, a plan's step or a field's
+         * note inside a card or a drawer. Usually `size="sm"` or `flush` with the content's padding.
+         */
+        inset: "border border-border-subtle bg-bg-subtle [--avatar-ring:var(--bg-subtle)]";
+        /** Clickable tile: lifts on hover. Render as <a>/<button> via `render`. */
+        interactive: string[];
+    };
+    size: {
+        sm: "gap-2.5 py-3";
+        md: "gap-4 py-4";
+        /**
+         * No padding or gap of its own: the card frames full-width rows (with `divided`), or one
+         * block the caller lays out and pads (a form, a stat, a checkbox).
+         */
+        flush: "";
+    };
+    /** A hairline between the card's children: a list of rows (settings, accounts, devices). */
+    divided: {
+        true: "divide-y divide-border-subtle";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        /** Default container: surface + hairline + whisper of shadow. */
+        surface: "border border-border bg-surface shadow-xs";
+        /**
+         * Quieter: a fainter hairline and no shadow, for lists and notes set into a page (a settings
+         * list, a usage summary, a notice). Usually `size="flush"`, `divided` for rows.
+         */
+        subtle: "border border-border-subtle bg-surface";
+        /** Structure without chrome — groups content on an existing surface. */
+        ghost: "border border-transparent [--avatar-ring:var(--bg)]";
+        /**
+         * Sunken into the surface it sits on: a quoted message, a preview, a plan's step or a field's
+         * note inside a card or a drawer. Usually `size="sm"` or `flush` with the content's padding.
+         */
+        inset: "border border-border-subtle bg-bg-subtle [--avatar-ring:var(--bg-subtle)]";
+        /** Clickable tile: lifts on hover. Render as <a>/<button> via `render`. */
+        interactive: string[];
+    };
+    size: {
+        sm: "gap-2.5 py-3";
+        md: "gap-4 py-4";
+        /**
+         * No padding or gap of its own: the card frames full-width rows (with `divided`), or one
+         * block the caller lays out and pads (a form, a stat, a checkbox).
+         */
+        flush: "";
+    };
+    /** A hairline between the card's children: a list of rows (settings, accounts, devices). */
+    divided: {
+        true: "divide-y divide-border-subtle";
+    };
+}, undefined>>;
+export type CardVariants = VariantProps<typeof cardStyles>;
+export interface CardProps extends useRender.ComponentProps<"div">, CardVariants {
+}
+/**
+ * Container for grouped content. Compose with CardHeader / CardContent / CardFooter, or use
+ * `size="flush"` (with `divided` for rows) when the content brings its own padding. A kit part that
+ * draws a card on an element it already renders takes `cardStyles` instead.
+ */
+export declare function Card({ variant, size, divided, className, render, ref, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function CardHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function CardTitle({ className, ...props }: ComponentProps<"h3">): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+/** Trailing slot in the header (a menu button, badge, …). Spans the title + description rows. */
+export declare function CardAction({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * A button that covers its card beneath the card's own controls: the whole surface opens the item,
+ * while a menu or link drawn after it (positioned, above it) stays reachable. Its parent is positioned
+ * (`Card` is), and its `aria-label` names what it opens.
+ */
+export declare function CardCoverButton({ className, ...props }: Omit<ComponentProps<"button">, "type">): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * One padded row of a flush card (`size="flush"`, `divided` between rows): a setting, a field, a
+ * "Load more". The setting row's inset, 16 · 14; the row lays out its own content. An item with an icon, a name and a detail is an `ItemRow` (item-row.tsx).
+ */
+export declare function CardRow({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export interface CardFooterProps extends ComponentProps<"div"> {
+    /** Hairline above the footer, for cards with a distinct action bar. */
+    divided?: boolean;
+}
+export declare function CardFooter({ divided, className, ...props }: CardFooterProps): import("react").JSX.Element;

package/dist/components/card.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn, tv } from "../lib/cn.js";
+export const cardStyles = tv({
+    base: "group/card relative flex flex-col rounded-xl text-fg [--avatar-ring:var(--surface)]",
+    variants: {
+        variant: {
+            /** Default container: surface + hairline + whisper of shadow. */
+            surface: "border border-border bg-surface shadow-xs",
+            /**
+             * Quieter: a fainter hairline and no shadow, for lists and notes set into a page (a settings
+             * list, a usage summary, a notice). Usually `size="flush"`, `divided` for rows.
+             */
+            subtle: "border border-border-subtle bg-surface",
+            /** Structure without chrome — groups content on an existing surface. */
+            ghost: "border border-transparent [--avatar-ring:var(--bg)]",
+            /**
+             * Sunken into the surface it sits on: a quoted message, a preview, a plan's step or a field's
+             * note inside a card or a drawer. Usually `size="sm"` or `flush` with the content's padding.
+             */
+            inset: "border border-border-subtle bg-bg-subtle [--avatar-ring:var(--bg-subtle)]",
+            /** Clickable tile: lifts on hover. Render as <a>/<button> via `render`. */
+            interactive: [
+                "border border-border bg-surface text-start shadow-xs outline-none",
+                "transition-[border-color,box-shadow,translate] duration-(--duration-fast) ease-(--ease-standard)",
+                "hover:-translate-y-px hover:border-border-strong hover:shadow-md",
+                "active:translate-y-0 active:shadow-xs",
+                "focus-visible:ring-focus",
+                "motion-reduce:transition-[border-color,box-shadow] motion-reduce:hover:translate-y-0",
+                "data-disabled:pointer-events-none data-disabled:opacity-45",
+            ],
+        },
+        size: {
+            sm: "gap-2.5 py-3",
+            md: "gap-4 py-4",
+            /**
+             * No padding or gap of its own: the card frames full-width rows (with `divided`), or one
+             * block the caller lays out and pads (a form, a stat, a checkbox).
+             */
+            flush: "",
+        },
+        /** A hairline between the card's children: a list of rows (settings, accounts, devices). */
+        divided: { true: "divide-y divide-border-subtle" },
+    },
+    defaultVariants: { variant: "surface", size: "md" },
+});
+/**
+ * Container for grouped content. Compose with CardHeader / CardContent / CardFooter, or use
+ * `size="flush"` (with `divided` for rows) when the content brings its own padding. A kit part that
+ * draws a card on an element it already renders takes `cardStyles` instead.
+ */
+export function Card({ variant, size, divided, className, render, ref, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        render,
+        ref,
+        props: {
+            "data-slot": "card",
+            "data-size": size ?? "md",
+            className: cn(cardStyles({ variant, size, divided }), className),
+            ...props,
+        },
+    });
+}
+const sectionX = "px-4 group-data-[size=sm]/card:px-3";
+export function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("grid auto-rows-min grid-cols-1 items-start gap-1", "has-data-[slot=card-action]:grid-cols-[1fr_auto]", sectionX, className), ...props }));
+}
+export function CardTitle({ className, ...props }) {
+    return (_jsx("h3", { "data-slot": "card-title", className: cn("text-md font-semibold leading-snug tracking-tight text-fg", className), ...props }));
+}
+export function CardDescription({ className, ...props }) {
+    return _jsx("p", { "data-slot": "card-description", className: cn("text-sm text-fg-muted", className), ...props });
+}
+/** Trailing slot in the header (a menu button, badge, …). Spans the title + description rows. */
+export function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+/**
+ * A button that covers its card beneath the card's own controls: the whole surface opens the item,
+ * while a menu or link drawn after it (positioned, above it) stays reachable. Its parent is positioned
+ * (`Card` is), and its `aria-label` names what it opens.
+ */
+export function CardCoverButton({ className, ...props }) {
+    return (_jsx("button", { type: "button", "data-slot": "card-cover-button", className: cn("absolute inset-0 cursor-pointer rounded-xl outline-none focus-visible:ring-focus", className), ...props }));
+}
+export function CardContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "card-content", className: cn("text-base text-fg", sectionX, className), ...props });
+}
+/**
+ * One padded row of a flush card (`size="flush"`, `divided` between rows): a setting, a field, a
+ * "Load more". The setting row's inset, 16 · 14; the row lays out its own content. An item with an icon, a name and a detail is an `ItemRow` (item-row.tsx).
+ */
+export function CardRow({ className, ...props }) {
+    return _jsx("div", { "data-slot": "card-row", className: cn("px-4 py-3.5", className), ...props });
+}
+export function CardFooter({ divided = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center gap-2", sectionX, divided && "border-t border-border-subtle pt-3 group-data-[size=sm]/card:pt-2.5", className), ...props }));
+}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,34 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const checkboxStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "size-3.5 rounded-xs";
+        md: "size-4 rounded-xs";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "size-3.5 rounded-xs";
+        md: "size-4 rounded-xs";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "size-3.5 rounded-xs";
+        md: "size-4 rounded-xs";
+    };
+}, undefined>>;
+export interface CheckboxProps extends Omit<ComponentProps<typeof BaseCheckbox.Root>, "children">, VariantProps<typeof checkboxStyles> {
+    /** Visible label rendered to the right; clicking it toggles the box. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+}
+/** Ink checkbox with a drawn-on check. Pass `label` for the common box + text composition. */
+export declare function Checkbox({ size, label, description, className, ...props }: CheckboxProps): import("react").JSX.Element;
+export interface CheckboxGroupProps extends ComponentProps<typeof BaseCheckboxGroup> {
+    orientation?: "vertical" | "horizontal";
+}
+/** Shares a `string[]` value across child checkboxes (each needs a `value`). */
+export declare function CheckboxGroup({ orientation, className, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+export {};

package/dist/components/checkbox.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+const checkboxStyles = tv({
+    base: [
+        "group/checkbox relative inline-flex shrink-0 items-center justify-center outline-none hit-target touch-target",
+        "border border-border-strong bg-surface text-primary-fg shadow-xs",
+        "transition-[background-color,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:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary",
+        "data-checked:hover:border-primary-hover data-checked:hover:bg-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 rounded-xs",
+            md: "size-4 rounded-xs",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+const drawClass = cn("[stroke-dasharray:1] [stroke-dashoffset:1]", "transition-[stroke-dashoffset] duration-(--duration-moderate) ease-(--ease-out) motion-reduce:transition-none");
+/** Ink checkbox with a drawn-on check. Pass `label` for the common box + text composition. */
+export function Checkbox({ size, label, description, className, ...props }) {
+    const box = (_jsx(BaseCheckbox.Root, { "data-slot": "checkbox", className: (state) => cn(checkboxStyles({ size }), (label !== undefined || description !== undefined) && "mt-[3px]", resolveClassName(className, state)), ...props, children: _jsx(BaseCheckbox.Indicator, { keepMounted: true, className: "pointer-events-none absolute inset-0 flex", children: _jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "size-full", children: [_jsx("path", { d: "M4.25 8.25 6.9 10.75 11.75 5.5", pathLength: 1, stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: cn(drawClass, "group-data-checked/checkbox:[stroke-dashoffset:0]") }), _jsx("path", { d: "M4.75 8h6.5", pathLength: 1, stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", className: cn(drawClass, "group-data-indeterminate/checkbox:[stroke-dashoffset:0]") })] }) }) }));
+    if (label === undefined && description === undefined)
+        return box;
+    return (_jsxs("label", { "data-slot": "checkbox-label", className: "group/checkbox-label inline-flex max-w-full cursor-default select-none items-start gap-2 has-data-disabled:opacity-45", children: [box, _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 })] })] }));
+}
+/** Shares a `string[]` value across child checkboxes (each needs a `value`). */
+export function CheckboxGroup({ orientation = "vertical", className, ...props }) {
+    return (_jsx(BaseCheckboxGroup, { "data-slot": "checkbox-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 }));
+}

package/dist/components/choice-row.d.ts

@@ -0,0 +1,104 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const choiceRow: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** A row in a list on a surface (a dialog's, a pane's): a hover wash, the selected fill. */
+        plain: {
+            root: string;
+            title: string;
+        };
+        /** A tile with its own hairline, for the few weighty choices a sheet leads with. */
+        card: {
+            root: string[];
+            body: string;
+            title: string;
+        };
+    };
+    /** A plain row with a detail line under its title is taller. */
+    twoLine: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+    leading: string;
+    body: string;
+    title: string;
+    detail: string;
+    more: string;
+    trailing: string;
+}, undefined, {
+    variant: {
+        /** A row in a list on a surface (a dialog's, a pane's): a hover wash, the selected fill. */
+        plain: {
+            root: string;
+            title: string;
+        };
+        /** A tile with its own hairline, for the few weighty choices a sheet leads with. */
+        card: {
+            root: string[];
+            body: string;
+            title: string;
+        };
+    };
+    /** A plain row with a detail line under its title is taller. */
+    twoLine: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+    leading: string;
+    body: string;
+    title: string;
+    detail: string;
+    more: string;
+    trailing: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        /** A row in a list on a surface (a dialog's, a pane's): a hover wash, the selected fill. */
+        plain: {
+            root: string;
+            title: string;
+        };
+        /** A tile with its own hairline, for the few weighty choices a sheet leads with. */
+        card: {
+            root: string[];
+            body: string;
+            title: string;
+        };
+    };
+    /** A plain row with a detail line under its title is taller. */
+    twoLine: {
+        true: {};
+        false: {};
+    };
+}, {
+    root: string[];
+    leading: string;
+    body: string;
+    title: string;
+    detail: string;
+    more: string;
+    trailing: string;
+}>>;
+export interface ChoiceRowProps extends Omit<ComponentProps<"button">, "title" | "children">, Omit<VariantProps<typeof choiceRow>, "twoLine"> {
+    /** An icon (sized and muted for you) or a logo. */
+    leading?: ReactNode;
+    /** What the row picks, with any badge after it. Wrap a long name in a `truncate` span. */
+    title: ReactNode;
+    /** One muted line under the title, cut with an ellipsis when it doesn't fit. */
+    detail?: ReactNode;
+    /** More under the detail, wrapping: a warning, a note. */
+    children?: ReactNode;
+    /** At the end: a price, a shortcut, a check. */
+    trailing?: ReactNode;
+}
+/**
+ * One choice in a list, as a button: an icon or logo, a title and a muted detail, something at the
+ * end. Picking a project, a file to show, a model. Say which row is chosen the accessible way,
+ * `aria-pressed` for a choice that stays (a model), `aria-current` for the item on show (a file),
+ * and the row takes the selected fill.
+ */
+export declare function ChoiceRow({ variant, leading, title, detail, children, trailing, className, type, ...props }: ChoiceRowProps): import("react").JSX.Element;
+export {};

package/dist/components/choice-row.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "../lib/cn.js";
+const choiceRow = tv({
+    slots: {
+        root: [
+            "flex w-full min-w-0 cursor-default items-center text-start outline-none select-none",
+            "transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-standard)",
+            "focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-45",
+        ],
+        leading: "flex shrink-0 items-center justify-center text-fg-subtle [&>svg]:size-4",
+        body: "flex min-w-0 flex-1 flex-col",
+        title: "flex min-w-0 items-center gap-1.5 text-fg",
+        detail: "truncate text-xs text-fg-subtle",
+        more: "text-xs text-fg-subtle",
+        trailing: "flex shrink-0 items-center gap-2",
+    },
+    variants: {
+        variant: {
+            /** A row in a list on a surface (a dialog's, a pane's): a hover wash, the selected fill. */
+            plain: { root: "gap-2.5 rounded-lg px-2.5 hover:bg-hover data-selected:bg-selected", title: "text-sm" },
+            /** A tile with its own hairline, for the few weighty choices a sheet leads with. */
+            card: {
+                root: [
+                    "gap-3 rounded-xl border border-border-subtle bg-surface px-3 py-2.5",
+                    "hover:border-border hover:bg-bg-subtle",
+                    "data-selected:border-border-strong data-selected:bg-selected",
+                ],
+                body: "gap-0.5",
+                title: "text-base font-medium",
+            },
+        },
+        /** A plain row with a detail line under its title is taller. */
+        twoLine: { true: {}, false: {} },
+    },
+    compoundVariants: [
+        { variant: "plain", twoLine: false, class: { root: "min-h-8 py-1.5" } },
+        { variant: "plain", twoLine: true, class: { root: "py-2" } },
+    ],
+    defaultVariants: { variant: "plain", twoLine: false },
+});
+/** `aria-pressed` or `aria-current` say a row is the chosen one; the row looks it. */
+function isChosen(pressed, current) {
+    return (pressed === true ||
+        pressed === "true" ||
+        (current !== undefined && current !== false && current !== "false"));
+}
+/**
+ * One choice in a list, as a button: an icon or logo, a title and a muted detail, something at the
+ * end. Picking a project, a file to show, a model. Say which row is chosen the accessible way,
+ * `aria-pressed` for a choice that stays (a model), `aria-current` for the item on show (a file),
+ * and the row takes the selected fill.
+ */
+export function ChoiceRow({ variant, leading, title, detail, children, trailing, className, type = "button", ...props }) {
+    const styles = choiceRow({ variant, twoLine: detail !== undefined || children !== undefined });
+    return (_jsxs("button", { "data-slot": "choice-row", "data-selected": isChosen(props["aria-pressed"], props["aria-current"]) || undefined, type: type, className: styles.root({ className }), ...props, children: [leading !== undefined && (_jsx("span", { "aria-hidden": true, className: styles.leading(), children: leading })), _jsxs("span", { className: styles.body(), children: [_jsx("span", { className: styles.title(), children: title }), detail !== undefined && _jsx("span", { className: styles.detail(), children: detail }), children !== undefined && _jsx("span", { className: styles.more(), children: children })] }), trailing !== undefined && _jsx("span", { className: styles.trailing(), children: trailing })] }));
+}

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

@@ -0,0 +1,17 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface ClampedTextProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Rows shown before "Show more", at the content's own line height. */
+    lines: number;
+    children: ReactNode;
+    /** Classes of the clamped box itself (its type sets the line height the clamp counts in). */
+    contentClassName?: string | undefined;
+    /** Controlled expansion, for a host that owns it (a long list that keeps every row's state). */
+    expanded?: boolean | undefined;
+    onExpandedChange?: ((expanded: boolean) => void) | undefined;
+}
+/**
+ * Text cut to `lines` rendered rows with a "Show more" toggle — prose of any script and length,
+ * Markdown included. Whether it overflows is measured from the layout (and again when the width
+ * changes), never guessed from the string; content that fits gets no toggle.
+ */
+export declare function ClampedText({ lines, children, className, contentClassName, expanded: controlled, onExpandedChange, ...props }: ClampedTextProps): import("react").JSX.Element;

package/dist/components/clamped-text.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { ExpandToggle } from "./expand-toggle.js";
+/**
+ * Text cut to `lines` rendered rows with a "Show more" toggle — prose of any script and length,
+ * Markdown included. Whether it overflows is measured from the layout (and again when the width
+ * changes), never guessed from the string; content that fits gets no toggle.
+ */
+export function ClampedText({ lines, children, className, contentClassName, expanded: controlled, onExpandedChange, ...props }) {
+    const t = useUiStrings().primitives;
+    const contentId = useId();
+    const content = useRef(null);
+    const [own, setOwn] = useState(false);
+    const expanded = controlled ?? own;
+    const toggle = () => {
+        if (onExpandedChange === undefined)
+            setOwn(!expanded);
+        else
+            onExpandedChange(!expanded);
+    };
+    const [maxHeight, setMaxHeight] = useState(undefined);
+    const [overflows, setOverflows] = useState(false);
+    useLayoutEffect(() => {
+        const element = content.current;
+        if (element === null)
+            return undefined;
+        const measure = () => {
+            const style = getComputedStyle(element);
+            const lineHeight = Number.parseFloat(style.lineHeight);
+            // `normal` has no number (the font's own leading): about 1.2 em. The kit's type sets one.
+            const row = Number.isFinite(lineHeight) ? lineHeight : Number.parseFloat(style.fontSize) * 1.2;
+            const limit = Math.ceil(row * lines);
+            setMaxHeight(limit);
+            setOverflows(element.scrollHeight > limit + 1);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [lines]);
+    const clamped = overflows && !expanded;
+    return (_jsxs("div", { "data-slot": "clamped-text", className: className, ...props, children: [_jsx("div", { ref: content, id: contentId, style: clamped ? { maxHeight } : undefined, className: cn(clamped &&
+                    "overflow-hidden [mask-image:linear-gradient(to_bottom,black_calc(100%-1.25em),transparent)]", contentClassName), children: children }), overflows && (_jsx(ExpandToggle, { expanded: expanded, onToggle: toggle, controls: contentId, className: "mt-1", children: expanded ? t.showLess : t.showMore }))] }));
+}

package/dist/components/code-block.d.ts

@@ -0,0 +1,48 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type CodeLine, type ResolvedLanguage } from "../lib/shiki.js";
+import { useCopyToClipboard } from "../lib/use-copy-to-clipboard.js";
+/** Its own module so a page can copy text without loading the highlighter. */
+export { useCopyToClipboard };
+export interface HighlightedLines {
+    lines: readonly CodeLine[];
+    /** False while `lines` are the plain fallback (grammar loading, or tokenization still pending). */
+    highlighted: boolean;
+}
+/**
+ * Tokenized lines for `code`, without ever making a commit wait on Shiki:
+ *
+ * - **Instant** (rendered on the first pass): a {@link tokenCache} hit — e.g. a virtualized row
+ *   scrolling back into view — or a stream that only grew (`streaming`: just the newly completed
+ *   lines are tokenized; a finished stream seeds the cache with its result).
+ * - **Miss**: plain lines first, then a deferred (`useDeferredValue`, transition-priority and
+ *   interruptible) re-render tokenizes and caches. Plain and highlighted output share the same line
+ *   structure, so swapping them never changes layout or a virtualizer's measured height.
+ * - **Grammar not loaded yet**: plain lines until it is.
+ */
+export declare function useHighlightedLines(code: string, lang: ResolvedLanguage, streaming?: boolean): HighlightedLines;
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Source text. A single trailing newline is ignored. */
+    code: string;
+    /** Language id or fence info (`ts`, `tsx`, `python`, `sh`, …). Unknown → plain text. */
+    lang?: string | undefined;
+    /** Shown in the header instead of the language. */
+    filename?: string | undefined;
+    showLineNumbers?: boolean;
+    /** Number of the first line (e.g. a Read from offset 120). Default 1. */
+    startLine?: number;
+    /** 1-based line numbers to emphasize (in the same numbering as `startLine`). */
+    highlightLines?: readonly number[];
+    /** Soft-wrap long lines instead of scrolling horizontally. */
+    wrap?: boolean;
+    /** Scroll vertically beyond this height (e.g. `320` or `"40vh"`). */
+    maxHeight?: number | string;
+    /** The code is still arriving: incremental highlighting, line fade-in, stick-to-bottom. */
+    streaming?: boolean;
+    /** Render the header bar (label + copy). Without it, copy floats in on hover. */
+    header?: boolean;
+    /** Extra controls rendered in the header, before the copy button; text among them wraps, and the header grows. */
+    actions?: ReactNode;
+}
+export declare function CodeBlock({ code, lang, filename, showLineNumbers, startLine, highlightLines, wrap, maxHeight, streaming, header, actions, className, ...props }: CodeBlockProps): import("react").JSX.Element;
+/** Inline code span for prose: hairline chip, mono, slightly smaller than surrounding text. */
+export declare function Code({ className, ...props }: ComponentProps<"code">): import("react").JSX.Element;