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

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"]}

package/dist/chunk-5ZEYTBTU.js

@@ -0,0 +1,288 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { XCircle, Clock, Loader2, Timer, ArrowUpCircle, Edit3, AlertCircle, CheckCircle2 } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var approvalStatusVariants = cva(
+  "inline-flex items-center font-medium transition-colors duration-150",
+  {
+    variants: {
+      size: {
+        sm: "h-5 text-xs gap-1 px-2 py-0.5",
+        md: "h-6 text-sm gap-1.5 px-2.5 py-0.5",
+        lg: "h-8 text-base gap-2 px-3 py-1"
+      },
+      variant: {
+        default: "rounded-full",
+        compact: "rounded-full",
+        detailed: "rounded-lg flex-col items-start gap-1 h-auto px-3 py-2",
+        timeline: "rounded-none flex-row items-start gap-2 h-auto px-0 py-0 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var statusColorStyles = {
+  pending: "bg-[color:var(--status-pending-bg)] text-[color:var(--status-pending-text)]",
+  in_review: "bg-[color:var(--status-in-review-bg)] text-[color:var(--status-in-review-text)]",
+  approved: "bg-[color:var(--status-approved-bg)] text-[color:var(--status-approved-text)]",
+  rejected: "bg-[color:var(--status-rejected-bg)] text-[color:var(--status-rejected-text)]",
+  changes_requested: "bg-[color:var(--status-changes-requested-bg)] text-[color:var(--status-changes-requested-text)]",
+  escalated: "bg-[color:var(--status-escalated-bg)] text-[color:var(--status-escalated-text)]",
+  expired: "bg-[color:var(--status-expired-bg)] text-[color:var(--status-expired-text)]",
+  cancelled: "bg-[color:var(--status-cancelled-bg)] text-[color:var(--status-cancelled-text)]"
+};
+var timelineDotStyles = {
+  pending: "bg-[color:var(--status-pending-dot)]",
+  in_review: "bg-[color:var(--status-in-review-dot)]",
+  approved: "bg-[color:var(--status-approved-dot)]",
+  rejected: "bg-[color:var(--status-rejected-dot)]",
+  changes_requested: "bg-[color:var(--status-changes-requested-dot)]",
+  escalated: "bg-[color:var(--status-escalated-dot)]",
+  expired: "bg-[color:var(--status-expired-dot)]",
+  cancelled: "bg-[color:var(--status-cancelled-dot)]"
+};
+var animationStyles = "animate-pulse";
+var statusConfig = {
+  approved: {
+    icon: CheckCircle2,
+    label: "Aprovado",
+    labelEn: "Approved"
+  },
+  cancelled: {
+    icon: AlertCircle,
+    label: "Cancelado",
+    labelEn: "Cancelled"
+  },
+  changes_requested: {
+    icon: Edit3,
+    label: "Altera\xE7\xF5es Solicitadas",
+    labelEn: "Changes Requested"
+  },
+  escalated: {
+    icon: ArrowUpCircle,
+    label: "Escalado",
+    labelEn: "Escalated"
+  },
+  expired: {
+    icon: Timer,
+    label: "Expirado",
+    labelEn: "Expired"
+  },
+  in_review: {
+    icon: Loader2,
+    label: "Em An\xE1lise",
+    labelEn: "In Review"
+  },
+  pending: {
+    icon: Clock,
+    label: "Pendente",
+    labelEn: "Pending"
+  },
+  rejected: {
+    icon: XCircle,
+    label: "Rejeitado",
+    labelEn: "Rejected"
+  }
+};
+function formatTimestamp(date) {
+  return date.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    month: "short",
+    year: "numeric"
+  });
+}
+function getInitials(name) {
+  return name.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+}
+var iconSizeMap = {
+  lg: "size-4",
+  md: "size-3.5",
+  sm: "size-3"
+};
+function ApprovalStatus({
+  animated = false,
+  approver,
+  className,
+  comment,
+  showIcon = true,
+  showLabel = true,
+  size = "md",
+  status,
+  timestamp,
+  variant = "default",
+  ...props
+}) {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+  const iconSize = iconSizeMap[size];
+  const ariaLabel = [
+    `Status: ${config.label}`,
+    approver ? `por ${approver.name}` : "",
+    timestamp ? `em ${formatTimestamp(timestamp)}` : ""
+  ].filter(Boolean).join(" ");
+  const shouldAnimate = animated && (status === "pending" || status === "in_review");
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          approvalStatusVariants({ size, variant }),
+          statusColorStyles[status],
+          shouldAnimate && animationStyles,
+          "justify-center",
+          className
+        ),
+        "aria-label": ariaLabel,
+        "data-slot": "approval-status",
+        role: "status",
+        title: config.label,
+        ...props,
+        children: showIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: iconSize })
+      }
+    );
+  }
+  if (variant === "timeline") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          approvalStatusVariants({ size, variant }),
+          className
+        ),
+        "aria-label": ariaLabel,
+        "aria-live": "polite",
+        "data-slot": "approval-status",
+        role: "status",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mt-1 size-3 shrink-0 rounded-full",
+                timelineDotStyles[status],
+                shouldAnimate && animationStyles
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              showIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: cn(iconSize, "text-muted-foreground") }),
+              showLabel && /* @__PURE__ */ jsx("span", { className: "font-medium", children: config.label })
+            ] }),
+            approver && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: approver.name }),
+              approver.role && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { children: approver.role })
+              ] })
+            ] }),
+            timestamp && /* @__PURE__ */ jsx(
+              "time",
+              {
+                className: "text-xs text-muted-foreground",
+                dateTime: timestamp.toISOString(),
+                children: formatTimestamp(timestamp)
+              }
+            ),
+            comment && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground italic", children: [
+              '"',
+              comment,
+              '"'
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  if (variant === "detailed") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          approvalStatusVariants({ size, variant }),
+          "bg-card border rounded-lg",
+          className
+        ),
+        "aria-label": ariaLabel,
+        "aria-live": "polite",
+        "data-slot": "approval-status",
+        role: "status",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 w-full", children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+                statusColorStyles[status],
+                shouldAnimate && animationStyles
+              ),
+              children: [
+                showIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-3" }),
+                showLabel && config.label
+              ]
+            }
+          ) }),
+          approver && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-6 shrink-0 rounded-full bg-muted flex items-center justify-center text-xs font-medium overflow-hidden", children: approver.avatar ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: approver.name,
+                className: "size-full object-cover",
+                src: approver.avatar
+              }
+            ) : /* @__PURE__ */ jsx("span", { children: getInitials(approver.name) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: approver.name }),
+              approver.role && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate", children: approver.role })
+            ] })
+          ] }),
+          timestamp && /* @__PURE__ */ jsx(
+            "time",
+            {
+              className: "text-xs text-muted-foreground",
+              dateTime: timestamp.toISOString(),
+              children: formatTimestamp(timestamp)
+            }
+          ),
+          comment && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground italic border-l-2 border-muted pl-2", children: [
+            '"',
+            comment,
+            '"'
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        approvalStatusVariants({ size, variant }),
+        statusColorStyles[status],
+        shouldAnimate && animationStyles,
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-live": "polite",
+      "data-slot": "approval-status",
+      role: "status",
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: iconSize }),
+        showLabel && /* @__PURE__ */ jsx("span", { children: config.label })
+      ]
+    }
+  );
+}
+
+export { ApprovalStatus, approvalStatusVariants, statusConfig };
+//# sourceMappingURL=chunk-5ZEYTBTU.js.map
+//# sourceMappingURL=chunk-5ZEYTBTU.js.map