@eightshift/ui-components 5.6.1 → 6.0.1

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

@@ -1,22 +1,24 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { useMemo, useState } from "react";
-import { ButtonGroup, Button } from "../button/button.js";
+import { Button, ButtonGroup } from "../button/button.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-xVS3rMYS.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../color-swatch-CFIuSPcO.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
-import { Spacer } from "../spacer/spacer.js";
 import { Toggle } from "../toggle/toggle.js";
 import { OptionSelect } from "../option-select/option-select.js";
 import { DraggableList } from "../draggable-list/draggable-list.js";
 import { DraggableListItem } from "../draggable-list/draggable-list-item.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { ContainerGroup, Container } from "../base-control/container.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { s as srgb, i as isColorDark } from "../../general-B6pOveVp.js";
 function c(e, o = ",") {
   let t = [], n = 0, i = 0;
   o = new RegExp(o);
@@ -240,31 +242,81 @@ const GradientEditor = (props) => {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: "es:w-full es:space-y-2.5", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: clsx(
-          "es:shadow-sm, es:mx-auto es:block es:h-40 es:cursor-pointer es:rounded-lg es:border es:border-secondary-300 es:transition-[width]",
-          squarePreview ? "es:w-40" : "es:w-full"
-        ),
-        style: { backgroundImage: outputGradient },
-        onClick: () => setSquarePreview((prev) => !prev),
-        "aria-label": __("Toggle preview size", "eightshift-ui-components")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      OptionSelect,
-      {
-        "aria-label": __("Gradient type", "eightshift-ui-components"),
-        value: gradientType,
-        onChange: (value2) => onChange(getGradientResult({ stops: gradientData.stops }, value2)),
-        options: gradientTypes,
-        wrapperProps: { className: "es:mx-auto es:w-fit" },
-        type: "toggleButtons"
-      }
-    ),
-    gradientType === "linear" && /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:gap-1", children: [
+    /* @__PURE__ */ jsx(ContainerGroup, { children: /* @__PURE__ */ jsxs(Container, { children: [
       /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: clsx(
+            "es:shadow-sm, es:mx-auto es:block es:h-40 es:cursor-pointer es:rounded-lg es:border es:border-secondary-300 es:transition-[width] es:duration-300 es:ease-spring-snappy",
+            "es:mb-2",
+            squarePreview ? "es:w-40" : "es:w-full"
+          ),
+          style: { backgroundImage: outputGradient },
+          onClick: () => setSquarePreview((prev) => !prev),
+          "aria-label": __("Toggle preview size", "eightshift-ui-components")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Slider,
+        {
+          className: "es:mb-5",
+          "aria-label": __("Stop positions", "eightshift-ui-components"),
+          min: 0,
+          max: 100,
+          step: 1,
+          value: gradientData?.stops?.map(({ offset }, i) => {
+            if (!offset) {
+              return i * 100 / (gradientData.stops.length - 1);
+            }
+            return parseInt(offset?.value);
+          }),
+          onChange: (value2) => {
+            setGradientData({
+              ...gradientData,
+              stops: gradientData.stops.map((stop, i) => {
+                return {
+                  ...stop,
+                  offset: { value: value2[i], unit: "%" }
+                };
+              })
+            });
+          },
+          thumbContent: (index) => {
+            const colorData = srgb(gradientData.stops[index]?.color);
+            let foregroundColor = "black";
+            if (colorData.alpha >= 0.5 && isColorDark(colorData.r, colorData.g, colorData.b)) {
+              foregroundColor = "white";
+            }
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "es:pointer-events-none es:absolute es:-bottom-4.5 es:-translate-x-1/3 es:flex es:w-3 es:items-center es:justify-center es:text-center es:text-12 es:leading-none es:py-0.25 es:rounded-sm es:font-semibold es:tabular-nums es:font-mono es:ring es:ring-accent-600",
+                style: {
+                  backgroundColor: gradientData.stops[index]?.color,
+                  color: foregroundColor
+                },
+                children: index + 1
+              }
+            );
+          },
+          noActiveHighlight: true,
+          tooltipContent: (value2) => `${Math.round(value2)}%`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(ContainerGroup, { children: [
+      /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+        OptionSelect,
+        {
+          label: __("Type", "eightshift-ui-components"),
+          value: gradientType,
+          onChange: (value2) => onChange(getGradientResult({ stops: gradientData.stops }, value2)),
+          options: gradientTypes,
+          type: "toggleButtons",
+          inline: true
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Container, { hidden: gradientType !== "linear", children: /* @__PURE__ */ jsx(
         NumberPicker,
         {
           inline: true,
@@ -281,40 +333,39 @@ const GradientEditor = (props) => {
             });
           },
           suffix: "°",
-          size: "small",
+          size: "medium",
           className: "es:grow",
-          placeholder: linearDirections.find(({ value: value2 }) => value2 === gradientData?.orientation?.value)?.valueDegrees ?? ""
-        }
-      ),
-      /* @__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: clsx("es:size-5 es:rounded-sm es:from-secondary-700 es:to-secondary-200", iconClass) }),
-                onClick: () => {
-                  setGradientData({
-                    ...gradientData,
-                    orientation: { type: "directional", value: value2 }
-                  });
-                },
-                children: label
+          placeholder: linearDirections.find(({ value: value2 }) => value2 === gradientData?.orientation?.value)?.valueDegrees ?? "",
+          children: /* @__PURE__ */ jsx(
+            Menu,
+            {
+              triggerIcon: icons.sliders,
+              triggerProps: {
+                tooltip: __("Presets", "eightshift-ui-components"),
+                slot: null
               },
-              value2
-            );
-          })
+              keepOpen: true,
+              children: linearDirections.map(({ label, value: value2, iconClass }) => {
+                return /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    icon: /* @__PURE__ */ jsx("div", { className: clsx("es:size-5 es:rounded-sm es:from-secondary-700 es:to-secondary-200", iconClass) }),
+                    onClick: () => {
+                      setGradientData({
+                        ...gradientData,
+                        orientation: { type: "directional", value: value2 }
+                      });
+                    },
+                    children: label
+                  },
+                  value2
+                );
+              })
+            }
+          )
         }
-      )
-    ] }),
-    gradientType === "radial" && /* @__PURE__ */ jsxs("div", { className: "es:space-y-2", children: [
-      /* @__PURE__ */ jsx(
+      ) }),
+      /* @__PURE__ */ jsx(Container, { hidden: gradientType !== "radial", children: /* @__PURE__ */ jsx(
         OptionSelect,
         {
           label: __("Shape", "eightshift-ui-components"),
@@ -332,8 +383,8 @@ const GradientEditor = (props) => {
             });
           }
         }
-      ),
-      /* @__PURE__ */ jsx(
+      ) }),
+      /* @__PURE__ */ jsx(Container, { hidden: gradientType !== "radial", children: /* @__PURE__ */ jsx(
         MatrixAlign,
         {
           icon: icons.centerPoint,
@@ -350,10 +401,8 @@ const GradientEditor = (props) => {
             });
           }
         }
-      )
-    ] }),
-    gradientType === "conic" && /* @__PURE__ */ jsxs("div", { className: "es:space-y-2", children: [
-      /* @__PURE__ */ jsx(
+      ) }),
+      /* @__PURE__ */ jsx(Container, { hidden: gradientType !== "conic", children: /* @__PURE__ */ jsx(
         NumberPicker,
         {
           inline: true,
@@ -362,19 +411,18 @@ const GradientEditor = (props) => {
           min: 0,
           max: 360,
           step: 1,
-          value: parseInt(gradientData?.angle.replace("deg", "")),
+          value: parseInt(gradientData?.angle?.replace("deg", "")),
           onChange: (value2) => {
             setGradientData({
               ...gradientData,
               angle: `${value2}deg`
             });
           },
-          size: "small",
-          suffix: "°",
-          className: "es:grow"
+          size: "medium",
+          suffix: "°"
         }
-      ),
-      /* @__PURE__ */ jsx(
+      ) }),
+      /* @__PURE__ */ jsx(Container, { hidden: gradientType !== "conic", children: /* @__PURE__ */ jsx(
         MatrixAlign,
         {
           icon: icons.centerPoint,
@@ -387,39 +435,29 @@ const GradientEditor = (props) => {
             });
           }
         }
-      )
+      ) }),
+      /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          checked: gradientData.repeating,
+          onChange: (value2) => {
+            setGradientData({
+              ...gradientData,
+              repeating: value2
+            });
+          },
+          label: __("Repeating", "eightshift-ui-components"),
+          icon: icons.gradientRepeat
+        }
+      ) })
     ] }),
     /* @__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(
-      DraggableList,
+      BaseControl,
       {
-        items: gradientData?.stops,
-        onChange: (items) => {
-          setGradientData({
-            ...gradientData,
-            stops: items.map(({ color }, i) => ({
-              ...gradientData.stops[i] ?? {},
-              color
-            }))
-          });
-        },
         icon: icons.gradientStop,
         label: __("Gradient stops", "eightshift-ui-components"),
-        actions: /* @__PURE__ */ jsx(
+        inline: true,
+        children: /* @__PURE__ */ jsx(
           Button,
           {
             icon: icons.add,
@@ -430,9 +468,27 @@ const GradientEditor = (props) => {
                 stops: [...gradientData.stops, { color: "#000000FF" }]
               });
             },
+            type: "simple",
             "aria-label": __("Add stop", "eightshift-ui-components")
           }
