@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/data-display/image/index.js

@@ -0,0 +1,176 @@
+"use client";
+import { getImageBlurDataURL, getImageDimensions, getImageSourceUrl, hasImageSource, resolveImageRadius } from "./image.utils.js";
+import { useImageState } from "./use-image-state.js";
+import "./image.css";
+import { cn } from "@puzzle-ui/core";
+import { createElement, useCallback, useEffect, useRef } from "react";
+import { useThemeComponents } from "@puzzle-ui/theme/components-context";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { preload } from "react-dom";
+// src/components/data-display/image/index.tsx
+const Image = ({ src, alt, width, height, fit = "cover", position = "center", aspectRatio, fill = false, radius, fallbackSrc, fallback, loadingPlaceholder, placeholder = "empty", blurDataURL, sources, component, componentProps, quality, preload: preload$1 = false, unoptimized, className, style, containerClassName, containerStyle, loading, fetchPriority, decoding, srcSet, sizes, crossOrigin, referrerPolicy, ref, onLoad, onError, ...rest }) => {
+	const configuredImage = useThemeComponents()?.image;
+	const Component = component ?? configuredImage ?? "img";
+	const isNativeImage = Component === "img";
+	const { activeSource, usingFallback, status, markLoaded, markError } = useImageState(src, fallbackSrc);
+	const hasActiveSource = hasImageSource(activeSource);
+	const sourceUrl = getImageSourceUrl(activeSource);
+	const sourceDimensions = getImageDimensions(activeSource);
+	const resolvedWidth = width ?? sourceDimensions?.width;
+	const resolvedHeight = height ?? sourceDimensions?.height;
+	const resolvedBlurDataURL = blurDataURL ?? getImageBlurDataURL(activeSource);
+	const imageRef = useRef(null);
+	/**
+	* Assigns the image element to both the internal and external refs.
+	*/
+	const setImageRef = useCallback((node) => {
+		imageRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	/**
+	* Handles successful image loading.
+	*/
+	const handleLoad = useCallback((event) => {
+		markLoaded();
+		onLoad?.(event);
+	}, [markLoaded, onLoad]);
+	/**
+	* Handles image loading failures.
+	*/
+	const handleError = useCallback((event) => {
+		markError();
+		onError?.(event);
+	}, [markError, onError]);
+	/**
+	* Handles images that were loaded before React attached its listeners.
+	*
+	* This is particularly useful for cached images during hydration.
+	*/
+	useEffect(() => {
+		const image = imageRef.current;
+		if (!image || !image.complete) return;
+		if (image.naturalWidth > 0) markLoaded();
+	}, [activeSource, markLoaded]);
+	/**
+	* Preloads native images using React DOM.
+	*
+	* Framework image components handle their own preload behavior.
+	*/
+	if (preload$1 && isNativeImage && sourceUrl) preload(sourceUrl, {
+		as: "image",
+		crossOrigin,
+		fetchPriority: fetchPriority ?? "high",
+		imageSrcSet: srcSet,
+		imageSizes: sizes,
+		referrerPolicy
+	});
+	const mediaStyle = {
+		...fill || aspectRatio ? {
+			width: "100%",
+			height: "100%"
+		} : {},
+		...fill ? {
+			position: "absolute",
+			inset: 0
+		} : {},
+		objectFit: fit,
+		objectPosition: position,
+		...style
+	};
+	const wrapperStyle = {
+		...aspectRatio ? {
+			aspectRatio,
+			width: "100%"
+		} : {},
+		...fill ? {
+			position: "relative",
+			display: "block",
+			width: "100%",
+			...aspectRatio ? {} : { height: "100%" }
+		} : {},
+		...radius ? { borderRadius: resolveImageRadius(radius) } : {},
+		...containerStyle
+	};
+	const isLoading = hasActiveSource && status === "loading";
+	const shouldShowFallback = fallback !== void 0 && (!hasActiveSource || status === "error");
+	if (!hasActiveSource && !shouldShowFallback) return null;
+	const renderedSource = isNativeImage ? sourceUrl : activeSource;
+	/**
+	* Framework-specific props are only forwarded to custom components.
+	* This prevents invalid attributes from leaking onto native img tags.
+	*/
+	const imageElement = createElement(Component, {
+		...!isNativeImage ? componentProps : {},
+		...rest,
+		key: usingFallback ? "fallback" : "source",
+		ref: setImageRef,
+		src: renderedSource,
+		alt,
+		width: resolvedWidth,
+		height: resolvedHeight,
+		loading,
+		fetchPriority,
+		decoding,
+		crossOrigin,
+		referrerPolicy,
+		srcSet,
+		sizes,
+		className: cn("puzzle-image__media", className),
+		style: mediaStyle,
+		onLoad: handleLoad,
+		onError: handleError,
+		...fill && !isNativeImage ? { fill: true } : {},
+		...preload$1 && !isNativeImage ? { preload: true } : {},
+		...quality !== void 0 && !isNativeImage ? { quality } : {},
+		...unoptimized !== void 0 && !isNativeImage ? { unoptimized } : {},
+		...!isNativeImage && placeholder === "blur" && resolvedBlurDataURL ? {
+			placeholder: "blur",
+			blurDataURL: resolvedBlurDataURL
+		} : {}
+	});
+	/**
+	* Picture sources allow art direction and responsive source selection.
+	*/
+	const media = sources?.length ? /* @__PURE__ */ jsxs("picture", {
+		className: "puzzle-image__picture",
+		children: [sources.map((source, index) => /* @__PURE__ */ jsx("source", {
+			srcSet: source.srcSet,
+			media: source.media,
+			type: source.type,
+			sizes: source.sizes
+		}, `${source.srcSet}-${index}`)), imageElement]
+	}) : imageElement;
+	const showLoadingPlaceholder = isLoading && loadingPlaceholder !== void 0;
+	const showBlurPlaceholder = isLoading && !loadingPlaceholder && isNativeImage && placeholder === "blur" && Boolean(resolvedBlurDataURL);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("puzzle-image", containerClassName),
+		style: wrapperStyle,
+		"data-status": hasActiveSource ? status : "empty",
+		"data-image-fill": fill ? "true" : void 0,
+		"data-image-ratio": aspectRatio ? "true" : void 0,
+		children: [
+			showBlurPlaceholder ? /* @__PURE__ */ jsx("img", {
+				className: "puzzle-image__blur",
+				src: resolvedBlurDataURL,
+				alt: "",
+				"aria-hidden": "true"
+			}) : null,
+			showLoadingPlaceholder ? /* @__PURE__ */ jsx("div", {
+				className: "puzzle-image__placeholder",
+				"aria-hidden": "true",
+				children: loadingPlaceholder
+			}) : null,
+			shouldShowFallback ? /* @__PURE__ */ jsx("div", {
+				className: "puzzle-image__fallback",
+				role: alt ? "img" : void 0,
+				"aria-label": alt || void 0,
+				"aria-hidden": alt ? void 0 : true,
+				children: fallback
+			}) : media
+		]
+	});
+};
+export { Image };
+
+//# sourceMappingURL=index.js.map

