@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/pixel-avatar/pixel-avatar.js

@@ -0,0 +1,181 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+//#region src/components/pixel-avatar/pixel-avatar.tsx
+const PREFIX = "dowel-pixel-avatar";
+/** Pulse period, from the source's 0.002 rad/ms. */
+const PULSE_MS = 3142;
+/** Whole-avatar breathing, from 0.0008 rad/ms. */
+const BREATHE_MS = 7854;
+const SPARKLE_MS = 1571;
+const SPARKLE_CHANCE = .14;
+function scaled(ms) {
+	return `calc(${ms.toFixed(0)}ms * var(--motion-scale, 1))`;
+}
+const STYLES = `
+.${PREFIX}{display:inline-block;flex-shrink:0;vertical-align:middle;overflow:visible}
+.${PREFIX}[data-animated] [data-slot=pixel-avatar-grid]{transform-box:fill-box;transform-origin:center;animation:${PREFIX}-breathe ${scaled(BREATHE_MS)} ease-in-out infinite}
+.${PREFIX}[data-animated] [data-part=cell]{animation:${PREFIX}-pulse ${scaled(PULSE_MS)} ease-in-out infinite;animation-delay:var(--delay)}
+.${PREFIX}[data-animated] [data-part=cell][data-sparkle]{animation-name:${PREFIX}-sparkle;animation-duration:${scaled(SPARKLE_MS)}}
+@keyframes ${PREFIX}-pulse{0%,100%{opacity:var(--lo)}50%{opacity:var(--hi)}}
+@keyframes ${PREFIX}-sparkle{0%,86%,100%{opacity:var(--lo)}93%{opacity:1}}
+@keyframes ${PREFIX}-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
+`;
+/** Semantic hues an avatar can be built from. */
+const TOKENS = [
+	"primary",
+	"info",
+	"success",
+	"warning",
+	"destructive"
+];
+/** Simple deterministic string hash. */
+function hashSeed(seed) {
+	let hash = 0;
+	for (const char of seed) hash = (hash << 5) - hash + (char.codePointAt(0) ?? 0) | 0;
+	return Math.abs(hash);
+}
+/** Seeded PRNG (mulberry32), so a seed always draws the same avatar. */
+function createRng(seed) {
+	let state = seed;
+	return () => {
+		state = state + 1831565813 | 0;
+		let t = Math.imul(state ^ state >>> 15, 1 | state);
+		t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+function percent(value) {
+	return `${value.toFixed(0)}%`;
+}
+/** Three colours in one family: the base token, shaded, tinted and blended. */
+function generatePalette(hash) {
+	const rng = createRng(hash);
+	const index = Math.floor(rng() * TOKENS.length);
+	const base = `var(--color-${TOKENS[index] ?? "primary"})`;
+	const neighbour = `var(--color-${TOKENS[(index + 1 + Math.floor(rng() * 2)) % TOKENS.length] ?? "info"})`;
+	return {
+		base,
+		colors: [
+			base,
+			`color-mix(in oklab, ${base} ${percent(62 + rng() * 20)}, var(--color-foreground))`,
+			`color-mix(in oklab, ${base} ${percent(55 + rng() * 25)}, ${neighbour})`
+		]
+	};
+}
+function generateGrid(hash, cells) {
+	const rng = createRng(hash + 1);
+	const grid = [];
+	for (let y = 0; y < cells; y++) for (let x = 0; x < cells; x++) {
+		const brightness = .3 + rng() * .7;
+		grid.push({
+			x,
+			y,
+			color: Math.floor(rng() * 3),
+			lo: .35 + brightness * .5,
+			phase: rng(),
+			sparkle: rng() < SPARKLE_CHANCE
+		});
+	}
+	return grid;
+}
+const pixelAvatarVariants = cva("", {
+	variants: { shape: {
+		circle: "rounded-full",
+		square: "rounded-[22%]"
+	} },
+	defaultVariants: { shape: "circle" }
+});
+/** A deterministic, gently animated pixel avatar generated from a seed. */
+function PixelAvatar({ className, seed, size = 64, cells = 6, animated = true, shape = "circle", palette, style, ...props }) {
+	const clipId = `${PREFIX}-${useId().replace(/:/g, "")}`;
+	const count = Math.max(2, Math.round(cells));
+	const hash = hashSeed(seed);
+	const generated = generatePalette(hash);
+	const colors = palette ?? generated.colors;
+	const base = palette?.[0] ?? generated.base;
+	const grid = generateGrid(hash, count);
+	const half = count / 2;
+	const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+	const resolvedSize = typeof size === "number" ? `${String(size)}px` : size;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${String(count)} ${String(count)}`,
+		"data-slot": "pixel-avatar",
+		"data-seed": seed,
+		"data-animated": animated ? "" : void 0,
+		role: named ? "img" : void 0,
+		"aria-hidden": named ? void 0 : true,
+		className: cn(PREFIX, pixelAvatarVariants({ shape }), className),
+		style: {
+			width: resolvedSize,
+			height: resolvedSize,
+			filter: `drop-shadow(0 0 calc(${resolvedSize} * .08) color-mix(in oklab, ${base} 45%, transparent))`,
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: clipId,
+				children: shape === "square" ? /* @__PURE__ */ jsx("rect", {
+					width: count,
+					height: count,
+					rx: count * .22
+				}) : /* @__PURE__ */ jsx("circle", {
+					cx: half,
+					cy: half,
+					r: half
+				})
+			}) }),
+			/* @__PURE__ */ jsxs("g", {
+				clipPath: `url(#${clipId})`,
+				children: [/* @__PURE__ */ jsx("rect", {
+					"data-slot": "pixel-avatar-background",
+					width: count,
+					height: count,
+					fill: `color-mix(in oklab, ${base} 22%, var(--color-background))`
+				}), /* @__PURE__ */ jsx("g", {
+					"data-slot": "pixel-avatar-grid",
+					shapeRendering: "crispEdges",
+					children: grid.map((cell) => {
+						const offset = (cell.phase + (cell.x + cell.y) / 6) % 1 * PULSE_MS;
+						return /* @__PURE__ */ jsx("rect", {
+							"data-part": "cell",
+							"data-sparkle": cell.sparkle ? "" : void 0,
+							x: cell.x,
+							y: cell.y,
+							width: 1.02,
+							height: 1.02,
+							fill: colors[cell.color],
+							opacity: cell.lo,
+							style: {
+								"--lo": cell.lo.toFixed(3),
+								"--hi": Math.min(1, cell.lo + .25).toFixed(3),
+								"--delay": `calc(${(-offset).toFixed(0)}ms * var(--motion-scale, 1))`
+							}
+						}, `${String(cell.x)}-${String(cell.y)}`);
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				"data-slot": "pixel-avatar-ring",
+				cx: half,
+				cy: half,
+				r: half - .04,
+				fill: "none",
+				stroke: base,
+				strokeOpacity: shape === "square" ? 0 : .2,
+				strokeWidth: .08
+			})
+		]
+	})] });
+}
+//#endregion
+export { PixelAvatar, pixelAvatarVariants };
+
+//# sourceMappingURL=pixel-avatar.js.map

