@instruments/materia-ui 0.4.2 → 0.4.4

package/dist/components/swatch/swatch-tile-styles.d.ts

@@ -3,7 +3,11 @@ import type { SwatchTileSizeProp, SwatchTileVariant, TileSwatchProps } from "./s
 type SizeTier = "tiny" | "small" | "standard";
 declare const isTileSizeScale: (size: SwatchTileSizeProp) => size is SwatchTileSize;
 declare const ringShadowMap: Record<SizeTier, string>;
-/** Radius of the padded ring and frame ring, concentric with the border. */
+/**
+ * Radius of the padded ring and frame ring, concentric with the border. A bare
+ * tile has no border, so its rings sit on its edge and take whatever corner it
+ * has, including one set through `className`.
+ */
 declare const getInnerRingRadius: ({ compact, isCard, tier, }: {
     compact: boolean;
     isCard: boolean;

package/dist/components/swatch/swatch-tile-styles.js

@@ -68,8 +68,12 @@ const pickRadius = (map, bare, tier, isCard, compactRadius) => {
     }
     return map[tier][compactRadius ? "compact" : "normal"];
 };
-/** Radius of the padded ring and frame ring, concentric with the border. */
-const getInnerRingRadius = ({ compact, isCard, tier, }) => pickRadius(innerRingRadiusMap, "rounded-md", tier, isCard, compact);
+/**
+ * Radius of the padded ring and frame ring, concentric with the border. A bare
+ * tile has no border, so its rings sit on its edge and take whatever corner it
+ * has, including one set through `className`.
+ */
+const getInnerRingRadius = ({ compact, isCard, tier, }) => pickRadius(innerRingRadiusMap, "rounded-[inherit]", tier, isCard, compact);
 /** Apply the tile's boolean, size and variant defaults. */
 const withTileDefaults = (input) => ({
     compact: input.compactRadius ?? false,
@@ -111,7 +115,7 @@ const buildTileClasses = (state, { borderColor, className, }) => {
     // Round the image element itself (not just clip via `overflow-hidden`):
     // WebKit clips in-flow replaced elements inconsistently, leaving square
     // corners that poke past the radius.
-    pickRadius(innerImgRadiusMap, "[&_img]:rounded-md", tier, isCard, compact), isCard && (dotted ? "border-2" : containerBorderMap[tier]), isCard && "shadow-xs", !isCard && "bg-muted", isCard && "bg-card", isCard && (dotted ? "border-dotted" : "border-solid"), getBorderClasses(isCard, borderColor, selected), muted && "opacity-50 hover:opacity-100", isCard && "transition-border-shadow-opacity duration-quick ease-out", disabled && "cursor-not-allowed opacity-50", size === "fluid" && "w-full", isTileSizeScale(size) && swatchTileSizeMap[size], className);
+    pickRadius(innerImgRadiusMap, "[&_img]:rounded-[inherit]", tier, isCard, compact), isCard && (dotted ? "border-2" : containerBorderMap[tier]), isCard && "shadow-xs", !isCard && "bg-muted", isCard && "bg-card", isCard && (dotted ? "border-dotted" : "border-solid"), getBorderClasses(isCard, borderColor, selected), muted && "opacity-50 hover:opacity-100", isCard && "transition-border-shadow-opacity duration-quick ease-out", disabled && "cursor-not-allowed opacity-50", size === "fluid" && "w-full", isTileSizeScale(size) && swatchTileSizeMap[size], className);
 };
 const buildTileStyle = (state, { borderColor, color, style, }) => {
     const { size } = state;

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

@@ -5,7 +5,7 @@ import { cn } from "@instruments/materia-ui/utils/cn";
 import { createElement, useCallback } from "react";
 import { useProductCard } from "./product-card-context.js";
 export const ProductCardCaption = ({ scale = "default", }) => {
-    const { availability, currentVariant, linkComponent, linkPrefetch, onCardClick, product, productNameLines, productUrl, showProductBrand, showProductName, } = useProductCard();
+    const { availability, currentVariant, linkComponent, linkPrefetch, onCardClick, product, productBrandLines, productNameLines, productUrl, showProductBrand, showProductName, } = useProductCard();
     const handleLinkClick = useCallback((event) => {
         if (onCardClick) {
             event.preventDefault();
@@ -33,7 +33,9 @@ export const ProductCardCaption = ({ scale = "default", }) => {
             prefetch: isExternalUrl ? undefined : linkPrefetch,
         };
     return (_jsxs(_Fragment, { children: [showProductBrand && hasBrandName
-                ? createElement(LinkComp, linkProps, _jsx(Text, { className: cn("line-clamp-1 truncate", brandSize), weight: "semibold", children: brandName }))
+                ? createElement(LinkComp, linkProps, _jsx(Text, { className: cn(productBrandLines === 2
+                        ? "line-clamp-2 text-pretty"
+                        : "line-clamp-1 truncate", brandSize), weight: "semibold", children: brandName }))
                 : null, showProductName
                 ? createElement(LinkComp, linkProps, _jsx(Text, { className: cn("text-foreground", 
                     // `truncate` and `line-clamp-2` cannot both apply: truncate

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

@@ -16,6 +16,14 @@ interface ProductCardProcessingProps {
 interface ProductCardDisplayOptions {
     addToCart?: boolean | undefined;
     brand?: boolean | undefined;
+    /**
+     * How many lines the brand may occupy before it clamps. One by default.
+     * Raise it to two where brands run long - *Scuffmaster Wolf-Gordon* clamps
+     * to *Scuffmaster Wolf-...* on one line of a 208px card - and the brand is
+     * how people tell the cards apart. Like `nameLines`, the clamp is a maximum,
+     * not a reserved height.
+     */
+    brandLines?: 1 | 2 | undefined;
     name?: boolean | undefined;
     /**
      * How many lines the product name may occupy before it clamps. One by

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

@@ -1,8 +1,8 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "@instruments/materia-ui/components/box";
+import { MarqueeText } from "@instruments/materia-ui/components/marquee-text";
 import { HStack } from "@instruments/materia-ui/components/stack";
-import { Text } from "@instruments/materia-ui/components/text";
 import { ProductCardCategory } from "./product-card-category.js";
 import { useProductCard } from "./product-card-context.js";
 import { ProductCardCost, hasProductCardPrice } from "./product-card-cost.js";
@@ -22,5 +22,5 @@ export const ProductCardMeta = () => {
         return null;
     }
     const showCostSeparator = showCategory || showProductType;
-    return (_jsxs(HStack, { className: "text-muted-foreground text-caption w-full items-center", gap: "none", children: [showCategory ? _jsx(ProductCardCategory, {}) : null, showProductType ? (_jsx(Text, { size: "caption", variant: "muted", render: _jsx("span", { className: "min-w-0 truncate" }), children: product.productType })) : null, showCost ? (_jsxs(_Fragment, { children: [_jsx(Dot, { show: showCostSeparator }), _jsx(Box, { as: "span", className: "shrink-0", children: _jsx(ProductCardCost, {}) })] })) : null] }));
+    return (_jsxs(HStack, { className: "text-muted-foreground text-caption w-full items-center", gap: "none", children: [showCategory ? _jsx(ProductCardCategory, {}) : null, showProductType ? (_jsx(MarqueeText, { children: product.productType ?? "" })) : null, showCost ? (_jsxs(_Fragment, { children: [_jsx(Dot, { show: showCostSeparator }), _jsx(Box, { as: "span", className: "shrink-0", children: _jsx(ProductCardCost, {}) })] })) : null] }));
 };

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

@@ -72,6 +72,7 @@ interface ProductCardContextValue {
     showingInstallShot: boolean;
     toggleInstallShot: () => void;
     showAddToCart: boolean;
+    productBrandLines: 1 | 2;
     productNameLines: 1 | 2;
     showProductBrand: boolean;
     showProductName: boolean;
@@ -254,6 +255,8 @@ type ProductCardProps = ComponentProps<"div"> & Pick<ProductCardProviderProps, "
     overrideImageUrl?: string | undefined;
     /** Prioritise loading images (sets loading="eager" and adds preload link) */
     priority?: boolean | undefined;
+    /** How many lines the brand may take before it clamps; see `ProductCardDisplayOptions.brandLines`. */
+    productBrandLines?: 1 | 2 | undefined;
     productNameLines?: 1 | 2 | undefined;
     showAddToCart?: boolean | undefined;
     showProductBrand?: boolean | undefined;

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

@@ -62,6 +62,7 @@ const useVariantSelection = ({ mode, onVariantChange, product, variantId, }) =>
  * renderer exists: no renderAddToCart slot means no cart UI at all.
  */
 const resolveDisplay = (display, hasRenderAddToCart) => ({
+    productBrandLines: display?.brandLines ?? 1,
     productNameLines: display?.nameLines ?? 1,
     showAddToCart: (display?.addToCart ?? true) && hasRenderAddToCart,
     showProductBrand: display?.brand ?? true,
@@ -94,12 +95,13 @@ const useResolvedCard = ({ availability: availabilityProp, display, mode, onVari
     const availability = availabilityProp ??
         (currentVariant.available === false ? "out-of-stock" : "available");
     const productUrl = buildProductUrl(currentVariant);
-    const { productNameLines, showAddToCart, showProductBrand, showProductName, showSwatches, } = resolveDisplay(display, renderAddToCart !== undefined);
+    const { productBrandLines, productNameLines, showAddToCart, showProductBrand, showProductName, showSwatches, } = resolveDisplay(display, renderAddToCart !== undefined);
     return useMemo(() => ({
         availability,
         currentVariant,
         hasInstallShot,
         onVariantChange: handleVariantChange,
+        productBrandLines,
         productNameLines,
         productUrl,
         selectedVariantId,
@@ -114,6 +116,7 @@ const useResolvedCard = ({ availability: availabilityProp, display, mode, onVari
         currentVariant,
         handleVariantChange,
         hasInstallShot,
+        productBrandLines,
         productNameLines,
         productUrl,
         selectedVariantId,

package/dist/compositions/product-card/product-card-root.d.ts

@@ -1,5 +1,5 @@
 import type { ProductCardProps } from "./product-card-types.js";
-declare const ProductCardBase: ({ className, product, variantId, mode, width, active, dragging, availability, labels, showActivePointer, similarityScore, overrideImageUrl, priority, showSwatches, showAddToCart, productNameLines, showProductBrand, showProductName, maxSwatches, menuOpen, onAdd, addGlyph, onFindSimilar, price, processing, onCardClick, onVariantChange, linkAs, productUrl, linkPrefetch, renderTools, renderImage, renderAddToCart, dragAdapter, action, primaryAction, statusBadge, onQuickView, onAddToCartSuccess, ...props }: ProductCardProps & {
+declare const ProductCardBase: ({ className, product, variantId, mode, width, active, dragging, availability, labels, showActivePointer, similarityScore, overrideImageUrl, priority, showSwatches, showAddToCart, productBrandLines, productNameLines, showProductBrand, showProductName, maxSwatches, menuOpen, onAdd, addGlyph, onFindSimilar, price, processing, onCardClick, onVariantChange, linkAs, productUrl, linkPrefetch, renderTools, renderImage, renderAddToCart, dragAdapter, action, primaryAction, statusBadge, onQuickView, onAddToCartSuccess, ...props }: ProductCardProps & {
     onAddToCartSuccess?: (() => void) | undefined;
 }) => import("react").JSX.Element;
 /**

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

@@ -3,9 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { ProductCardContent } from "./product-card-content.js";
 import { ProductCardProvider } from "./product-card-provider.js";
-const ProductCardBase = ({ className, product, variantId, mode = "group", width, active = false, dragging, availability, labels, showActivePointer, similarityScore, overrideImageUrl, priority, showSwatches, showAddToCart, productNameLines, showProductBrand, showProductName, maxSwatches, menuOpen, onAdd, addGlyph, onFindSimilar, price, processing, onCardClick, onVariantChange, linkAs, productUrl, linkPrefetch, renderTools, renderImage, renderAddToCart, dragAdapter, action, primaryAction, statusBadge, onQuickView, onAddToCartSuccess, ...props }) => (_jsx(ProductCardProvider, { action: action, display: {
+const ProductCardBase = ({ className, product, variantId, mode = "group", width, active = false, dragging, availability, labels, showActivePointer, similarityScore, overrideImageUrl, priority, showSwatches, showAddToCart, productBrandLines, productNameLines, showProductBrand, showProductName, maxSwatches, menuOpen, onAdd, addGlyph, onFindSimilar, price, processing, onCardClick, onVariantChange, linkAs, productUrl, linkPrefetch, renderTools, renderImage, renderAddToCart, dragAdapter, action, primaryAction, statusBadge, onQuickView, onAddToCartSuccess, ...props }) => (_jsx(ProductCardProvider, { action: action, display: {
         addToCart: showAddToCart,
         brand: showProductBrand,
+        brandLines: productBrandLines,
         name: showProductName,
         nameLines: productNameLines,
         swatches: showSwatches,

package/dist/compositions/product-card/product-card-skeleton.d.ts

@@ -2,6 +2,14 @@ import type { CSSProperties } from "react";
 interface ProductCardSkeletonProps {
     className?: string;
     style?: CSSProperties;
+    /**
+     * Draw the add-to-cart control. True by default; pass the same value as the
+     * card's `showAddToCart` so a grid without a cart keeps its height when the
+     * products arrive.
+     */
+    showAddToCart?: boolean;
+    /** Draw the row of colourway dots. True by default; pass the card's `showSwatches`. */
+    showSwatches?: boolean;
 }
 /**
  * Loading placeholder for `ProductCard`, at whatever size it is given.
@@ -19,10 +27,11 @@ interface ProductCardSkeletonProps {
  * frame's bottom above it), the same padding, gaps and radius steps. Copying
  * the classes keeps it in step as the card changes.
  *
- * It draws the control unconditionally. A card whose product has no capability
- * renders none, so the placeholder overshoots that case - the reverse error, a
- * placeholder shorter than every card that does have one, misjudged the common
- * case instead.
+ * It draws the control and the swatch row by default. A card whose product has
+ * no capability renders no control, so the placeholder overshoots that case -
+ * the reverse error, a placeholder shorter than every card that does have one,
+ * misjudged the common case instead. A grid that turns either off on every
+ * card passes the same flags here.
  */
-export declare const ProductCardSkeleton: ({ className, style, }: ProductCardSkeletonProps) => import("react").JSX.Element;
+export declare const ProductCardSkeleton: ({ className, showAddToCart, showSwatches, style, }: ProductCardSkeletonProps) => import("react").JSX.Element;
 export {};

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

@@ -23,9 +23,10 @@ const SwatchRow = () => (_jsx(HStack, { className: "min-h-5 gap-2.5", children:
  * frame's bottom above it), the same padding, gaps and radius steps. Copying
  * the classes keeps it in step as the card changes.
  *
- * It draws the control unconditionally. A card whose product has no capability
- * renders none, so the placeholder overshoots that case - the reverse error, a
- * placeholder shorter than every card that does have one, misjudged the common
- * case instead.
+ * It draws the control and the swatch row by default. A card whose product has
+ * no capability renders no control, so the placeholder overshoots that case -
+ * the reverse error, a placeholder shorter than every card that does have one,
+ * misjudged the common case instead. A grid that turns either off on every
+ * card passes the same flags here.
  */
-export const ProductCardSkeleton = ({ className, style, }) => (_jsxs(Box, { className: cn("@container/product-card w-full", className), style: style, children: [_jsxs(VStack, { className: "flex @[180px]/product-card:hidden", gap: "none", children: [_jsx(Skeleton, { className: "aspect-square w-full rounded-3xl" }), _jsxs(VStack, { className: "gap-2.5 px-1.5 py-2", gap: "none", children: [_jsxs(VStack, { className: "gap-1 px-0.5", gap: "none", children: [_jsxs(VStack, { className: "gap-0.5", gap: "none", children: [_jsx(Skeleton, { className: "h-5 w-3/5" }), _jsx(Skeleton, { className: "h-4 w-4/5" })] }), _jsx(Skeleton, { className: "h-4 w-2/3" }), _jsx(SwatchRow, {})] }), _jsx(Skeleton, { className: "h-9 w-full rounded-full" })] })] }), _jsxs(VStack, { className: "bg-card hidden overflow-hidden rounded-3xl shadow-xs @[180px]/product-card:flex @[240px]/product-card:rounded-4xl", gap: "none", children: [_jsx(Box, { className: "w-full px-4 pt-4", children: _jsx(Skeleton, { className: "aspect-square w-full rounded-2xl", variant: "light" }) }), _jsx(VStack, { className: "pt-2 pb-4", gap: "none", children: _jsxs(VStack, { className: "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(VStack, { gap: "none", children: [_jsx(Skeleton, { className: "h-5.5 w-3/5 rounded", variant: "light" }), _jsx(Skeleton, { className: "h-5 w-4/5 rounded", variant: "light" })] }), _jsx(Skeleton, { className: "h-4 w-2/3 rounded", variant: "light" }), _jsx(Box, { className: "pt-1", children: _jsx(SwatchRow, {}) })] }), _jsx(HStack, { children: _jsx(Skeleton, { className: "h-9 w-full rounded-full @[240px]/product-card:w-32", variant: "light" }) })] }) })] })] }));
+export const ProductCardSkeleton = ({ className, showAddToCart = true, showSwatches = true, style, }) => (_jsxs(Box, { className: cn("@container/product-card w-full", className), style: style, children: [_jsxs(VStack, { className: "flex @[180px]/product-card:hidden", gap: "none", children: [_jsx(Skeleton, { className: "aspect-square w-full rounded-3xl" }), _jsxs(VStack, { className: "gap-2.5 px-1.5 py-2", gap: "none", children: [_jsxs(VStack, { className: "gap-1 px-0.5", gap: "none", children: [_jsxs(VStack, { className: "gap-0.5", gap: "none", children: [_jsx(Skeleton, { className: "h-5 w-3/5" }), _jsx(Skeleton, { className: "h-4 w-4/5" })] }), _jsx(Skeleton, { className: "h-4 w-2/3" }), showSwatches ? _jsx(SwatchRow, {}) : null] }), showAddToCart ? (_jsx(Skeleton, { className: "h-9 w-full rounded-full" })) : null] })] }), _jsxs(VStack, { className: "bg-card hidden overflow-hidden rounded-3xl shadow-xs @[180px]/product-card:flex @[240px]/product-card:rounded-4xl", gap: "none", children: [_jsx(Box, { className: "w-full px-4 pt-4", children: _jsx(Skeleton, { className: "aspect-square w-full rounded-2xl", variant: "light" }) }), _jsx(VStack, { className: "pt-2 pb-4", gap: "none", children: _jsxs(VStack, { className: "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(VStack, { gap: "none", children: [_jsx(Skeleton, { className: "h-5.5 w-3/5 rounded", variant: "light" }), _jsx(Skeleton, { className: "h-5 w-4/5 rounded", variant: "light" })] }), _jsx(Skeleton, { className: "h-4 w-2/3 rounded", variant: "light" }), showSwatches ? (_jsx(Box, { className: "pt-1", children: _jsx(SwatchRow, {}) })) : null] }), showAddToCart ? (_jsx(HStack, { children: _jsx(Skeleton, { className: "h-9 w-full rounded-full @[240px]/product-card:w-32", variant: "light" }) })) : null] }) })] })] }));

package/dist/data/docs-manifest.js

@@ -18761,6 +18761,12 @@ export const docsManifest = {
                             required: false,
                             description: 'Prioritise loading images (sets loading="eager" and adds preload link)',
                         },
+                        {
+                            name: "productBrandLines",
+                            type: "1 | 2 | undefined",
+                            required: false,
+                            description: "How many lines the brand may take before it clamps; see `ProductCardDisplayOptions.brandLines`.",
+                        },
                         {
                             name: "productNameLines",
                             type: "1 | 2 | undefined",
@@ -18981,6 +18987,12 @@ export const docsManifest = {
                             required: false,
                             description: 'Prioritise loading images (sets loading="eager" and adds preload link)',
                         },
+                        {
+                            name: "productBrandLines",
+                            type: "1 | 2 | undefined",
+                            required: false,
+                            description: "How many lines the brand may take before it clamps; see `ProductCardDisplayOptions.brandLines`.",
+                        },
                         {
                             name: "productNameLines",
                             type: "1 | 2 | undefined",
@@ -19470,6 +19482,18 @@ export const docsManifest = {
                             type: "CSSProperties",
                             required: false,
                         },
+                        {
+                            name: "showAddToCart",
+                            type: "boolean",
+                            required: false,
+                            description: "Draw the add-to-cart control. True by default; pass the same value as the\ncard's `showAddToCart` so a grid without a cart keeps its height when the\nproducts arrive.",
+                        },
+                        {
+                            name: "showSwatches",
+                            type: "boolean",
+                            required: false,
+                            description: "Draw the row of colourway dots. True by default; pass the card's `showSwatches`.",
+                        },
                     ],
                 },
                 {

package/package.json

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