package/dist/components/data-display/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["preload"],"sources":["../../../../src/components/data-display/image/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createElement,\n  useCallback,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type ElementType,\n  type RefCallback,\n} from \"react\";\n\nimport { preload as preloadImage } from \"react-dom\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { useThemeComponents } from \"@puzzle-ui/theme/components-context\";\n\nimport type { ImageProps } from \"./image.types\";\n\nimport {\n  getImageBlurDataURL,\n  getImageDimensions,\n  getImageSourceUrl,\n  hasImageSource,\n  resolveImageRadius,\n} from \"./image.utils\";\n\nimport { useImageState } from \"./use-image-state\";\n\nimport \"./image.css\";\n\nconst Image = ({\n  src,\n  alt,\n  width,\n  height,\n  fit = \"cover\",\n  position = \"center\",\n  aspectRatio,\n  fill = false,\n  radius,\n  fallbackSrc,\n  fallback,\n  loadingPlaceholder,\n  placeholder = \"empty\",\n  blurDataURL,\n  sources,\n  component,\n  componentProps,\n  quality,\n  preload = false,\n  unoptimized,\n  className,\n  style,\n  containerClassName,\n  containerStyle,\n  loading,\n  fetchPriority,\n  decoding,\n  srcSet,\n  sizes,\n  crossOrigin,\n  referrerPolicy,\n  ref,\n  onLoad,\n  onError,\n  ...rest\n}: ImageProps) => {\n  const configuredImage = useThemeComponents()?.image;\n\n  const Component: ElementType = component ?? configuredImage ?? \"img\";\n\n  const isNativeImage = Component === \"img\";\n\n  const { activeSource, usingFallback, status, markLoaded, markError } =\n    useImageState(src, fallbackSrc);\n\n  const hasActiveSource = hasImageSource(activeSource);\n\n  const sourceUrl = getImageSourceUrl(activeSource);\n\n  const sourceDimensions = getImageDimensions(activeSource);\n\n  const resolvedWidth = width ?? sourceDimensions?.width;\n  const resolvedHeight = height ?? sourceDimensions?.height;\n\n  const resolvedBlurDataURL = blurDataURL ?? getImageBlurDataURL(activeSource);\n\n  const imageRef = useRef<HTMLImageElement | null>(null);\n\n  /**\n   * Assigns the image element to both the internal and external refs.\n   */\n  const setImageRef = useCallback<RefCallback<HTMLImageElement>>(\n    (node) => {\n      imageRef.current = node;\n\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  /**\n   * Handles successful image loading.\n   */\n  const handleLoad: NonNullable<ImageProps[\"onLoad\"]> = useCallback(\n    (event) => {\n      markLoaded();\n      onLoad?.(event);\n    },\n    [markLoaded, onLoad],\n  );\n\n  /**\n   * Handles image loading failures.\n   */\n  const handleError: NonNullable<ImageProps[\"onError\"]> = useCallback(\n    (event) => {\n      markError();\n      onError?.(event);\n    },\n    [markError, onError],\n  );\n\n  /**\n   * Handles images that were loaded before React attached its listeners.\n   *\n   * This is particularly useful for cached images during hydration.\n   */\n  useEffect(() => {\n    const image = imageRef.current;\n\n    if (!image || !image.complete) {\n      return;\n    }\n\n    if (image.naturalWidth > 0) {\n      markLoaded();\n    }\n  }, [activeSource, markLoaded]);\n\n  /**\n   * Preloads native images using React DOM.\n   *\n   * Framework image components handle their own preload behavior.\n   */\n  if (preload && isNativeImage && sourceUrl) {\n    preloadImage(sourceUrl, {\n      as: \"image\",\n      crossOrigin,\n      fetchPriority: fetchPriority ?? \"high\",\n      imageSrcSet: srcSet,\n      imageSizes: sizes,\n      referrerPolicy,\n    });\n  }\n\n  const mediaStyle: CSSProperties = {\n    ...(fill || aspectRatio\n      ? {\n          width: \"100%\",\n          height: \"100%\",\n        }\n      : {}),\n    ...(fill\n      ? {\n          position: \"absolute\",\n          inset: 0,\n        }\n      : {}),\n    objectFit: fit,\n    objectPosition: position,\n    ...style,\n  };\n\n  const wrapperStyle: CSSProperties = {\n    ...(aspectRatio\n      ? {\n          aspectRatio,\n          width: \"100%\",\n        }\n      : {}),\n    ...(fill\n      ? {\n          position: \"relative\",\n          display: \"block\",\n          width: \"100%\",\n          ...(aspectRatio ? {} : { height: \"100%\" }),\n        }\n      : {}),\n    ...(radius\n      ? {\n          borderRadius: resolveImageRadius(radius),\n        }\n      : {}),\n    ...containerStyle,\n  };\n\n  const isLoading = hasActiveSource && status === \"loading\";\n\n  const shouldShowFallback =\n    fallback !== undefined && (!hasActiveSource || status === \"error\");\n\n  if (!hasActiveSource && !shouldShowFallback) {\n    return null;\n  }\n\n  const renderedSource = isNativeImage ? sourceUrl : activeSource;\n\n  /**\n   * Framework-specific props are only forwarded to custom components.\n   * This prevents invalid attributes from leaking onto native img tags.\n   */\n  const imageElement = createElement(Component, {\n    ...(!isNativeImage ? componentProps : {}),\n    ...rest,\n    key: usingFallback ? \"fallback\" : \"source\",\n    ref: setImageRef,\n    src: renderedSource,\n    alt,\n    width: resolvedWidth,\n    height: resolvedHeight,\n    loading,\n    fetchPriority,\n    decoding,\n    crossOrigin,\n    referrerPolicy,\n    srcSet,\n    sizes,\n    className: cn(\"puzzle-image__media\", className),\n    style: mediaStyle,\n    onLoad: handleLoad,\n    onError: handleError,\n    ...(fill && !isNativeImage ? { fill: true } : {}),\n    ...(preload && !isNativeImage ? { preload: true } : {}),\n    ...(quality !== undefined && !isNativeImage ? { quality } : {}),\n    ...(unoptimized !== undefined && !isNativeImage ? { unoptimized } : {}),\n    ...(!isNativeImage && placeholder === \"blur\" && resolvedBlurDataURL\n      ? {\n          placeholder: \"blur\",\n          blurDataURL: resolvedBlurDataURL,\n        }\n      : {}),\n  } as never);\n\n  /**\n   * Picture sources allow art direction and responsive source selection.\n   */\n  const media = sources?.length ? (\n    <picture className=\"puzzle-image__picture\">\n      {sources.map((source, index) => (\n        <source\n          key={`${source.srcSet}-${index}`}\n          srcSet={source.srcSet}\n          media={source.media}\n          type={source.type}\n          sizes={source.sizes}\n        />\n      ))}\n      {imageElement}\n    </picture>\n  ) : (\n    imageElement\n  );\n\n  const showLoadingPlaceholder = isLoading && loadingPlaceholder !== undefined;\n\n  const showBlurPlaceholder =\n    isLoading &&\n    !loadingPlaceholder &&\n    isNativeImage &&\n    placeholder === \"blur\" &&\n    Boolean(resolvedBlurDataURL);\n\n  return (\n    <div\n      className={cn(\"puzzle-image\", containerClassName)}\n      style={wrapperStyle}\n      data-status={hasActiveSource ? status : \"empty\"}\n      data-image-fill={fill ? \"true\" : undefined}\n      data-image-ratio={aspectRatio ? \"true\" : undefined}\n    >\n      {showBlurPlaceholder ? (\n        <img\n          className=\"puzzle-image__blur\"\n          src={resolvedBlurDataURL}\n          alt=\"\"\n          aria-hidden=\"true\"\n        />\n      ) : null}\n\n      {showLoadingPlaceholder ? (\n        <div className=\"puzzle-image__placeholder\" aria-hidden=\"true\">\n          {loadingPlaceholder}\n        </div>\n      ) : null}\n\n      {shouldShowFallback ? (\n        <div\n          className=\"puzzle-image__fallback\"\n          role={alt ? \"img\" : undefined}\n          aria-label={alt || undefined}\n          aria-hidden={alt ? undefined : true}\n        >\n          {fallback}\n        </div>\n      ) : (\n        media\n      )}\n    </div>\n  );\n};\n\nexport { Image, type ImageProps };\n\nexport type {\n  ImageSource,\n  ImageSourceData,\n  ImageSourceSet,\n  ImageFit,\n  ImageRadius,\n  ImagePlaceholder,\n} from \"./image.types\";\n"],"mappings":"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"}

