@instruments/materia-ui 0.1.0

package/dist/components/progress/progress-root.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { Center } from "@instruments/materia-ui/components/center";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Linear progress bar showing completion from 0 to 100; pass `value={null}`
+ * for an indeterminate (empty) track. Built on Base UI Progress for accessible
+ * semantics.
+ *
+ * @bestPractice Use `Progress` for determinate 0–100 completion (`value={null}` for an indeterminate track); position in a stepped flow is `ProgressDots`.
+ * @bestPractice For a ring instead of a bar use `ProgressCircle` - it needs an explicit `label` for its native `<progress>` accessible name.
+ * @category feedback
+ */
+const Progress = ({ className, ...props }) => (_jsx(ProgressPrimitive.Root, { className: cn("bg-muted relative block h-2 w-full overflow-hidden rounded-full", className), "data-component": "progress", "data-slot": "progress", ...props, children: _jsx(ProgressPrimitive.Track, { className: "block size-full", "data-component": "progress-track", "data-slot": "progress-track", children: _jsx(ProgressPrimitive.Indicator, { className: "bg-primary transition-width block h-full data-indeterminate:hidden", "data-component": "progress-indicator", "data-slot": "progress-indicator" }) }) }));
+const clamp = (value, min, max) => {
+    if (Number.isNaN(value)) {
+        return min;
+    }
+    return Math.min(Math.max(value, min), max);
+};
+// Hoisted so the default prop is a stable reference across renders
+// (no-object-type-as-default-prop).
+const DEFAULT_VALUE_FORMATTER = (currentValue, currentMax) => `${Math.round((currentValue / currentMax) * 100)}%`;
+/**
+ * Circular progress ring with an optional centred content slot; the value is
+ * clamped to `0..max` and exposed through a visually hidden native `<progress>`.
+ */
+const ProgressCircle = ({ label, value, max = 100, size = 44, strokeWidth = 3, className, indicatorClassName, trackClassName, valueFormatter = DEFAULT_VALUE_FORMATTER, children, }) => {
+    const safeMax = Math.max(1, max);
+    const safeValue = clamp(value, 0, safeMax);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const progress = safeValue / safeMax;
+    const dashOffset = circumference * (1 - progress);
+    return (_jsxs(Center, { className: cn("relative", className), "data-component": "progress-circle", "data-slot": "progress-circle", inline: true, title: valueFormatter(safeValue, safeMax), children: [_jsx("progress", { "aria-label": label, "aria-valuetext": valueFormatter(safeValue, safeMax), className: "sr-only", max: safeMax, value: safeValue }), _jsxs("svg", { "aria-hidden": "true", className: "-rotate-90", height: size, viewBox: `0 0 ${size} ${size}`, width: size, children: [_jsx("circle", { className: cn("stroke-muted fill-none", trackClassName), cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth }), _jsx("circle", { className: cn("stroke-primary transition-stroke-dashoffset fill-none", indicatorClassName), cx: size / 2, cy: size / 2, r: radius, strokeDasharray: circumference, strokeDashoffset: dashOffset, strokeLinecap: "round", strokeWidth: strokeWidth })] }), children !== undefined && children !== null ? (_jsx(Center, { "aria-hidden": "true", className: "absolute inset-0", children: children })) : null] }));
+};
+export { Progress, ProgressCircle };

package/dist/components/progress-dots/progress-dots-root.d.ts

@@ -0,0 +1,31 @@
+interface ProgressDotsProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Current step (0-indexed) */
+    current: number;
+    /** Labels for each step (shown in tooltips) */
+    labels?: string[];
+    /** Callback when a dot is clicked. If provided, dots become clickable. */
+    onDotClick?: (index: number) => void;
+    /** Total number of steps */
+    total: number;
+}
+/**
+ * Step progress indicator driven by `current`: completed steps and the current
+ * step render as expanded pills, pending steps as small dots. Passing
+ * `onDotClick` makes dots interactive step-navigation targets; `labels` surface
+ * as hover tooltips.
+ *
+ * @example
+ * ```tsx
+ * <ProgressDots current={2} total={5} />
+ * <ProgressDots current={2} total={5} onDotClick={(i) => router.push(steps[i])} />
+ * ```
+ *
+ * @bestPractice Use `ProgressDots` for position in a short stepped flow (wizard, carousel); continuous 0–100 completion is `Progress`.
+ * @bestPractice Pass `onDotClick` only when steps are navigable - it turns each dot into a focusable button; `labels` surface as hover tooltips.
+ * @bestPractice Mount `ReducedMotionProvider` at the app root - the dots animate via `m.*` (LazyMotion).
+ * @category feedback
+ */
+export declare const ProgressDots: ({ current, total, className, labels, onDotClick, }: ProgressDotsProps) => import("react").JSX.Element;
+export {};

