jaci-ui 0.6.3 → 0.7.0

package/dist/components/image/image.js

@@ -0,0 +1,103 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { image } from "../../styled-system/recipes/image.js";
+import { forwardRef, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/image/image.tsx
+const Image = forwardRef(function Image({ alt, aspectRatio, className, defaultOpen, fallback, fit = "cover", lightbox = false, lightboxLabel = "Open image", onError, onLoad, onOpenChange, onStatusChange, open, position, src, style, ...props }, ref) {
+	const [status, setStatus] = useState("loading");
+	useEffect(() => {
+		setStatus("loading");
+	}, [src]);
+	useEffect(() => {
+		onStatusChange?.(status);
+	}, [onStatusChange, status]);
+	const styles = image({
+		fit,
+		status
+	});
+	const rootStyle = {
+		...aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0 ? { aspectRatio } : void 0,
+		...style
+	};
+	const content = /* @__PURE__ */ jsxs("span", {
+		"aria-busy": status === "loading" || void 0,
+		className: styles.root,
+		"data-fit": fit,
+		"data-jaci-component": "image",
+		"data-slot": "image",
+		"data-status": status,
+		style: rootStyle,
+		children: [/* @__PURE__ */ jsx("img", {
+			...props,
+			ref,
+			alt,
+			className: cx(styles.image, className),
+			"data-slot": "image-content",
+			onError: (event) => {
+				setStatus("error");
+				onError?.(event);
+			},
+			onLoad: (event) => {
+				setStatus("loaded");
+				onLoad?.(event);
+			},
+			src,
+			style: { objectPosition: position }
+		}), status === "error" && fallback ? /* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			className: styles.fallback,
+			"data-slot": "image-fallback",
+			children: fallback
+		}) : null]
+	});
+	if (!lightbox) return content;
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		defaultOpen,
+		onOpenChange: (nextOpen) => onOpenChange?.(nextOpen),
+		open,
+		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+			"aria-label": lightboxLabel,
+			className: styles.trigger,
+			"data-jaci-component": "image-trigger",
+			"data-slot": "image-trigger",
+			children: content
+		}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+			className: styles.backdrop,
+			"data-slot": "image-lightbox-backdrop"
+		}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+			className: styles.viewport,
+			"data-slot": "image-lightbox-viewport",
+			children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+				"aria-label": alt || lightboxLabel,
+				className: styles.popup,
+				"data-jaci-component": "image-lightbox",
+				"data-slot": "image-lightbox-popup",
+				children: [
+					/* @__PURE__ */ jsx(Dialog.Title, {
+						className: styles.title,
+						children: alt || lightboxLabel
+					}),
+					/* @__PURE__ */ jsx(Dialog.Close, {
+						"aria-label": "Close image",
+						className: styles.close,
+						"data-slot": "image-lightbox-close",
+						children: "×"
+					}),
+					/* @__PURE__ */ jsx("img", {
+						alt,
+						className: styles.lightboxImage,
+						"data-slot": "image-lightbox-content",
+						src,
+						style: { objectPosition: position }
+					})
+				]
+			})
+		})] })]
+	});
+});
+//#endregion
+export { Image };
+
+//# sourceMappingURL=image.js.map

package/dist/components/image/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":["BaseDialog"],"sources":["../../../src/components/image/image.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { image } from \"../../styled-system/recipes\";\n\nexport type ImageFit = \"contain\" | \"cover\" | \"fill\" | \"none\";\nexport type ImageStatus = \"loading\" | \"loaded\" | \"error\";\n\nexport interface ImageProps extends Omit<ComponentPropsWithoutRef<\"img\">, \"children\"> {\n  alt: string;\n  aspectRatio?: number;\n  defaultOpen?: boolean;\n  fallback?: ReactNode;\n  fit?: ImageFit;\n  lightbox?: boolean;\n  lightboxLabel?: string;\n  onOpenChange?: (open: boolean) => void;\n  onStatusChange?: (status: ImageStatus) => void;\n  open?: boolean;\n  position?: string;\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  {\n    alt,\n    aspectRatio,\n    className,\n    defaultOpen,\n    fallback,\n    fit = \"cover\",\n    lightbox = false,\n    lightboxLabel = \"Open image\",\n    onError,\n    onLoad,\n    onOpenChange,\n    onStatusChange,\n    open,\n    position,\n    src,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [status, setStatus] = useState<ImageStatus>(\"loading\");\n\n  // The source is intentionally the reset key for the native image lifecycle.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: changing src starts a new lifecycle.\n  useEffect(() => {\n    setStatus(\"loading\");\n  }, [src]);\n\n  useEffect(() => {\n    onStatusChange?.(status);\n  }, [onStatusChange, status]);\n\n  const styles = image({ fit, status });\n  const rootStyle = {\n    ...(aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0\n      ? { aspectRatio }\n      : undefined),\n    ...style,\n  };\n\n  const content = (\n    <span\n      aria-busy={status === \"loading\" || undefined}\n      className={styles.root}\n      data-fit={fit}\n      data-jaci-component=\"image\"\n      data-slot=\"image\"\n      data-status={status}\n      style={rootStyle}\n    >\n      <img\n        {...props}\n        ref={ref}\n        alt={alt}\n        className={cx(styles.image, className)}\n        data-slot=\"image-content\"\n        onError={(event) => {\n          setStatus(\"error\");\n          onError?.(event);\n        }}\n        onLoad={(event) => {\n          setStatus(\"loaded\");\n          onLoad?.(event);\n        }}\n        src={src}\n        style={{ objectPosition: position }}\n      />\n      {status === \"error\" && fallback ? (\n        <span aria-live=\"polite\" className={styles.fallback} data-slot=\"image-fallback\">\n          {fallback}\n        </span>\n      ) : null}\n    </span>\n  );\n\n  if (!lightbox) {\n    return content;\n  }\n\n  return (\n    <BaseDialog.Root\n      defaultOpen={defaultOpen}\n      onOpenChange={(nextOpen) => onOpenChange?.(nextOpen)}\n      open={open}\n    >\n      <BaseDialog.Trigger\n        aria-label={lightboxLabel}\n        className={styles.trigger}\n        data-jaci-component=\"image-trigger\"\n        data-slot=\"image-trigger\"\n      >\n        {content}\n      </BaseDialog.Trigger>\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={styles.backdrop} data-slot=\"image-lightbox-backdrop\" />\n        <BaseDialog.Viewport className={styles.viewport} data-slot=\"image-lightbox-viewport\">\n          <BaseDialog.Popup\n            aria-label={alt || lightboxLabel}\n            className={styles.popup}\n            data-jaci-component=\"image-lightbox\"\n            data-slot=\"image-lightbox-popup\"\n          >\n            <BaseDialog.Title className={styles.title}>{alt || lightboxLabel}</BaseDialog.Title>\n            <BaseDialog.Close\n              aria-label=\"Close image\"\n              className={styles.close}\n              data-slot=\"image-lightbox-close\"\n            >\n              ×\n            </BaseDialog.Close>\n            <img\n              alt={alt}\n              className={styles.lightboxImage}\n              data-slot=\"image-lightbox-content\"\n              src={src}\n              style={{ objectPosition: position }}\n            />\n          </BaseDialog.Popup>\n        </BaseDialog.Viewport>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n});\n"],"mappings":";;;;;;;AA0BA,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,KACA,aACA,WACA,aACA,UACA,MAAM,SACN,WAAW,OACX,gBAAgB,cAChB,SACA,QACA,cACA,gBACA,MACA,UACA,KACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAsB,SAAS;CAI3D,gBAAgB;EACd,UAAU,SAAS;CACrB,GAAG,CAAC,GAAG,CAAC;CAER,gBAAgB;EACd,iBAAiB,MAAM;CACzB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,MAAM,SAAS,MAAM;EAAE;EAAK;CAAO,CAAC;CACpC,MAAM,YAAY;EAChB,GAAI,eAAe,OAAO,SAAS,WAAW,KAAK,cAAc,IAC7D,EAAE,YAAY,IACd,KAAA;EACJ,GAAG;CACL;CAEA,MAAM,UACJ,qBAAC,QAAD;EACE,aAAW,WAAW,aAAa,KAAA;EACnC,WAAW,OAAO;EAClB,YAAU;EACV,uBAAoB;EACpB,aAAU;EACV,eAAa;EACb,OAAO;YAPT,CASE,oBAAC,OAAD;GACE,GAAI;GACC;GACA;GACL,WAAW,GAAG,OAAO,OAAO,SAAS;GACrC,aAAU;GACV,UAAU,UAAU;IAClB,UAAU,OAAO;IACjB,UAAU,KAAK;GACjB;GACA,SAAS,UAAU;IACjB,UAAU,QAAQ;IAClB,SAAS,KAAK;GAChB;GACK;GACL,OAAO,EAAE,gBAAgB,SAAS;EACnC,CAAA,GACA,WAAW,WAAW,WACrB,oBAAC,QAAD;GAAM,aAAU;GAAS,WAAW,OAAO;GAAU,aAAU;aAC5D;EACG,CAAA,IACJ,IACA;;CAGR,IAAI,CAAC,UACH,OAAO;CAGT,OACE,qBAACA,OAAW,MAAZ;EACe;EACb,eAAe,aAAa,eAAe,QAAQ;EAC7C;YAHR,CAKE,oBAACA,OAAW,SAAZ;GACE,cAAY;GACZ,WAAW,OAAO;GAClB,uBAAoB;GACpB,aAAU;aAET;EACiB,CAAA,GACpB,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ;GAAqB,WAAW,OAAO;GAAU,aAAU;EAA2B,CAAA,GACtF,oBAACA,OAAW,UAAZ;GAAqB,WAAW,OAAO;GAAU,aAAU;aACzD,qBAACA,OAAW,OAAZ;IACE,cAAY,OAAO;IACnB,WAAW,OAAO;IAClB,uBAAoB;IACpB,aAAU;cAJZ;KAME,oBAACA,OAAW,OAAZ;MAAkB,WAAW,OAAO;gBAAQ,OAAO;KAAgC,CAAA;KACnF,oBAACA,OAAW,OAAZ;MACE,cAAW;MACX,WAAW,OAAO;MAClB,aAAU;gBACX;KAEiB,CAAA;KAClB,oBAAC,OAAD;MACO;MACL,WAAW,OAAO;MAClB,aAAU;MACL;MACL,OAAO,EAAE,gBAAgB,SAAS;KACnC,CAAA;IACe;;EACC,CAAA,CACJ,EAAA,CAAA,CACJ;;AAErB,CAAC"}

