@puzzle-ui/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.js","names":[],"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,QAAQ,uBAAuB,QAAQ;CAC7C,MAAM,UAAU,GACd,4BACA,UAAU,KAAA,KAAa,0CACvB,SACF;CACA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,GAAI,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,oBAAC,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,oBAAC,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/linear-progress.cjs

@@ -0,0 +1,32 @@
+;/* empty css                      */
+const require_utils = require("./utils.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/data-display/progress/linear-progress.tsx
+const LinearProgress = ({ color, value: rawValue, showTrack = true, className, style, ...props }) => {
+	const value = require_utils.normalizeProgressValue(rawValue);
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-linear-progress-track", showTrack && "puzzle-linear-progress-show-track", className);
+	const indicatorClasses = (0, _puzzle_ui_core.cn)("puzzle-linear-progress", value === void 0 && "puzzle-linear-progress-indeterminate");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		...require_utils.getProgressAriaProps(value),
+		style: {
+			color: color ?? "var(--puzzle-color-primary)",
+			...style
+		},
+		className: classes,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-hidden": "true",
+			className: indicatorClasses,
+			style: {
+				backgroundColor: color ?? "var(--puzzle-color-primary)",
+				transform: value !== void 0 ? `scaleX(${value / 100})` : "scaleX(1)",
+				height: "100%",
+				transition: "transform 0.3s"
+			}
+		})
+	});
+};
+exports.LinearProgress = LinearProgress;
+
+//# sourceMappingURL=linear-progress.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress.cjs","names":["normalizeProgressValue","cn","getProgressAriaProps"],"sources":["../../../../src/components/data-display/progress/linear-progress.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport type { ProgressProps } from \"./types\";\nimport \"./linear-progress.css\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { getProgressAriaProps, normalizeProgressValue } from \"./utils\";\n\ntype LinearProgressProps = ProgressProps &\n  Omit<ComponentPropsWithRef<\"div\">, keyof ProgressProps>;\n\nconst LinearProgress = ({\n  color,\n  value: rawValue,\n  showTrack = true,\n  className,\n  style,\n  ...props\n}: LinearProgressProps) => {\n  const value = normalizeProgressValue(rawValue);\n  const classes = cn(\n    \"puzzle-linear-progress-track\",\n    showTrack && \"puzzle-linear-progress-show-track\",\n    className,\n  );\n\n  const indicatorClasses = cn(\n    \"puzzle-linear-progress\",\n    value === undefined && \"puzzle-linear-progress-indeterminate\",\n  );\n  return (\n    <div\n      {...props}\n      {...getProgressAriaProps(value)}\n      style={{ color: color ?? \"var(--puzzle-color-primary)\", ...style }}\n      className={classes}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={indicatorClasses}\n        style={{\n          backgroundColor: color ?? \"var(--puzzle-color-primary)\",\n          transform:\n            value !== undefined ? `scaleX(${value / 100})` : \"scaleX(1)\",\n          height: \"100%\",\n          transition: \"transform 0.3s\",\n        }}\n      />\n    </div>\n  );\n};\n\nexport { LinearProgress, type LinearProgressProps };\n"],"mappings":";;;;;AASA,MAAM,kBAAkB,EACtB,OACA,OAAO,UACP,YAAY,MACZ,WACA,OACA,GAAG,YACsB;CACzB,MAAM,QAAQA,cAAAA,uBAAuB,QAAQ;CAC7C,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CACd,gCACA,aAAa,qCACb,SACF;CAEA,MAAM,oBAAA,GAAmBA,gBAAAA,GAAAA,CACvB,0BACA,UAAU,KAAA,KAAa,sCACzB;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,GAAIC,cAAAA,qBAAqB,KAAK;EAC9B,OAAO;GAAE,OAAO,SAAS;GAA+B,GAAG;EAAM;EACjE,WAAW;EAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,eAAY;GACZ,WAAW;GACX,OAAO;IACL,iBAAiB,SAAS;IAC1B,WACE,UAAU,KAAA,IAAY,UAAU,QAAQ,IAAI,KAAK;IACnD,QAAQ;IACR,YAAY;GACd;EACD,CAAA;CACE,CAAA;AAET"}

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