package/dist/components/data-display/image/use-image-state.cjs

@@ -0,0 +1,54 @@
+const require_image_utils = require("./image.utils.cjs");
+let react = require("react");
+// src/components/data-display/image/use-image-state.ts
+const createImageState = (source, fallbackSource) => {
+	return {
+		source,
+		fallbackSource,
+		usingFallback: !require_image_utils.hasImageSource(source) && require_image_utils.hasImageSource(fallbackSource),
+		status: "loading"
+	};
+};
+const useImageState = (source, fallbackSource) => {
+	const [state, setState] = (0, react.useState)(() => createImageState(source, fallbackSource));
+	const isCurrentSource = Object.is(state.source, source) && Object.is(state.fallbackSource, fallbackSource);
+	const usingFallback = isCurrentSource ? state.usingFallback : !require_image_utils.hasImageSource(source) && require_image_utils.hasImageSource(fallbackSource);
+	const status = isCurrentSource ? state.status : "loading";
+	return {
+		activeSource: usingFallback ? fallbackSource : source,
+		usingFallback,
+		status,
+		markLoaded: (0, react.useCallback)(() => {
+			setState({
+				source,
+				fallbackSource,
+				usingFallback,
+				status: "loaded"
+			});
+		}, [
+			source,
+			fallbackSource,
+			usingFallback
+		]),
+		markError: (0, react.useCallback)(() => {
+			setState((current) => {
+				const currentUsesFallback = Object.is(current.source, source) && Object.is(current.fallbackSource, fallbackSource) ? current.usingFallback : !require_image_utils.hasImageSource(source) && require_image_utils.hasImageSource(fallbackSource);
+				if (!currentUsesFallback && require_image_utils.hasImageSource(fallbackSource)) return {
+					source,
+					fallbackSource,
+					usingFallback: true,
+					status: "loading"
+				};
+				return {
+					source,
+					fallbackSource,
+					usingFallback: currentUsesFallback,
+					status: "error"
+				};
+			});
+		}, [source, fallbackSource])
+	};
+};
+exports.useImageState = useImageState;
+
+//# sourceMappingURL=use-image-state.cjs.map

