@owp/core 2.5.5 → 2.5.6

package/dist/features/themePreview/components/ThemePreviewColorField.js

@@ -1,15 +1,15 @@
-var G = Object.defineProperty;
-var t = (a, e) => G(a, "name", { value: e, configurable: !0 });
-import { jsxs as h, jsx as l, Fragment as L } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
-import { MenuItem as W, TextField as R, Typography as f, Button as U, Box as _, Popover as K, InputAdornment as Y } from "@mui/material";
-import { blue as q, lightBlue as J, cyan as Q, teal as X, green as Z, amber as ee, orange as re, deepOrange as le, red as te, pink as ae, purple as ne, deepPurple as oe, indigo as ue, grey as ie, blueGrey as ce } from "@mui/material/colors";
-import { useState as g, useRef as se, useEffect as B } from "react";
-import { getThemePreviewPaletteValue as pe } from "../utils/themePreviewSettings.js";
-import { getColorAlphaValue as de, toColorPickerValue as S, applyColorPickerValue as j } from "../utils/color.js";
-const me = {
+var K = Object.defineProperty;
+var l = (t, e) => K(t, "name", { value: e, configurable: !0 });
+import { jsxs as m, jsx as o, Fragment as Y } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { MenuItem as q, TextField as $, Box as h, Divider as J, Typography as C, Popover as Q, InputAdornment as X, Button as Z } from "@mui/material";
+import { blue as ee, lightBlue as re, cyan as te, teal as le, green as oe, amber as ne, orange as ae, deepOrange as ie, red as ue, pink as ce, purple as se, deepPurple as pe, indigo as de, grey as me, blueGrey as he } from "@mui/material/colors";
+import { useState as f, useRef as fe, useEffect as T } from "react";
+import { getThemePreviewPaletteValue as xe } from "../utils/themePreviewSettings.js";
+import { getColorAlphaValue as ge, toColorPickerValue as F, applyColorPickerValue as S } from "../utils/color.js";
+const be = {
   "px-number": "px",
   "rem-number": "rem"
-}, he = [
+}, Pe = [
   "50",
   "100",
   "200",
@@ -24,160 +24,216 @@ const me = {
   "A200",
   "A400",
   "A700"
-], fe = [
-  ["Blue", q],
-  ["Light Blue", J],
-  ["Cyan", Q],
-  ["Teal", X],
-  ["Green", Z],
-  ["Amber", ee],
-  ["Orange", re],
-  ["Deep Orange", le],
-  ["Red", te],
-  ["Pink", ae],
-  ["Purple", ne],
-  ["Deep Purple", oe],
-  ["Indigo", ue],
-  ["Grey", ie],
-  ["Blue Grey", ce]
-], xe = fe.map(([a, e]) => ({
-  label: a,
-  colors: he.reduce((p, c) => {
-    const i = e[c];
-    return i && p.push({
-      key: `${a}-${c}`,
-      shade: c,
-      value: i
-    }), p;
+], ve = [
+  ["Blue", ee],
+  ["Light Blue", re],
+  ["Cyan", te],
+  ["Teal", le],
+  ["Green", oe],
+  ["Amber", ne],
+  ["Orange", ae],
+  ["Deep Orange", ie],
+  ["Red", ue],
+  ["Pink", ce],
+  ["Purple", se],
+  ["Deep Purple", pe],
+  ["Indigo", de],
+  ["Grey", me],
+  ["Blue Grey", he]
+], we = ve.map(([t, e]) => ({
+  label: t,
+  colors: Pe.reduce((n, s) => {
+    const a = e[s];
+    return a && n.push({
+      key: `${t}-${s}`,
+      shade: s,
+      value: a
+    }), n;
   }, [])
-})), ge = 500;
-function ve(a, e) {
-  return a.replace(new RegExp(`${e}$`, "i"), "");
+})), ye = 500, U = 32, L = 20;
+function ke(t, e) {
+  return t.replace(new RegExp(`${e}$`, "i"), "");
 }
-t(ve, "getUnitInputDisplayValue");
-function Pe(a, e) {
-  const p = a.replace(/[^0-9.,]/g, "").replace(/,/g, "."), [c = "", ...i] = p.split("."), x = i.join(""), m = x ? `${c}.${x}` : c;
-  return m ? `${m}${e}` : "";
+l(ke, "getUnitInputDisplayValue");
+function G(t) {
+  const e = t.replace(/[^0-9.,]/g, "").replace(/,/g, "."), n = e.indexOf(".");
+  if (n < 0)
+    return e;
+  const s = e.slice(0, n), a = e.slice(n + 1).replace(/\./g, "");
+  return `${s}.${a}`;
 }
-t(Pe, "normalizeUnitInputValue");
-function we(a) {
-  return (a ? me[a] : null) ?? null;
+l(G, "normalizeUnitInputDisplayValue");
+function Ce(t) {
+  const e = G(t);
+  return !e || e === "." ? "" : e.startsWith(".") ? `0${e}` : e.endsWith(".") ? e.slice(0, -1) : e;
 }
-t(we, "getUnitValueFormat");
-function Ae({
-  disabled: a = !1,
+l(Ce, "normalizeCommittedUnitInputDisplayValue");
+function Te(t, e) {
+  const n = Ce(t);
+  return n ? `${n}${e}` : "";
+}
+l(Te, "normalizeUnitInputValue");
+function Ie(t) {
+  return (t ? be[t] : null) ?? null;
+}
+l(Ie, "getUnitValueFormat");
+function _e({
+  disabled: t = !1,
   definition: e,
-  sectionKey: p,
-  settings: c,
-  onChange: i
+  sectionKey: n,
+  settings: s,
+  onChange: a
 }) {
-  var $, F;
-  const [x, m] = g(null), n = pe(c, p, e.path), o = we(e.valueFormat), V = e.showColorPicker !== !1, C = e.allowAlpha ? de(n) : null, A = [e.description];
+  var H, O;
+  const [I, b] = f(null), i = xe(s, n, e.path), u = Ie(e.valueFormat), V = e.showColorPicker !== !1, E = e.allowAlpha ? ge(i) : null, A = [e.description];
   e.allowAlpha && A.push(
-    C ? `알파값은 ${C}로 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.` : "알파값은 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다."
+    E ? `알파값은 ${E}로 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다.` : "알파값은 고정되고 색상만 변경됩니다. Pick 또는 MUI로 색상만 변경할 수 있습니다."
   );
-  const H = A.filter(Boolean).join(" "), P = !!o, w = !!(($ = e.options) != null && $.length), y = !!(e.allowAlpha && V && !w && !o), v = o ? ve(n, o) : n, d = !w && !o && !y, [k, I] = g(v), [E, T] = g(!1), [M, O] = g(S(n)), [b, z] = g(!1), s = se(null);
-  B(() => {
-    !d || E || I(v);
-  }, [d, v, E]), B(() => {
-    b || O(S(n));
-  }, [b, n]), B(() => () => {
-    s.current && window.clearTimeout(s.current);
+  const N = A.filter(Boolean).join(" "), P = !!((H = e.options) != null && H.length), v = !!(e.allowAlpha && V && !P && !u), x = u ? ke(i, u) : i, j = V, p = !P && !v, [w, B] = f(x), [R, y] = f(!1), [z, M] = f(F(i)), [k, _] = f(!1), c = fe(null);
+  T(() => {
+    !p || R || B(x);
+  }, [p, x, R]), T(() => {
+    k || M(F(i));
+  }, [k, i]), T(() => () => {
+    c.current && window.clearTimeout(c.current);
   }, []);
-  const D = /* @__PURE__ */ t((r) => {
-    i(e.path, r);
-  }, "commitBufferedTextValue"), N = /* @__PURE__ */ t((r) => {
-    s.current && (window.clearTimeout(s.current), s.current = null), z(!1), i(e.path, j(n, r));
+  const D = /* @__PURE__ */ l((r) => {
+    a(
+      e.path,
+      u ? Te(r, u) : r
+    );
+  }, "commitBufferedTextValue"), W = /* @__PURE__ */ l((r) => {
+    c.current && (window.clearTimeout(c.current), c.current = null), _(!1), a(e.path, S(i, r));
   }, "commitBufferedPickerValue");
-  return /* @__PURE__ */ h("div", { className: "grid grid-cols-[minmax(0,1fr)_144px] gap-12", children: [
-    /* @__PURE__ */ l(
-      R,
+  return /* @__PURE__ */ m("div", { className: "grid grid-cols-[minmax(0,1fr)_144px] items-start gap-12", children: [
+    /* @__PURE__ */ o(
+      $,
       {
-        select: w,
+        select: P,
         label: e.label,
-        value: d ? k : v,
-        disabled: a,
-        onChange: /* @__PURE__ */ t((r) => {
-          if (y)
+        size: "small",
+        value: p ? w : x,
+        disabled: t,
+        onChange: /* @__PURE__ */ l((r) => {
+          if (v)
             return;
-          const u = o ? Pe(r.target.value, o) : r.target.value;
-          if (d) {
-            I(u);
+          const d = u ? G(r.target.value) : r.target.value;
+          if (p) {
+            B(d);
             return;
           }
-          i(e.path, u);
+          a(e.path, d);
         }, "onChange"),
-        onFocus: /* @__PURE__ */ t(() => {
-          d && T(!0);
+        onFocus: /* @__PURE__ */ l(() => {
+          p && y(!0);
         }, "onFocus"),
-        onBlur: /* @__PURE__ */ t(() => {
-          d && (T(!1), D(k));
+        onBlur: /* @__PURE__ */ l(() => {
+          p && (y(!1), D(w));
         }, "onBlur"),
-        onKeyDown: /* @__PURE__ */ t((r) => {
-          !d || r.key !== "Enter" || (r.preventDefault(), T(!1), D(k), r.currentTarget.blur());
+        onKeyDown: /* @__PURE__ */ l((r) => {
+          !p || r.key !== "Enter" || (r.preventDefault(), y(!1), D(w), r.currentTarget.blur());
         }, "onKeyDown"),
-        helperText: H,
+        helperText: N,
         slotProps: {
           htmlInput: {
-            ...o ? {
+            ...u ? {
               inputMode: "decimal"
             } : {},
-            ...y ? {
+            ...v ? {
               readOnly: !0
             } : {}
           },
-          input: o ? {
-            endAdornment: /* @__PURE__ */ l(Y, { position: "end", children: o })
+          input: u ? {
+            endAdornment: /* @__PURE__ */ o(X, { position: "end", children: u })
           } : void 0
         },
-        children: (F = e.options) == null ? void 0 : F.map((r) => /* @__PURE__ */ l(W, { value: r.value, children: r.label }, r.value))
+        children: (O = e.options) == null ? void 0 : O.map((r) => /* @__PURE__ */ o(q, { value: r.value, children: r.label }, r.value))
       }
     ),
-    /* @__PURE__ */ h("div", { className: "flex flex-col gap-6", children: [
-      V ? /* @__PURE__ */ h(L, { children: [
-        /* @__PURE__ */ l(
-          R,
+    j ? /* @__PURE__ */ m("div", { className: "grid grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ m(Y, { children: [
+        /* @__PURE__ */ o(
+          $,
           {
             label: "Pick",
             type: "color",
-            value: M,
-            disabled: a,
-            onChange: /* @__PURE__ */ t((r) => {
-              const u = r.target.value;
-              O(u), z(!0), s.current && window.clearTimeout(s.current), s.current = window.setTimeout(() => {
-                N(u);
-              }, ge);
+            size: "small",
+            value: z,
+            disabled: t,
+            onChange: /* @__PURE__ */ l((r) => {
+              const d = r.target.value;
+              M(d), _(!0), c.current && window.clearTimeout(c.current), c.current = window.setTimeout(() => {
+                W(d);
+              }, ye);
             }, "onChange"),
-            onBlur: /* @__PURE__ */ t(() => {
-              b && N(M);
+            onBlur: /* @__PURE__ */ l(() => {
+              k && W(z);
             }, "onBlur"),
+            slotProps: {
+              inputLabel: {
+                shrink: !0
+              }
+            },
             sx: {
-              "& .MuiInputBase-input": {
-                minHeight: 56,
-                p: 0.5
+              "& .MuiOutlinedInput-root": {
+                height: U,
+                px: 0.5
+              },
+              '& input[type="color"]': {
+                WebkitAppearance: "none",
+                alignSelf: "center",
+                boxSizing: "border-box",
+                border: 0,
+                borderRadius: 0,
+                display: "block",
+                height: L,
+                minHeight: L,
+                overflow: "hidden",
+                padding: 0,
+                p: 0,
+                width: "100%"
+              },
+              '& input[type="color"]::-webkit-color-swatch-wrapper': {
+                borderRadius: 0,
+                p: 0
+              },
+              '& input[type="color"]::-webkit-color-swatch': {
+                borderColor: "#94a3b8",
+                borderRadius: 0
+              },
+              '& input[type="color"]::-moz-color-swatch': {
+                borderColor: "#94a3b8",
+                borderRadius: 0
               }
             }
           }
         ),
-        /* @__PURE__ */ l(
-          U,
+        /* @__PURE__ */ o(
+          Z,
           {
             size: "small",
+            fullWidth: !0,
             variant: "outlined",
-            disabled: a,
-            onClick: /* @__PURE__ */ t((r) => {
-              m(r.currentTarget);
+            disabled: t,
+            sx: {
+              fontSize: "1.2rem",
+              height: U,
+              minWidth: 0
+            },
+            onClick: /* @__PURE__ */ l((r) => {
+              b(r.currentTarget);
             }, "onClick"),
             children: "MUI"
           }
         ),
-        x ? /* @__PURE__ */ l(
-          K,
+        I ? /* @__PURE__ */ o(
+          Q,
           {
             open: !0,
-            anchorEl: x,
-            onClose: /* @__PURE__ */ t(() => {
-              m(null);
+            anchorEl: I,
+            transitionDuration: 0,
+            onClose: /* @__PURE__ */ l(() => {
+              b(null);
             }, "onClose"),
             anchorOrigin: {
               vertical: "bottom",
@@ -190,112 +246,127 @@ function Ae({
             slotProps: {
               paper: {
                 sx: {
-                  maxHeight: 420,
+                  maxHeight: "calc(100vh - 32px)",
+                  maxWidth: "calc(100vw - 32px)",
+                  minWidth: 320,
+                  overflow: "auto",
                   p: 1.5,
-                  width: "min(388px, calc(100vw - 48px))"
+                  width: "min(760px, calc(100vw - 32px))"
                 }
               }
             },
-            children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-10", children: xe.map((r) => /* @__PURE__ */ h(
-              "div",
-              {
-                className: "grid grid-cols-[84px_264px] items-start gap-8",
-                children: [
-                  /* @__PURE__ */ l(f, { variant: "caption", color: "text.secondary", children: r.label }),
-                  /* @__PURE__ */ l("div", { className: "overflow-x-auto", children: /* @__PURE__ */ l("div", { className: "flex w-max gap-6 pr-2", children: r.colors.map((u) => /* @__PURE__ */ h(
-                    U,
-                    {
-                      size: "small",
-                      variant: "outlined",
-                      onClick: /* @__PURE__ */ t(() => {
-                        i(
-                          e.path,
-                          j(n, u.value)
-                        ), m(null);
-                      }, "onClick"),
-                      sx: {
-                        alignItems: "center",
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 0.5,
-                        minWidth: 0,
-                        p: 0.5,
-                        width: 68
-                      },
-                      children: [
-                        /* @__PURE__ */ l(
-                          _,
+            children: /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-col gap-10", children: we.map((r, d) => /* @__PURE__ */ m(h, { className: "flex flex-col gap-10", children: [
+              d > 0 ? /* @__PURE__ */ o(J, { flexItem: !0 }) : null,
+              /* @__PURE__ */ m(
+                h,
+                {
+                  sx: {
+                    display: "grid",
+                    gap: 1,
+                    gridTemplateColumns: {
+                      xs: "minmax(0, 1fr)",
+                      sm: "84px minmax(0, 1fr)"
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ o(C, { variant: "caption", color: "text.secondary", children: r.label }),
+                    /* @__PURE__ */ o(
+                      h,
+                      {
+                        sx: {
+                          display: "grid",
+                          gap: 0.75,
+                          gridTemplateColumns: "repeat(auto-fit, minmax(68px, 1fr))",
+                          minWidth: 0
+                        },
+                        children: r.colors.map((g) => /* @__PURE__ */ m(
+                          h,
                           {
+                            component: "button",
+                            type: "button",
+                            onClick: /* @__PURE__ */ l(() => {
+                              a(
+                                e.path,
+                                S(i, g.value)
+                              ), b(null);
+                            }, "onClick"),
                             sx: {
-                              width: 30,
-                              height: 30,
-                              borderRadius: 1,
-                              backgroundColor: u.value,
+                              alignItems: "center",
+                              backgroundColor: "background.paper",
                               border: "1px solid",
-                              borderColor: "divider"
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ l(
-                          f,
-                          {
-                            variant: "caption",
-                            sx: {
+                              borderColor: "divider",
+                              borderRadius: 1,
                               color: "text.secondary",
-                              fontSize: "0.75rem",
-                              fontWeight: 600,
-                              lineHeight: 1
+                              cursor: "pointer",
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: 0.5,
+                              justifyContent: "center",
+                              minWidth: 0,
+                              p: 0.5,
+                              transition: "background-color 120ms ease, border-color 120ms ease",
+                              width: "100%",
+                              "&:hover": {
+                                backgroundColor: "action.hover",
+                                borderColor: "text.secondary"
+                              }
                             },
-                            children: u.shade
-                          }
-                        )
-                      ]
-                    },
-                    u.key
-                  )) }) })
-                ]
-              },
-              r.label
-            )) })
+                            children: [
+                              /* @__PURE__ */ o(
+                                h,
+                                {
+                                  sx: {
+                                    width: 30,
+                                    height: 30,
+                                    borderRadius: 1,
+                                    backgroundColor: g.value,
+                                    border: "1px solid",
+                                    borderColor: "divider"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ o(
+                                h,
+                                {
+                                  component: "span",
+                                  sx: {
+                                    fontSize: "0.75rem",
+                                    fontWeight: 600,
+                                    lineHeight: 1
+                                  },
+                                  children: g.shade
+                                }
+                              )
+                            ]
+                          },
+                          g.key
+                        ))
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, r.label)) })
           }
         ) : null
-      ] }) : /* @__PURE__ */ l(
-        _,
-        {
-          className: "rounded border border-solid border-slate-200",
-          sx: {
-            height: 56,
-            alignItems: "center",
-            backgroundColor: e.allowAlpha ? n : "transparent",
-            display: "flex",
-            justifyContent: "center",
-            px: 1
-          },
-          children: e.allowAlpha ? null : /* @__PURE__ */ l(
-            f,
-            {
-              variant: P ? "caption" : "body2",
-              sx: {
-                ...P ? {
-                  color: "text.secondary"
-                } : {
-                  fontSize: n || "inherit"
-                }
-              },
-              children: P ? "Sample" : n || "-"
-            }
-          )
-        }
-      ),
-      e.allowAlpha ? /* @__PURE__ */ h("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ l(f, { variant: "caption", color: "text.secondary", children: "Current" }),
-        /* @__PURE__ */ l(f, { variant: "caption", color: "text.secondary", className: "truncate whitespace-nowrap", children: n || "-" })
-      ] }) : /* @__PURE__ */ l(f, { variant: "caption", color: "text.secondary", children: "Preview" })
-    ] })
+      ] }),
+      e.allowAlpha ? /* @__PURE__ */ m("div", { className: "col-span-2 flex flex-col gap-2", children: [
+        /* @__PURE__ */ o(C, { variant: "caption", color: "text.secondary", children: "Current" }),
+        /* @__PURE__ */ o(
+          C,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            className: "truncate whitespace-nowrap",
+            children: i || "-"
+          }
+        )
+      ] }) : null
+    ] }) : /* @__PURE__ */ o("div", {})
   ] });
 }
-t(Ae, "ThemePreviewColorField");
+l(_e, "ThemePreviewColorField");
 export {
-  Ae as ThemePreviewColorField
+  _e as ThemePreviewColorField
 };
 //# sourceMappingURL=ThemePreviewColorField.js.map