package/dist/components/image/index.d.cts

@@ -0,0 +1,2 @@
+import { Image, ImageFit, ImageProps, ImageStatus } from "./image.cjs";
+export { Image, type ImageFit, type ImageProps, type ImageStatus };

package/dist/components/image/index.d.ts

@@ -0,0 +1,2 @@
+import { Image, ImageFit, ImageProps, ImageStatus } from "./image.js";
+export { Image, type ImageFit, type ImageProps, type ImageStatus };

package/dist/components/kbd/index.d.cts

@@ -0,0 +1,2 @@
+import { Kbd, KbdProps, KbdSize, KbdVariant } from "./kbd.cjs";
+export { Kbd, type KbdProps, type KbdSize, type KbdVariant };

package/dist/components/kbd/index.d.ts

@@ -0,0 +1,2 @@
+import { Kbd, KbdProps, KbdSize, KbdVariant } from "./kbd.js";
+export { Kbd, type KbdProps, type KbdSize, type KbdVariant };

package/dist/components/kbd/kbd.cjs

@@ -0,0 +1,23 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_kbd = require("../../styled-system/recipes/kbd.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/kbd/kbd.tsx
+const Kbd = (0, react.forwardRef)(function Kbd({ className, size = "md", variant = "subtle", ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
+		...props,
+		ref,
+		className: require_cx.cx(require_kbd.kbd({
+			size,
+			variant
+		}), className),
+		"data-jaci-component": "kbd",
+		"data-size": size,
+		"data-slot": "kbd",
+		"data-variant": variant
+	});
+});
+//#endregion
+exports.Kbd = Kbd;
+
+//# sourceMappingURL=kbd.cjs.map

package/dist/components/kbd/kbd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.cjs","names":["cx","kbd"],"sources":["../../../src/components/kbd/kbd.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { kbd } from \"../../styled-system/recipes\";\n\nexport type KbdSize = \"sm\" | \"md\" | \"lg\";\nexport type KbdVariant = \"solid\" | \"outline\" | \"subtle\";\n\nexport interface KbdProps extends ComponentPropsWithoutRef<\"kbd\"> {\n  size?: KbdSize;\n  variant?: KbdVariant;\n}\n\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { className, size = \"md\", variant = \"subtle\", ...props },\n  ref,\n) {\n  return (\n    <kbd\n      {...props}\n      ref={ref}\n      className={cx(kbd({ size, variant }), className)}\n      data-jaci-component=\"kbd\"\n      data-size={size}\n      data-slot=\"kbd\"\n      data-variant={variant}\n    />\n  );\n});\n"],"mappings":";;;;;AAcA,MAAa,OAAA,GAAA,MAAA,WAAA,CAAwC,SAAS,IAC5D,EAAE,WAAW,OAAO,MAAM,UAAU,UAAU,GAAG,SACjD,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,YAAAA,IAAI;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC/C,uBAAoB;EACpB,aAAW;EACX,aAAU;EACV,gBAAc;CACf,CAAA;AAEL,CAAC"}

