@etus/ui 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/chunk-NAI3TX52.js

@@ -0,0 +1,251 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var gaugeChartVariants = cva("relative inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      lg: "",
+      md: "",
+      sm: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var SIZE_CONFIG = {
+  lg: { fontSize: { label: "text-base", minMax: "text-sm", value: "text-3xl" }, strokeWidth: 16, width: 240 },
+  md: { fontSize: { label: "text-sm", minMax: "text-xs", value: "text-2xl" }, strokeWidth: 12, width: 180 },
+  sm: { fontSize: { label: "text-xs", minMax: "text-xs", value: "text-lg" }, strokeWidth: 8, width: 120 }
+};
+var VARIANT_CONFIG = {
+  full: { endAngle: 450, rotation: 0, startAngle: 90 },
+  semicircle: { endAngle: 0, rotation: 0, startAngle: 180 },
+  "three-quarters": { endAngle: -45, rotation: 0, startAngle: 225 }
+};
+var PRIMARY_COLOR_VAR = "var(--primary)";
+var MUTED_COLOR_VAR = "var(--muted)";
+function describeArc(cx, cy, radius, startAngle, endAngle) {
+  const start = polarToCartesian(cx, cy, radius, endAngle);
+  const end = polarToCartesian(cx, cy, radius, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+  return [
+    "M",
+    String(start.x),
+    String(start.y),
+    "A",
+    String(radius),
+    String(radius),
+    "0",
+    largeArcFlag,
+    "0",
+    String(end.x),
+    String(end.y)
+  ].join(" ");
+}
+function polarToCartesian(cx, cy, radius, angleInDegrees) {
+  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180;
+  return {
+    x: cx + radius * Math.cos(angleInRadians),
+    y: cy + radius * Math.sin(angleInRadians)
+  };
+}
+function getZoneColor(value, zones) {
+  if (!zones?.length) {
+    return PRIMARY_COLOR_VAR;
+  }
+  for (const zone of zones) {
+    if (value >= zone.min && value < zone.max) {
+      return zone.color;
+    }
+  }
+  const lastZone = zones.at(-1);
+  if (lastZone && value >= lastZone.min && value <= lastZone.max) {
+    return lastZone.color;
+  }
+  return PRIMARY_COLOR_VAR;
+}
+function GaugeChart({
+  animated = true,
+  className,
+  label,
+  max = 100,
+  min = 0,
+  showLabels = true,
+  showValue = true,
+  size = "md",
+  unit,
+  value,
+  variant = "semicircle",
+  zones
+}) {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const percentage = (clampedValue - min) / (max - min) * 100;
+  const sizeConfig = SIZE_CONFIG[size];
+  const variantConfig = VARIANT_CONFIG[variant];
+  const width = sizeConfig.width;
+  const height = variant === "semicircle" ? width / 2 + sizeConfig.strokeWidth * 2 : variant === "three-quarters" ? width * 0.75 + sizeConfig.strokeWidth : width;
+  const cx = width / 2;
+  const cy = variant === "semicircle" ? width / 2 : variant === "three-quarters" ? width * 0.5 : width / 2;
+  const radius = (width - sizeConfig.strokeWidth * 2) / 2;
+  const { endAngle, startAngle } = variantConfig;
+  const totalAngle = Math.abs(startAngle - endAngle);
+  const valueAngle = startAngle - percentage / 100 * totalAngle;
+  const backgroundPath = describeArc(cx, cy, radius, startAngle, endAngle);
+  const valuePath = percentage > 0 ? describeArc(cx, cy, radius, startAngle, valueAngle) : "";
+  const fillColor = getZoneColor(clampedValue, zones);
+  const circumference = 2 * Math.PI * radius;
+  const arcLength = totalAngle / 360 * circumference;
+  const valueArcLength = percentage / 100 * arcLength;
+  const ariaLabel = label ? `${label}: ${String(clampedValue)}${unit ?? ""}` : `Value: ${String(clampedValue)}${unit ?? ""}`;
+  const minLabelPos = polarToCartesian(cx, cy, radius + sizeConfig.strokeWidth + 8, startAngle);
+  const maxLabelPos = polarToCartesian(cx, cy, radius + sizeConfig.strokeWidth + 8, endAngle);
+  const mutedTextClass = "fill-muted-foreground";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      "aria-valuemax": max,
+      "aria-valuemin": min,
+      "aria-valuenow": clampedValue,
+      className: cn(gaugeChartVariants({ size }), className),
+      role: "meter",
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "overflow-visible",
+          height,
+          viewBox: `0 0 ${String(width)} ${String(height)}`,
+          width,
+          children: [
+            zones?.length ? zones.map((zone) => {
+              const zoneStartPercent = (zone.min - min) / (max - min) * 100;
+              const zoneEndPercent = (zone.max - min) / (max - min) * 100;
+              const zoneStartAngle = startAngle - zoneStartPercent / 100 * totalAngle;
+              const zoneEndAngle = startAngle - zoneEndPercent / 100 * totalAngle;
+              const zonePath = describeArc(cx, cy, radius, zoneStartAngle, zoneEndAngle);
+              return /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: zonePath,
+                  fill: "none",
+                  opacity: 0.2,
+                  stroke: zone.color,
+                  strokeLinecap: "round",
+                  strokeWidth: sizeConfig.strokeWidth
+                },
+                `zone-${String(zone.min)}-${String(zone.max)}`
+              );
+            }) : (
+              /* Default track background */
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: backgroundPath,
+                  fill: "none",
+                  stroke: MUTED_COLOR_VAR,
+                  strokeLinecap: "round",
+                  strokeWidth: sizeConfig.strokeWidth
+                }
+              )
+            ),
+            valuePath && /* @__PURE__ */ jsx(
+              "path",
+              {
+                style: animated ? {
+                  strokeDasharray: `${String(valueArcLength)} ${String(arcLength)}`,
+                  strokeDashoffset: 0
+                } : void 0,
+                className: cn(animated && "transition-all duration-500 ease-out"),
+                d: valuePath,
+                fill: "none",
+                stroke: fillColor,
+                strokeLinecap: "round",
+                strokeWidth: sizeConfig.strokeWidth
+              }
+            ),
+            /* @__PURE__ */ jsxs("g", { className: "pointer-events-none", children: [
+              showValue && /* @__PURE__ */ jsxs(
+                "text",
+                {
+                  className: cn("fill-foreground font-bold", sizeConfig.fontSize.value),
+                  dominantBaseline: variant === "semicircle" ? "auto" : "central",
+                  textAnchor: "middle",
+                  x: cx,
+                  y: variant === "semicircle" ? cy - 8 : cy,
+                  children: [
+                    clampedValue,
+                    unit && /* @__PURE__ */ jsx("tspan", { className: "text-muted-foreground font-normal", fontSize: "0.6em", children: unit })
+                  ]
+                }
+              ),
+              label && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: cn(mutedTextClass, sizeConfig.fontSize.label),
+                  dominantBaseline: variant === "semicircle" ? "hanging" : "central",
+                  textAnchor: "middle",
+                  x: cx,
+                  y: variant === "semicircle" ? cy + (showValue ? 8 : 0) : cy + (showValue ? 20 : 0),
+                  children: label
+                }
+              )
+            ] }),
+            showLabels && variant === "semicircle" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: cn(mutedTextClass, sizeConfig.fontSize.minMax),
+                  textAnchor: "start",
+                  x: sizeConfig.strokeWidth,
+                  y: cy + sizeConfig.strokeWidth + 12,
+                  children: min
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: cn(mutedTextClass, sizeConfig.fontSize.minMax),
+                  textAnchor: "end",
+                  x: width - sizeConfig.strokeWidth,
+                  y: cy + sizeConfig.strokeWidth + 12,
+                  children: max
+                }
+              )
+            ] }),
+            showLabels && variant === "three-quarters" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: cn(mutedTextClass, sizeConfig.fontSize.minMax),
+                  dominantBaseline: "middle",
+                  textAnchor: "end",
+                  x: minLabelPos.x,
+                  y: minLabelPos.y,
+                  children: min
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: cn(mutedTextClass, sizeConfig.fontSize.minMax),
+                  dominantBaseline: "middle",
+                  textAnchor: "start",
+                  x: maxLabelPos.x,
+                  y: maxLabelPos.y,
+                  children: max
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { GaugeChart, gaugeChartVariants };
+//# sourceMappingURL=chunk-NAI3TX52.js.map
+//# sourceMappingURL=chunk-NAI3TX52.js.map

