@instruments/materia-ui 0.1.0 → 0.2.0

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})` },
+    };
+};

package/dist/compositions/data-grid-pagination/data-grid-pagination-root.d.ts

@@ -13,9 +13,16 @@ interface DataGridPaginationProps {
     info?: string;
     /** Placeholder rendered in place of the range summary while loading. */
     infoSkeleton?: ReactNode;
+    /**
+     * Collapse the page buttons into groups of `moreLimit`, with ellipsis
+     * buttons that jump to the next or previous group. Off shows a button for
+     * every page.
+     * @default true
+     */
     more?: boolean;
     /**
-     * Number of page buttons shown before collapsing to an ellipsis.
+     * Number of page buttons shown before collapsing to an ellipsis. Needs
+     * `more`.
      * @default 5
      */
     moreLimit?: number;
@@ -39,11 +46,6 @@ interface DataGridPaginationProps {
      * @default [5, 10, 25, 50, 100]
      */
     sizes?: number[];
-    /** @default "per page" */
-    sizesDescription?: string;
-    sizesInfo?: string;
-    /** @default "Show" */
-    sizesLabel?: string;
     /** Placeholder rendered in place of the rows-per-page select while loading. */
     sizesSkeleton?: ReactNode;
 }

package/dist/compositions/data-grid-pagination/data-grid-pagination-root.js

@@ -6,28 +6,17 @@ import { Skeleton } from "@instruments/materia-ui/components/skeleton";
 import { useDataGrid } from "@instruments/materia-ui/compositions/data-grid";
 import { cn } from "@instruments/materia-ui/utils/cn";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { useId } from "react";
 const defaultProps = {
-    /** Ellipsis text */
     ellipsisText: "...",
     info: "{from} - {to} of {count}",
-    /** Info skeleton */
     infoSkeleton: _jsx(Skeleton, { className: "h-8 w-60" }),
-    more: false,
-    /** More limit */
+    more: true,
     moreLimit: 5,
-    /** Next page label */
     nextPageLabel: "Go to next page",
-    /** Previous page label */
     previousPageLabel: "Go to previous page",
-    /** Rows per page label */
     rowsPerPageLabel: "Rows per page",
-    /** Component size */
     sizes: [5, 10, 25, 50, 100],
-    /** Component size */
-    sizesDescription: "per page",
-    /** Component size */
-    sizesLabel: "Show",
-    /** Component size */
     sizesSkeleton: _jsx(Skeleton, { className: "h-8 w-44" }),
 };
 const BTN_BASE_CLASSES = "size-7 p-0 text-paragraph-sm";
@@ -41,20 +30,22 @@ const formatPaginationInfo = (template, from, to, count) => template !== undefin
     : `${from} - ${to} of ${count}`;
 const RowsPerPageSelect = ({ rowsPerPageLabel, sizes, table, }) => {
     const { pageSize } = table.state.pagination;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-paragraph-sm", children: rowsPerPageLabel }), _jsxs(Select, { onValueChange: (value) => {
+    const labelId = useId();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-paragraph-sm", id: labelId, children: rowsPerPageLabel }), _jsxs(Select, { onValueChange: (value) => {
                     const newPageSize = Number(value);
                     table.setPageSize(newPageSize);
-                }, value: `${pageSize}`, children: [_jsx(SelectTrigger, { className: "w-fit", size: "sm", children: _jsx(SelectValue, { placeholder: `${pageSize}` }) }), _jsx(SelectContent, { className: "min-w-12.5", side: "top", children: sizes?.map((size) => (_jsx(SelectItem, { value: `${size}`, children: size }, size))) })] })] }));
+                }, value: `${pageSize}`, children: [_jsx(SelectTrigger, { "aria-labelledby": labelId, className: "w-fit", size: "sm", children: _jsx(SelectValue, { placeholder: `${pageSize}` }) }), _jsx(SelectContent, { className: "min-w-12.5", side: "top", children: sizes?.map((size) => (_jsx(SelectItem, { value: `${size}`, children: size }, size))) })] })] }));
 };
-const PaginationNav = ({ ellipsisText, moreLimit, nextPageLabel, previousPageLabel, table, }) => {
+const PaginationNav = ({ ellipsisText, more, moreLimit, nextPageLabel, previousPageLabel, table, }) => {
     const { pageIndex } = table.state.pagination;
     const pageCount = table.getPageCount();
     if (pageCount <= 1) {
         return null;
     }
-    // Determine the start and end of the pagination group
-    const currentGroupStart = Math.floor(pageIndex / moreLimit) * moreLimit;
-    const currentGroupEnd = Math.min(currentGroupStart + moreLimit, pageCount);
+    // Without `more`, one group holds every page and no ellipsis renders.
+    const groupSize = more ? moreLimit : pageCount;
+    const currentGroupStart = Math.floor(pageIndex / groupSize) * groupSize;
+    const currentGroupEnd = Math.min(currentGroupStart + groupSize, pageCount);
     // Page indices for the current group
     const pageIndices = Array.from({ length: Math.max(0, currentGroupEnd - currentGroupStart) }, (_, idx) => currentGroupStart + idx);
     return (_jsxs(Flex, { align: "center", className: "order-1 space-x-1 sm:order-2", children: [_jsx(Button, { "aria-label": previousPageLabel, emphasis: "ghost", className: BTN_ARROW_CLASSES, disabled: !table.getCanPreviousPage(), icon: ChevronLeftIcon, onClick: () => {
@@ -91,6 +82,6 @@ const DataGridPagination = (props) => {
     const from = pageIndex * pageSize + 1;
     const to = Math.min((pageIndex + 1) * pageSize, recordCount);
     const paginationInfo = formatPaginationInfo(mergedProps.info, from, to, recordCount);
-    return (_jsxs(Flex, { align: "center", className: cn("grow gap-2.5 py-2.5 sm:flex-row sm:py-0", mergedProps?.className), "data-component": "data-grid-pagination", "data-slot": "data-grid-pagination", direction: "column", justify: "space-between", wrap: "wrap", children: [_jsx(Flex, { align: "center", className: "order-2 space-x-2.5 pb-2.5 sm:order-1 sm:pb-0", wrap: "wrap", children: loading === true ? (mergedProps?.sizesSkeleton) : (_jsx(RowsPerPageSelect, { rowsPerPageLabel: mergedProps.rowsPerPageLabel, sizes: mergedProps.sizes, table: table })) }), _jsx(Flex, { align: "center", className: "order-1 gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0", direction: "column", justify: "center", children: loading === true ? (mergedProps?.infoSkeleton) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-paragraph-sm order-2 text-nowrap sm:order-1", children: paginationInfo }), _jsx(PaginationNav, { ellipsisText: mergedProps.ellipsisText, moreLimit: mergedProps?.moreLimit ?? 5, nextPageLabel: mergedProps.nextPageLabel, previousPageLabel: mergedProps.previousPageLabel, table: table })] })) })] }));
+    return (_jsxs(Flex, { align: "center", className: cn("grow gap-2.5 py-2.5 sm:flex-row sm:py-0", mergedProps?.className), "data-component": "data-grid-pagination", "data-slot": "data-grid-pagination", direction: "column", justify: "space-between", wrap: "wrap", children: [_jsx(Flex, { align: "center", className: "order-2 space-x-2.5 pb-2.5 sm:order-1 sm:pb-0", wrap: "wrap", children: loading === true ? (mergedProps?.sizesSkeleton) : (_jsx(RowsPerPageSelect, { rowsPerPageLabel: mergedProps.rowsPerPageLabel, sizes: mergedProps.sizes, table: table })) }), _jsx(Flex, { align: "center", className: "order-1 gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0", direction: "column", justify: "center", children: loading === true ? (mergedProps?.infoSkeleton) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-paragraph-sm order-2 text-nowrap sm:order-1", children: paginationInfo }), _jsx(PaginationNav, { ellipsisText: mergedProps.ellipsisText, more: mergedProps.more ?? true, moreLimit: mergedProps?.moreLimit ?? 5, nextPageLabel: mergedProps.nextPageLabel, previousPageLabel: mergedProps.previousPageLabel, table: table })] })) })] }));
 };
 export { DataGridPagination };

package/dist/compositions/product-card/product-card-color-count.js

@@ -15,25 +15,24 @@ import { useProductCard } from "./product-card-context.js";
  * instantly where a count cannot.
  *
  * The design draws 16px dots on a 26px pitch, the selected one wearing a ring,
- * then `+N` for the remainder; what renders is the nearest token step - see
- * {@link INLINE_SWATCHES}. Clicking `+N` opens the full set.
+ * then `+N` for the remainder; what renders is the nearest token step. The
+ * card's `maxSwatches` caps the row (five by default) and clicking `+N` opens
+ * the full set.
  */
 /**
- * Circles shown inline before the rest go behind `+N`.
+ * Circles a card under 240px wide can show beside the overflow label.
  *
- * The design draws five dots on a 26px pitch. the kit's smallest chip step is
- * `xs` (20px), which on the row's 10px gap gives a 30px pitch - five dots plus
- * the overflow label come to ~170px, which fits the full card's 204px content
- * column.
- *
- * Below 240px one dot is dropped and counted into `+N` instead: a 180px card
- * offers 144px and the label would clip off the right edge.
+ * The kit's smallest chip step is `xs` (20px), which on the row's 10px gap
+ * gives a 30px pitch. Five dots plus the label come to ~170px, which fits the
+ * full card's 204px content column, but a 180px card offers 144px and the label
+ * would clip off the right edge. So below 240px the row stops at four and
+ * counts the rest into `+N`.
  */
-const INLINE_SWATCHES = 5;
+const NARROW_SWATCHES = 4;
 /** The popover still caps its grid, so a 200-colourway family stays a panel. */
 const MAX_POPOVER_SWATCHES = 25;
 export const ProductCardColorCount = () => {
-    const { product, selectedVariantId, onVariantChange, renderImage } = useProductCard();
+    const { maxSwatches, onVariantChange, product, renderImage, selectedVariantId, } = useProductCard();
     const variantCount = product.variantCount ?? 1;
     const variants = product.variants ?? [product];
     // One colourway is not a choice, so it is not a control. Same rule the primary
@@ -41,22 +40,23 @@ export const ProductCardColorCount = () => {
     if (variantCount <= 1) {
         return null;
     }
-    const inlineVariants = variants.slice(0, INLINE_SWATCHES);
+    const inlineVariants = variants.slice(0, Math.max(0, maxSwatches));
     // The overflow counts against the GRAPH's total, not the array we happen to
     // hold - a page of variants is not the family.
     const inlineOverflow = variantCount - inlineVariants.length;
-    // The fifth dot is hidden below 240px, so the label there must count it. It
-    // only exists to be hidden when the row actually reached five.
-    const hasBreakpointOnlySwatch = inlineVariants.length === INLINE_SWATCHES;
-    const mediumOverflow = inlineOverflow + (hasBreakpointOnlySwatch ? 1 : 0);
-    // WHICH dot drops below 240px. The last one, unless the last one is the
-    // SELECTED colourway - hiding that leaves a narrow card showing four dots
-    // with no ring on any of them, so the card reads as if nothing is chosen
-    // while its photograph shows a colourway the row does not contain.
-    const lastIndex = INLINE_SWATCHES - 1;
-    const breakpointOnlyIndex = inlineVariants[lastIndex]?.id === selectedVariantId
-        ? lastIndex - 1
-        : lastIndex;
+    // Dots past NARROW_SWATCHES are hidden below 240px, so the label there must
+    // count them too.
+    const narrowCount = Math.min(inlineVariants.length, NARROW_SWATCHES);
+    const mediumOverflow = inlineOverflow + (inlineVariants.length - narrowCount);
+    // WHICH dots drop below 240px: the ones past the cut, unless one of them is
+    // the SELECTED colourway. Hiding that leaves a narrow card with no ring on
+    // any dot, so the card reads as if nothing is chosen while its photograph
+    // shows a colourway the row does not contain. The selected dot keeps its
+    // place and the last dot before the cut drops instead.
+    const selectedIndex = inlineVariants.findIndex((variant) => variant.id === selectedVariantId);
+    const isNarrowHidden = (index) => index < narrowCount
+        ? selectedIndex >= narrowCount && index === narrowCount - 1
+        : index !== selectedIndex;
     const hasPopoverOverflow = variantCount > MAX_POPOVER_SWATCHES;
     const popoverVisibleCount = hasPopoverOverflow
         ? MAX_POPOVER_SWATCHES - 1
@@ -71,7 +71,7 @@ export const ProductCardColorCount = () => {
                 sizes: size,
                 src: variant.images[0] ?? "",
             })] }));
-    return (_jsxs(Box, { className: "flex items-center gap-2.5", children: [_jsx(SwatchSelector, { className: "flex items-center gap-2.5", onValueChange: onVariantChange, size: "xs", value: selectedVariantId, children: inlineVariants.map((variant, index) => (_jsx(Swatch, { className: hasBreakpointOnlySwatch && index === breakpointOnlyIndex
+    return (_jsxs(Box, { className: "flex items-center gap-2.5", children: [_jsx(SwatchSelector, { className: "flex items-center gap-2.5", onValueChange: onVariantChange, size: "xs", value: selectedVariantId, children: inlineVariants.map((variant, index) => (_jsx(Swatch, { className: isNarrowHidden(index)
                         ? "hidden @[240px]/product-card:inline-flex"
                         : undefined, unavailable: variant.available === false, value: variant.id, children: swatchImage(variant, "20px") }, variant.id))) }), mediumOverflow > 0 ? (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { render: _jsx("button", { "aria-label": `Show all ${variantCount} ${product.variantLabel ?? "colours"}`, className: cn("text-muted-foreground hover:text-foreground text-caption cursor-pointer tabular-nums", 
                             // Exactly five colourways leaves nothing behind once the fifth

package/dist/compositions/product-card/product-card-compact-arm.js

@@ -14,8 +14,8 @@ import { ProductCardStatusBadge } from "./product-card-status-badge.js";
 import { ProductCardTools } from "./product-card-tools.js";
 /** Compact variant: below 180px, or always in compact mode. */
 export const ProductCardCompactArm = ({ compactFooterControl, overrideImageUrl, priority, similarityScore, toolsActive, }) => {
-    const { action, mode, onQuickView, statusBadge } = useProductCard();
+    const { action, mode, onQuickView, showSwatches, statusBadge } = useProductCard();
     const isCompactMode = mode === "compact";
     const hasCompactFooterControl = compactFooterControl !== null && compactFooterControl !== undefined;
-    return (_jsxs(Box, { className: cn("flex-col", isCompactMode ? "flex" : "flex h-full @[180px]/product-card:hidden"), children: [_jsxs(Box, { className: "relative w-full overflow-hidden rounded-3xl shadow-sm", children: [_jsx(ProductCardImageLink, { imageClassName: isCompactMode ? "!p-0" : undefined, overrideImageUrl: overrideImageUrl, priority: priority, similarityScore: similarityScore }), _jsx(ProductCardTools, { active: toolsActive }), _jsx(ProductCardQuickView, { forceVisible: true, onQuickView: onQuickView })] }), _jsxs(VStack, { className: "min-h-0 flex-1 gap-2.5 px-1.5 py-2", children: [_jsxs(VStack, { className: "gap-1 px-0.5", children: [_jsxs(Box, { className: "flex items-start justify-between gap-2", children: [_jsx(VStack, { className: "min-w-0 flex-1 gap-0.5", children: _jsx(ProductCardCaption, { scale: "compact" }) }), statusBadge?.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null] }), _jsx(ProductCardMeta, {}), action ? _jsx(ProductCardAction, { ...action }) : null, mode !== "single" && (_jsx(Box, { className: "min-h-5 pt-2", children: _jsx(ProductCardColorCount, {}) }))] }), hasCompactFooterControl ? (_jsx(Box, { className: "mt-auto flex justify-end", children: compactFooterControl })) : null] })] }));
+    return (_jsxs(Box, { className: cn("flex-col", isCompactMode ? "flex" : "flex h-full @[180px]/product-card:hidden"), children: [_jsxs(Box, { className: "relative w-full overflow-hidden rounded-3xl shadow-sm", children: [_jsx(ProductCardImageLink, { imageClassName: isCompactMode ? "!p-0" : undefined, overrideImageUrl: overrideImageUrl, priority: priority, similarityScore: similarityScore }), _jsx(ProductCardTools, { active: toolsActive }), _jsx(ProductCardQuickView, { forceVisible: true, onQuickView: onQuickView })] }), _jsxs(VStack, { className: "min-h-0 flex-1 gap-2.5 px-1.5 py-2", children: [_jsxs(VStack, { className: "gap-1 px-0.5", children: [_jsxs(Box, { className: "flex items-start justify-between gap-2", children: [_jsx(VStack, { className: "min-w-0 flex-1 gap-0.5", children: _jsx(ProductCardCaption, { scale: "compact" }) }), statusBadge?.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null] }), _jsx(ProductCardMeta, {}), action ? _jsx(ProductCardAction, { ...action }) : null, showSwatches && mode !== "single" && (_jsx(Box, { className: "min-h-5 pt-2", children: _jsx(ProductCardColorCount, {}) }))] }), hasCompactFooterControl ? (_jsx(Box, { className: "mt-auto flex justify-end", children: compactFooterControl })) : null] })] }));
 };

package/dist/compositions/product-card/product-card-content-types.d.ts

@@ -28,6 +28,11 @@ interface ProductCardDisplayOptions {
      * reserved height.
      */
     nameLines?: 1 | 2 | undefined;
+    /**
+     * Show the row of colourway swatches. Single-colour products and `single`
+     * mode never show it.
+     * @default true
+     */
     swatches?: boolean | undefined;
 }
 /**

package/dist/compositions/product-card/product-card-full-arm.js

@@ -31,6 +31,6 @@ import { ProductCardTools } from "./product-card-tools.js";
  * fetched - and the popover mounts nothing until it opens.
  */
 export const ProductCardFullArm = ({ footerControl, overrideImageUrl, priority, similarityScore, toolsActive, }) => {
-    const { action, active, mode, onQuickView, statusBadge } = useProductCard();
-    return (_jsxs(VStack, { className: cn("bg-card duration-normal h-full overflow-hidden rounded-3xl transition-shadow ease-in-out @[240px]/product-card:rounded-4xl", mode === "compact" ? "hidden" : "hidden @[180px]/product-card:flex", active ? "shadow-lg" : "shadow-sm hover:shadow-md"), gap: "none", children: [_jsxs(Box, { className: "relative w-full", children: [_jsx(ProductCardImageLink, { overrideImageUrl: overrideImageUrl, priority: priority, similarityScore: similarityScore }), statusBadge && !statusBadge.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null, _jsx(ProductCardTools, { active: toolsActive }), _jsx(ProductCardQuickView, { onQuickView: onQuickView })] }), _jsx(VStack, { className: "flex-1 pt-2 pb-4", gap: "none", children: _jsxs(VStack, { className: "min-h-0 flex-1 gap-2.5 px-4 @[240px]/product-card:gap-4", gap: "none", children: [_jsxs(VStack, { className: "gap-1 px-0.5", gap: "none", children: [_jsxs(Box, { className: "flex items-start justify-between gap-2", children: [_jsx(VStack, { className: "min-w-0 flex-1", gap: "none", children: _jsx(ProductCardCaption, {}) }), statusBadge?.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null] }), _jsx(ProductCardMeta, {}), action ? _jsx(ProductCardAction, { ...action }) : null, mode !== "single" && (_jsx(Box, { className: "pt-2", children: _jsx(Box, { className: "min-h-5", children: _jsx(ProductCardColorCount, {}) }) }))] }), footerControl !== null && footerControl !== undefined ? (_jsx(HStack, { className: "mt-auto", children: footerControl })) : null] }) })] }));
+    const { action, active, mode, onQuickView, showSwatches, statusBadge } = useProductCard();
+    return (_jsxs(VStack, { className: cn("bg-card duration-normal h-full overflow-hidden rounded-3xl transition-shadow ease-in-out @[240px]/product-card:rounded-4xl", mode === "compact" ? "hidden" : "hidden @[180px]/product-card:flex", active ? "shadow-lg" : "shadow-sm hover:shadow-md"), gap: "none", children: [_jsxs(Box, { className: "relative w-full", children: [_jsx(ProductCardImageLink, { overrideImageUrl: overrideImageUrl, priority: priority, similarityScore: similarityScore }), statusBadge && !statusBadge.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null, _jsx(ProductCardTools, { active: toolsActive }), _jsx(ProductCardQuickView, { onQuickView: onQuickView })] }), _jsx(VStack, { className: "flex-1 pt-2 pb-4", gap: "none", children: _jsxs(VStack, { className: "min-h-0 flex-1 gap-2.5 px-4 @[240px]/product-card:gap-4", gap: "none", children: [_jsxs(VStack, { className: "gap-1 px-0.5", gap: "none", children: [_jsxs(Box, { className: "flex items-start justify-between gap-2", children: [_jsx(VStack, { className: "min-w-0 flex-1", gap: "none", children: _jsx(ProductCardCaption, {}) }), statusBadge?.icon ? (_jsx(ProductCardStatusBadge, { ...statusBadge })) : null] }), _jsx(ProductCardMeta, {}), action ? _jsx(ProductCardAction, { ...action }) : null, showSwatches && mode !== "single" && (_jsx(Box, { className: "pt-2", children: _jsx(Box, { className: "min-h-5", children: _jsx(ProductCardColorCount, {}) }) }))] }), footerControl !== null && footerControl !== undefined ? (_jsx(HStack, { className: "mt-auto", children: footerControl })) : null] }) })] }));
 };

package/dist/compositions/product-card/product-card-provider-types.d.ts

@@ -134,6 +134,11 @@ interface ProductCardProviderProps {
      * dynamic routes).
      */
     linkPrefetch?: boolean | undefined;
+    /**
+     * How many colourway swatches the row shows before the rest go behind `+N`.
+     * Cards under 240px wide show at most four.
+     * @default 5
+     */
     maxSwatches?: number | undefined;
     /**
      * Mode determines the card behavior:
@@ -253,6 +258,11 @@ type ProductCardProps = ComponentProps<"div"> & Pick<ProductCardProviderProps, "
     showAddToCart?: boolean | undefined;
     showProductBrand?: boolean | undefined;
     showProductName?: boolean | undefined;
+    /**
+     * Show the row of colourway swatches. Single-colour products and `single`
+     * mode never show it.
+     * @default true
+     */
     showSwatches?: boolean | undefined;
     similarityScore?: number | undefined;
 };

package/dist/compositions/product-card/product-card-provider.js

@@ -66,7 +66,7 @@ const resolveDisplay = (display, hasRenderAddToCart) => ({
     showAddToCart: (display?.addToCart ?? true) && hasRenderAddToCart,
     showProductBrand: display?.brand ?? true,
     showProductName: display?.name ?? true,
-    showSwatches: display?.swatches ?? false,
+    showSwatches: display?.swatches ?? true,
 });
 /**
  * Which image the card is showing. Card-local because it is a way of LOOKING

package/dist/compositions/product-card/product-card-swatch-selector.js

@@ -9,9 +9,10 @@ export const ProductCardSwatchSelector = ({ className, ...props }) => {
         return null;
     }
     const variants = product.variants ?? [product];
-    const visibleVariants = variants.slice(0, maxSwatches);
-    // Use variantCount (total in DB) for overflow, not just loaded variants
-    const overflowCount = (product.variantCount ?? 1) - maxSwatches;
+    const visibleVariants = variants.slice(0, Math.max(0, maxSwatches));
+    // Count the overflow against the family's total (variantCount), not the
+    // loaded variants, and against the dots actually shown, not the cap.
+    const overflowCount = (product.variantCount ?? variants.length) - visibleVariants.length;
     return (_jsxs(SwatchSelector, { className: cn("px-6", className), onValueChange: onVariantChange, value: selectedVariantId, ...props, children: [visibleVariants.map((variant) => (_jsx(Swatch, { unavailable: variant.available === false, value: variant.id, children: renderImage({
                     alt: `${variant.name} variant`,
                     className: "object-cover",

package/dist/data/docs-manifest.js

@@ -5118,6 +5118,7 @@ export const docsManifest = {
                 "pixel-loader",
                 "prompt-panel",
                 "quick-view",
+                "radio-group",
                 "search-input",
                 "site-footer",
                 "streaming-text",
@@ -6197,7 +6198,7 @@ export const docsManifest = {
                 "Set `size`/`radius`/`disabled` once on `InputGroup`; children inherit them via context, so don't re-set them per child.",
                 "Inside a `Field` the group inherits invalid state and its `InputGroupInput`/`InputGroupTextarea` becomes the field's control (labelled, described, `aria-invalid`) - pass `hasError` only to force error styling and `aria-invalid` independently.",
             ],
-            uses: ["button", "field", "flex", "icon"],
+            uses: ["button", "field", "flex", "icon", "textarea"],
             usedBy: ["country-select", "search-input"],
             anatomy: {
                 children: [
@@ -8361,7 +8362,7 @@ export const docsManifest = {
             module: "components/progress",
             title: "Progress",
             category: "feedback",
-            description: "Linear progress bar showing completion from 0 to 100; pass `value={null}`\nfor an indeterminate (empty) track. Built on Base UI Progress for accessible\nsemantics.",
+            description: "Linear progress bar showing completion from 0 to 100. Pass `value={null}`\nwhen the amount of work is unknown: a short bar slides across the track on a\nloop, and under reduced motion it holds still in the middle. Built on Base\nUI Progress for accessible semantics.",
             exports: [
                 {
                     name: "Progress",
@@ -8437,8 +8438,9 @@ export const docsManifest = {
                 },
             ],
             bestPractices: [
-                "Use `Progress` for determinate 0–100 completion (`value={null}` for an indeterminate track); position in a stepped flow is `ProgressDots`.",
+                "Use `Progress` for determinate 0–100 completion and `value={null}` when the total is unknown; position in a stepped flow is `ProgressDots`.",
                 "For a ring instead of a bar use `ProgressCircle` - it needs an explicit `label` for its native `<progress>` accessible name.",
+                "Mount `ReducedMotionProvider` at the app root - the indeterminate bar slides via `m.*` (LazyMotion).",
             ],
             uses: ["center"],
             usedBy: ["file-upload"],
@@ -8787,6 +8789,12 @@ export const docsManifest = {
                             defaultValue: '"sm"',
                             description: 'Radio size - a single token or a per-breakpoint object like\n`{ base: "sm", md: "lg" }`.',
                         },
+                        {
+                            name: "description",
+                            type: "React.ReactNode",
+                            required: false,
+                            description: "Optional helper text below the label; wired to the radio via `aria-describedby`.",
+                        },
                     ],
                 },
                 {
@@ -8800,7 +8808,7 @@ export const docsManifest = {
                 "Drive selection with `value` + `onValueChange` (controlled) or `defaultValue` (uncontrolled) - don't set both on the same group.",
                 "Prefer `RadioGroupItem` (radio + wired `Label`) over hand-pairing `Radio` and `Label`; it auto-generates the `id`/`htmlFor` link.",
             ],
-            uses: ["flex", "label", "radio"],
+            uses: ["flex", "grid", "label", "radio", "text"],
             usedBy: [],
         },
         {
@@ -12413,6 +12421,7 @@ export const docsManifest = {
                 "page-header",
                 "pixel-loader",
                 "product-card",
+                "radio-group",
                 "section-header",
                 "site-footer",
                 "slider",
@@ -12447,11 +12456,11 @@ export const docsManifest = {
             ],
             bestPractices: [
                 "Inside a `Field`, let invalid state cascade like `Input` - omit `hasError`; pass it only to force error styling on a standalone `Textarea`.",
-                "It auto-grows with content (`field-sizing-content`); set `rows` for an initial height rather than pinning height via CSS.",
+                "It auto-grows with content (`field-sizing-content`); set `rows` for a minimum height in lines rather than pinning height via CSS.",
                 "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.",
             ],
             uses: ["field"],
-            usedBy: [],
+            usedBy: ["input-group"],
         },
         {
             slug: "thinking-loader",
@@ -14506,13 +14515,15 @@ export const docsManifest = {
                             name: "more",
                             type: "boolean",
                             required: false,
+                            defaultValue: "true",
+                            description: "Collapse the page buttons into groups of `moreLimit`, with ellipsis\nbuttons that jump to the next or previous group. Off shows a button for\nevery page.",
                         },
                         {
                             name: "moreLimit",
                             type: "number",
                             required: false,
                             defaultValue: "5",
-                            description: "Number of page buttons shown before collapsing to an ellipsis.",
+                            description: "Number of page buttons shown before collapsing to an ellipsis. Needs\n`more`.",
                         },
                         {
                             name: "nextPageLabel",
@@ -14542,23 +14553,6 @@ export const docsManifest = {
                             defaultValue: "[5, 10, 25, 50, 100]",
                             description: "Page-size options offered by the rows-per-page select.",
                         },
-                        {
-                            name: "sizesDescription",
-                            type: "string",
-                            required: false,
-                            defaultValue: '"per page"',
-                        },
-                        {
-                            name: "sizesInfo",
-                            type: "string",
-                            required: false,
-                        },
-                        {
-                            name: "sizesLabel",
-                            type: "string",
-                            required: false,
-                            defaultValue: '"Show"',
-                        },
                         {
                             name: "sizesSkeleton",
                             type: "ReactNode",
@@ -18517,6 +18511,8 @@ export const docsManifest = {
                             name: "maxSwatches",
                             type: "number | undefined",
                             required: false,
+                            defaultValue: "5",
+                            description: "How many colourway swatches the row shows before the rest go behind `+N`.\nCards under 240px wide show at most four.",
                         },
                         {
                             name: "menuOpen",
@@ -18643,6 +18639,8 @@ export const docsManifest = {
                             name: "showSwatches",
                             type: "boolean | undefined",
                             required: false,
+                            defaultValue: "true",
+                            description: "Show the row of colourway swatches. Single-colour products and `single`\nmode never show it.",
                         },
                         {
                             name: "similarityScore",
@@ -19119,6 +19117,8 @@ export const docsManifest = {
                             name: "maxSwatches",
                             type: "number | undefined",
                             required: false,
+                            defaultValue: "5",
+                            description: "How many colourway swatches the row shows before the rest go behind `+N`.\nCards under 240px wide show at most four.",
                         },
                         {
                             name: "mode",

package/dist/styles/index.css

@@ -164,7 +164,9 @@
   --color-muted-foreground: var(--color-gray-600);
   --color-accent: var(--color-gray-200);
   --color-accent-foreground: var(--color-gray-900);
-  --color-destructive: var(--color-red-600);
+  /* Red-700, not 600: red-50 on red-600 is 4.4:1 and drops under the button
+     sheen and hover; red-700 holds 4.5:1 as a fill and as text on the page. */
+  --color-destructive: var(--color-red-700);
   --color-destructive-foreground: var(--color-red-50);
   --color-favorite: var(--color-red-500);
   --color-border: var(--color-gray-200);
@@ -213,8 +215,9 @@
   --color-text-muted: var(--color-gray-600);
 
   /* Calm semantic colours - Next.js inspired */
+  /* Accents double as text on the page, so they hold 4.5:1 on white. */
   --color-affirmative-soft: #f0fdf4; /* green-50 */
-  --color-affirmative-accent: #16a34a; /* green-600 */
+  --color-affirmative-accent: #15803d; /* green-700 */
   --color-affirmative-foreground: #14532d; /* green-900 */
 
   --color-warning-soft: #fffbeb; /* very soft amber */
@@ -226,13 +229,17 @@
   --color-error-foreground: #991b1b; /* red-800 */
 
   --color-info-soft: #eff6ff; /* blue-50 */
-  --color-info-accent: #3b82f6; /* blue-500 */
+  --color-info-accent: #2563eb; /* blue-600 */
   --color-info-foreground: #1e3a5f; /* blue-900 */
 
   --color-brand: #ffe600; /* Brand yellow, per the Figma base/brand token */
   --color-brand-soft: #fffef5; /* very soft brand yellow (code-only) */
   --color-brand-accent: #dda600; /* per Figma base/brand accent - consumed at /40 for borders/accents */
   --color-brand-foreground: var(--color-gray-800); /* #1F2937 - per Figma */
+  /* Brand-hued text on the page background, for brand buttons without a fill.
+     6.1:1 on white, so it still passes under a faded hover; override it
+     alongside --color-brand. */
+  --color-brand-strong: #776000;
 
   /* Status border tokens (light mode base values - desaturated blends) */
   --color-affirmative-border: #dcfce7; /* green-100 - muted */
@@ -547,7 +554,7 @@
     --color-muted-foreground: var(--color-gray-600);
     --color-accent: var(--color-gray-200);
     --color-accent-foreground: var(--color-gray-900);
-    --color-destructive: var(--color-red-600);
+    --color-destructive: var(--color-red-700);
     --color-destructive-foreground: var(--color-red-50);
     --color-favorite: var(--color-red-500);
     --color-border: var(--color-gray-200);
@@ -602,8 +609,10 @@
     --color-muted-foreground: var(--color-gray-400);
     --color-accent: var(--color-surface-2);
     --color-accent-foreground: var(--color-foreground);
-    --color-destructive: var(--color-red-500);
-    --color-destructive-foreground: var(--color-red-50);
+    /* Like the other dark solids, danger is a light fill with dark text: no
+       red reads both as text on graphite and under light text. */
+    --color-destructive: var(--color-red-400);
+    --color-destructive-foreground: var(--color-surface-sunk);
     --color-favorite: var(--color-red-400);
     --color-border: oklch(0.82 0.007 250 / 0.1);
     --color-input: var(--color-surface-1);
@@ -629,6 +638,8 @@
     --color-info-accent: oklch(0.72 0.1 245);
     --color-info-foreground: oklch(0.74 0.08 245);
     --color-brand-soft: var(--color-surface-1);
+    /* The brand itself reads on graphite (14.6:1 on the background). */
+    --color-brand-strong: var(--color-brand);
 
     /* Dark surfaces are separated by the role ladder and hairline, never
        elevation. This also neutralises custom shadow utilities package-wide. */

package/lint/tokens.mjs

@@ -40,6 +40,7 @@ export const colorTokens = [
   "brand-accent",
   "brand-foreground",
   "brand-soft",
+  "brand-strong",
   "card",
   "card-background",
   "card-border",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instruments/materia-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Materia design system: React components, tokens and Tailwind v4 styles.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {