@eightshift/ui-components 0.0.1

package/dist/components/color-pickers/color-swatch.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Cmlex_kT.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-CUhoK9EN.js";
+import { classnames } from "../../utilities/classnames.js";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+/**
+ * A simple color/gradient swatch.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.color] - The color to display.
+ * @param {string} [props.gradient] - The gradient to display.
+ * @param {string} [props.className] - Additional classnames to apply.
+ * @param {string} [props.colorName] - The name of the color. Should be auto-generated for colors.
+ *
+ * @returns {JSX.Element} The ColorSwatch component.
+ *
+ * @example
+ * <ColorSwatch color="#FF0000" />
+ *
+ * @example
+ * <ColorSwatch gradient="linear-gradient(45deg, #FF0000, #00FF00)" />
+ *
+ * @preserve
+ */
+const ColorSwatch = (props) => {
+  const { color: rawColor, gradient, className, colorName } = props;
+  const checkerPattern = "repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 0.75rem 0.75rem";
+  let color;
+  if (rawColor && !gradient) {
+    try {
+      if (rawColor === "transparent") {
+        color = "rgba(0, 0, 0, 0)";
+      } else {
+        color = $799cddbef784668f$export$6e865ea70d7724f(rawColor);
+      }
+    } catch (error) {
+      color = null;
+    }
+  }
+  const backgroundGradient = gradient ? `${gradient}, ${checkerPattern}` : `linear-gradient(${color}, ${color}), ${checkerPattern}`;
+  return /* @__PURE__ */ jsx(
+    $251c695a52d94a8d$export$cae13e90592f246a,
+    {
+      ...props,
+      style: {
+        background: (color || gradient) && backgroundGradient
+      },
+      className: () => classnames(
+        "es-uic-size-6 es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-shadow-sm",
+        !color && !gradient && "es-uic-bg-white",
+        className
+      ),
+      colorName: !color && !gradient ? __("No color", "eightshift-ui-components") : colorName,
+      color,
+      children: !color && !gradient && /* @__PURE__ */ jsx("div", { className: "es-uic-m-auto es-uic-h-full es-uic-w-px es-uic-rotate-45 es-uic-rounded es-uic-bg-red-500" })
+    }
+  );
+};
+export {
+  ColorSwatch
+};

package/dist/components/color-pickers/gradient-editor.js