package/dist/chunk-NAI3TX52.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":"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","file":"chunk-NAI3TX52.js","sourcesContent":["import type { GaugeChartProps, GaugeSize, GaugeVariant, GaugeZone } from \"./GaugeChart.types\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst gaugeChartVariants = cva(\"relative inline-flex items-center justify-center\", {\n  variants: {\n    size: {\n      lg: \"\",\n      md: \"\",\n      sm: \"\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n})\n\n/** Size configurations for the gauge */\nconst SIZE_CONFIG: Record<GaugeSize, { fontSize: { label: string; minMax: string; value: string }; strokeWidth: number; width: number }> = {\n  lg: { fontSize: { label: \"text-base\", minMax: \"text-sm\", value: \"text-3xl\" }, strokeWidth: 16, width: 240 },\n  md: { fontSize: { label: \"text-sm\", minMax: \"text-xs\", value: \"text-2xl\" }, strokeWidth: 12, width: 180 },\n  sm: { fontSize: { label: \"text-xs\", minMax: \"text-xs\", value: \"text-lg\" }, strokeWidth: 8, width: 120 },\n}\n\n/** Variant configurations for arc angles */\nconst VARIANT_CONFIG: Record<GaugeVariant, { endAngle: number; rotation: number; startAngle: number }> = {\n  full: { endAngle: 450, rotation: 0, startAngle: 90 },\n  semicircle: { endAngle: 0, rotation: 0, startAngle: 180 },\n  \"three-quarters\": { endAngle: -45, rotation: 0, startAngle: 225 },\n}\n\n/** CSS variable for primary color */\nconst PRIMARY_COLOR_VAR = \"var(--primary)\"\n/** CSS variable for muted color */\nconst MUTED_COLOR_VAR = \"var(--muted)\"\n\n/**\n * Calculate SVG arc path\n */\nfunction describeArc(\n  cx: number,\n  cy: number,\n  radius: number,\n  startAngle: number,\n  endAngle: number\n): string {\n  const start = polarToCartesian(cx, cy, radius, endAngle)\n  const end = polarToCartesian(cx, cy, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? \"0\" : \"1\"\n\n  return [\n    \"M\", String(start.x), String(start.y),\n    \"A\", String(radius), String(radius), \"0\", largeArcFlag, \"0\", String(end.x), String(end.y),\n  ].join(\" \")\n}\n\n/**\n * Convert polar coordinates to cartesian\n */\nfunction polarToCartesian(\n  cx: number,\n  cy: number,\n  radius: number,\n  angleInDegrees: number\n): { x: number; y: number } {\n  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180\n  return {\n    x: cx + radius * Math.cos(angleInRadians),\n    y: cy + radius * Math.sin(angleInRadians),\n  }\n}\n\n/**\n * Get the color for a given value based on zones\n */\nfunction getZoneColor(value: number, zones: GaugeZone[] | undefined): string {\n  if (!zones?.length) {\n    return PRIMARY_COLOR_VAR\n  }\n\n  for (const zone of zones) {\n    if (value >= zone.min && value < zone.max) {\n      return zone.color\n    }\n  }\n\n  // Check if value equals the max of the last zone\n  const lastZone = zones.at(-1)\n  if (lastZone && value >= lastZone.min && value <= lastZone.max) {\n    return lastZone.color\n  }\n\n  return PRIMARY_COLOR_VAR\n}\n\n/**\n * GaugeChart - A speedometer-style gauge for displaying values on a scale\n * @example\n * <GaugeChart label=\"Score\" unit=\"%\" value={75} />\n * @example\n * <GaugeChart\n *   max={100}\n *   min={-100}\n *   value={42}\n *   zones={[\n *     { color: \"var(--destructive)\", max: 0, min: -100 },\n *     { color: \"var(--warning)\", max: 50, min: 0 },\n *     { color: \"var(--success)\", max: 100, min: 50 },\n *   ]}\n * />\n */\nfunction GaugeChart({\n  animated = true,\n  className,\n  label,\n  max = 100,\n  min = 0,\n  showLabels = true,\n  showValue = true,\n  size = \"md\",\n  unit,\n  value,\n  variant = \"semicircle\",\n  zones,\n}: GaugeChartProps) {\n  // Clamp value to min/max range\n  const clampedValue = Math.min(Math.max(value, min), max)\n\n  // Calculate percentage\n  const percentage = ((clampedValue - min) / (max - min)) * 100\n\n  // Get configuration\n  const sizeConfig = SIZE_CONFIG[size]\n  const variantConfig = VARIANT_CONFIG[variant]\n\n  // SVG dimensions\n  const width = sizeConfig.width\n  const height = variant === \"semicircle\"\n    ? width / 2 + sizeConfig.strokeWidth * 2\n    : variant === \"three-quarters\"\n      ? width * 0.75 + sizeConfig.strokeWidth\n      : width\n\n  const cx = width / 2\n  const cy = variant === \"semicircle\"\n    ? width / 2\n    : variant === \"three-quarters\"\n      ? width * 0.5\n      : width / 2\n\n  const radius = (width - sizeConfig.strokeWidth * 2) / 2\n\n  // Calculate arc angles\n  const { endAngle, startAngle } = variantConfig\n  const totalAngle = Math.abs(startAngle - endAngle)\n  const valueAngle = startAngle - (percentage / 100) * totalAngle\n\n  // Arc paths\n  const backgroundPath = describeArc(cx, cy, radius, startAngle, endAngle)\n  const valuePath = percentage > 0\n    ? describeArc(cx, cy, radius, startAngle, valueAngle)\n    : \"\"\n\n  // Get color based on zones\n  const fillColor = getZoneColor(clampedValue, zones)\n\n  // Calculate arc length for animation\n  const circumference = 2 * Math.PI * radius\n  const arcLength = (totalAngle / 360) * circumference\n  const valueArcLength = (percentage / 100) * arcLength\n\n  // ARIA label\n  const ariaLabel = label\n    ? `${label}: ${String(clampedValue)}${unit ?? \"\"}`\n    : `Value: ${String(clampedValue)}${unit ?? \"\"}`\n\n  // Calculate label positions for min/max\n  const minLabelPos = polarToCartesian(cx, cy, radius + sizeConfig.strokeWidth + 8, startAngle)\n  const maxLabelPos = polarToCartesian(cx, cy, radius + sizeConfig.strokeWidth + 8, endAngle)\n\n  // Common text class name\n  const mutedTextClass = \"fill-muted-foreground\"\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={clampedValue}\n      className={cn(gaugeChartVariants({ size }), className)}\n      role=\"meter\"\n    >\n      <svg\n        className=\"overflow-visible\"\n        height={height}\n        viewBox={`0 0 ${String(width)} ${String(height)}`}\n        width={width}\n      >\n        {/* Zone backgrounds if zones are provided */}\n        {zones?.length ? (\n          zones.map((zone) => {\n            const zoneStartPercent = ((zone.min - min) / (max - min)) * 100\n            const zoneEndPercent = ((zone.max - min) / (max - min)) * 100\n            const zoneStartAngle = startAngle - (zoneStartPercent / 100) * totalAngle\n            const zoneEndAngle = startAngle - (zoneEndPercent / 100) * totalAngle\n            const zonePath = describeArc(cx, cy, radius, zoneStartAngle, zoneEndAngle)\n\n            return (\n              <path\n                key={`zone-${String(zone.min)}-${String(zone.max)}`}\n                d={zonePath}\n                fill=\"none\"\n                opacity={0.2}\n                stroke={zone.color}\n                strokeLinecap=\"round\"\n                strokeWidth={sizeConfig.strokeWidth}\n              />\n            )\n          })\n        ) : (\n          /* Default track background */\n          <path\n            d={backgroundPath}\n            fill=\"none\"\n            stroke={MUTED_COLOR_VAR}\n            strokeLinecap=\"round\"\n            strokeWidth={sizeConfig.strokeWidth}\n          />\n        )}\n\n        {/* Value arc */}\n        {valuePath && (\n          <path\n            style={animated ? {\n              strokeDasharray: `${String(valueArcLength)} ${String(arcLength)}`,\n              strokeDashoffset: 0,\n            } : undefined}\n            className={cn(animated && \"transition-all duration-500 ease-out\")}\n            d={valuePath}\n            fill=\"none\"\n            stroke={fillColor}\n            strokeLinecap=\"round\"\n            strokeWidth={sizeConfig.strokeWidth}\n          />\n        )}\n\n        {/* Center content */}\n        <g className=\"pointer-events-none\">\n          {showValue && (\n            <text\n              className={cn(\"fill-foreground font-bold\", sizeConfig.fontSize.value)}\n              dominantBaseline={variant === \"semicircle\" ? \"auto\" : \"central\"}\n              textAnchor=\"middle\"\n              x={cx}\n              y={variant === \"semicircle\" ? cy - 8 : cy}\n            >\n              {clampedValue}\n              {unit && (\n                <tspan className=\"text-muted-foreground font-normal\" fontSize=\"0.6em\">\n                  {unit}\n                </tspan>\n              )}\n            </text>\n          )}\n\n          {label && (\n            <text\n              className={cn(mutedTextClass, sizeConfig.fontSize.label)}\n              dominantBaseline={variant === \"semicircle\" ? \"hanging\" : \"central\"}\n              textAnchor=\"middle\"\n              x={cx}\n              y={variant === \"semicircle\" ? cy + (showValue ? 8 : 0) : cy + (showValue ? 20 : 0)}\n            >\n              {label}\n            </text>\n          )}\n        </g>\n\n        {/* Min/Max labels */}\n        {showLabels && variant === \"semicircle\" && (\n          <>\n            <text\n              className={cn(mutedTextClass, sizeConfig.fontSize.minMax)}\n              textAnchor=\"start\"\n              x={sizeConfig.strokeWidth}\n              y={cy + sizeConfig.strokeWidth + 12}\n            >\n              {min}\n            </text>\n            <text\n              className={cn(mutedTextClass, sizeConfig.fontSize.minMax)}\n              textAnchor=\"end\"\n              x={width - sizeConfig.strokeWidth}\n              y={cy + sizeConfig.strokeWidth + 12}\n            >\n              {max}\n            </text>\n          </>\n        )}\n\n        {showLabels && variant === \"three-quarters\" && (\n          <>\n            <text\n              className={cn(mutedTextClass, sizeConfig.fontSize.minMax)}\n              dominantBaseline=\"middle\"\n              textAnchor=\"end\"\n              x={minLabelPos.x}\n              y={minLabelPos.y}\n            >\n              {min}\n            </text>\n            <text\n              className={cn(mutedTextClass, sizeConfig.fontSize.minMax)}\n              dominantBaseline=\"middle\"\n              textAnchor=\"start\"\n              x={maxLabelPos.x}\n              y={maxLabelPos.y}\n            >\n              {max}\n            </text>\n          </>\n        )}\n      </svg>\n    </div>\n  )\n}\n\nexport { GaugeChart, gaugeChartVariants }\nexport type { VariantProps as GaugeChartVariantProps }\n"]}

