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

package/dist/chunk-5KTMPLDK.js

@@ -0,0 +1,251 @@
+import { cn } from './chunk-HRNDJU7D.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-5KTMPLDK.js.map
+//# sourceMappingURL=chunk-5KTMPLDK.js.map

package/dist/chunk-5KTMPLDK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":"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","file":"chunk-5KTMPLDK.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-5YDFC74M.js

@@ -0,0 +1,310 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-AFCSDND5.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Palette } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var colorPickerTriggerVariants = cva(
+  // Base styles
+  [
+    "inline-flex w-full items-center justify-between gap-2 rounded-[var(--color-picker-trigger-radius)] border bg-transparent font-normal transition-[color,box-shadow] outline-none",
+    "text-left",
+    "placeholder:text-muted-foreground",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:border-[color:var(--color-picker-focus-ring-primary)] focus-visible:ring-[color:var(--color-picker-focus-ring-primary)]/50 focus-visible:ring-[length:var(--color-picker-focus-ring-width)]",
+    "aria-invalid:ring-[color:var(--color-picker-focus-ring-destructive)]/20 dark:aria-invalid:ring-[color:var(--color-picker-focus-ring-destructive)]/40 aria-invalid:border-[color:var(--color-picker-focus-ring-destructive)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 py-1 text-sm",
+        md: "h-9 px-3 py-1 text-base md:text-sm",
+        lg: "h-10 px-3.5 py-1.5 text-base"
+      },
+      variant: {
+        default: "border-input shadow-xs dark:bg-input/30",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var colorPickerSwatchVariants = cva(
+  // Base styles
+  [
+    "rounded-[var(--color-picker-swatch-radius)] border border-input cursor-pointer transition-all",
+    "hover:scale-110 hover:border-ring",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var colorPickerPreviewVariants = cva(
+  // Base styles
+  [
+    "rounded-[var(--color-picker-swatch-radius)] border border-input shrink-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function isValid6DigitHex(color) {
+  return /^#[A-Fa-f0-9]{6}$/.test(color);
+}
+function isValid3DigitHex(color) {
+  return /^#[A-Fa-f0-9]{3}$/.test(color);
+}
+function isValidHexColor(color) {
+  return isValid6DigitHex(color) || isValid3DigitHex(color);
+}
+function normalizeHexColor(color) {
+  if (!color.startsWith("#")) {
+    color = `#${color}`;
+  }
+  if (color.length === 4) {
+    const r = color[1] ?? "";
+    const g = color[2] ?? "";
+    const b = color[3] ?? "";
+    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+  }
+  return color.toLowerCase();
+}
+var DEFAULT_SWATCHES = [
+  "#ef4444",
+  // red
+  "#f97316",
+  // orange
+  "#eab308",
+  // yellow
+  "#22c55e",
+  // green
+  "#14b8a6",
+  // teal
+  "#3b82f6",
+  // blue
+  "#8b5cf6",
+  // violet
+  "#ec4899",
+  // pink
+  "#000000",
+  // black
+  "#ffffff"
+  // white
+];
+function ColorPicker({
+  className,
+  value,
+  defaultValue,
+  placeholder = "Select color",
+  disabled = false,
+  swatches = DEFAULT_SWATCHES,
+  showInput = true,
+  showPreview = true,
+  onChange,
+  onOpenChange,
+  size = "md",
+  variant = "default",
+  required = false,
+  invalid = false,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [internalColor, setInternalColor] = React.useState(defaultValue);
+  const [inputValue, setInputValue] = React.useState(defaultValue ?? "");
+  const colorInputRef = React.useRef(null);
+  const selectedColor = value ?? internalColor;
+  React.useEffect(() => {
+    if (!selectedColor) return;
+    setInputValue((prev) => prev === selectedColor ? prev : selectedColor);
+  }, [selectedColor]);
+  const handleColorChange = (color) => {
+    const normalizedColor = normalizeHexColor(color);
+    if (value === void 0) {
+      setInternalColor(normalizedColor);
+    }
+    onChange?.(normalizedColor);
+  };
+  const handleNativeColorChange = (e) => {
+    handleColorChange(e.target.value);
+  };
+  const handleInputChange = (e) => {
+    let inputVal = e.target.value;
+    setInputValue(inputVal);
+    if (inputVal && !inputVal.startsWith("#")) {
+      inputVal = `#${inputVal}`;
+    }
+    if (isValid6DigitHex(inputVal)) {
+      handleColorChange(inputVal);
+    }
+  };
+  const handleInputBlur = () => {
+    let inputVal = inputValue;
+    if (inputVal && !inputVal.startsWith("#")) {
+      inputVal = `#${inputVal}`;
+    }
+    if (isValid3DigitHex(inputVal)) {
+      handleColorChange(inputVal);
+    } else if (!isValidHexColor(inputVal) && selectedColor) {
+      setInputValue(selectedColor);
+    }
+  };
+  const handleSwatchClick = (color) => {
+    handleColorChange(color);
+  };
+  const handleOpenChange = (isOpen) => {
+    setOpen(isOpen);
+    onOpenChange?.(isOpen);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), "data-slot": "color-picker", ...props, children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: cn(
+            colorPickerTriggerVariants({ size, variant }),
+            !selectedColor && "text-muted-foreground"
+          ),
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          "aria-invalid": invalid,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          "aria-required": required,
+          "data-size": size,
+          "data-slot": "color-picker-trigger",
+          "data-state": open ? "open" : "closed",
+          "data-variant": variant,
+          disabled,
+          id,
+          role: "combobox",
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 flex-1 truncate", children: [
+              showPreview && selectedColor && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(colorPickerPreviewVariants({ size })),
+                  "data-slot": "color-picker-preview",
+                  style: { backgroundColor: selectedColor }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedColor ?? placeholder })
+            ] }),
+            /* @__PURE__ */ jsx(Palette, { "aria-hidden": "true", className: "size-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-64 p-3",
+          "data-slot": "color-picker-content",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: colorInputRef,
+                  "aria-label": "Choose color",
+                  className: "size-10 cursor-pointer rounded-md border border-input p-0.5 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-none [&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-none",
+                  "data-slot": "color-picker-native",
+                  type: "color",
+                  value: selectedColor ?? "#000000",
+                  onChange: handleNativeColorChange
+                }
+              ) }),
+              showInput && /* @__PURE__ */ jsx(
+                "input",
+                {
+                  "aria-label": "Hex color value",
+                  className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm font-mono shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 uppercase",
+                  "data-slot": "color-picker-input",
+                  maxLength: 7,
+                  placeholder: "#000000",
+                  type: "text",
+                  value: inputValue,
+                  onBlur: handleInputBlur,
+                  onChange: handleInputChange
+                }
+              )
+            ] }),
+            swatches.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-medium", children: "Preset colors" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-label": "Color swatches",
+                  className: "grid grid-cols-5 gap-2",
+                  "data-slot": "color-picker-swatches",
+                  role: "group",
+                  children: swatches.map((color, index) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: cn(
+                        colorPickerSwatchVariants({ size }),
+                        selectedColor === color && "ring-2 ring-ring ring-offset-2"
+                      ),
+                      "aria-label": `Select color ${color}`,
+                      "aria-pressed": selectedColor === color,
+                      "data-color": color,
+                      "data-selected": selectedColor === color,
+                      "data-slot": "color-picker-swatch",
+                      style: { backgroundColor: color },
+                      type: "button",
+                      onClick: () => {
+                        handleSwatchClick(color);
+                      }
+                    },
+                    `${color}-${String(index)}`
+                  ))
+                }
+              )
+            ] }) : null
+          ] })
+        }
+      )
+    ] }),
+    name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        name,
+        type: "hidden",
+        value: selectedColor ?? ""
+      }
+    )
+  ] });
+}
+
+export { ColorPicker, colorPickerPreviewVariants, colorPickerSwatchVariants, colorPickerTriggerVariants };
+//# sourceMappingURL=chunk-5YDFC74M.js.map
+//# sourceMappingURL=chunk-5YDFC74M.js.map

