erp-pro-ui 0.1.2 → 0.1.4

package/dist/chunks/skeleton-BNea1Rcp.cjs

@@ -0,0 +1,422 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/data-display/skeleton/Skeleton.tsx
+var animationStyles = {
+	pulse: "ui-skeleton-pulse",
+	wave: "ui-skeleton-wave",
+	none: ""
+};
+var radiusStyles = {
+	none: "rounded-none",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	xl: "rounded-xl",
+	full: "rounded-full"
+};
+var variantStyles = {
+	text: "sm",
+	circular: "full",
+	rectangular: "none",
+	rounded: "md"
+};
+var speedStyles = {
+	slow: "2.4s",
+	normal: "1.6s",
+	fast: "1.05s"
+};
+var toneStyles = {
+	default: {
+		base: "var(--color-muted)",
+		highlight: "color-mix(in oklch, var(--color-muted) 54%, var(--color-background))"
+	},
+	subtle: {
+		base: "color-mix(in oklch, var(--color-muted) 72%, var(--color-background))",
+		highlight: "color-mix(in oklch, var(--color-muted) 42%, var(--color-background))"
+	},
+	accent: {
+		base: "var(--color-accent-subtle)",
+		highlight: "color-mix(in oklch, var(--color-accent-subtle) 48%, var(--color-background))"
+	},
+	success: {
+		base: "var(--color-success-subtle)",
+		highlight: "color-mix(in oklch, var(--color-success-subtle) 48%, var(--color-background))"
+	},
+	warning: {
+		base: "var(--color-warning-subtle)",
+		highlight: "color-mix(in oklch, var(--color-warning-subtle) 48%, var(--color-background))"
+	},
+	danger: {
+		base: "var(--color-danger-subtle)",
+		highlight: "color-mix(in oklch, var(--color-danger-subtle) 48%, var(--color-background))"
+	},
+	info: {
+		base: "var(--color-info-subtle)",
+		highlight: "color-mix(in oklch, var(--color-info-subtle) 48%, var(--color-background))"
+	}
+};
+function resolveDimension(value) {
+	if (typeof value === "number") return `${value}px`;
+	return value;
+}
+function resolveDuration(value) {
+	if (typeof value === "number") return `${value}ms`;
+	if (typeof value === "string" && value in speedStyles) return speedStyles[value];
+	return value ?? speedStyles.normal;
+}
+function getDimensionStyle({ variant, width, height, borderRadius }) {
+	const nextStyle = {};
+	const resolvedWidth = resolveDimension(width);
+	const resolvedHeight = resolveDimension(height);
+	const resolvedBorderRadius = resolveDimension(borderRadius);
+	if (resolvedWidth) nextStyle.width = resolvedWidth;
+	else if (variant === "text") nextStyle.width = "100%";
+	if (resolvedHeight) nextStyle.height = resolvedHeight;
+	else if (variant === "text") nextStyle.height = "1em";
+	else if (variant === "circular") {
+		nextStyle.width = nextStyle.width || "40px";
+		nextStyle.height = nextStyle.width;
+	}
+	if (resolvedBorderRadius) nextStyle.borderRadius = resolvedBorderRadius;
+	return nextStyle;
+}
+var Skeleton = (0, react.forwardRef)(({ variant = "text", animation = "pulse", width, height, borderRadius, radius, tone = "default", speed = "normal", className, lines = 1, lineGap = 8, lastLineWidth = "80%", style, ["aria-hidden"]: ariaHidden, ...rest }, ref) => {
+	const toneStyle = toneStyles[tone];
+	const sharedStyle = {
+		"--ui-skeleton-base": toneStyle.base,
+		"--ui-skeleton-highlight": toneStyle.highlight,
+		"--ui-skeleton-duration": resolveDuration(speed),
+		...style
+	};
+	const sharedClassName = require_utils.mergeClassNames("relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0", radiusStyles[radius ?? variantStyles[variant]], animationStyles[animation]);
+	if (variant === "text" && lines > 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_utils.mergeClassNames("flex flex-col", className),
+		style: {
+			...style,
+			gap: resolveDimension(lineGap),
+			width: resolveDimension(width) ?? style?.width
+		},
+		"aria-hidden": ariaHidden ?? true,
+		"data-animation": animation,
+		"data-tone": tone,
+		...rest,
+		children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: sharedClassName,
+			style: {
+				...sharedStyle,
+				...getDimensionStyle({
+					variant,
+					width: index === lines - 1 ? lastLineWidth : width ?? "100%",
+					height,
+					borderRadius
+				})
+			}
+		}, index))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_utils.mergeClassNames(sharedClassName, className),
+		style: {
+			...sharedStyle,
+			...getDimensionStyle({
+				variant,
+				width,
+				height,
+				borderRadius
+			})
+		},
+		"aria-hidden": ariaHidden ?? true,
+		"data-animation": animation,
+		"data-tone": tone,
+		...rest
+	});
+});
+Skeleton.displayName = "Skeleton";
+var SkeletonText = (0, react.forwardRef)(({ lines = 3, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+		ref,
+		variant: "text",
+		lines,
+		...props
+	});
+});
+SkeletonText.displayName = "SkeletonText";
+var SkeletonAvatar = (0, react.forwardRef)(({ size = 40, animation = "pulse", className = "", ...props }, ref) => {
+	const sizeValue = typeof size === "number" ? `${size}px` : size;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+		ref,
+		variant: "circular",
+		width: sizeValue,
+		height: sizeValue,
+		animation,
+		className,
+		...props
+	});
+});
+SkeletonAvatar.displayName = "SkeletonAvatar";
+var SkeletonButton = (0, react.forwardRef)(({ size = "md", animation = "pulse", className = "", ...props }, ref) => {
+	const sizeStyles = {
+		sm: {
+			width: 80,
+			height: 32
+		},
+		md: {
+			width: 100,
+			height: 40
+		},
+		lg: {
+			width: 120,
+			height: 48
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+		ref,
+		variant: "rounded",
+		width: sizeStyles[size].width,
+		height: sizeStyles[size].height,
+		animation,
+		className,
+		...props
+	});
+});
+SkeletonButton.displayName = "SkeletonButton";
+var SkeletonImage = (0, react.forwardRef)(({ width = "100%", height = 200, animation = "pulse", className = "", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+		ref,
+		variant: "rounded",
+		width,
+		height,
+		animation,
+		className,
+		...props
+	});
+});
+SkeletonImage.displayName = "SkeletonImage";
+var SkeletonCard = (0, react.forwardRef)(({ showImage = true, imageHeight = 200, lines = 3, showAvatar = false, showActions = false, className, animation = "pulse", tone = "default" }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: require_utils.mergeClassNames("overflow-hidden rounded-md border border-border bg-card shadow-sm", className),
+		children: [showImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonImage, {
+			height: imageHeight,
+			animation,
+			borderRadius: 0,
+			tone
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "p-4 flex flex-col gap-4",
+			children: [
+				showAvatar && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonAvatar, {
+						size: 40,
+						animation,
+						tone
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+							variant: "text",
+							width: "60%",
+							height: 14,
+							animation,
+							tone
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+							variant: "text",
+							width: "40%",
+							height: 12,
+							animation,
+							tone,
+							className: "mt-2"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonText, {
+					lines,
+					animation,
+					height: 14,
+					lineGap: 10,
+					tone
+				}),
+				showActions && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex gap-3 mt-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonButton, {
+						size: "sm",
+						animation,
+						tone
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonButton, {
+						size: "sm",
+						animation,
+						tone
+					})]
+				})
+			]
+		})]
+	});
+});
+SkeletonCard.displayName = "SkeletonCard";
+var SkeletonMetricCard = (0, react.forwardRef)(({ showTrend = true, showChart = true, chartBars = 7, valueWidth = "52%", className, animation = "wave", tone = "accent" }, ref) => {
+	const chartHeights = [
+		36,
+		52,
+		46,
+		72,
+		64,
+		84,
+		68,
+		78
+	];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: require_utils.mergeClassNames("rounded-md border border-border bg-card p-4 shadow-sm", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start justify-between gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1 space-y-3",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+						width: "34%",
+						height: 11,
+						animation,
+						tone: "subtle"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+						width: valueWidth,
+						height: 28,
+						animation,
+						tone,
+						radius: "md"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+						width: "44%",
+						height: 12,
+						animation,
+						tone: "subtle"
+					})
+				]
+			}), showTrend ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rounded-full border border-border bg-surface px-3 py-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+					width: 54,
+					height: 12,
+					animation,
+					tone: "subtle"
+				})
+			}) : null]
+		}), showChart ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mt-5 flex h-20 items-end gap-2",
+			children: Array.from({ length: chartBars }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+				variant: "rounded",
+				width: "100%",
+				height: `${chartHeights[index % chartHeights.length]}%`,
+				animation,
+				tone,
+				className: "flex-1"
+			}, index))
+		}) : null]
+	});
+});
+SkeletonMetricCard.displayName = "SkeletonMetricCard";
+var SkeletonTableRow = (0, react.forwardRef)(({ columns = 4, animation = "pulse", className = "" }, ref) => {
+	const sharedWidth = columns <= 1 ? "100%" : `${Math.floor(72 / (columns - 1))}%`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: `flex items-center gap-4 py-3 ${className}`,
+		children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+			variant: "text",
+			width: index === 0 ? "28%" : sharedWidth,
+			height: 16,
+			animation
+		}, index))
+	});
+});
+SkeletonTableRow.displayName = "SkeletonTableRow";
+var SkeletonListItem = (0, react.forwardRef)(({ showAvatar = true, showSecondaryText = true, showAction = false, animation = "pulse", className = "" }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: `flex items-center gap-3 py-3 ${className}`,
+		children: [
+			showAvatar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonAvatar, {
+				size: 48,
+				animation
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+					variant: "text",
+					width: "70%",
+					height: 16,
+					animation
+				}), showSecondaryText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+					variant: "text",
+					width: "50%",
+					height: 14,
+					animation,
+					className: "mt-2"
+				})]
+			}),
+			showAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonButton, {
+				size: "sm",
+				animation
+			})
+		]
+	});
+});
+SkeletonListItem.displayName = "SkeletonListItem";
+//#endregion
+Object.defineProperty(exports, "Skeleton", {
+	enumerable: true,
+	get: function() {
+		return Skeleton;
+	}
+});
+Object.defineProperty(exports, "SkeletonAvatar", {
+	enumerable: true,
+	get: function() {
+		return SkeletonAvatar;
+	}
+});
+Object.defineProperty(exports, "SkeletonButton", {
+	enumerable: true,
+	get: function() {
+		return SkeletonButton;
+	}
+});
+Object.defineProperty(exports, "SkeletonCard", {
+	enumerable: true,
+	get: function() {
+		return SkeletonCard;
+	}
+});
+Object.defineProperty(exports, "SkeletonImage", {
+	enumerable: true,
+	get: function() {
+		return SkeletonImage;
+	}
+});
+Object.defineProperty(exports, "SkeletonListItem", {
+	enumerable: true,
+	get: function() {
+		return SkeletonListItem;
+	}
+});
+Object.defineProperty(exports, "SkeletonMetricCard", {
+	enumerable: true,
+	get: function() {
+		return SkeletonMetricCard;
+	}
+});
+Object.defineProperty(exports, "SkeletonTableRow", {
+	enumerable: true,
+	get: function() {
+		return SkeletonTableRow;
+	}
+});
+Object.defineProperty(exports, "SkeletonText", {
+	enumerable: true,
+	get: function() {
+		return SkeletonText;
+	}
+});
+
+//# sourceMappingURL=skeleton-BNea1Rcp.cjs.map

