@instruments/materia-ui 0.1.0

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

@@ -0,0 +1,49 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { durations, easings } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import * as m from "motion/react-m";
+import { use } from "react";
+import { CONTROL_LINE_CLASSES } from "../../tokens/control-line.js";
+import { Center } from "../center.js";
+import { Flex } from "../flex.js";
+import { InputCard, InputCardIcon } from "../input-card/input-card-root.js";
+import { RadioCardContext } from "../radio-card/radio-card-context.js";
+import { RADIO_DOT_SIZE_CLASSES, RADIO_SIZE_CLASSES, radioVariants, } from "../radio/radio-root.js";
+/**
+ * The radio dot drawn inside a card. Purely visual - the card itself is the
+ * radio - so it mirrors `Radio`'s geometry at the fixed "xs" size (16px, to
+ * match CheckboxCard's checkbox; a card-`size`-scaled dot overflows the
+ * title's line-box and reads as misaligned against its cap-height).
+ */
+const RadioCardDot = () => (_jsx("span", { className: cn(CONTROL_LINE_CLASSES, "text-paragraph-sm"), children: _jsx(Center, { "aria-hidden": true, as: "span", className: cn(radioVariants(), RADIO_SIZE_CLASSES.xs, "pointer-events-none"), "data-slot": "radio", children: _jsx(RadioPrimitive.Indicator, { className: "flex items-center justify-center", "data-slot": "radio-indicator", children: _jsx(m.span, { animate: { opacity: 1, scale: 1 }, className: cn("bg-primary block rounded-full", RADIO_DOT_SIZE_CLASSES.xs), "data-slot": "radio-dot", exit: { opacity: 0, scale: 0.8 }, initial: { opacity: 0, scale: 0.95 }, transition: { duration: durations.quick, ease: easings.out } }) }) }) }));
+/**
+ * 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 const RadioCard = ({ className, children, value, disabled, icon: itemIcon, suffixIcon, ...props }) => {
+    const { showIndicator, size = "base", disabled: groupDisabled, indicatorSide = "start", icon: groupIcon, showIconOnlyWhenSelected, } = use(RadioCardContext);
+    const isDisabled = disabled ?? groupDisabled ?? false;
+    const icon = itemIcon ?? groupIcon;
+    return (_jsx(RadioPrimitive.Root, { className: className, "data-component": "radio-card-item", "data-slot": "radio-card-item", disabled: isDisabled, nativeButton: false, render: (rootProps, state) => {
+            const isSelected = state.checked;
+            // An icon replaces the dot; when showIconOnlyWhenSelected is set it
+            // only appears while selected.
+            let indicator = null;
+            if (icon) {
+                indicator =
+                    showIconOnlyWhenSelected === true && !isSelected ? null : (_jsx(InputCardIcon, { icon: icon, selected: isSelected, size: size }));
+            }
+            else if (showIndicator !== false) {
+                indicator = _jsx(RadioCardDot, {});
+            }
+            const suffixIconIndicator = suffixIcon ? (_jsx(InputCardIcon, { icon: suffixIcon, selected: isSelected, size: size })) : null;
+            const contentElement = (_jsx(Flex, { className: "min-w-0 flex-1", direction: "column", children: children }));
+            return (_jsx(InputCard, { ...rootProps, disabled: state.disabled, selected: isSelected, size: size, children: _jsx(Flex, { align: "flex-start", className: "flex-1", gap: "xs", ...props, children: indicatorSide === "start" ? (_jsxs(_Fragment, { children: [indicator, contentElement, suffixIconIndicator] })) : (_jsxs(_Fragment, { children: [suffixIconIndicator, contentElement, indicator] })) }) }));
+        }, value: value }));
+};

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

@@ -0,0 +1,44 @@
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import type { LucideIcon } from "lucide-react";
+import type React from "react";
+import type { ComponentSize } from "../../tokens/size.js";
+export interface RadioCardGroupProps extends Omit<RadioGroupPrimitive.Props<string>, "defaultValue" | "onValueChange" | "value"> {
+    /** Uncontrolled initial selection. */
+    defaultValue?: string | undefined;
+    /**
+     * Called with the newly selected value. Unlike Base UI's `RadioGroup` there
+     * is no `eventDetails` argument.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Controlled selection. */
+    value?: string | undefined;
+    /** Icon shown in place of the radio indicator on every item. */
+    icon?: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    /** Which side the indicator/icon sits on. @default "start" */
+    indicatorSide?: "start" | "end";
+    /** Stacked grid or inline-wrapping row of cards. @default "grid" */
+    layout?: "grid" | "inline";
+    /** Only show icon when item is selected (for selection indicators like Check) */
+    showIconOnlyWhenSelected?: boolean;
+    /** Render the radio dot indicator. @default true */
+    showIndicator?: boolean;
+    /** Card sizing shared with every item. @default "base" */
+    size?: ComponentSize;
+}
+/**
+ * Radio group whose options are full-size selectable cards (Base UI RadioGroup).
+ * Each `RadioCard` is itself the radio, so the group is one tab stop and the
+ * arrow keys move the selection between cards.
+ *
+ * Shares `size`/`icon`/`indicatorSide`/`showIndicator` with every `RadioCard`
+ * through context, so set them once here. Controlled via `value`/`onValueChange`,
+ * uncontrolled via `defaultValue`; `layout` picks a stacked grid or an inline
+ * wrap.
+ *
+ * @bestPractice Use `RadioCardGroup` for single-select cards and `CheckboxCardGroup` for multi-select - a radio group enforces exactly one choice.
+ * @bestPractice Set `size`/`icon`/`indicatorSide`/`showIndicator` once on the group; each `RadioCard` reads them from context - don't repeat per item.
+ * @bestPractice Drive selection with `value`/`onValueChange` (controlled) or `defaultValue` (uncontrolled); use `layout="inline"` for a wrapping row instead of the stacked grid.
+ * @bestPractice Label the group (e.g. `aria-label` or a `Field` with a `FieldLabel`) - Tab lands on the selected card and the arrow keys move between cards.
+ * @category forms
+ */
+export declare const RadioCardGroup: ({ className, showIndicator, size, layout, indicatorSide, icon, showIconOnlyWhenSelected, value, defaultValue, onValueChange, disabled, ...props }: RadioCardGroupProps) => React.JSX.Element;

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useCallback, useMemo } from "react";
+import { RadioCardContext } from "../radio-card/radio-card-context.js";
+/**
+ * Radio group whose options are full-size selectable cards (Base UI RadioGroup).
+ * Each `RadioCard` is itself the radio, so the group is one tab stop and the
+ * arrow keys move the selection between cards.
+ *
+ * Shares `size`/`icon`/`indicatorSide`/`showIndicator` with every `RadioCard`
+ * through context, so set them once here. Controlled via `value`/`onValueChange`,
+ * uncontrolled via `defaultValue`; `layout` picks a stacked grid or an inline
+ * wrap.
+ *
+ * @bestPractice Use `RadioCardGroup` for single-select cards and `CheckboxCardGroup` for multi-select - a radio group enforces exactly one choice.
+ * @bestPractice Set `size`/`icon`/`indicatorSide`/`showIndicator` once on the group; each `RadioCard` reads them from context - don't repeat per item.
+ * @bestPractice Drive selection with `value`/`onValueChange` (controlled) or `defaultValue` (uncontrolled); use `layout="inline"` for a wrapping row instead of the stacked grid.
+ * @bestPractice Label the group (e.g. `aria-label` or a `Field` with a `FieldLabel`) - Tab lands on the selected card and the arrow keys move between cards.
+ * @category forms
+ */
+export const RadioCardGroup = ({ className, showIndicator = true, size = "base", layout = "grid", indicatorSide = "start", icon, showIconOnlyWhenSelected, value, defaultValue, onValueChange, disabled, ...props }) => {
+    const handleValueChange = useCallback((newValue) => {
+        onValueChange?.(newValue);
+    }, [onValueChange]);
+    const contextValue = useMemo(() => ({
+        disabled,
+        icon,
+        indicatorSide,
+        showIconOnlyWhenSelected,
+        showIndicator,
+        size,
+    }), [
+        disabled,
+        icon,
+        indicatorSide,
+        showIconOnlyWhenSelected,
+        showIndicator,
+        size,
+    ]);
+    return (_jsx(RadioCardContext.Provider, { value: contextValue, children: _jsx(RadioGroupPrimitive, { className: cn(layout === "inline" ? "flex flex-wrap gap-1.5" : "grid gap-3", className), "data-component": "radio-card-group", "data-slot": "radio-card-group", onValueChange: handleValueChange, ...(disabled === undefined ? {} : { disabled }), ...(value === undefined ? {} : { value }), ...(defaultValue === undefined ? {} : { defaultValue }), ...props }) }));
+};

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

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

