@instruments/materia-ui 0.4.3 → 0.4.5

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-image.js

@@ -6,6 +6,7 @@ import { cn } from "@instruments/materia-ui/utils/cn";
 import { memo, useMemo } from "react";
 import { ProductCardAvailabilityStatus } from "./product-card-availability.js";
 import { useProductCard } from "./product-card-context.js";
+import { PRODUCT_CARD_IMAGE_RADIUS, PRODUCT_CARD_SWATCH_IMAGE_RADIUS, } from "./product-card-radius.js";
 /**
  * Handle used when no `dragAdapter` is provided: a static, non-draggable
  * image. Module-level so its identity is stable across renders.
@@ -24,7 +25,7 @@ const NoPhotographyState = ({ className, inspiration, productName, }) => {
     if (inspiration) {
         return (_jsx("output", { "aria-label": `Photography unavailable for ${productName}`, className: cn("bg-muted/45 absolute inset-0 overflow-hidden rounded-3xl", className), "data-component": "product-card-image-unavailable" }));
     }
-    return (_jsx("output", { "aria-label": `Photography unavailable for ${productName}`, className: cn("block w-full @[180px]/product-card:px-4 @[180px]/product-card:pt-4", className), "data-component": "product-card-image-unavailable", children: _jsx("span", { className: "bg-muted/45 block aspect-square w-full overflow-hidden rounded-3xl @[180px]/product-card:rounded-2xl" }) }));
+    return (_jsx("output", { "aria-label": `Photography unavailable for ${productName}`, className: cn("block w-full @[180px]/product-card:px-4 @[180px]/product-card:pt-4", className), "data-component": "product-card-image-unavailable", children: _jsx("span", { className: cn("bg-muted/45 block aspect-square w-full overflow-hidden", PRODUCT_CARD_IMAGE_RADIUS) }) }));
 };
 /**
  * The photograph itself, filling the frame `DraggableImage` insets - the
@@ -46,7 +47,7 @@ const ImageContent = ({ imageSrc, hoverImageSrc, showingInstallShot, productName
         productImageFade = showingInstallShot ? "opacity-0" : "";
         installImageFade = showingInstallShot ? "opacity-100" : "opacity-0";
     }
-    return (_jsx(Box, { className: "absolute inset-0 overflow-hidden", children: _jsxs(MediaFrame, { className: "size-full rounded-3xl @[180px]/product-card:rounded-2xl", children: [renderImage({
+    return (_jsx(Box, { className: "absolute inset-0 overflow-hidden", children: _jsxs(MediaFrame, { className: cn("size-full", PRODUCT_CARD_IMAGE_RADIUS), children: [renderImage({
                     alt: `${productName} - Product image`,
                     className: cn("object-cover", hasHoverImage && "duration-normal transition-opacity ease-out", hasHoverImage && productImageFade),
                     draggable: false,
@@ -89,11 +90,11 @@ const DraggableImage = ({ className, imageSrc, hoverImageSrc, variantName, showS
             scale: dragging ? 0.9 : 1,
             touchAction: "none",
             transition: "opacity 300ms ease-out, scale 300ms ease-out",
-        }, ...dragListeners, ...props, children: _jsxs(MediaFrame, { className: "@[180px]/product-card:bg-card relative aspect-square w-full rounded-3xl bg-gray-100 @[180px]/product-card:rounded-2xl", children: [_jsx(ImageContent, { hoverImageSrc: hoverImageSrc, imageSrc: imageSrc, showingInstallShot: showingInstallShot, priority: priority, productName: variantName, sizes: sizes }), shouldShowSimilarityScore ? (_jsx(Box, { className: "absolute right-2 bottom-2 z-10", children: _jsxs(Box, { as: "span", className: "glass-media text-micro rounded px-1.5 py-0.5 text-white/70", children: [(similarityScore * 100).toFixed(0), "%"] }) })) : null, _jsx(ProductCardAvailabilityStatus, {})] }) }));
+        }, ...dragListeners, ...props, children: _jsxs(MediaFrame, { className: cn("@[180px]/product-card:bg-card relative aspect-square w-full bg-gray-100", PRODUCT_CARD_IMAGE_RADIUS), children: [_jsx(ImageContent, { hoverImageSrc: hoverImageSrc, imageSrc: imageSrc, showingInstallShot: showingInstallShot, priority: priority, productName: variantName, sizes: sizes }), shouldShowSimilarityScore ? (_jsx(Box, { className: "absolute right-2 bottom-2 z-10", children: _jsxs(Box, { as: "span", className: "glass-media text-micro rounded px-1.5 py-0.5 text-white/70", children: [(similarityScore * 100).toFixed(0), "%"] }) })) : null, _jsx(ProductCardAvailabilityStatus, {})] }) }));
 };
 const SwatchImage = ({ className, dragListeners, imageSizes, isDragging, mainImage, priority, ref, ...props }) => {
     const { currentVariant, renderImage } = useProductCard();
-    return (_jsxs(Box, { className: cn("relative size-full overflow-hidden rounded-2xl bg-transparent", className), "data-component": "product-card-image", onClickCapture: (e) => {
+    return (_jsxs(Box, { className: cn("relative size-full overflow-hidden bg-transparent", PRODUCT_CARD_SWATCH_IMAGE_RADIUS, className), "data-component": "product-card-image", onClickCapture: (e) => {
             if (isDragging) {
                 e.preventDefault();
                 e.stopPropagation();

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

@@ -0,0 +1,9 @@
+/**
+ * The photograph's corner, concentric with the card's. Below 180px the
+ * photograph is the card and takes its corner; from 180px it sits 16px inside
+ * the card, so its corner is the card's less 16px (8px, then 20px once the card
+ * takes the 4xl corner at 240px).
+ */
+export declare const PRODUCT_CARD_IMAGE_RADIUS = "rounded-3xl @[180px]/product-card:rounded-[calc(var(--radius-3xl)_-_1rem)] @[240px]/product-card:rounded-[calc(var(--radius-4xl)_-_1rem)]";
+/** The swatch tile's photograph, 4px inside the tile's 3xl corner. */
+export declare const PRODUCT_CARD_SWATCH_IMAGE_RADIUS = "rounded-[calc(var(--radius-3xl)_-_0.25rem)]";

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