package/dist/components/kbd/kbd.d.cts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/kbd/kbd.d.ts
+type KbdSize = "sm" | "md" | "lg";
+type KbdVariant = "solid" | "outline" | "subtle";
+interface KbdProps extends ComponentPropsWithoutRef<"kbd"> {
+  size?: KbdSize;
+  variant?: KbdVariant;
+}
+declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Kbd, KbdProps, KbdSize, KbdVariant };
+//# sourceMappingURL=kbd.d.cts.map

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/components/kbd/kbd.d.ts
+type KbdSize = "sm" | "md" | "lg";
+type KbdVariant = "solid" | "outline" | "subtle";
+interface KbdProps extends ComponentPropsWithoutRef<"kbd"> {
+  size?: KbdSize;
+  variant?: KbdVariant;
+}
+declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { Kbd, KbdProps, KbdSize, KbdVariant };
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd/kbd.js

@@ -0,0 +1,23 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { kbd } from "../../styled-system/recipes/kbd.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/kbd/kbd.tsx
+const Kbd = forwardRef(function Kbd({ className, size = "md", variant = "subtle", ...props }, ref) {
+	return /* @__PURE__ */ jsx("kbd", {
+		...props,
+		ref,
+		className: cx(kbd({
+			size,
+			variant
+		}), className),
+		"data-jaci-component": "kbd",
+		"data-size": size,
+		"data-slot": "kbd",
+		"data-variant": variant
+	});
+});
+//#endregion
+export { Kbd };
+
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../../../src/components/kbd/kbd.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { kbd } from \"../../styled-system/recipes\";\n\nexport type KbdSize = \"sm\" | \"md\" | \"lg\";\nexport type KbdVariant = \"solid\" | \"outline\" | \"subtle\";\n\nexport interface KbdProps extends ComponentPropsWithoutRef<\"kbd\"> {\n  size?: KbdSize;\n  variant?: KbdVariant;\n}\n\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { className, size = \"md\", variant = \"subtle\", ...props },\n  ref,\n) {\n  return (\n    <kbd\n      {...props}\n      ref={ref}\n      className={cx(kbd({ size, variant }), className)}\n      data-jaci-component=\"kbd\"\n      data-size={size}\n      data-slot=\"kbd\"\n      data-variant={variant}\n    />\n  );\n});\n"],"mappings":";;;;;AAcA,MAAa,MAAM,WAAkC,SAAS,IAC5D,EAAE,WAAW,OAAO,MAAM,UAAU,UAAU,GAAG,SACjD,KACA;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,IAAI;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC/C,uBAAoB;EACpB,aAAW;EACX,aAAU;EACV,gBAAc;CACf,CAAA;AAEL,CAAC"}

package/dist/components/progress/progress.cjs