package/dist/components/radio-card/radio-card-title.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 { TITLE_SIZE_CLASS } from "../radio-card/radio-card-constants.js";
+import { RadioCardContext } from "../radio-card/radio-card-context.js";
+/**
+ * Primary label line inside a `RadioCard`; scales its text to the group's
+ * `size`.
+ */
+export const RadioCardTitle = ({ className, ...props }) => {
+    const { size = "base" } = use(RadioCardContext);
+    return (_jsx("div", { className: cn("font-medium", TITLE_SIZE_CLASS[size], className), "data-component": "radio-card-title", "data-slot": "radio-card-title", ...props }));
+};

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

@@ -0,0 +1,6 @@
+export { RadioCardContent } from "./radio-card/radio-card-content.js";
+export { RadioCardDescription } from "./radio-card/radio-card-description.js";
+export { RadioCardIcon } from "./radio-card/radio-card-icon.js";
+export { RadioCard, type RadioCardProps } from "./radio-card/radio-card-item.js";
+export { RadioCardGroup, type RadioCardGroupProps, } from "./radio-card/radio-card-root.js";
+export { RadioCardTitle } from "./radio-card/radio-card-title.js";

package/dist/components/radio-card.js

@@ -0,0 +1,6 @@
+export { RadioCardContent } from "./radio-card/radio-card-content.js";
+export { RadioCardDescription } from "./radio-card/radio-card-description.js";
+export { RadioCardIcon } from "./radio-card/radio-card-icon.js";
+export { RadioCard } from "./radio-card/radio-card-item.js";
+export { RadioCardGroup, } from "./radio-card/radio-card-root.js";
+export { RadioCardTitle } from "./radio-card/radio-card-title.js";

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