package/dist/chunk-NGX3ITG4.js

@@ -0,0 +1,119 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var skeletonLoaderVariants = cva(
+  "bg-[color:var(--skeleton-bg)]",
+  {
+    variants: {
+      /**
+       * Shape variant determines the skeleton's visual form
+       */
+      shape: {
+        /** Rectangular shape with rounded corners (default) */
+        rectangle: "rounded-[var(--skeleton-shape-rectangle-border-radius)]",
+        /** Circular shape for avatars */
+        circle: "rounded-[var(--skeleton-shape-circle-border-radius)] aspect-[var(--skeleton-shape-circle-aspect-ratio)]",
+        /** Single line of text */
+        text: "h-[var(--skeleton-shape-text-height)] rounded-[var(--skeleton-shape-text-border-radius)]",
+        /** Heading text */
+        heading: "h-[var(--skeleton-shape-heading-height)] rounded-[var(--skeleton-shape-heading-border-radius)]",
+        /** Square shape */
+        square: "aspect-[var(--skeleton-shape-square-aspect-ratio)] rounded-[var(--skeleton-shape-square-border-radius)]",
+        /** Pill shape for tags/badges */
+        pill: "rounded-[var(--skeleton-shape-pill-border-radius)]"
+      },
+      /**
+       * Size preset for common use cases
+       */
+      size: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+        full: "w-full"
+      },
+      /**
+       * Animation variant
+       * - pulse: Subtle opacity fade (default)
+       * - shimmer: Left-to-right shine effect
+       * - wave: PrimeVue-style wave animation with gradient
+       * - none: No animation
+       */
+      animation: {
+        pulse: "animate-pulse",
+        shimmer: "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent",
+        wave: "relative overflow-hidden before:absolute before:inset-0 before:animate-[wave_1.5s_ease-in-out_infinite] before:bg-gradient-to-r before:from-transparent before:via-[color:var(--skeleton-wave-color,rgba(255,255,255,0.4))] before:to-transparent",
+        none: "animate-none"
+      }
+    },
+    compoundVariants: [
+      // Rectangle sizes (default shape) — per Bowser audit SkeletonLoader: rectangle+md rendered 0x0 (no default dims)
+      { shape: "rectangle", size: "xs", class: "h-3 w-24" },
+      { shape: "rectangle", size: "sm", class: "h-4 w-32" },
+      { shape: "rectangle", size: "md", class: "h-5 w-48" },
+      { shape: "rectangle", size: "lg", class: "h-8 w-64" },
+      { shape: "rectangle", size: "xl", class: "h-12 w-80" },
+      // Circle sizes
+      { shape: "circle", size: "xs", class: "size-[var(--skeleton-size-circle-xs)]" },
+      { shape: "circle", size: "sm", class: "size-[var(--skeleton-size-circle-sm)]" },
+      { shape: "circle", size: "md", class: "size-[var(--skeleton-size-circle-md)]" },
+      { shape: "circle", size: "lg", class: "size-[var(--skeleton-size-circle-lg)]" },
+      { shape: "circle", size: "xl", class: "size-[var(--skeleton-size-circle-xl)]" },
+      // Square sizes
+      // Reuse circle sizes for square since they are typically same dimensions
+      { shape: "square", size: "xs", class: "size-[var(--skeleton-size-circle-xs)]" },
+      { shape: "square", size: "sm", class: "size-[var(--skeleton-size-circle-sm)]" },
+      { shape: "square", size: "md", class: "size-[var(--skeleton-size-circle-md)]" },
+      { shape: "square", size: "lg", class: "size-[var(--skeleton-size-circle-lg)]" },
+      { shape: "square", size: "xl", class: "size-[var(--skeleton-size-circle-xl)]" },
+      // Text line sizes (width)
+      { shape: "text", size: "xs", class: "w-[var(--skeleton-size-text-xs)]" },
+      { shape: "text", size: "sm", class: "w-[var(--skeleton-size-text-sm)]" },
+      { shape: "text", size: "md", class: "w-[var(--skeleton-size-text-md)]" },
+      { shape: "text", size: "lg", class: "w-[var(--skeleton-size-text-lg)]" },
+      { shape: "text", size: "xl", class: "w-[var(--skeleton-size-text-xl)]" },
+      // Heading sizes (width) - reusing text widths but slightly adjusted or mapped if needed
+      // For now mapping to text sizes but could be separate tokens if design demands
+      { shape: "heading", size: "xs", class: "w-[var(--skeleton-size-text-sm)]" },
+      { shape: "heading", size: "sm", class: "w-[var(--skeleton-size-text-md)]" },
+      { shape: "heading", size: "md", class: "w-[var(--skeleton-size-text-lg)]" },
+      { shape: "heading", size: "lg", class: "w-[var(--skeleton-size-text-xl)]" },
+      { shape: "heading", size: "xl", class: "w-full" },
+      // fallback
+      // Pill sizes
+      { shape: "pill", size: "xs", class: "h-[var(--skeleton-size-pill-xs-height)] w-[var(--skeleton-size-pill-xs-width)]" },
+      { shape: "pill", size: "sm", class: "h-[var(--skeleton-size-pill-sm-height)] w-[var(--skeleton-size-pill-sm-width)]" },
+      { shape: "pill", size: "md", class: "h-[var(--skeleton-size-pill-md-height)] w-[var(--skeleton-size-pill-md-width)]" },
+      { shape: "pill", size: "lg", class: "h-[var(--skeleton-size-pill-lg-height)] w-[var(--skeleton-size-pill-lg-width)]" },
+      { shape: "pill", size: "xl", class: "h-[var(--skeleton-size-pill-xl-height)] w-[var(--skeleton-size-pill-xl-width)]" }
+    ],
+    defaultVariants: {
+      shape: "rectangle",
+      size: "md",
+      animation: "pulse"
+    }
+  }
+);
+function SkeletonLoader({
+  className,
+  shape,
+  size,
+  animation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(skeletonLoaderVariants({ shape, size, animation }), className),
+      "data-slot": "skeleton-loader",
+      ...props
+    }
+  );
+}
+
+export { SkeletonLoader, skeletonLoaderVariants };
+//# sourceMappingURL=chunk-NGX3ITG4.js.map
+//# sourceMappingURL=chunk-NGX3ITG4.js.map