package/dist/components/pixel-avatar/pixel-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-avatar.js","names":[],"sources":["../../../src/components/pixel-avatar/pixel-avatar.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Agent Avatar (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useId, type ComponentPropsWithRef, type CSSProperties } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A deterministic pixel avatar: the same seed always draws the same grid, so\n * an agent is recognisable across sessions without anyone uploading a picture.\n *\n * The source painted a canvas every frame. This draws SVG rects instead —\n * crisp at any size and density, rendered on the server with no layout shift,\n * and themable, because every colour is a token mixed at render time rather\n * than an HSL value baked into pixels. The shimmer is CSS: each cell pulses on\n * its own phase, offset along the diagonal so a wave sweeps across the grid,\n * and a few seeded cells sparkle. It is decoration, so reduced motion stops it\n * and leaves the resting grid.\n */\n\nconst PREFIX = \"dowel-pixel-avatar\";\n\n/** Pulse period, from the source's 0.002 rad/ms. */\nconst PULSE_MS = 3142;\n/** Whole-avatar breathing, from 0.0008 rad/ms. */\nconst BREATHE_MS = 7854;\nconst SPARKLE_MS = 1571;\nconst SPARKLE_CHANCE = 0.14;\n\nfunction scaled(ms: number): string {\n  return `calc(${ms.toFixed(0)}ms * var(--motion-scale, 1))`;\n}\n\nconst STYLES = `\n.${PREFIX}{display:inline-block;flex-shrink:0;vertical-align:middle;overflow:visible}\n.${PREFIX}[data-animated] [data-slot=pixel-avatar-grid]{transform-box:fill-box;transform-origin:center;animation:${PREFIX}-breathe ${scaled(BREATHE_MS)} ease-in-out infinite}\n.${PREFIX}[data-animated] [data-part=cell]{animation:${PREFIX}-pulse ${scaled(PULSE_MS)} ease-in-out infinite;animation-delay:var(--delay)}\n.${PREFIX}[data-animated] [data-part=cell][data-sparkle]{animation-name:${PREFIX}-sparkle;animation-duration:${scaled(SPARKLE_MS)}}\n@keyframes ${PREFIX}-pulse{0%,100%{opacity:var(--lo)}50%{opacity:var(--hi)}}\n@keyframes ${PREFIX}-sparkle{0%,86%,100%{opacity:var(--lo)}93%{opacity:1}}\n@keyframes ${PREFIX}-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}\n`;\n\n/** Semantic hues an avatar can be built from. */\nconst TOKENS = [\"primary\", \"info\", \"success\", \"warning\", \"destructive\"] as const;\n\n/** Simple deterministic string hash. */\nfunction hashSeed(seed: string): number {\n  let hash = 0;\n  for (const char of seed) {\n    hash = ((hash << 5) - hash + (char.codePointAt(0) ?? 0)) | 0;\n  }\n  return Math.abs(hash);\n}\n\n/** Seeded PRNG (mulberry32), so a seed always draws the same avatar. */\nfunction createRng(seed: number): () => number {\n  let state = seed;\n  return () => {\n    state = (state + 0x6d2b79f5) | 0;\n    let t = Math.imul(state ^ (state >>> 15), 1 | state);\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nfunction percent(value: number): string {\n  return `${value.toFixed(0)}%`;\n}\n\n/** Three colours in one family: the base token, shaded, tinted and blended. */\nfunction generatePalette(hash: number): { colors: [string, string, string]; base: string } {\n  const rng = createRng(hash);\n  const index = Math.floor(rng() * TOKENS.length);\n  const base = `var(--color-${TOKENS[index] ?? \"primary\"})`;\n  const neighbour = `var(--color-${TOKENS[(index + 1 + Math.floor(rng() * 2)) % TOKENS.length] ?? \"info\"})`;\n  return {\n    base,\n    colors: [\n      base,\n      `color-mix(in oklab, ${base} ${percent(62 + rng() * 20)}, var(--color-foreground))`,\n      `color-mix(in oklab, ${base} ${percent(55 + rng() * 25)}, ${neighbour})`,\n    ],\n  };\n}\n\ninterface Cell {\n  x: number;\n  y: number;\n  color: number;\n  /** Resting opacity, from the source's per-cell brightness (0.3–1). */\n  lo: number;\n  phase: number;\n  sparkle: boolean;\n}\n\nfunction generateGrid(hash: number, cells: number): Cell[] {\n  const rng = createRng(hash + 1);\n  const grid: Cell[] = [];\n  for (let y = 0; y < cells; y++) {\n    for (let x = 0; x < cells; x++) {\n      const brightness = 0.3 + rng() * 0.7;\n      grid.push({\n        x,\n        y,\n        color: Math.floor(rng() * 3),\n        lo: 0.35 + brightness * 0.5,\n        phase: rng(),\n        sparkle: rng() < SPARKLE_CHANCE,\n      });\n    }\n  }\n  return grid;\n}\n\nconst pixelAvatarVariants = cva(\"\", {\n  variants: {\n    shape: {\n      circle: \"rounded-full\",\n      square: \"rounded-[22%]\",\n    },\n  },\n  defaultVariants: {\n    shape: \"circle\",\n  },\n});\n\nexport interface PixelAvatarProps\n  extends\n    Omit<ComponentPropsWithRef<\"svg\">, \"children\">,\n    VariantProps<typeof pixelAvatarVariants> {\n  /** Any string — a name, an id. The same seed always draws the same avatar. */\n  seed: string;\n  /** Rendered size. A number is pixels; a string is any CSS length. */\n  size?: number | string;\n  /** Pixels per side. */\n  cells?: number;\n  /** Shimmer, sparkle and breathe. Stops under reduced motion either way. */\n  animated?: boolean;\n  /** Replaces the three token-derived colours with any CSS colours. */\n  palette?: [string, string, string];\n}\n\n/** A deterministic, gently animated pixel avatar generated from a seed. */\nexport function PixelAvatar({\n  className,\n  seed,\n  size = 64,\n  cells = 6,\n  animated = true,\n  shape = \"circle\",\n  palette,\n  style,\n  ...props\n}: PixelAvatarProps) {\n  const clipId = `${PREFIX}-${useId().replace(/:/g, \"\")}`;\n  const count = Math.max(2, Math.round(cells));\n  const hash = hashSeed(seed);\n  const generated = generatePalette(hash);\n  const colors = palette ?? generated.colors;\n  const base = palette?.[0] ?? generated.base;\n  const grid = generateGrid(hash, count);\n  const half = count / 2;\n  const named = props[\"aria-label\"] != null || props[\"aria-labelledby\"] != null;\n  const resolvedSize = typeof size === \"number\" ? `${String(size)}px` : size;\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <svg\n        viewBox={`0 0 ${String(count)} ${String(count)}`}\n        data-slot=\"pixel-avatar\"\n        data-seed={seed}\n        data-animated={animated ? \"\" : undefined}\n        role={named ? \"img\" : undefined}\n        aria-hidden={named ? undefined : true}\n        className={cn(PREFIX, pixelAvatarVariants({ shape }), className)}\n        style={{\n          width: resolvedSize,\n          height: resolvedSize,\n          filter: `drop-shadow(0 0 calc(${resolvedSize} * .08) color-mix(in oklab, ${base} 45%, transparent))`,\n          ...style,\n        }}\n        {...props}\n      >\n        <defs>\n          <clipPath id={clipId}>\n            {shape === \"square\" ? (\n              <rect width={count} height={count} rx={count * 0.22} />\n            ) : (\n              <circle cx={half} cy={half} r={half} />\n            )}\n          </clipPath>\n        </defs>\n        <g clipPath={`url(#${clipId})`}>\n          <rect\n            data-slot=\"pixel-avatar-background\"\n            width={count}\n            height={count}\n            fill={`color-mix(in oklab, ${base} 22%, var(--color-background))`}\n          />\n          <g data-slot=\"pixel-avatar-grid\" shapeRendering=\"crispEdges\">\n            {grid.map((cell) => {\n              // One pulse keyframe, phased per cell and offset along the\n              // diagonal: the source's pulse and wave in a single animation.\n              const offset = ((cell.phase + (cell.x + cell.y) / 6) % 1) * PULSE_MS;\n              return (\n                <rect\n                  key={`${String(cell.x)}-${String(cell.y)}`}\n                  data-part=\"cell\"\n                  data-sparkle={cell.sparkle ? \"\" : undefined}\n                  x={cell.x}\n                  y={cell.y}\n                  // A hair of overlap hides the seams antialiasing leaves.\n                  width={1.02}\n                  height={1.02}\n                  fill={colors[cell.color]}\n                  opacity={cell.lo}\n                  style={\n                    {\n                      \"--lo\": cell.lo.toFixed(3),\n                      \"--hi\": Math.min(1, cell.lo + 0.25).toFixed(3),\n                      \"--delay\": `calc(${(-offset).toFixed(0)}ms * var(--motion-scale, 1))`,\n                    } as CSSProperties\n                  }\n                />\n              );\n            })}\n          </g>\n        </g>\n        <circle\n          data-slot=\"pixel-avatar-ring\"\n          cx={half}\n          cy={half}\n          r={half - 0.04}\n          fill=\"none\"\n          stroke={base}\n          strokeOpacity={shape === \"square\" ? 0 : 0.2}\n          strokeWidth={0.08}\n        />\n      </svg>\n    </>\n  );\n}\n\nexport { pixelAvatarVariants };\n"],"mappings":"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"}