@@ -0,0 +1,39 @@
+.puzzle-linear-progress {
+  transform-origin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.puzzle-linear-progress.puzzle-linear-progress-indeterminate {
+  transform-origin: center;
+  animation: 1s linear infinite puzzle-linear-progress;
+}
+
+.puzzle-linear-progress-track {
+  background-color: #0000;
+  width: 100%;
+  height: 4px;
+  position: relative;
+  overflow: hidden;
+}
+
+.puzzle-linear-progress-show-track {
+  background-color: color-mix(in srgb, currentColor, transparent 80%);
+}
+
+@keyframes puzzle-linear-progress {
+  0% {
+    transform-origin: 0;
+    transform: scaleX(0) translateX(-200%);
+  }
+
+  50% {
+    transform-origin: center;
+    transform: scaleX(.5) translateX(0);
+  }
+
+  100% {
+    transform-origin: 100%;
+    transform: scaleX(0) translateX(200%);
+  }
+}

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

@@ -0,0 +1,5 @@
+import { ProgressProps } from "./types.cjs";
+import { ComponentPropsWithRef } from "react";
+type LinearProgressProps = ProgressProps & Omit<ComponentPropsWithRef<"div">, keyof ProgressProps>;
+declare const LinearProgress: ({ color, value: rawValue, showTrack, className, style, ...props }: LinearProgressProps) => import("react").JSX.Element;
+export { LinearProgress, type LinearProgressProps };

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

@@ -0,0 +1,5 @@
+import { ProgressProps } from "./types.js";
+import { ComponentPropsWithRef } from "react";
+type LinearProgressProps = ProgressProps & Omit<ComponentPropsWithRef<"div">, keyof ProgressProps>;
+declare const LinearProgress: ({ color, value: rawValue, showTrack, className, style, ...props }: LinearProgressProps) => import("react").JSX.Element;
+export { LinearProgress, type LinearProgressProps };

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

@@ -0,0 +1,32 @@
+import "./linear-progress.css";
+import { getProgressAriaProps, normalizeProgressValue } from "./utils.js";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/data-display/progress/linear-progress.tsx
+const LinearProgress = ({ color, value: rawValue, showTrack = true, className, style, ...props }) => {
+	const value = normalizeProgressValue(rawValue);
+	const classes = cn("puzzle-linear-progress-track", showTrack && "puzzle-linear-progress-show-track", className);
+	const indicatorClasses = cn("puzzle-linear-progress", value === void 0 && "puzzle-linear-progress-indeterminate");
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		...getProgressAriaProps(value),
+		style: {
+			color: color ?? "var(--puzzle-color-primary)",
+			...style
+		},
+		className: classes,
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: indicatorClasses,
+			style: {
+				backgroundColor: color ?? "var(--puzzle-color-primary)",
+				transform: value !== void 0 ? `scaleX(${value / 100})` : "scaleX(1)",
+				height: "100%",
+				transition: "transform 0.3s"
+			}
+		})
+	});
+};
+export { LinearProgress };
+
+//# sourceMappingURL=linear-progress.js.map