@@ -11,11 +11,13 @@ function clamp(value, maximum) {
 * A semantic progress bar. Provide `label` or `aria-label` so its purpose is
 * announced to assistive technology.
 */
-const Progress = (0, react.forwardRef)(function Progress({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, className, indeterminate = false, label, max = 100, value = 0, ...props }, ref) {
+const Progress = (0, react.forwardRef)(function Progress({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, className, format, getAriaValueText, indeterminate = false, label, locale, max = 100, value = 0, valueLabel, ...props }, ref) {
 	const labelId = (0, react.useId)();
 	const maximum = Number.isFinite(max) && max > 0 ? max : 100;
 	const currentValue = clamp(value ?? 0, maximum);
 	const percentage = currentValue / maximum * 100;
+	const formattedValue = new Intl.NumberFormat(locale, format).format(currentValue);
+	const computedValueText = getAriaValueText?.(formattedValue, currentValue);
 	const hasVisibleLabel = label !== null && label !== void 0;
 	const labelledBy = ariaLabelledBy ?? (ariaLabel || !hasVisibleLabel ? void 0 : labelId);
 	const accessibleLabel = ariaLabel ?? (labelledBy ? void 0 : "Progress");
@@ -29,17 +31,27 @@ const Progress = (0, react.forwardRef)(function Progress({ "aria-label": ariaLab
 		"aria-valuemax": maximum,
 		"aria-valuemin": 0,
 		"aria-valuenow": indeterminate ? void 0 : currentValue,
-		"aria-valuetext": ariaValueText,
+		"aria-valuetext": ariaValueText ?? computedValueText,
 		className: require_cx.cx(styles.root, className),
 		"data-indeterminate": indeterminate || void 0,
 		"data-jaci-component": "progress",
 		"data-slot": "progress",
 		role: "progressbar",
-		children: [hasVisibleLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: styles.label,
-			"data-slot": "progress-label",
-			id: labelId,
-			children: label
+		children: [hasVisibleLabel || valueLabel !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				minWidth: 0
+			},
+			children: [hasVisibleLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.label,
+				"data-slot": "progress-label",
+				id: labelId,
+				children: label
+			}) : null, valueLabel !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: styles.value,
+				"data-slot": "progress-value",
+				children: valueLabel
+			}) : null]
 		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"aria-hidden": "true",
 			className: styles.track,

package/dist/components/progress/progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.cjs","names":["progress","cx"],"sources":["../../../src/components/progress/progress.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { progress } from \"../../styled-system/recipes\";\n\nfunction clamp(value: number, maximum: number) {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), maximum);\n}\n\nexport interface ProgressProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The current amount. Omit it, or set `indeterminate`, when it is unknown. */\n  value?: number | null;\n  /** The value that represents completion. Defaults to 100. */\n  max?: number;\n  /** Omits `aria-valuenow` and renders an in-progress visual state. */\n  indeterminate?: boolean;\n  /** A visible, automatically associated accessible label. */\n  label?: ReactNode;\n}\n\n/**\n * A semantic progress bar. Provide `label` or `aria-label` so its purpose is\n * announced to assistive technology.\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    className,\n    indeterminate = false,\n    label,\n    max = 100,\n    value = 0,\n    ...props\n  },\n  ref,\n) {\n  const labelId = useId();\n  const maximum = Number.isFinite(max) && max > 0 ? max : 100;\n  const currentValue = clamp(value ?? 0, maximum);\n  const percentage = (currentValue / maximum) * 100;\n  const hasVisibleLabel = label !== null && label !== undefined;\n  const labelledBy = ariaLabelledBy ?? (ariaLabel || !hasVisibleLabel ? undefined : labelId);\n  const accessibleLabel = ariaLabel ?? (labelledBy ? undefined : \"Progress\");\n  const styles = progress({ indeterminate });\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      aria-busy={indeterminate || undefined}\n      aria-label={accessibleLabel}\n      aria-labelledby={labelledBy}\n      aria-valuemax={maximum}\n      aria-valuemin={0}\n      aria-valuenow={indeterminate ? undefined : currentValue}\n      aria-valuetext={ariaValueText}\n      className={cx(styles.root, className)}\n      data-indeterminate={indeterminate || undefined}\n      data-jaci-component=\"progress\"\n      data-slot=\"progress\"\n      role=\"progressbar\"\n    >\n      {hasVisibleLabel ? (\n        <span className={styles.label} data-slot=\"progress-label\" id={labelId}>\n          {label}\n        </span>\n      ) : null}\n      <div aria-hidden=\"true\" className={styles.track} data-slot=\"progress-track\">\n        <div\n          className={styles.indicator}\n          data-indeterminate={indeterminate || undefined}\n          data-slot=\"progress-indicator\"\n          style={indeterminate ? undefined : { width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n});\n"],"mappings":";;;;;AAMA,SAAS,MAAM,OAAe,SAAiB;CAC7C,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,OAAO;CAGT,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,OAAO;AAC7C;;;;;AAiBA,MAAa,YAAA,GAAA,MAAA,WAAA,CAAqD,SAAS,SACzE,EACE,cAAc,WACd,mBAAmB,gBACnB,kBAAkB,eAClB,WACA,gBAAgB,OAChB,OACA,MAAM,KACN,QAAQ,GACR,GAAG,SAEL,KACA;CACA,MAAM,WAAA,GAAA,MAAA,MAAA,CAAgB;CACtB,MAAM,UAAU,OAAO,SAAS,GAAG,KAAK,MAAM,IAAI,MAAM;CACxD,MAAM,eAAe,MAAM,SAAS,GAAG,OAAO;CAC9C,MAAM,aAAc,eAAe,UAAW;CAC9C,MAAM,kBAAkB,UAAU,QAAQ,UAAU,KAAA;CACpD,MAAM,aAAa,mBAAmB,aAAa,CAAC,kBAAkB,KAAA,IAAY;CAClF,MAAM,kBAAkB,cAAc,aAAa,KAAA,IAAY;CAC/D,MAAM,SAASA,iBAAAA,SAAS,EAAE,cAAc,CAAC;CAEzC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,aAAW,iBAAiB,KAAA;EAC5B,cAAY;EACZ,mBAAiB;EACjB,iBAAe;EACf,iBAAe;EACf,iBAAe,gBAAgB,KAAA,IAAY;EAC3C,kBAAgB;EAChB,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,sBAAoB,iBAAiB,KAAA;EACrC,uBAAoB;EACpB,aAAU;EACV,MAAK;YAdP,CAgBG,kBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW,OAAO;GAAO,aAAU;GAAiB,IAAI;aAC3D;EACG,CAAA,IACJ,MACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,eAAY;GAAO,WAAW,OAAO;GAAO,aAAU;aACzD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAW,OAAO;IAClB,sBAAoB,iBAAiB,KAAA;IACrC,aAAU;IACV,OAAO,gBAAgB,KAAA,IAAY,EAAE,OAAO,GAAG,WAAW,GAAG;GAC9D,CAAA;EACE,CAAA,CACF;;AAET,CAAC"}
+{"version":3,"file":"progress.cjs","names":["progress","cx"],"sources":["../../../src/components/progress/progress.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { progress } from \"../../styled-system/recipes\";\n\nfunction clamp(value: number, maximum: number) {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), maximum);\n}\n\nexport interface ProgressProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The current amount. Omit it, or set `indeterminate`, when it is unknown. */\n  value?: number | null;\n  /** The value that represents completion. Defaults to 100. */\n  max?: number;\n  /** Omits `aria-valuenow` and renders an in-progress visual state. */\n  indeterminate?: boolean;\n  /** A visible, automatically associated accessible label. */\n  label?: ReactNode;\n  valueLabel?: ReactNode;\n  locale?: Intl.LocalesArgument;\n  format?: Intl.NumberFormatOptions;\n  getAriaValueText?: (formattedValue: string, value: number) => string;\n}\n\n/**\n * A semantic progress bar. Provide `label` or `aria-label` so its purpose is\n * announced to assistive technology.\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    className,\n    format,\n    getAriaValueText,\n    indeterminate = false,\n    label,\n    locale,\n    max = 100,\n    value = 0,\n    valueLabel,\n    ...props\n  },\n  ref,\n) {\n  const labelId = useId();\n  const maximum = Number.isFinite(max) && max > 0 ? max : 100;\n  const currentValue = clamp(value ?? 0, maximum);\n  const percentage = (currentValue / maximum) * 100;\n  const formattedValue = new Intl.NumberFormat(locale, format).format(currentValue);\n  const computedValueText = getAriaValueText?.(formattedValue, currentValue);\n  const hasVisibleLabel = label !== null && label !== undefined;\n  const labelledBy = ariaLabelledBy ?? (ariaLabel || !hasVisibleLabel ? undefined : labelId);\n  const accessibleLabel = ariaLabel ?? (labelledBy ? undefined : \"Progress\");\n  const styles = progress({ indeterminate });\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      aria-busy={indeterminate || undefined}\n      aria-label={accessibleLabel}\n      aria-labelledby={labelledBy}\n      aria-valuemax={maximum}\n      aria-valuemin={0}\n      aria-valuenow={indeterminate ? undefined : currentValue}\n      aria-valuetext={ariaValueText ?? computedValueText}\n      className={cx(styles.root, className)}\n      data-indeterminate={indeterminate || undefined}\n      data-jaci-component=\"progress\"\n      data-slot=\"progress\"\n      role=\"progressbar\"\n    >\n      {hasVisibleLabel || valueLabel !== undefined ? (\n        <div style={{ display: \"flex\", minWidth: 0 }}>\n          {hasVisibleLabel ? (\n            <span className={styles.label} data-slot=\"progress-label\" id={labelId}>\n              {label}\n            </span>\n          ) : null}\n          {valueLabel !== undefined ? (\n            <span className={styles.value} data-slot=\"progress-value\">\n              {valueLabel}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      <div aria-hidden=\"true\" className={styles.track} data-slot=\"progress-track\">\n        <div\n          className={styles.indicator}\n          data-indeterminate={indeterminate || undefined}\n          data-slot=\"progress-indicator\"\n          style={indeterminate ? undefined : { width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n});\n"],"mappings":";;;;;AAMA,SAAS,MAAM,OAAe,SAAiB;CAC7C,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,OAAO;CAGT,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,OAAO;AAC7C;;;;;AAqBA,MAAa,YAAA,GAAA,MAAA,WAAA,CAAqD,SAAS,SACzE,EACE,cAAc,WACd,mBAAmB,gBACnB,kBAAkB,eAClB,WACA,QACA,kBACA,gBAAgB,OAChB,OACA,QACA,MAAM,KACN,QAAQ,GACR,YACA,GAAG,SAEL,KACA;CACA,MAAM,WAAA,GAAA,MAAA,MAAA,CAAgB;CACtB,MAAM,UAAU,OAAO,SAAS,GAAG,KAAK,MAAM,IAAI,MAAM;CACxD,MAAM,eAAe,MAAM,SAAS,GAAG,OAAO;CAC9C,MAAM,aAAc,eAAe,UAAW;CAC9C,MAAM,iBAAiB,IAAI,KAAK,aAAa,QAAQ,MAAM,CAAC,CAAC,OAAO,YAAY;CAChF,MAAM,oBAAoB,mBAAmB,gBAAgB,YAAY;CACzE,MAAM,kBAAkB,UAAU,QAAQ,UAAU,KAAA;CACpD,MAAM,aAAa,mBAAmB,aAAa,CAAC,kBAAkB,KAAA,IAAY;CAClF,MAAM,kBAAkB,cAAc,aAAa,KAAA,IAAY;CAC/D,MAAM,SAASA,iBAAAA,SAAS,EAAE,cAAc,CAAC;CAEzC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI;EACC;EACL,aAAW,iBAAiB,KAAA;EAC5B,cAAY;EACZ,mBAAiB;EACjB,iBAAe;EACf,iBAAe;EACf,iBAAe,gBAAgB,KAAA,IAAY;EAC3C,kBAAgB,iBAAiB;EACjC,WAAWC,WAAAA,GAAG,OAAO,MAAM,SAAS;EACpC,sBAAoB,iBAAiB,KAAA;EACrC,uBAAoB;EACpB,aAAU;EACV,MAAK;YAdP,CAgBG,mBAAmB,eAAe,KAAA,IACjC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,OAAO;IAAE,SAAS;IAAQ,UAAU;GAAE;aAA3C,CACG,kBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAW,OAAO;IAAO,aAAU;IAAiB,IAAI;cAC3D;GACG,CAAA,IACJ,MACH,eAAe,KAAA,IACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAW,OAAO;IAAO,aAAU;cACtC;GACG,CAAA,IACJ,IACD;OACH,MACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,eAAY;GAAO,WAAW,OAAO;GAAO,aAAU;aACzD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAW,OAAO;IAClB,sBAAoB,iBAAiB,KAAA;IACrC,aAAU;IACV,OAAO,gBAAgB,KAAA,IAAY,EAAE,OAAO,GAAG,WAAW,GAAG;GAC9D,CAAA;EACE,CAAA,CACF;;AAET,CAAC"}

package/dist/components/progress/progress.d.cts

@@ -9,6 +9,10 @@ interface ProgressProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
   indeterminate?: boolean;
   /** A visible, automatically associated accessible label. */
   label?: ReactNode;
+  valueLabel?: ReactNode;
+  locale?: Intl.LocalesArgument;
+  format?: Intl.NumberFormatOptions;
+  getAriaValueText?: (formattedValue: string, value: number) => string;
 }
 /**
  * A semantic progress bar. Provide `label` or `aria-label` so its purpose is

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

@@ -9,6 +9,10 @@ interface ProgressProps extends Omit<ComponentPropsWithoutRef<"div">, "children"
   indeterminate?: boolean;
   /** A visible, automatically associated accessible label. */
   label?: ReactNode;
+  valueLabel?: ReactNode;
+  locale?: Intl.LocalesArgument;
+  format?: Intl.NumberFormatOptions;
+  getAriaValueText?: (formattedValue: string, value: number) => string;
 }
 /**
  * A semantic progress bar. Provide `label` or `aria-label` so its purpose is

package/dist/components/progress/progress.js

@@ -11,11 +11,13 @@ function clamp(value, maximum) {
 * A semantic progress bar. Provide `label` or `aria-label` so its purpose is
 * announced to assistive technology.
 */
-const Progress = forwardRef(function Progress({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, className, indeterminate = false, label, max = 100, value = 0, ...props }, ref) {
+const Progress = forwardRef(function Progress({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, className, format, getAriaValueText, indeterminate = false, label, locale, max = 100, value = 0, valueLabel, ...props }, ref) {
 	const labelId = useId();
 	const maximum = Number.isFinite(max) && max > 0 ? max : 100;
 	const currentValue = clamp(value ?? 0, maximum);
 	const percentage = currentValue / maximum * 100;
+	const formattedValue = new Intl.NumberFormat(locale, format).format(currentValue);
+	const computedValueText = getAriaValueText?.(formattedValue, currentValue);
 	const hasVisibleLabel = label !== null && label !== void 0;
 	const labelledBy = ariaLabelledBy ?? (ariaLabel || !hasVisibleLabel ? void 0 : labelId);
 	const accessibleLabel = ariaLabel ?? (labelledBy ? void 0 : "Progress");
@@ -29,17 +31,27 @@ const Progress = forwardRef(function Progress({ "aria-label": ariaLabel, "aria-l
 		"aria-valuemax": maximum,
 		"aria-valuemin": 0,
 		"aria-valuenow": indeterminate ? void 0 : currentValue,
-		"aria-valuetext": ariaValueText,
+		"aria-valuetext": ariaValueText ?? computedValueText,
 		className: cx(styles.root, className),
 		"data-indeterminate": indeterminate || void 0,
 		"data-jaci-component": "progress",
 		"data-slot": "progress",
 		role: "progressbar",
-		children: [hasVisibleLabel ? /* @__PURE__ */ jsx("span", {
-			className: styles.label,
-			"data-slot": "progress-label",
-			id: labelId,
-			children: label
+		children: [hasVisibleLabel || valueLabel !== void 0 ? /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				minWidth: 0
+			},
+			children: [hasVisibleLabel ? /* @__PURE__ */ jsx("span", {
+				className: styles.label,
+				"data-slot": "progress-label",
+				id: labelId,
+				children: label
+			}) : null, valueLabel !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: styles.value,
+				"data-slot": "progress-value",
+				children: valueLabel
+			}) : null]
 		}) : null, /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
 			className: styles.track,

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

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/progress/progress.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { progress } from \"../../styled-system/recipes\";\n\nfunction clamp(value: number, maximum: number) {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), maximum);\n}\n\nexport interface ProgressProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The current amount. Omit it, or set `indeterminate`, when it is unknown. */\n  value?: number | null;\n  /** The value that represents completion. Defaults to 100. */\n  max?: number;\n  /** Omits `aria-valuenow` and renders an in-progress visual state. */\n  indeterminate?: boolean;\n  /** A visible, automatically associated accessible label. */\n  label?: ReactNode;\n}\n\n/**\n * A semantic progress bar. Provide `label` or `aria-label` so its purpose is\n * announced to assistive technology.\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    className,\n    indeterminate = false,\n    label,\n    max = 100,\n    value = 0,\n    ...props\n  },\n  ref,\n) {\n  const labelId = useId();\n  const maximum = Number.isFinite(max) && max > 0 ? max : 100;\n  const currentValue = clamp(value ?? 0, maximum);\n  const percentage = (currentValue / maximum) * 100;\n  const hasVisibleLabel = label !== null && label !== undefined;\n  const labelledBy = ariaLabelledBy ?? (ariaLabel || !hasVisibleLabel ? undefined : labelId);\n  const accessibleLabel = ariaLabel ?? (labelledBy ? undefined : \"Progress\");\n  const styles = progress({ indeterminate });\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      aria-busy={indeterminate || undefined}\n      aria-label={accessibleLabel}\n      aria-labelledby={labelledBy}\n      aria-valuemax={maximum}\n      aria-valuemin={0}\n      aria-valuenow={indeterminate ? undefined : currentValue}\n      aria-valuetext={ariaValueText}\n      className={cx(styles.root, className)}\n      data-indeterminate={indeterminate || undefined}\n      data-jaci-component=\"progress\"\n      data-slot=\"progress\"\n      role=\"progressbar\"\n    >\n      {hasVisibleLabel ? (\n        <span className={styles.label} data-slot=\"progress-label\" id={labelId}>\n          {label}\n        </span>\n      ) : null}\n      <div aria-hidden=\"true\" className={styles.track} data-slot=\"progress-track\">\n        <div\n          className={styles.indicator}\n          data-indeterminate={indeterminate || undefined}\n          data-slot=\"progress-indicator\"\n          style={indeterminate ? undefined : { width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n});\n"],"mappings":";;;;;AAMA,SAAS,MAAM,OAAe,SAAiB;CAC7C,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,OAAO;CAGT,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,OAAO;AAC7C;;;;;AAiBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EACE,cAAc,WACd,mBAAmB,gBACnB,kBAAkB,eAClB,WACA,gBAAgB,OAChB,OACA,MAAM,KACN,QAAQ,GACR,GAAG,SAEL,KACA;CACA,MAAM,UAAU,MAAM;CACtB,MAAM,UAAU,OAAO,SAAS,GAAG,KAAK,MAAM,IAAI,MAAM;CACxD,MAAM,eAAe,MAAM,SAAS,GAAG,OAAO;CAC9C,MAAM,aAAc,eAAe,UAAW;CAC9C,MAAM,kBAAkB,UAAU,QAAQ,UAAU,KAAA;CACpD,MAAM,aAAa,mBAAmB,aAAa,CAAC,kBAAkB,KAAA,IAAY;CAClF,MAAM,kBAAkB,cAAc,aAAa,KAAA,IAAY;CAC/D,MAAM,SAAS,SAAS,EAAE,cAAc,CAAC;CAEzC,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAW,iBAAiB,KAAA;EAC5B,cAAY;EACZ,mBAAiB;EACjB,iBAAe;EACf,iBAAe;EACf,iBAAe,gBAAgB,KAAA,IAAY;EAC3C,kBAAgB;EAChB,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,sBAAoB,iBAAiB,KAAA;EACrC,uBAAoB;EACpB,aAAU;EACV,MAAK;YAdP,CAgBG,kBACC,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,aAAU;GAAiB,IAAI;aAC3D;EACG,CAAA,IACJ,MACJ,oBAAC,OAAD;GAAK,eAAY;GAAO,WAAW,OAAO;GAAO,aAAU;aACzD,oBAAC,OAAD;IACE,WAAW,OAAO;IAClB,sBAAoB,iBAAiB,KAAA;IACrC,aAAU;IACV,OAAO,gBAAgB,KAAA,IAAY,EAAE,OAAO,GAAG,WAAW,GAAG;GAC9D,CAAA;EACE,CAAA,CACF;;AAET,CAAC"}
+{"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/progress/progress.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { progress } from \"../../styled-system/recipes\";\n\nfunction clamp(value: number, maximum: number) {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  return Math.min(Math.max(value, 0), maximum);\n}\n\nexport interface ProgressProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The current amount. Omit it, or set `indeterminate`, when it is unknown. */\n  value?: number | null;\n  /** The value that represents completion. Defaults to 100. */\n  max?: number;\n  /** Omits `aria-valuenow` and renders an in-progress visual state. */\n  indeterminate?: boolean;\n  /** A visible, automatically associated accessible label. */\n  label?: ReactNode;\n  valueLabel?: ReactNode;\n  locale?: Intl.LocalesArgument;\n  format?: Intl.NumberFormatOptions;\n  getAriaValueText?: (formattedValue: string, value: number) => string;\n}\n\n/**\n * A semantic progress bar. Provide `label` or `aria-label` so its purpose is\n * announced to assistive technology.\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    className,\n    format,\n    getAriaValueText,\n    indeterminate = false,\n    label,\n    locale,\n    max = 100,\n    value = 0,\n    valueLabel,\n    ...props\n  },\n  ref,\n) {\n  const labelId = useId();\n  const maximum = Number.isFinite(max) && max > 0 ? max : 100;\n  const currentValue = clamp(value ?? 0, maximum);\n  const percentage = (currentValue / maximum) * 100;\n  const formattedValue = new Intl.NumberFormat(locale, format).format(currentValue);\n  const computedValueText = getAriaValueText?.(formattedValue, currentValue);\n  const hasVisibleLabel = label !== null && label !== undefined;\n  const labelledBy = ariaLabelledBy ?? (ariaLabel || !hasVisibleLabel ? undefined : labelId);\n  const accessibleLabel = ariaLabel ?? (labelledBy ? undefined : \"Progress\");\n  const styles = progress({ indeterminate });\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      aria-busy={indeterminate || undefined}\n      aria-label={accessibleLabel}\n      aria-labelledby={labelledBy}\n      aria-valuemax={maximum}\n      aria-valuemin={0}\n      aria-valuenow={indeterminate ? undefined : currentValue}\n      aria-valuetext={ariaValueText ?? computedValueText}\n      className={cx(styles.root, className)}\n      data-indeterminate={indeterminate || undefined}\n      data-jaci-component=\"progress\"\n      data-slot=\"progress\"\n      role=\"progressbar\"\n    >\n      {hasVisibleLabel || valueLabel !== undefined ? (\n        <div style={{ display: \"flex\", minWidth: 0 }}>\n          {hasVisibleLabel ? (\n            <span className={styles.label} data-slot=\"progress-label\" id={labelId}>\n              {label}\n            </span>\n          ) : null}\n          {valueLabel !== undefined ? (\n            <span className={styles.value} data-slot=\"progress-value\">\n              {valueLabel}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      <div aria-hidden=\"true\" className={styles.track} data-slot=\"progress-track\">\n        <div\n          className={styles.indicator}\n          data-indeterminate={indeterminate || undefined}\n          data-slot=\"progress-indicator\"\n          style={indeterminate ? undefined : { width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n});\n"],"mappings":";;;;;AAMA,SAAS,MAAM,OAAe,SAAiB;CAC7C,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,OAAO;CAGT,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,OAAO;AAC7C;;;;;AAqBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EACE,cAAc,WACd,mBAAmB,gBACnB,kBAAkB,eAClB,WACA,QACA,kBACA,gBAAgB,OAChB,OACA,QACA,MAAM,KACN,QAAQ,GACR,YACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,MAAM;CACtB,MAAM,UAAU,OAAO,SAAS,GAAG,KAAK,MAAM,IAAI,MAAM;CACxD,MAAM,eAAe,MAAM,SAAS,GAAG,OAAO;CAC9C,MAAM,aAAc,eAAe,UAAW;CAC9C,MAAM,iBAAiB,IAAI,KAAK,aAAa,QAAQ,MAAM,CAAC,CAAC,OAAO,YAAY;CAChF,MAAM,oBAAoB,mBAAmB,gBAAgB,YAAY;CACzE,MAAM,kBAAkB,UAAU,QAAQ,UAAU,KAAA;CACpD,MAAM,aAAa,mBAAmB,aAAa,CAAC,kBAAkB,KAAA,IAAY;CAClF,MAAM,kBAAkB,cAAc,aAAa,KAAA,IAAY;CAC/D,MAAM,SAAS,SAAS,EAAE,cAAc,CAAC;CAEzC,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAW,iBAAiB,KAAA;EAC5B,cAAY;EACZ,mBAAiB;EACjB,iBAAe;EACf,iBAAe;EACf,iBAAe,gBAAgB,KAAA,IAAY;EAC3C,kBAAgB,iBAAiB;EACjC,WAAW,GAAG,OAAO,MAAM,SAAS;EACpC,sBAAoB,iBAAiB,KAAA;EACrC,uBAAoB;EACpB,aAAU;EACV,MAAK;YAdP,CAgBG,mBAAmB,eAAe,KAAA,IACjC,qBAAC,OAAD;GAAK,OAAO;IAAE,SAAS;IAAQ,UAAU;GAAE;aAA3C,CACG,kBACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,aAAU;IAAiB,IAAI;cAC3D;GACG,CAAA,IACJ,MACH,eAAe,KAAA,IACd,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAO,aAAU;cACtC;GACG,CAAA,IACJ,IACD;OACH,MACJ,oBAAC,OAAD;GAAK,eAAY;GAAO,WAAW,OAAO;GAAO,aAAU;aACzD,oBAAC,OAAD;IACE,WAAW,OAAO;IAClB,sBAAoB,iBAAiB,KAAA;IACrC,aAAU;IACV,OAAO,gBAAgB,KAAA,IAAY,EAAE,OAAO,GAAG,WAAW,GAAG;GAC9D,CAAA;EACE,CAAA,CACF;;AAET,CAAC"}

package/dist/components/quote/index.d.cts

@@ -0,0 +1,2 @@
+import { Quote, QuoteProps, QuoteSize, QuoteVariant } from "./quote.cjs";
+export { Quote, type QuoteProps, type QuoteSize, type QuoteVariant };

package/dist/components/quote/index.d.ts

@@ -0,0 +1,2 @@
+import { Quote, QuoteProps, QuoteSize, QuoteVariant } from "./quote.js";
+export { Quote, type QuoteProps, type QuoteSize, type QuoteVariant };

package/dist/components/quote/quote.cjs

@@ -0,0 +1,38 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_quote = require("../../styled-system/recipes/quote.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/quote/quote.tsx
+/** A semantic blockquote with optional author and source attribution. */
+const Quote = (0, react.forwardRef)(function Quote({ author, children, className, size = "md", source, variant = "default", ...props }, ref) {
+	const hasAttribution = author !== void 0 || source !== void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("blockquote", {
+		...props,
+		ref,
+		className: require_cx.cx(require_quote.quote({
+			size,
+			variant
+		}), className),
+		"data-jaci-component": "quote",
+		"data-size": size,
+		"data-slot": "quote",
+		"data-variant": variant,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "quote-content",
+			children
+		}), hasAttribution ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+			"data-slot": "quote-footer",
+			children: [author !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-slot": "quote-author",
+				children: author
+			}) : null, source !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("cite", {
+				"data-slot": "quote-source",
+				children: source
+			}) : null]
+		}) : null]
+	});
+});
+//#endregion
+exports.Quote = Quote;
+
+//# sourceMappingURL=quote.cjs.map

