@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/popover.d.ts

@@ -0,0 +1,52 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+export declare const PopoverRoot: typeof BasePopover.Root;
+export declare const PopoverTrigger: BasePopover.Trigger;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type PositionerProps = ComponentProps<typeof BasePopover.Positioner>;
+export interface PopoverContentProps extends ComponentProps<typeof BasePopover.Popup> {
+    /**
+     * The anchor's side it opens on. `inline-start` and `inline-end` follow the writing direction, so a
+     * card beside a sidebar's link stays off the sidebar in a right-to-left language too.
+     */
+    side?: PositionerProps["side"];
+    align?: PositionerProps["align"];
+    /** Its distance from the anchor; a function of both boxes where it depends on them. */
+    sideOffset?: PositionerProps["sideOffset"];
+    alignOffset?: number;
+    /**
+     * What it points at when that isn't its trigger: an element on the page (a tour's stop, a member's
+     * figure in the office), or a function that finds it.
+     */
+    anchor?: PositionerProps["anchor"];
+    /**
+     * The positioner's own props. A `className` here merges with the overlay layer's: a `z-*` of its own
+     * puts the popover in another layer.
+     */
+    positionerProps?: Omit<PositionerProps, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">;
+}
+/** Portal + positioner + popup. Padded card surface; compose Title/Description/Close inside. */
+export declare function PopoverContent({ side, align, sideOffset, alignOffset, anchor, positionerProps, className, children, ...props }: PopoverContentProps): import("react").JSX.Element;
+export declare function PopoverHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function PopoverTitle({ className, ...props }: ComponentProps<typeof BasePopover.Title>): import("react").JSX.Element;
+export declare function PopoverDescription({ className, ...props }: ComponentProps<typeof BasePopover.Description>): import("react").JSX.Element;
+/** Icon-only close in the top-right corner. */
+export declare function PopoverCloseButton({ className, "aria-label": ariaLabel, ...props }: ComponentProps<typeof BasePopover.Close>): import("react").JSX.Element;
+export interface PopoverProps {
+    /** The trigger element; must accept a ref and DOM props (e.g. <Button>). */
+    trigger: ReactElement;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    side?: PopoverContentProps["side"];
+    align?: PopoverContentProps["align"];
+    /** Shows the corner close button. */
+    closable?: boolean;
+    open?: boolean;
+    onOpenChange?: ComponentProps<typeof BasePopover.Root>["onOpenChange"];
+    /** Popup class (e.g. a width). */
+    className?: string;
+}
+/** Convenience wrapper: `<Popover trigger={<Button/>} title="…" description="…">…</Popover>`. */
+export declare function Popover({ trigger, title, description, children, side, align, closable, open, onOpenChange, className, }: PopoverProps): import("react").JSX.Element;
+export {};