package/dist/components/progress-dots/progress-dots-root.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from "@instruments/materia-ui/components/flex";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@instruments/materia-ui/components/tooltip";
+import { springs } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import * as m from "motion/react-m";
+const DOT_SIZE = 6;
+const EXPANDED_WIDTH = 20;
+/**
+ * Step progress indicator driven by `current`: completed steps and the current
+ * step render as expanded pills, pending steps as small dots. Passing
+ * `onDotClick` makes dots interactive step-navigation targets; `labels` surface
+ * as hover tooltips.
+ *
+ * @example
+ * ```tsx
+ * <ProgressDots current={2} total={5} />
+ * <ProgressDots current={2} total={5} onDotClick={(i) => router.push(steps[i])} />
+ * ```
+ *
+ * @bestPractice Use `ProgressDots` for position in a short stepped flow (wizard, carousel); continuous 0–100 completion is `Progress`.
+ * @bestPractice Pass `onDotClick` only when steps are navigable - it turns each dot into a focusable button; `labels` surface as hover tooltips.
+ * @bestPractice Mount `ReducedMotionProvider` at the app root - the dots animate via `m.*` (LazyMotion).
+ * @category feedback
+ */
+export const ProgressDots = ({ current, total, className, labels, onDotClick, }) => {
+    const isInteractive = Boolean(onDotClick);
+    const dotKeys = Array.from({ length: total }, (_, index) => `progress-dot-${index}`);
+    return (_jsx(Flex, { align: "center", className: cn("gap-1.5", className), children: dotKeys.map((dotKey, i) => {
+            const isCurrent = i === current;
+            const isCompleted = i < current;
+            const isPending = i > current;
+            const label = labels?.[i];
+            const dot = (_jsx(m.button, { "aria-current": isCurrent ? "step" : undefined, "aria-label": label ?? `Step ${i + 1} of ${total}`, className: cn("h-1.5 rounded-full", {
+                    "bg-affirmative-accent": isCompleted,
+                    "bg-gray-300": isCurrent,
+                    "bg-muted": isPending,
+                    "pointer-events-auto cursor-pointer transition-opacity hover:opacity-80": isInteractive,
+                    "pointer-events-none": !isInteractive,
+                }), layout: true, onClick: () => onDotClick?.(i), style: {
+                    borderRadius: 9999,
+                    width: isCompleted || isCurrent ? EXPANDED_WIDTH : DOT_SIZE,
+                }, transition: springs.swift, type: "button" }));
+            if (label !== undefined && label !== null && label !== "") {
+                return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: dot }), _jsx(TooltipContent, { side: "bottom", sideOffset: 8, children: label })] }, dotKey));
+            }
+            return _jsx("span", { children: dot }, dotKey);
+        }) }));
+};

package/dist/components/progress-dots.d.ts

@@ -0,0 +1 @@
+export { ProgressDots } from "./progress-dots/progress-dots-root.js";

package/dist/components/progress-dots.js

@@ -0,0 +1 @@
+export { ProgressDots } from "./progress-dots/progress-dots-root.js";

package/dist/components/progress.d.ts

@@ -0,0 +1 @@
+export { Progress, ProgressCircle } from "./progress/progress-root.js";

package/dist/components/progress.js

@@ -0,0 +1 @@
+export { Progress, ProgressCircle } from "./progress/progress-root.js";

package/dist/components/quantity-control/quantity-control-root.d.ts