package/dist/chunk-5YDFC74M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/ColorPicker/ColorPicker.variants.ts","../src/components/forms/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","file":"chunk-5YDFC74M.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ColorPicker trigger variant styles using CVA\n */\nexport const colorPickerTriggerVariants = cva(\n  // Base styles\n  [\n    \"inline-flex w-full items-center justify-between gap-2 rounded-[var(--color-picker-trigger-radius)] border bg-transparent font-normal transition-[color,box-shadow] outline-none\",\n    \"text-left\",\n    \"placeholder:text-muted-foreground\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:border-[color:var(--color-picker-focus-ring-primary)] focus-visible:ring-[color:var(--color-picker-focus-ring-primary)]/50 focus-visible:ring-[length:var(--color-picker-focus-ring-width)]\",\n    \"aria-invalid:ring-[color:var(--color-picker-focus-ring-destructive)]/20 dark:aria-invalid:ring-[color:var(--color-picker-focus-ring-destructive)]/40 aria-invalid:border-[color:var(--color-picker-focus-ring-destructive)]\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 py-1 text-sm\",\n        md: \"h-9 px-3 py-1 text-base md:text-sm\",\n        lg: \"h-10 px-3.5 py-1.5 text-base\",\n      },\n      variant: {\n        default: \"border-input shadow-xs dark:bg-input/30\",\n        filled: \"border-transparent bg-muted\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-input px-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * ColorPicker swatch styles using CVA\n */\nexport const colorPickerSwatchVariants = cva(\n  // Base styles\n  [\n    \"rounded-[var(--color-picker-swatch-radius)] border border-input cursor-pointer transition-all\",\n    \"hover:scale-110 hover:border-ring\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-5\",\n        md: \"size-6\",\n        lg: \"size-7\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * ColorPicker preview swatch (in trigger) styles\n */\nexport const colorPickerPreviewVariants = cva(\n  // Base styles\n  [\n    \"rounded-[var(--color-picker-swatch-radius)] border border-input shrink-0\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-4\",\n        md: \"size-5\",\n        lg: \"size-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type ColorPickerTriggerVariantProps = VariantProps<typeof colorPickerTriggerVariants>\nexport type ColorPickerSwatchVariantProps = VariantProps<typeof colorPickerSwatchVariants>\nexport type ColorPickerPreviewVariantProps = VariantProps<typeof colorPickerPreviewVariants>\n","import type { ColorPickerProps } from \"./ColorPicker.types\"\n\nimport { Palette } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../../feedback/Popover\"\nimport {\n  colorPickerPreviewVariants,\n  colorPickerSwatchVariants,\n  colorPickerTriggerVariants,\n} from \"./ColorPicker.variants\"\n\n/**\n * Validates if a string is a valid 6-digit hex color\n */\nfunction isValid6DigitHex(color: string): boolean {\n  return /^#[A-Fa-f0-9]{6}$/.test(color)\n}\n\n/**\n * Validates if a string is a valid 3-digit hex color\n */\nfunction isValid3DigitHex(color: string): boolean {\n  return /^#[A-Fa-f0-9]{3}$/.test(color)\n}\n\n/**\n * Validates if a string is a valid hex color (3 or 6 digit)\n */\nfunction isValidHexColor(color: string): boolean {\n  return isValid6DigitHex(color) || isValid3DigitHex(color)\n}\n\n/**\n * Normalizes a hex color to 6-digit lowercase format\n */\nfunction normalizeHexColor(color: string): string {\n  if (!color.startsWith(\"#\")) {\n    color = `#${color}`\n  }\n  // Convert 3-digit hex to 6-digit\n  if (color.length === 4) {\n    const r = color[1] ?? \"\"\n    const g = color[2] ?? \"\"\n    const b = color[3] ?? \"\"\n    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase()\n  }\n  return color.toLowerCase()\n}\n\n/**\n * Default preset swatches\n */\nconst DEFAULT_SWATCHES = [\n  \"#ef4444\", // red\n  \"#f97316\", // orange\n  \"#eab308\", // yellow\n  \"#22c55e\", // green\n  \"#14b8a6\", // teal\n  \"#3b82f6\", // blue\n  \"#8b5cf6\", // violet\n  \"#ec4899\", // pink\n  \"#000000\", // black\n  \"#ffffff\", // white\n]\n\nfunction ColorPicker({\n  className,\n  value,\n  defaultValue,\n  placeholder = \"Select color\",\n  disabled = false,\n  swatches = DEFAULT_SWATCHES,\n  showInput = true,\n  showPreview = true,\n  onChange,\n  onOpenChange,\n  size = \"md\",\n  variant = \"default\",\n  required = false,\n  invalid = false,\n  id,\n  name,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby,\n  ...props\n}: ColorPickerProps) {\n  const [open, setOpen] = React.useState(false)\n  const [internalColor, setInternalColor] = React.useState<string | undefined>(defaultValue)\n  const [inputValue, setInputValue] = React.useState(defaultValue ?? \"\")\n  const colorInputRef = React.useRef<HTMLInputElement>(null)\n\n  // Use controlled value if provided, otherwise use internal state\n  const selectedColor = value ?? internalColor\n\n  // Sync controlled color to input value when it changes.\n  /* eslint-disable react-you-might-not-need-an-effect/no-event-handler, react-you-might-not-need-an-effect/no-pass-live-state-to-parent, react-you-might-not-need-an-effect/no-pass-data-to-parent, react-you-might-not-need-an-effect/no-derived-state, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- Controlled value sync */\n  React.useEffect(() => {\n    if (!selectedColor) return\n    setInputValue((prev) => (prev === selectedColor ? prev : selectedColor))\n  }, [selectedColor])\n  /* eslint-enable react-you-might-not-need-an-effect/no-event-handler, react-you-might-not-need-an-effect/no-pass-live-state-to-parent, react-you-might-not-need-an-effect/no-pass-data-to-parent, react-you-might-not-need-an-effect/no-derived-state, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n\n  const handleColorChange = (color: string) => {\n    const normalizedColor = normalizeHexColor(color)\n    if (value === undefined) {\n      setInternalColor(normalizedColor)\n    }\n    onChange?.(normalizedColor)\n  }\n\n  const handleNativeColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    handleColorChange(e.target.value)\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    let inputVal = e.target.value\n    setInputValue(inputVal)\n\n    // Auto-add # if not present\n    if (inputVal && !inputVal.startsWith(\"#\")) {\n      inputVal = `#${inputVal}`\n    }\n\n    // Only validate 6-digit hex during typing to avoid intermediate 3-digit matches\n    if (isValid6DigitHex(inputVal)) {\n      handleColorChange(inputVal)\n    }\n  }\n\n  const handleInputBlur = () => {\n    let inputVal = inputValue\n\n    // Auto-add # if not present\n    if (inputVal && !inputVal.startsWith(\"#\")) {\n      inputVal = `#${inputVal}`\n    }\n\n    // On blur, also accept 3-digit hex and normalize it\n    if (isValid3DigitHex(inputVal)) {\n      handleColorChange(inputVal)\n    } else if (!isValidHexColor(inputVal) && selectedColor) {\n      // Reset to current color if invalid\n      setInputValue(selectedColor)\n    }\n  }\n\n  const handleSwatchClick = (color: string) => {\n    handleColorChange(color)\n  }\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen)\n    onOpenChange?.(isOpen)\n  }\n\n  return (\n    <div className={cn(\"relative\", className)} data-slot=\"color-picker\" {...props}>\n      <Popover open={open} onOpenChange={handleOpenChange}>\n        <PopoverTrigger asChild>\n          <button\n            className={cn(\n              colorPickerTriggerVariants({ size, variant }),\n              !selectedColor && \"text-muted-foreground\"\n            )}\n            aria-expanded={open}\n            aria-haspopup=\"dialog\"\n            aria-invalid={invalid}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-required={required}\n            data-size={size}\n            data-slot=\"color-picker-trigger\"\n            data-state={open ? \"open\" : \"closed\"}\n            data-variant={variant}\n            disabled={disabled}\n            id={id}\n            role=\"combobox\"\n            type=\"button\"\n          >\n            <span className=\"flex items-center gap-2 flex-1 truncate\">\n              {showPreview && selectedColor && (\n                <span\n                  aria-hidden=\"true\"\n                  className={cn(colorPickerPreviewVariants({ size }))}\n                  data-slot=\"color-picker-preview\"\n                  style={{ backgroundColor: selectedColor }}\n                />\n              )}\n              <span className=\"truncate\">\n                {selectedColor ?? placeholder}\n              </span>\n            </span>\n            <Palette aria-hidden=\"true\" className=\"size-4 shrink-0 opacity-50\" />\n          </button>\n        </PopoverTrigger>\n        <PopoverContent\n          align=\"start\"\n          className=\"w-64 p-3\"\n          data-slot=\"color-picker-content\"\n        >\n          <div className=\"space-y-3\">\n            {/* Native color picker */}\n            <div className=\"flex items-center gap-2\">\n              <div className=\"relative\">\n                <input\n                  ref={colorInputRef}\n                  aria-label=\"Choose color\"\n                  className=\"size-10 cursor-pointer rounded-md border border-input p-0.5 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-sm [&::-webkit-color-swatch]:border-none [&::-moz-color-swatch]:rounded-sm [&::-moz-color-swatch]:border-none\"\n                  data-slot=\"color-picker-native\"\n                  type=\"color\"\n                  value={selectedColor ?? \"#000000\"}\n                  onChange={handleNativeColorChange}\n                />\n              </div>\n              {showInput && (\n                <input\n                  aria-label=\"Hex color value\"\n                  className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm font-mono shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 uppercase\"\n                  data-slot=\"color-picker-input\"\n                  maxLength={7}\n                  placeholder=\"#000000\"\n                  type=\"text\"\n                  value={inputValue}\n                  onBlur={handleInputBlur}\n                  onChange={handleInputChange}\n                />\n              )}\n            </div>\n\n            {/* Preset swatches */}\n            {swatches.length > 0 ? (\n              <div className=\"space-y-1.5\">\n                <span className=\"text-xs text-muted-foreground font-medium\">\n                  Preset colors\n                </span>\n                <div\n                  aria-label=\"Color swatches\"\n                  className=\"grid grid-cols-5 gap-2\"\n                  data-slot=\"color-picker-swatches\"\n                  role=\"group\"\n                >\n                  {swatches.map((color, index) => (\n                    <button\n                      key={`${color}-${String(index)}`}\n                      className={cn(\n                        colorPickerSwatchVariants({ size }),\n                        selectedColor === color && \"ring-2 ring-ring ring-offset-2\"\n                      )}\n                      aria-label={`Select color ${color}`}\n                      aria-pressed={selectedColor === color}\n                      data-color={color}\n                      data-selected={selectedColor === color}\n                      data-slot=\"color-picker-swatch\"\n                      style={{ backgroundColor: color }}\n                      type=\"button\"\n                      onClick={() => { handleSwatchClick(color); }}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\n          </div>\n        </PopoverContent>\n      </Popover>\n      {name && (\n        <input\n          name={name}\n          type=\"hidden\"\n          value={selectedColor ?? \"\"}\n        />\n      )}\n    </div>\n  )\n}\n\nexport { ColorPicker }\n"]}