@@ -0,0 +1,54 @@
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import type * as React from "react";
+import type { RadioProps } from "../radio.js";
+/**
+ * Container for a group of radio buttons. Manages single selection state.
+ *
+ * @param props - The radio group props
+ * @param props.value - Controlled selected value. Use with onValueChange.
+ * @param props.defaultValue - Uncontrolled default selected value.
+ * @param props.onValueChange - Callback when selected value changes.
+ * @param props.disabled - Disable all radio buttons in the group. Defaults to false.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.children - Radio components.
+ * @param props... - All other Base UI RadioGroup props.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioGroupItem value="option1">Option 1</RadioGroupItem>
+ *   <RadioGroupItem value="option2">Option 2</RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ *
+ * @bestPractice Use `RadioGroup` for one choice among a small closed set; for many searchable options use `Select`/`Combobox`, and for on/off use `Switch`/`Checkbox`.
+ * @bestPractice Drive selection with `value` + `onValueChange` (controlled) or `defaultValue` (uncontrolled) - don't set both on the same group.
+ * @bestPractice Prefer `RadioGroupItem` (radio + wired `Label`) over hand-pairing `Radio` and `Label`; it auto-generates the `id`/`htmlFor` link.
+ * @category forms
+ */
+declare const RadioGroup: ({ className, ...props }: RadioGroupPrimitive.Props) => React.JSX.Element;
+export type RadioGroupItemProps = RadioProps & {
+    /** Label text for the radio option */
+    children: React.ReactNode;
+};
+/**
+ * A radio option with an associated label. Combines Radio and Label for convenience.
+ *
+ * @param props - The radio group item props
+ * @param props.value - Unique value for this radio option (required).
+ * @param props.children - Label text content.
+ * @param props.size - Size using shared ComponentSize scale. Defaults to "sm".
+ * @param props.disabled - Disable this radio option. Defaults to false.
+ * @param props.className - Additional CSS classes for the radio input.
+ * @param props.id - Optional ID. Auto-generated if not provided.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup>
+ *   <RadioGroupItem value="a">Option A</RadioGroupItem>
+ *   <RadioGroupItem value="b" disabled>Option B</RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroupItem: ({ children, className, id: providedId, disabled, ...props }: RadioGroupItemProps) => React.JSX.Element;
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useId } from "react";
+import { CONTROL_LINE_CLASSES } from "../../tokens/control-line.js";
+import { Flex } from "../flex.js";
+import { Label } from "../label.js";
+import { Radio } from "../radio.js";
+/**
+ * Container for a group of radio buttons. Manages single selection state.
+ *
+ * @param props - The radio group props
+ * @param props.value - Controlled selected value. Use with onValueChange.
+ * @param props.defaultValue - Uncontrolled default selected value.
+ * @param props.onValueChange - Callback when selected value changes.
+ * @param props.disabled - Disable all radio buttons in the group. Defaults to false.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.children - Radio components.
+ * @param props... - All other Base UI RadioGroup props.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioGroupItem value="option1">Option 1</RadioGroupItem>
+ *   <RadioGroupItem value="option2">Option 2</RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ *
+ * @bestPractice Use `RadioGroup` for one choice among a small closed set; for many searchable options use `Select`/`Combobox`, and for on/off use `Switch`/`Checkbox`.
+ * @bestPractice Drive selection with `value` + `onValueChange` (controlled) or `defaultValue` (uncontrolled) - don't set both on the same group.
+ * @bestPractice Prefer `RadioGroupItem` (radio + wired `Label`) over hand-pairing `Radio` and `Label`; it auto-generates the `id`/`htmlFor` link.
+ * @category forms
+ */
+const RadioGroup = ({ className, ...props }) => (_jsx(RadioGroupPrimitive, { className: cn("grid gap-3", className), "data-component": "radio-group", "data-slot": "radio-group", ...props }));
+/**
+ * A radio option with an associated label. Combines Radio and Label for convenience.
+ *
+ * @param props - The radio group item props
+ * @param props.value - Unique value for this radio option (required).
+ * @param props.children - Label text content.
+ * @param props.size - Size using shared ComponentSize scale. Defaults to "sm".
+ * @param props.disabled - Disable this radio option. Defaults to false.
+ * @param props.className - Additional CSS classes for the radio input.
+ * @param props.id - Optional ID. Auto-generated if not provided.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup>
+ *   <RadioGroupItem value="a">Option A</RadioGroupItem>
+ *   <RadioGroupItem value="b" disabled>Option B</RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
+const RadioGroupItem = ({ children, className, id: providedId, disabled, ...props }) => {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    return (_jsxs(Flex, { align: "flex-start", "data-component": "radio-group-item", "data-disabled": disabled, "data-slot": "radio-group-item", gap: "xs", children: [_jsx("span", { className: cn(CONTROL_LINE_CLASSES, "text-paragraph-sm"), children: _jsx(Radio, { className: className, disabled: disabled, id: id, ...props }) }), _jsx(Label, { htmlFor: id, children: children })] }));
+};
+export { RadioGroup, RadioGroupItem };

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

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, } from "./radio-group/radio-group-root.js";

package/dist/components/radio-group.js

@@ -0,0 +1 @@
+export { RadioGroup, RadioGroupItem, } from "./radio-group/radio-group-root.js";

package/dist/components/radio.d.ts

@@ -0,0 +1 @@
+export { Radio, type RadioProps, radioVariants } from "./radio/radio-root.js";

package/dist/components/radio.js

@@ -0,0 +1 @@
+export { Radio, radioVariants } from "./radio/radio-root.js";

package/dist/components/requirement-item/requirement-item-root.d.ts

@@ -0,0 +1,27 @@
+interface RequirementItemProps {
+    /** Optional additional class names */
+    className?: string;
+    /** The requirement label text */
+    label: string;
+    /** Whether the requirement has been met */
+    met: boolean;
+    /** Optional test ID for the component */
+    testId?: string;
+}
+/**
+ * Displays a requirement item with a check/x icon indicating met/unmet status.
+ * Useful for password requirements, form validation lists, etc.
+ *
+ * @example
+ * ```tsx
+ * <RequirementItem label="At least 8 characters" met={password.length >= 8} />
+ * <RequirementItem label="One uppercase letter" met={/[A-Z]/.test(password)} />
+ * ```
+ *
+ * @bestPractice Use one `RequirementItem` per rule in a checklist (password/validation criteria); drive `met` from live validation so the check/x icon updates as the user types.
+ * @bestPractice Render several in a vertical list and give it an accessible grouping (e.g. `aria-live` region) so screen readers announce requirements flipping to met.
+ * @bestPractice Reach for `RequirementItem` for pass/fail checklist rows; for a generic list row use `Item`, and for form field errors use the field's own error message.
+ * @category composites
+ */
+export declare const RequirementItem: ({ label, met, testId, className, }: RequirementItemProps) => import("react").JSX.Element;
+export {};