@@ -0,0 +1,50 @@
+import type React from "react";
+interface QuantityControlProps {
+    /**
+     * Accessible name of the quantity field, announced before its value. Name
+     * the item when a list holds several controls ("Quantity of Oak veneer").
+     * @default "Quantity"
+     */
+    label?: string | undefined;
+    /** Whether the control is disabled */
+    disabled?: boolean | undefined;
+    /** Maximum value (defaults to 99) */
+    max?: number | undefined;
+    /** Minimum value (defaults to 1) */
+    min?: number | undefined;
+    /** Called when the value should go down by one (button, Arrow Down, or press-and-hold) */
+    onDecrement: () => void;
+    /** Called when the value should go up by one (button, Arrow Up, or press-and-hold) */
+    onIncrement: () => void;
+    /** Called when remove button is clicked (when value = min). If not provided, decrement stops at `min`. */
+    onRemove?: (() => void) | undefined;
+    /** Border radius style */
+    radius?: "rounded" | "full" | undefined;
+    /** Test ID for the quantity input */
+    testId?: string | undefined;
+    /** Current quantity value */
+    value: number;
+}
+/**
+ * A compact quantity control on Base UI `NumberField`: the quantity is a
+ * number field that Arrow Up/Down step by one, and the buttons repeat while
+ * held. Shows a trash icon when quantity is at minimum and `onRemove` is set,
+ * minus icon otherwise.
+ *
+ * @example
+ * ```tsx
+ * <QuantityControl
+ *   value={quantity}
+ *   onIncrement={() => setQuantity(q => q + 1)}
+ *   onDecrement={() => setQuantity(q => q - 1)}
+ *   onRemove={() => removeItem()}
+ * />
+ * ```
+ *
+ * @bestPractice Pass `onRemove` when hitting the minimum should delete the item - the decrement button then swaps to a trash icon; without it, decrement just stops at `min`.
+ * @bestPractice It's controlled - pass the current `value` and update it in `onIncrement`/`onDecrement`, which fire once per step for clicks, arrow keys and each repeat of a held button. Typing a number is not supported.
+ * @bestPractice Tab focuses the quantity itself (the stepper buttons are skipped, as in any number field), announced by its `label`. In a list of lines, pass a `label` naming the item so each field is told apart.
+ * @category actions
+ */
+export declare const QuantityControl: ({ value, label, onIncrement, onDecrement, onRemove, min, max, disabled, radius, testId, }: QuantityControlProps) => React.JSX.Element;
+export {};

package/dist/components/quantity-control/quantity-control-root.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Minus, Plus, Trash2 } from "lucide-react";
+import { Button } from "../button.js";
+import { ButtonGroup } from "../button-group/button-group-root.js";
+/** Keys that would edit the text rather than step it; the value only moves by one. */
+const isEditingKey = (event) => !event.metaKey &&
+    !event.ctrlKey &&
+    (event.key.length === 1 ||
+        event.key === "Backspace" ||
+        event.key === "Delete" ||
+        event.key === "Home" ||
+        event.key === "End");
+/** Stops typed edits so the quantity only moves through the step callbacks. */
+const blockTextEditing = (event) => {
+    if (isEditingKey(event)) {
+        event.preventDefault();
+    }
+};
+const preventDefault = (event) => {
+    event.preventDefault();
+};
+const stepperProps = {
+    emphasis: "ghost",
+    size: "icon-xs",
+    tone: "neutral",
+};
+/**
+ * A compact quantity control on Base UI `NumberField`: the quantity is a
+ * number field that Arrow Up/Down step by one, and the buttons repeat while
+ * held. Shows a trash icon when quantity is at minimum and `onRemove` is set,
+ * minus icon otherwise.
+ *
+ * @example
+ * ```tsx
+ * <QuantityControl
+ *   value={quantity}
+ *   onIncrement={() => setQuantity(q => q + 1)}
+ *   onDecrement={() => setQuantity(q => q - 1)}
+ *   onRemove={() => removeItem()}
+ * />
+ * ```
+ *
+ * @bestPractice Pass `onRemove` when hitting the minimum should delete the item - the decrement button then swaps to a trash icon; without it, decrement just stops at `min`.
+ * @bestPractice It's controlled - pass the current `value` and update it in `onIncrement`/`onDecrement`, which fire once per step for clicks, arrow keys and each repeat of a held button. Typing a number is not supported.
+ * @bestPractice Tab focuses the quantity itself (the stepper buttons are skipped, as in any number field), announced by its `label`. In a list of lines, pass a `label` naming the item so each field is told apart.
+ * @category actions
+ */
+export const QuantityControl = ({ value, label = "Quantity", onIncrement, onDecrement, onRemove, min = 1, max = 99, disabled = false, radius = "rounded", testId, }) => {
+    const showRemove = value <= min && onRemove !== undefined;
+    const handleValueChange = (next) => {
+        if (next === null || next === value) {
+            return;
+        }
+        if (next > value) {
+            onIncrement();
+        }
+        else {
+            onDecrement();
+        }
+    };
+    return (_jsx(NumberFieldPrimitive.Root, { disabled: disabled, largeStep: 1, max: max, min: min, onValueChange: handleValueChange, smallStep: 1, step: 1, value: value, children: _jsxs(NumberFieldPrimitive.Group, { render: _jsx(ButtonGroup, { dividers: false, radius: radius, variant: "segmented" }), children: [showRemove ? (_jsx(Button, { "aria-label": "Remove item", disabled: disabled, icon: Trash2, onClick: onRemove, ...stepperProps })) : (_jsx(NumberFieldPrimitive.Decrement, { render: _jsx(Button, { "aria-label": "Decrease quantity", icon: Minus, ...stepperProps }) })), _jsx(NumberFieldPrimitive.Input, { "aria-label": label, 
+                    // field-sizing reserves 1px for the caret, so the end padding gives
+                    // it back to keep the width of the old text segment.
+                    className: cn("text-paragraph-sm field-sizing-content flex-none bg-transparent pr-1.75 pl-2 text-center font-medium", focusRing()), onKeyDown: blockTextEditing, onDrop: preventDefault, onPaste: preventDefault, ...(testId === undefined ? {} : { "data-testid": testId }) }), _jsx(NumberFieldPrimitive.Increment, { render: _jsx(Button, { "aria-label": "Increase quantity", icon: Plus, ...stepperProps }) })] }) }));
+};

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

