@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/color-control.mjs

@@ -0,0 +1,497 @@
+// src/components/color-control/color-control.tsx
+import { useState as useState2, useEffect, useCallback as useCallback2 } from "react";
+
+// src/components/slider/Slider.tsx
+import React, { useState, useCallback, useRef } from "react";
+
+// src/components/icons/icons.tsx
+import { Icon as IconifyIcon } from "@iconify/react";
+import { jsx } from "react/jsx-runtime";
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.includes(":") ? name : `heroicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    IconifyIcon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/icons/iconConstants.ts
+var NAVIGATION_ICONS = {
+  home: "home-solid",
+  dashboard: "squares-2x2-solid",
+  profile: "user-solid",
+  settings: "cog-solid",
+  logout: "arrow-right-on-rectangle-solid",
+  login: "arrow-left-on-rectangle-solid",
+  notifications: "bell-solid",
+  messages: "chat-bubble-left-solid",
+  help: "question-mark-circle-solid",
+  support: "lifebuoy-solid",
+  chevronDown: "chevron-down-solid",
+  chevronUp: "chevron-up-solid",
+  chevronLeft: "chevron-left-solid",
+  chevronRight: "chevron-right-solid"
+};
+
+// src/components/slider/Slider.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Slider = ({
+  min = 0,
+  max = 100,
+  value,
+  step = 1,
+  onChange,
+  onDragStart,
+  onChangeEnd,
+  label,
+  showValue = true,
+  className = "",
+  disabled = false,
+  type = "default",
+  baseHue = 0,
+  baseSaturation = 70
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const valueRef = useRef(value);
+  React.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  const handleChange = useCallback((event) => {
+    const newValue = parseFloat(event.target.value);
+    onChange(newValue);
+  }, [onChange]);
+  const getValueFromPosition = useCallback((clientX) => {
+    if (!containerRef.current) return value;
+    const rect = containerRef.current.getBoundingClientRect();
+    const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const rawValue = min + percentage * (max - min);
+    const steppedValue = Math.round(rawValue / step) * step;
+    return Math.max(min, Math.min(max, steppedValue));
+  }, [min, max, step, value]);
+  const handleMouseDown = useCallback((event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    onDragStart?.();
+    const newValue = getValueFromPosition(event.clientX);
+    onChange(newValue);
+  }, [disabled, onDragStart, getValueFromPosition, onChange]);
+  const handleMouseMove = useCallback((event) => {
+    if (!isDragging) return;
+    event.preventDefault();
+    const newValue = getValueFromPosition(event.clientX);
+    onChange(newValue);
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    onChangeEnd?.(valueRef.current);
+  }, [isDragging, onChangeEnd]);
+  React.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleTouchStart = useCallback((event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    onDragStart?.();
+    const touch = event.touches[0];
+    const newValue = getValueFromPosition(touch.clientX);
+    onChange(newValue);
+  }, [disabled, onDragStart, getValueFromPosition, onChange]);
+  const handleTouchMove = useCallback((event) => {
+    if (!isDragging) return;
+    event.preventDefault();
+    const touch = event.touches[0];
+    const newValue = getValueFromPosition(touch.clientX);
+    onChange(newValue);
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleTouchEnd = useCallback(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    onChangeEnd?.(valueRef.current);
+  }, [isDragging, onChangeEnd]);
+  React.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("touchmove", handleTouchMove);
+    document.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [isDragging, handleTouchMove, handleTouchEnd]);
+  const sliderClasses = [
+    "slider",
+    `slider--${type}`,
+    isDragging && "slider--dragging",
+    disabled && "slider--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const getBackground = () => {
+    switch (type) {
+      case "hue":
+        return "linear-gradient(to right, hsl(0, 70%, 50%), hsl(60, 70%, 50%), hsl(120, 70%, 50%), hsl(180, 70%, 50%), hsl(240, 70%, 50%), hsl(300, 70%, 50%), hsl(360, 70%, 50%))";
+      case "saturation":
+        return `linear-gradient(to right, hsl(${baseHue}, 0%, 50%), hsl(${baseHue}, 100%, 50%))`;
+      case "lightness":
+        return `linear-gradient(to right, hsl(${baseHue}, ${baseSaturation}%, 0%), hsl(${baseHue}, ${baseSaturation}%, 50%), hsl(${baseHue}, ${baseSaturation}%, 100%))`;
+      default:
+        return "var(--color-action-primary)";
+    }
+  };
+  const inputStyle = { background: getBackground() };
+  const stepMarks = step > 1 ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => min + i * step) : [];
+  const thumbPosition = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs("div", { className: sliderClasses, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "slider__header", children: [
+      label && /* @__PURE__ */ jsx2("label", { className: "slider__label", children: label }),
+      showValue && /* @__PURE__ */ jsx2("span", { className: "slider__value", children: value })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "slider__container", ref: containerRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref: inputRef,
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: handleChange,
+          className: "slider__input",
+          style: inputStyle,
+          disabled,
+          readOnly: true
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "slider__thumb",
+          style: {
+            left: `${thumbPosition}%`,
+            transform: "translateX(-50%)"
+          },
+          children: /* @__PURE__ */ jsx2("div", { className: "slider__thumb-icon", children: /* @__PURE__ */ jsx2(Icon, { name: NAVIGATION_ICONS.chevronDown, size: 16 }) })
+        }
+      ),
+      stepMarks.length > 0 && /* @__PURE__ */ jsx2("div", { className: "slider__marks", children: stepMarks.map((mark) => /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "slider__mark",
+          style: {
+            left: `${(mark - min) / (max - min) * 100}%`
+          }
+        },
+        mark
+      )) })
+    ] })
+  ] });
+};
+
+// src/components/color-control/color-control.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var getCSSVariable = (variable) => {
+  if (typeof window === "undefined") return 0;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+  return value ? parseInt(value, 10) : 0;
+};
+var loadColorsFromCSS = () => {
+  return {
+    hues: {
+      primary: getCSSVariable("--primary-hue"),
+      secondary: getCSSVariable("--secondary-hue"),
+      accent: getCSSVariable("--accent-hue"),
+      success: getCSSVariable("--success-hue"),
+      warning: getCSSVariable("--warning-hue"),
+      error: getCSSVariable("--error-hue"),
+      info: getCSSVariable("--info-hue")
+    },
+    saturations: {
+      primary: getCSSVariable("--primary-saturation"),
+      secondary: getCSSVariable("--secondary-saturation"),
+      accent: getCSSVariable("--accent-saturation"),
+      success: getCSSVariable("--success-saturation"),
+      warning: getCSSVariable("--warning-saturation"),
+      error: getCSSVariable("--error-saturation"),
+      info: getCSSVariable("--info-saturation")
+    },
+    lightnesses: {
+      primary: getCSSVariable("--primary-lightness"),
+      secondary: getCSSVariable("--secondary-lightness"),
+      accent: getCSSVariable("--accent-lightness"),
+      success: getCSSVariable("--success-lightness"),
+      warning: getCSSVariable("--warning-lightness"),
+      error: getCSSVariable("--error-lightness"),
+      info: getCSSVariable("--info-lightness")
+    }
+  };
+};
+var ColorControl = () => {
+  const [colors, setColors] = useState2(() => {
+    const saved = localStorage.getItem("color-config");
+    return saved ? JSON.parse(saved) : loadColorsFromCSS();
+  });
+  const [pendingColors, setPendingColors] = useState2(colors);
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty("--hue-primary", colors.hues.primary.toString());
+    root.style.setProperty("--hue-secondary", colors.hues.secondary.toString());
+    root.style.setProperty("--hue-accent", colors.hues.accent.toString());
+    root.style.setProperty("--hue-success", colors.hues.success.toString());
+    root.style.setProperty("--hue-warning", colors.hues.warning.toString());
+    root.style.setProperty("--hue-error", colors.hues.error.toString());
+    root.style.setProperty("--hue-info", colors.hues.info.toString());
+    root.style.setProperty("--saturation-primary", `${colors.saturations.primary}%`);
+    root.style.setProperty("--saturation-secondary", `${colors.saturations.secondary}%`);
+    root.style.setProperty("--saturation-accent", `${colors.saturations.accent}%`);
+    root.style.setProperty("--saturation-success", `${colors.saturations.success}%`);
+    root.style.setProperty("--saturation-warning", `${colors.saturations.warning}%`);
+    root.style.setProperty("--saturation-error", `${colors.saturations.error}%`);
+    root.style.setProperty("--saturation-info", `${colors.saturations.info}%`);
+    root.style.setProperty("--lightness-primary", `${colors.lightnesses.primary}%`);
+    root.style.setProperty("--lightness-secondary", `${colors.lightnesses.secondary}%`);
+    root.style.setProperty("--lightness-accent", `${colors.lightnesses.accent}%`);
+    root.style.setProperty("--lightness-success", `${colors.lightnesses.success}%`);
+    root.style.setProperty("--lightness-warning", `${colors.lightnesses.warning}%`);
+    root.style.setProperty("--lightness-error", `${colors.lightnesses.error}%`);
+    root.style.setProperty("--lightness-info", `${colors.lightnesses.info}%`);
+  }, []);
+  const commitColorChange = useCallback2((color, property, value) => {
+    setColors((prev) => {
+      const newColors = {
+        ...prev,
+        [property === "hue" ? "hues" : property === "saturation" ? "saturations" : "lightnesses"]: {
+          ...prev[property === "hue" ? "hues" : property === "saturation" ? "saturations" : "lightnesses"],
+          [color]: value
+        }
+      };
+      const root = document.documentElement;
+      const cssVar = property === "hue" ? `--hue-${color}` : `--${property}-${color}`;
+      const cssValue = property === "hue" ? value.toString() : `${value}%`;
+      root.style.setProperty(cssVar, cssValue);
+      localStorage.setItem("color-config", JSON.stringify(newColors));
+      return newColors;
+    });
+  }, []);
+  const resetToDefaults = useCallback2(() => {
+    const cssColors = loadColorsFromCSS();
+    setColors(cssColors);
+    setPendingColors(cssColors);
+  }, []);
+  const renderColorControls = (colorName) => {
+    const hue = pendingColors.hues[colorName];
+    const saturation = pendingColors.saturations[colorName];
+    const lightness = pendingColors.lightnesses[colorName];
+    return /* @__PURE__ */ jsxs2("div", { className: "color-control__color-group", children: [
+      /* @__PURE__ */ jsx3("h4", { className: "color-control__color-title", children: colorName.charAt(0).toUpperCase() + colorName.slice(1) }),
+      /* @__PURE__ */ jsxs2("div", { className: "color-control__controls-row", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "color-control__control", children: [
+          /* @__PURE__ */ jsx3("label", { className: "color-control__label", children: "Hue" }),
+          /* @__PURE__ */ jsx3(
+            Slider,
+            {
+              label: "",
+              value: hue,
+              min: 0,
+              max: 360,
+              step: 1,
+              onChange: (v) => setPendingColors((prev) => ({
+                ...prev,
+                hues: { ...prev.hues, [colorName]: v }
+              })),
+              onChangeEnd: (v) => {
+                setPendingColors((prev) => ({
+                  ...prev,
+                  hues: { ...prev.hues, [colorName]: v }
+                }));
+                commitColorChange(colorName, "hue", v);
+              },
+              type: "hue",
+              showValue: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "color-control__control", children: [
+          /* @__PURE__ */ jsx3("label", { className: "color-control__label", children: "Saturation" }),
+          /* @__PURE__ */ jsx3(
+            Slider,
+            {
+              label: "",
+              value: saturation,
+              min: 0,
+              max: 100,
+              step: 1,
+              onChange: (v) => setPendingColors((prev) => ({
+                ...prev,
+                saturations: { ...prev.saturations, [colorName]: v }
+              })),
+              onChangeEnd: (v) => {
+                setPendingColors((prev) => ({
+                  ...prev,
+                  saturations: { ...prev.saturations, [colorName]: v }
+                }));
+                commitColorChange(colorName, "saturation", v);
+              },
+              type: "saturation",
+              baseHue: hue,
+              showValue: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "color-control__control", children: [
+          /* @__PURE__ */ jsx3("label", { className: "color-control__label", children: "Lightness" }),
+          /* @__PURE__ */ jsx3(
+            Slider,
+            {
+              label: "",
+              value: lightness,
+              min: 0,
+              max: 100,
+              step: 1,
+              onChange: (v) => setPendingColors((prev) => ({
+                ...prev,
+                lightnesses: { ...prev.lightnesses, [colorName]: v }
+              })),
+              onChangeEnd: (v) => {
+                setPendingColors((prev) => ({
+                  ...prev,
+                  lightnesses: { ...prev.lightnesses, [colorName]: v }
+                }));
+                commitColorChange(colorName, "lightness", v);
+              },
+              type: "lightness",
+              baseHue: hue,
+              baseSaturation: saturation,
+              showValue: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "color-control__preview",
+            style: {
+              backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+              border: "2px solid var(--color-neutral-300)"
+            }
+          }
+        )
+      ] })
+    ] }, colorName);
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "color-control", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "color-control__header", children: [
+      /* @__PURE__ */ jsx3("h3", { className: "color-control__title", children: "Paleta de Cores" }),
+      /* @__PURE__ */ jsx3("p", { className: "color-control__description", children: "Ajuste o matiz, satura\xE7\xE3o e luminosidade das cores. As mudan\xE7as s\xE3o aplicadas instantaneamente." })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "color-control__sliders", children: [
+      renderColorControls("primary"),
+      renderColorControls("secondary"),
+      renderColorControls("accent"),
+      renderColorControls("success"),
+      renderColorControls("warning"),
+      renderColorControls("error"),
+      renderColorControls("info")
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "color-control__actions", children: /* @__PURE__ */ jsx3(
+      "button",
+      {
+        onClick: resetToDefaults,
+        className: "color-control__reset-btn",
+        children: "Restaurar Padr\xF5es"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2("div", { className: "color-control__preview-section", children: [
+      /* @__PURE__ */ jsx3("h4", { className: "color-control__preview-title", children: "Pr\xE9via das Cores" }),
+      /* @__PURE__ */ jsxs2("div", { className: "color-control__color-grid", children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.primary}, ${pendingColors.saturations.primary}%, ${pendingColors.lightnesses.primary}%)` },
+            children: "Primary"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.secondary}, ${pendingColors.saturations.secondary}%, ${pendingColors.lightnesses.secondary}%)` },
+            children: "Secondary"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.accent}, ${pendingColors.saturations.accent}%, ${pendingColors.lightnesses.accent}%)` },
+            children: "Accent"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.success}, ${pendingColors.saturations.success}%, ${pendingColors.lightnesses.success}%)` },
+            children: "Success"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.warning}, ${pendingColors.saturations.warning}%, ${pendingColors.lightnesses.warning}%)` },
+            children: "Warning"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.error}, ${pendingColors.saturations.error}%, ${pendingColors.lightnesses.error}%)` },
+            children: "Error"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.info}, ${pendingColors.saturations.info}%, ${pendingColors.lightnesses.info}%)` },
+            children: "Info"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  ColorControl
+};