package/dist/components/quote/quote.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quote.cjs","names":["cx","quote"],"sources":["../../../src/components/quote/quote.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { quote } from \"../../styled-system/recipes\";\n\nexport type QuoteVariant = \"default\" | \"accent\" | \"subtle\";\nexport type QuoteSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface QuoteProps extends ComponentPropsWithoutRef<\"blockquote\"> {\n  /** Visual treatment for the quote surface and leading border. */\n  variant?: QuoteVariant;\n  /** Typography scale for the quoted content. */\n  size?: QuoteSize;\n  /** Optional author rendered in a semantic footer. */\n  author?: ReactNode;\n  /** Optional source rendered as a semantic `<cite>`. */\n  source?: ReactNode;\n}\n\n/** A semantic blockquote with optional author and source attribution. */\nexport const Quote = forwardRef<HTMLQuoteElement, QuoteProps>(function Quote(\n  { author, children, className, size = \"md\", source, variant = \"default\", ...props },\n  ref,\n) {\n  const hasAttribution = author !== undefined || source !== undefined;\n\n  return (\n    <blockquote\n      {...props}\n      ref={ref}\n      className={cx(quote({ size, variant }), className)}\n      data-jaci-component=\"quote\"\n      data-size={size}\n      data-slot=\"quote\"\n      data-variant={variant}\n    >\n      <div data-slot=\"quote-content\">{children}</div>\n      {hasAttribution ? (\n        <footer data-slot=\"quote-footer\">\n          {author !== undefined ? <span data-slot=\"quote-author\">{author}</span> : null}\n          {source !== undefined ? <cite data-slot=\"quote-source\">{source}</cite> : null}\n        </footer>\n      ) : null}\n    </blockquote>\n  );\n});\n"],"mappings":";;;;;;AAqBA,MAAa,SAAA,GAAA,MAAA,WAAA,CAAiD,SAAS,MACrE,EAAE,QAAQ,UAAU,WAAW,OAAO,MAAM,QAAQ,UAAU,WAAW,GAAG,SAC5E,KACA;CACA,MAAM,iBAAiB,WAAW,KAAA,KAAa,WAAW,KAAA;CAE1D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,cAAAA,MAAM;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EACjD,uBAAoB;EACpB,aAAW;EACX,aAAU;EACV,gBAAc;YAPhB,CASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,aAAU;GAAiB;EAAc,CAAA,GAC7C,iBACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;GAAQ,aAAU;aAAlB,CACG,WAAW,KAAA,IAAY,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,aAAU;cAAgB;GAAa,CAAA,IAAI,MACxE,WAAW,KAAA,IAAY,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,aAAU;cAAgB;GAAa,CAAA,IAAI,IACnE;OACN,IACM;;AAEhB,CAAC"}