@@ -0,0 +1 @@
+export { QuantityControl } from "./quantity-control/quantity-control-root.js";

package/dist/components/quantity-control.js

@@ -0,0 +1 @@
+export { QuantityControl } from "./quantity-control/quantity-control-root.js";

package/dist/components/radio/radio-root.d.ts

@@ -0,0 +1,62 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import type { ComponentSize, ResponsiveSize } from "@instruments/materia-ui/tokens/size";
+import type * as React from "react";
+/**
+ * This file is the single source of truth for radio dot-within-a-circle
+ * geometry - every other component that renders a radio-shaped indicator
+ * (RadioCard, MenuItemRadio, …) imports these two ladders rather than
+ * hand-rolling its own size map.
+ *
+ * The dot is ~42% of the outer diameter, with both ladders quantized to even
+ * pixel sizes so the ring gap between dot and border lands on a whole pixel
+ * at every step.
+ */
+export declare const RADIO_DOT_SIZE_CLASSES: Record<ComponentSize, string>;
+/** Default Radio size. */
+export declare const DEFAULT_RADIO_SIZE: ComponentSize;
+/**
+ * Per-size outer-circle class map. Applied via `getResponsiveSizeClasses` in
+ * the component - NOT as a cva variant - so `size` can be a single token or a
+ * per-breakpoint object.
+ */
+export declare const RADIO_SIZE_CLASSES: Record<ComponentSize, string>;
+/**
+ * radioVariants variant class helper for Radio (base styling only; `size` is
+ * resolved responsively in the component).
+ * Import from "@instruments/materia-ui/components/radio".
+ * Built on Base UI primitives for accessible behaviour.
+ * Includes motion-based animations.
+ */
+declare const radioVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type RadioProps = Omit<React.ComponentProps<typeof RadioPrimitive.Root>, "size"> & {
+    /**
+     * Radio size - a single token or a per-breakpoint object like
+     * `{ base: "sm", md: "lg" }`. @default "sm"
+     */
+    size?: ResponsiveSize;
+};
+/**
+ * Individual radio button. Must be used within a RadioGroup.
+ *
+ * @param props - The radio props
+ * @param props.value - Unique value for this radio option (required).
+ * @param props.size - Size using shared ComponentSize scale. Defaults to "sm".
+ * @param props.disabled - Disable this radio button. Defaults to false.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props... - All other Base UI Radio.Root props.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup>
+ *   <Radio value="option1" />
+ *   <Radio value="option2" size="lg" />
+ * </RadioGroup>
+ * ```
+ *
+ * @bestPractice A `Radio` only works inside a `RadioGroup` (it renders a Base UI `Radio.Root`) - the group owns selection; a standalone `Radio` won't toggle.
+ * @bestPractice Give every `Radio` a unique `value` and pair it with a `Label` - or use `RadioGroupItem`, which bundles the radio and its wired label.
+ * @bestPractice For selectable-card options rather than plain dots, use `RadioCardGroup`.
+ * @category forms
+ */
+declare const Radio: ({ className, size, ...props }: RadioProps) => React.JSX.Element;
+export { Radio, radioVariants };