package/dist/components/data-display/progress/linear-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress.js","names":[],"sources":["../../../../src/components/data-display/progress/linear-progress.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport type { ProgressProps } from \"./types\";\nimport \"./linear-progress.css\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { getProgressAriaProps, normalizeProgressValue } from \"./utils\";\n\ntype LinearProgressProps = ProgressProps &\n  Omit<ComponentPropsWithRef<\"div\">, keyof ProgressProps>;\n\nconst LinearProgress = ({\n  color,\n  value: rawValue,\n  showTrack = true,\n  className,\n  style,\n  ...props\n}: LinearProgressProps) => {\n  const value = normalizeProgressValue(rawValue);\n  const classes = cn(\n    \"puzzle-linear-progress-track\",\n    showTrack && \"puzzle-linear-progress-show-track\",\n    className,\n  );\n\n  const indicatorClasses = cn(\n    \"puzzle-linear-progress\",\n    value === undefined && \"puzzle-linear-progress-indeterminate\",\n  );\n  return (\n    <div\n      {...props}\n      {...getProgressAriaProps(value)}\n      style={{ color: color ?? \"var(--puzzle-color-primary)\", ...style }}\n      className={classes}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={indicatorClasses}\n        style={{\n          backgroundColor: color ?? \"var(--puzzle-color-primary)\",\n          transform:\n            value !== undefined ? `scaleX(${value / 100})` : \"scaleX(1)\",\n          height: \"100%\",\n          transition: \"transform 0.3s\",\n        }}\n      />\n    </div>\n  );\n};\n\nexport { LinearProgress, type LinearProgressProps };\n"],"mappings":";;;;;AASA,MAAM,kBAAkB,EACtB,OACA,OAAO,UACP,YAAY,MACZ,WACA,OACA,GAAG,YACsB;CACzB,MAAM,QAAQ,uBAAuB,QAAQ;CAC7C,MAAM,UAAU,GACd,gCACA,aAAa,qCACb,SACF;CAEA,MAAM,mBAAmB,GACvB,0BACA,UAAU,KAAA,KAAa,sCACzB;CACA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,GAAI,qBAAqB,KAAK;EAC9B,OAAO;GAAE,OAAO,SAAS;GAA+B,GAAG;EAAM;EACjE,WAAW;EAEX,UAAA,oBAAC,OAAD;GACE,eAAY;GACZ,WAAW;GACX,OAAO;IACL,iBAAiB,SAAS;IAC1B,WACE,UAAU,KAAA,IAAY,UAAU,QAAQ,IAAI,KAAK;IACnD,QAAQ;IACR,YAAY;GACd;EACD,CAAA;CACE,CAAA;AAET"}

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

@@ -0,0 +1,5 @@
+export type ProgressProps = {
+  color?: string;
+  value?: number;
+  showTrack?: boolean;
+};

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

@@ -0,0 +1,5 @@
+export type ProgressProps = {
+  color?: string;
+  value?: number;
+  showTrack?: boolean;
+};

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

@@ -0,0 +1,16 @@
+// src/components/data-display/progress/utils.ts
+const PROGRESS_MIN = 0;
+const PROGRESS_MAX = 100;
+/** Clamps a progress value to 0-100. Missing or non-finite values are indeterminate. */
+const normalizeProgressValue = (value) => value === void 0 || !Number.isFinite(value) ? void 0 : Math.min(PROGRESS_MAX, Math.max(PROGRESS_MIN, value));
+/** Shared progressbar semantics; aria-valuenow is omitted while indeterminate. */
+const getProgressAriaProps = (value) => ({
+	role: "progressbar",
+	"aria-valuemin": PROGRESS_MIN,
+	"aria-valuemax": PROGRESS_MAX,
+	"aria-valuenow": value
+});
+exports.getProgressAriaProps = getProgressAriaProps;
+exports.normalizeProgressValue = normalizeProgressValue;
+
+//# sourceMappingURL=utils.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","names":[],"sources":["../../../../src/components/data-display/progress/utils.ts"],"sourcesContent":["const PROGRESS_MIN = 0;\nconst PROGRESS_MAX = 100;\n\n/** Clamps a progress value to 0-100. Missing or non-finite values are indeterminate. */\nconst normalizeProgressValue = (value: number | undefined) =>\n  value === undefined || !Number.isFinite(value)\n    ? undefined\n    : Math.min(PROGRESS_MAX, Math.max(PROGRESS_MIN, value));\n\n/** Shared progressbar semantics; aria-valuenow is omitted while indeterminate. */\nconst getProgressAriaProps = (value: number | undefined) => ({\n  role: \"progressbar\" as const,\n  \"aria-valuemin\": PROGRESS_MIN,\n  \"aria-valuemax\": PROGRESS_MAX,\n  \"aria-valuenow\": value,\n});\n\nexport { normalizeProgressValue, getProgressAriaProps };\n"],"mappings":";AAAA,MAAM,eAAe;AACrB,MAAM,eAAe;;AAGrB,MAAM,0BAA0B,UAC9B,UAAU,KAAA,KAAa,CAAC,OAAO,SAAS,KAAK,IACzC,KAAA,IACA,KAAK,IAAI,cAAc,KAAK,IAAI,cAAc,KAAK,CAAC;;AAG1D,MAAM,wBAAwB,WAA+B;CAC3D,MAAM;CACN,iBAAiB;CACjB,iBAAiB;CACjB,iBAAiB;AACnB"}

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