package/dist/components/quote/quote.d.cts

@@ -0,0 +1,19 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/quote/quote.d.ts
+type QuoteVariant = "default" | "accent" | "subtle";
+type QuoteSize = "sm" | "md" | "lg";
+interface QuoteProps extends ComponentPropsWithoutRef<"blockquote"> {
+  /** Visual treatment for the quote surface and leading border. */
+  variant?: QuoteVariant;
+  /** Typography scale for the quoted content. */
+  size?: QuoteSize;
+  /** Optional author rendered in a semantic footer. */
+  author?: ReactNode;
+  /** Optional source rendered as a semantic `<cite>`. */
+  source?: ReactNode;
+}
+/** A semantic blockquote with optional author and source attribution. */
+declare const Quote: import("react").ForwardRefExoticComponent<QuoteProps & import("react").RefAttributes<HTMLQuoteElement>>;
+//#endregion
+export { Quote, QuoteProps, QuoteSize, QuoteVariant };
+//# sourceMappingURL=quote.d.cts.map

package/dist/components/quote/quote.d.ts

@@ -0,0 +1,19 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/quote/quote.d.ts
+type QuoteVariant = "default" | "accent" | "subtle";
+type QuoteSize = "sm" | "md" | "lg";
+interface QuoteProps extends ComponentPropsWithoutRef<"blockquote"> {
+  /** Visual treatment for the quote surface and leading border. */
+  variant?: QuoteVariant;
+  /** Typography scale for the quoted content. */
+  size?: QuoteSize;
+  /** Optional author rendered in a semantic footer. */
+  author?: ReactNode;
+  /** Optional source rendered as a semantic `<cite>`. */
+  source?: ReactNode;
+}
+/** A semantic blockquote with optional author and source attribution. */
+declare const Quote: import("react").ForwardRefExoticComponent<QuoteProps & import("react").RefAttributes<HTMLQuoteElement>>;
+//#endregion
+export { Quote, QuoteProps, QuoteSize, QuoteVariant };
+//# sourceMappingURL=quote.d.ts.map