package/dist/components/requirement-item/requirement-item-root.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { CheckIcon, XIcon } from "lucide-react";
+import { Flex } from "../flex.js";
+import { Icon } from "../icon.js";
+/**
+ * Displays a requirement item with a check/x icon indicating met/unmet status.
+ * Useful for password requirements, form validation lists, etc.
+ *
+ * @example
+ * ```tsx
+ * <RequirementItem label="At least 8 characters" met={password.length >= 8} />
+ * <RequirementItem label="One uppercase letter" met={/[A-Z]/.test(password)} />
+ * ```
+ *
+ * @bestPractice Use one `RequirementItem` per rule in a checklist (password/validation criteria); drive `met` from live validation so the check/x icon updates as the user types.
+ * @bestPractice Render several in a vertical list and give it an accessible grouping (e.g. `aria-live` region) so screen readers announce requirements flipping to met.
+ * @bestPractice Reach for `RequirementItem` for pass/fail checklist rows; for a generic list row use `Item`, and for form field errors use the field's own error message.
+ * @category composites
+ */
+export const RequirementItem = ({ label, met, testId, className, }) => (_jsxs(Flex, { align: "center", className: className, "data-testid": testId, gap: "xs", children: [_jsx(Icon, { className: met ? "text-green-500" : "text-gray-300", icon: met ? CheckIcon : XIcon, size: "xs" }), _jsx("span", { className: cn("text-paragraph-sm", met ? "text-green-600" : "text-gray-500"), children: label })] }));

