"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/components/src/duotone-picker/duotone-picker.tsx
var duotone_picker_exports = {};
__export(duotone_picker_exports, {
  default: () => duotone_picker_default
});
module.exports = __toCommonJS(duotone_picker_exports);
var import_es6 = __toESM(require("fast-deep-equal/es6"), 1);
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_color_list_picker = __toESM(require("./color-list-picker/index.cjs"), 1);
var import_circular_option_picker = __toESM(require("../circular-option-picker/index.cjs"), 1);
var import_v_stack = require("../v-stack/index.cjs");
var import_custom_duotone_bar = __toESM(require("./custom-duotone-bar.cjs"), 1);
var import_utils = require("./utils.cjs");
var import_spacer = require("../spacer/index.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
function DuotonePicker({
  asButtons,
  loop,
  clearable = true,
  unsetable = true,
  colorPalette,
  duotonePalette,
  disableCustomColors,
  disableCustomDuotone,
  value,
  onChange,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledby,
  ...otherProps
}) {
  const [defaultDark, defaultLight] = (0, import_element.useMemo)(() => (0, import_utils.getDefaultColors)(colorPalette), [colorPalette]);
  const isUnset = value === "unset";
  const unsetOptionLabel = (0, import_i18n.__)("Unset");
  const unsetOption = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.Option, {
    value: "unset",
    isSelected: isUnset,
    tooltipText: unsetOptionLabel,
    "aria-label": unsetOptionLabel,
    className: "components-duotone-picker__color-indicator",
    onClick: () => {
      onChange(isUnset ? void 0 : "unset");
    }
  }, "unset");
  const duotoneOptions = duotonePalette.map(({
    colors,
    slug,
    name
  }) => {
    const style = {
      background: (0, import_utils.getGradientFromCSSColors)(colors, "135deg"),
      color: "transparent"
    };
    const tooltipText = name !== null && name !== void 0 ? name : (0, import_i18n.sprintf)(
      // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
      (0, import_i18n.__)("Duotone code: %s"),
      slug
    );
    const label = name ? (0, import_i18n.sprintf)(
      // translators: %s: The name of the option e.g: "Dark grayscale".
      (0, import_i18n.__)("Duotone: %s"),
      name
    ) : tooltipText;
    const isSelected = (0, import_es6.default)(colors, value);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.Option, {
      value: colors,
      isSelected,
      "aria-label": label,
      tooltipText,
      style,
      onClick: () => {
        onChange(isSelected ? void 0 : colors);
      }
    }, slug);
  });
  const {
    metaProps,
    labelProps
  } = (0, import_circular_option_picker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default, {
    ...otherProps,
    ...metaProps,
    ...labelProps,
    options,
    actions: !!clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.ButtonAction, {
      onClick: () => onChange(void 0),
      accessibleWhenDisabled: true,
      disabled: !value,
      children: (0, import_i18n.__)("Clear")
    }),
    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {
      paddingTop: options.length === 0 ? 0 : 4,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
        spacing: 3,
        children: [!disableCustomColors && !disableCustomDuotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_custom_duotone_bar.default, {
          value: isUnset ? void 0 : value,
          onChange
        }), !disableCustomDuotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_list_picker.default, {
          labels: [(0, import_i18n.__)("Shadows"), (0, import_i18n.__)("Highlights")],
          colors: colorPalette,
          value: isUnset ? void 0 : value,
          disableCustomColors,
          enableAlpha: true,
          onChange: (newColors) => {
            if (!newColors[0]) {
              newColors[0] = defaultDark;
            }
            if (!newColors[1]) {
              newColors[1] = defaultLight;
            }
            const newValue = newColors.length >= 2 ? newColors : void 0;
            onChange(newValue);
          }
        })]
      })
    })
  });
}
var duotone_picker_default = DuotonePicker;
//# sourceMappingURL=duotone-picker.cjs.map