package/dist/components/data-display/image/use-image-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-state.cjs","names":["hasImageSource","useState","useCallback"],"sources":["../../../../src/components/data-display/image/use-image-state.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport type { ImageSource } from \"./image.types\";\nimport { hasImageSource } from \"./image.utils\";\n\ntype ImageStatus = \"loading\" | \"loaded\" | \"error\";\n\ntype ImageState = {\n  source: ImageSource | null | undefined;\n  fallbackSource: ImageSource | null | undefined;\n  usingFallback: boolean;\n  status: ImageStatus;\n};\n\nconst createImageState = (\n  source: ImageSource | null | undefined,\n  fallbackSource: ImageSource | null | undefined,\n): ImageState => {\n  const usingFallback =\n    !hasImageSource(source) && hasImageSource(fallbackSource);\n\n  return {\n    source,\n    fallbackSource,\n    usingFallback,\n    status: \"loading\",\n  };\n};\n\nconst useImageState = (\n  source: ImageSource | null | undefined,\n  fallbackSource: ImageSource | null | undefined,\n) => {\n  const [state, setState] = useState<ImageState>(() =>\n    createImageState(source, fallbackSource),\n  );\n\n  const isCurrentSource =\n    Object.is(state.source, source) &&\n    Object.is(state.fallbackSource, fallbackSource);\n\n  const usingFallback = isCurrentSource\n    ? state.usingFallback\n    : !hasImageSource(source) && hasImageSource(fallbackSource);\n\n  const status: ImageStatus = isCurrentSource ? state.status : \"loading\";\n\n  const activeSource = usingFallback ? fallbackSource : source;\n\n  /**\n   * Marks the currently rendered source as successfully loaded.\n   */\n  const markLoaded = useCallback(() => {\n    setState({\n      source,\n      fallbackSource,\n      usingFallback,\n      status: \"loaded\",\n    });\n  }, [source, fallbackSource, usingFallback]);\n\n  /**\n   * Switches to the fallback source or marks the image as failed.\n   */\n  const markError = useCallback(() => {\n    setState((current) => {\n      const currentIsValid =\n        Object.is(current.source, source) &&\n        Object.is(current.fallbackSource, fallbackSource);\n\n      const currentUsesFallback = currentIsValid\n        ? current.usingFallback\n        : !hasImageSource(source) && hasImageSource(fallbackSource);\n\n      if (!currentUsesFallback && hasImageSource(fallbackSource)) {\n        return {\n          source,\n          fallbackSource,\n          usingFallback: true,\n          status: \"loading\",\n        };\n      }\n\n      return {\n        source,\n        fallbackSource,\n        usingFallback: currentUsesFallback,\n        status: \"error\",\n      };\n    });\n  }, [source, fallbackSource]);\n\n  return {\n    activeSource,\n    usingFallback,\n    status,\n    markLoaded,\n    markError,\n  };\n};\n\nexport { useImageState };\nexport type { ImageStatus };\n"],"mappings":";;;AAcA,MAAM,oBACJ,QACA,mBACe;CAIf,OAAO;EACL;EACA;EACA,eALA,CAACA,oBAAAA,eAAe,MAAM,KAAKA,oBAAAA,eAAe,cAAc;EAMxD,QAAQ;CACV;AACF;AAEA,MAAM,iBACJ,QACA,mBACG;CACH,MAAM,CAAC,OAAO,aAAA,GAAYC,MAAAA,SAAAA,OACxB,iBAAiB,QAAQ,cAAc,CACzC;CAEA,MAAM,kBACJ,OAAO,GAAG,MAAM,QAAQ,MAAM,KAC9B,OAAO,GAAG,MAAM,gBAAgB,cAAc;CAEhD,MAAM,gBAAgB,kBAClB,MAAM,gBACN,CAACD,oBAAAA,eAAe,MAAM,KAAKA,oBAAAA,eAAe,cAAc;CAE5D,MAAM,SAAsB,kBAAkB,MAAM,SAAS;CA+C7D,OAAO;EACL,cA9CmB,gBAAgB,iBAAiB;EA+CpD;EACA;EACA,aAAA,GA5CiBE,MAAAA,YAAAA,OAAkB;GACnC,SAAS;IACP;IACA;IACA;IACA,QAAQ;GACV,CAAC;EACH,GAAG;GAAC;GAAQ;GAAgB;EAAa,CAqC9B;EACT,YAAA,GAjCgBA,MAAAA,YAAAA,OAAkB;GAClC,UAAU,YAAY;IAKpB,MAAM,sBAHJ,OAAO,GAAG,QAAQ,QAAQ,MAAM,KAChC,OAAO,GAAG,QAAQ,gBAAgB,cAAc,IAG9C,QAAQ,gBACR,CAACF,oBAAAA,eAAe,MAAM,KAAKA,oBAAAA,eAAe,cAAc;IAE5D,IAAI,CAAC,uBAAuBA,oBAAAA,eAAe,cAAc,GACvD,OAAO;KACL;KACA;KACA,eAAe;KACf,QAAQ;IACV;IAGF,OAAO;KACL;KACA;KACA,eAAe;KACf,QAAQ;IACV;GACF,CAAC;EACH,GAAG,CAAC,QAAQ,cAAc,CAOhB;CACV;AACF"}

package/dist/components/data-display/image/use-image-state.js

@@ -0,0 +1,54 @@
+import { hasImageSource } from "./image.utils.js";
+import { useCallback, useState } from "react";
+// src/components/data-display/image/use-image-state.ts
+const createImageState = (source, fallbackSource) => {
+	return {
+		source,
+		fallbackSource,
+		usingFallback: !hasImageSource(source) && hasImageSource(fallbackSource),
+		status: "loading"
+	};
+};
+const useImageState = (source, fallbackSource) => {
+	const [state, setState] = useState(() => createImageState(source, fallbackSource));
+	const isCurrentSource = Object.is(state.source, source) && Object.is(state.fallbackSource, fallbackSource);
+	const usingFallback = isCurrentSource ? state.usingFallback : !hasImageSource(source) && hasImageSource(fallbackSource);
+	const status = isCurrentSource ? state.status : "loading";
+	return {
+		activeSource: usingFallback ? fallbackSource : source,
+		usingFallback,
+		status,
+		markLoaded: useCallback(() => {
+			setState({
+				source,
+				fallbackSource,
+				usingFallback,
+				status: "loaded"
+			});
+		}, [
+			source,
+			fallbackSource,
+			usingFallback
+		]),
+		markError: useCallback(() => {
+			setState((current) => {
+				const currentUsesFallback = Object.is(current.source, source) && Object.is(current.fallbackSource, fallbackSource) ? current.usingFallback : !hasImageSource(source) && hasImageSource(fallbackSource);
+				if (!currentUsesFallback && hasImageSource(fallbackSource)) return {
+					source,
+					fallbackSource,
+					usingFallback: true,
+					status: "loading"
+				};
+				return {
+					source,
+					fallbackSource,
+					usingFallback: currentUsesFallback,
+					status: "error"
+				};
+			});
+		}, [source, fallbackSource])
+	};
+};
+export { useImageState };
+
+//# sourceMappingURL=use-image-state.js.map

