@fab1o978/react-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,982 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Button/Button.tsx
+
+// src/components/Button/Button.module.scss
+var Button_module_default = {
+  button: "Button_module_button",
+  primary: "Button_module_primary",
+  secondary: "Button_module_secondary",
+  danger: "Button_module_danger",
+  ghost: "Button_module_ghost",
+  sm: "Button_module_sm",
+  md: "Button_module_md",
+  lg: "Button_module_lg",
+  fullWidth: "Button_module_fullWidth",
+  loading: "Button_module_loading",
+  spinner: "Button_module_spinner",
+  spin: "Button_module_spin"
+};
+var Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading = false,
+    fullWidth = false,
+    disabled,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        disabled: disabled || loading,
+        className: [
+          Button_module_default.button,
+          Button_module_default[variant],
+          Button_module_default[size],
+          fullWidth ? Button_module_default.fullWidth : "",
+          loading ? Button_module_default.loading : "",
+          className ?? ""
+        ].filter(Boolean).join(" "),
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx("span", { className: Button_module_default.spinner, "aria-hidden": "true" }),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Input/Input.module.scss
+var Input_module_default = {
+  wrapper: "Input_module_wrapper",
+  fullWidth: "Input_module_fullWidth",
+  label: "Input_module_label",
+  inputWrapper: "Input_module_inputWrapper",
+  input: "Input_module_input",
+  error: "Input_module_error",
+  sm: "Input_module_sm",
+  md: "Input_module_md",
+  lg: "Input_module_lg",
+  adornment: "Input_module_adornment",
+  adornmentEnd: "Input_module_adornmentEnd",
+  withStart: "Input_module_withStart",
+  withEnd: "Input_module_withEnd",
+  helperText: "Input_module_helperText",
+  errorText: "Input_module_errorText"
+};
+var Input = React.forwardRef(
+  ({
+    label,
+    helperText,
+    errorText,
+    size = "md",
+    fullWidth = false,
+    startAdornment,
+    endAdornment,
+    id,
+    className,
+    ...props
+  }, ref) => {
+    const inputId = id ?? (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+    const hasError = Boolean(errorText);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          Input_module_default.wrapper,
+          fullWidth ? Input_module_default.fullWidth : ""
+        ].filter(Boolean).join(" "),
+        children: [
+          label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: Input_module_default.label, children: label }),
+          /* @__PURE__ */ jsxs("div", { className: [Input_module_default.inputWrapper, Input_module_default[size]].join(" "), children: [
+            startAdornment && /* @__PURE__ */ jsx("span", { className: Input_module_default.adornment, children: startAdornment }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                id: inputId,
+                className: [
+                  Input_module_default.input,
+                  hasError ? Input_module_default.error : "",
+                  startAdornment ? Input_module_default.withStart : "",
+                  endAdornment ? Input_module_default.withEnd : "",
+                  className ?? ""
+                ].filter(Boolean).join(" "),
+                "aria-invalid": hasError,
+                "aria-describedby": errorText ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+                ...props
+              }
+            ),
+            endAdornment && /* @__PURE__ */ jsx("span", { className: [Input_module_default.adornment, Input_module_default.adornmentEnd].join(" "), children: endAdornment })
+          ] }),
+          errorText && /* @__PURE__ */ jsx("span", { id: `${inputId}-error`, className: Input_module_default.errorText, children: errorText }),
+          helperText && !errorText && /* @__PURE__ */ jsx("span", { id: `${inputId}-helper`, className: Input_module_default.helperText, children: helperText })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Badge/Badge.module.scss
+var Badge_module_default = {
+  badge: "Badge_module_badge",
+  sm: "Badge_module_sm",
+  md: "Badge_module_md",
+  default: "Badge_module_default",
+  primary: "Badge_module_primary",
+  success: "Badge_module_success",
+  warning: "Badge_module_warning",
+  danger: "Badge_module_danger",
+  dotIndicator: "Badge_module_dotIndicator"
+};
+var Badge = ({
+  variant = "default",
+  size = "md",
+  dot = false,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [
+        Badge_module_default.badge,
+        Badge_module_default[variant],
+        Badge_module_default[size],
+        dot ? Badge_module_default.dot : "",
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      children: [
+        dot && /* @__PURE__ */ jsx("span", { className: Badge_module_default.dotIndicator, "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+};
+
+// src/components/RainCanvas/RainCanvas.module.scss
+var RainCanvas_module_default = {
+  wrapper: "RainCanvas_module_wrapper",
+  trailCanvas: "RainCanvas_module_trailCanvas",
+  content: "RainCanvas_module_content",
+  dropContainer: "RainCanvas_module_dropContainer"
+};
+var _nextId = 0;
+function randomBetween(a, b) {
+  return a + Math.random() * (b - a);
+}
+function createStaticDrop(width, height) {
+  return {
+    id: _nextId++,
+    kind: "static",
+    x: randomBetween(10, width - 10),
+    y: randomBetween(10, height - 10),
+    radius: randomBetween(4, 11),
+    age: 0,
+    maxAge: randomBetween(120, 400),
+    speed: 0,
+    trail: []
+  };
+}
+var RainCanvas = ({
+  dropCount = 55,
+  background = "linear-gradient(160deg, #0f172a 0%, #1e3a5f 60%, #0f2a4a 100%)",
+  children,
+  className,
+  style
+}) => {
+  const wrapperRef = useRef(null);
+  const trailCanvasRef = useRef(null);
+  const dropContainerRef = useRef(null);
+  const dropsRef = useRef([]);
+  const nodeMapRef = useRef(/* @__PURE__ */ new Map());
+  const rafRef = useRef(0);
+  const filterIdRef = useRef(`rnf-${Math.random().toString(36).slice(2, 7)}`);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const trailCanvas = trailCanvasRef.current;
+    const dropContainer = dropContainerRef.current;
+    if (!wrapper || !trailCanvas || !dropContainer) return;
+    const trailCtx = trailCanvas.getContext("2d");
+    if (!trailCtx) return;
+    const filterId2 = filterIdRef.current;
+    const resize = () => {
+      const w = wrapper.offsetWidth;
+      const h = wrapper.offsetHeight;
+      trailCanvas.width = w;
+      trailCanvas.height = h;
+      dropsRef.current = Array.from(
+        { length: dropCount },
+        () => createStaticDrop(w, h)
+      );
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(wrapper);
+    function getOrCreateNode(drop) {
+      let node = nodeMapRef.current.get(drop.id);
+      if (!node) {
+        node = document.createElement("div");
+        node.style.cssText = `
+          position: absolute;
+          backdrop-filter: url(#${filterId2}) brightness(1.12);
+          -webkit-backdrop-filter: url(#${filterId2}) brightness(1.12);
+          box-shadow:
+            inset 0 0 0 1px rgba(255,255,255,0.4),
+            inset -2px -3px 6px rgba(255,255,255,0.18),
+            inset  2px  2px 4px rgba(0, 40, 120, 0.15);
+          background: radial-gradient(
+            circle at 32% 30%,
+            rgba(255,255,255,0.30) 0%,
+            rgba(255,255,255,0.05) 45%,
+            transparent 65%
+          );
+          pointer-events: none;
+          will-change: transform;
+        `;
+        dropContainer.appendChild(node);
+        nodeMapRef.current.set(drop.id, node);
+      }
+      return node;
+    }
+    function removeNode(id) {
+      const node = nodeMapRef.current.get(id);
+      if (node) {
+        node.remove();
+        nodeMapRef.current.delete(id);
+      }
+    }
+    function syncNode(drop) {
+      const node = getOrCreateNode(drop);
+      const isSliding = drop.kind === "sliding";
+      const h = isSliding ? drop.radius * 2.4 : drop.radius * 2;
+      const br = isSliding ? "50% 50% 55% 55%" : "50%";
+      node.style.left = `${drop.x - drop.radius}px`;
+      node.style.top = `${drop.y - drop.radius}px`;
+      node.style.width = `${drop.radius * 2}px`;
+      node.style.height = `${h}px`;
+      node.style.borderRadius = br;
+    }
+    const tick = () => {
+      const { width, height } = trailCanvas;
+      trailCtx.fillStyle = "rgba(0,0,0,0.04)";
+      trailCtx.fillRect(0, 0, width, height);
+      const next = [];
+      for (const drop of dropsRef.current) {
+        if (drop.kind === "static") {
+          drop.age++;
+          syncNode(drop);
+          if (drop.age >= drop.maxAge) {
+            removeNode(drop.id);
+            next.push({
+              ...drop,
+              id: _nextId++,
+              kind: "sliding",
+              speed: randomBetween(1.5, 3.5),
+              trail: []
+            });
+          } else {
+            next.push(drop);
+          }
+        } else {
+          drop.trail.push({ x: drop.x, y: drop.y });
+          if (drop.trail.length > 24) drop.trail.shift();
+          if (drop.trail.length > 1) {
+            trailCtx.beginPath();
+            trailCtx.moveTo(drop.trail[0].x, drop.trail[0].y);
+            for (let i = 1; i < drop.trail.length; i++) {
+              trailCtx.lineTo(drop.trail[i].x, drop.trail[i].y);
+            }
+            trailCtx.strokeStyle = "rgba(160, 200, 255, 0.18)";
+            trailCtx.lineWidth = drop.radius * 0.7;
+            trailCtx.lineCap = "round";
+            trailCtx.stroke();
+          }
+          drop.y += drop.speed;
+          drop.speed += 0.06;
+          syncNode(drop);
+          if (drop.y - drop.radius > height) {
+            removeNode(drop.id);
+            next.push(createStaticDrop(width, height));
+          } else {
+            next.push(drop);
+          }
+        }
+      }
+      dropsRef.current = next;
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      ro.disconnect();
+      nodeMapRef.current.forEach((node) => node.remove());
+      nodeMapRef.current.clear();
+    };
+  }, [dropCount]);
+  const filterId = filterIdRef.current;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: [RainCanvas_module_default.wrapper, className ?? ""].filter(Boolean).join(" "),
+      style: { background, ...style },
+      children: [
+        /* @__PURE__ */ jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: filterId,
+            x: "-20%",
+            y: "-20%",
+            width: "140%",
+            height: "140%",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ jsx(
+                "feTurbulence",
+                {
+                  type: "turbulence",
+                  baseFrequency: "0.07 0.04",
+                  numOctaves: "2",
+                  result: "noise",
+                  children: /* @__PURE__ */ jsx(
+                    "animate",
+                    {
+                      attributeName: "seed",
+                      values: "1;20;1",
+                      dur: "5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "noise",
+                  scale: "22",
+                  xChannelSelector: "R",
+                  yChannelSelector: "G"
+                }
+              )
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("canvas", { ref: trailCanvasRef, className: RainCanvas_module_default.trailCanvas }),
+        /* @__PURE__ */ jsx("div", { className: RainCanvas_module_default.content, children }),
+        /* @__PURE__ */ jsx("div", { ref: dropContainerRef, className: RainCanvas_module_default.dropContainer })
+      ]
+    }
+  );
+};
+
+// src/components/Timeline/Timeline.module.scss
+var Timeline_module_default = {
+  timeline: "Timeline_module_timeline",
+  vertical: "Timeline_module_vertical",
+  item: "Timeline_module_item",
+  track: "Timeline_module_track",
+  connector: "Timeline_module_connector",
+  content: "Timeline_module_content",
+  last: "Timeline_module_last",
+  horizontal: "Timeline_module_horizontal",
+  dot: "Timeline_module_dot",
+  iconSlot: "Timeline_module_iconSlot",
+  completed: "Timeline_module_completed",
+  dotIn: "Timeline_module_dotIn",
+  active: "Timeline_module_active",
+  pulse: "Timeline_module_pulse",
+  pending: "Timeline_module_pending",
+  label: "Timeline_module_label",
+  title: "Timeline_module_title",
+  description: "Timeline_module_description",
+  connectorHidden: "Timeline_module_connectorHidden",
+  connectorDone: "Timeline_module_connectorDone"
+};
+
+// src/utils/color.ts
+function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToHex(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function hslToRgb(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    return Math.round(255 * (ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)));
+  };
+  return { r: f(0), g: f(8), b: f(4) };
+}
+function rgbToHsl(r, g, b) {
+  const rr = r / 255, gg = g / 255, bb = b / 255;
+  const max = Math.max(rr, gg, bb);
+  const min = Math.min(rr, gg, bb);
+  const l = (max + min) / 2;
+  let h = 0, s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case rr:
+        h = ((gg - bb) / d + (gg < bb ? 6 : 0)) / 6;
+        break;
+      case gg:
+        h = ((bb - rr) / d + 2) / 6;
+        break;
+      case bb:
+        h = ((rr - gg) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToRgba(h, s, l, alpha) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function buildColorValue(h, s, l, a) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  const hex = hslToHex(h, s, l);
+  const alphaHex = Math.round(a * 255).toString(16).padStart(2, "0");
+  const hR = Math.round(h), sR = Math.round(s), lR = Math.round(l);
+  const aR = Math.round(a * 100) / 100;
+  return {
+    hex,
+    hexa: `${hex}${alphaHex}`,
+    hsl: `hsl(${hR}, ${sR}%, ${lR}%)`,
+    hsla: `hsla(${hR}, ${sR}%, ${lR}%, ${aR})`,
+    rgb: `rgb(${r}, ${g}, ${b})`,
+    rgba: `rgba(${r}, ${g}, ${b}, ${aR})`,
+    h,
+    s,
+    l,
+    a
+  };
+}
+function deriveAccent(hex) {
+  const [h, s, l] = hexToHsl(hex);
+  return {
+    base: hex,
+    dot: hslToHex(h, s, Math.min(l + 12, 95)),
+    track: hex,
+    ring: hex,
+    glow: hslToRgba(h, s, l, 0.3),
+    light: hslToHex(h, Math.max(s - 20, 0), Math.min(l + 45, 96))
+  };
+}
+function accentToCssVars(tokens, prefix) {
+  return {
+    [`--${prefix}-accent`]: tokens.base,
+    [`--${prefix}-accent-dot`]: tokens.dot,
+    [`--${prefix}-accent-track`]: tokens.track,
+    [`--${prefix}-accent-ring`]: tokens.ring,
+    [`--${prefix}-accent-glow`]: tokens.glow,
+    [`--${prefix}-accent-light`]: tokens.light
+  };
+}
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    d: "M1.5 5L4 7.5L8.5 2.5",
+    stroke: "currentColor",
+    strokeWidth: "1.8",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var Timeline = ({
+  items,
+  orientation = "vertical",
+  accent,
+  className
+}) => {
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "timeline") : {};
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: [
+        Timeline_module_default.timeline,
+        Timeline_module_default[orientation],
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      style: accentVars,
+      children: items.map((item, index) => {
+        const status = item.status ?? "pending";
+        const isLast = index === items.length - 1;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: [Timeline_module_default.item, Timeline_module_default[status], isLast ? Timeline_module_default.last : ""].filter(Boolean).join(" "),
+            style: { "--dot-delay": `${index * 0.08}s` },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: Timeline_module_default.track, children: [
+                orientation === "horizontal" && /* @__PURE__ */ jsx("div", { className: [
+                  Timeline_module_default.connector,
+                  index === 0 ? Timeline_module_default.connectorHidden : "",
+                  index > 0 && items[index - 1].status === "completed" ? Timeline_module_default.connectorDone : ""
+                ].filter(Boolean).join(" ") }),
+                /* @__PURE__ */ jsx("div", { className: Timeline_module_default.dot, children: status === "completed" && (item.icon ? /* @__PURE__ */ jsx("span", { className: Timeline_module_default.iconSlot, children: item.icon }) : /* @__PURE__ */ jsx(CheckIcon, {})) }),
+                (orientation === "horizontal" || !isLast) && /* @__PURE__ */ jsx("div", { className: [
+                  Timeline_module_default.connector,
+                  orientation === "horizontal" && isLast ? Timeline_module_default.connectorHidden : "",
+                  status === "completed" ? Timeline_module_default.connectorDone : ""
+                ].filter(Boolean).join(" ") })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: Timeline_module_default.content, children: [
+                item.label && /* @__PURE__ */ jsx("span", { className: Timeline_module_default.label, children: item.label }),
+                /* @__PURE__ */ jsx("span", { className: Timeline_module_default.title, children: item.title }),
+                item.description && /* @__PURE__ */ jsx("p", { className: Timeline_module_default.description, children: item.description })
+              ] })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+};
+
+// src/components/ColorPicker/ColorPicker.module.scss
+var ColorPicker_module_default = {
+  colorPicker: "ColorPicker_module_colorPicker",
+  topRow: "ColorPicker_module_topRow",
+  discWrapper: "ColorPicker_module_discWrapper",
+  disc: "ColorPicker_module_disc",
+  dot: "ColorPicker_module_dot",
+  lSlider: "ColorPicker_module_lSlider",
+  lThumb: "ColorPicker_module_lThumb",
+  alphaSlider: "ColorPicker_module_alphaSlider",
+  alphaThumb: "ColorPicker_module_alphaThumb",
+  previewSwatch: "ColorPicker_module_previewSwatch",
+  eyedropperBtn: "ColorPicker_module_eyedropperBtn",
+  inputSection: "ColorPicker_module_inputSection",
+  tabs: "ColorPicker_module_tabs",
+  tab: "ColorPicker_module_tab",
+  tabActive: "ColorPicker_module_tabActive",
+  inputWrapper: "ColorPicker_module_inputWrapper",
+  inputAddon: "ColorPicker_module_inputAddon",
+  input: "ColorPicker_module_input",
+  inputCopyBtn: "ColorPicker_module_inputCopyBtn",
+  recents: "ColorPicker_module_recents",
+  recentsLabel: "ColorPicker_module_recentsLabel",
+  swatches: "ColorPicker_module_swatches",
+  recentSwatch: "ColorPicker_module_recentSwatch"
+};
+var DISC = 200;
+var CopyIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "7", height: "7", rx: "1.5", stroke: "currentColor", strokeWidth: "1.4" }),
+  /* @__PURE__ */ jsx("path", { d: "M2 9V2.5A.5.5 0 0 1 2.5 2H9", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })
+] });
+var CheckIcon2 = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2.5 7L5.5 10L11.5 4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var EyedropperIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ jsx("path", { d: "M9.5 2.5L11.5 4.5L6 10L3 11L4 8L9.5 2.5Z", stroke: "currentColor", strokeWidth: "1.4", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 4L10 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("circle", { cx: "2.5", cy: "11.5", r: "1", fill: "currentColor" })
+] });
+function formatValue(mode, h, s, l, r, g, b, hex) {
+  if (mode === "hex") return hex.replace("#", "");
+  if (mode === "hsl") return `${Math.round(h)} ${Math.round(s)} ${Math.round(l)}`;
+  return `${r} ${g} ${b}`;
+}
+function parseValue(mode, raw) {
+  if (mode === "hex") {
+    const clean = raw.replace(/^#/, "");
+    if (!/^[0-9a-fA-F]{6}$/.test(clean)) return null;
+    const [h, s, l] = hexToHsl(`#${clean}`);
+    return [h, s, l];
+  }
+  const parts = raw.trim().split(/[\s,]+/).map(Number);
+  if (parts.length !== 3 || parts.some(isNaN)) return null;
+  if (mode === "hsl") {
+    const [h, s, l] = parts;
+    if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100) return null;
+    return [h, s, l];
+  }
+  const [r, g, b] = parts;
+  if ([r, g, b].some((v) => v < 0 || v > 255)) return null;
+  return rgbToHsl(r, g, b);
+}
+var ColorInput = ({ mode, h, s, l, r, g, b, hex, onChange, onCopy, copied }) => {
+  const [draft, setDraft] = useState(() => formatValue(mode, h, s, l, r, g, b, hex));
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    if (!focused) setDraft(formatValue(mode, h, s, l, r, g, b, hex));
+  }, [focused, mode, h, s, l, r, g, b, hex]);
+  const placeholder = mode === "hex" ? "3b82f6" : mode === "hsl" ? "217 91 60" : "59 130 246";
+  return /* @__PURE__ */ jsxs("div", { className: ColorPicker_module_default.inputWrapper, children: [
+    mode === "hex" && /* @__PURE__ */ jsx("span", { className: ColorPicker_module_default.inputAddon, children: "#" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: ColorPicker_module_default.input,
+        value: draft,
+        placeholder,
+        spellCheck: false,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        onChange: (e) => {
+          const raw = e.target.value;
+          setDraft(raw);
+          const result = parseValue(mode, raw);
+          if (result) onChange(...result);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { className: ColorPicker_module_default.inputCopyBtn, onClick: onCopy, tabIndex: -1, title: "Copia", children: copied ? /* @__PURE__ */ jsx(CheckIcon2, {}) : /* @__PURE__ */ jsx(CopyIcon, {}) })
+  ] });
+};
+function parseInitial(value) {
+  if (value?.startsWith("#")) {
+    const [h, s, l] = hexToHsl(value);
+    return [h, s, l, 1];
+  }
+  return [217, 91, 60, 1];
+}
+var ColorPicker = ({
+  value,
+  onChange,
+  showAlpha = true,
+  recentColors = [],
+  accent,
+  className
+}) => {
+  const init = parseInitial(value);
+  const [h, setH] = useState(init[0]);
+  const [s, setS] = useState(init[1]);
+  const [l, setL] = useState(init[2]);
+  const [a, setA] = useState(init[3]);
+  const [mode, setMode] = useState("hex");
+  const [copied, setCopied] = useState(false);
+  const [hasEyeDropper, setHasEyeDropper] = useState(false);
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    setHasEyeDropper(typeof window !== "undefined" && "EyeDropper" in window);
+  }, []);
+  useEffect(() => {
+    if (value?.startsWith("#")) {
+      const [nh, ns, nl] = hexToHsl(value);
+      setH(nh);
+      setS(ns);
+      setL(nl);
+    }
+  }, [value]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const img = ctx.createImageData(DISC, DISC);
+    const data = img.data;
+    const cx = DISC / 2;
+    const cy = DISC / 2;
+    const radius = DISC / 2;
+    for (let py = 0; py < DISC; py++) {
+      for (let px = 0; px < DISC; px++) {
+        const dx = px - cx;
+        const dy = py - cy;
+        const r = Math.sqrt(dx * dx + dy * dy);
+        const idx = (py * DISC + px) * 4;
+        if (r > radius) {
+          data[idx + 3] = 0;
+          continue;
+        }
+        const theta = Math.atan2(dy, dx) * 180 / Math.PI;
+        const hue = (theta + 360) % 360;
+        const sat = r / radius * 100;
+        const { r: rr2, g: gg2, b: bb2 } = hslToRgb(hue, sat, l);
+        data[idx] = rr2;
+        data[idx + 1] = gg2;
+        data[idx + 2] = bb2;
+        data[idx + 3] = r > radius - 1 ? Math.round(255 * (radius - r)) : 255;
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+  }, [l]);
+  const notify = useCallback(
+    (nh, ns, nl, na) => {
+      onChange?.(buildColorValue(nh, ns, nl, na));
+    },
+    [onChange]
+  );
+  const updateDisc = useCallback(
+    (clientX, clientY, rect) => {
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = clientX - cx;
+      const dy = clientY - cy;
+      const r = Math.sqrt(dx * dx + dy * dy);
+      const radius = rect.width / 2;
+      const clampedR = Math.min(r, radius);
+      const theta = Math.atan2(dy, dx) * 180 / Math.PI;
+      const nh = (theta + 360) % 360;
+      const ns = clampedR / radius * 100;
+      setH(nh);
+      setS(ns);
+      notify(nh, ns, l, a);
+    },
+    [l, a, notify]
+  );
+  const handleDiscPointerDown = useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateDisc(e.clientX, e.clientY, e.currentTarget.getBoundingClientRect());
+    },
+    [updateDisc]
+  );
+  const handleDiscPointerMove = useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateDisc(e.clientX, e.clientY, e.currentTarget.getBoundingClientRect());
+    },
+    [updateDisc]
+  );
+  const updateL = useCallback(
+    (clientX, rect) => {
+      const nl = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
+      setL(nl);
+      notify(h, s, nl, a);
+    },
+    [h, s, a, notify]
+  );
+  const handleLPointerDown = useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateL]
+  );
+  const handleLPointerMove = useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateL]
+  );
+  const updateA = useCallback(
+    (clientX, rect) => {
+      const na = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      setA(na);
+      notify(h, s, l, na);
+    },
+    [h, s, l, notify]
+  );
+  const handleAPointerDown = useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateA]
+  );
+  const handleAPointerMove = useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateA]
+  );
+  const { r: rr, g: gg, b: bb } = hslToRgb(h, s, l);
+  const hexStr = hslToHex(h, s, l);
+  const rgbStr = `rgb(${rr}, ${gg}, ${bb})`;
+  const colorValue = buildColorValue(h, s, l, a);
+  const dotX = DISC / 2 + s / 100 * (DISC / 2) * Math.cos(h * Math.PI / 180);
+  const dotY = DISC / 2 + s / 100 * (DISC / 2) * Math.sin(h * Math.PI / 180);
+  const lGradient = `linear-gradient(to right,
+    hsl(${h}, ${s}%, 5%),
+    hsl(${h}, ${s}%, 50%),
+    hsl(${h}, ${s}%, 95%))`;
+  const alphaGradient = `linear-gradient(to right, transparent, ${rgbStr})`;
+  const handleEyeDropper = async () => {
+    if (!window.EyeDropper) return;
+    try {
+      const result = await new window.EyeDropper().open();
+      const [nh, ns, nl] = hexToHsl(result.sRGBHex);
+      setH(nh);
+      setS(ns);
+      setL(nl);
+      notify(nh, ns, nl, a);
+    } catch {
+    }
+  };
+  const handleCopy = () => {
+    const text = mode === "hex" ? colorValue.hexa : mode === "hsl" ? colorValue.hsla : colorValue.rgba;
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  const handleSwatch = (color) => {
+    const [nh, ns, nl] = hexToHsl(color);
+    setH(nh);
+    setS(ns);
+    setL(nl);
+    notify(nh, ns, nl, a);
+  };
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "colorpicker") : {};
+  mode === "hex" ? colorValue.hexa : mode === "hsl" ? colorValue.hsla : colorValue.rgba;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [ColorPicker_module_default.colorPicker, className ?? ""].filter(Boolean).join(" "),
+      style: accentVars,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: ColorPicker_module_default.topRow, children: /* @__PURE__ */ jsxs("div", { className: ColorPicker_module_default.discWrapper, children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              width: DISC,
+              height: DISC,
+              className: ColorPicker_module_default.disc,
+              onPointerDown: handleDiscPointerDown,
+              onPointerMove: handleDiscPointerMove
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: ColorPicker_module_default.dot,
+              style: {
+                left: dotX,
+                top: dotY,
+                borderColor: l > 55 ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.85)"
+              }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.lSlider,
+            style: { backgroundImage: lGradient },
+            onPointerDown: handleLPointerDown,
+            onPointerMove: handleLPointerMove,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: ColorPicker_module_default.lThumb,
+                style: { left: `${l}%` }
+              }
+            )
+          }
+        ),
+        showAlpha && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.alphaSlider,
+            style: { backgroundImage: alphaGradient },
+            onPointerDown: handleAPointerDown,
+            onPointerMove: handleAPointerMove,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: ColorPicker_module_default.alphaThumb,
+                style: { left: `${a * 100}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.previewSwatch,
+            style: { background: showAlpha ? colorValue.rgba : hexStr },
+            children: hasEyeDropper && /* @__PURE__ */ jsx("button", { className: ColorPicker_module_default.eyedropperBtn, onClick: handleEyeDropper, title: "Pick color", children: /* @__PURE__ */ jsx(EyedropperIcon, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: ColorPicker_module_default.inputSection, children: [
+          /* @__PURE__ */ jsx("div", { className: ColorPicker_module_default.tabs, children: ["hex", "hsl", "rgb"].map((m) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: [ColorPicker_module_default.tab, mode === m ? ColorPicker_module_default.tabActive : ""].filter(Boolean).join(" "),
+              onClick: () => setMode(m),
+              children: m.toUpperCase()
+            },
+            m
+          )) }),
+          /* @__PURE__ */ jsx(
+            ColorInput,
+            {
+              mode,
+              h,
+              s,
+              l,
+              r: rr,
+              g: gg,
+              b: bb,
+              hex: hexStr,
+              onChange: (nh, ns, nl) => {
+                setH(nh);
+                setS(ns);
+                setL(nl);
+                notify(nh, ns, nl, a);
+              },
+              onCopy: handleCopy,
+              copied
+            }
+          )
+        ] }),
+        recentColors.length > 0 && /* @__PURE__ */ jsxs("div", { className: ColorPicker_module_default.recents, children: [
+          /* @__PURE__ */ jsx("span", { className: ColorPicker_module_default.recentsLabel, children: "Recent" }),
+          /* @__PURE__ */ jsx("div", { className: ColorPicker_module_default.swatches, children: recentColors.slice(0, 8).map((c, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: ColorPicker_module_default.recentSwatch,
+              style: { background: c },
+              onClick: () => handleSwatch(c),
+              title: c
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+export { Badge, Button, ColorPicker, Input, RainCanvas, Timeline };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map