package/dist/components/product-card/index.d.ts

@@ -0,0 +1,2 @@
+import { ProductCard, ProductCardProps } from "./product-card.js";
+export { ProductCard, type ProductCardProps };

package/dist/components/product-card/index.js

@@ -0,0 +1,2 @@
+import { ProductCard } from "./product-card.js";
+export { ProductCard };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/product-card/meta.ts
+const meta = defineMeta({
+	name: "product-card",
+	title: "Product Card",
+	description: "A shop tile with image zoom, badge, half-star rating, discount pricing, a wishlist toggle and an add-to-cart confirmation.",
+	category: "display",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: ["badge", "morph-button"],
+	files: ["product-card.tsx"],
+	a11y: "The card is an article named by its title; with href the title becomes a link stretched over the card while the buttons stay above it. The rating is one image labelled \"Rated 4.5 out of 5\". Prices read in order (\"Now $129.00, was $179.00, 28% off\") rather than relying on strikethrough and colour. The wishlist heart is a toggle with aria-pressed and a stable name, always visible rather than revealed on hover. Add to cart morphs to \"Added\", announces it through a polite status region and reverts, without ever disabling the button. The entrance animation is skipped under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/product-card/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/product-card/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"product-card\",\n  title: \"Product Card\",\n  description:\n    \"A shop tile with image zoom, badge, half-star rating, discount pricing, a wishlist toggle and an add-to-cart confirmation.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [\"badge\", \"morph-button\"],\n  files: [\"product-card.tsx\"],\n  a11y:\n    \"The card is an article named by its title; with href the title becomes a link stretched over the card while \" +\n    'the buttons stay above it. The rating is one image labelled \"Rated 4.5 out of 5\". Prices read in order ' +\n    '(\"Now $129.00, was $179.00, 28% off\") rather than relying on strikethrough and colour. The wishlist heart is a ' +\n    \"toggle with aria-pressed and a stable name, always visible rather than revealed on hover. Add to cart \" +\n    'morphs to \"Added\", announces it through a polite status region and reverts, without ever disabling the ' +\n    \"button. The entrance animation is skipped under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,SAAS,cAAc;CAC9C,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAMJ,CAAC"}

package/dist/components/product-card/product-card.d.ts

@@ -0,0 +1,43 @@
+import { BadgeProps } from "../badge/badge.js";
+import "../badge/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/product-card/product-card.d.ts
+interface ProductCardProps extends Omit<ComponentPropsWithRef<"article">, "title"> {
+  /** Product name. Names the card, the cart button and the wishlist toggle. */
+  title: string;
+  /** Image URL. */
+  image: string;
+  /** Alt text for the image. Empty by default: the title beside it already names the product. */
+  imageAlt?: string;
+  /** Makes the title a link covering the whole card; the buttons stay on top of it. */
+  href?: string;
+  price: number;
+  /** A higher earlier price. Shows struck through, with the discount. */
+  originalPrice?: number;
+  /** ISO 4217 code. */
+  currency?: string;
+  /** Locale for number formatting. Defaults to the reader's. */
+  locale?: string;
+  /** 0–5, shown to the nearest half star. */
+  rating?: number;
+  /** A label over the image — "Sale", "New", "Limited". */
+  badge?: ReactNode;
+  /** Overrides the badge colour chosen from its text. */
+  badgeVariant?: BadgeProps["variant"];
+  /** Called when "Add to cart" is pressed. The button confirms and reverts on its own. */
+  onAddToCart?: () => void;
+  /** Controlled wishlist state. */
+  wishlisted?: boolean;
+  /** Initial wishlist state when uncontrolled. */
+  defaultWishlisted?: boolean;
+  onWishlistChange?: (wishlisted: boolean) => void;
+  /** Plays the entrance animation (tied to scrolling into view where supported). */
+  animateIn?: boolean;
+  /** Extra content under the price, before the button. */
+  children?: ReactNode;
+}
+/** A product tile: image, name, rating, price, add-to-cart and wishlist. */
+declare function ProductCard({ className, title, image, imageAlt, href, price, originalPrice, currency, locale, rating, badge, badgeVariant, onAddToCart, wishlisted, defaultWishlisted, onWishlistChange, animateIn, children, ...props }: ProductCardProps): import("react").JSX.Element;
+//#endregion
+export { ProductCard, ProductCardProps };
+//# sourceMappingURL=product-card.d.ts.map

package/dist/components/product-card/product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.d.ts","names":[],"sources":["../../../src/components/product-card/product-card.tsx"],"mappings":";;;;UAgJiB,yBAAyB,KAAK;;EAE7C;;EAEA;;EAEA;;EAEA;EACA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,QAAQ;;EAER,eAAe;;EAEf;;EAEA;;EAEA;EACA,oBAAoB;;EAEpB;;EAEA,WAAW;;;iBAIG,cACd,WACA,OACA,OACA,UACA,MACA,OACA,eACA,UACA,QACA,QACA,OACA,cACA,aACA,YACA,mBACA,kBACA,WACA,aACG,SACF,mCAAgB,IAAA"}

package/dist/components/product-card/product-card.js

@@ -0,0 +1,249 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../badge/badge.js";
+import { MorphButton } from "../morph-button/morph-button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+//#region src/components/product-card/product-card.tsx
+const PREFIX = "dowel-product-card";
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;translate:0 20px;scale:.97}}
+@keyframes ${PREFIX}-pop{from{opacity:0;scale:.6}}
+[data-slot=product-card][data-animate]{animation:${PREFIX}-in calc(320ms * var(--motion-scale, 1)) var(--ease-out-quint) both}
+[data-slot=product-card][data-animate] [data-slot=product-card-badge]{animation:${PREFIX}-pop calc(320ms * var(--motion-scale, 1)) var(--ease-overshoot) calc(250ms * var(--motion-scale, 1)) both}
+@supports (animation-timeline:view()){
+[data-slot=product-card][data-animate],[data-slot=product-card][data-animate] [data-slot=product-card-badge]{animation-timeline:view();animation-delay:0s}
+[data-slot=product-card][data-animate]{animation-range:entry 0% entry 60%}
+[data-slot=product-card][data-animate] [data-slot=product-card-badge]{animation-range:entry 30% entry 90%}
+}
+@media (prefers-reduced-motion:reduce){[data-slot=product-card][data-animate],[data-slot=product-card][data-animate] [data-slot=product-card-badge]{animation:none}}
+`;
+const STAR = "M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z";
+function Star({ fill, gradient }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		className: cn("size-3.5", fill === "empty" ? "text-border-strong" : "text-warning"),
+		children: [fill === "half" ? /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+			id: gradient,
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "50%",
+				stopColor: "currentColor"
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "50%",
+				stopColor: "transparent"
+			})]
+		}) }) : null, /* @__PURE__ */ jsx("path", {
+			d: STAR,
+			fill: fill === "full" ? "currentColor" : fill === "half" ? `url(#${gradient})` : "none",
+			stroke: "currentColor",
+			strokeWidth: fill === "full" ? 0 : 1.5,
+			strokeLinejoin: "round"
+		})]
+	});
+}
+/** Rounded to the nearest half star, as the source did. */
+function Rating({ value }) {
+	const gradient = `${PREFIX}-half-${useId().replace(/:/g, "")}`;
+	const halves = Math.round(Math.min(Math.max(value, 0), 5) * 2);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "product-card-rating",
+		className: "flex items-center gap-0.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": `Rated ${String(value)} out of 5`,
+			className: "flex gap-0.5",
+			children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(Star, {
+				gradient,
+				fill: halves >= (i + 1) * 2 ? "full" : halves === i * 2 + 1 ? "half" : "empty"
+			}, i))
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "ms-1 text-xs font-medium text-muted-foreground",
+			children: value
+		})]
+	});
+}
+function CartIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M6 7h12l-1 13H7L6 7zm3 0V6a3 3 0 0 1 6 0v1",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function CheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M5 13l4 4L19 7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function HeartIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M21 8.25c0-2.49-2.1-4.5-4.69-4.5-1.93 0-3.6 1.13-4.31 2.73-.72-1.6-2.38-2.73-4.31-2.73C5.1 3.75 3 5.76 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/** "Sale" reads as destructive and "New" as success, as in the source; anything else is primary. */
+function badgeTone(badge) {
+	const text = typeof badge === "string" ? badge.toLowerCase() : "";
+	if (text === "sale") return "destructive";
+	if (text === "new") return "success";
+	return "default";
+}
+/** A product tile: image, name, rating, price, add-to-cart and wishlist. */
+function ProductCard({ className, title, image, imageAlt = "", href, price, originalPrice, currency = "USD", locale, rating, badge, badgeVariant, onAddToCart, wishlisted, defaultWishlisted = false, onWishlistChange, animateIn = true, children, ...props }) {
+	const titleId = `${PREFIX}-${useId().replace(/:/g, "")}`;
+	const [uncontrolledWish, setUncontrolledWish] = useState(defaultWishlisted);
+	const wished = wishlisted ?? uncontrolledWish;
+	const format = (value) => new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency
+	}).format(value);
+	const discounted = originalPrice !== void 0 && originalPrice > price;
+	const discount = discounted ? Math.round((originalPrice - price) / originalPrice * 100) : 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs("article", {
+		"aria-labelledby": titleId,
+		"data-slot": "product-card",
+		"data-animate": animateIn || void 0,
+		className: cn("group/product relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm", "transition-shadow duration-[var(--duration-normal)] ease-[var(--ease-out-quint)] hover:shadow-xl", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative aspect-square overflow-hidden bg-muted",
+			children: [
+				/* @__PURE__ */ jsx("img", {
+					src: image,
+					alt: imageAlt,
+					draggable: false,
+					className: "size-full object-cover transition-transform duration-[var(--duration-slower)] ease-[var(--ease-out-quint)] group-hover/product:scale-105"
+				}),
+				badge != null ? /* @__PURE__ */ jsx(Badge, {
+					"data-slot": "product-card-badge",
+					variant: badgeVariant ?? badgeTone(badge),
+					className: "absolute start-3 top-3 shadow-sm",
+					children: badge
+				}) : null,
+				/* @__PURE__ */ jsx(MorphButton, {
+					"data-slot": "product-card-wishlist",
+					"aria-label": `Save ${title} to wishlist`,
+					icon: /* @__PURE__ */ jsx(HeartIcon, {}),
+					tone: "destructive",
+					fillOnActive: true,
+					size: "icon-sm",
+					active: wished,
+					onActiveChange: (next) => {
+						if (wishlisted === void 0) setUncontrolledWish(next);
+						onWishlistChange?.(next);
+					},
+					className: "absolute end-3 top-3 z-10 rounded-full bg-background/80 backdrop-blur-sm hover:bg-background"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col gap-2 p-4",
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					id: titleId,
+					className: "line-clamp-1 text-sm font-semibold tracking-tight",
+					children: href ? /* @__PURE__ */ jsx("a", {
+						href,
+						className: cn("rounded-sm after:absolute after:inset-0 after:content-['']", focusRing),
+						children: title
+					}) : title
+				}),
+				rating !== void 0 ? /* @__PURE__ */ jsx(Rating, { value: rating }) : null,
+				/* @__PURE__ */ jsxs("p", {
+					"data-slot": "product-card-price",
+					className: "flex flex-wrap items-baseline gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: discounted ? "Now " : "Price "
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xl font-bold tracking-tight",
+							children: format(price)
+						}),
+						discounted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: ", was "
+							}),
+							/* @__PURE__ */ jsx("s", {
+								className: "text-sm text-muted-foreground",
+								children: format(originalPrice)
+							}),
+							/* @__PURE__ */ jsxs(Badge, {
+								variant: "destructive",
+								size: "sm",
+								className: "rounded-md",
+								children: [/* @__PURE__ */ jsxs("span", {
+									"aria-hidden": "true",
+									children: [
+										"-",
+										discount,
+										"%"
+									]
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "sr-only",
+									children: [
+										", ",
+										discount,
+										"% off"
+									]
+								})]
+							})
+						] }) : null
+					]
+				}),
+				children,
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-auto pt-2",
+					children: /* @__PURE__ */ jsx(MorphButton, {
+						"data-slot": "product-card-add",
+						trigger: "transient",
+						variant: "primary",
+						icon: /* @__PURE__ */ jsx(CartIcon, {}),
+						activeIcon: /* @__PURE__ */ jsx(CheckIcon, {}),
+						label: "Add to cart",
+						activeLabel: "Added",
+						"aria-label": `Add ${title} to cart`,
+						announcement: `${title} added to cart`,
+						onClick: () => onAddToCart?.(),
+						className: "relative z-10 w-full data-[state=active]:bg-success data-[state=active]:text-success-foreground"
+					})
+				})
+			]
+		})]
+	})] });
+}
+//#endregion
+export { ProductCard };
+
+//# sourceMappingURL=product-card.js.map