@@ -0,0 +1,15 @@
+// src/components/data-display/progress/utils.ts
+const PROGRESS_MIN = 0;
+const PROGRESS_MAX = 100;
+/** Clamps a progress value to 0-100. Missing or non-finite values are indeterminate. */
+const normalizeProgressValue = (value) => value === void 0 || !Number.isFinite(value) ? void 0 : Math.min(PROGRESS_MAX, Math.max(PROGRESS_MIN, value));
+/** Shared progressbar semantics; aria-valuenow is omitted while indeterminate. */
+const getProgressAriaProps = (value) => ({
+	role: "progressbar",
+	"aria-valuemin": PROGRESS_MIN,
+	"aria-valuemax": PROGRESS_MAX,
+	"aria-valuenow": value
+});
+export { getProgressAriaProps, normalizeProgressValue };
+
+//# sourceMappingURL=utils.js.map

package/dist/components/data-display/progress/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/components/data-display/progress/utils.ts"],"sourcesContent":["const PROGRESS_MIN = 0;\nconst PROGRESS_MAX = 100;\n\n/** Clamps a progress value to 0-100. Missing or non-finite values are indeterminate. */\nconst normalizeProgressValue = (value: number | undefined) =>\n  value === undefined || !Number.isFinite(value)\n    ? undefined\n    : Math.min(PROGRESS_MAX, Math.max(PROGRESS_MIN, value));\n\n/** Shared progressbar semantics; aria-valuenow is omitted while indeterminate. */\nconst getProgressAriaProps = (value: number | undefined) => ({\n  role: \"progressbar\" as const,\n  \"aria-valuemin\": PROGRESS_MIN,\n  \"aria-valuemax\": PROGRESS_MAX,\n  \"aria-valuenow\": value,\n});\n\nexport { normalizeProgressValue, getProgressAriaProps };\n"],"mappings":";AAAA,MAAM,eAAe;AACrB,MAAM,eAAe;;AAGrB,MAAM,0BAA0B,UAC9B,UAAU,KAAA,KAAa,CAAC,OAAO,SAAS,KAAK,IACzC,KAAA,IACA,KAAK,IAAI,cAAc,KAAK,IAAI,cAAc,KAAK,CAAC;;AAG1D,MAAM,wBAAwB,WAA+B;CAC3D,MAAM;CACN,iBAAiB;CACjB,iBAAiB;CACjB,iBAAiB;AACnB"}

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

@@ -0,0 +1,18 @@
+;/* empty css               */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/data-display/skeleton/index.tsx
+const Skeleton = ({ width = "100%", height = "1rem", radius = "standard", className }) => {
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-skeleton", `puzzle-skeleton-${radius}`, className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: classes,
+		style: {
+			width,
+			height
+		}
+	});
+};
+exports.Skeleton = Skeleton;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../../src/components/data-display/skeleton/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { CSSProperties } from \"react\";\nimport \"./skeleton.css\";\n\ntype SkeletonRadius = \"standard\" | \"full\" | \"none\";\ntype SkeletonProps = {\n  width?: CSSProperties[\"width\"];\n  height?: CSSProperties[\"height\"];\n  radius?: SkeletonRadius;\n  className?: string;\n};\n\nconst Skeleton = ({\n  width = \"100%\",\n  height = \"1rem\",\n  radius = \"standard\",\n  className,\n}: SkeletonProps) => {\n  const classes = cn(\"puzzle-skeleton\", `puzzle-skeleton-${radius}`, className);\n\n  return (\n    <span aria-hidden=\"true\" className={classes} style={{ width, height }} />\n  );\n};\n\nexport { Skeleton, type SkeletonProps, type SkeletonRadius };\n"],"mappings":";;;;AAYA,MAAM,YAAY,EAChB,QAAQ,QACR,SAAS,QACT,SAAS,YACT,gBACmB;CACnB,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CAAG,mBAAmB,mBAAmB,UAAU,SAAS;CAE5E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,eAAY;EAAO,WAAW;EAAS,OAAO;GAAE;GAAO;EAAO;CAAI,CAAA;AAE5E"}

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from "react";
+type SkeletonRadius = "standard" | "full" | "none";
+type SkeletonProps = {
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+  radius?: SkeletonRadius;
+  className?: string;
+};
+declare const Skeleton: ({ width, height, radius, className }: SkeletonProps) => import("react").JSX.Element;
+export { Skeleton, type SkeletonProps, type SkeletonRadius };

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from "react";
+type SkeletonRadius = "standard" | "full" | "none";
+type SkeletonProps = {
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+  radius?: SkeletonRadius;
+  className?: string;
+};
+declare const Skeleton: ({ width, height, radius, className }: SkeletonProps) => import("react").JSX.Element;
+export { Skeleton, type SkeletonProps, type SkeletonRadius };

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