package/dist/components/radio/radio-root.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { focusInput } from "@instruments/materia-ui/tokens/focus-input";
+import { durations, easings } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+import * as m from "motion/react-m";
+import { hasErrorInput } from "../../tokens/has-error-input.js";
+import { getResponsiveSizeClasses, resolveResponsiveBase, } from "../../tokens/responsive.js";
+/**
+ * This file is the single source of truth for radio dot-within-a-circle
+ * geometry - every other component that renders a radio-shaped indicator
+ * (RadioCard, MenuItemRadio, …) imports these two ladders rather than
+ * hand-rolling its own size map.
+ *
+ * The dot is ~42% of the outer diameter, with both ladders quantized to even
+ * pixel sizes so the ring gap between dot and border lands on a whole pixel
+ * at every step.
+ */
+export const RADIO_DOT_SIZE_CLASSES = {
+    "2xl": "size-3",
+    "2xs": "size-1.5",
+    "3xl": "size-3.5",
+    base: "size-2",
+    lg: "size-2.5",
+    sm: "size-2",
+    xl: "size-2.5",
+    xs: "size-1.5",
+};
+/** Default Radio size. */
+export const DEFAULT_RADIO_SIZE = "sm";
+/**
+ * Per-size outer-circle class map. Applied via `getResponsiveSizeClasses` in
+ * the component - NOT as a cva variant - so `size` can be a single token or a
+ * per-breakpoint object.
+ */
+export const RADIO_SIZE_CLASSES = {
+    "2xl": "size-7",
+    "2xs": "size-3.5",
+    "3xl": "size-8",
+    base: "size-5",
+    lg: "size-5.5",
+    sm: "size-4.5",
+    xl: "size-6",
+    xs: "size-4",
+};
+/**
+ * radioVariants variant class helper for Radio (base styling only; `size` is
+ * resolved responsively in the component).
+ * Import from "@instruments/materia-ui/components/radio".
+ * Built on Base UI primitives for accessible behaviour.
+ * Includes motion-based animations.
+ */
+const radioVariants = cva("bg-card text-primary transition-color-shadow aspect-square shrink-0 rounded-full border border-gray-400 outline-none disabled:cursor-not-allowed disabled:opacity-50");
+/** Internal animated dot indicator */
+const RadioDot = ({ className, size = "sm", ...props }) => (_jsx(m.span, { animate: { opacity: 1, scale: 1 }, "aria-hidden": true, className: cn("bg-primary block rounded-full", RADIO_DOT_SIZE_CLASSES[size], className), "data-slot": "radio-dot", exit: { opacity: 0, scale: 0.8 }, initial: { opacity: 0, scale: 0.95 }, transition: { duration: durations.quick, ease: easings.out }, ...props }));
+/**
+ * Individual radio button. Must be used within a RadioGroup.
+ *
+ * @param props - The radio props
+ * @param props.value - Unique value for this radio option (required).
+ * @param props.size - Size using shared ComponentSize scale. Defaults to "sm".
+ * @param props.disabled - Disable this radio button. Defaults to false.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props... - All other Base UI Radio.Root props.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup>
+ *   <Radio value="option1" />
+ *   <Radio value="option2" size="lg" />
+ * </RadioGroup>
+ * ```
+ *
+ * @bestPractice A `Radio` only works inside a `RadioGroup` (it renders a Base UI `Radio.Root`) - the group owns selection; a standalone `Radio` won't toggle.
+ * @bestPractice Give every `Radio` a unique `value` and pair it with a `Label` - or use `RadioGroupItem`, which bundles the radio and its wired label.
+ * @bestPractice For selectable-card options rather than plain dots, use `RadioCardGroup`.
+ * @category forms
+ */
+const Radio = ({ className, size, ...props }) => {
+    // The animated dot does a single-token Record lookup, so it always receives
+    // the resolved base size (never the responsive object).
+    const baseSize = resolveResponsiveBase(size, DEFAULT_RADIO_SIZE);
+    return (_jsx(RadioPrimitive.Root, { nativeButton: true, render: (buttonProps) => _jsx("button", { type: "button", ...buttonProps }), className: cn(radioVariants(), getResponsiveSizeClasses(size, RADIO_SIZE_CLASSES, DEFAULT_RADIO_SIZE), focusInput(), hasErrorInput, className), "data-component": "radio", "data-slot": "radio", ...props, children: _jsx(RadioPrimitive.Indicator, { className: "flex items-center justify-center", "data-component": "radio-indicator", "data-slot": "radio-indicator", children: _jsx(RadioDot, { size: baseSize }) }) }));
+};
+export { Radio, radioVariants };