package/dist/components/data-display/image/use-image-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-state.js","names":[],"sources":["../../../../src/components/data-display/image/use-image-state.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport type { ImageSource } from \"./image.types\";\nimport { hasImageSource } from \"./image.utils\";\n\ntype ImageStatus = \"loading\" | \"loaded\" | \"error\";\n\ntype ImageState = {\n  source: ImageSource | null | undefined;\n  fallbackSource: ImageSource | null | undefined;\n  usingFallback: boolean;\n  status: ImageStatus;\n};\n\nconst createImageState = (\n  source: ImageSource | null | undefined,\n  fallbackSource: ImageSource | null | undefined,\n): ImageState => {\n  const usingFallback =\n    !hasImageSource(source) && hasImageSource(fallbackSource);\n\n  return {\n    source,\n    fallbackSource,\n    usingFallback,\n    status: \"loading\",\n  };\n};\n\nconst useImageState = (\n  source: ImageSource | null | undefined,\n  fallbackSource: ImageSource | null | undefined,\n) => {\n  const [state, setState] = useState<ImageState>(() =>\n    createImageState(source, fallbackSource),\n  );\n\n  const isCurrentSource =\n    Object.is(state.source, source) &&\n    Object.is(state.fallbackSource, fallbackSource);\n\n  const usingFallback = isCurrentSource\n    ? state.usingFallback\n    : !hasImageSource(source) && hasImageSource(fallbackSource);\n\n  const status: ImageStatus = isCurrentSource ? state.status : \"loading\";\n\n  const activeSource = usingFallback ? fallbackSource : source;\n\n  /**\n   * Marks the currently rendered source as successfully loaded.\n   */\n  const markLoaded = useCallback(() => {\n    setState({\n      source,\n      fallbackSource,\n      usingFallback,\n      status: \"loaded\",\n    });\n  }, [source, fallbackSource, usingFallback]);\n\n  /**\n   * Switches to the fallback source or marks the image as failed.\n   */\n  const markError = useCallback(() => {\n    setState((current) => {\n      const currentIsValid =\n        Object.is(current.source, source) &&\n        Object.is(current.fallbackSource, fallbackSource);\n\n      const currentUsesFallback = currentIsValid\n        ? current.usingFallback\n        : !hasImageSource(source) && hasImageSource(fallbackSource);\n\n      if (!currentUsesFallback && hasImageSource(fallbackSource)) {\n        return {\n          source,\n          fallbackSource,\n          usingFallback: true,\n          status: \"loading\",\n        };\n      }\n\n      return {\n        source,\n        fallbackSource,\n        usingFallback: currentUsesFallback,\n        status: \"error\",\n      };\n    });\n  }, [source, fallbackSource]);\n\n  return {\n    activeSource,\n    usingFallback,\n    status,\n    markLoaded,\n    markError,\n  };\n};\n\nexport { useImageState };\nexport type { ImageStatus };\n"],"mappings":";;;AAcA,MAAM,oBACJ,QACA,mBACe;CAIf,OAAO;EACL;EACA;EACA,eALA,CAAC,eAAe,MAAM,KAAK,eAAe,cAAc;EAMxD,QAAQ;CACV;AACF;AAEA,MAAM,iBACJ,QACA,mBACG;CACH,MAAM,CAAC,OAAO,YAAY,eACxB,iBAAiB,QAAQ,cAAc,CACzC;CAEA,MAAM,kBACJ,OAAO,GAAG,MAAM,QAAQ,MAAM,KAC9B,OAAO,GAAG,MAAM,gBAAgB,cAAc;CAEhD,MAAM,gBAAgB,kBAClB,MAAM,gBACN,CAAC,eAAe,MAAM,KAAK,eAAe,cAAc;CAE5D,MAAM,SAAsB,kBAAkB,MAAM,SAAS;CA+C7D,OAAO;EACL,cA9CmB,gBAAgB,iBAAiB;EA+CpD;EACA;EACA,YA5CiB,kBAAkB;GACnC,SAAS;IACP;IACA;IACA;IACA,QAAQ;GACV,CAAC;EACH,GAAG;GAAC;GAAQ;GAAgB;EAAa,CAqC9B;EACT,WAjCgB,kBAAkB;GAClC,UAAU,YAAY;IAKpB,MAAM,sBAHJ,OAAO,GAAG,QAAQ,QAAQ,MAAM,KAChC,OAAO,GAAG,QAAQ,gBAAgB,cAAc,IAG9C,QAAQ,gBACR,CAAC,eAAe,MAAM,KAAK,eAAe,cAAc;IAE5D,IAAI,CAAC,uBAAuB,eAAe,cAAc,GACvD,OAAO;KACL;KACA;KACA,eAAe;KACf,QAAQ;IACV;IAGF,OAAO;KACL;KACA;KACA,eAAe;KACf,QAAQ;IACV;GACF,CAAC;EACH,GAAG,CAAC,QAAQ,cAAc,CAOhB;CACV;AACF"}

package/dist/components/data-display/paper/index.cjs

@@ -0,0 +1,16 @@
+;/* empty css            */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/data-display/paper/index.tsx
+const Paper = ({ as, elevation = 1, children, className, ...rest }) => {
+	const Component = as || "div";
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-paper", `elevation-${elevation}`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: classes,
+		...rest,
+		children
+	});
+};
+exports.Paper = Paper;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/data-display/paper/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../../src/components/data-display/paper/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport \"./paper.css\";\n\ntype PaperOwnProps<C extends ElementType> = {\n  as?: C;\n  elevation?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24;\n};\n\ntype PaperProps<C extends ElementType> = PaperOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof PaperOwnProps<C>>;\n\nconst Paper = <C extends ElementType = \"div\">({\n  as,\n  elevation = 1,\n  children,\n  className,\n  ...rest\n}: PaperProps<C>) => {\n  const Component = as || \"div\";\n  const classes = cn(\"puzzle-paper\", `elevation-${elevation}`, className);\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n};\n\nexport { Paper, type PaperProps };\n"],"mappings":";;;;AAYA,MAAM,SAAwC,EAC5C,IACA,YAAY,GACZ,UACA,WACA,GAAG,WACgB;CACnB,MAAM,YAAY,MAAM;CACxB,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CAAG,gBAAgB,aAAa,aAAa,SAAS;CACtE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}

