@eightshift/ui-components 5.0.0 → 5.0.1

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,320 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { a as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-2lR5GG9p.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-B94NDG0v.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import React__default, { useEffect, useRef, forwardRef, useContext, createContext } from "react";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-D0_aaK-e.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DjNo5790.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-CQaXLe-O.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-C3DLdez5.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-nMG2uzxS.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-VO5tcIli.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DsKYcRQ_.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Fp6AwSRn.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { icons } from "../../icons/icons.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
+  let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+    ...props,
+    value: state.isSelected
+  });
+  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577({
+    ...props,
+    isInvalid
+  }, state, inputRef);
+  $e93e671b31057976$export$b8473d3665f3a75a(props, validationState, inputRef);
+  let { isIndeterminate, isRequired, validationBehavior = "aria" } = props;
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = !!isIndeterminate;
+  });
+  let { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
+    isDisabled: isDisabled || isReadOnly,
+    onPress() {
+      let { [$e5be200c675c3b3a$export$a763b9476acd3eb]: groupValidationState } = props;
+      let { commitValidation } = groupValidationState ? groupValidationState : validationState;
+      commitValidation();
+    }
+  });
+  return {
+    labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, pressProps),
+    inputProps: {
+      ...inputProps,
+      checked: isSelected,
+      "aria-required": isRequired && validationBehavior === "aria" || void 0,
+      required: isRequired && validationBehavior === "native"
+    },
+    isSelected,
+    isPressed,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+const $1ae600c947479353$export$ec98120685d4f57d = /* @__PURE__ */ new WeakMap();
+function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
+  const toggleState = $3017fa7ffdddec74$export$8042c6c013fd5226({
+    isReadOnly: props.isReadOnly || state.isReadOnly,
+    isSelected: state.isSelected(props.value),
+    onChange(isSelected) {
+      if (isSelected) state.addValue(props.value);
+      else state.removeValue(props.value);
+      if (props.onChange) props.onChange(isSelected);
+    }
+  });
+  let { name, descriptionId, errorMessageId, validationBehavior } = $1ae600c947479353$export$ec98120685d4f57d.get(state);
+  var _props_validationBehavior;
+  validationBehavior = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : validationBehavior;
+  let { realtimeValidation } = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+    ...props,
+    value: toggleState.isSelected,
+    // Server validation is handled at the group level.
+    name: void 0,
+    validationBehavior: "aria"
+  });
+  let nativeValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let updateValidation = () => {
+    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+  };
+  useEffect(updateValidation);
+  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+  let displayValidation = validationBehavior === "native" ? state.displayValidation : combinedRealtimeValidation;
+  var _props_isRequired;
+  let res = $406796ff087fe49b$export$e375f10ce42261c5({
+    ...props,
+    isReadOnly: props.isReadOnly || state.isReadOnly,
+    isDisabled: props.isDisabled || state.isDisabled,
+    name: props.name || name,
+    isRequired: (_props_isRequired = props.isRequired) !== null && _props_isRequired !== void 0 ? _props_isRequired : state.isRequired,
+    validationBehavior,
+    [$e5be200c675c3b3a$export$a763b9476acd3eb]: {
+      realtimeValidation: combinedRealtimeValidation,
+      displayValidation,
+      resetValidation: state.resetValidation,
+      commitValidation: state.commitValidation,
+      updateValidation(v) {
+        nativeValidation.current = v;
+        updateValidation();
+      }
+    }
+  }, toggleState, inputRef);
+  return {
+    ...res,
+    inputProps: {
+      ...res.inputProps,
+      "aria-describedby": [
+        props["aria-describedby"],
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
+      ].filter(Boolean).join(" ") || void 0
+    }
+  };
+}
+const $bc237834342dbd75$export$139c5b8563afc1fc = /* @__PURE__ */ createContext(null);
+const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef(function Checkbox(props, ref) {
+  let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $4e85f108e88277b8$export$b085522c77523c51);
+  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
+  var _props_validationBehavior, _ref;
+  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
+  let groupState = useContext($bc237834342dbd75$export$139c5b8563afc1fc);
+  let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  let { labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid } = groupState ? $fba3e38d5ca8983f$export$353b32fc6898d37d({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+    // it's passed explicitly here to avoid typescript error (requires ignore).
+    // @ts-ignore
+    value: props.value,
+    // ReactNode type doesn't allow function children.
+    children: typeof props.children === "function" ? true : props.children
+  }, groupState, inputRef) : $406796ff087fe49b$export$e375f10ce42261c5({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    children: typeof props.children === "function" ? true : props.children,
+    validationBehavior
+  }, $3017fa7ffdddec74$export$8042c6c013fd5226(props), inputRef);
+  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+  let isInteractionDisabled = isDisabled || isReadOnly;
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+    ...props,
+    isDisabled: isInteractionDisabled
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-Checkbox",
+    values: {
+      isSelected,
+      isIndeterminate: props.isIndeterminate || false,
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired: props.isRequired || false
+    }
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("label", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
+    ref,
+    slot: props.slot || void 0,
+    "data-selected": isSelected || void 0,
+    "data-indeterminate": props.isIndeterminate || void 0,
+    "data-pressed": isPressed || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-readonly": isReadOnly || void 0,
+    "data-invalid": isInvalid || void 0,
+    "data-required": props.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
+    elementType: "span"
+  }, /* @__PURE__ */ React__default.createElement("input", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
+    ref: inputRef
+  })), renderProps.children);
+});
+/**
+ * A simple checkbox.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - The checkbox icon.
+ * @param {string} [props.label] - The checkbox label.
+ * @param {string} [props.subtitle] - The checkbox subtitle.
+ * @param {boolean} props.checked - Whether the checkbox is checked.
+ * @param {boolean} [props.disabled] - Whether the checkbox is disabled.
+ * @param {boolean} [props.readOnly] - Whether the checkbox is read-only.
+ * @param {boolean} [props.indeterminate] - Whether the checkbox is in an indeterminate state.
+ * @param {Function} props.onChange - The function to call when the checkbox is changed.
+ * @param {string} [props.className] - Additional classes to add to the checkbox container.
+ * @param {string} [props.labelClassName] - Additional classes to add to the label container.
+ * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
+ * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The Checkbox component.
+ *
+ * @example
+ * <Checkbox
+ *  label='My label'
+ *  checked={myValue}
+ *  onChange={(value) => setMyValue(value)}
+ * />
+ *
+ * @preserve
+ */
+const Checkbox2 = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    checked,
+    disabled,
+    readOnly,
+    indeterminate,
+    onChange,
+    className,
+    labelClassName,
+    inlineSubtitle,
+    alignEnd,
+    children,
+    hidden,
+    ...other
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  const selectedOrIntermediate = checked || indeterminate;
+  return /* @__PURE__ */ jsxs(
+    $bc237834342dbd75$export$48513f6b9f8ce62d,
+    {
+      isDisabled: disabled,
+      isIndeterminate: indeterminate,
+      isReadOnly: readOnly,
+      isSelected: checked ?? false,
+      onChange,
+      className: clsx("es:group es:flex es:w-full es:items-center es:gap-1.5 es:text-sm", className),
+      ...other,
+      children: [
+        (icon || alignEnd) && (label || subtitle) && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon,
+            label,
+            subtitle,
+            className: clsx("es:ml-1", labelClassName),
+            inlineSubtitle,
+            fullSizeSubtitle: true,
+            fullWidth: true,
+            as: $01b77f81d0f07f68$export$b04be29aa201d4f5
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              "es:size-5 es:flex es:items-center es:justify-center",
+              "es:transition es:cursor-pointer",
+              "es:bg-radial es:border es:rounded-md",
+              "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+              "es:any-focus:outline-hidden es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
+              !selectedOrIntermediate && "es:group-focus-visible:border-accent-500",
+              !selectedOrIntermediate && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
+              !selectedOrIntermediate && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",
+              !selectedOrIntermediate && "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
+              selectedOrIntermediate && "es:text-white es:from-accent-500 es:to-accent-600",
+              selectedOrIntermediate && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
+              selectedOrIntermediate && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
+              !alignEnd && subtitle && "es:mb-auto"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                AnimatedVisibility,
+                {
+                  transition: "scaleFade",
+                  visible: indeterminate,
+                  className: "es:transition-none",
+                  children: /* @__PURE__ */ jsx("div", { className: "es:h-0.5 es:w-3 es:rounded es:bg-white" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AnimatedVisibility,
+                {
+                  transition: "scaleRotateFade",
+                  visible: !indeterminate && checked,
+                  className: "es:transition-none es:icon:size-3 es:icon:stroke-3",
+                  noInitial: true,
+                  children: icons.check
+                }
+              )
+            ]
+          }
+        ),
+        !icon && !alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            label,
+            subtitle,
+            className: clsx(subtitle && "es:mt-0.5", "es:ml-0.5 es:*:space-y-0.5", labelClassName),
+            inlineSubtitle,
+            fullSizeSubtitle: true,
+            as: $01b77f81d0f07f68$export$b04be29aa201d4f5
+          }
+        ),
+        !(icon || label || subtitle) && children
+      ]
+    }
+  );
+};
+export {
+  Checkbox2 as Checkbox
+};

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