package/dist/components/radio-card/radio-card-constants.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentSize } from "../../tokens/size.js";
+/** item_size_class individual item component */
+export declare const ITEM_SIZE_CLASS: Record<ComponentSize, string>;
+/**
+ * ICON_CONTAINER_SIZE_CLASS class name map for RadioCardGroup.
+ * Import from "@instruments/materia-ui/components/radio-card".
+ */
+export declare const ICON_CONTAINER_SIZE_CLASS: Record<ComponentSize, string>;
+/**
+ * TITLE_SIZE_CLASS class name map for RadioCardGroup.
+ * Import from "@instruments/materia-ui/components/radio-card".
+ */
+export declare const TITLE_SIZE_CLASS: Record<ComponentSize, string>;
+/**
+ * DESCRIPTION_SIZE_CLASS class name map for RadioCardGroup.
+ * Import from "@instruments/materia-ui/components/radio-card".
+ */
+export declare const DESCRIPTION_SIZE_CLASS: Record<ComponentSize, string>;

package/dist/components/radio-card/radio-card-constants.js

@@ -0,0 +1,53 @@
+/** item_size_class individual item component */
+export const ITEM_SIZE_CLASS = {
+    "2xl": "gap-5 p-7",
+    "2xs": "gap-2 p-3",
+    "3xl": "gap-6 p-8",
+    base: "gap-4 p-5",
+    lg: "gap-4 p-6",
+    sm: "gap-3 p-4",
+    xl: "gap-5 p-6",
+    xs: "gap-3 p-4",
+};
+/**
+ * ICON_CONTAINER_SIZE_CLASS class name map for RadioCardGroup.
+ * Import from "@instruments/materia-ui/components/radio-card".
+ */
+export const ICON_CONTAINER_SIZE_CLASS = {
+    "2xl": "size-14",
+    "2xs": "size-8",
+    "3xl": "size-16",
+    base: "size-10",
+    lg: "size-11",
+    sm: "size-9",
+    xl: "size-12",
+    xs: "size-9",
+};
+/**
+ * TITLE_SIZE_CLASS class name map for RadioCardGroup.
+ * Import from "@instruments/materia-ui/components/radio-card".
+ */
+export const TITLE_SIZE_CLASS = {
+    "2xl": "text-paragraph-lg",
+    "2xs": "text-caption",
+    "3xl": "text-subheading",
+    base: "text-paragraph-sm",
+    lg: "text-paragraph",
+    sm: "text-paragraph-sm",
+    xl: "text-paragraph",
+    xs: "text-caption",
+};
+/**
+ * DESCRIPTION_SIZE_CLASS class name map for RadioCardGroup.
+ * Import from "@instruments/materia-ui/components/radio-card".
+ */
+export const DESCRIPTION_SIZE_CLASS = {
+    "2xl": "text-paragraph",
+    "2xs": "text-caption",
+    "3xl": "text-paragraph-lg",
+    base: "text-caption",
+    lg: "text-paragraph-sm",
+    sm: "text-caption",
+    xl: "text-paragraph-sm",
+    xs: "text-caption",
+};

package/dist/components/radio-card/radio-card-content.d.ts

@@ -0,0 +1,3 @@
+import type React from "react";
+/** Left-aligned column that stacks a `RadioCard`'s title and description. */
+export declare const RadioCardContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/components/radio-card/radio-card-content.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+/** Left-aligned column that stacks a `RadioCard`'s title and description. */
+export const RadioCardContent = ({ className, ...props }) => (_jsx(Flex, { className: cn("gap-1.5 text-left", className), direction: "column", "data-component": "radio-card-content", "data-slot": "radio-card-content", ...props }));

package/dist/components/radio-card/radio-card-context.d.ts