package/dist/components/data-display/paper/index.d.cts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type PaperOwnProps<C extends ElementType> = {
+  as?: C;
+  elevation?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24;
+};
+type PaperProps<C extends ElementType> = PaperOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof PaperOwnProps<C>>;
+declare const Paper: <C extends ElementType = "div">({ as, elevation, children, className, ...rest }: PaperProps<C>) => import("react").JSX.Element;
+export { Paper, type PaperProps };

package/dist/components/data-display/paper/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+type PaperOwnProps<C extends ElementType> = {
+  as?: C;
+  elevation?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24;
+};
+type PaperProps<C extends ElementType> = PaperOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof PaperOwnProps<C>>;
+declare const Paper: <C extends ElementType = "div">({ as, elevation, children, className, ...rest }: PaperProps<C>) => import("react").JSX.Element;
+export { Paper, type PaperProps };

package/dist/components/data-display/paper/index.js

@@ -0,0 +1,16 @@
+import "./paper.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/data-display/paper/index.tsx
+const Paper = ({ as, elevation = 1, children, className, ...rest }) => {
+	const Component = as || "div";
+	const classes = cn("puzzle-paper", `elevation-${elevation}`, className);
+	return /* @__PURE__ */ jsx(Component, {
+		className: classes,
+		...rest,
+		children
+	});
+};
+export { Paper };
+
+//# sourceMappingURL=index.js.map

package/dist/components/data-display/paper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/paper/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport \"./paper.css\";\n\ntype PaperOwnProps<C extends ElementType> = {\n  as?: C;\n  elevation?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24;\n};\n\ntype PaperProps<C extends ElementType> = PaperOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof PaperOwnProps<C>>;\n\nconst Paper = <C extends ElementType = \"div\">({\n  as,\n  elevation = 1,\n  children,\n  className,\n  ...rest\n}: PaperProps<C>) => {\n  const Component = as || \"div\";\n  const classes = cn(\"puzzle-paper\", `elevation-${elevation}`, className);\n  return (\n    <Component className={classes} {...rest}>\n      {children}\n    </Component>\n  );\n};\n\nexport { Paper, type PaperProps };\n"],"mappings":";;;;AAYA,MAAM,SAAwC,EAC5C,IACA,YAAY,GACZ,UACA,WACA,GAAG,WACgB;CACnB,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,GAAG,gBAAgB,aAAa,aAAa,SAAS;CACtE,OACE,oBAAC,WAAD;EAAW,WAAW;EAAS,GAAI;EAChC;CACQ,CAAA;AAEf"}

package/dist/components/data-display/paper/paper.css

@@ -0,0 +1,40 @@
+.puzzle-paper {
+  background: var(--puzzle-color-surface, #fff);
+  border-radius: var(--puzzle-radius-md, .5rem);
+}
+
+.puzzle-paper.elevation-1 {
+  box-shadow: var(--puzzle-elevation-1);
+}
+
+.puzzle-paper.elevation-2 {
+  box-shadow: var(--puzzle-elevation-2);
+}
+
+.puzzle-paper.elevation-3 {
+  box-shadow: var(--puzzle-elevation-3);
+}
+
+.puzzle-paper.elevation-4 {
+  box-shadow: var(--puzzle-elevation-4);
+}
+
+.puzzle-paper.elevation-6 {
+  box-shadow: var(--puzzle-elevation-6);
+}
+
+.puzzle-paper.elevation-8 {
+  box-shadow: var(--puzzle-elevation-8);
+}
+
+.puzzle-paper.elevation-12 {
+  box-shadow: var(--puzzle-elevation-12);
+}
+
+.puzzle-paper.elevation-16 {
+  box-shadow: var(--puzzle-elevation-16);
+}
+
+.puzzle-paper.elevation-24 {
+  box-shadow: var(--puzzle-elevation-24);
+}

package/dist/components/data-display/progress/circular-progress.cjs

@@ -0,0 +1,75 @@
+;/* empty css                        */
+const require_utils = require("./utils.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/data-display/progress/circular-progress.tsx
+const getDimension = (size) => {
+	switch (size) {
+		case "sm": return 24 + 2 * getStrokeWidth(size);
+		case "md": return 44 + 2 * getStrokeWidth(size);
+		case "lg": return 64 + 2 * getStrokeWidth(size);
+	}
+};
+const getHalfDimension = (size) => {
+	return .5 * getDimension(size) - getStrokeWidth(size);
+};
+const getStrokeWidth = (size) => {
+	switch (size) {
+		case "sm": return 2;
+		case "md": return 3.6;
+		case "lg": return 4;
+	}
+};
+const getCenter = (size) => {
+	switch (size) {
+		case "sm": return 12 + getStrokeWidth(size);
+		case "md": return 22 + getStrokeWidth(size);
+		case "lg": return 32 + getStrokeWidth(size);
+	}
+};
+const getStrokeDasharray = (size) => {
+	switch (size) {
+		case "sm": return 84;
+		case "md": return 128;
+		case "lg": return 192;
+	}
+};
+const CircularProgress = ({ color, className, "aria-label": ariaLabel = "Loading...", value: rawValue, size = "md", showTrack = true, ...props }) => {
+	const value = require_utils.normalizeProgressValue(rawValue);
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-circular-progress", value === void 0 && "puzzle-circular-progress-indeterminate", className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		...props,
+		...require_utils.getProgressAriaProps(value),
+		className: classes,
+		"aria-label": ariaLabel,
+		color: color ?? "var(--puzzle-color-primary)",
+		width: getDimension(size),
+		height: getDimension(size),
+		viewBox: `0 0 ${getDimension(size)} ${getDimension(size)}`,
+		children: [showTrack && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			className: "puzzle-circular-progress-track",
+			cx: getCenter(size),
+			cy: getCenter(size),
+			r: getHalfDimension(size),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: getStrokeWidth(size),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			className: "puzzle-circular-progress-circle",
+			cx: getCenter(size),
+			cy: getCenter(size),
+			r: getHalfDimension(size),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: getStrokeWidth(size),
+			strokeLinecap: "round",
+			strokeDasharray: getStrokeDasharray(size),
+			style: { strokeDashoffset: value !== void 0 ? `${getStrokeDasharray(size) - value / 100 * getStrokeDasharray(size)}px` : "32px" }
+		})]
+	});
+};
+exports.CircularProgress = CircularProgress;
+
+//# sourceMappingURL=circular-progress.cjs.map

