@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/segmented-control.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { createContext, use, useCallback, useMemo, useState, } from "react";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+import { DisabledReasonTooltip, disabledReasonClass } from "./tooltip.js";
+const segmentedControlStyles = tv({
+    slots: {
+        // Segments keep their labels' width: a control that doesn't fit overflows its container (put it
+        // in a scroller or let the row wrap) instead of squeezing labels into each other. Block
+        // controls share the width and truncate their labels instead.
+        root: [
+            "relative inline-flex shrink-0 items-center gap-0.5 bg-hover p-0.5",
+            "[box-shadow:inset_0_0_0_1px_var(--border-subtle)]",
+            "data-disabled:pointer-events-none data-disabled:opacity-45",
+        ],
+        item: [
+            "group/segment relative inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap font-medium touch-target",
+            "text-fg-muted outline-none transition-colors duration-(--duration-fast) ease-(--ease-standard)",
+            "hover:text-fg data-pressed:text-fg",
+            "focus-visible:ring-focus focus-visible:outline-offset-0",
+            "data-disabled:pointer-events-none data-disabled:opacity-45",
+            "[&_svg]:shrink-0",
+        ],
+        pill: [
+            "absolute inset-0 bg-surface-raised dark:bg-gray-5",
+            "[box-shadow:var(--shadow-sm),0_0_0_0.5px_var(--border)]",
+        ],
+        // A label with a count ("All 4") keeps its 6 px gap: the label's parts sit in one flex row.
+        text: "inline-flex min-w-0 items-center gap-1.5",
+        label: [
+            "relative z-10 inline-flex min-w-0 items-center justify-center gap-1.5",
+            "transition-[scale] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy)",
+            "group-active/segment:scale-[0.96] motion-reduce:group-active/segment:scale-100",
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                root: "h-7 rounded-md",
+                item: "h-6 rounded-sm px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+                pill: "rounded-sm",
+            },
+            md: {
+                root: "h-8 rounded-lg",
+                item: "h-7 rounded-md px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+                pill: "rounded-md",
+            },
+        },
+        /** Stretch to the container; segments share the width equally. */
+        block: {
+            true: { root: "flex w-full min-w-0 shrink", item: "min-w-0 flex-1 shrink", text: "block truncate" },
+        },
+        /** Icon-only segments: square buttons. */
+        iconOnly: { true: {} },
+    },
+    compoundVariants: [
+        { iconOnly: true, size: "sm", class: { item: "w-6 px-0" } },
+        { iconOnly: true, size: "md", class: { item: "w-7 px-0" } },
+    ],
+    defaultVariants: { size: "md" },
+});
+const SegmentedControlContext = createContext(null);
+/**
+ * Single-select segmented control. The selected segment takes the pill at once: nothing slides.
+ * Arrow keys move focus; Space/Enter select.
+ */
+export function SegmentedControl({ value: valueProp, defaultValue, onValueChange, size, block, className, children, ...props }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
+    const value = valueProp ?? uncontrolled;
+    const styles = segmentedControlStyles({ size, block });
+    const handleChange = useCallback((next) => {
+        const selected = next.find((candidate) => candidate !== value);
+        // Pressing the active segment would empty the group — a segmented control stays selected.
+        if (selected === undefined)
+            return;
+        if (valueProp === undefined)
+            setUncontrolled(selected);
+        onValueChange?.(selected);
+    }, [value, valueProp, onValueChange]);
+    const context = useMemo(() => ({ value, size, block }), [value, size, block]);
+    return (_jsx(SegmentedControlContext, { value: context, children: _jsx(BaseToggleGroup, { "data-slot": "segmented-control", value: value === "" ? [] : [value], onValueChange: handleChange, className: (state) => styles.root({ className: resolveClassName(className, state) }), ...props, children: children }) }));
+}
+export function SegmentedControlItem({ value, icon, disabledReason, className, children, ...props }) {
+    const context = use(SegmentedControlContext);
+    if (!context)
+        throw new Error("<SegmentedControlItem> must be used inside <SegmentedControl>.");
+    const selected = context.value === value;
+    const iconOnly = icon !== undefined && (children === undefined || children === null);
+    const styles = segmentedControlStyles({ size: context.size, block: context.block, iconOnly });
+    // Base UI's toggle can't be disabled and focusable: a reasoned segment is `aria-disabled` and turns
+    // its press down instead.
+    const reasoned = disabledReason !== undefined;
+    const item = (_jsxs(BaseToggle, { "data-slot": "segmented-control-item", value: value, ...(reasoned && {
+            "aria-disabled": true,
+            "data-disabled": "",
+            onPressedChange: (_pressed, details) => details.cancel(),
+        }), className: (state) => styles.item({ className: cn(reasoned && disabledReasonClass, resolveClassName(className, state)) }), ...props, children: [selected && _jsx("span", { "aria-hidden": true, className: styles.pill() }), _jsxs("span", { className: styles.label(), children: [icon !== undefined && (_jsx("span", { "aria-hidden": true, className: "flex items-center", children: icon })), children !== undefined && children !== null && _jsx("span", { className: styles.text(), children: children })] })] }));
+    return reasoned ? _jsx(DisabledReasonTooltip, { reason: disabledReason, children: item }) : item;
+}