package/dist/components/requirement-item.d.ts

@@ -0,0 +1 @@
+export { RequirementItem } from "./requirement-item/requirement-item-root.js";

package/dist/components/requirement-item.js

@@ -0,0 +1 @@
+export { RequirementItem } from "./requirement-item/requirement-item-root.js";

package/dist/components/resizable/resizable-anatomy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * resizableAnatomy helper for ResizableAnatomy.
+ * Import from "@instruments/materia-ui/components/resizable-anatomy".
+ */
+export declare const resizableAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

package/dist/components/resizable/resizable-anatomy.js

@@ -0,0 +1,22 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * resizableAnatomy helper for ResizableAnatomy.
+ * Import from "@instruments/materia-ui/components/resizable-anatomy".
+ */
+export const resizableAnatomy = defineAnatomy({
+    children: [
+        {
+            description: "Resizable region",
+            label: "ResizablePanel",
+            slot: "resizable-panel",
+        },
+        {
+            description: "Draggable divider between panels",
+            label: "ResizableHandle",
+            slot: "resizable-handle",
+        },
+    ],
+    description: "Panels split along an axis with a draggable divider",
+    label: "ResizablePanelGroup",
+    slot: "resizable-panel-group",
+});

package/dist/components/resizable/resizable-handle.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { Separator } from "react-resizable-panels";
+interface ResizableHandleProps extends ComponentProps<typeof Separator> {
+    /** Render a centred grip affordance on the divider. @default false */
+    withHandle?: boolean | undefined;
+}
+/**
+ * Draggable divider between two `ResizablePanel`s.
+ *
+ * Wraps `react-resizable-panels` `Separator`. Renders a hairline bar with an
+ * enlarged invisible hit area and a focus ring; it reorients automatically from
+ * the group's `aria-orientation`. Pass `withHandle` to surface a visible grip.
+ */
+export declare const ResizableHandle: ({ className, withHandle, ...props }: ResizableHandleProps) => import("react").JSX.Element;
+export type { ResizableHandleProps };