package/dist/components/data-display/progress/circular-progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.cjs","names":["normalizeProgressValue","cn","getProgressAriaProps"],"sources":["../../../../src/components/data-display/progress/circular-progress.tsx"],"sourcesContent":["import { type ComponentPropsWithRef } from \"react\";\nimport \"./circular-progress.css\";\nimport { cn } from \"@puzzle-ui/core\";\nimport type { ProgressProps } from \"./types\";\nimport { getProgressAriaProps, normalizeProgressValue } from \"./utils\";\n\ntype CircularProgressSize = \"sm\" | \"md\" | \"lg\";\n\ntype CircularProgressOwnProps = ProgressProps & {\n  size?: CircularProgressSize;\n};\n\ntype CircularProgressProps = CircularProgressOwnProps &\n  Omit<ComponentPropsWithRef<\"svg\">, keyof CircularProgressOwnProps>;\n\nconst getDimension = (size: CircularProgressSize) => {\n  switch (size) {\n    case \"sm\":\n      return 24 + 2 * getStrokeWidth(size);\n    case \"md\":\n      return 44 + 2 * getStrokeWidth(size);\n    case \"lg\":\n      return 64 + 2 * getStrokeWidth(size);\n  }\n};\n\nconst getHalfDimension = (size: CircularProgressSize) => {\n  return 0.5 * getDimension(size) - getStrokeWidth(size);\n};\n\nconst getStrokeWidth = (size: CircularProgressSize) => {\n  switch (size) {\n    case \"sm\":\n      return 2;\n    case \"md\":\n      return 3.6;\n    case \"lg\":\n      return 4;\n  }\n};\n\nconst getCenter = (size: CircularProgressSize) => {\n  switch (size) {\n    case \"sm\":\n      return 12 + getStrokeWidth(size);\n    case \"md\":\n      return 22 + getStrokeWidth(size);\n    case \"lg\":\n      return 32 + getStrokeWidth(size);\n  }\n};\n\nconst getStrokeDasharray = (size: CircularProgressSize) => {\n  switch (size) {\n    case \"sm\":\n      return 84;\n    case \"md\":\n      return 128;\n    case \"lg\":\n      return 192;\n  }\n};\n\nconst CircularProgress = ({\n  color,\n  className,\n  \"aria-label\": ariaLabel = \"Loading...\",\n  value: rawValue,\n  size = \"md\",\n  showTrack = true,\n  ...props\n}: CircularProgressProps) => {\n  const value = normalizeProgressValue(rawValue);\n  const classes = cn(\n    \"puzzle-circular-progress\",\n    value === undefined && \"puzzle-circular-progress-indeterminate\",\n    className,\n  );\n  return (\n    <svg\n      {...props}\n      {...getProgressAriaProps(value)}\n      className={classes}\n      aria-label={ariaLabel}\n      color={color ?? \"var(--puzzle-color-primary)\"}\n      width={getDimension(size)}\n      height={getDimension(size)}\n      viewBox={`0 0 ${getDimension(size)} ${getDimension(size)}`}\n    >\n      {showTrack && (\n        <circle\n          className=\"puzzle-circular-progress-track\"\n          cx={getCenter(size)}\n          cy={getCenter(size)}\n          r={getHalfDimension(size)}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={getStrokeWidth(size)}\n          aria-hidden=\"true\"\n        />\n      )}\n      <circle\n        className=\"puzzle-circular-progress-circle\"\n        cx={getCenter(size)}\n        cy={getCenter(size)}\n        r={getHalfDimension(size)}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={getStrokeWidth(size)}\n        strokeLinecap=\"round\"\n        strokeDasharray={getStrokeDasharray(size)}\n        style={{\n          strokeDashoffset:\n            value !== undefined\n              ? `${getStrokeDasharray(size) - (value / 100) * getStrokeDasharray(size)}px`\n              : \"32px\",\n        }}\n      />\n    </svg>\n  );\n};\n\nexport {\n  CircularProgress,\n  type CircularProgressProps,\n  type CircularProgressSize,\n};\n"],"mappings":";;;;;;AAeA,MAAM,gBAAgB,SAA+B;CACnD,QAAQ,MAAR;EACE,KAAK,MACH,OAAO,KAAK,IAAI,eAAe,IAAI;EACrC,KAAK,MACH,OAAO,KAAK,IAAI,eAAe,IAAI;EACrC,KAAK,MACH,OAAO,KAAK,IAAI,eAAe,IAAI;CACvC;AACF;AAEA,MAAM,oBAAoB,SAA+B;CACvD,OAAO,KAAM,aAAa,IAAI,IAAI,eAAe,IAAI;AACvD;AAEA,MAAM,kBAAkB,SAA+B;CACrD,QAAQ,MAAR;EACE,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;CACX;AACF;AAEA,MAAM,aAAa,SAA+B;CAChD,QAAQ,MAAR;EACE,KAAK,MACH,OAAO,KAAK,eAAe,IAAI;EACjC,KAAK,MACH,OAAO,KAAK,eAAe,IAAI;EACjC,KAAK,MACH,OAAO,KAAK,eAAe,IAAI;CACnC;AACF;AAEA,MAAM,sBAAsB,SAA+B;CACzD,QAAQ,MAAR;EACE,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;CACX;AACF;AAEA,MAAM,oBAAoB,EACxB,OACA,WACA,cAAc,YAAY,cAC1B,OAAO,UACP,OAAO,MACP,YAAY,MACZ,GAAG,YACwB;CAC3B,MAAM,QAAQA,cAAAA,uBAAuB,QAAQ;CAC7C,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CACd,4BACA,UAAU,KAAA,KAAa,0CACvB,SACF;CACA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI;EACJ,GAAIC,cAAAA,qBAAqB,KAAK;EAC9B,WAAW;EACX,cAAY;EACZ,OAAO,SAAS;EAChB,OAAO,aAAa,IAAI;EACxB,QAAQ,aAAa,IAAI;EACzB,SAAS,OAAO,aAAa,IAAI,EAAE,GAAG,aAAa,IAAI;EARzD,UAAA,CAUG,aACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,WAAU;GACV,IAAI,UAAU,IAAI;GAClB,IAAI,UAAU,IAAI;GAClB,GAAG,iBAAiB,IAAI;GACxB,MAAK;GACL,QAAO;GACP,aAAa,eAAe,IAAI;GAChC,eAAY;EACb,CAAA,GAEH,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,WAAU;GACV,IAAI,UAAU,IAAI;GAClB,IAAI,UAAU,IAAI;GAClB,GAAG,iBAAiB,IAAI;GACxB,MAAK;GACL,QAAO;GACP,aAAa,eAAe,IAAI;GAChC,eAAc;GACd,iBAAiB,mBAAmB,IAAI;GACxC,OAAO,EACL,kBACE,UAAU,KAAA,IACN,GAAG,mBAAmB,IAAI,IAAK,QAAQ,MAAO,mBAAmB,IAAI,EAAE,MACvE,OACR;EACD,CAAA,CACE;;AAET"}

