@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

package/dist/esm/components/core/ColorPicker.js

@@ -0,0 +1,348 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["value", "defaultValue", "onChange", "swatches", "showAlpha", "size", "disabled", "className", "label", "id"];
+/**
+ * ColorPicker.jsx
+ * A reusable, accessible, and Tailwind-friendly color picker component (plain JavaScript)
+ * - Controlled or uncontrolled
+ * - Presets (swatches), hex input, HSL sliders, alpha
+ * - No external deps
+ *
+ * Props:
+ *  - value           // controlled hex / rgba string
+ *  - defaultValue    // uncontrolled initial value
+ *  - onChange        // receives normalized rgba string: `rgba(r,g,b,a)`
+ *  - swatches        // array of hex/rgba strings
+ *  - showAlpha       // boolean
+ *  - size            // "sm" | "md" | "lg"
+ *  - disabled        // boolean
+ *  - className       // string
+ *  - label           // string
+ *  - id              // string
+ */
+// ---------- Utilities ----------
+function clamp(n) {
+  var a = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var b = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return Math.min(b, Math.max(a, n));
+}
+function hexToRgba(hex) {
+  var h = hex.replace(/^#/, "").trim();
+  if (!/^[0-9a-fA-F]+$/.test(h)) return null;
+  if (h.length === 3) {
+    var r = parseInt(h[0] + h[0], 16);
+    var g = parseInt(h[1] + h[1], 16);
+    var b = parseInt(h[2] + h[2], 16);
+    return {
+      r: r,
+      g: g,
+      b: b,
+      a: 1
+    };
+  }
+  if (h.length === 4) {
+    var _r = parseInt(h[0] + h[0], 16);
+    var _g = parseInt(h[1] + h[1], 16);
+    var _b = parseInt(h[2] + h[2], 16);
+    var a = parseInt(h[3] + h[3], 16) / 255;
+    return {
+      r: _r,
+      g: _g,
+      b: _b,
+      a: a
+    };
+  }
+  if (h.length === 6) {
+    var _r2 = parseInt(h.slice(0, 2), 16);
+    var _g2 = parseInt(h.slice(2, 4), 16);
+    var _b2 = parseInt(h.slice(4, 6), 16);
+    return {
+      r: _r2,
+      g: _g2,
+      b: _b2,
+      a: 1
+    };
+  }
+  if (h.length === 8) {
+    var _r3 = parseInt(h.slice(0, 2), 16);
+    var _g3 = parseInt(h.slice(2, 4), 16);
+    var _b3 = parseInt(h.slice(4, 6), 16);
+    var _a = parseInt(h.slice(6, 8), 16) / 255;
+    return {
+      r: _r3,
+      g: _g3,
+      b: _b3,
+      a: _a
+    };
+  }
+  return null;
+}
+function rgbaToHex(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b,
+    a = _ref.a;
+  var showAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var toHex = function toHex(v) {
+    return v.toString(16).padStart(2, "0");
+  };
+  var includeAlpha = showAlpha && typeof a === "number" && a !== 1;
+  var aa = includeAlpha ? Math.round(clamp(a, 0, 1) * 255) : undefined;
+  return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).concat(aa !== undefined ? toHex(aa) : "");
+}
+function parseColor(input) {
+  if (!input) return null;
+  var s = input.trim();
+  if (s.startsWith("#")) return hexToRgba(s);
+  var rgbaMatch = s.match(/rgba?\(([^)]+)\)/i);
+  if (rgbaMatch) {
+    var parts = rgbaMatch[1].split(",").map(function (p) {
+      return p.trim();
+    });
+    var _parts$slice$map = parts.slice(0, 3).map(function (x) {
+        return parseInt(x, 10);
+      }),
+      _parts$slice$map2 = _slicedToArray(_parts$slice$map, 3),
+      r = _parts$slice$map2[0],
+      g = _parts$slice$map2[1],
+      b = _parts$slice$map2[2];
+    var a = 1;
+    if (parts[3] !== undefined) a = parseFloat(parts[3]);
+    return {
+      r: r,
+      g: g,
+      b: b,
+      a: a
+    };
+  }
+  return null;
+}
+function rgbaToString(_ref2) {
+  var r = _ref2.r,
+    g = _ref2.g,
+    b = _ref2.b,
+    _ref2$a = _ref2.a,
+    a = _ref2$a === void 0 ? 1 : _ref2$a;
+  if (a === undefined || a === 1) return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(+a.toFixed(3), ")");
+}
+// ---------- Component ----------
+var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
+  var _internal$a, _internal$a2;
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    _props$swatches = props.swatches,
+    swatches = _props$swatches === void 0 ? [] : _props$swatches,
+    _props$showAlpha = props.showAlpha,
+    showAlpha = _props$showAlpha === void 0 ? false : _props$showAlpha,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "md" : _props$size,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$label = props.label,
+    label = _props$label === void 0 ? "Pick a color" : _props$label,
+    id = props.id,
+    rest = _objectWithoutProperties(props, _excluded);
+  var parsedControlled = useMemo(function () {
+    return parseColor(value !== null && value !== void 0 ? value : null);
+  }, [value]);
+  var parsedDefault = useMemo(function () {
+    return parseColor(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "#000000");
+  }, [defaultValue]);
+  var _useState = useState(function () {
+      var _ref3;
+      return (_ref3 = parsedControlled !== null && parsedControlled !== void 0 ? parsedControlled : parsedDefault) !== null && _ref3 !== void 0 ? _ref3 : {
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 1
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    internal = _useState2[0],
+    setInternal = _useState2[1];
+  // Sync from a controlled `value` (adjust-during-render pattern).
+  var _useState3 = useState(parsedControlled),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevControlled = _useState4[0],
+    setPrevControlled = _useState4[1];
+  if (parsedControlled !== prevControlled) {
+    setPrevControlled(parsedControlled);
+    if (parsedControlled) setInternal(parsedControlled);
+  }
+  function pushChange(next) {
+    var n = {
+      r: Math.round(clamp(next.r, 0, 255)),
+      g: Math.round(clamp(next.g, 0, 255)),
+      b: Math.round(clamp(next.b, 0, 255)),
+      a: next.a === undefined ? 1 : clamp(next.a, 0, 1)
+    };
+    if (!value) setInternal(n);
+    onChange && onChange(rgbaToString(n));
+  }
+  var sizeMaps = {
+    sm: {
+      swatch: "w-6 h-6",
+      font: "text-sm",
+      gap: "gap-2"
+    },
+    md: {
+      swatch: "w-8 h-8",
+      font: "text-sm",
+      gap: "gap-3"
+    },
+    lg: {
+      swatch: "w-10 h-10",
+      font: "text-base",
+      gap: "gap-4"
+    }
+  };
+  // Sizes outside sm/md/lg (the shared `Size` type also lists xs/xl/2xl) fall
+  // back to md instead of crashing on an undefined map entry.
+  var sizeMap = sizeMaps[size] || sizeMaps.md;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("inline-block", className)
+  }, rest), {}, {
+    children: [jsx("label", {
+      className: "block mb-2 ".concat(sizeMap.font),
+      htmlFor: id,
+      children: label
+    }), jsxs("div", {
+      className: "flex ".concat(sizeMap.gap, " items-start flex-col"),
+      children: [jsx("div", {
+        className: "flex flex-wrap ".concat(sizeMap.gap),
+        children: swatches.map(function (s, i) {
+          var _parseColor;
+          var c = (_parseColor = parseColor(s)) !== null && _parseColor !== void 0 ? _parseColor : {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1
+          };
+          return jsx("button", {
+            type: "button",
+            "aria-label": "Select ".concat(s),
+            disabled: disabled,
+            onClick: function onClick() {
+              return pushChange(c);
+            },
+            className: "rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 ".concat(sizeMap.swatch, " overflow-hidden"),
+            style: {
+              background: "rgba(".concat(c.r, ",").concat(c.g, ",").concat(c.b, ",").concat(c.a, ")")
+            },
+            title: s
+          }, i);
+        })
+      }), jsxs("div", {
+        className: "flex-1 min-w-[220px]",
+        children: [jsxs("div", {
+          className: "flex items-center gap-3",
+          children: [jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [jsx("div", {
+              className: "rounded-md border border-gray-200 overflow-hidden w-12 h-12 flex items-center justify-center",
+              style: {
+                background: "rgba(".concat(internal.r, ", ").concat(internal.g, ", ").concat(internal.b, ", ").concat(internal.a, ")")
+              }
+            }), jsxs("div", {
+              className: "flex flex-col",
+              children: [jsx("div", {
+                className: "text-xs text-primary-500",
+                children: "Current"
+              }), jsx("div", {
+                className: "font-mono text-sm",
+                children: rgbaToHex(internal, showAlpha)
+              })]
+            })]
+          }), jsx("input", {
+            type: "color",
+            disabled: disabled,
+            value: rgbaToHex(internal, false).slice(0, 7),
+            onChange: function onChange(e) {
+              var parsed = hexToRgba(e.target.value);
+              if (parsed) pushChange(_objectSpread2(_objectSpread2({}, parsed), {}, {
+                a: internal.a
+              }));
+            },
+            className: "w-10 h-10 p-0 border-none bg-transparent",
+            "aria-label": "Native color input"
+          }), jsx("div", {
+            className: "flex-1",
+            children: jsx("input", {
+              type: "text",
+              disabled: disabled,
+              value: showAlpha ? rgbaToString(internal) : rgbaToHex(internal, showAlpha),
+              onChange: function onChange(e) {
+                var v = e.target.value;
+                var p = parseColor(v);
+                if (p) pushChange(p);else {
+                  var maybe = v.startsWith("#") ? v : "#".concat(v);
+                  var ph = hexToRgba(maybe);
+                  if (ph) pushChange(_objectSpread2(_objectSpread2({}, ph), {}, {
+                    a: internal.a
+                  }));
+                }
+              },
+              className: "w-full rounded-md border border-gray-200 px-2 py-1 font-mono",
+              "aria-label": "Color value"
+            })
+          })]
+        }), jsx("div", {
+          className: "mt-3 space-y-2",
+          children: showAlpha && jsx(Slider, {
+            label: "Alpha (".concat(Math.round(((_internal$a = internal.a) !== null && _internal$a !== void 0 ? _internal$a : 1) * 100), "%)"),
+            min: 0,
+            max: 100,
+            value: Math.round(((_internal$a2 = internal.a) !== null && _internal$a2 !== void 0 ? _internal$a2 : 1) * 100),
+            onChange: function onChange(v) {
+              pushChange(_objectSpread2(_objectSpread2({}, internal), {}, {
+                a: clamp(v / 100, 0, 1)
+              }));
+            },
+            disabled: disabled
+          })
+        })]
+      })]
+    })]
+  }));
+});
+ColorPicker.displayName = "ColorPicker";
+function Slider(_ref4) {
+  var label = _ref4.label,
+    min = _ref4.min,
+    max = _ref4.max,
+    value = _ref4.value,
+    _onChange = _ref4.onChange,
+    disabled = _ref4.disabled;
+  return jsxs("div", {
+    className: "flex items-center gap-3",
+    children: [jsx("div", {
+      className: "w-36 text-sm text-primary-600",
+      children: label
+    }), jsx("input", {
+      type: "range",
+      min: min,
+      max: max,
+      value: value,
+      disabled: disabled,
+      onChange: function onChange(e) {
+        return _onChange(Number(e.target.value));
+      },
+      className: "w-full h-2 rounded-lg appearance-none bg-gray-200",
+      "aria-label": label
+    }), jsx("div", {
+      className: "w-14 text-right font-mono text-sm",
+      children: value
+    })]
+  });
+}
+
+export { ColorPicker as default };