package/dist/components/product-card/product-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.js","names":[],"sources":["../../../src/components/product-card/product-card.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Product Card (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { useId, useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { Badge, type BadgeProps } from \"@/components/badge\";\nimport { MorphButton } from \"@/components/morph-button\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A shop card assembled from the library rather than re-drawn: the badges are\n * Badge, the add-to-cart confirmation is MorphButton's `transient` mode (it\n * morphs to \"Added\", announces it, and reverts on its own), and the wishlist\n * heart is MorphButton's `toggle` mode, exposed with aria-pressed.\n *\n * The source used `motion` for three things CSS does honestly: the entrance\n * (a keyframe, tied to scroll where the browser supports view timelines), the\n * image zoom and the button press. So there is no animation library here.\n */\n\nconst PREFIX = \"dowel-product-card\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-in{from{opacity:0;translate:0 20px;scale:.97}}\n@keyframes ${PREFIX}-pop{from{opacity:0;scale:.6}}\n[data-slot=product-card][data-animate]{animation:${PREFIX}-in calc(320ms * var(--motion-scale, 1)) var(--ease-out-quint) both}\n[data-slot=product-card][data-animate] [data-slot=product-card-badge]{animation:${PREFIX}-pop calc(320ms * var(--motion-scale, 1)) var(--ease-overshoot) calc(250ms * var(--motion-scale, 1)) both}\n@supports (animation-timeline:view()){\n[data-slot=product-card][data-animate],[data-slot=product-card][data-animate] [data-slot=product-card-badge]{animation-timeline:view();animation-delay:0s}\n[data-slot=product-card][data-animate]{animation-range:entry 0% entry 60%}\n[data-slot=product-card][data-animate] [data-slot=product-card-badge]{animation-range:entry 30% entry 90%}\n}\n@media (prefers-reduced-motion:reduce){[data-slot=product-card][data-animate],[data-slot=product-card][data-animate] [data-slot=product-card-badge]{animation:none}}\n`;\n\nconst STAR = \"M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z\";\n\nfunction Star({ fill, gradient }: { fill: \"full\" | \"half\" | \"empty\"; gradient: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n      className={cn(\"size-3.5\", fill === \"empty\" ? \"text-border-strong\" : \"text-warning\")}\n    >\n      {fill === \"half\" ? (\n        <defs>\n          <linearGradient id={gradient}>\n            <stop offset=\"50%\" stopColor=\"currentColor\" />\n            <stop offset=\"50%\" stopColor=\"transparent\" />\n          </linearGradient>\n        </defs>\n      ) : null}\n      <path\n        d={STAR}\n        fill={fill === \"full\" ? \"currentColor\" : fill === \"half\" ? `url(#${gradient})` : \"none\"}\n        stroke=\"currentColor\"\n        strokeWidth={fill === \"full\" ? 0 : 1.5}\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/** Rounded to the nearest half star, as the source did. */\nfunction Rating({ value }: { value: number }) {\n  const gradient = `${PREFIX}-half-${useId().replace(/:/g, \"\")}`;\n  const halves = Math.round(Math.min(Math.max(value, 0), 5) * 2);\n  return (\n    <div data-slot=\"product-card-rating\" className=\"flex items-center gap-0.5\">\n      <span role=\"img\" aria-label={`Rated ${String(value)} out of 5`} className=\"flex gap-0.5\">\n        {Array.from({ length: 5 }, (_, i) => (\n          <Star\n            key={i}\n            gradient={gradient}\n            fill={halves >= (i + 1) * 2 ? \"full\" : halves === i * 2 + 1 ? \"half\" : \"empty\"}\n          />\n        ))}\n      </span>\n      <span aria-hidden=\"true\" className=\"ms-1 text-xs font-medium text-muted-foreground\">\n        {value}\n      </span>\n    </div>\n  );\n}\n\nfunction CartIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M6 7h12l-1 13H7L6 7zm3 0V6a3 3 0 0 1 6 0v1\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.5}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M5 13l4 4L19 7\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction HeartIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M21 8.25c0-2.49-2.1-4.5-4.69-4.5-1.93 0-3.6 1.13-4.31 2.73-.72-1.6-2.38-2.73-4.31-2.73C5.1 3.75 3 5.76 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\n/** \"Sale\" reads as destructive and \"New\" as success, as in the source; anything else is primary. */\nfunction badgeTone(badge: ReactNode): BadgeProps[\"variant\"] {\n  const text = typeof badge === \"string\" ? badge.toLowerCase() : \"\";\n  if (text === \"sale\") return \"destructive\";\n  if (text === \"new\") return \"success\";\n  return \"default\";\n}\n\nexport interface ProductCardProps extends Omit<ComponentPropsWithRef<\"article\">, \"title\"> {\n  /** Product name. Names the card, the cart button and the wishlist toggle. */\n  title: string;\n  /** Image URL. */\n  image: string;\n  /** Alt text for the image. Empty by default: the title beside it already names the product. */\n  imageAlt?: string;\n  /** Makes the title a link covering the whole card; the buttons stay on top of it. */\n  href?: string;\n  price: number;\n  /** A higher earlier price. Shows struck through, with the discount. */\n  originalPrice?: number;\n  /** ISO 4217 code. */\n  currency?: string;\n  /** Locale for number formatting. Defaults to the reader's. */\n  locale?: string;\n  /** 0–5, shown to the nearest half star. */\n  rating?: number;\n  /** A label over the image — \"Sale\", \"New\", \"Limited\". */\n  badge?: ReactNode;\n  /** Overrides the badge colour chosen from its text. */\n  badgeVariant?: BadgeProps[\"variant\"];\n  /** Called when \"Add to cart\" is pressed. The button confirms and reverts on its own. */\n  onAddToCart?: () => void;\n  /** Controlled wishlist state. */\n  wishlisted?: boolean;\n  /** Initial wishlist state when uncontrolled. */\n  defaultWishlisted?: boolean;\n  onWishlistChange?: (wishlisted: boolean) => void;\n  /** Plays the entrance animation (tied to scrolling into view where supported). */\n  animateIn?: boolean;\n  /** Extra content under the price, before the button. */\n  children?: ReactNode;\n}\n\n/** A product tile: image, name, rating, price, add-to-cart and wishlist. */\nexport function ProductCard({\n  className,\n  title,\n  image,\n  imageAlt = \"\",\n  href,\n  price,\n  originalPrice,\n  currency = \"USD\",\n  locale,\n  rating,\n  badge,\n  badgeVariant,\n  onAddToCart,\n  wishlisted,\n  defaultWishlisted = false,\n  onWishlistChange,\n  animateIn = true,\n  children,\n  ...props\n}: ProductCardProps) {\n  const titleId = `${PREFIX}-${useId().replace(/:/g, \"\")}`;\n  const [uncontrolledWish, setUncontrolledWish] = useState(defaultWishlisted);\n  const wished = wishlisted ?? uncontrolledWish;\n  const format = (value: number) =>\n    new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(value);\n  const discounted = originalPrice !== undefined && originalPrice > price;\n  const discount = discounted ? Math.round(((originalPrice - price) / originalPrice) * 100) : 0;\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <article\n        aria-labelledby={titleId}\n        data-slot=\"product-card\"\n        data-animate={animateIn || undefined}\n        className={cn(\n          \"group/product relative flex w-full flex-col overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm\",\n          \"transition-shadow duration-[var(--duration-normal)] ease-[var(--ease-out-quint)] hover:shadow-xl\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"relative aspect-square overflow-hidden bg-muted\">\n          <img\n            src={image}\n            alt={imageAlt}\n            draggable={false}\n            className=\"size-full object-cover transition-transform duration-[var(--duration-slower)] ease-[var(--ease-out-quint)] group-hover/product:scale-105\"\n          />\n          {badge != null ? (\n            <Badge\n              data-slot=\"product-card-badge\"\n              variant={badgeVariant ?? badgeTone(badge)}\n              className=\"absolute start-3 top-3 shadow-sm\"\n            >\n              {badge}\n            </Badge>\n          ) : null}\n          <MorphButton\n            data-slot=\"product-card-wishlist\"\n            aria-label={`Save ${title} to wishlist`}\n            icon={<HeartIcon />}\n            tone=\"destructive\"\n            fillOnActive\n            size=\"icon-sm\"\n            active={wished}\n            onActiveChange={(next) => {\n              if (wishlisted === undefined) setUncontrolledWish(next);\n              onWishlistChange?.(next);\n            }}\n            className=\"absolute end-3 top-3 z-10 rounded-full bg-background/80 backdrop-blur-sm hover:bg-background\"\n          />\n        </div>\n\n        <div className=\"flex flex-1 flex-col gap-2 p-4\">\n          <h3 id={titleId} className=\"line-clamp-1 text-sm font-semibold tracking-tight\">\n            {href ? (\n              <a\n                href={href}\n                className={cn(\n                  \"rounded-sm after:absolute after:inset-0 after:content-['']\",\n                  focusRing,\n                )}\n              >\n                {title}\n              </a>\n            ) : (\n              title\n            )}\n          </h3>\n\n          {rating !== undefined ? <Rating value={rating} /> : null}\n\n          <p data-slot=\"product-card-price\" className=\"flex flex-wrap items-baseline gap-2\">\n            <span className=\"sr-only\">{discounted ? \"Now \" : \"Price \"}</span>\n            <span className=\"text-xl font-bold tracking-tight\">{format(price)}</span>\n            {discounted ? (\n              <>\n                <span className=\"sr-only\">, was </span>\n                <s className=\"text-sm text-muted-foreground\">{format(originalPrice)}</s>\n                <Badge variant=\"destructive\" size=\"sm\" className=\"rounded-md\">\n                  <span aria-hidden=\"true\">-{discount}%</span>\n                  <span className=\"sr-only\">, {discount}% off</span>\n                </Badge>\n              </>\n            ) : null}\n          </p>\n\n          {children}\n\n          <div className=\"mt-auto pt-2\">\n            <MorphButton\n              data-slot=\"product-card-add\"\n              trigger=\"transient\"\n              variant=\"primary\"\n              icon={<CartIcon />}\n              activeIcon={<CheckIcon />}\n              label=\"Add to cart\"\n              activeLabel=\"Added\"\n              aria-label={`Add ${title} to cart`}\n              announcement={`${title} added to cart`}\n              onClick={() => onAddToCart?.()}\n              className=\"relative z-10 w-full data-[state=active]:bg-success data-[state=active]:text-success-foreground\"\n            />\n          </div>\n        </div>\n      </article>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/progress/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["progress.tsx"],
-	a11y: "Exposed as role=\"progressbar\" with aria-valuenow, and give it a name with aria-label or aria-labelledby. Omitting `value` marks it indeterminate, which is announced differently from zero. Show the percentage in text as well — the bar alone is not readable at a glance for everyone."
+	a11y: "Exposed as role=\"progressbar\" with aria-valuenow, and give it a name with aria-label or aria-labelledby. Omitting `value` marks it indeterminate, which is announced differently from zero. Show the percentage in text as well — the bar alone is not readable at a glance for everyone. The optional stripe and shine effects are decoration: they stop under reduced motion and never apply to an indeterminate bar."
 });
 //#endregion
 export { meta };