@@ -0,0 +1,516 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { _ as __, s as sprintf } from "../../default-i18n-BhE-OUmt.js";
+import { useMemo } from "react";
+import { a as ButtonGroup } from "../../button-BkkdyHfJ.js";
+import { ToggleButton } from "../toggle-button/toggle-button.js";
+import { Repeater } from "../repeater/repeater.js";
+import { RepeaterItem } from "../repeater/repeater-item.js";
+import { icons } from "../../icons/icons.js";
+import { SolidColorPicker } from "./solid-color-picker.js";
+import { Slider } from "../slider/slider.js";
+import { NumberPicker } from "../number-picker/number-picker.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Cmlex_kT.js";
+import { Menu, MenuItem } from "../menu/menu.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { MatrixAlign } from "../matrix-align/matrix-align.js";
+import { Spacer } from "../spacer/spacer.js";
+import { Toggle } from "../toggle/toggle.js";
+import { classnames } from "../../utilities/classnames.js";
+function c(e, o = ",") {
+  let t = [], n = 0, i = 0;
+  o = new RegExp(o);
+  for (let r = 0; r < e.length; r++)
+    e[r] === "(" ? i++ : e[r] === ")" && i--, i === 0 && o.test(e[r]) && (t.push(e.slice(n, r).trim()), n = r + 1);
+  return t.push(e.slice(n).trim()), t;
+}
+function g(e) {
+  let o = [];
+  for (let t = 0, n = e.length; t < n; ) {
+    let [i, r] = c(e[t], /\s+/);
+    m(e[t + 1]) ? (o.push({ color: i, offset: l(r), hint: l(e[t + 1]) }), t += 2) : (o.push({ color: i, offset: l(r) }), t++);
+  }
+  return o;
+}
+var u = /^(-?\d+\.?\d*)(%|vw|vh|px|em|rem|deg|rad|grad|turn)$/;
+function m(e) {
+  return u.test(e);
+}
+function l(e) {
+  if (!e)
+    return;
+  let [, o, t] = e.trim().match(u) || [];
+  return { value: o, unit: t };
+}
+function P(e) {
+  if (!/^(repeating-)?linear-gradient/.test(e))
+    throw new SyntaxError(`could not find syntax for this item: ${e}`);
+  let [, o, t] = e.match(/(repeating-)?linear-gradient\((.+)\)/), n = { orientation: { type: "directional", value: "bottom" }, repeating: !!o, stops: [] }, i = c(t), r = x(i[0]);
+  return r && (n.orientation = r, i.shift()), { ...n, stops: g(i) };
+}
+function x(e) {
+  return e.startsWith("to ") ? { type: "directional", value: e.replace("to ", "") } : ["turn", "deg", "grad", "rad"].some((o) => e.endsWith(o)) ? { type: "angular", value: l(e) } : null;
+}
+var w = /* @__PURE__ */ new Set(["closest-corner", "closest-side", "farthest-corner", "farthest-side"]), v = /* @__PURE__ */ new Set(["center", "left", "top", "right", "bottom"]);
+function d(e) {
+  return w.has(e);
+}
+function h(e) {
+  return v.has(e);
+}
+function R(e) {
+  let o = Array(2).fill("");
+  for (let t = 0; t < 2; t++)
+    e[t] ? o[t] = e[t] : o[t] = "center";
+  return o;
+}
+function K(e) {
+  if (!/(repeating-)?radial-gradient/.test(e))
+    throw new SyntaxError(`could not find syntax for this item: ${e}`);
+  let [, o, t] = e.match(/(repeating-)?radial-gradient\((.+)\)/), n = { shape: "ellipse", repeating: !!o, size: [{ type: "keyword", value: "farthest-corner" }], position: { x: { type: "keyword", value: "center" }, y: { type: "keyword", value: "center" } }, stops: [] }, i = c(t);
+  if (S(i[0]))
+    return { ...n, stops: g(i) };
+  let r = i[0].split("at").map((f) => f.trim()), p = ((r[0] || "").match(/(circle|ellipse)/) || [])[1], a = (r[0] || "").match(/(-?\d+\.?\d*(vw|vh|px|em|rem|%|rad|grad|turn|deg)?|closest-corner|closest-side|farthest-corner|farthest-side)/g) || [], s = R((r[1] || "").split(" "));
+  return p ? n.shape = p : a.length === 1 && !d(a[0]) ? n.shape = "circle" : n.shape = "ellipse", a.length === 0 && a.push("farthest-corner"), n.size = a.map((f) => d(f) ? { type: "keyword", value: f } : { type: "length", value: l(f) }), n.position.x = h(s[0]) ? { type: "keyword", value: s[0] } : { type: "length", value: l(s[0]) }, n.position.y = h(s[1]) ? { type: "keyword", value: s[1] } : { type: "length", value: l(s[1]) }, (p || a.length > 0 || r[1]) && i.shift(), { ...n, stops: g(i) };
+}
+function S(e) {
+  return /(circle|ellipse|at)/.test(e) ? false : /^(rgba?|hwb|hsl|lab|lch|oklab|color|#|[a-zA-Z]+)/.test(e);
+}
+var C = /* @__PURE__ */ new Set(["from", "in", "at"]);
+function j(e) {
+  if (!/(repeating-)?conic-gradient/.test(e))
+    throw new SyntaxError(`could not find syntax for this item: ${e}`);
+  let [, o, t] = e.match(/(repeating-)?conic-gradient\((.+)\)/), n = { angle: "0deg", repeating: !!o, position: "center", stops: [] }, i = c(t).map((s) => s.trim()), r = c(i[0], /\s+/), p = "", a = 0;
+  for (let s = 0, f = r.length; s < f; s++)
+    C.has(r[s]) && (s > 0 && Object.assign(n, y(p, r, a, s)), p = r[s], a = s + 1);
+  return p && (Object.assign(n, y(p, r, a, r.length)), i.shift()), { ...n, stops: g(i) };
+}
+function y(e, o, t, n) {
+  switch (e) {
+    case "from":
+      return { angle: o.slice(t, n).join(" ") };
+    case "at":
+      return { position: o.slice(t, n).join(" ") };
+    case "in": {
+      let [i, ...r] = o.slice(t, n);
+      return { color: { space: i, method: r.length > 0 ? r.join(" ") : void 0 } };
+    }
+  }
+}
+const getGradientResult = (input, type) => {
+  var _a, _b;
+  if (!input || !type) {
+    return "";
+  }
+  if (typeof input === "string" || !(input == null ? void 0 : input.stops)) {
+    return "";
+  }
+  let output = "";
+  const { repeating } = input;
+  if (repeating) {
+    output += "repeating-";
+  }
+  output += `${type}-gradient(`;
+  if (type === "linear") {
+    const { orientation } = input;
+    if ((orientation == null ? void 0 : orientation.type) === "angular") {
+      output += `${orientation.value.value}${orientation.value.unit}, `;
+    } else if ((orientation == null ? void 0 : orientation.type) === "directional") {
+      output += `to ${orientation.value}, `;
+    }
+  }
+  if (type === "radial") {
+    const { shape, position } = input;
+    output += `${shape ?? "circle"} at ${((_a = position == null ? void 0 : position.x) == null ? void 0 : _a.value) ?? "center"} ${((_b = position == null ? void 0 : position.y) == null ? void 0 : _b.value) ?? "center"}, `;
+  }
+  if (type === "conic") {
+    const { angle, position } = input;
+    output += `from ${angle ?? "0deg"} at ${position ?? "center"}, `;
+  }
+  output += input.stops.map((stop) => {
+    var _a2, _b2;
+    return `${stop.color} ${((_a2 = stop.offset) == null ? void 0 : _a2.value) ?? ""}${((_b2 = stop.offset) == null ? void 0 : _b2.unit) ?? ""}`.trim();
+  }).join(", ");
+  output += ")";
+  return output;
+};
+const gradientTypes = [
+  {
+    label: __("Linear"),
+    value: "linear",
+    icon: /* @__PURE__ */ jsx("div", { className: "es-uic-transparent es-uic-size-4 es-uic-rounded-full es-uic-bg-gradient-to-br es-uic-from-current" })
+  },
+  {
+    label: __("Radial"),
+    value: "radial",
+    icon: /* @__PURE__ */ jsx("div", { className: "es-uic-transparent es-uic-size-4 es-uic-rounded-full es-uic-bg-[radial-gradient(var(--tw-gradient-stops))] es-uic-from-current" })
+  },
+  {
+    label: __("Conic"),
+    value: "conic",
+    icon: /* @__PURE__ */ jsx("div", { className: "es-uic-transparent es-uic-size-4 es-uic-rounded-full es-uic-bg-[conic-gradient(var(--tw-gradient-stops))] es-uic-from-current" })
+  }
+];
+const linearDirections = [
+  {
+    label: __("Right"),
+    value: "right",
+    iconClass: "es-uic-bg-gradient-to-r"
+  },
+  {
+    label: __("Left"),
+    value: "left",
+    iconClass: "es-uic-bg-gradient-to-l"
+  },
+  {
+    label: __("Top"),
+    value: "top",
+    iconClass: "es-uic-bg-gradient-to-t"
+  },
+  {
+    label: __("Bottom"),
+    value: "bottom",
+    iconClass: "es-uic-bg-gradient-to-b"
+  },
+  {
+    label: __("Top-right"),
+    value: "top right",
+    iconClass: "es-uic-bg-gradient-to-tr"
+  },
+  {
+    label: __("Top-left"),
+    value: "top left",
+    iconClass: "es-uic-bg-gradient-to-tl"
+  },
+  {
+    label: __("Bottom-right"),
+    value: "bottom right",
+    iconClass: "es-uic-bg-gradient-to-br"
+  },
+  {
+    label: __("Bottom-left"),
+    value: "bottom left",
+    iconClass: "es-uic-bg-gradient-to-bl"
+  }
+];
+/**
+ * A simple gradient editor.
+ * Allows editing linear, radial, and conic gradients.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} props.value - The gradient definition.
+ * @param {Function} props.onChange - Function to run when the gradient changes.
+ *
+ * @returns {JSX.Element} The GradientEditor component.
+ *
+ * @example
+ * <GradientEditor
+ * 	value='linear-gradient(90deg, #000000 0%, #ffffff 100%)'
+ * 	onChange={setGradient}
+ * />
+ *
+ * @preserve
+ */
+const GradientEditor = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const { value, onChange } = props;
+  const gradientData = useMemo(() => {
+    if ((value == null ? void 0 : value.startsWith("radial-gradient")) || (value == null ? void 0 : value.startsWith("repeating-radial-gradient"))) {
+      return K(value ?? "");
+    }
+    if ((value == null ? void 0 : value.startsWith("conic-gradient")) || (value == null ? void 0 : value.startsWith("repeating-conic-gradient"))) {
+      return j(value ?? "");
+    }
+    return P(value ?? "");
+  }, [value]);
+  const gradientType = useMemo(() => {
+    if (typeof value === "string" && (value == null ? void 0 : value.startsWith("radial-gradient")) || (value == null ? void 0 : value.startsWith("repeating-radial-gradient"))) {
+      return "radial";
+    }
+    if (typeof value === "string" && (value == null ? void 0 : value.startsWith("conic-gradient")) || (value == null ? void 0 : value.startsWith("repeating-conic-gradient"))) {
+      return "conic";
+    }
+    return "linear";
+  }, [value]);
+  const setGradientData = (data) => {
+    onChange(getGradientResult(data, gradientType));
+  };
+  const outputGradient = useMemo(
+    () => getGradientResult(gradientData, gradientType),
+    [gradientData, gradientType]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "es-uic-w-full es-uic-space-y-2.5", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "es-uic-h-40 es-uic-w-full es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-shadow-sm",
+        style: { backgroundImage: outputGradient }
+      }
+    ),
+    /* @__PURE__ */ jsx(ButtonGroup, { className: "es-uic-w-full", children: gradientTypes.map(({ label, value: value2, icon }) => {
+      return /* @__PURE__ */ jsx(
+        ToggleButton,
+        {
+          selected: gradientType === value2,
+          onChange: () => onChange(getGradientResult({ stops: gradientData.stops }, value2)),
+          icon,
+          className: "es-uic-grow",
+          children: label
+        },
+        value2
+      );
+    }) }),
+    /* @__PURE__ */ jsx(Spacer, { size: "xs" }),
+    gradientType === "linear" && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-1", children: [
+      /* @__PURE__ */ jsx(
+        NumberPicker,
+        {
+          inline: true,
+          icon: icons.angle,
+          label: __("Angle", "eightshift-ui-components"),
+          min: 0,
+          max: 360,
+          step: 1,
+          value: ((_a = gradientData == null ? void 0 : gradientData.orientation) == null ? void 0 : _a.type) === "angular" ? (_c = (_b = gradientData == null ? void 0 : gradientData.orientation) == null ? void 0 : _b.value) == null ? void 0 : _c.value : null,
+          onChange: (angle) => {
+            setGradientData({
+              ...gradientData,
+              orientation: { type: "angular", value: { value: angle, unit: "deg" } }
+            });
+          },
+          suffix: "°",
+          size: "small",
+          className: "es-uic-grow"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Menu,
+        {
+          triggerIcon: icons.sliders,
+          triggerProps: {
+            tooltip: __("Presets", "eightshift-ui-components")
+          },
+          keepOpen: true,
+          children: linearDirections.map(({ label, value: value2, iconClass }) => {
+            return /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                icon: /* @__PURE__ */ jsx("div", { className: classnames("es-uic-size-5 es-uic-from-gray-700 es-uic-to-gray-200 es-uic-rounded-sm", iconClass) }),
+                onClick: () => {
+                  setGradientData({
+                    ...gradientData,
+                    orientation: { type: "directional", value: value2 }
+                  });
+                },
+                children: label
+              },
+              value2
+            );
+          })
+        }
+      )
+    ] }),
+    gradientType === "radial" && /* @__PURE__ */ jsxs("div", { className: "es-uic-space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        BaseControl,
+        {
+          label: __("Shape", "eightshift-ui-components"),
+          icon: icons.genericShapesAlt,
+          inline: true,
+          children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+            /* @__PURE__ */ jsx(
+              ToggleButton,
+              {
+                selected: gradientData.shape === "circle",
+                onChange: () => {
+                  setGradientData({
+                    ...gradientData,
+                    shape: "circle"
+                  });
+                },
+                size: "large",
+                children: __("Circle", "eightshift-ui-components")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToggleButton,
+              {
+                selected: gradientData.shape === "ellipse",
+                onChange: () => {
+                  setGradientData({
+                    ...gradientData,
+                    shape: "ellipse"
+                  });
+                },
+                size: "large",
+                children: __("Ellipse", "eightshift-ui-components")
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MatrixAlign,
+        {
+          icon: icons.centerPoint,
+          label: __("Center point", "eightshift-ui-components"),
+          value: `${((_e = (_d = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _d.y) == null ? void 0 : _e.value) ?? "center"} ${((_g = (_f = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _f.x) == null ? void 0 : _g.value) ?? "center"}`,
+          onChange: (position) => {
+            const [x2, y2] = position.split(" ");
+            setGradientData({
+              ...gradientData,
+              position: {
+                x: { type: "keyword", value: x2 },
+                y: { type: "keyword", value: y2 }
+              }
+            });
+          }
+        }
+      )
+    ] }),
+    gradientType === "conic" && /* @__PURE__ */ jsxs("div", { className: "es-uic-space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        NumberPicker,
+        {
+          inline: true,
+          icon: icons.angle,
+          label: __("Angle", "eightshift-ui-components"),
+          min: 0,
+          max: 360,
+          step: 1,
+          value: parseInt(gradientData == null ? void 0 : gradientData.angle.replace("deg", "")),
+          onChange: (value2) => {
+            setGradientData({
+              ...gradientData,
+              angle: `${value2}deg`
+            });
+          },
+          suffix: "°",
+          className: "es-uic-grow"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MatrixAlign,
+        {
+          icon: icons.centerPoint,
+          label: __("Center point", "eightshift-ui-components"),
+          value: `${((_i = (_h = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _h.y) == null ? void 0 : _i.value) ?? "center"} ${((_k = (_j = gradientData == null ? void 0 : gradientData.position) == null ? void 0 : _j.x) == null ? void 0 : _k.value) ?? "center"}`,
+          onChange: (value2) => {
+            setGradientData({
+              ...gradientData,
+              position: value2
+            });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Toggle,
+      {
+        checked: gradientData.repeating,
+        onChange: (value2) => {
+          setGradientData({
+            ...gradientData,
+            repeating: value2
+          });
+        },
+        label: __("Repeating", "eightshift-ui-components"),
+        icon: icons.gradientRepeat
+      }
+    ),
+    /* @__PURE__ */ jsx(Spacer, { border: true }),
+    /* @__PURE__ */ jsx(
+      Repeater,
+      {
+        items: gradientData == null ? void 0 : gradientData.stops,
+        onChange: (items) => {
+          setGradientData({
+            ...gradientData,
+            stops: items.map(({ color }, i) => ({
+              ...gradientData.stops[i] ?? {},
+              color
+            }))
+          });
+        },
+        itemLabelProp: "title",
+        icon: icons.gradientStop,
+        label: __("Gradient stops", "eightshift-ui-components"),
+        addDefaultItem: {
+          color: "#000000"
+        },
+        minItems: 2,
+        children: (item) => {
+          var _a2, _b2;
+          const { color, updateData, itemIndex } = item;
+          const defaultOffset = itemIndex * 100 / (gradientData.stops.length - 1);
+          const offset = `${((_b2 = (_a2 = gradientData.stops[itemIndex]) == null ? void 0 : _a2.offset) == null ? void 0 : _b2.value) ?? defaultOffset}%`;
+          return /* @__PURE__ */ jsx(
+            RepeaterItem,
+            {
+              label: sprintf(__("Stop %s", "eightshift-ui-components"), itemIndex + 1),
+              subtitle: `${color} / ${offset ?? defaultOffset}`,
+              icon: /* @__PURE__ */ jsx(
+                $251c695a52d94a8d$export$cae13e90592f246a,
+                {
+                  className: "es-uic-size-5 es-uic-rounded-full es-uic-border es-uic-border-white es-uic-ring-1 es-uic-ring-black",
+                  color
+                }
+              ),
+              textValue: sprintf(__("Stop %s", "eightshift-ui-components"), itemIndex + 1),
+              children: /* @__PURE__ */ jsx(
+                SolidColorPicker,
+                {
+                  value: color,
+                  onChange: (color2) => {
+                    updateData({ color: color2 });
+                  },
+                  allowTransparency: true,
+                  outputFormat: "rgba"
+                }
+              )
+            }
+          );
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        "aria-label": __("Stop positions", "eightshift-ui-components"),
+        min: 0,
+        max: 100,
+        step: 1,
+        value: (_l = gradientData == null ? void 0 : gradientData.stops) == null ? void 0 : _l.map(({ offset }, i) => {
+          if (!offset) {
+            return i * 100 / (gradientData.stops.length - 1);
+          }
+          return parseInt(offset == null ? void 0 : offset.value);
+        }),
+        onChange: (value2) => {
+          setGradientData({
+            ...gradientData,
+            stops: gradientData.stops.map((stop, i) => {
+              return {
+                ...stop,
+                offset: { value: value2[i], unit: "%" }
+              };
+            })
+          });
+        },
+        thumbContent: (index) => /* @__PURE__ */ jsx("div", { className: "es-uic-pointer-events-none es-uic-absolute es-uic-inset-0 es-uic-flex es-uic-size-3 es-uic-items-center es-uic-justify-center es-uic-text-center es-uic-text-xs es-uic-font-semibold es-uic-text-white", children: index + 1 }),
+        trackStyle: {
+          backgroundImage: getGradientResult(
+            { orientation: { type: "directional", value: "right" }, stops: gradientData.stops },
+            "linear"
+          ),
+          height: "1.125rem",
+          borderRadius: "0.5rem"
+        },
+        noActiveHighlight: true
+      }
+    )
+  ] });
+};
+export {
+  GradientEditor
+};