@@ -0,0 +1,9 @@
+/**
+ * The photograph's corner, concentric with the card's. Below 180px the
+ * photograph is the card and takes its corner; from 180px it sits 16px inside
+ * the card, so its corner is the card's less 16px (8px, then 20px once the card
+ * takes the 4xl corner at 240px).
+ */
+export const PRODUCT_CARD_IMAGE_RADIUS = "rounded-3xl @[180px]/product-card:rounded-[calc(var(--radius-3xl)_-_1rem)] @[240px]/product-card:rounded-[calc(var(--radius-4xl)_-_1rem)]";
+/** The swatch tile's photograph, 4px inside the tile's 3xl corner. */
+export const PRODUCT_CARD_SWATCH_IMAGE_RADIUS = "rounded-[calc(var(--radius-3xl)_-_0.25rem)]";

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

@@ -3,6 +3,7 @@ import { Box } from "@instruments/materia-ui/components/box";
 import { Skeleton } from "@instruments/materia-ui/components/skeleton";
 import { HStack, VStack } from "@instruments/materia-ui/components/stack";
 import { cn } from "@instruments/materia-ui/utils/cn";
+import { PRODUCT_CARD_IMAGE_RADIUS } from "./product-card-radius.js";
 /** The fifth dot, which the card itself only shows from 240px up. */
 const SWATCH_PLACEHOLDERS = [0, 1, 2, 3, 4];
 const SwatchRow = () => (_jsx(HStack, { className: "min-h-5 gap-2.5", children: SWATCH_PLACEHOLDERS.map((index) => (_jsx(Skeleton, { className: cn("size-5 rounded-full", index === SWATCH_PLACEHOLDERS.length - 1 &&
@@ -29,4 +30,4 @@ const SwatchRow = () => (_jsx(HStack, { className: "min-h-5 gap-2.5", children:
  * misjudged the common case instead. A grid that turns either off on every
  * card passes the same flags here.
  */
-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] }) })] })] }));
+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: cn("aspect-square w-full", PRODUCT_CARD_IMAGE_RADIUS), 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/compositions/product-card/product-card-swatch.js

@@ -9,6 +9,7 @@ import { ProductCardImage } from "./product-card-image.js";
 import { ProductCardLink } from "./product-card-link.js";
 import { ProductCardProcessing } from "./product-card-processing.js";
 import { ProductCardQuickView } from "./product-card-quick-view.js";
+import { PRODUCT_CARD_SWATCH_IMAGE_RADIUS } from "./product-card-radius.js";
 import { ProductCardSwatchAdd } from "./product-card-swatch-add.js";
 const SwatchShell = ({ active, children, dragging, processing, }) => (_jsx(Box, { className: cn(
     // Bare at rest, so the tile reads as its image alone; the card surface
@@ -32,7 +33,7 @@ const SwatchCaption = () => {
 /** The square photograph with the add control and Quick view over it. */
 const SwatchMedia = ({ overrideImageUrl, priority, }) => {
     const { active, addGlyph, availability, currentVariant, dragging, labels, linkComponent, linkPrefetch, menuOpen, onAdd, onCardClick, onQuickView, processing, productUrl, } = useProductCard();
-    return (_jsxs(Box, { className: "relative aspect-square w-full overflow-hidden rounded-2xl", children: [_jsx(ProductCardLink, { blocked: availability === "blocked", className: "block size-full", href: productUrl, label: `View ${currentVariant.name}`, linkComponent: linkComponent, onActivate: onCardClick, prefetch: linkPrefetch, children: _jsx(ProductCardImage, { overrideImageUrl: overrideImageUrl, priority: priority }) }), dragging ? null : (_jsx(ProductCardSwatchAdd, { active: active, glyph: addGlyph, labels: labels, menuOpen: menuOpen, onAdd: onAdd })), dragging || processing !== undefined ? null : (_jsx(ProductCardQuickView, { align: "start", onQuickView: onQuickView }))] }));
+    return (_jsxs(Box, { className: cn("relative aspect-square w-full overflow-hidden", PRODUCT_CARD_SWATCH_IMAGE_RADIUS), children: [_jsx(ProductCardLink, { blocked: availability === "blocked", className: "block size-full", href: productUrl, label: `View ${currentVariant.name}`, linkComponent: linkComponent, onActivate: onCardClick, prefetch: linkPrefetch, children: _jsx(ProductCardImage, { overrideImageUrl: overrideImageUrl, priority: priority }) }), dragging ? null : (_jsx(ProductCardSwatchAdd, { active: active, glyph: addGlyph, labels: labels, menuOpen: menuOpen, onAdd: onAdd })), dragging || processing !== undefined ? null : (_jsx(ProductCardQuickView, { align: "start", onQuickView: onQuickView }))] }));
 };
 /**
  * ProductCardSwatch - the image-first tile for boards and canvases.

package/package.json

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