@lanaco/lnc-react-ui/dist/ColorInput.js

React component library

import { jsx as a, jsxs as q } from "react/jsx-runtime";
import { forwardRef as G, useState as R, useCallback as J } from "react";
import { n as I } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { P as t } from "./index-S5Cd7WrG.js";
import { c as M, d, b as g, a as V, e as C, f as Q, h as X } from "./utils-DtRLzzTZ.js";
import { d as Y } from "./index-CkWvbrVT.js";
import { u as Z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as _ } from "./useUpdateEffect-CuYWz7EA.js";
const T = (e, o) => `calc(${d(e, o)} - 1rem)`, ee = I.label`
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  ${(e) => M(e.theme, "Input", e.size, "enabled")};
  min-height: ${(e) => d(e.theme, e.size)};
  max-height: ${(e) => d(e.theme, e.size)};
  background-color: ${(e) => g(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "background"
)};
  color: ${(e) => g(
  e.theme,
  "Input",
  e.isFocused ? "primary" : e.color,
  "enabled",
  "text"
)};
  border: 1px solid
    ${(e) => g(
  e.theme,
  "Input",
  e.isFocused ? "primary" : e.color,
  "enabled",
  "border"
)};
  border-radius: ${(e) => V(e.theme, "regular")};
  padding: 0.625rem 0.75rem;
  width: 100%;
  ${(e) => !e.disabled && e.readOnly !== !0 && e.isFocused === !0 && C(e.theme)};
  ${(e) => e.disabled === !0 && Q(e.theme)}
  border: 1px solid ${(e) => g(e.theme, "Input", e.color, "disabled", "border")};
`, te = I.div`
  ${(e) => !e.disabled && e.readOnly !== !0 && "cursor: pointer;"}
  min-height: ${(e) => d(e.theme, e.size)};
  max-height: ${(e) => d(e.theme, e.size)};
  display: inline-flex;
  align-items: center;
  justify-content: center;
  ${(e) => e.withInput == !0 && "width: 100%;"}
  & div {
    &:focus {
      ${(e) => e.disabled !== !0 && e.withInput !== !0 && e.readOnly !== !0 && C(e.theme)};
    }
    &:hover {
      ${(e) => !e.disabled && !e.withInput && e.readOnly !== !0 && C(e.theme)};
    }
    ${(e) => e.disabled === !0 && `opacity: ${e.theme.palette.opacity[e.theme.palette.disabled.opacity]};`}
    box-sizing: border-box;
    min-width: ${(e) => T(e.theme, e.size)};
    height: ${(e) => T(e.theme, e.size)};
    border-radius: ${(e) => V(e.theme, "curved")};
    overflow: hidden;
    & input[type="color"] {
      border: 0;
      padding: 0;
      width: 200%;
      height: 200%;
      cursor: pointer;
      transform: translate(-25%, -25%);
      ${(e) => e.disabled === !0 && X(e.theme)};
    }
  }
`, ne = I.span`
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  & input {
    outline: none;
    border: none;
    background-color: transparent;
    width: 100%;
  }
`, ae = G((e, o) => {
  const {
    id: u,
    name: f,
    defaultValue: z = "#000000",
    value: i,
    size: F = "small",
    tabIndex: y,
    withInput: $ = !1,
    className: k = "",
    style: D = {},
    color: s = "primary",
    debounceTime: j = 0,
    readOnly: l,
    disabled: r,
    onChange: w = () => {
    },
    onFocus: P = () => {
    },
    onBlur: U = () => {
    },
    onInput: E = () => {
    },
    onKeyDown: K = () => {
    },
    labelRef: N,
    inputProps: x,
    ...O
  } = e, B = Z(), [c, p] = R(i), [W, S] = R(!1), A = new RegExp(/^#[0-9A-F]{6}$/i);
  _(() => p(i), [i]);
  const H = J(
    Y((n, v) => L(n, v), j),
    [w]
  ), L = (n, v) => {
    w && w(n, v);
  }, m = (n) => {
    i && p(n.target.value), H(n, n.target.value);
  }, h = (n) => {
    S(!0), P(n);
  }, b = (n) => {
    A.test(c) || p(z), S(!1), U(n);
  };
  return /* @__PURE__ */ a(
    te,
    {
      ref: o,
      theme: B,
      size: F,
      className: k,
      style: D,
      disabled: r,
      readOnly: l,
      withInput: $,
      ...O,
      children: $ ? /* @__PURE__ */ q(
        ee,
        {
          withInput: $,
          theme: B,
          color: s,
          size: F,
          disabled: r,
          readOnly: l,
          tabIndex: y,
          isFocused: W,
          children: [
            /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
              "input",
              {
                type: "color",
                ref: o,
                id: u,
                name: f,
                value: c,
                disabled: r || l,
                onChange: m,
                onBlur: b,
                onFocus: h,
                color: s,
                ...x
              }
            ) }),
            /* @__PURE__ */ a(ne, { children: /* @__PURE__ */ a(
              "input",
              {
                ref: N,
                value: c,
                onChange: m,
                onFocus: h,
                onBlur: b,
                onInput: E,
                onKeyDown: K,
                disabled: r || l,
                ...O
              }
            ) })
          ]
        }
      ) : /* @__PURE__ */ a("div", { children: i == null || i == "undefined" ? /* @__PURE__ */ a(
        "input",
        {
          type: "color",
          ref: o,
          id: u,
          name: f,
          defaultValue: z,
          disabled: r || l,
          onChange: m,
          onBlur: b,
          onFocus: h,
          color: s,
          tabIndex: y,
          ...x
        }
      ) : /* @__PURE__ */ a(
        "input",
        {
          type: "color",
          ref: o,
          id: u,
          name: f,
          value: c,
          disabled: r || l,
          onChange: m,
          onBlur: b,
          onFocus: h,
          color: s,
          tabIndex: y,
          ...x
        }
      ) })
    }
  );
});
ae.propTypes = {
  id: t.any,
  name: t.string,
  defaultValue: t.string,
  value: t.string,
  debounceTime: t.number,
  disabled: t.bool,
  readOnly: t.bool,
  tabIndex: t.number,
  preventDefault: t.bool,
  labelRef: t.any,
  inputProps: t.bool,
  withInput: t.bool,
  //---------------------------------------------------------------
  onChange: t.func,
  onBlur: t.func,
  onFocus: t.func,
  onInput: t.func,
  onKeyDown: t.func,
  //---------------------------------------------------------------
  className: t.string,
  style: t.object,
  size: t.oneOf(["small", "medium", "large"]),
  color: t.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  ae as default
};