package/dist/components/progress/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/progress/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"progress\",\n  title: \"Progress\",\n  description: \"Shows how far along a task is, or that one is running at all.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"progress.tsx\"],\n  a11y:\n    'Exposed as role=\"progressbar\" with aria-valuenow, and give it a name with aria-label or ' +\n    \"aria-labelledby. Omitting `value` marks it indeterminate, which is announced differently \" +\n    \"from zero. Show the percentage in text as well — the bar alone is not readable at a glance \" +\n    \"for everyone.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/progress/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"progress\",\n  title: \"Progress\",\n  description: \"Shows how far along a task is, or that one is running at all.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"progress.tsx\"],\n  a11y:\n    'Exposed as role=\"progressbar\" with aria-valuenow, and give it a name with aria-label or ' +\n    \"aria-labelledby. Omitting `value` marks it indeterminate, which is announced differently \" +\n    \"from zero. Show the percentage in text as well — the bar alone is not readable at a glance \" +\n    \"for everyone. The optional stripe and shine effects are decoration: they stop under \" +\n    \"reduced motion and never apply to an indeterminate bar.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAKJ,CAAC"}

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

@@ -6,7 +6,26 @@ declare const progressVariants: (props?: ({
   size?: "sm" | "md" | "lg" | null | undefined;
   tone?: "primary" | "success" | "warning" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface ProgressProps extends ComponentPropsWithRef<typeof Progress.Root>, VariantProps<typeof progressVariants> {}
+interface ProgressProps extends ComponentPropsWithRef<typeof Progress.Root>, VariantProps<typeof progressVariants> {
+  /**
+   * How the fill travels to a new value. `smooth` eases in, as it always has;
+   * `spring` carries slightly past the value and settles, like SmoothUI's
+   * spring. Default `smooth`.
+   */
+  easing?: "smooth" | "spring";
+  /**
+   * Fills from empty on mount instead of appearing at its value. For a bar
+   * that is revealed once, like a result or a quota; not for one that is
+   * polled, which would replay on every remount. Default `false`.
+   */
+  fillOnMount?: boolean;
+  /**
+   * A moving texture on the fill while the value is known: `striped` runs
+   * diagonal stripes along it, `shine` sweeps a highlight across it.
+   * Decoration — both stop under reduced motion. Default `none`.
+   */
+  effect?: "none" | "striped" | "shine";
+}
 /**
  * Shows how far along a task is.
  *
@@ -15,7 +34,7 @@ interface ProgressProps extends ComponentPropsWithRef<typeof Progress.Root>, Var
  * "no progress". For a short wait with no measurable progress, a Spinner says
  * the same thing with less furniture.
  */
-declare function Progress$1({ className, size, tone, value, ...props }: ProgressProps): import("react").JSX.Element;
+declare function Progress$1({ className, size, tone, value, easing, fillOnMount, effect, ...props }: ProgressProps): import("react").JSX.Element;
 //#endregion
 export { Progress$1 as Progress, ProgressProps, progressVariants };
 //# sourceMappingURL=progress.d.ts.map

package/dist/components/progress/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","names":[],"sources":["../../../src/components/progress/progress.tsx"],"mappings":";;;;cAQM,mBAAgB;;;6CAkBpB;UAEe,sBAEb,6BAA6B,SAAkB,OAC/C,oBAAoB;;;;;;;;;iBAUR,aAAW,WAAW,MAAM,MAAM,UAAU,SAAS,gCAAa,IAAA"}
+{"version":3,"file":"progress.d.ts","names":[],"sources":["../../../src/components/progress/progress.tsx"],"mappings":";;;;cASM,mBAAgB;;;6CAkBpB;UAkCe,sBAEb,6BAA6B,SAAkB,OAC/C,oBAAoB;;;;;;EAMtB;;;;;;EAMA;;;;;;EAMA;;;;;;;;;;iBAmCc,aACd,WACA,MACA,MACA,OACA,QACA,aACA,WACG,SACF,gCAAa,IAAA"}