package/dist/components/data-display/progress/circular-progress.css

@@ -0,0 +1,21 @@
+.puzzle-circular-progress {
+  transform: rotate(-90deg);
+}
+
+.puzzle-circular-progress-indeterminate {
+  animation: 1s cubic-bezier(.5, 0, .5, 1) infinite puzzle-circular-progress-rotate;
+}
+
+.puzzle-circular-progress-track {
+  stroke: color-mix(in srgb, currentColor, transparent 80%);
+}
+
+@keyframes puzzle-circular-progress-rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/components/data-display/progress/circular-progress.d.cts

@@ -0,0 +1,9 @@
+import { ProgressProps } from "./types.cjs";
+import { ComponentPropsWithRef } from "react";
+type CircularProgressSize = "sm" | "md" | "lg";
+type CircularProgressOwnProps = ProgressProps & {
+  size?: CircularProgressSize;
+};
+type CircularProgressProps = CircularProgressOwnProps & Omit<ComponentPropsWithRef<"svg">, keyof CircularProgressOwnProps>;
+declare const CircularProgress: ({ color, className, "aria-label": ariaLabel, value: rawValue, size, showTrack, ...props }: CircularProgressProps) => import("react").JSX.Element;
+export { CircularProgress, type CircularProgressProps, type CircularProgressSize };

package/dist/components/data-display/progress/circular-progress.d.ts

@@ -0,0 +1,9 @@
+import { ProgressProps } from "./types.js";
+import { ComponentPropsWithRef } from "react";
+type CircularProgressSize = "sm" | "md" | "lg";
+type CircularProgressOwnProps = ProgressProps & {
+  size?: CircularProgressSize;
+};
+type CircularProgressProps = CircularProgressOwnProps & Omit<ComponentPropsWithRef<"svg">, keyof CircularProgressOwnProps>;
+declare const CircularProgress: ({ color, className, "aria-label": ariaLabel, value: rawValue, size, showTrack, ...props }: CircularProgressProps) => import("react").JSX.Element;
+export { CircularProgress, type CircularProgressProps, type CircularProgressSize };

package/dist/components/data-display/progress/circular-progress.js

@@ -0,0 +1,75 @@
+import "./circular-progress.css";
+import { getProgressAriaProps, normalizeProgressValue } from "./utils.js";
+import { cn } from "@puzzle-ui/core";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/data-display/progress/circular-progress.tsx
+const getDimension = (size) => {
+	switch (size) {
+		case "sm": return 24 + 2 * getStrokeWidth(size);
+		case "md": return 44 + 2 * getStrokeWidth(size);
+		case "lg": return 64 + 2 * getStrokeWidth(size);
+	}
+};
+const getHalfDimension = (size) => {
+	return .5 * getDimension(size) - getStrokeWidth(size);
+};
+const getStrokeWidth = (size) => {
+	switch (size) {
+		case "sm": return 2;
+		case "md": return 3.6;
+		case "lg": return 4;
+	}
+};
+const getCenter = (size) => {
+	switch (size) {
+		case "sm": return 12 + getStrokeWidth(size);
+		case "md": return 22 + getStrokeWidth(size);
+		case "lg": return 32 + getStrokeWidth(size);
+	}
+};
+const getStrokeDasharray = (size) => {
+	switch (size) {
+		case "sm": return 84;
+		case "md": return 128;
+		case "lg": return 192;
+	}
+};
+const CircularProgress = ({ color, className, "aria-label": ariaLabel = "Loading...", value: rawValue, size = "md", showTrack = true, ...props }) => {
+	const value = normalizeProgressValue(rawValue);
+	const classes = cn("puzzle-circular-progress", value === void 0 && "puzzle-circular-progress-indeterminate", className);
+	return /* @__PURE__ */ jsxs("svg", {
+		...props,
+		...getProgressAriaProps(value),
+		className: classes,
+		"aria-label": ariaLabel,
+		color: color ?? "var(--puzzle-color-primary)",
+		width: getDimension(size),
+		height: getDimension(size),
+		viewBox: `0 0 ${getDimension(size)} ${getDimension(size)}`,
+		children: [showTrack && /* @__PURE__ */ jsx("circle", {
+			className: "puzzle-circular-progress-track",
+			cx: getCenter(size),
+			cy: getCenter(size),
+			r: getHalfDimension(size),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: getStrokeWidth(size),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("circle", {
+			className: "puzzle-circular-progress-circle",
+			cx: getCenter(size),
+			cy: getCenter(size),
+			r: getHalfDimension(size),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: getStrokeWidth(size),
+			strokeLinecap: "round",
+			strokeDasharray: getStrokeDasharray(size),
+			style: { strokeDashoffset: value !== void 0 ? `${getStrokeDasharray(size) - value / 100 * getStrokeDasharray(size)}px` : "32px" }
+		})]
+	});
+};
+export { CircularProgress };
+
+//# sourceMappingURL=circular-progress.js.map