@@ -0,0 +1,272 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { Menu, MenuItem, MenuSeparator, MenuSection } from "../menu/menu.js";
+import { ColorSwatch } from "./color-swatch.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { icons } from "../../icons/icons.js";
+/**
+ * Color picker.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.icon] - Icon to display.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {string} [props.labelClassName] - Additional clsx passed to the label.
+ * @param {string} props.value - Selected value.
+ * @param {Function} props.onChange - Function to run when the value changes.
+ * @param {Object[]} props.colors - Colors to display.
+ * @param {string} props.colors[].name - Color name.
+ * @param {string} props.colors[].slug - Color slug.
+ * @param {string} props.colors[].color - Color value (HEX, RGB, HSL, HSB).
+ * @param {boolean} [props.showColorCode] - If `true`, the HEX color code is shown below the color name.
+ * @param {boolean} [props.noColorGroups] - If `true`, colors won't be grouped by shades.
+ * @param {ColorPickerType} props.type - Type of the color picker. Affects the icon and tooltip.
+ * @param {boolean} [props.clearable] - If `true`, the picked color can be removed.
+ * @param {boolean} [props.stacked] - If `true`, the control is not rendered inline.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {string} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip.
+ * @param {string} [props.clearItemLabel] - Label for the "None" item, if `clearable` is enabled.
+ * @param {JSX.Element|JSX.Element[]} [props.extraOptions] - If `type` is `menu`, allows passing additional menu items, which will be displayed below the options.
+ *
+ * @returns {JSX.Element} The ColorPicker component.
+ *
+ * @typedef {'default' | 'fillColor' | 'textColor' | 'textHighlightColor' | 'listMarkerColor'} ColorPickerType
+ *
+ * @example
+ * <ColorPicker
+ * 	icon={icons.fillColor}
+ * 	label={__('Fill color', 'eightshift-ui-components')}
+ * 	subtitle={__('Select fill color', 'eightshift-ui-components')}
+ * 	value={fillColor}
+ * 	onChange={(value) => setAttributes({ fillColor: value })}
+ * 	colors={[
+ * 		{ name: 'Red', slug: 'red', color: '#ff0000' },
+ * 		{ name: 'Green', slug: 'green', color: '#00ff00' },
+ * 		{ name: 'Blue', slug: 'blue', color: '#0000ff' },
+ * 	]}
+ * />
+ *
+ * @preserve
+ */
+const ColorPicker = (props) => {
+  var _a, _b;
+  const {
+    icon,
+    label,
+    subtitle,
+    labelClassName,
+    value,
+    onChange,
+    colors,
+    showColorCode,
+    noColorGroups,
+    type = "default",
+    stacked,
+    clearable,
+    clearItemLabel = __("None", "eightshift-ui-components"),
+    hidden,
+    tooltip,
+    extraOptions,
+    ...rest
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  const currentColor = (_a = colors == null ? void 0 : colors.find(({ slug }) => slug === value)) == null ? void 0 : _a.color;
+  const colorSuffixRegex = /(?!^.+)(-?(?:50|100|200|300|400|500|600|700|800|900|950|10|20|30|40|50|60|70|80|90){1})$/gi;
+  const hasColorGroups = !noColorGroups && (colors == null ? void 0 : colors.some(({ slug }) => colorSuffixRegex.test(slug)));
+  let groupedColors;
+  const colorGroupNames = {
+    generic: __("Other colors", "eightshift-ui-components")
+  };
+  if (hasColorGroups) {
+    groupedColors = colors.reduce(
+      (output, current) => {
+        var _a2;
+        if (current === void 0 || (current == null ? void 0 : current.name) === void 0 || (current == null ? void 0 : current.slug) === void 0) {
+          return output;
+        }
+        if ((_a2 = current.slug.match(colorSuffixRegex)) == null ? void 0 : _a2.length) {
+          const newSlug = current.slug.replace(colorSuffixRegex, "").trim();
+          if (!output[newSlug]) {
+            output[newSlug] = [];
+            colorGroupNames[newSlug] = current.name.replace(colorSuffixRegex, "").trim();
+          }
+          output[newSlug] = [
+            ...output[newSlug],
+            {
+              ...current,
+              shade: current.slug.match(colorSuffixRegex)[0].replace("-", "")
+            }
+          ];
+        } else {
+          output.generic = [...output.generic, current];
+        }
+        return output;
+      },
+      { generic: [] }
+    );
+  }
+  const SingleItem = ({ name, slug, color, ...rest2 }) => /* @__PURE__ */ jsxs(
+    MenuItem,
+    {
+      ...rest2,
+      endIcon: /* @__PURE__ */ jsx(
+        ColorSwatch,
+        {
+          className: "es:size-5.5!",
+          color
+        }
+      ),
+      onClick: () => onChange(slug),
+      selected: value === slug,
+      children: [
+        !showColorCode && name.replaceAll("-", " "),
+        showColorCode && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            label: name.replaceAll("-", " "),
+            subtitle: color.toUpperCase()
+          }
+        )
+      ]
+    }
+  );
+  let tooltipText;
+  let menuTriggerIcon;
+  if (type === "default") {
+    tooltipText = __("Color", "eightshift-ui-components");
+  } else if (type === "fillColor") {
+    tooltipText = __("Fill color", "eightshift-ui-components");
+    menuTriggerIcon = icons.colorPickerFill;
+  } else if (type === "textColor") {
+    tooltipText = __("Text color", "eightshift-ui-components");
+    menuTriggerIcon = icons.colorPickerText;
+  } else if (type === "textHighlightColor") {
+    tooltipText = __("Text highlight color", "eightshift-ui-components");
+    menuTriggerIcon = icons.colorPickerTextHighlight;
+  } else if (type === "listMarkerColor") {
+    tooltipText = __("List marker color", "eightshift-ui-components");
+    menuTriggerIcon = icons.colorPickerListMarker;
+  }
+  const currentColorName = (_b = colors == null ? void 0 : colors.find((color) => (color == null ? void 0 : color.slug) === value)) == null ? void 0 : _b.name;
+  if (!label && tooltipText) {
+    tooltipText = /* @__PURE__ */ jsx(
+      RichLabel,
+      {
+        label: tooltipText,
+        subtitle: currentColorName,
+        noColor: true
+      }
+    );
+  } else if (!label && tooltip) {
+    tooltipText = /* @__PURE__ */ jsx(
+      RichLabel,
+      {
+        label: tooltip,
+        subtitle: currentColorName,
+        noColor: true
+      }
+    );
+  } else if (label) {
+    tooltipText = currentColorName;
+  }
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      className: clsx("es:w-full", labelClassName),
+      inline: !stacked,
+      children: /* @__PURE__ */ jsxs(
+        Menu,
+        {
+          triggerIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
+            (type === "default" || icon) && /* @__PURE__ */ jsx(
+              ColorSwatch,
+              {
+                color: currentColor,
+                className: "es:size-6! es:shadow-none!"
+              }
+            ),
+            !icon && type !== "default" && /* @__PURE__ */ jsxs("div", { className: "es:relative es:size-6 es:icon:absolute es:icon:inset-0 es:icon:size-full", children: [
+              menuTriggerIcon,
+              /* @__PURE__ */ jsx(
+                ColorSwatch,
+                {
+                  color: currentColor,
+                  className: "es:absolute es:-bottom-0.5 es:left-0 es:h-2! es:shadow-none!"
+                }
+              )
+            ] })
+          ] }),
+          keepOpen: true,
+          tooltip: tooltipText,
+          triggerProps: {
+            ...rest.triggerProps,
+            "aria-label": typeof label !== "undefined" ? null : props == null ? void 0 : props["aria-label"]
+          },
+          ...rest,
+          children: [
+            clearable && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => onChange(void 0),
+                  selected: typeof value === "undefined",
+                  endIcon: /* @__PURE__ */ jsx(ColorSwatch, { className: "es:size-5.5!" }),
+                  children: clearItemLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(MenuSeparator, {})
+            ] }),
+            (noColorGroups || !hasColorGroups) && colors.map((color) => /* @__PURE__ */ jsx(
+              SingleItem,
+              {
+                ...color
+              },
+              color.slug
+            )),
+            hasColorGroups && /* @__PURE__ */ jsxs(Fragment, { children: [
+              Object.entries(groupedColors).map(([groupSlug, colors2]) => {
+                if (groupSlug === "generic") {
+                  return null;
+                }
+                return /* @__PURE__ */ jsx(
+                  MenuSection,
+                  {
+                    "aria-label": colorGroupNames[groupSlug],
+                    children: colors2.map((color) => /* @__PURE__ */ jsx(
+                      SingleItem,
+                      {
+                        ...color
+                      },
+                      color.slug
+                    ))
+                  },
+                  groupSlug
+                );
+              }),
+              groupedColors.generic.length > 0 && /* @__PURE__ */ jsx(MenuSection, { "aria-label": colorGroupNames.generic, children: groupedColors.generic.map((color) => /* @__PURE__ */ jsx(
+                SingleItem,
+                {
+                  ...color
+                },
+                color.slug
+              )) })
+            ] }),
+            extraOptions && /* @__PURE__ */ jsx(MenuSeparator, {}),
+            extraOptions
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ColorPicker
+};

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

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Bcn6oRSg.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-BhgbJF5x.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 clsx to apply.
+ * @param {string} [props.colorName] - The name of the color. Should be auto-generated for colors.
+ * @param {boolean} [props.customGradient=false] - Set to `true` if using a custom gradient.
+ *
+ * @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, customGradient = false } = props;
+  const checkerPattern = "repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 0.75rem 0.75rem";
+  let color;
+  if (rawColor && !gradient && !customGradient) {
+    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: () => clsx("es:size-6 es:rounded es:border es:border-secondary-300 es:shadow-xs", !color && !gradient && !customGradient && "es:bg-white", className),
+      colorName: !color && !gradient && !customGradient ? __("No color", "eightshift-ui-components") : colorName,
+      color,
+      children: !color && !gradient && !customGradient && /* @__PURE__ */ jsx("div", { className: "es:m-auto es:h-full es:w-px es:rotate-45 es:rounded es:bg-red-500" })
+    }
+  );
+};
+export {
+  ColorSwatch
+};