package/dist/components/resizable/resizable-handle.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+import { GripVertical } from "lucide-react";
+import { Separator } from "react-resizable-panels";
+import { Center } from "../center.js";
+import { Icon } from "../icon.js";
+const resizableHandleVariants = cva([
+    focusRing(),
+    "bg-border relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+    "focus-visible:ring-offset-1",
+]);
+/**
+ * Draggable divider between two `ResizablePanel`s.
+ *
+ * Wraps `react-resizable-panels` `Separator`. Renders a hairline bar with an
+ * enlarged invisible hit area and a focus ring; it reorients automatically from
+ * the group's `aria-orientation`. Pass `withHandle` to surface a visible grip.
+ */
+export const ResizableHandle = ({ className, withHandle = false, ...props }) => (_jsx(Separator
+// react-resizable-panels v4 gives the Separator an `aria-orientation`
+// PERPENDICULAR to the group: a horizontal group (side-by-side panels) gets
+// a vertical divider (`aria-orientation="vertical"`), and a vertical group
+// gets a horizontal divider (`aria-orientation="horizontal"`). The thin
+// full-width bar styling therefore belongs to the `horizontal` (vertical
+// group) case - keying it on `vertical` made the divider span the whole
+// horizontal group and collapse its panels to zero width.
+, { 
+    // react-resizable-panels v4 gives the Separator an `aria-orientation`
+    // PERPENDICULAR to the group: a horizontal group (side-by-side panels) gets
+    // a vertical divider (`aria-orientation="vertical"`), and a vertical group
+    // gets a horizontal divider (`aria-orientation="horizontal"`). The thin
+    // full-width bar styling therefore belongs to the `horizontal` (vertical
+    // group) case - keying it on `vertical` made the divider span the whole
+    // horizontal group and collapse its panels to zero width.
+    className: cn(resizableHandleVariants(), className), "data-component": "resizable-handle", "data-slot": "resizable-handle", ...props, children: withHandle ? (_jsx(Center, { className: "bg-border z-10 h-4 w-3 rounded-xs border", children: _jsx(Icon, { icon: GripVertical, size: "xs" }) })) : null }));

package/dist/components/resizable/resizable-panel-group.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps } from "react";
+import { Group } from "react-resizable-panels";
+/** Axis along which a panel group splits its panels. */
+export type ResizableDirection = "horizontal" | "vertical";
+interface ResizablePanelGroupProps extends Omit<ComponentProps<typeof Group>, "orientation"> {
+    /** Axis the panels split along. @default "horizontal" */
+    direction?: ResizableDirection | undefined;
+}
+/**
+ * Container that lays out resizable panels along a single axis.
+ *
+ * Wraps `react-resizable-panels` `Group`, exposing shadcn's `direction` prop
+ * (mapped to the library's `orientation`). Compose with `ResizablePanel`
+ * children separated by `ResizableHandle`.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel>One</ResizablePanel>
+ *   <ResizableHandle withHandle />
+ *   <ResizablePanel>Two</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ *
+ * @bestPractice Compose `ResizablePanel` children separated by `ResizableHandle` - a handle between panels is what makes them draggable.
+ * @bestPractice Set the axis with `direction` (`horizontal`/`vertical`); it maps to the library's `orientation`, which is intentionally not exposed.
+ * @category layout
+ */
+export declare const ResizablePanelGroup: ({ className, direction, ...props }: ResizablePanelGroupProps) => import("react").JSX.Element;
+export type { ResizablePanelGroupProps };

package/dist/components/resizable/resizable-panel-group.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Group } from "react-resizable-panels";
+/**
+ * Container that lays out resizable panels along a single axis.
+ *
+ * Wraps `react-resizable-panels` `Group`, exposing shadcn's `direction` prop
+ * (mapped to the library's `orientation`). Compose with `ResizablePanel`
+ * children separated by `ResizableHandle`.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup direction="horizontal">
+ *   <ResizablePanel>One</ResizablePanel>
+ *   <ResizableHandle withHandle />
+ *   <ResizablePanel>Two</ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ *
+ * @bestPractice Compose `ResizablePanel` children separated by `ResizableHandle` - a handle between panels is what makes them draggable.
+ * @bestPractice Set the axis with `direction` (`horizontal`/`vertical`); it maps to the library's `orientation`, which is intentionally not exposed.
+ * @category layout
+ */
+export const ResizablePanelGroup = ({ className, direction = "horizontal", ...props }) => (_jsx(Group, { className: cn("flex size-full data-[panel-group-direction=vertical]:flex-col", className), "data-component": "resizable-panel-group", "data-panel-group-direction": direction, "data-slot": "resizable-panel-group", orientation: direction, ...props }));

package/dist/components/resizable/resizable-panel.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+import { Panel } from "react-resizable-panels";
+/**
+ * A single resizable region inside a `ResizablePanelGroup`.
+ *
+ * Thin wrapper over `react-resizable-panels` `Panel` - accepts its full prop
+ * surface (`defaultSize`, `minSize`, `maxSize`, `collapsible`, …) and tags the
+ * DOM node with a `data-slot` for styling and anatomy tooling.
+ */
+export declare const ResizablePanel: (props: ComponentProps<typeof Panel>) => import("react").JSX.Element;