package/dist/components/popover.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { X } from "lucide-react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn, withBase } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { iconButtonStyles } from "./button.js";
+export const PopoverRoot = BasePopover.Root;
+export const PopoverTrigger = BasePopover.Trigger;
+export const PopoverClose = BasePopover.Close;
+/** Portal + positioner + popup. Padded card surface; compose Title/Description/Close inside. */
+export function PopoverContent({ side = "bottom", align = "center", sideOffset, alignOffset = 0, anchor, positionerProps, className, children, ...props }) {
+    const container = usePortalContainer();
+    const { className: positionerClassName, ...positioner } = positionerProps ?? {};
+    return (_jsx(BasePopover.Portal, { container: container, children: _jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset ?? 6, alignOffset: alignOffset, anchor: anchor, collisionPadding: 8, className: withBase("z-(--z-overlay) outline-none", positionerClassName), ...positioner, children: _jsx(BasePopover.Popup, { "data-slot": "popover", className: withBase(cn("popup-motion surface-raised relative w-72 max-w-(--available-width) rounded-xl p-4 text-base text-fg outline-none"), className), ...props, children: children }) }) }));
+}
+export function PopoverHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-header", className: cn("mb-3 flex flex-col gap-1 pe-6", className), ...props }));
+}
+export function PopoverTitle({ className, ...props }) {
+    return (_jsx(BasePopover.Title, { "data-slot": "popover-title", className: withBase("text-md font-semibold leading-tight text-fg", className), ...props }));
+}
+export function PopoverDescription({ className, ...props }) {
+    return (_jsx(BasePopover.Description, { "data-slot": "popover-description", className: withBase("text-sm text-fg-muted", className), ...props }));
+}
+/** Icon-only close in the top-right corner. */
+export function PopoverCloseButton({ className, "aria-label": ariaLabel, ...props }) {
+    const t = useUiStrings().primitives;
+    return (_jsx(BasePopover.Close, { "data-slot": "popover-close", "aria-label": ariaLabel ?? t.close, className: withBase(cn(iconButtonStyles({ variant: "ghost", size: "xs" }), "absolute top-3 end-3"), className), ...props, children: _jsx(X, { "aria-hidden": true }) }));
+}
+/** Convenience wrapper: `<Popover trigger={<Button/>} title="…" description="…">…</Popover>`. */
+export function Popover({ trigger, title, description, children, side, align, closable = false, open, onOpenChange, className, }) {
+    const hasHeader = title !== undefined || description !== undefined;
+    return (_jsxs(BasePopover.Root, { ...(open !== undefined && { open }), ...(onOpenChange && { onOpenChange }), children: [_jsx(BasePopover.Trigger, { render: trigger }), _jsxs(PopoverContent, { ...(side && { side }), ...(align && { align }), className: className, children: [closable && _jsx(PopoverCloseButton, {}), hasHeader && (_jsxs(PopoverHeader, { className: children === undefined ? "mb-0" : undefined, children: [title !== undefined && _jsx(PopoverTitle, { children: title }), description !== undefined && _jsx(PopoverDescription, { children: description })] })), children] })] }));
+}

package/dist/components/progress.d.ts