package/dist/components/quote/quote.js

@@ -0,0 +1,38 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { quote } from "../../styled-system/recipes/quote.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/quote/quote.tsx
+/** A semantic blockquote with optional author and source attribution. */
+const Quote = forwardRef(function Quote({ author, children, className, size = "md", source, variant = "default", ...props }, ref) {
+	const hasAttribution = author !== void 0 || source !== void 0;
+	return /* @__PURE__ */ jsxs("blockquote", {
+		...props,
+		ref,
+		className: cx(quote({
+			size,
+			variant
+		}), className),
+		"data-jaci-component": "quote",
+		"data-size": size,
+		"data-slot": "quote",
+		"data-variant": variant,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "quote-content",
+			children
+		}), hasAttribution ? /* @__PURE__ */ jsxs("footer", {
+			"data-slot": "quote-footer",
+			children: [author !== void 0 ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "quote-author",
+				children: author
+			}) : null, source !== void 0 ? /* @__PURE__ */ jsx("cite", {
+				"data-slot": "quote-source",
+				children: source
+			}) : null]
+		}) : null]
+	});
+});
+//#endregion
+export { Quote };
+
+//# sourceMappingURL=quote.js.map

package/dist/components/quote/quote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quote.js","names":[],"sources":["../../../src/components/quote/quote.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { quote } from \"../../styled-system/recipes\";\n\nexport type QuoteVariant = \"default\" | \"accent\" | \"subtle\";\nexport type QuoteSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface QuoteProps extends ComponentPropsWithoutRef<\"blockquote\"> {\n  /** Visual treatment for the quote surface and leading border. */\n  variant?: QuoteVariant;\n  /** Typography scale for the quoted content. */\n  size?: QuoteSize;\n  /** Optional author rendered in a semantic footer. */\n  author?: ReactNode;\n  /** Optional source rendered as a semantic `<cite>`. */\n  source?: ReactNode;\n}\n\n/** A semantic blockquote with optional author and source attribution. */\nexport const Quote = forwardRef<HTMLQuoteElement, QuoteProps>(function Quote(\n  { author, children, className, size = \"md\", source, variant = \"default\", ...props },\n  ref,\n) {\n  const hasAttribution = author !== undefined || source !== undefined;\n\n  return (\n    <blockquote\n      {...props}\n      ref={ref}\n      className={cx(quote({ size, variant }), className)}\n      data-jaci-component=\"quote\"\n      data-size={size}\n      data-slot=\"quote\"\n      data-variant={variant}\n    >\n      <div data-slot=\"quote-content\">{children}</div>\n      {hasAttribution ? (\n        <footer data-slot=\"quote-footer\">\n          {author !== undefined ? <span data-slot=\"quote-author\">{author}</span> : null}\n          {source !== undefined ? <cite data-slot=\"quote-source\">{source}</cite> : null}\n        </footer>\n      ) : null}\n    </blockquote>\n  );\n});\n"],"mappings":";;;;;;AAqBA,MAAa,QAAQ,WAAyC,SAAS,MACrE,EAAE,QAAQ,UAAU,WAAW,OAAO,MAAM,QAAQ,UAAU,WAAW,GAAG,SAC5E,KACA;CACA,MAAM,iBAAiB,WAAW,KAAA,KAAa,WAAW,KAAA;CAE1D,OACE,qBAAC,cAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,MAAM;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EACjD,uBAAoB;EACpB,aAAW;EACX,aAAU;EACV,gBAAc;YAPhB,CASE,oBAAC,OAAD;GAAK,aAAU;GAAiB;EAAc,CAAA,GAC7C,iBACC,qBAAC,UAAD;GAAQ,aAAU;aAAlB,CACG,WAAW,KAAA,IAAY,oBAAC,QAAD;IAAM,aAAU;cAAgB;GAAa,CAAA,IAAI,MACxE,WAAW,KAAA,IAAY,oBAAC,QAAD;IAAM,aAAU;cAAgB;GAAa,CAAA,IAAI,IACnE;OACN,IACM;;AAEhB,CAAC"}