package/dist/chunk-NGX3ITG4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/SkeletonLoader/SkeletonLoader.variants.ts","../src/components/primitives/SkeletonLoader/SkeletonLoader.tsx"],"names":[],"mappings":"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","file":"chunk-NGX3ITG4.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * SkeletonLoader variants using CVA\n */\nexport const skeletonLoaderVariants = cva(\"bg-[color:var(--skeleton-bg)]\", {\n  variants: {\n    /**\n     * Shape variant determines the skeleton's visual form\n     */\n    shape: {\n      /** Rectangular shape with rounded corners (default) */\n      rectangle: \"rounded-[var(--skeleton-shape-rectangle-border-radius)]\",\n      /** Circular shape for avatars */\n      circle: \"rounded-[var(--skeleton-shape-circle-border-radius)] aspect-[var(--skeleton-shape-circle-aspect-ratio)]\",\n      /** Single line of text */\n      text: \"h-[var(--skeleton-shape-text-height)] rounded-[var(--skeleton-shape-text-border-radius)]\",\n      /** Heading text */\n      heading: \"h-[var(--skeleton-shape-heading-height)] rounded-[var(--skeleton-shape-heading-border-radius)]\",\n      /** Square shape */\n      square: \"aspect-[var(--skeleton-shape-square-aspect-ratio)] rounded-[var(--skeleton-shape-square-border-radius)]\",\n      /** Pill shape for tags/badges */\n      pill: \"rounded-[var(--skeleton-shape-pill-border-radius)]\",\n    },\n    /**\n     * Size preset for common use cases\n     */\n    size: {\n      xs: \"\",\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n      xl: \"\",\n      full: \"w-full\",\n    },\n    /**\n     * Animation variant\n     * - pulse: Subtle opacity fade (default)\n     * - shimmer: Left-to-right shine effect\n     * - wave: PrimeVue-style wave animation with gradient\n     * - none: No animation\n     */\n    animation: {\n      pulse: \"animate-pulse\",\n      shimmer:\n        \"relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent\",\n      wave: \"relative overflow-hidden before:absolute before:inset-0 before:animate-[wave_1.5s_ease-in-out_infinite] before:bg-gradient-to-r before:from-transparent before:via-[color:var(--skeleton-wave-color,rgba(255,255,255,0.4))] before:to-transparent\",\n      none: \"animate-none\",\n    },\n  },\n    compoundVariants: [\n      // Rectangle sizes (default shape) — per Bowser audit SkeletonLoader: rectangle+md rendered 0x0 (no default dims)\n      { shape: \"rectangle\", size: \"xs\", class: \"h-3 w-24\" },\n      { shape: \"rectangle\", size: \"sm\", class: \"h-4 w-32\" },\n      { shape: \"rectangle\", size: \"md\", class: \"h-5 w-48\" },\n      { shape: \"rectangle\", size: \"lg\", class: \"h-8 w-64\" },\n      { shape: \"rectangle\", size: \"xl\", class: \"h-12 w-80\" },\n      // Circle sizes\n      { shape: \"circle\", size: \"xs\", class: \"size-[var(--skeleton-size-circle-xs)]\" },\n      { shape: \"circle\", size: \"sm\", class: \"size-[var(--skeleton-size-circle-sm)]\" },\n      { shape: \"circle\", size: \"md\", class: \"size-[var(--skeleton-size-circle-md)]\" },\n      { shape: \"circle\", size: \"lg\", class: \"size-[var(--skeleton-size-circle-lg)]\" },\n      { shape: \"circle\", size: \"xl\", class: \"size-[var(--skeleton-size-circle-xl)]\" },\n      // Square sizes\n      // Reuse circle sizes for square since they are typically same dimensions\n      { shape: \"square\", size: \"xs\", class: \"size-[var(--skeleton-size-circle-xs)]\" },\n      { shape: \"square\", size: \"sm\", class: \"size-[var(--skeleton-size-circle-sm)]\" },\n      { shape: \"square\", size: \"md\", class: \"size-[var(--skeleton-size-circle-md)]\" },\n      { shape: \"square\", size: \"lg\", class: \"size-[var(--skeleton-size-circle-lg)]\" },\n      { shape: \"square\", size: \"xl\", class: \"size-[var(--skeleton-size-circle-xl)]\" },\n      // Text line sizes (width)\n      { shape: \"text\", size: \"xs\", class: \"w-[var(--skeleton-size-text-xs)]\" },\n      { shape: \"text\", size: \"sm\", class: \"w-[var(--skeleton-size-text-sm)]\" },\n      { shape: \"text\", size: \"md\", class: \"w-[var(--skeleton-size-text-md)]\" },\n      { shape: \"text\", size: \"lg\", class: \"w-[var(--skeleton-size-text-lg)]\" },\n      { shape: \"text\", size: \"xl\", class: \"w-[var(--skeleton-size-text-xl)]\" },\n      // Heading sizes (width) - reusing text widths but slightly adjusted or mapped if needed\n      // For now mapping to text sizes but could be separate tokens if design demands\n      { shape: \"heading\", size: \"xs\", class: \"w-[var(--skeleton-size-text-sm)]\" },\n      { shape: \"heading\", size: \"sm\", class: \"w-[var(--skeleton-size-text-md)]\" },\n      { shape: \"heading\", size: \"md\", class: \"w-[var(--skeleton-size-text-lg)]\" },\n      { shape: \"heading\", size: \"lg\", class: \"w-[var(--skeleton-size-text-xl)]\" },\n      { shape: \"heading\", size: \"xl\", class: \"w-full\" }, // fallback\n      // Pill sizes\n      { shape: \"pill\", size: \"xs\", class: \"h-[var(--skeleton-size-pill-xs-height)] w-[var(--skeleton-size-pill-xs-width)]\" },\n      { shape: \"pill\", size: \"sm\", class: \"h-[var(--skeleton-size-pill-sm-height)] w-[var(--skeleton-size-pill-sm-width)]\" },\n      { shape: \"pill\", size: \"md\", class: \"h-[var(--skeleton-size-pill-md-height)] w-[var(--skeleton-size-pill-md-width)]\" },\n      { shape: \"pill\", size: \"lg\", class: \"h-[var(--skeleton-size-pill-lg-height)] w-[var(--skeleton-size-pill-lg-width)]\" },\n      { shape: \"pill\", size: \"xl\", class: \"h-[var(--skeleton-size-pill-xl-height)] w-[var(--skeleton-size-pill-xl-width)]\" },\n    ],\n    defaultVariants: {\n      shape: \"rectangle\",\n      size: \"md\",\n      animation: \"pulse\",\n    },\n  }\n)\n\nexport type SkeletonLoaderVariants = VariantProps<typeof skeletonLoaderVariants>\n","import type { SkeletonLoaderProps } from \"./SkeletonLoader.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { skeletonLoaderVariants } from \"./SkeletonLoader.variants\"\n\n/**\n * SkeletonLoader component for displaying placeholder loading states.\n *\n * Provides visual feedback during content loading with multiple shape\n * and animation variants.\n *\n * @example\n * ```tsx\n * // Text line placeholder\n * <SkeletonLoader shape=\"text\" size=\"md\" />\n *\n * // Avatar placeholder\n * <SkeletonLoader shape=\"circle\" size=\"lg\" />\n *\n * // Card content placeholder\n * <div className=\"space-y-2\">\n *   <SkeletonLoader shape=\"heading\" size=\"lg\" />\n *   <SkeletonLoader shape=\"text\" size=\"full\" />\n *   <SkeletonLoader shape=\"text\" size=\"lg\" />\n * </div>\n * ```\n */\nfunction SkeletonLoader({\n  className,\n  shape,\n  size,\n  animation,\n  ...props\n}: SkeletonLoaderProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(skeletonLoaderVariants({ shape, size, animation }), className)}\n      data-slot=\"skeleton-loader\"\n      {...props}\n    />\n  )\n}\n\nexport { SkeletonLoader, skeletonLoaderVariants }\n"]}

