// packages/components/src/duotone-picker/color-list-picker/index.tsx
import { useState } from "@wordpress/element";
import { swatch } from "@wordpress/icons";
import { __ } from "@wordpress/i18n";
import Button from "../../button/index.js";
import ColorPalette from "../../color-palette/index.js";
import ColorIndicator from "../../color-indicator/index.js";
import Icon from "../../icon/index.js";
import { useInstanceId } from "@wordpress/compose";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function ColorOption({
  label,
  value,
  colors,
  disableCustomColors,
  enableAlpha,
  onChange
}) {
  const [isOpen, setIsOpen] = useState(false);
  const idRoot = useInstanceId(ColorOption, "color-list-picker-option");
  const labelId = `${idRoot}__label`;
  const contentId = `${idRoot}__content`;
  return /* @__PURE__ */ _jsxs(_Fragment, {
    children: [/* @__PURE__ */ _jsx(Button, {
      __next40pxDefaultSize: true,
      className: "components-color-list-picker__swatch-button",
      id: labelId,
      onClick: () => setIsOpen((prev) => !prev),
      "aria-expanded": isOpen,
      "aria-controls": contentId,
      icon: value ? /* @__PURE__ */ _jsx(ColorIndicator, {
        colorValue: value,
        className: "components-color-list-picker__swatch-color"
      }) : /* @__PURE__ */ _jsx(Icon, {
        icon: swatch
      }),
      text: label
    }), /* @__PURE__ */ _jsx("div", {
      role: "group",
      id: contentId,
      "aria-labelledby": labelId,
      "aria-hidden": !isOpen,
      children: isOpen && /* @__PURE__ */ _jsx(ColorPalette, {
        "aria-label": __("Color options"),
        className: "components-color-list-picker__color-picker",
        colors,
        value,
        clearable: false,
        onChange,
        disableCustomColors,
        enableAlpha
      })
    })]
  });
}
function ColorListPicker({
  colors,
  labels,
  value = [],
  disableCustomColors,
  enableAlpha,
  onChange
}) {
  return /* @__PURE__ */ _jsx("div", {
    className: "components-color-list-picker",
    children: labels.map((label, index) => /* @__PURE__ */ _jsx(ColorOption, {
      label,
      value: value[index],
      colors,
      disableCustomColors,
      enableAlpha,
      onChange: (newColor) => {
        const newColors = value.slice();
        newColors[index] = newColor;
        onChange(newColors);
      }
    }, index))
  });
}
var color_list_picker_default = ColorListPicker;
export {
  color_list_picker_default as default
};
//# sourceMappingURL=index.js.map