-        ),
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(ContainerGroup, { children: /* @__PURE__ */ jsx(
+      DraggableList,
+      {
+        items: gradientData?.stops,
+        onChange: (items) => {
+          setGradientData({
+            ...gradientData,
+            stops: items.map(({ color }, i) => ({
+              ...gradientData.stops[i] ?? {},
+              color
+            }))
+          });
+        },
+        orientation: "vertical",
+        className: "es:contents",
         children: (item) => {
           const { color, updateData, itemIndex } = item;
           return /* @__PURE__ */ jsx(
@@ -447,13 +503,13 @@ const GradientEditor = (props) => {
                   color
                 }
               ),
-              textValue: sprintf(__("Stop %s", "eightshift-ui-components"), itemIndex + 1),
               children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
                 /* @__PURE__ */ jsx(
                   TriggeredPopover,
                   {
                     triggerButtonIcon: icons.color,
-                    triggerButtonProps: { size: "small" },
+                    triggerButtonProps: { size: "small", type: "ghost" },
+                    className: "es:p-2.5",
                     children: /* @__PURE__ */ jsx(
                       SolidColorPicker,
                       {
@@ -479,49 +535,16 @@ const GradientEditor = (props) => {
                     icon: icons.trash,
                     size: "small",
                     "aria-label": __("Delete stop", "eightshift-ui-components"),
-                    disabled: gradientData.stops.length <= 2
+                    disabled: gradientData.stops.length <= 2,
+                    type: "dangerGhost"
                   }
                 )
               ] })
             }
           );
         }
-      },
-      gradientData?.stops?.length
-    ),
-    /* @__PURE__ */ jsx(
-      Slider,
-      {
-        "aria-label": __("Stop positions", "eightshift-ui-components"),
-        min: 0,
-        max: 100,
-        step: 1,
-        value: gradientData?.stops?.map(({ offset }, i) => {
-          if (!offset) {
-            return i * 100 / (gradientData.stops.length - 1);
-          }
-          return parseInt(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:pointer-events-none es:absolute es:inset-0 es:flex es:size-3 es:items-center es:justify-center es:text-center es:text-xs es:font-semibold es: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 {