package/dist/components/select.d.ts

@@ -0,0 +1,120 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { type ComponentProps, type ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+/** The floating listbox surface. */
+export declare const listboxPopupClass: string;
+export declare const listboxItemClass: string;
+export declare const listboxIndicatorClass: string;
+export declare const listboxGroupLabelClass = "flex h-7 select-none items-center px-2 text-xs font-medium text-fg-subtle";
+export declare const listboxSeparatorClass = "-mx-1 my-1 h-px bg-border-subtle";
+export declare const listboxIconClass = "flex size-4 shrink-0 items-center justify-center text-fg-subtle transition-colors duration-(--duration-instant) group-data-highlighted/listbox-item:text-fg-muted";
+export declare const selectTriggerStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** Framed, matches Input. */
+        default: string[];
+        /** Chromeless until hovered: toolbars, inline pickers ("Last 7 days ⌄"). */
+        ghost: string[];
+    };
+    size: {
+        sm: "h-7 gap-1.5 rounded-md pe-1.5 ps-2 text-sm [&_svg:not([class*='size-'])]:size-3.5";
+        md: "h-8 gap-2 rounded-lg pe-2 ps-2.5 text-base [&_svg:not([class*='size-'])]:size-4";
+        lg: "h-10 gap-2.5 rounded-xl pe-2.5 ps-3 text-md [&_svg:not([class*='size-'])]:size-4";
+    };
+    block: {
+        true: "w-full";
+    };
+}, undefined, string[], {
+    variant: {
+        /** Framed, matches Input. */
+        default: string[];
+        /** Chromeless until hovered: toolbars, inline pickers ("Last 7 days ⌄"). */
+        ghost: string[];
+    };
+    size: {
+        sm: "h-7 gap-1.5 rounded-md pe-1.5 ps-2 text-sm [&_svg:not([class*='size-'])]:size-3.5";
+        md: "h-8 gap-2 rounded-lg pe-2 ps-2.5 text-base [&_svg:not([class*='size-'])]:size-4";
+        lg: "h-10 gap-2.5 rounded-xl pe-2.5 ps-3 text-md [&_svg:not([class*='size-'])]:size-4";
+    };
+    block: {
+        true: "w-full";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        /** Framed, matches Input. */
+        default: string[];
+        /** Chromeless until hovered: toolbars, inline pickers ("Last 7 days ⌄"). */
+        ghost: string[];
+    };
+    size: {
+        sm: "h-7 gap-1.5 rounded-md pe-1.5 ps-2 text-sm [&_svg:not([class*='size-'])]:size-3.5";
+        md: "h-8 gap-2 rounded-lg pe-2 ps-2.5 text-base [&_svg:not([class*='size-'])]:size-4";
+        lg: "h-10 gap-2.5 rounded-xl pe-2.5 ps-3 text-md [&_svg:not([class*='size-'])]:size-4";
+    };
+    block: {
+        true: "w-full";
+    };
+}, undefined>>;
+export type SelectTriggerVariants = VariantProps<typeof selectTriggerStyles>;
+export declare const SelectRoot: typeof BaseSelect.Root;
+export interface SelectTriggerProps extends ComponentProps<typeof BaseSelect.Trigger>, SelectTriggerVariants {
+    /** Icon before the value (e.g. a provider logo). */
+    leading?: ReactNode;
+}
+export declare function SelectTrigger({ variant, size, block, leading, className, children, ...props }: SelectTriggerProps): import("react").JSX.Element;
+export declare function SelectValue({ className, ...props }: ComponentProps<typeof BaseSelect.Value>): import("react").JSX.Element;
+export interface SelectContentProps extends ComponentProps<typeof BaseSelect.Popup> {
+    side?: ComponentProps<typeof BaseSelect.Positioner>["side"];
+    align?: ComponentProps<typeof BaseSelect.Positioner>["align"];
+    sideOffset?: number;
+    /**
+     * Overlap the trigger so the selected item lines up with the value (macOS-style). Off by
+     * default: the kit's popups drop below their trigger.
+     */
+    alignItemWithTrigger?: boolean;
+}
+/** Portal + positioner + popup + scroll arrows + list in one. Children are items/groups. */
+export declare function SelectContent({ side, align, sideOffset, alignItemWithTrigger, className, children, ...props }: SelectContentProps): import("react").JSX.Element;
+export interface SelectItemProps extends Omit<ComponentProps<typeof BaseSelect.Item>, "children"> {
+    /** Leading icon (provider logo, lucide icon). */
+    icon?: ReactNode;
+    /** Secondary line under the label ("Most capable · 1M context"). */
+    description?: ReactNode;
+    /** Trailing adornment before the check (badge, shortcut…). */
+    trailing?: ReactNode;
+    children?: ReactNode;
+}
+export declare function SelectItem({ icon, description, trailing, className, children, ...props }: SelectItemProps): import("react").JSX.Element;
+export declare function SelectGroup({ className, ...props }: ComponentProps<typeof BaseSelect.Group>): import("react").JSX.Element;
+export declare function SelectGroupLabel({ className, ...props }: ComponentProps<typeof BaseSelect.GroupLabel>): import("react").JSX.Element;
+export declare function SelectSeparator({ className, ...props }: ComponentProps<typeof BaseSelect.Separator>): import("react").JSX.Element;
+export interface SelectOption<Value> {
+    value: Value;
+    /** Plain text — also used by typeahead and the trigger. */
+    label: string;
+    description?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectOptionGroup<Value> {
+    label: string;
+    options: readonly SelectOption<Value>[];
+}
+type SelectEntry<Value> = SelectOption<Value> | SelectOptionGroup<Value>;
+export interface SelectProps<Value> extends Omit<BaseSelect.Root.Props<Value>, "items" | "children" | "multiple">, SelectTriggerVariants {
+    /** Flat options, or groups of options (separated automatically). */
+    items: readonly SelectEntry<Value>[];
+    placeholder?: ReactNode;
+    /** Icon before the value in the trigger. */
+    leading?: ReactNode;
+    /** Required when there's no visible <Field> label. */
+    "aria-label"?: string;
+    /** Classes for the trigger. */
+    className?: string | undefined;
+    contentClassName?: string | undefined;
+    side?: SelectContentProps["side"];
+    align?: SelectContentProps["align"];
+    alignItemWithTrigger?: boolean;
+}
+/** Single-value select from a list of options: `<Select items={models} defaultValue="opus" />`. */
+export declare function Select<Value>({ items, placeholder, leading, variant, size, block, "aria-label": ariaLabel, className, contentClassName, side, align, alignItemWithTrigger, ...props }: SelectProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/select.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { Check, ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import { Fragment } from "react";
+import { cn, tv, withBase } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { fieldChrome } from "./input.js";
+import { ItemLabel } from "./item-label.js";
+/* ------------------------------------------------------------------------------------------ */
+/* Shared listbox styles — reused by Combobox.                                                 */
+/* ------------------------------------------------------------------------------------------ */
+/** The floating listbox surface. */
+export const listboxPopupClass = cn("popup-motion surface-raised min-w-(--anchor-width) max-w-(--available-width) rounded-xl p-1 text-fg outline-none");
+export const listboxItemClass = cn("group/listbox-item relative flex min-h-8 w-full cursor-default select-none items-center gap-2 rounded-md px-2", "text-base text-fg outline-none", "transition-[background-color,color] duration-(--duration-instant) ease-(--ease-standard)", "data-highlighted:bg-hover", "data-disabled:pointer-events-none data-disabled:opacity-45", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4");
+export const listboxIndicatorClass = cn("ms-auto flex size-4 shrink-0 items-center justify-center ps-0 text-fg", "transition-[opacity,scale] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy)", "data-starting-style:scale-50 data-starting-style:opacity-0 data-ending-style:scale-50 data-ending-style:opacity-0", "motion-reduce:transition-none");
+export const listboxGroupLabelClass = "flex h-7 select-none items-center px-2 text-xs font-medium text-fg-subtle";
+export const listboxSeparatorClass = "-mx-1 my-1 h-px bg-border-subtle";
+export const listboxIconClass = "flex size-4 shrink-0 items-center justify-center text-fg-subtle transition-colors duration-(--duration-instant) group-data-highlighted/listbox-item:text-fg-muted";
+/* ------------------------------------------------------------------------------------------ */
+/* Trigger                                                                                    */
+/* ------------------------------------------------------------------------------------------ */
+export const selectTriggerStyles = tv({
+    base: [
+        "group/select-trigger relative inline-flex min-w-0 shrink-0 select-none items-center justify-between text-start outline-none touch-target",
+        "data-disabled:pointer-events-none data-disabled:opacity-45",
+        "data-readonly:pointer-events-none",
+        "[&_svg]:shrink-0",
+    ],
+    variants: {
+        variant: {
+            /** Framed, matches Input. */
+            default: [
+                fieldChrome,
+                "focus-visible:border-border-strong focus-visible:ring-3 data-popup-open:border-border-strong",
+                "data-readonly:bg-bg-subtle data-readonly:shadow-none",
+            ],
+            /** Chromeless until hovered: toolbars, inline pickers ("Last 7 days ⌄"). */
+            ghost: [
+                "border border-transparent text-fg-muted transition-[background-color,color,box-shadow] duration-(--duration-fast)",
+                "hover:bg-hover hover:text-fg data-popup-open:bg-hover data-popup-open:text-fg",
+                "focus-visible:ring-focus",
+            ],
+        },
+        size: {
+            sm: "h-7 gap-1.5 rounded-md pe-1.5 ps-2 text-sm [&_svg:not([class*='size-'])]:size-3.5",
+            md: "h-8 gap-2 rounded-lg pe-2 ps-2.5 text-base [&_svg:not([class*='size-'])]:size-4",
+            lg: "h-10 gap-2.5 rounded-xl pe-2.5 ps-3 text-md [&_svg:not([class*='size-'])]:size-4",
+        },
+        block: { true: "w-full" },
+    },
+    defaultVariants: { variant: "default", size: "md" },
+});
+export const SelectRoot = BaseSelect.Root;
+export function SelectTrigger({ variant, size, block, leading, className, children, ...props }) {
+    return (_jsxs(BaseSelect.Trigger, { "data-slot": "select-trigger", className: withBase(selectTriggerStyles({ variant, size, block }), className), ...props, children: [leading !== undefined && (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 items-center text-fg-subtle", children: leading })), _jsx("span", { className: "flex min-w-0 flex-1 items-center", children: children }), _jsx(BaseSelect.Icon, { className: cn("flex shrink-0 items-center text-fg-subtle transition-colors duration-(--duration-fast)", "group-hover/select-trigger:text-fg-muted group-data-popup-open/select-trigger:text-fg-muted"), children: _jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-3.5" }) })] }));
+}
+export function SelectValue({ className, ...props }) {
+    return (_jsx(BaseSelect.Value, { "data-slot": "select-value", className: withBase("min-w-0 truncate data-placeholder:text-fg-subtle", className), ...props }));
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Popup                                                                                      */
+/* ------------------------------------------------------------------------------------------ */
+const scrollArrowClass = cn("z-10 flex h-6 w-full cursor-default items-center justify-center bg-surface-raised text-fg-subtle", "transition-opacity duration-(--duration-fast) data-starting-style:opacity-0 data-ending-style:opacity-0", "before:absolute before:inset-x-0 before:h-full before:content-['']", "data-[direction=up]:top-0 data-[direction=up]:rounded-t-xl data-[direction=up]:data-[side=none]:before:-top-full", "data-[direction=down]:bottom-0 data-[direction=down]:rounded-b-xl data-[direction=down]:data-[side=none]:before:-bottom-full");
+/** Portal + positioner + popup + scroll arrows + list in one. Children are items/groups. */
+export function SelectContent({ side = "bottom", align = "start", sideOffset = 6, alignItemWithTrigger = false, className, children, ...props }) {
+    const container = usePortalContainer();
+    return (_jsx(BaseSelect.Portal, { container: container, children: _jsx(BaseSelect.Positioner, { side: side, align: align, sideOffset: sideOffset, alignItemWithTrigger: alignItemWithTrigger, collisionPadding: 8, className: "z-(--z-overlay) select-none outline-none", children: _jsxs(BaseSelect.Popup, { "data-slot": "select-content", className: withBase(cn(listboxPopupClass, "relative overflow-hidden p-0"), className), ...props, children: [_jsx(BaseSelect.ScrollUpArrow, { className: scrollArrowClass, children: _jsx(ChevronUp, { "aria-hidden": true, className: "size-3.5" }) }), _jsx(BaseSelect.List, { className: "relative max-h-[min(24rem,var(--available-height))] scroll-py-6 overflow-y-auto overscroll-contain p-1 outline-none scrollbar-none", children: children }), _jsx(BaseSelect.ScrollDownArrow, { className: scrollArrowClass, children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5" }) })] }) }) }));
+}
+export function SelectItem({ icon, description, trailing, className, children, ...props }) {
+    return (_jsxs(BaseSelect.Item, { "data-slot": "select-item", className: withBase(listboxItemClass, className), ...props, children: [icon !== undefined && (_jsx("span", { "aria-hidden": true, className: listboxIconClass, children: icon })), _jsx(ItemLabel, { description: description, as: BaseSelect.ItemText, children: children }), trailing, _jsx(BaseSelect.ItemIndicator, { className: listboxIndicatorClass, children: _jsx(Check, { "aria-hidden": true, strokeWidth: 2.25, className: "size-3.5" }) })] }));
+}
+export function SelectGroup({ className, ...props }) {
+    return (_jsx(BaseSelect.Group, { "data-slot": "select-group", className: withBase("flex flex-col", className), ...props }));
+}
+export function SelectGroupLabel({ className, ...props }) {
+    return (_jsx(BaseSelect.GroupLabel, { "data-slot": "select-group-label", className: withBase(listboxGroupLabelClass, className), ...props }));
+}
+export function SelectSeparator({ className, ...props }) {
+    return (_jsx(BaseSelect.Separator, { "data-slot": "select-separator", className: withBase(listboxSeparatorClass, className), ...props }));
+}
+const isGroup = (entry) => "options" in entry;
+/** Single-value select from a list of options: `<Select items={models} defaultValue="opus" />`. */
+export function Select({ items, placeholder, leading, variant, size, block, "aria-label": ariaLabel, className, contentClassName, side, align, alignItemWithTrigger, ...props }) {
+    const flat = items.flatMap((entry) => (isGroup(entry) ? entry.options : [entry]));
+    const labels = flat.map((option) => ({ value: option.value, label: option.label }));
+    const renderOption = (option) => (_jsx(SelectItem, { value: option.value, icon: option.icon, description: option.description, disabled: option.disabled === true, children: option.label }, option.label));
+    return (_jsxs(BaseSelect.Root, { items: labels, ...props, children: [_jsx(SelectTrigger, { variant: variant, size: size, block: block, leading: leading, className: className, ...(ariaLabel === undefined ? {} : { "aria-label": ariaLabel }), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { ...(side === undefined ? {} : { side }), ...(align === undefined ? {} : { align }), ...(alignItemWithTrigger === undefined ? {} : { alignItemWithTrigger }), ...(contentClassName === undefined ? {} : { className: contentClassName }), children: items.map((entry, index) => isGroup(entry) ? (_jsxs(Fragment, { children: [index > 0 && _jsx(SelectSeparator, {}), _jsxs(SelectGroup, { children: [_jsx(SelectGroupLabel, { children: entry.label }), entry.options.map(renderOption)] })] }, entry.label)) : (renderOption(entry))) })] }));
+}

package/dist/components/separator.d.ts

@@ -0,0 +1,10 @@
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import type { ComponentProps, ReactNode } from "react";
+export interface SeparatorProps extends Omit<ComponentProps<typeof BaseSeparator>, "children"> {
+    /** Centered text (e.g. "Today", "or"). Horizontal only. */
+    label?: ReactNode;
+    /** Stronger line for section breaks. */
+    strong?: boolean;
+}
+/** A hairline divider. With `label`, two lines flank centered text. */
+export declare function Separator({ orientation, label, strong, className, ...props }: SeparatorProps): import("react").JSX.Element;

package/dist/components/separator.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import { cn, resolveClassName } from "../lib/cn.js";
+/** A hairline divider. With `label`, two lines flank centered text. */
+export function Separator({ orientation = "horizontal", label, strong = false, className, ...props }) {
+    const line = strong ? "bg-border" : "bg-border-subtle";
+    if (label !== undefined && orientation === "horizontal") {
+        return (_jsxs(BaseSeparator, { "data-slot": "separator", orientation: "horizontal", className: (state) => cn("flex w-full items-center gap-3 text-xs font-medium text-fg-subtle", resolveClassName(className, state)), ...props, children: [_jsx("span", { "aria-hidden": true, className: cn("h-px flex-1", line) }), _jsx("span", { className: "shrink-0 select-none", children: label }), _jsx("span", { "aria-hidden": true, className: cn("h-px flex-1", line) })] }));
+    }
+    return (_jsx(BaseSeparator, { "data-slot": "separator", orientation: orientation, className: (state) => cn("shrink-0", line, orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch", resolveClassName(className, state)), ...props }));
+}

package/dist/components/sheet.d.ts

@@ -0,0 +1,101 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+/** The edge a sheet slides from; `start` and `end` follow the writing direction. */
+export type SheetSide = "start" | "end" | "top" | "bottom";
+declare const sheetPopupStyles: import("tailwind-variants").TVReturnType<{
+    side: {
+        end: string[];
+        start: string[];
+        bottom: string[];
+        top: string[];
+    };
+    /**
+     * Side sheets' width: sm for a short form, md for a list with
+     * detail, lg for a two-column editor. Under 1280 px windows md narrows to 440 px and lg to 520 px.
+     */
+    size: {
+        sm: "";
+        md: "";
+        lg: "";
+    };
+}, undefined, string[], {
+    side: {
+        end: string[];
+        start: string[];
+        bottom: string[];
+        top: string[];
+    };
+    /**
+     * Side sheets' width: sm for a short form, md for a list with
+     * detail, lg for a two-column editor. Under 1280 px windows md narrows to 440 px and lg to 520 px.
+     */
+    size: {
+        sm: "";
+        md: "";
+        lg: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    side: {
+        end: string[];
+        start: string[];
+        bottom: string[];
+        top: string[];
+    };
+    /**
+     * Side sheets' width: sm for a short form, md for a list with
+     * detail, lg for a two-column editor. Under 1280 px windows md narrows to 440 px and lg to 520 px.
+     */
+    size: {
+        sm: "";
+        md: "";
+        lg: "";
+    };
+}, undefined>>;
+type SheetVariants = VariantProps<typeof sheetPopupStyles>;
+export type SheetSize = NonNullable<SheetVariants["size"]>;
+export interface SheetRootProps extends Omit<ComponentProps<typeof BaseDrawer.Root>, "swipeDirection"> {
+    /** Edge the sheet slides from; also sets the swipe-to-dismiss direction. */
+    side?: SheetSide;
+}
+/** Drawer root with `side` mapped to Base UI's `swipeDirection`. */
+export declare function SheetRoot({ side, ...props }: SheetRootProps): import("react").JSX.Element;
+export declare const SheetTrigger: BaseDrawer.Trigger;
+export declare const SheetClose: BaseDrawer.Close;
+export interface SheetContentProps extends ComponentProps<typeof BaseDrawer.Popup> {
+    /** Must match the `side` passed to SheetRoot. */
+    side?: SheetSide;
+    /** Render the corner close button. */
+    closable?: boolean;
+    /** Side sheets' width: sm 420 · md 520 · lg 640 px. */
+    size?: SheetSize;
+}
+/** Portal + backdrop + viewport + popup, sliding from `side`. */
+export declare function SheetContent({ side, size, closable, className, children, ...props }: SheetContentProps): import("react").JSX.Element;
+export declare function SheetHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** Scrollable middle region. */
+export declare function SheetBody({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SheetFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SheetTitle({ className, ...props }: ComponentProps<typeof BaseDrawer.Title>): import("react").JSX.Element;
+export declare function SheetDescription({ className, ...props }: ComponentProps<typeof BaseDrawer.Description>): import("react").JSX.Element;
+export declare function SheetCloseButton({ className, "aria-label": ariaLabel, ...props }: ComponentProps<typeof BaseDrawer.Close>): import("react").JSX.Element;
+export interface SheetProps {
+    /** Optional trigger element; must accept a ref and DOM props (e.g. <Button>). */
+    trigger?: ReactElement;
+    side?: SheetSide;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: ComponentProps<typeof BaseDrawer.Root>["onOpenChange"];
+    closable?: boolean;
+    /** Side sheets' width: sm 420 · md 520 · lg 640 px. */
+    size?: SheetSize;
+    /** Popup class. */
+    className?: string;
+}
+/** Convenience wrapper with header/body/footer layout. */
+export declare function Sheet({ trigger, side, title, description, children, footer, open, defaultOpen, onOpenChange, closable, size, className, }: SheetProps): import("react").JSX.Element;
+export {};

package/dist/components/sheet.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import { X } from "lucide-react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn, tv, withBase } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { iconButtonStyles } from "./button.js";
+import { dialogDescriptionClass, dialogTitleClass } from "./dialog.js";
+/** Base UI swipes on screen: an `end` sheet is dismissed rightward left to right, leftward right to left. */
+function swipeOf(side, direction) {
+    switch (side) {
+        case "top":
+            return "up";
+        case "bottom":
+            return "down";
+        case "start":
+            return direction === "rtl" ? "right" : "left";
+        case "end":
+            return direction === "rtl" ? "left" : "right";
+        default: {
+            const never = side;
+            return never;
+        }
+    }
+}
+const sheetViewport = tv({
+    base: "fixed inset-0 z-(--z-overlay) flex p-2 outline-none",
+    variants: {
+        side: {
+            start: "items-stretch justify-start",
+            end: "items-stretch justify-end",
+            top: "items-start justify-center",
+            bottom: "items-end justify-center",
+        },
+    },
+});
+const sheetPopupStyles = tv({
+    base: [
+        "relative flex flex-col overflow-hidden rounded-2xl border border-border-subtle bg-surface-overlay text-fg outline-none",
+        "[box-shadow:var(--shadow-xl),var(--shadow-inset-edge)] touch-auto overscroll-contain",
+        // Spring in; release speed follows swipe velocity; follow the finger 1:1 while swiping.
+        "transition-[transform,opacity] duration-(--duration-spring-smooth) ease-(--ease-spring-smooth)",
+        "data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*320ms)] data-ending-style:ease-(--ease-out)",
+        "data-swiping:select-none data-swiping:duration-0",
+        "motion-reduce:data-starting-style:opacity-0 motion-reduce:data-ending-style:opacity-0",
+        "motion-reduce:data-starting-style:[transform:none] motion-reduce:data-ending-style:[transform:none]",
+    ],
+    variants: {
+        side: {
+            end: [
+                "h-full max-w-[calc(100vw-1rem)]",
+                "[transform:translateX(var(--drawer-swipe-movement-x))]",
+                "data-starting-style:[transform:translateX(calc(100%+0.75rem))] data-ending-style:[transform:translateX(calc(100%+0.75rem))]",
+                "rtl:data-starting-style:[transform:translateX(calc(-100%-0.75rem))] rtl:data-ending-style:[transform:translateX(calc(-100%-0.75rem))]",
+            ],
+            start: [
+                "h-full max-w-[calc(100vw-1rem)]",
+                "[transform:translateX(var(--drawer-swipe-movement-x))]",
+                "data-starting-style:[transform:translateX(calc(-100%-0.75rem))] data-ending-style:[transform:translateX(calc(-100%-0.75rem))]",
+                "rtl:data-starting-style:[transform:translateX(calc(100%+0.75rem))] rtl:data-ending-style:[transform:translateX(calc(100%+0.75rem))]",
+            ],
+            bottom: [
+                "max-h-[85dvh] w-full max-w-[720px]",
+                "[transform:translateY(calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)))]",
+                "data-starting-style:[transform:translateY(calc(100%+0.75rem))] data-ending-style:[transform:translateY(calc(100%+0.75rem))]",
+            ],
+            top: [
+                "max-h-[85dvh] w-full max-w-[720px]",
+                "[transform:translateY(var(--drawer-swipe-movement-y))]",
+                "data-starting-style:[transform:translateY(calc(-100%-0.75rem))] data-ending-style:[transform:translateY(calc(-100%-0.75rem))]",
+            ],
+        },
+        /**
+         * Side sheets' width: sm for a short form, md for a list with
+         * detail, lg for a two-column editor. Under 1280 px windows md narrows to 440 px and lg to 520 px.
+         */
+        size: {
+            sm: "",
+            md: "",
+            lg: "",
+        },
+    },
+    compoundVariants: [
+        { side: ["end", "start"], size: "sm", class: "w-[420px]" },
+        { side: ["end", "start"], size: "md", class: "w-[520px] max-xl:w-[440px]" },
+        { side: ["end", "start"], size: "lg", class: "w-[640px] max-xl:w-[520px]" },
+    ],
+    defaultVariants: { side: "end", size: "sm" },
+});
+/** Drawer root with `side` mapped to Base UI's `swipeDirection`. */
+export function SheetRoot({ side = "end", ...props }) {
+    const direction = useDirection();
+    return _jsx(BaseDrawer.Root, { swipeDirection: swipeOf(side, direction), ...props });
+}
+export const SheetTrigger = BaseDrawer.Trigger;
+export const SheetClose = BaseDrawer.Close;
+/** Portal + backdrop + viewport + popup, sliding from `side`. */
+export function SheetContent({ side = "end", size = "sm", closable = true, className, children, ...props }) {
+    const container = usePortalContainer();
+    return (_jsxs(BaseDrawer.Portal, { container: container, children: [_jsx(BaseDrawer.Backdrop, { "data-slot": "sheet-backdrop", className: cn("fixed inset-0 z-(--z-overlay) min-h-dvh bg-scrim backdrop-blur-[2px]", "opacity-[calc(1-var(--drawer-swipe-progress,0))] transition-opacity duration-(--duration-moderate) ease-(--ease-out)", 
+                // A closing backdrop lets a click through to what's under it.
+                "data-starting-style:opacity-0 data-ending-style:pointer-events-none data-ending-style:opacity-0 data-swiping:duration-0", "supports-[-webkit-touch-callout:none]:absolute") }), _jsx(BaseDrawer.Viewport, { "data-slot": "sheet-viewport", className: sheetViewport({ side }), children: _jsxs(BaseDrawer.Popup, { "data-slot": "sheet", "data-side": side, className: withBase(sheetPopupStyles({ side, size }), className), ...props, children: [side === "bottom" && (_jsx("div", { "aria-hidden": true, className: "mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-border-strong" })), _jsx(BaseDrawer.Content, { className: "flex min-h-0 flex-1 flex-col", children: children }), closable && _jsx(SheetCloseButton, {})] }) })] }));
+}
+export function SheetHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex shrink-0 flex-col gap-1 px-5 pt-5 pb-3 pe-12", className), ...props }));
+}
+/** Scrollable middle region. */
+export function SheetBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-body", className: cn("min-h-0 flex-1 overflow-y-auto px-5 pb-4", className), ...props }));
+}
+export function SheetFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-footer", className: cn("flex shrink-0 items-center justify-end gap-2 border-t border-border-subtle px-5 py-3", className), ...props }));
+}
+export function SheetTitle({ className, ...props }) {
+    return (_jsx(BaseDrawer.Title, { "data-slot": "sheet-title", className: withBase(cn(dialogTitleClass, "text-md"), className), ...props }));
+}
+export function SheetDescription({ className, ...props }) {
+    return (_jsx(BaseDrawer.Description, { "data-slot": "sheet-description", className: withBase(cn(dialogDescriptionClass, "text-sm"), className), ...props }));
+}
+export function SheetCloseButton({ className, "aria-label": ariaLabel, ...props }) {
+    const t = useUiStrings().primitives;
+    return (_jsx(BaseDrawer.Close, { "data-slot": "sheet-close", "aria-label": ariaLabel ?? t.close, className: withBase(cn(iconButtonStyles({ variant: "ghost", size: "sm" }), "absolute top-3.5 end-3.5"), className), ...props, children: _jsx(X, { "aria-hidden": true }) }));
+}
+/** Convenience wrapper with header/body/footer layout. */
+export function Sheet({ trigger, side = "end", title, description, children, footer, open, defaultOpen, onOpenChange, closable, size, className, }) {
+    return (_jsxs(SheetRoot, { side: side, ...(open !== undefined && { open }), ...(defaultOpen !== undefined && { defaultOpen }), ...(onOpenChange && { onOpenChange }), children: [trigger && _jsx(BaseDrawer.Trigger, { render: trigger }), _jsxs(SheetContent, { side: side, ...(size !== undefined && { size }), ...(closable !== undefined && { closable }), className: className, children: [(title !== undefined || description !== undefined) && (_jsxs(SheetHeader, { children: [title !== undefined && _jsx(SheetTitle, { children: title }), description !== undefined && _jsx(SheetDescription, { children: description })] })), children !== undefined && _jsx(SheetBody, { children: children }), footer !== undefined && _jsx(SheetFooter, { children: footer })] })] }));
+}

package/dist/components/shortcut-recorder.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+export interface ShortcutRecorderProps {
+    /** The shortcut now, as logical keys (`["mod", "shift", "space"]`); `null` when there is none. */
+    readonly keys: readonly string[] | null;
+    /**
+     * The shortcut a key press makes, in the caller's own format, or `undefined` when the press can't
+     * be one (a key without the modifier the shortcut needs).
+     */
+    readonly parse: (event: KeyboardEvent) => string | undefined;
+    /**
+     * What `parse` takes besides the key, for the hint after a refused press: any one of these
+     * modifiers (logical keys: `mod`, `ctrl`, `alt`, `shift`), or a function key alone when
+     * `functionKey` is set.
+     */
+    readonly needs: {
+        readonly modifiers: readonly string[];
+        readonly functionKey?: boolean;
+    };
+    /** A press `parse` made a shortcut of. */
+    readonly onRecord: (shortcut: string) => void;
+    /** Actions beside Change while it isn't recording: Reset, Turn off. */
+    readonly children?: ReactNode;
+    readonly className?: string | undefined;
+}
+/**
+ * Records a keyboard shortcut. Change starts recording and the next combination becomes the
+ * shortcut; Escape, a second click on Change or focus leaving it stops without one. While recording,
+ * every key press is the recorder's: the app's own shortcuts don't act on it. A press that can't be a
+ * shortcut says what it needs; the state and the recorded keys are announced.
+ */
+export declare function ShortcutRecorder({ keys, parse, needs, onRecord, children, className, }: ShortcutRecorderProps): import("react").JSX.Element;