package/dist/components/resizable/resizable-panel.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Panel } from "react-resizable-panels";
+/**
+ * A single resizable region inside a `ResizablePanelGroup`.
+ *
+ * Thin wrapper over `react-resizable-panels` `Panel` - accepts its full prop
+ * surface (`defaultSize`, `minSize`, `maxSize`, `collapsible`, …) and tags the
+ * DOM node with a `data-slot` for styling and anatomy tooling.
+ */
+export const ResizablePanel = (props) => (_jsx(Panel, { "data-slot": "resizable-panel", ...props }));

package/dist/components/resizable.d.ts

@@ -0,0 +1,4 @@
+export { resizableAnatomy } from "./resizable/resizable-anatomy.js";
+export { type ResizableHandleProps, ResizableHandle, } from "./resizable/resizable-handle.js";
+export { ResizablePanel } from "./resizable/resizable-panel.js";
+export { type ResizableDirection, type ResizablePanelGroupProps, ResizablePanelGroup, } from "./resizable/resizable-panel-group.js";

package/dist/components/resizable.js

@@ -0,0 +1,4 @@
+export { resizableAnatomy } from "./resizable/resizable-anatomy.js";
+export { ResizableHandle, } from "./resizable/resizable-handle.js";
+export { ResizablePanel } from "./resizable/resizable-panel.js";
+export { ResizablePanelGroup, } from "./resizable/resizable-panel-group.js";

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

@@ -0,0 +1,21 @@
+import type * as React from "react";
+import type { ScrimDirection, ScrimIntensity } from "./scrim-variants.js";
+export interface ScrimProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /** Which edge holds the dark stop; fades towards the opposite edge. */
+    direction?: ScrimDirection;
+    /** Token stop set for the dark stop's opacity/shape. */
+    intensity?: ScrimIntensity;
+}
+/**
+ * A directional gradient overlay that darkens one edge of its container,
+ * fading to transparent - used to keep light-on-image text (captions,
+ * labels, stats) legible over a photo.
+ *
+ * Place inside a `position: relative` ancestor. Purely decorative: renders
+ * `aria-hidden` and ignores pointer events.
+ *
+ * @bestPractice `Scrim` is a decorative gradient for text-over-image legibility, not a modal backdrop - dialog / sheet dimming is built into those components.
+ * @bestPractice Place it inside a `position: relative` ancestor; it renders `aria-hidden` and ignores pointer events, so it never blocks the content beneath.
+ * @category overlays
+ */
+export declare const Scrim: ({ className, direction, intensity, ...props }: ScrimProps) => React.JSX.Element;

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { scrimVariants } from "./scrim-variants.js";
+/**
+ * A directional gradient overlay that darkens one edge of its container,
+ * fading to transparent - used to keep light-on-image text (captions,
+ * labels, stats) legible over a photo.
+ *
+ * Place inside a `position: relative` ancestor. Purely decorative: renders
+ * `aria-hidden` and ignores pointer events.
+ *
+ * @bestPractice `Scrim` is a decorative gradient for text-over-image legibility, not a modal backdrop - dialog / sheet dimming is built into those components.
+ * @bestPractice Place it inside a `position: relative` ancestor; it renders `aria-hidden` and ignores pointer events, so it never blocks the content beneath.
+ * @category overlays
+ */
+export const Scrim = ({ className, direction = "bottom", intensity = "medium", ...props }) => (_jsx("div", { "aria-hidden": "true", className: cn(scrimVariants({ direction, intensity }), className), "data-slot": "scrim", ...props }));

package/dist/components/scrim/scrim-variants.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A directional gradient overlay that darkens one edge of its container,
+ * fading to transparent towards the opposite edge - keeps light-on-image text
+ * (captions, labels, stats) legible over a photo. Always fills its container
+ * (`inset-0`); for a caption band rather than the whole box, wrap it in a
+ * smaller positioned container sized by its own content/padding.
+ *
+ * - `direction` - which edge holds the dark stop; the gradient fades towards
+ *   the opposite edge.
+ * - `intensity` - token stop set for the dark stop's opacity (and, for
+ *   `hero`, a held mid-stop for content that needs a longer readable band).
+ */
+export declare const scrimVariants: (props?: ({
+    direction?: "bottom" | "left" | "right" | "top" | null | undefined;
+    intensity?: "hero" | "medium" | "soft" | "strong" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ScrimDirection = "bottom" | "left" | "right" | "top";
+export type ScrimIntensity = "hero" | "medium" | "soft" | "strong";