@@ -0,0 +1,31 @@
+import type { LucideIcon } from "lucide-react";
+import type React from "react";
+import type { ComponentSize } from "../../tokens/size.js";
+/** Radio card context value type definition */
+export interface RadioCardContextValue {
+    /** Whether the group is disabled */
+    disabled?: boolean | undefined;
+    /** Icon to display instead of the indicator */
+    icon?: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined;
+    /** Position of the indicator/icon */
+    indicatorSide?: "start" | "end" | undefined;
+    /** Name for form submission */
+    name?: string | undefined;
+    /** Callback when selected value changes */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Whether the group is required */
+    required?: boolean | undefined;
+    /** Only show icon when item is selected (for selection indicators like Check) */
+    showIconOnlyWhenSelected?: boolean | undefined;
+    /** Show indicator */
+    showIndicator?: boolean | undefined;
+    /** Component size */
+    size?: ComponentSize | undefined;
+    /** Current selected value */
+    value?: string | null | undefined;
+}
+/**
+ * RadioCardContext UI component.
+ * Import from "@instruments/materia-ui/components/radio-card".
+ */
+export declare const RadioCardContext: React.Context<RadioCardContextValue>;

package/dist/components/radio-card/radio-card-context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext } from "react";
+/**
+ * RadioCardContext UI component.
+ * Import from "@instruments/materia-ui/components/radio-card".
+ */
+export const RadioCardContext = createContext({
+    indicatorSide: "start",
+    showIndicator: true,
+    size: "base",
+});

package/dist/components/radio-card/radio-card-description.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+/**
+ * Muted supporting line beneath a `RadioCardTitle`; scales to the group's
+ * `size`.
+ */
+export declare const RadioCardDescription: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/components/radio-card/radio-card-description.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { use } from "react";
+import { DESCRIPTION_SIZE_CLASS } from "../radio-card/radio-card-constants.js";
+import { RadioCardContext } from "../radio-card/radio-card-context.js";
+/**
+ * Muted supporting line beneath a `RadioCardTitle`; scales to the group's
+ * `size`.
+ */
+export const RadioCardDescription = ({ className, ...props }) => {
+    const { size = "base" } = use(RadioCardContext);
+    return (_jsx("div", { className: cn("text-muted-foreground", DESCRIPTION_SIZE_CLASS[size], className), "data-component": "radio-card-description", "data-slot": "radio-card-description", ...props }));
+};

package/dist/components/radio-card/radio-card-icon.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+/**
+ * Sized icon tile for a `RadioCard` that lifts to a raised background tile
+ * when its card is checked.
+ */
+export declare const RadioCardIcon: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/components/radio-card/radio-card-icon.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { use } from "react";
+import { Center } from "../center.js";
+import { ICON_CONTAINER_SIZE_CLASS } from "../radio-card/radio-card-constants.js";
+import { RadioCardContext } from "../radio-card/radio-card-context.js";
+/**
+ * Sized icon tile for a `RadioCard` that lifts to a raised background tile
+ * when its card is checked.
+ */
+export const RadioCardIcon = ({ className, ...props }) => {
+    const { size = "base" } = use(RadioCardContext);
+    return (_jsx(Center, { className: cn("bg-muted/50 text-muted-foreground group-data-selected:bg-background group-data-selected:text-foreground shrink-0 rounded-lg border transition-colors", ICON_CONTAINER_SIZE_CLASS[size], className), "data-component": "radio-card-icon", "data-slot": "radio-card-icon", ...props }));
+};

package/dist/components/radio-card/radio-card-item.d.ts

@@ -0,0 +1,21 @@
+import type { LucideIcon } from "lucide-react";
+import type React from "react";
+export interface RadioCardProps extends Omit<React.ComponentProps<"div">, "value"> {
+    /** Whether this radio is disabled */
+    disabled?: boolean;
+    /** Icon to display as indicator (overrides group-level icon) */
+    icon?: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    /** Icon to display at the end of the card */
+    suffixIcon?: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    /** Value for this radio option (required for RadioGroup) */
+    value: string;
+}
+/**
+ * One selectable card within a `RadioCardGroup`. The whole card is the Base
+ * UI radio (`Radio.Root` rendered as an `InputCard`), so the group has a
+ * single tab stop, arrow keys move and select, and Space selects.
+ *
+ * Inherits size/indicator config from group context; `icon` here overrides the
+ * group icon, and `suffixIcon` adds a trailing icon on the opposite edge.
+ */
+export declare const RadioCard: ({ className, children, value, disabled, icon: itemIcon, suffixIcon, ...props }: RadioCardProps) => React.JSX.Element;