@code0-tech/pictor 0.15.0 → 0.16.0

package/dist/components/form/ColorInput.js

@@ -0,0 +1,355 @@
+import { jsx as c, jsxs as C, Fragment as ae } from "react/jsx-runtime";
+import { c as v } from "../../_virtual/compiler-runtime.js";
+import { ColorPicker as g, parseColor as w } from "@ark-ui/react";
+import "../../utils/contextStore.js";
+import b from "react";
+import { mergeComponentProps as x } from "../../utils/component.js";
+import "js-md5";
+import { InputWrapper as se } from "./InputWrapper.js";
+import { Flex as ce } from "../flex/Flex.js";
+import { Badge as ee } from "../badge/Badge.js";
+import { Button as te } from "../button/Button.js";
+import { MenuTrigger as ie, Menu as ue, MenuPortal as he, MenuContent as me } from "../menu/Menu.js";
+import { SegmentedControlItem as q, SegmentedControl as de } from "../segmented-control/SegmentedControl.js";
+import { useCopyToClipboard as fe } from "@uidotdev/usehooks";
+import { useHotkeys as le } from "react-hotkeys-hook";
+import '../../assets/components/form/ColorInput.style.css';/* empty css                      */
+const L = b.createContext({
+  hasValue: !1,
+  placeholder: null
+}), pe = /^(#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|(rgba?|hsla?|hsba?)\(\s*-?[\d.]+%?(\s*,\s*-?[\d.]+%?){2,3}\s*\))$/i, J = (o) => {
+  const e = o.trim();
+  return pe.test(e) ? w(e) : void 0;
+}, ne = (o) => {
+  if (typeof o == "string") return J(o);
+  if (o != null)
+    return o;
+}, _e = (o) => {
+  const e = o.trim().replace(/°/g, "").replace(/deg\b/gi, "");
+  if (!e) return null;
+  const t = J(e);
+  if (t) {
+    const a = e.toLowerCase(), s = a.startsWith("#") ? "hexa" : a.startsWith("hsl") ? "hsla" : "rgba";
+    return {
+      color: t,
+      notation: s
+    };
+  }
+  if (/^[0-9a-f]+$/i.test(e) && (e.length === 6 || e.length === 8 || (e.length === 3 || e.length === 4) && /[a-f]/i.test(e))) return {
+    color: w(`#${e}`),
+    notation: "hexa"
+  };
+  const l = e.split(/[\s,]+/).filter(Boolean), r = l.map((a) => Number(a.replace("%", "")));
+  if ((l.length === 3 || l.length === 4) && r.every((a) => !Number.isNaN(a))) {
+    const a = l.length === 4 ? r[3] : 1;
+    return l[1].includes("%") || l[2].includes("%") ? {
+      color: w(`hsla(${r[0]}, ${r[1]}%, ${r[2]}%, ${a})`),
+      notation: "hsla"
+    } : {
+      color: w(`rgba(${r[0]}, ${r[1]}, ${r[2]}, ${a})`),
+      notation: "rgba"
+    };
+  }
+  return null;
+}, Be = (o) => {
+  const e = v.c(42), {
+    title: t,
+    description: n,
+    left: l,
+    leftType: r,
+    rightType: a,
+    right: s,
+    formValidation: i,
+    initialValue: h,
+    defaultValue: m,
+    value: u,
+    placeholder: f,
+    name: d,
+    disabled: p,
+    readOnly: _,
+    closeOnSelect: k,
+    onValueChange: G,
+    children: K
+  } = o, W = f === void 0 ? "Pick a color" : f, j = u ?? h ?? m;
+  let H;
+  e[0] !== j ? (H = ne(j), e[0] = j, e[1] = H) : H = e[1];
+  const S = H;
+  let A;
+  e[2] !== S ? (A = () => S ?? w("hsla(0, 0%, 0%, 1)"), e[2] = S, e[3] = A) : A = e[3];
+  const [z, Q] = b.useState(A);
+  let E;
+  e[4] !== S ? (E = () => S !== void 0, e[4] = S, e[5] = E) : E = e[5];
+  const [D, Y] = b.useState(E), [y, Z] = b.useState(!1);
+  let O, P;
+  e[6] !== u ? (O = () => {
+    if (u === void 0)
+      return;
+    const N = ne(u);
+    Y(N !== void 0), N && Q(N);
+  }, P = [u], e[6] = u, e[7] = O, e[8] = P) : (O = e[7], P = e[8]), b.useEffect(O, P);
+  let R;
+  e[9] !== i || e[10] !== G ? (R = (N) => {
+    Q(N.value), Y(!0), i?.setValue?.(N.value.toString("hsla")), G?.(N);
+  }, e[9] = i, e[10] = G, e[11] = R) : R = e[11];
+  const X = R;
+  let B;
+  e[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (B = (N) => Z(N.open), e[12] = B) : B = e[12];
+  let M;
+  e[13] !== k || e[14] !== z || e[15] !== p || e[16] !== X || e[17] !== d || e[18] !== y || e[19] !== _ ? (M = x("color-input", {
+    value: z,
+    onValueChange: X,
+    open: y,
+    onOpenChange: B,
+    name: d,
+    disabled: p,
+    readOnly: _,
+    closeOnSelect: k
+  }), e[13] = k, e[14] = z, e[15] = p, e[16] = X, e[17] = d, e[18] = y, e[19] = _, e[20] = M) : M = e[20];
+  const U = M;
+  let T;
+  e[21] !== D || e[22] !== W ? (T = {
+    hasValue: D,
+    placeholder: W
+  }, e[21] = D, e[22] = W, e[23] = T) : T = e[23];
+  let V;
+  e[24] !== K || e[25] !== n || e[26] !== i || e[27] !== l || e[28] !== r || e[29] !== s || e[30] !== a || e[31] !== t ? (V = /* @__PURE__ */ c(se, { title: t, description: n, left: l, leftType: r, right: s, rightType: a, formValidation: i, children: K }), e[24] = K, e[25] = n, e[26] = i, e[27] = l, e[28] = r, e[29] = s, e[30] = a, e[31] = t, e[32] = V) : V = e[32];
+  let $;
+  e[33] !== y || e[34] !== V ? ($ = /* @__PURE__ */ c(ue, { open: y, onOpenChange: Z, children: V }), e[33] = y, e[34] = V, e[35] = $) : $ = e[35];
+  let I;
+  e[36] !== T || e[37] !== $ ? (I = /* @__PURE__ */ c(L.Provider, { value: T, children: $ }), e[36] = T, e[37] = $, e[38] = I) : I = e[38];
+  let F;
+  return e[39] !== U || e[40] !== I ? (F = /* @__PURE__ */ c(g.Root, { ...U, children: I }), e[39] = U, e[40] = I, e[41] = F) : F = e[41], F;
+}, Me = (o) => {
+  const e = v.c(9);
+  let t, n, l;
+  if (e[0] !== o) {
+    const {
+      children: i,
+      ...h
+    } = o;
+    n = i, t = g.Control, l = x("color-input__control", h), e[0] = o, e[1] = t, e[2] = n, e[3] = l;
+  } else
+    t = e[1], n = e[2], l = e[3];
+  const r = l;
+  let a;
+  e[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ c(g.HiddenInput, {}), e[4] = a) : a = e[4];
+  let s;
+  return e[5] !== t || e[6] !== n || e[7] !== r ? (s = /* @__PURE__ */ C(t, { ...r, children: [
+    n,
+    a
+  ] }), e[5] = t, e[6] = n, e[7] = r, e[8] = s) : s = e[8], s;
+}, Fe = (o) => {
+  const e = v.c(3), {
+    hasValue: t
+  } = b.useContext(L);
+  let n;
+  return e[0] !== t || e[1] !== o ? (n = /* @__PURE__ */ c("div", { className: "color-input__swatch-wrapper", children: t ? /* @__PURE__ */ C(ae, { children: [
+    /* @__PURE__ */ c(g.TransparencyGrid, { className: "color-input__transparency-grid" }),
+    /* @__PURE__ */ c(g.ValueSwatch, { ...x("color-input__swatch", o) })
+  ] }) : /* @__PURE__ */ c("div", { className: "color-input__swatch color-input__swatch--empty" }) }), e[0] = t, e[1] = o, e[2] = n) : n = e[2], n;
+}, Le = (o) => {
+  const e = v.c(7), {
+    hasValue: t,
+    placeholder: n
+  } = b.useContext(L);
+  if (!t) {
+    let r;
+    e[0] !== o ? (r = x("color-input__value-text color-input__value-text--placeholder", o), e[0] = o, e[1] = r) : r = e[1];
+    let a;
+    return e[2] !== n || e[3] !== r ? (a = /* @__PURE__ */ c("span", { ...r, children: n }), e[2] = n, e[3] = r, e[4] = a) : a = e[4], a;
+  }
+  let l;
+  return e[5] !== o ? (l = /* @__PURE__ */ c(g.Context, { children: (r) => /* @__PURE__ */ c("span", { ...x("color-input__value-text", o), children: r.value.toString("hsla") }) }), e[5] = o, e[6] = l) : l = e[6], l;
+}, Ge = (o) => {
+  const e = v.c(4);
+  let t;
+  e[0] !== o ? (t = x("color-input__trigger", o), e[0] = o, e[1] = t) : t = e[1];
+  const n = t;
+  let l;
+  return e[2] !== n ? (l = /* @__PURE__ */ c(ie, { ...n }), e[2] = n, e[3] = l) : l = e[3], l;
+}, Ke = (o) => {
+  const e = v.c(21);
+  let t, n, l, r, a, s;
+  if (e[0] !== o) {
+    const {
+      defaultNotation: _,
+      ...k
+    } = o;
+    l = _, n = he, t = me, a = "end", s = 8, r = x("color-input__content", k), e[0] = o, e[1] = t, e[2] = n, e[3] = l, e[4] = r, e[5] = a, e[6] = s;
+  } else
+    t = e[1], n = e[2], l = e[3], r = e[4], a = e[5], s = e[6];
+  const i = r;
+  let h;
+  e[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (h = /* @__PURE__ */ C(g.Area, { className: "color-input__area", children: [
+    /* @__PURE__ */ c(g.AreaBackground, { className: "color-input__area-background" }),
+    /* @__PURE__ */ c(g.AreaThumb, { className: "color-input__area-thumb" })
+  ] }), e[7] = h) : h = e[7];
+  let m;
+  e[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ C(g.ChannelSlider, { channel: "hue", className: "color-input__channel-slider", children: [
+    /* @__PURE__ */ c(g.ChannelSliderTrack, { className: "color-input__channel-slider-track" }),
+    /* @__PURE__ */ c(g.ChannelSliderThumb, { className: "color-input__channel-slider-thumb" })
+  ] }), e[8] = m) : m = e[8];
+  let u;
+  e[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (u = /* @__PURE__ */ C("div", { className: "color-input__sliders", children: [
+    m,
+    /* @__PURE__ */ C(g.ChannelSlider, { channel: "alpha", className: "color-input__channel-slider", children: [
+      /* @__PURE__ */ c(g.TransparencyGrid, { className: "color-input__channel-slider-grid" }),
+      /* @__PURE__ */ c(g.ChannelSliderTrack, { className: "color-input__channel-slider-track" }),
+      /* @__PURE__ */ c(g.ChannelSliderThumb, { className: "color-input__channel-slider-thumb" })
+    ] })
+  ] }), e[9] = u) : u = e[9];
+  let f;
+  e[10] !== l ? (f = /* @__PURE__ */ C("div", { className: "color-input__body", children: [
+    h,
+    u,
+    /* @__PURE__ */ c(g.Context, { children: (_) => /* @__PURE__ */ c(ge, { api: _, defaultNotation: l ?? "hsla" }) })
+  ] }), e[10] = l, e[11] = f) : f = e[11];
+  let d;
+  e[12] !== t || e[13] !== a || e[14] !== s || e[15] !== i || e[16] !== f ? (d = /* @__PURE__ */ c(t, { align: a, sideOffset: s, ...i, children: f }), e[12] = t, e[13] = a, e[14] = s, e[15] = i, e[16] = f, e[17] = d) : d = e[17];
+  let p;
+  return e[18] !== n || e[19] !== d ? (p = /* @__PURE__ */ c(n, { children: d }), e[18] = n, e[19] = d, e[20] = p) : p = e[20], p;
+}, ge = (o) => {
+  const e = v.c(14), {
+    api: t,
+    defaultNotation: n
+  } = o, [l, r] = b.useState(n);
+  let a;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (a = (_) => {
+    (_ === "rgba" || _ === "hsla" || _ === "hexa") && r(_);
+  }, e[0] = a) : a = e[0];
+  const s = a;
+  let i, h, m;
+  e[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ c(q, { value: "rgba", children: "RGBA" }), h = /* @__PURE__ */ c(q, { value: "hsla", children: "HSLA" }), m = /* @__PURE__ */ c(q, { value: "hexa", children: "HEXA" }), e[1] = i, e[2] = h, e[3] = m) : (i = e[1], h = e[2], m = e[3]);
+  let u;
+  e[4] !== l ? (u = /* @__PURE__ */ C(de, { type: "single", value: l, onValueChange: s, className: "segmented-control color-input__notation", children: [
+    i,
+    h,
+    m
+  ] }), e[4] = l, e[5] = u) : u = e[5];
+  let f, d;
+  e[6] !== t || e[7] !== l ? (f = l === "hexa" ? /* @__PURE__ */ C("label", { className: "color-input__channel color-input__channel--hex", children: [
+    /* @__PURE__ */ c("span", { className: "color-input__channel-label", children: "HEXA" }),
+    /* @__PURE__ */ c(be, { api: t })
+  ] }) : /* @__PURE__ */ C("div", { className: "color-input__channel-row", children: [
+    (l === "rgba" ? ["red", "green", "blue"] : ["hue", "saturation", "lightness"]).map((_) => /* @__PURE__ */ c(oe, { api: t, format: l, channel: _ }, _)),
+    /* @__PURE__ */ c(oe, { api: t, format: l, channel: "alpha" })
+  ] }), d = /* @__PURE__ */ c(Ce, { api: t, notation: l, setNotation: r }), e[6] = t, e[7] = l, e[8] = f, e[9] = d) : (f = e[8], d = e[9]);
+  let p;
+  return e[10] !== u || e[11] !== f || e[12] !== d ? (p = /* @__PURE__ */ C("div", { className: "color-input__channels", onKeyDown: ve, children: [
+    u,
+    f,
+    d
+  ] }), e[10] = u, e[11] = f, e[12] = d, e[13] = p) : p = e[13], p;
+}, Ce = ({
+  api: o,
+  notation: e,
+  setNotation: t
+}) => {
+  const {
+    hasValue: n
+  } = b.useContext(L), [, l] = fe(), r = b.useRef(o);
+  r.current = o;
+  const a = () => {
+    n && l(e === "hexa" ? o.value.toString("hexa") : o.value.toString(e));
+  }, s = () => {
+    navigator.clipboard.readText().then((h) => {
+      const m = _e(h);
+      m && (r.current.setValue(m.color), t(m.notation), document.activeElement instanceof HTMLElement && document.activeElement.blur());
+    }, () => {
+    });
+  };
+  le("mod+c", a, {
+    enabled: n,
+    enableOnFormTags: !0
+  }, [n, e, o]), le("mod+v", s, {
+    enableOnFormTags: !0
+  });
+  const i = /mac|iphone|ipad|ipod/i.test(navigator.userAgent) ? "⌘" : "Ctrl";
+  return /* @__PURE__ */ C(ce, { className: "color-input__actions", align: "center", children: [
+    /* @__PURE__ */ C(te, { paddingSize: "xxs", onClick: s, children: [
+      "Paste",
+      /* @__PURE__ */ C(ee, { children: [
+        i,
+        "V"
+      ] })
+    ] }),
+    /* @__PURE__ */ C(te, { paddingSize: "xxs", onClick: a, disabled: !n, children: [
+      "Copy",
+      /* @__PURE__ */ C(ee, { children: [
+        i,
+        "C"
+      ] })
+    ] })
+  ] });
+}, oe = (o) => {
+  const e = v.c(18), {
+    channel: t,
+    format: n,
+    api: l
+  } = o;
+  let r;
+  e[0] !== t[0] ? (r = t[0].toUpperCase(), e[0] = t[0], e[1] = r) : r = e[1];
+  let a;
+  e[2] !== r ? (a = /* @__PURE__ */ c("span", { className: "color-input__channel-label", children: r }), e[2] = r, e[3] = a) : a = e[3];
+  let s;
+  e[4] !== l || e[5] !== t ? (s = l.getChannelValue(t), e[4] = l, e[5] = t, e[6] = s) : s = e[6];
+  const i = t === "alpha" ? "decimal" : "numeric";
+  let h;
+  e[7] !== l || e[8] !== t || e[9] !== n ? (h = (f) => {
+    const d = Number(f);
+    f.trim() === "" || Number.isNaN(d) || l.setValue(l.value.toFormat(n).withChannelValue(t, d));
+  }, e[7] = l, e[8] = t, e[9] = n, e[10] = h) : h = e[10];
+  let m;
+  e[11] !== s || e[12] !== i || e[13] !== h ? (m = /* @__PURE__ */ c(re, { committed: s, inputMode: i, commit: h }), e[11] = s, e[12] = i, e[13] = h, e[14] = m) : m = e[14];
+  let u;
+  return e[15] !== a || e[16] !== m ? (u = /* @__PURE__ */ C("label", { className: "color-input__channel", children: [
+    a,
+    m
+  ] }), e[15] = a, e[16] = m, e[17] = u) : u = e[17], u;
+}, be = (o) => {
+  const e = v.c(7), {
+    api: t
+  } = o;
+  let n;
+  e[0] !== t.value ? (n = t.value.toString("hexa"), e[0] = t.value, e[1] = n) : n = e[1];
+  let l;
+  e[2] !== t ? (l = (a) => {
+    const s = J(a);
+    s && t.setValue(s);
+  }, e[2] = t, e[3] = l) : l = e[3];
+  let r;
+  return e[4] !== n || e[5] !== l ? (r = /* @__PURE__ */ c(re, { committed: n, commit: l }), e[4] = n, e[5] = l, e[6] = r) : r = e[6], r;
+}, re = (o) => {
+  const e = v.c(13), {
+    committed: t,
+    commit: n,
+    inputMode: l
+  } = o, r = l === void 0 ? "text" : l, [a, s] = b.useState(t), i = b.useRef(!1);
+  let h, m;
+  e[0] !== t ? (h = () => {
+    i.current || s(t);
+  }, m = [t], e[0] = t, e[1] = h, e[2] = m) : (h = e[1], m = e[2]), b.useEffect(h, m);
+  let u;
+  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (u = () => i.current = !0, e[3] = u) : u = e[3];
+  let f;
+  e[4] !== n ? (f = (_) => {
+    s(_.target.value), n(_.target.value);
+  }, e[4] = n, e[5] = f) : f = e[5];
+  let d;
+  e[6] !== t ? (d = () => {
+    i.current = !1, s(t);
+  }, e[6] = t, e[7] = d) : d = e[7];
+  let p;
+  return e[8] !== a || e[9] !== r || e[10] !== f || e[11] !== d ? (p = /* @__PURE__ */ c("input", { className: "color-input__channel-input", type: "text", inputMode: r, value: a, spellCheck: !1, autoComplete: "off", onFocus: u, onChange: f, onBlur: d }), e[8] = a, e[9] = r, e[10] = f, e[11] = d, e[12] = p) : p = e[12], p;
+};
+function ve(o) {
+  o.key !== "Escape" && !o.metaKey && !o.ctrlKey && o.stopPropagation();
+}
+export {
+  Be as ColorInput,
+  Ke as ColorInputContent,
+  Me as ColorInputControl,
+  Fe as ColorInputSwatch,
+  Ge as ColorInputTrigger,
+  Le as ColorInputValueText
+};