@@ -0,0 +1,389 @@
+import { Meter } from "@base-ui/react/meter";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const progressStyles: import("tailwind-variants").TVReturnType<{
+    /** Ink by default. `accent` is a sanctioned blue micro-moment — use it for the hero task only. */
+    tone: {
+        ink: {
+            fill: string;
+            sheen: string;
+        };
+        accent: {
+            fill: string;
+            sheen: string;
+        };
+        success: {
+            fill: string;
+            sheen: string;
+        };
+        warning: {
+            fill: string;
+            sheen: string;
+        };
+        danger: {
+            fill: string;
+            sheen: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    track: string;
+    fill: string[];
+    sheen: string[];
+}, undefined, {
+    /** Ink by default. `accent` is a sanctioned blue micro-moment — use it for the hero task only. */
+    tone: {
+        ink: {
+            fill: string;
+            sheen: string;
+        };
+        accent: {
+            fill: string;
+            sheen: string;
+        };
+        success: {
+            fill: string;
+            sheen: string;
+        };
+        warning: {
+            fill: string;
+            sheen: string;
+        };
+        danger: {
+            fill: string;
+            sheen: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    track: string;
+    fill: string[];
+    sheen: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    /** Ink by default. `accent` is a sanctioned blue micro-moment — use it for the hero task only. */
+    tone: {
+        ink: {
+            fill: string;
+            sheen: string;
+        };
+        accent: {
+            fill: string;
+            sheen: string;
+        };
+        success: {
+            fill: string;
+            sheen: string;
+        };
+        warning: {
+            fill: string;
+            sheen: string;
+        };
+        danger: {
+            fill: string;
+            sheen: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    track: string;
+    fill: string[];
+    sheen: string[];
+}>>;
+export interface ProgressProps extends Omit<ComponentProps<typeof BaseProgress.Root>, "children" | "value">, VariantProps<typeof progressStyles> {
+    /** Current value; `null` renders the indeterminate sheen. */
+    value: number | null;
+    /** Visible label, wired to the progressbar's accessible name. */
+    label?: ReactNode;
+    /** Show the formatted value (e.g. "42%") opposite the label. */
+    showValue?: boolean;
+}
+/** Linear progress for long-running tasks. Determinate fill or an indeterminate sliding sheen. */
+export declare function Progress({ value, min, max, label, showValue, tone, size, className, ...props }: ProgressProps): import("react").JSX.Element;
+declare const meterBarStyles: import("tailwind-variants").TVReturnType<{
+    tone: {
+        ink: {
+            fill: string;
+        };
+        muted: {
+            fill: string;
+        };
+        subtle: {
+            fill: string;
+        };
+        success: {
+            fill: string;
+        };
+        warning: {
+            fill: string;
+        };
+        danger: {
+            fill: string;
+        };
+    };
+    size: {
+        xs: {
+            track: string;
+        };
+        sm: {
+            track: string;
+        };
+    };
+}, {
+    track: string;
+    fill: string;
+}, undefined, {
+    tone: {
+        ink: {
+            fill: string;
+        };
+        muted: {
+            fill: string;
+        };
+        subtle: {
+            fill: string;
+        };
+        success: {
+            fill: string;
+        };
+        warning: {
+            fill: string;
+        };
+        danger: {
+            fill: string;
+        };
+    };
+    size: {
+        xs: {
+            track: string;
+        };
+        sm: {
+            track: string;
+        };
+    };
+}, {
+    track: string;
+    fill: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        ink: {
+            fill: string;
+        };
+        muted: {
+            fill: string;
+        };
+        subtle: {
+            fill: string;
+        };
+        success: {
+            fill: string;
+        };
+        warning: {
+            fill: string;
+        };
+        danger: {
+            fill: string;
+        };
+    };
+    size: {
+        xs: {
+            track: string;
+        };
+        sm: {
+            track: string;
+        };
+    };
+}, {
+    track: string;
+    fill: string;
+}>>;
+export interface MeterBarProps extends VariantProps<typeof meterBarStyles> {
+    /** From 0 to `max`; clamped. */
+    readonly value: number;
+    readonly max?: number;
+    /** Width and placement (`w-10`, `flex-1`). */
+    readonly className?: string;
+}
+/**
+ * A thin inline bar filled to a value, for a figure already said in words beside it (a score, a
+ * table row's share): decorative, so it stays out of the accessibility tree. It fills from the
+ * start edge, so it reads right in a right-to-left language too. A meter people read on its own is
+ * `Progress` or `ProgressRing`.
+ */
+export declare function MeterBar({ value, max, tone, size, className }: MeterBarProps): import("react").JSX.Element;
+declare const ring: import("tailwind-variants").TVReturnType<{
+    level: {
+        normal: {
+            arc: string;
+            value: string;
+        };
+        warning: {
+            arc: string;
+            value: string;
+        };
+        danger: {
+            arc: string;
+            value: string;
+        };
+    };
+    size: {
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        /** A card's own meter (a usage card's limit). */
+        xl: {
+            svg: string;
+        };
+    };
+}, {
+    root: string;
+    svg: string;
+    arc: string[];
+    value: string;
+}, undefined, {
+    level: {
+        normal: {
+            arc: string;
+            value: string;
+        };
+        warning: {
+            arc: string;
+            value: string;
+        };
+        danger: {
+            arc: string;
+            value: string;
+        };
+    };
+    size: {
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        /** A card's own meter (a usage card's limit). */
+        xl: {
+            svg: string;
+        };
+    };
+}, {
+    root: string;
+    svg: string;
+    arc: string[];
+    value: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    level: {
+        normal: {
+            arc: string;
+            value: string;
+        };
+        warning: {
+            arc: string;
+            value: string;
+        };
+        danger: {
+            arc: string;
+            value: string;
+        };
+    };
+    size: {
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        /** A card's own meter (a usage card's limit). */
+        xl: {
+            svg: string;
+        };
+    };
+}, {
+    root: string;
+    svg: string;
+    arc: string[];
+    value: string;
+}>>;
+export type ProgressRingLevel = "normal" | "warning" | "danger";
+export interface ProgressRingProps extends Omit<ComponentProps<typeof Meter.Root>, "children" | "render">, Omit<VariantProps<typeof ring>, "level"> {
+    value: number;
+    /** Percentage at which the ring turns amber. */
+    warningAt?: number;
+    /** Percentage at which the ring turns red. */
+    dangerAt?: number;
+    /** Force a level instead of deriving it from the thresholds. */
+    level?: ProgressRingLevel;
+    /** Show the formatted value next to the ring — keeps the state legible without color. */
+    showValue?: boolean;
+    /** Required accessible name, e.g. "Context window". */
+    "aria-label": string;
+}
+export interface ProgressRingGlyphProps extends Omit<VariantProps<typeof ring>, "level"> {
+    value: number;
+    min?: number;
+    max?: number;
+    warningAt?: number;
+    dangerAt?: number;
+    level?: ProgressRingLevel;
+    className?: string;
+}
+/**
+ * The ring alone, for a control whose own label already says the amount (a button "$4 today of the
+ * $25 daily budget"): no meter role and no hidden text, so the control's name stays its visible text.
+ */
+export declare function ProgressRingGlyph({ value, min, max, warningAt, dangerAt, level, size, className, }: ProgressRingGlyphProps): import("react").JSX.Element;
+/** Tiny circular meter for token / context-window usage. Escalates at warning & danger thresholds. */
+export declare function ProgressRing({ value, min, max, warningAt, dangerAt, level, size, showValue, className, ...props }: ProgressRingProps): import("react").JSX.Element;
+export {};

package/dist/components/progress.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { useFormatters, useUiLocale, useUiStrings } from "../i18n/provider.js";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+import { useInlineSign } from "../lib/direction.js";
+const clampPercent = (value, min, max) => max === min ? 0 : Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+/* ------------------------------------------------------------------------------------------ */
+/* Progress (linear)                                                                          */
+/* ------------------------------------------------------------------------------------------ */
+const progressStyles = tv({
+    slots: {
+        root: "grid w-full grid-cols-[1fr_auto] items-baseline gap-x-3 gap-y-1.5",
+        label: "min-w-0 truncate text-sm text-fg-muted",
+        value: "col-start-2 text-sm text-fg-subtle tabular",
+        // The shared track (system.md §10.8): visible on every surface, popovers and dark mode included.
+        track: "relative col-span-2 overflow-hidden rounded-full bg-track",
+        fill: [
+            "absolute inset-0 rounded-full",
+            "transition-transform duration-(--duration-spring-smooth) ease-(--ease-spring-smooth) motion-reduce:transition-none",
+        ],
+        sheen: [
+            "absolute inset-0 bg-linear-to-r from-transparent to-transparent animate-sheen",
+            "motion-reduce:animate-none motion-reduce:opacity-40",
+        ],
+    },
+    variants: {
+        /** Ink by default. `accent` is a sanctioned blue micro-moment — use it for the hero task only. */
+        tone: {
+            ink: { fill: "bg-fg", sheen: "via-fg/70" },
+            accent: { fill: "bg-accent", sheen: "via-accent" },
+            success: { fill: "bg-success", sheen: "via-success" },
+            warning: { fill: "bg-warning", sheen: "via-warning" },
+            danger: { fill: "bg-danger", sheen: "via-danger" },
+        },
+        size: {
+            sm: { track: "h-1" },
+            md: { track: "h-1.5" },
+            lg: { track: "h-2" },
+        },
+    },
+    defaultVariants: { tone: "ink", size: "md" },
+});
+/** Linear progress for long-running tasks. Determinate fill or an indeterminate sliding sheen. */
+export function Progress({ value, min = 0, max = 100, label, showValue = false, tone, size, className, ...props }) {
+    const locale = useUiLocale();
+    const t = useUiStrings().progress;
+    const formatters = useFormatters();
+    const inline = useInlineSign();
+    const styles = progressStyles({ tone, size });
+    const percent = value === null ? null : clampPercent(value, min, max);
+    return (_jsxs(BaseProgress.Root, { "data-slot": "progress", value: value, min: min, max: max, locale: locale, getAriaValueText: () => (percent === null ? t.indeterminate : formatters.percent(percent)), className: (state) => cn(styles.root(), resolveClassName(className, state)), ...props, children: [label !== undefined && _jsx(BaseProgress.Label, { className: styles.label(), children: label }), showValue && percent !== null && (_jsx(BaseProgress.Value, { className: styles.value(), children: () => formatters.percent(percent) })), _jsx(BaseProgress.Track, { className: styles.track(), children: percent === null ? (_jsx("span", { "aria-hidden": true, className: styles.sheen() })) : (_jsx("span", { "aria-hidden": true, className: styles.fill(), style: { transform: `translateX(${-inline * (100 - percent)}%)` } })) })] }));
+}
+/* ------------------------------------------------------------------------------------------ */
+/* MeterBar (inline, decorative)                                                              */
+/* ------------------------------------------------------------------------------------------ */
+const meterBarStyles = tv({
+    slots: {
+        track: "relative block overflow-hidden rounded-full bg-track",
+        fill: "absolute inset-y-0 start-0 rounded-full",
+    },
+    variants: {
+        tone: {
+            ink: { fill: "bg-fg" },
+            muted: { fill: "bg-fg-muted" },
+            subtle: { fill: "bg-fg-subtle" },
+            success: { fill: "bg-success" },
+            warning: { fill: "bg-warning" },
+            danger: { fill: "bg-danger" },
+        },
+        size: {
+            xs: { track: "h-1" },
+            sm: { track: "h-1.5" },
+        },
+    },
+    defaultVariants: { tone: "muted", size: "xs" },
+});
+/**
+ * A thin inline bar filled to a value, for a figure already said in words beside it (a score, a
+ * table row's share): decorative, so it stays out of the accessibility tree. It fills from the
+ * start edge, so it reads right in a right-to-left language too. A meter people read on its own is
+ * `Progress` or `ProgressRing`.
+ */
+export function MeterBar({ value, max = 100, tone, size, className }) {
+    const styles = meterBarStyles({ tone, size });
+    return (_jsx("span", { "aria-hidden": true, "data-slot": "meter-bar", className: styles.track({ class: className }), children: _jsx("span", { className: styles.fill(), style: { inlineSize: `${clampPercent(value, 0, max)}%` } }) }));
+}
+/* ------------------------------------------------------------------------------------------ */
+/* ProgressRing (compact meter)                                                               */
+/* ------------------------------------------------------------------------------------------ */
+const ring = tv({
+    slots: {
+        root: "inline-flex shrink-0 items-center gap-1.5 align-middle",
+        svg: "shrink-0 -rotate-90",
+        arc: [
+            "stroke-current transition-[stroke-dashoffset,color] duration-(--duration-spring-smooth) ease-(--ease-spring-smooth)",
+            "motion-reduce:transition-none",
+        ],
+        value: "text-xs font-medium tabular",
+    },
+    variants: {
+        level: {
+            normal: { arc: "text-fg-muted", value: "text-fg-muted" },
+            warning: { arc: "text-warning", value: "text-warning-fg" },
+            danger: { arc: "text-danger", value: "text-danger-fg" },
+        },
+        size: {
+            sm: { svg: "size-3.5" },
+            md: { svg: "size-4" },
+            lg: { svg: "size-5" },
+            /** A card's own meter (a usage card's limit). */
+            xl: { svg: "size-11" },
+        },
+    },
+    defaultVariants: { level: "normal", size: "md" },
+});
+function ringLevel(percent, warningAt, dangerAt, level) {
+    return level ?? (percent >= dangerAt ? "danger" : percent >= warningAt ? "warning" : "normal");
+}
+function RingArc({ percent, styles, }) {
+    return (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, className: styles.svg(), children: [_jsx("circle", { cx: "10", cy: "10", r: "8", strokeWidth: "2.5", className: "stroke-track" }), _jsx("circle", { cx: "10", cy: "10", r: "8", strokeWidth: "2.5", strokeLinecap: "round", pathLength: 100, strokeDasharray: "100 100", strokeDashoffset: 100 - percent, opacity: percent === 0 ? 0 : 1, className: styles.arc() })] }));
+}
+/**
+ * The ring alone, for a control whose own label already says the amount (a button "$4 today of the
+ * $25 daily budget"): no meter role and no hidden text, so the control's name stays its visible text.
+ */
+export function ProgressRingGlyph({ value, min = 0, max = 100, warningAt = 75, dangerAt = 90, level, size, className, }) {
+    const percent = clampPercent(value, min, max);
+    const derived = ringLevel(percent, warningAt, dangerAt, level);
+    const styles = ring({ level: derived, size });
+    return (_jsx("span", { "aria-hidden": true, "data-slot": "progress-ring", "data-level": derived, className: cn(styles.root(), className), children: _jsx(RingArc, { percent: percent, styles: styles }) }));
+}
+/** Tiny circular meter for token / context-window usage. Escalates at warning & danger thresholds. */
+export function ProgressRing({ value, min = 0, max = 100, warningAt = 75, dangerAt = 90, level, size, showValue = false, className, ...props }) {
+    const percent = clampPercent(value, min, max);
+    const locale = useUiLocale();
+    const formatters = useFormatters();
+    const derived = ringLevel(percent, warningAt, dangerAt, level);
+    const styles = ring({ level: derived, size });
+    return (_jsxs(Meter.Root, { "data-slot": "progress-ring", "data-level": derived, value: value, min: min, max: max, locale: locale, getAriaValueText: () => formatters.percent(percent), render: _jsx("span", {}), className: (state) => cn(styles.root(), resolveClassName(className, state)), ...props, children: [_jsx(RingArc, { percent: percent, styles: styles }), showValue && _jsx(Meter.Value, { className: styles.value(), children: () => formatters.percent(percent) })] }));
+}

package/dist/components/radio.d.ts

@@ -0,0 +1,65 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+export interface RadioGroupProps extends ComponentProps<typeof BaseRadioGroup> {
+    orientation?: "vertical" | "horizontal";
+}
+/** Single choice from a set of <Radio>/<RadioCard>. Arrow keys move the selection. */
+export declare function RadioGroup({ orientation, className, ...props }: RadioGroupProps): import("react").JSX.Element;
+declare const radioStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "size-3.5";
+        md: "size-4";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "size-3.5";
+        md: "size-4";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "size-3.5";
+        md: "size-4";
+    };
+}, undefined>>;
+export interface RadioProps extends Omit<ComponentProps<typeof BaseRadio.Root>, "children">, VariantProps<typeof radioStyles> {
+    label?: ReactNode;
+    description?: ReactNode;
+}
+export declare function Radio({ size, label, description, className, ...props }: RadioProps): import("react").JSX.Element;
+export interface RadioCardProps extends Omit<ComponentProps<typeof BaseRadio.Root>, "children"> {
+    label: ReactNode;
+    description?: ReactNode;
+    /** Leading icon. */
+    icon?: ReactNode;
+    /** Trailing adornment (badge, shortcut…). */
+    trailing?: ReactNode;
+    /**
+     * A picture of the choice across the card's top (a theme, a layout), edge to edge; the label goes
+     * under it. Decorative: the label names the choice.
+     */
+    preview?: ReactNode;
+    /**
+     * Where the preview sits: across the `top` (default), or `auto`: beside the text on the start
+     * side when the card is wide (a list of full-width cards), on top when it's narrow (cards in a row).
+     */
+    previewSide?: "top" | "auto";
+}
+/** A whole card as one radio — for weighty choices like permission modes, or ones best shown (a theme). */
+export declare function RadioCard({ label, description, icon, trailing, preview, previewSide, className, ...props }: RadioCardProps): import("react").JSX.Element;
+export interface RadioSwatchProps extends Omit<ComponentProps<typeof BaseRadio.Root>, "children" | "aria-label"> {
+    /** The choice's name, its accessible name: "Teal", "Style 3". */
+    label: string;
+    /** A colour to show (any CSS colour, e.g. a token's `var(--…)`). */
+    color?: string | undefined;
+    /** A picture to show instead (an avatar, an icon), sized by the caller. */
+    children?: ReactNode;
+    size?: "sm" | "md";
+}
+/**
+ * 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 declare function RadioSwatch({ label, color, children, size, className, ...props }: RadioSwatchProps): import("react").JSX.Element;
+export {};