@@ -0,0 +1,18 @@
+import "./skeleton.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx } from "react/jsx-runtime";
+// src/components/data-display/skeleton/index.tsx
+const Skeleton = ({ width = "100%", height = "1rem", radius = "standard", className }) => {
+	const classes = cn("puzzle-skeleton", `puzzle-skeleton-${radius}`, className);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: classes,
+		style: {
+			width,
+			height
+		}
+	});
+};
+export { Skeleton };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/skeleton/index.tsx"],"sourcesContent":["import { cn } from \"@puzzle-ui/core\";\nimport type { CSSProperties } from \"react\";\nimport \"./skeleton.css\";\n\ntype SkeletonRadius = \"standard\" | \"full\" | \"none\";\ntype SkeletonProps = {\n  width?: CSSProperties[\"width\"];\n  height?: CSSProperties[\"height\"];\n  radius?: SkeletonRadius;\n  className?: string;\n};\n\nconst Skeleton = ({\n  width = \"100%\",\n  height = \"1rem\",\n  radius = \"standard\",\n  className,\n}: SkeletonProps) => {\n  const classes = cn(\"puzzle-skeleton\", `puzzle-skeleton-${radius}`, className);\n\n  return (\n    <span aria-hidden=\"true\" className={classes} style={{ width, height }} />\n  );\n};\n\nexport { Skeleton, type SkeletonProps, type SkeletonRadius };\n"],"mappings":";;;;AAYA,MAAM,YAAY,EAChB,QAAQ,QACR,SAAS,QACT,SAAS,YACT,gBACmB;CACnB,MAAM,UAAU,GAAG,mBAAmB,mBAAmB,UAAU,SAAS;CAE5E,OACE,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAW;EAAS,OAAO;GAAE;GAAO;EAAO;CAAI,CAAA;AAE5E"}

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

@@ -0,0 +1,47 @@
+.puzzle-skeleton {
+  background-color: color-mix(in srgb, var(--puzzle-color-border, #e5e0d6) 70%, transparent 30%);
+  isolation: isolate;
+  flex-shrink: 0;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.puzzle-skeleton:after {
+  content: "";
+  background: linear-gradient(90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--puzzle-color-surface-elevated, #fff) 30%, transparent 70%) 50%,
+        transparent 100%);
+  will-change: transform;
+  pointer-events: none;
+  animation: 1.5s ease-in-out infinite puzzle-skeleton-wave;
+  position: absolute;
+  inset: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+
+.puzzle-skeleton-none {
+  border-radius: 0;
+}
+
+.puzzle-skeleton-standard {
+  border-radius: var(--puzzle-radius-md, .5rem);
+}
+
+.puzzle-skeleton-full {
+  border-radius: var(--puzzle-radius-full, 9999px);
+}
+
+@keyframes puzzle-skeleton-wave {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-skeleton:after {
+    animation: none;
+    display: none;
+  }
+}