@instruments/materia-ui 0.1.0 → 0.3.0

package/dist/components/chart/chart-tooltip.js

@@ -4,14 +4,13 @@ import { cn } from "@instruments/materia-ui/utils/cn";
 import { isNumber, isString } from "../../utils/type-guards.js";
 import { Flex } from "../flex.js";
 import { Grid } from "../grid.js";
-import { getPayloadConfigFromPayload, readDatumStringField, resolveConfigKey, useChart, } from "./chart-context.js";
+import { getPayloadConfigFromPayload, readDatumStringField, resolveConfigKey, resolveEntryKey, useChart, } from "./chart-context.js";
 /** recharts `Tooltip` - pair it with {@link ChartTooltipContent} via `content`. */
 export { Tooltip as ChartTooltip } from "recharts";
 /** One value cell inside the tooltip: swatch (or config icon) + label + value. */
-const TooltipRow = ({ item, indicator, hideIndicator, nestLabel, nestedLabel, color, }) => {
+const TooltipRow = ({ item, indicator, hideIndicator, nestLabel, nestedLabel, color, configKey, }) => {
     const { config } = useChart();
-    const key = resolveConfigKey(item.name, item.dataKey);
-    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const itemConfig = getPayloadConfigFromPayload(config, item, configKey);
     const swatchColor = color ?? readDatumStringField(item, "fill") ?? item.color;
     const swatchStyle = {
         "--color-bg": swatchColor,
@@ -58,5 +57,8 @@ export const ChartTooltipContent = ({ active, payload, className, indicator = "d
     const items = payload.filter((item) => item.type !== "none");
     const tooltipLabel = hideLabel ? null : (_jsx(TooltipLabel, { config: config, label: label, labelClassName: labelClassName, labelFormatter: labelFormatter, labelKey: labelKey, payload: payload }));
     const nestLabel = items.length === 1 && indicator !== "dot";
-    return (_jsxs(Grid, { className: cn("bg-popover text-popover-foreground text-caption min-w-32 items-start gap-1.5 rounded-xl border px-2.5 py-1.5 shadow-md dark:shadow-none", className), columns: "none", "data-component": "chart-tooltip-content", "data-slot": "chart-tooltip-content", gap: "none", children: [nestLabel ? null : tooltipLabel, _jsx(Grid, { className: "gap-1.5", columns: "none", gap: "none", children: items.map((item) => (_jsx(TooltipRow, { color: color, hideIndicator: hideIndicator, indicator: indicator, item: item, nestedLabel: tooltipLabel, nestLabel: nestLabel }, resolveConfigKey(nameKey, item.name, item.dataKey)))) })] }));
+    return (_jsxs(Grid, { className: cn("bg-popover text-popover-foreground text-caption min-w-32 items-start gap-1.5 rounded-xl border px-2.5 py-1.5 shadow-md dark:shadow-none", className), columns: "none", "data-component": "chart-tooltip-content", "data-slot": "chart-tooltip-content", gap: "none", children: [nestLabel ? null : tooltipLabel, _jsx(Grid, { className: "gap-1.5", columns: "none", gap: "none", children: items.map((item) => {
+                    const key = resolveConfigKey(nameKey, item.name, item.dataKey);
+                    return (_jsx(TooltipRow, { color: color, configKey: key, hideIndicator: hideIndicator, indicator: indicator, item: item, nestedLabel: tooltipLabel, nestLabel: nestLabel }, resolveEntryKey(item, key)));
+                }) })] }));
 };

package/dist/components/empty/empty-media.js

@@ -16,17 +16,17 @@ const SIZE_MEDIA_MB = {
     sm: "mb-1",
 };
 /**
- * Tone → text colour for the bare (plain) icon. `brand` uses the DS
- * brand-on-plain pairing (`text-brand-accent`, per Pill's ghost-brand
- * treatment) - raw `text-brand` yellow fails contrast on light surfaces.
+ * Tone → text colour for the bare (plain) icon, each at least 3:1 on the page.
+ * Brand and warning hues are too light on a light page, so they take
+ * `brand-strong` and the warning foreground.
  */
 const PLAIN_ICON_TONE = {
-    brand: "text-brand-accent",
+    brand: "text-brand-strong",
     danger: "text-destructive",
     info: "text-info-accent",
     neutral: "text-muted-foreground",
     success: "text-affirmative-accent",
-    warning: "text-amber-500",
+    warning: "text-warning-foreground",
 };
 /** Bare-icon size (one step up from the boxed icon so it reads on its own). */
 const PLAIN_ICON_SIZE = {

package/dist/components/input-group/input-group-textarea.d.ts

@@ -7,7 +7,8 @@ export type InputGroupTextareaProps = Omit<React.ComponentProps<"textarea">, "si
  * Textarea element for use inside InputGroup (Base UI `Field.Control`
  * rendering a `<textarea>`). Inherits disabled state from InputGroup context;
  * inside a Field it is the field's control, and it carries `aria-invalid`
- * when the group has an error.
+ * when the group has an error. It grows with its text, and `rows` sets its
+ * minimum height in lines.
  *
  * @example
  * ```tsx
@@ -19,4 +20,4 @@ export type InputGroupTextareaProps = Omit<React.ComponentProps<"textarea">, "si
  * </InputGroup>
  * ```
  */
-export declare const InputGroupTextarea: ({ className, testId, disabled: disabledProp, id, name, ...props }: InputGroupTextareaProps) => React.JSX.Element;
+export declare const InputGroupTextarea: ({ className, testId, disabled: disabledProp, id, name, rows, style, ...props }: InputGroupTextareaProps) => React.JSX.Element;

package/dist/components/input-group/input-group-textarea.js

@@ -4,11 +4,13 @@ import { Field as FieldPrimitive } from "@base-ui/react/field";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { INPUT_CONTROL_RESET } from "../../tokens/input-shell.js";
 import { useInputGroup } from "../input-group/input-group-context.js";
+import { useTextareaRows } from "../textarea/use-textarea-rows.js";
 /**
  * Textarea element for use inside InputGroup (Base UI `Field.Control`
  * rendering a `<textarea>`). Inherits disabled state from InputGroup context;
  * inside a Field it is the field's control, and it carries `aria-invalid`
- * when the group has an error.
+ * when the group has an error. It grows with its text, and `rows` sets its
+ * minimum height in lines.
  *
  * @example
  * ```tsx
@@ -20,10 +22,12 @@ import { useInputGroup } from "../input-group/input-group-context.js";
  * </InputGroup>
  * ```
  */
-export const InputGroupTextarea = ({ className, testId, disabled: disabledProp, id, name, ...props }) => {
+export const InputGroupTextarea = ({ className, testId, disabled: disabledProp, id, name, rows, style, ...props }) => {
     const { disabled: contextDisabled, hasError } = useInputGroup();
     const disabled = disabledProp ?? contextDisabled;
+    const { className: sizingClassName, ref: sizingRef, style: sizingStyle, } = useTextareaRows(rows);
     // The control owns id/name/disabled so Field can label and validate it;
-    // textarea-only props ride on the rendered element.
-    return (_jsx(FieldPrimitive.Control, { disabled: disabled, render: _jsx("textarea", { className: cn(INPUT_CONTROL_RESET, "text-paragraph flex field-sizing-content min-h-16 resize-none px-0 py-2", className), "data-component": "input-group-textarea", "data-slot": "input-group-control", ...(hasError ? { "aria-invalid": true } : {}), ...(testId === undefined ? {} : { "data-testid": testId }), ...props }), ...(id === undefined ? {} : { id }), ...(name === undefined ? {} : { name }) }));
+    // textarea-only props ride on the rendered element. The sizing ref sits on
+    // the control so a caller's own `ref` on the textarea still lands.
+    return (_jsx(FieldPrimitive.Control, { disabled: disabled, ref: sizingRef, render: _jsx("textarea", { className: cn(INPUT_CONTROL_RESET, "text-paragraph flex resize-none px-0 py-2", sizingClassName, className), "data-component": "input-group-textarea", "data-slot": "input-group-control", rows: rows, style: { ...sizingStyle, ...style }, ...(hasError ? { "aria-invalid": true } : {}), ...(testId === undefined ? {} : { "data-testid": testId }), ...props }), ...(id === undefined ? {} : { id }), ...(name === undefined ? {} : { name }) }));
 };

package/dist/components/pill/pill-variants.js

@@ -60,15 +60,19 @@ export const pillVariants = cva(cn("inline-flex items-center justify-center bord
             emphasis: "solid",
             tone: "success",
         },
+        // The soft token is pale in light and graphite in dark, the reverse of
+        // the accent fill, so one class reads on it in both themes.
         {
-            className: "text-white/90",
+            className: "text-info-soft",
             emphasis: "solid",
             tone: "info",
         },
+        // Dark mode gives the warning foreground the accent's own colour, as text
+        // on graphite, so the solid takes the graphite soft token instead.
         {
-            className: "text-white/90",
+            className: "dark:text-warning-soft",
             emphasis: "solid",
-            tone: "danger",
+            tone: "warning",
         },
         /* ── Soft (was `light`) ───────────────────────────── */
         /* neutral+soft reproduces the old secondary/solid render */
@@ -152,8 +156,10 @@ export const pillVariants = cva(cn("inline-flex items-center justify-center bord
             emphasis: "ghost",
             tone: "success",
         },
+        // Amber is too light to read on a light page, so light mode takes the
+        // warning foreground.
         {
-            className: "text-warning-accent dark:text-warning-accent",
+            className: "text-warning-foreground dark:text-warning-accent",
             emphasis: "ghost",
             tone: "warning",
         },
@@ -167,8 +173,9 @@ export const pillVariants = cva(cn("inline-flex items-center justify-center bord
             emphasis: "ghost",
             tone: "danger",
         },
+        // Brand accent fails on a light page; graphite keeps the accent.
         {
-            className: "text-brand-accent dark:text-brand-accent",
+            className: "text-brand-strong dark:text-brand-accent",
             emphasis: "ghost",
             tone: "brand",
         },
@@ -178,28 +185,32 @@ export const pillVariants = cva(cn("inline-flex items-center justify-center bord
             emphasis: "transparent",
             tone: "neutral",
         },
+        // A half status fill is pale over a light page and mid-toned over
+        // graphite, so status tones take dark text in light and white in dark.
         {
-            className: "bg-affirmative-accent/50 transform-gpu border-transparent text-white/90 backdrop-blur-md will-change-[filter,background-color]",
+            className: "bg-affirmative-accent/50 text-foreground transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color] dark:text-white/90",
             emphasis: "transparent",
             tone: "success",
         },
         {
-            className: "bg-warning-accent/50 transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color]",
+            className: "bg-warning-accent/50 transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color] dark:text-white/90",
             emphasis: "transparent",
             tone: "warning",
         },
         {
-            className: "bg-info-accent/50 transform-gpu border-transparent text-white/90 backdrop-blur-md will-change-[filter,background-color]",
+            className: "bg-info-accent/50 text-foreground transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color] dark:text-white/90",
             emphasis: "transparent",
             tone: "info",
         },
         {
-            className: "bg-destructive/50 transform-gpu border-transparent text-white/90 backdrop-blur-md will-change-[filter,background-color]",
+            className: "bg-destructive/50 text-foreground transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color] dark:text-white/90",
             emphasis: "transparent",
             tone: "danger",
         },
+        // Over graphite a half brand fill turns olive, so dark mode thickens it
+        // and keeps the brand foreground.
         {
-            className: "bg-brand/50 transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color]",
+            className: "bg-brand/50 dark:bg-brand/70 transform-gpu border-transparent backdrop-blur-md will-change-[filter,background-color]",
             emphasis: "transparent",
             tone: "brand",
         },

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

@@ -21,15 +21,17 @@ interface ProgressCircleProps {
     valueFormatter?: (value: number, max: number) => string;
 }
 /**
- * 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.
+ * Linear progress bar showing completion from 0 to 100. Pass `value={null}`
+ * when the amount of work is unknown: a short bar slides across the track on a
+ * loop, and under reduced motion it holds still in the middle. 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 Use `Progress` for determinate 0–100 completion and `value={null}` when the total is unknown; 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.
+ * @bestPractice Mount `ReducedMotionProvider` at the app root - the indeterminate bar slides via `m.*` (LazyMotion).
  * @category feedback
  */
-declare const Progress: ({ className, ...props }: ProgressProps) => React.JSX.Element;
+declare const Progress: ({ className, value, ...props }: ProgressProps) => React.JSX.Element;
 /**
  * Circular progress ring with an optional centred content slot; the value is
  * clamped to `0..max` and exposed through a visually hidden native `<progress>`.

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

@@ -2,17 +2,38 @@
 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 { durations } from "@instruments/materia-ui/tokens/motion";
 import { cn } from "@instruments/materia-ui/utils/cn";
+import { useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+// The indeterminate bar is a third of the track, so translating it by its own
+// width runs it from just off the left edge (-100%) to just off the right
+// (300%).
+const SLIDE = { x: ["-100%", "300%"] };
+const SLIDE_TRANSITION = {
+    duration: durations.slow,
+    ease: "linear",
+    repeat: Number.POSITIVE_INFINITY,
+};
 /**
- * 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.
+ * Linear progress bar showing completion from 0 to 100. Pass `value={null}`
+ * when the amount of work is unknown: a short bar slides across the track on a
+ * loop, and under reduced motion it holds still in the middle. 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 Use `Progress` for determinate 0–100 completion and `value={null}` when the total is unknown; 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.
+ * @bestPractice Mount `ReducedMotionProvider` at the app root - the indeterminate bar slides via `m.*` (LazyMotion).
  * @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 Progress = ({ className, value, ...props }) => {
+    // Gate on the preference directly: MotionConfig's reduced mode would jump
+    // the slide to its last keyframe, which leaves the bar off the track.
+    const reducedMotion = useReducedMotion() === true;
+    const indeterminate = value === null;
+    const sliding = indeterminate && !reducedMotion;
+    return (_jsx(ProgressPrimitive.Root, { className: cn("bg-muted relative block h-2 w-full overflow-hidden rounded-full", className), "data-component": "progress", "data-slot": "progress", value: value, ...props, children: _jsx(ProgressPrimitive.Track, { className: "block size-full", "data-component": "progress-track", "data-slot": "progress-track", children: _jsx(ProgressPrimitive.Indicator, { className: cn("bg-primary transition-width block h-full", indeterminate && "w-1/3 rounded-full", indeterminate && !sliding && "translate-x-full"), "data-component": "progress-indicator", "data-slot": "progress-indicator", render: sliding ? (_jsx(m.div, { animate: SLIDE, transition: SLIDE_TRANSITION })) : (_jsx("div", {})) }) }) }));
+};
 const clamp = (value, min, max) => {
     if (Number.isNaN(value)) {
         return min;

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

@@ -30,13 +30,17 @@ declare const RadioGroup: ({ className, ...props }: RadioGroupPrimitive.Props) =
 export type RadioGroupItemProps = RadioProps & {
     /** Label text for the radio option */
     children: React.ReactNode;
+    /** Optional helper text below the label; wired to the radio via `aria-describedby`. */
+    description?: React.ReactNode;
 };
 /**
- * A radio option with an associated label. Combines Radio and Label for convenience.
+ * A radio option with an associated label and optional description. Combines
+ * Radio, Label and muted helper text, laid out like `CheckboxField`.
  *
  * @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.description - Helper text below the label, linked to the radio via `aria-describedby`.
  * @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.
@@ -46,9 +50,9 @@ export type RadioGroupItemProps = RadioProps & {
  * ```tsx
  * <RadioGroup>
  *   <RadioGroupItem value="a">Option A</RadioGroupItem>
- *   <RadioGroupItem value="b" disabled>Option B</RadioGroupItem>
+ *   <RadioGroupItem value="b" description="Arrives tomorrow" disabled>Option B</RadioGroupItem>
  * </RadioGroup>
  * ```
  */
-declare const RadioGroupItem: ({ children, className, id: providedId, disabled, ...props }: RadioGroupItemProps) => React.JSX.Element;
+declare const RadioGroupItem: ({ children, description, className, id: providedId, disabled, "aria-describedby": ariaDescribedBy, ...props }: RadioGroupItemProps) => React.JSX.Element;
 export { RadioGroup, RadioGroupItem };

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

@@ -5,8 +5,10 @@ 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 { Grid } from "../grid.js";
 import { Label } from "../label.js";
 import { Radio } from "../radio.js";
+import { Text } from "../text.js";
 /**
  * Container for a group of radio buttons. Manages single selection state.
  *
@@ -34,11 +36,13 @@ import { Radio } from "../radio.js";
  */
 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.
+ * A radio option with an associated label and optional description. Combines
+ * Radio, Label and muted helper text, laid out like `CheckboxField`.
  *
  * @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.description - Helper text below the label, linked to the radio via `aria-describedby`.
  * @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.
@@ -48,13 +52,19 @@ const RadioGroup = ({ className, ...props }) => (_jsx(RadioGroupPrimitive, { cla
  * ```tsx
  * <RadioGroup>
  *   <RadioGroupItem value="a">Option A</RadioGroupItem>
- *   <RadioGroupItem value="b" disabled>Option B</RadioGroupItem>
+ *   <RadioGroupItem value="b" description="Arrives tomorrow" disabled>Option B</RadioGroupItem>
  * </RadioGroup>
  * ```
  */
-const RadioGroupItem = ({ children, className, id: providedId, disabled, ...props }) => {
+const RadioGroupItem = ({ children, description, className, id: providedId, disabled, "aria-describedby": ariaDescribedBy, ...props }) => {
     const generatedId = useId();
+    const descriptionId = 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 })] }));
+    const hasDescription = description !== undefined && description !== null;
+    // Keep any ids the caller passed, and add the description's own.
+    const describedBy = hasDescription
+        ? [ariaDescribedBy, descriptionId].join(" ").trim()
+        : ariaDescribedBy;
+    return (_jsxs(Flex, { align: "flex-start", "data-component": "radio-group-item", "data-disabled": disabled, "data-slot": "radio-group-item", gap: "sm", children: [_jsx("span", { className: cn(CONTROL_LINE_CLASSES, "text-paragraph-sm"), children: _jsx(Radio, { "aria-describedby": describedBy, className: className, disabled: disabled, id: id, ...props }) }), _jsxs(Grid, { columns: "none", gap: "2xs", children: [_jsx(Label, { className: cn("cursor-pointer", disabled === true ? "cursor-not-allowed opacity-60" : null), htmlFor: id, children: children }), hasDescription ? (_jsx(Text, { id: descriptionId, size: "paragraph-sm", variant: "muted", children: description })) : null] })] }));
 };
 export { RadioGroup, RadioGroupItem };

package/dist/components/segmented-control/segmented-control-indicator.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { springs } from "@instruments/materia-ui/tokens/motion";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import * as m from "motion/react-m";
-import { SEGMENTED_INDICATOR_CLASS } from "../segmented/segmented-root.js";
+import { SEGMENTED_INDICATOR_CLASS } from "../../tokens/segmented.js";
 import { useSegmentedControlContext } from "./segmented-control-context.js";
 /**
  * Animated active-segment indicator. A single instance is mounted under the

package/dist/components/segmented-control/segmented-control-item.js

@@ -5,9 +5,9 @@ import { Dot } from "@instruments/materia-ui/components/dot";
 import { Icon } from "@instruments/materia-ui/components/icon";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { getResponsiveSizeOverrides } from "../../tokens/responsive.js";
+import { SEGMENTED_TRIGGER_PADDING } from "../../tokens/segmented.js";
 import { warnMissingAriaLabel } from "../../utils/warn-missing-aria-label.js";
 import { Flex } from "../flex.js";
-import { SEGMENTED_TRIGGER_PADDING } from "../segmented/segmented-root.js";
 import { useSegmentedControlContext } from "./segmented-control-context.js";
 import { SegmentedControlIndicator } from "./segmented-control-indicator.js";
 import { segmentedControlItemVariants } from "./segmented-control-variants.js";

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

@@ -6,8 +6,8 @@ import { ScrollFade } from "@instruments/materia-ui/components/scroll-fade";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, } from "../../tokens/segmented.js";
 import { Flex } from "../flex.js";
-import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, } from "../segmented/segmented-root.js";
 import { SegmentedControlContext } from "./segmented-control-context.js";
 import { useSingleSelection } from "./use-single-selection.js";
 /**

package/dist/components/segmented-control/segmented-control-variants.js

@@ -2,8 +2,8 @@ import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { cva } from "class-variance-authority";
 import { DISABLED } from "../../tokens/input-shell.js";
+import { SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../../tokens/segmented.js";
 import { typedEntries } from "../../utils/typed-entries.js";
-import { SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-root.js";
 /**
  * Item padding lives in compound variants (mirroring `tabsTriggerVariants`) so a
  * single size dimension drives text (base `size` variant) and padding

package/dist/components/stepper/stepper-item.js

@@ -58,7 +58,11 @@ export const StepperItem = ({ value, label, disabled = false, icon = Check, clas
     const circleSize = state === "completed"
         ? CIRCLE_SIZES[baseSize].completed
         : CIRCLE_SIZES[baseSize].default;
-    return (_jsxs("div", { className: cn("relative", className), "data-slot": "stepper-item", "data-state": state, ...rest, children: [_jsx("div", { className: cn(stepperCircleContainerVariants({ size: baseSize }), getResponsiveSizeOverrides(size, STEPPER_CIRCLE_CONTAINER_SIZE_CLASSES)), children: _jsx(m.button, { "aria-current": state === "current" ? "step" : undefined, "aria-label": label !== undefined && label !== null && label !== ""
+    return (_jsxs("div", { className: cn("group/step relative", className), "data-slot": "stepper-item", "data-state": state, ...rest, children: [_jsx("div", { className: cn(stepperCircleContainerVariants({ size: baseSize }), getResponsiveSizeOverrides(size, STEPPER_CIRCLE_CONTAINER_SIZE_CLASSES)), children: _jsx(m.button, { "aria-current": state === "current" ? "step" : undefined, "aria-label": label !== undefined && label !== null && label !== ""
                         ? `Step: ${label}`
-                        : `Step ${value + 1}`, className: cn(stepperCircleVariants({ size: baseSize, state }), isInteractive && "cursor-pointer", !isInteractive && "cursor-default"), disabled: disabled, layout: true, onClick: handleClick, onKeyDown: handleKeyDown, style: { borderRadius: 9999, height: circleSize, width: circleSize }, transition: springs.standard, type: "button", children: _jsx(m.span, { className: "flex", layout: true, children: _jsx(Icon, { className: stepperIconVariants({ size: baseSize, state }), icon: icon, size: iconSize }) }) }) }), label !== undefined && label !== null && label !== "" && (_jsx("span", { className: cn(stepperLabelVariants({ size: baseSize, state }), getResponsiveSizeOverrides(size, STEPPER_LABEL_SIZE_CLASSES)), children: label }))] }));
+                        : `Step ${value + 1}`, className: cn(stepperCircleVariants({ size: baseSize, state }), isInteractive && "cursor-pointer", !isInteractive && "cursor-default"), disabled: disabled, layout: true, onClick: handleClick, onKeyDown: handleKeyDown, style: { borderRadius: 9999, height: circleSize, width: circleSize }, transition: springs.standard, type: "button", children: _jsx(m.span, { className: "flex", layout: true, children: _jsx(Icon, { className: stepperIconVariants({ size: baseSize, state }), icon: icon, size: iconSize }) }) }) }), label !== undefined && label !== null && label !== "" && (_jsx("span", { className: cn(stepperLabelVariants({
+                    edge: value === 0 ? "start" : "center",
+                    size: baseSize,
+                    state,
+                }), getResponsiveSizeOverrides(size, STEPPER_LABEL_SIZE_CLASSES)), children: label }))] }));
 };

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

@@ -36,6 +36,7 @@ export declare const stepperIconVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Step label variants - absolutely positioned to not affect flex layout */
 export declare const stepperLabelVariants: (props?: ({
+    edge?: "center" | "start" | null | undefined;
     size?: StepperSize | null | undefined;
     state?: "completed" | "current" | "disabled" | "upcoming" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/stepper/stepper-variants.js

@@ -105,12 +105,22 @@ export const stepperIconVariants = cva("transition-colors", {
     },
 });
 /** Step label variants - absolutely positioned to not affect flex layout */
-export const stepperLabelVariants = cva("text-caption absolute left-1/2 -translate-x-1/2 text-center whitespace-nowrap", {
+// Labels centre under their circles, except at the ends: the first starts at
+// its circle's left edge and the last ends at its circle's right edge, so no
+// label hangs outside the stepper's box. The last step is found with CSS
+// (`last-child` of the root, via the item's `group/step`) so it holds on the
+// server render; the first is passed in as `edge`.
+export const stepperLabelVariants = cva("text-caption absolute whitespace-nowrap group-last/step:right-0 group-last/step:left-auto group-last/step:translate-x-0 group-last/step:text-right", {
     defaultVariants: {
+        edge: "center",
         size: "base",
         state: "upcoming",
     },
     variants: {
+        edge: {
+            center: "left-1/2 -translate-x-1/2 text-center",
+            start: "left-0 text-left",
+        },
         size: STEPPER_LABEL_SIZE_CLASSES,
         state: {
             completed: "text-foreground",

package/dist/components/tab-navigation/tab-navigation-link.js

@@ -4,9 +4,9 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../../tokens/segmented.js";
 import { Flex } from "../flex.js";
 import { Icon } from "../icon.js";
-import { SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-variants.js";
 import { useTabsContext } from "../tabs/tabs-context.js";
 import { TabsIndicator } from "../tabs/tabs-indicator.js";
 import { DEFAULT_TABS_SIZE, tabsTriggerVariants } from "../tabs/tabs-variants.js";

package/dist/components/tabs/tabs-indicator.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { springs } from "@instruments/materia-ui/tokens/motion";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import * as m from "motion/react-m";
-import { SEGMENTED_INDICATOR_CLASS } from "../segmented/segmented-root.js";
+import { SEGMENTED_INDICATOR_CLASS } from "../../tokens/segmented.js";
 import { useTabsContext } from "../tabs/tabs-context.js";
 const indicatorStyles = {
     line: "absolute inset-x-0 bottom-0 h-0.5 bg-primary dark:bg-gray-100",

package/dist/components/tabs/tabs-trigger.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { getResponsiveSizeOverrides, resolveResponsiveBase, } from "../../tokens/responsive.js";
+import { SEGMENTED_DOT_SIZE, SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../../tokens/segmented.js";
 import { Dot } from "../dot.js";
 import { Flex } from "../flex.js";
 import { Icon } from "../icon.js";
-import { SEGMENTED_DOT_SIZE, SEGMENTED_ICON_SIZE, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-variants.js";
 import { useTabsContext } from "../tabs/tabs-context.js";
 import { TabsIndicator } from "../tabs/tabs-indicator.js";
 import { DEFAULT_TABS_SIZE, tabsTriggerVariants } from "../tabs/tabs-variants.js";

package/dist/components/tabs/tabs-variants.js

@@ -2,8 +2,8 @@ import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { cva } from "class-variance-authority";
 import { DISABLED } from "../../tokens/input-shell.js";
+import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../../tokens/segmented.js";
 import { typedEntries } from "../../utils/typed-entries.js";
-import { SEGMENTED_GAP, SEGMENTED_SHELL_BASE, SEGMENTED_SHELL_PADDING, SEGMENTED_TRIGGER_PADDING, SEGMENTED_TRIGGER_TEXT, } from "../segmented/segmented-root.js";
 const segmentedShellPaddingVariants = typedEntries(SEGMENTED_SHELL_PADDING).map(([size, className]) => ({
     className,
     size,

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

@@ -24,7 +24,7 @@ interface TextareaProps extends WithTestId<React.ComponentProps<"textarea">> {
  * ```
  *
  * @bestPractice Inside a `Field`, let invalid state cascade like `Input` - omit `hasError`; pass it only to force error styling on a standalone `Textarea`.
- * @bestPractice It auto-grows with content (`field-sizing-content`); set `rows` for an initial height rather than pinning height via CSS.
+ * @bestPractice It auto-grows with content (`field-sizing-content`); set `rows` for a minimum height in lines rather than pinning height via CSS.
  * @bestPractice Give it a label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.
  * @category forms
  */

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

@@ -6,6 +6,7 @@ import { cn } from "@instruments/materia-ui/utils/cn";
 import { hasErrorInput } from "../../tokens/has-error-input.js";
 import { INPUT_SHELL } from "../../tokens/input-shell.js";
 import { useFieldContext } from "../field/field-context.js";
+import { useTextareaRows } from "./use-textarea-rows.js";
 /**
  * Renders a textarea element for multi-line text input (Base UI
  * `Field.Control` rendering a `<textarea>`). Inside a Field it is the field's
@@ -26,21 +27,17 @@ import { useFieldContext } from "../field/field-context.js";
  * ```
  *
  * @bestPractice Inside a `Field`, let invalid state cascade like `Input` - omit `hasError`; pass it only to force error styling on a standalone `Textarea`.
- * @bestPractice It auto-grows with content (`field-sizing-content`); set `rows` for an initial height rather than pinning height via CSS.
+ * @bestPractice It auto-grows with content (`field-sizing-content`); set `rows` for a minimum height in lines rather than pinning height via CSS.
  * @bestPractice Give it a label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.
  * @category forms
  */
 const Textarea = ({ className, testId, hasError, id, name, disabled, rows, style, ...props }) => {
     const field = useFieldContext();
     const resolvedError = hasError ?? field?.invalid ?? false;
-    // `field-sizing-content` sizes the box to its text and ignores `rows`, so
-    // `rows` sets the starting height instead: that many lines plus the py-2
-    // padding and the 1px border, before the box grows with its content.
-    const sizedStyle = rows === undefined
-        ? style
-        : { minHeight: `calc(${rows}lh + 1rem + 2px)`, ...style };
+    const { className: sizingClassName, ref: sizingRef, style: sizingStyle, } = useTextareaRows(rows);
     // The control owns id/name/disabled so Field can label and validate it;
-    // textarea-only props ride on the rendered element.
-    return (_jsx(FieldPrimitive.Control, { render: _jsx("textarea", { className: cn(focusInput(), `flex field-sizing-content min-h-16 w-full ${INPUT_SHELL} placeholder:text-muted-foreground transition-color-shadow text-paragraph md:text-paragraph-sm px-3 py-2 shadow-xs disabled:cursor-not-allowed disabled:opacity-50`, hasErrorInput, className), "data-component": "textarea", "data-slot": "textarea", rows: rows, style: sizedStyle, ...(hasError === true ? { "aria-invalid": true } : {}), ...(resolvedError ? { "data-error": true } : {}), ...(testId === undefined ? {} : { "data-testid": testId }), ...props }), ...(disabled === undefined ? {} : { disabled }), ...(id === undefined ? {} : { id }), ...(name === undefined ? {} : { name }) }));
+    // textarea-only props ride on the rendered element. The sizing ref sits on
+    // the control so a caller's own `ref` on the textarea still lands.
+    return (_jsx(FieldPrimitive.Control, { ref: sizingRef, render: _jsx("textarea", { className: cn(focusInput(), `flex w-full ${INPUT_SHELL} placeholder:text-muted-foreground transition-color-shadow text-paragraph md:text-paragraph-sm px-3 py-2 shadow-xs disabled:cursor-not-allowed disabled:opacity-50`, sizingClassName, hasErrorInput, className), "data-component": "textarea", "data-slot": "textarea", rows: rows, style: { ...sizingStyle, ...style }, ...(hasError === true ? { "aria-invalid": true } : {}), ...(resolvedError ? { "data-error": true } : {}), ...(testId === undefined ? {} : { "data-testid": testId }), ...props }), ...(disabled === undefined ? {} : { disabled }), ...(id === undefined ? {} : { id }), ...(name === undefined ? {} : { name }) }));
 };
 export { Textarea };

package/dist/components/textarea/use-textarea-rows.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties, RefCallback } from "react";
+interface TextareaRowsSizing {
+    /** Sizing classes: `field-sizing-content`, plus `min-h-16` when there are no `rows`. */
+    className: string;
+    /** Goes on the textarea, to read back its padding and border once mounted. */
+    ref: RefCallback<HTMLTextAreaElement>;
+    /** The `rows`-high minimum, once the edges are known. */
+    style: CSSProperties | undefined;
+}
+/**
+ * Lets a textarea grow with its text (`field-sizing: content`) without
+ * losing `rows`, which content sizing ignores in every browser.
+ *
+ * Until it mounts, a textarea with `rows` is left to the browser, which
+ * sizes it from `rows` with whatever padding and border it has. Once
+ * mounted, those edges are read back from its computed style, the minimum
+ * height becomes `rows` lines plus them, and content sizing takes over to
+ * grow it beyond that. The `lh` unit keeps the minimum in step when the line
+ * height changes at a breakpoint.
+ */
+export declare const useTextareaRows: (rows: number | undefined) => TextareaRowsSizing;
+export {};

package/dist/components/textarea/use-textarea-rows.js

@@ -0,0 +1,43 @@
+"use client";
+import { useCallback, useState } from "react";
+/**
+ * Lets a textarea grow with its text (`field-sizing: content`) without
+ * losing `rows`, which content sizing ignores in every browser.
+ *
+ * Until it mounts, a textarea with `rows` is left to the browser, which
+ * sizes it from `rows` with whatever padding and border it has. Once
+ * mounted, those edges are read back from its computed style, the minimum
+ * height becomes `rows` lines plus them, and content sizing takes over to
+ * grow it beyond that. The `lh` unit keeps the minimum in step when the line
+ * height changes at a breakpoint.
+ */
+export const useTextareaRows = (rows) => {
+    const [edges, setEdges] = useState();
+    const ref = useCallback((element) => {
+        if (element === null || rows === undefined) {
+            return;
+        }
+        const style = getComputedStyle(element);
+        setEdges([
+            style.paddingTop,
+            style.paddingBottom,
+            style.borderTopWidth,
+            style.borderBottomWidth,
+        ].join(" + "));
+    }, [rows]);
+    if (rows === undefined) {
+        return {
+            className: "field-sizing-content min-h-16",
+            ref,
+            style: undefined,
+        };
+    }
+    if (edges === undefined) {
+        return { className: "", ref, style: undefined };
+    }
+    return {
+        className: "field-sizing-content",
+        ref,
+        style: { minHeight: `calc(${rows}lh + ${edges})` },
+    };
+};