package/dist/components/stat/index.d.cts

@@ -0,0 +1,2 @@
+import { Stat, StatDescription, StatDescriptionProps, StatIcon, StatIconProps, StatLabel, StatLabelProps, StatRoot, StatRootProps, StatSize, StatTone, StatTrend, StatTrendDirection, StatTrendProps, StatValue, StatValueProps } from "./stat.cjs";
+export { Stat, StatDescription, type StatDescriptionProps, StatIcon, type StatIconProps, StatLabel, type StatLabelProps, StatRoot, type StatRootProps, type StatSize, type StatTone, StatTrend, type StatTrendDirection, type StatTrendProps, StatValue, type StatValueProps };

package/dist/components/stat/index.d.ts

@@ -0,0 +1,2 @@
+import { Stat, StatDescription, StatDescriptionProps, StatIcon, StatIconProps, StatLabel, StatLabelProps, StatRoot, StatRootProps, StatSize, StatTone, StatTrend, StatTrendDirection, StatTrendProps, StatValue, StatValueProps } from "./stat.js";
+export { Stat, StatDescription, type StatDescriptionProps, StatIcon, type StatIconProps, StatLabel, type StatLabelProps, StatRoot, type StatRootProps, type StatSize, type StatTone, StatTrend, type StatTrendDirection, type StatTrendProps, StatValue, type StatValueProps };