package/dist/chunks/skeleton-BNea1Rcp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-BNea1Rcp.cjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\nexport type SkeletonAnimation = \"pulse\" | \"wave\" | \"none\";\nexport type SkeletonTone =\n  | \"default\"\n  | \"subtle\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\nexport type SkeletonRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\nexport type SkeletonSpeed = \"slow\" | \"normal\" | \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n  Record<\n    \"--ui-skeleton-base\" | \"--ui-skeleton-highlight\" | \"--ui-skeleton-duration\",\n    string\n  >;\n\nexport interface SkeletonProps extends Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> {\n  /** The variant shape of the skeleton */\n  variant?: SkeletonVariant;\n  /** The animation type */\n  animation?: SkeletonAnimation;\n  /** Width of the skeleton */\n  width?: number | string;\n  /** Height of the skeleton */\n  height?: number | string;\n  /** Border radius override */\n  borderRadius?: number | string;\n  /** Semantic radius preset */\n  radius?: SkeletonRadius;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n  /** Animation speed preset or custom duration */\n  speed?: SkeletonSpeed | number | string;\n  /** Number of lines for text variant */\n  lines?: number;\n  /** Gap between lines */\n  lineGap?: number | string;\n  /** Whether the last line should be shorter */\n  lastLineWidth?: number | string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n  /** Number of text lines */\n  lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n  SkeletonProps,\n  \"variant\" | \"width\" | \"height\"\n> {\n  /** Size of the avatar */\n  size?: number | string;\n}\n\nexport interface SkeletonCardProps {\n  /** Whether to show image placeholder */\n  showImage?: boolean;\n  /** Image height */\n  imageHeight?: number | string;\n  /** Number of text lines */\n  lines?: number;\n  /** Whether to show avatar */\n  showAvatar?: boolean;\n  /** Whether to show action buttons */\n  showActions?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n  /** Whether to show a compact trend badge */\n  showTrend?: boolean;\n  /** Whether to render spark bars */\n  showChart?: boolean;\n  /** Number of spark bars */\n  chartBars?: number;\n  /** Width for the value block */\n  valueWidth?: number | string;\n  /** Custom className */\n  className?: string;\n  /** Animation type */\n  animation?: SkeletonAnimation;\n  /** Semantic tone preset */\n  tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n  pulse: \"ui-skeleton-pulse\",\n  wave: \"ui-skeleton-wave\",\n  none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n  none: \"rounded-none\",\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n  full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n  text: \"sm\",\n  circular: \"full\",\n  rectangular: \"none\",\n  rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n  slow: \"2.4s\",\n  normal: \"1.6s\",\n  fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n  default: {\n    base: \"var(--color-muted)\",\n    highlight:\n      \"color-mix(in oklch, var(--color-muted) 54%, var(--color-background))\",\n  },\n  subtle: {\n    base: \"color-mix(in oklch, var(--color-muted) 72%, var(--color-background))\",\n    highlight:\n      \"color-mix(in oklch, var(--color-muted) 42%, var(--color-background))\",\n  },\n  accent: {\n    base: \"var(--color-accent-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--color-accent-subtle) 48%, var(--color-background))\",\n  },\n  success: {\n    base: \"var(--color-success-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--color-success-subtle) 48%, var(--color-background))\",\n  },\n  warning: {\n    base: \"var(--color-warning-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--color-warning-subtle) 48%, var(--color-background))\",\n  },\n  danger: {\n    base: \"var(--color-danger-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--color-danger-subtle) 48%, var(--color-background))\",\n  },\n  info: {\n    base: \"var(--color-info-subtle)\",\n    highlight:\n      \"color-mix(in oklch, var(--color-info-subtle) 48%, var(--color-background))\",\n  },\n};\n\nfunction resolveDimension(value?: number | string): string | undefined {\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n  if (typeof value === \"number\") {\n    return `${value}ms`;\n  }\n\n  if (typeof value === \"string\" && value in speedStyles) {\n    return speedStyles[value as SkeletonSpeed];\n  }\n\n  return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n  variant,\n  width,\n  height,\n  borderRadius,\n}: {\n  variant: SkeletonVariant;\n  width?: number | string;\n  height?: number | string;\n  borderRadius?: number | string;\n}): CSSProperties {\n  const nextStyle: CSSProperties = {};\n  const resolvedWidth = resolveDimension(width);\n  const resolvedHeight = resolveDimension(height);\n  const resolvedBorderRadius = resolveDimension(borderRadius);\n\n  if (resolvedWidth) {\n    nextStyle.width = resolvedWidth;\n  } else if (variant === \"text\") {\n    nextStyle.width = \"100%\";\n  }\n\n  if (resolvedHeight) {\n    nextStyle.height = resolvedHeight;\n  } else if (variant === \"text\") {\n    nextStyle.height = \"1em\";\n  } else if (variant === \"circular\") {\n    nextStyle.width = nextStyle.width || \"40px\";\n    nextStyle.height = nextStyle.width;\n  }\n\n  if (resolvedBorderRadius) {\n    nextStyle.borderRadius = resolvedBorderRadius;\n  }\n\n  return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      variant = \"text\",\n      animation = \"pulse\",\n      width,\n      height,\n      borderRadius,\n      radius,\n      tone = \"default\",\n      speed = \"normal\",\n      className,\n      lines = 1,\n      lineGap = 8,\n      lastLineWidth = \"80%\",\n      style,\n      [\"aria-hidden\"]: ariaHidden,\n      ...rest\n    },\n    ref,\n  ) => {\n    const toneStyle = toneStyles[tone];\n    const sharedStyle: SkeletonCssVariables = {\n      \"--ui-skeleton-base\": toneStyle.base,\n      \"--ui-skeleton-highlight\": toneStyle.highlight,\n      \"--ui-skeleton-duration\": resolveDuration(speed),\n      ...style,\n    };\n    const effectiveRadius = radius ?? variantStyles[variant];\n    const sharedClassName = mergeClassNames(\n      \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n      radiusStyles[effectiveRadius],\n      animationStyles[animation],\n    );\n\n    if (variant === \"text\" && lines > 1) {\n      return (\n        <div\n          ref={ref}\n          className={mergeClassNames(\"flex flex-col\", className)}\n          style={{\n            ...style,\n            gap: resolveDimension(lineGap),\n            width: resolveDimension(width) ?? style?.width,\n          }}\n          aria-hidden={ariaHidden ?? true}\n          data-animation={animation}\n          data-tone={tone}\n          {...rest}\n        >\n          {Array.from({ length: lines }).map((_, index) => (\n            <div\n              key={index}\n              className={sharedClassName}\n              style={{\n                ...sharedStyle,\n                ...getDimensionStyle({\n                  variant,\n                  width:\n                    index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n                  height,\n                  borderRadius,\n                }),\n              }}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(sharedClassName, className)}\n        style={{\n          ...sharedStyle,\n          ...getDimensionStyle({ variant, width, height, borderRadius }),\n        }}\n        aria-hidden={ariaHidden ?? true}\n        data-animation={animation}\n        data-tone={tone}\n        {...rest}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n  ({ lines = 3, ...props }, ref) => {\n    return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n  },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n  ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n    const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"circular\"\n        width={sizeValue}\n        height={sizeValue}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" | \"md\" | \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n  const sizeStyles = {\n    sm: { width: 80, height: 32 },\n    md: { width: 100, height: 40 },\n    lg: { width: 120, height: 48 },\n  };\n\n  return (\n    <Skeleton\n      ref={ref}\n      variant=\"rounded\"\n      width={sizeStyles[size].width}\n      height={sizeStyles[size].height}\n      animation={animation}\n      className={className}\n      {...props}\n    />\n  );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, \"variant\">\n>(\n  (\n    {\n      width = \"100%\",\n      height = 200,\n      animation = \"pulse\",\n      className = \"\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Skeleton\n        ref={ref}\n        variant=\"rounded\"\n        width={width}\n        height={height}\n        animation={animation}\n        className={className}\n        {...props}\n      />\n    );\n  },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      showImage = true,\n      imageHeight = 200,\n      lines = 3,\n      showAvatar = false,\n      showActions = false,\n      className,\n      animation = \"pulse\",\n      tone = \"default\",\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"overflow-hidden rounded-md border border-border bg-card shadow-sm\",\n          className,\n        )}\n      >\n        {showImage && (\n          <SkeletonImage\n            height={imageHeight}\n            animation={animation}\n            borderRadius={0}\n            tone={tone}\n          />\n        )}\n\n        <div className=\"p-4 flex flex-col gap-4\">\n          {showAvatar && (\n            <div className=\"flex items-center gap-3\">\n              <SkeletonAvatar size={40} animation={animation} tone={tone} />\n              <div className=\"flex-1\">\n                <Skeleton\n                  variant=\"text\"\n                  width=\"60%\"\n                  height={14}\n                  animation={animation}\n                  tone={tone}\n                />\n                <Skeleton\n                  variant=\"text\"\n                  width=\"40%\"\n                  height={12}\n                  animation={animation}\n                  tone={tone}\n                  className=\"mt-2\"\n                />\n              </div>\n            </div>\n          )}\n\n          <SkeletonText\n            lines={lines}\n            animation={animation}\n            height={14}\n            lineGap={10}\n            tone={tone}\n          />\n\n          {showActions && (\n            <div className=\"flex gap-3 mt-2\">\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n              <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n  (\n    {\n      showTrend = true,\n      showChart = true,\n      chartBars = 7,\n      valueWidth = \"52%\",\n      className,\n      animation = \"wave\",\n      tone = \"accent\",\n    },\n    ref,\n  ) => {\n    const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClassNames(\n          \"rounded-md border border-border bg-card p-4 shadow-sm\",\n          className,\n        )}\n      >\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"min-w-0 flex-1 space-y-3\">\n            <Skeleton\n              width=\"34%\"\n              height={11}\n              animation={animation}\n              tone=\"subtle\"\n            />\n            <Skeleton\n              width={valueWidth}\n              height={28}\n              animation={animation}\n              tone={tone}\n              radius=\"md\"\n            />\n            <Skeleton\n              width=\"44%\"\n              height={12}\n              animation={animation}\n              tone=\"subtle\"\n            />\n          </div>\n\n          {showTrend ? (\n            <div className=\"rounded-full border border-border bg-surface px-3 py-2\">\n              <Skeleton\n                width={54}\n                height={12}\n                animation={animation}\n                tone=\"subtle\"\n              />\n            </div>\n          ) : null}\n        </div>\n\n        {showChart ? (\n          <div className=\"mt-5 flex h-20 items-end gap-2\">\n            {Array.from({ length: chartBars }).map((_, index) => (\n              <Skeleton\n                key={index}\n                variant=\"rounded\"\n                width=\"100%\"\n                height={`${chartHeights[index % chartHeights.length]}%`}\n                animation={animation}\n                tone={tone}\n                className=\"flex-1\"\n              />\n            ))}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n  HTMLDivElement,\n  { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n  const sharedWidth =\n    columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n  return (\n    <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n      {Array.from({ length: columns }).map((_, index) => (\n        <Skeleton\n          key={index}\n          variant=\"text\"\n          width={index === 0 ? \"28%\" : sharedWidth}\n          height={16}\n          animation={animation}\n        />\n      ))}\n    </div>\n  );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n  HTMLDivElement,\n  {\n    showAvatar?: boolean;\n    showSecondaryText?: boolean;\n    showAction?: boolean;\n    animation?: SkeletonAnimation;\n    className?: string;\n  }\n>(\n  (\n    {\n      showAvatar = true,\n      showSecondaryText = true,\n      showAction = false,\n      animation = \"pulse\",\n      className = \"\",\n    },\n    ref,\n  ) => {\n    return (\n      <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n        {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n        <div className=\"flex-1\">\n          <Skeleton\n            variant=\"text\"\n            width=\"70%\"\n            height={16}\n            animation={animation}\n          />\n          {showSecondaryText && (\n            <Skeleton\n              variant=\"text\"\n              width=\"50%\"\n              height={14}\n              animation={animation}\n              className=\"mt-2\"\n            />\n          )}\n        </div>\n        {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n      </div>\n    );\n  },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n  Skeleton,\n  SkeletonText,\n  SkeletonAvatar,\n  SkeletonButton,\n  SkeletonImage,\n  SkeletonCard,\n  SkeletonMetricCard,\n  SkeletonTableRow,\n  SkeletonListItem,\n};\n"],"mappings":"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"}