@instruments/materia-ui 0.1.0 → 0.3.0

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.d.ts

@@ -72,5 +72,5 @@ export interface DocsManifest {
     storybook: DocsStorybookInventory;
 }
 /** The slug of every documented component and composition. */
-export type DocsUnitSlug = "accordion" | "alert" | "alert-dialog" | "anchor" | "animated-number" | "aspect-ratio" | "attribute-card" | "avatar" | "badge" | "border-beam" | "box" | "breadcrumb" | "button" | "button-group" | "calendar" | "card" | "card-grid" | "carousel" | "center" | "chart" | "checkbox" | "checkbox-card" | "checkbox-field" | "code" | "collapsible" | "color-palette" | "color-wheel" | "combobox" | "command" | "container" | "context-menu" | "cookie-banner" | "country-combobox" | "country-select" | "data-grid" | "data-grid-column-filter" | "data-grid-column-header" | "data-grid-column-visibility" | "data-grid-pagination" | "data-grid-table" | "delivery-banner" | "description-list" | "dialog" | "document-list" | "dot" | "dot-matrix-loader" | "drawer" | "dropdown-menu" | "easing-curve" | "editorial-card" | "empty" | "empty-state" | "error-boundary" | "error-state" | "expand-button" | "expandable-text" | "fade-overlay" | "field" | "file-upload" | "flex" | "folder-tile" | "gallery" | "grid" | "group" | "heading" | "hotspot-indicator" | "hover-card" | "icon" | "icon-box" | "icon-card" | "icon-morph" | "identified-surface" | "input" | "input-card" | "input-group" | "input-otp" | "item" | "kbd" | "label" | "loading-state" | "location-input" | "logo" | "marquee-text" | "media-frame" | "mega-menu" | "menu-item" | "menubar" | "mobile-navigation" | "month-year-picker" | "morph-dialog" | "motion-config" | "native-select" | "navigation-menu" | "page-header" | "page-toolbar" | "pagination" | "phone-input" | "pill" | "pixel-loader" | "popover" | "product-card" | "product-specifications-selector" | "progress" | "progress-dots" | "prompt-panel" | "quantity-control" | "quick-view" | "radio" | "radio-card" | "radio-group" | "requirement-item" | "resizable" | "scrim" | "scroll-area" | "scroll-fade" | "scroll-frame" | "search-input" | "section" | "section-header" | "segmented" | "segmented-control" | "select" | "separator" | "settings-card" | "sheet" | "shimmer" | "shine" | "sidebar" | "sidepanel" | "simple-grid" | "site-footer" | "skeleton" | "slider" | "social-icon" | "space" | "spinner" | "stack" | "stagger" | "stepper" | "streaming-text" | "sub-navigation" | "success-tick-ripple" | "swatch" | "swatch-fan" | "swatch-group" | "swatch-selector" | "switch" | "tab-navigation" | "table" | "tabs" | "tag" | "tag-selector" | "text" | "textarea" | "thinking-loader" | "thinking-orb" | "thinking-trace" | "time-slot-picker" | "toast" | "toggle" | "toggle-group" | "tooltip" | "variant-selector" | "verge" | "visually-hidden" | "voice";
+export type DocsUnitSlug = "accordion" | "alert" | "alert-dialog" | "anchor" | "animated-number" | "aspect-ratio" | "attribute-card" | "avatar" | "badge" | "border-beam" | "box" | "breadcrumb" | "button" | "button-group" | "calendar" | "card" | "card-grid" | "carousel" | "center" | "chart" | "checkbox" | "checkbox-card" | "checkbox-field" | "code" | "collapsible" | "color-palette" | "color-wheel" | "combobox" | "command" | "container" | "context-menu" | "cookie-banner" | "country-combobox" | "country-select" | "data-grid" | "data-grid-column-filter" | "data-grid-column-header" | "data-grid-column-visibility" | "data-grid-pagination" | "data-grid-table" | "delivery-banner" | "description-list" | "dialog" | "document-list" | "dot" | "dot-matrix-loader" | "drawer" | "dropdown-menu" | "easing-curve" | "editorial-card" | "empty" | "empty-state" | "error-boundary" | "error-state" | "expand-button" | "expandable-text" | "fade-overlay" | "field" | "file-upload" | "flex" | "folder-tile" | "gallery" | "grid" | "group" | "heading" | "hotspot-indicator" | "hover-card" | "icon" | "icon-box" | "icon-card" | "icon-morph" | "identified-surface" | "input" | "input-card" | "input-group" | "input-otp" | "item" | "kbd" | "label" | "loading-state" | "location-input" | "logo" | "marquee-text" | "media-frame" | "mega-menu" | "menu-item" | "menubar" | "mobile-navigation" | "month-year-picker" | "morph-dialog" | "motion-config" | "native-select" | "navigation-menu" | "page-header" | "page-toolbar" | "pagination" | "phone-input" | "pill" | "pixel-loader" | "popover" | "product-card" | "product-specifications-selector" | "progress" | "progress-dots" | "prompt-panel" | "quantity-control" | "quick-view" | "radio" | "radio-card" | "radio-group" | "requirement-item" | "resizable" | "scrim" | "scroll-area" | "scroll-fade" | "scroll-frame" | "search-input" | "section" | "section-header" | "segmented-control" | "select" | "separator" | "settings-card" | "sheet" | "shimmer" | "shine" | "sidebar" | "sidepanel" | "simple-grid" | "site-footer" | "skeleton" | "slider" | "social-icon" | "space" | "spinner" | "stack" | "stagger" | "stepper" | "streaming-text" | "sub-navigation" | "success-tick-ripple" | "swatch" | "swatch-fan" | "swatch-group" | "swatch-selector" | "switch" | "tab-navigation" | "table" | "tabs" | "tag" | "tag-selector" | "text" | "textarea" | "thinking-loader" | "thinking-orb" | "thinking-trace" | "time-slot-picker" | "toast" | "toggle" | "toggle-group" | "tooltip" | "variant-selector" | "verge" | "visually-hidden" | "voice";
 export declare const docsManifest: DocsManifest;

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: [],
         },
         {
@@ -9385,51 +9393,6 @@ export const docsManifest = {
             uses: [],
             usedBy: [],
         },
-        {
-            slug: "segmented",
-            module: "components/segmented",
-            title: "Segmented",
-            category: "forms",
-            description: "Shared class-name token primitives for the segmented-control visual language.\n\nConsumed by SegmentedControl, Tabs, and TabNavigation so they render an\nidentical shell, padding, gap, and active indicator at any size.\nNot components - these are Tailwind class strings and size→class maps.",
-            exports: [
-                {
-                    name: "SEGMENTED_GAP",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_INDICATOR_ACTIVE_CLASS",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_INDICATOR_CLASS",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_SHELL_BASE",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_SHELL_PADDING",
-                    kind: "const",
-                    props: [],
-                },
-                {
-                    name: "SEGMENTED_TRIGGER_PADDING",
-                    kind: "const",
-                    props: [],
-                },
-            ],
-            bestPractices: [
-                "These are class-name strings and size→class maps, not components - apply them via `className`, never render them as JSX.",
-                'Reuse these tokens to give a custom control the segmented "pill" shell; for actual segmented UIs prefer `SegmentedControl`; `Tabs` and `TabNavigation` consume the same tokens for panel and navigation switching.',
-            ],
-            uses: [],
-            usedBy: ["segmented-control", "tab-navigation", "tabs"],
-        },
         {
             slug: "segmented-control",
             module: "components/segmented-control",
@@ -9534,7 +9497,7 @@ export const docsManifest = {
                 "Switching visible content panels is Tabs; navigating URLs is TabNavigation - SegmentedControl is an input that selects a value or mode.",
                 "Icon-only items must carry an `aria-label`.",
             ],
-            uses: ["dot", "flex", "icon", "scroll-area", "scroll-fade", "segmented"],
+            uses: ["dot", "flex", "icon", "scroll-area", "scroll-fade"],
             usedBy: ["color-palette"],
             anatomy: {
                 children: [
@@ -11933,7 +11896,7 @@ export const docsManifest = {
                 "Use `TabNavigation` when each tab is a route/URL (it renders a `<nav>` of links); for in-page panels that swap without navigating, use `Tabs`.",
                 'It shares the Tabs look via context but defaults to `variant="line"`; mark the active link yourself (e.g. router `aria-current`) - there\'s no Base UI value tracking here.',
             ],
-            uses: ["flex", "icon", "segmented", "tabs"],
+            uses: ["flex", "icon", "tabs"],
             usedBy: [],
             anatomy: {
                 children: [
@@ -12175,7 +12138,7 @@ export const docsManifest = {
                 "Reach for `Tabs` to swap in-page panels via `TabsContent`; when each tab is a route, use `TabNavigation` instead (renders links, no panels).",
                 "Compose `TabsList`/`TabsTrigger`/`TabsContent` - shared `variant`/`size`/`fullWidth` flow through context, so set them on `Tabs`, not each trigger.",
             ],
-            uses: ["dot", "flex", "icon", "scroll-area", "segmented"],
+            uses: ["dot", "flex", "icon", "scroll-area"],
             usedBy: ["tab-navigation"],
             anatomy: {
                 children: [
@@ -12413,6 +12376,7 @@ export const docsManifest = {
                 "page-header",
                 "pixel-loader",
                 "product-card",
+                "radio-group",
                 "section-header",
                 "site-footer",
                 "slider",
@@ -12447,11 +12411,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 +14470,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 +14508,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 +18466,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 +18594,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 +19072,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",
@@ -23055,7 +23010,7 @@ export const docsManifest = {
     storybook: {
         addons: ["@storybook/addon-docs", "@storybook/react-vite"],
         anatomyFiles: 31,
-        storyFiles: 172,
-        storiesWithPlay: 64,
+        storyFiles: 171,
+        storiesWithPlay: 63,
     },
 };

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. */