kitchen-color-studio/lib/HctPicker/index.js

an open-source color editor for designing color system

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);

// src/HctPicker/index.tsx
var HctPicker_exports = {};
__export(HctPicker_exports, {
  default: () => HctPicker_default
});
module.exports = __toCommonJS(HctPicker_exports);
var import_antd = require("antd");
var import_leva = require("leva");
var import_react = require("react");
var import_styled_components = __toESM(require("styled-components"));
var import__ = require("../index");
var ControlView = import_styled_components.default.div`
  width: 240px;
`;
var ColorAvatar = import_styled_components.default.div`
  cursor: pointer;

  width: 24px;
  min-width: 24px;
  height: 24px;

  border-radius: 3px;
`;
var HctPicker = (0, import_react.memo)(({ color = "#1677FF", onChange, listModify }) => {
  const [visible, setVisible] = (0, import_react.useState)(false);
  const colorStore = (0, import_leva.useCreateStore)();
  const [{ HEX }, set] = (0, import_leva.useControls)(
    // @ts-ignore
    () => ({
      HCT: {
        value: (0, import__.hexToHct)(color),
        min: 0,
        max: 360,
        step: 1,
        onChange: (v) => set({ HEX: (0, import__.hctToHex)(v) }),
        transient: false
      },
      HEX: {
        value: color,
        onChange: (v) => set({ HCT: (0, import__.hexToHct)(v) }),
        transient: false
      }
    }),
    { store: colorStore }
  );
  (0, import_react.useEffect)(() => {
    onChange(HEX);
  }, [HEX]);
  return /* @__PURE__ */ React.createElement(
    import_antd.Popover,
    {
      content: /* @__PURE__ */ React.createElement(ControlView, null, /* @__PURE__ */ React.createElement(import_leva.LevaPanel, { fill: true, flat: true, store: colorStore, theme: import__.levaLightTheme, titleBar: false })),
      onOpenChange: setVisible,
      open: visible,
      trigger: "click"
    },
    /* @__PURE__ */ React.createElement(
      ColorAvatar,
      {
        onClick: () => listModify && set({ HEX: color }),
        style: { background: listModify ? color : HEX }
      }
    )
  );
});
var HctPicker_default = HctPicker;