package/dist/chunk-NHUUSXBL.js

@@ -0,0 +1,236 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var tableContainerVariants = cva(
+  // Base styles (always applied)
+  "relative w-full overflow-x-auto",
+  {
+    variants: {
+      bordered: {
+        true: "rounded-md border",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      bordered: false
+    }
+  }
+);
+var tableVariants = cva(
+  // Base styles (always applied)
+  "w-full caption-bottom text-[length:var(--table-cell-text)]",
+  {
+    variants: {
+      density: {
+        compact: "[&_td]:py-[var(--table-cell-padding-compact-y)] [&_th]:py-[var(--table-cell-padding-compact-y)]",
+        default: "[&_td]:py-[var(--table-cell-padding-default-y)] [&_th]:py-[var(--table-cell-padding-default-y)]",
+        comfortable: "[&_td]:py-[var(--table-cell-padding-comfortable-y)] [&_th]:py-[var(--table-cell-padding-comfortable-y)]"
+      }
+    },
+    defaultVariants: {
+      density: "default"
+    }
+  }
+);
+var tableRowVariants = cva(
+  // Base styles (always applied)
+  "border-b border-[color:var(--table-row-border)] transition-colors",
+  {
+    variants: {
+      hoverable: {
+        true: "hover:bg-[color:var(--table-row-hover)]",
+        false: ""
+      },
+      selected: {
+        true: "bg-[color:var(--table-row-selected)]",
+        false: ""
+      },
+      striped: {
+        true: "even:bg-[color:var(--table-row-striped)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hoverable: true,
+      selected: false,
+      striped: false
+    }
+  }
+);
+var tableHeadVariants = cva(
+  // Base styles (always applied)
+  "text-[length:var(--text-size-sm-font-size)] h-[var(--table-header-height)] px-[var(--table-header-padding-x)] text-left align-middle font-medium text-[color:var(--table-header-fg)] whitespace-nowrap",
+  {
+    variants: {
+      sortable: {
+        true: "cursor-pointer select-none hover:bg-[color:var(--table-row-hover)]",
+        false: ""
+      },
+      sticky: {
+        true: "sticky top-0 bg-[color:var(--background)] z-10",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      sortable: false,
+      sticky: false
+    }
+  }
+);
+var tableCellVariants = cva(
+  // Base styles (always applied)
+  "px-[var(--table-cell-padding-x)] align-middle whitespace-nowrap text-[length:var(--table-cell-text)]",
+  {
+    variants: {
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      }
+    },
+    defaultVariants: {
+      align: "left"
+    }
+  }
+);
+function Table({
+  className,
+  ref,
+  bordered,
+  density,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        tableContainerVariants({ bordered }),
+        "w-full overflow-x-auto"
+      ),
+      "data-slot": "table-container",
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          className: cn(tableVariants({ density }), className),
+          "data-slot": "table",
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      className: cn("[&_tr]:border-b", className),
+      "data-slot": "table-header",
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      className: cn("[&_tr:last-child]:border-0", className),
+      "data-slot": "table-body",
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      className: cn(
+        "bg-[color:var(--table-footer-bg)] border-[color:var(--table-footer-border)] border-t font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      "data-slot": "table-footer",
+      ...props
+    }
+  );
+}
+function TableRow({
+  className,
+  hoverable,
+  selected,
+  striped,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        tableRowVariants({ hoverable, selected, striped }),
+        className
+      ),
+      "data-slot": "table-row",
+      "data-state": selected ? "selected" : void 0,
+      ...props
+    }
+  );
+}
+var ariaSortMap = {
+  asc: "ascending",
+  desc: "descending",
+  none: "none"
+};
+function TableHead({
+  className,
+  scope = "col",
+  sortable,
+  sticky,
+  sortDirection,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        tableHeadVariants({ sortable, sticky }),
+        "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      "aria-sort": sortDirection ? ariaSortMap[sortDirection] : void 0,
+      "data-slot": "table-head",
+      scope,
+      ...props
+    }
+  );
+}
+function TableCell({ className, align, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(
+        tableCellVariants({ align }),
+        "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      "data-slot": "table-cell",
+      ...props
+    }
+  );
+}
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      className: cn("text-[color:var(--table-caption-fg)] mt-[var(--table-caption-margin-top)] text-[length:var(--table-caption-text)]", className),
+      "data-slot": "table-caption",
+      ...props
+    }
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+//# sourceMappingURL=chunk-NHUUSXBL.js.map
+//# sourceMappingURL=chunk-NHUUSXBL.js.map