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

React component library

import { jsx as a, jsxs as p } from "react/jsx-runtime";
import { forwardRef as q, useState as S, useCallback as G } from "react";
import { s as w } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as J, e as r, c as i, b as V, f as v, h as M, i as Q } from "./utils-BUdHa0nB.js";
import { d as X } from "./index-Dt62UGku.js";
import { u as Y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as Z } from "./useUpdateEffect-CuYWz7EA.js";
const R = (e, t) => `calc(${r(e, t)} - 1rem)`, _ = w.label`
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  ${(e) => J(e.theme, "Input", e.size, "enabled")};
  min-height: ${(e) => r(e.theme, e.size)};
  max-height: ${(e) => r(e.theme, e.size)};
  background-color: ${(e) => i(
  e.theme,
  "Input",
  e.color,
  "enabled",
  "background"
)};
  color: ${(e) => i(
  e.theme,
  "Input",
  e.isFocused ? "primary" : e.color,
  "enabled",
  "text"
)};
  border: 1px solid
    ${(e) => i(
  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 && v(e.theme)};
  /* ${(e) => e.disabled === !0 && M(e.theme)} */
  ${(e) => e.disabled === !0 && `background-color: ${i(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(t) => i(
  t.theme,
  "Input",
  t.color,
  "disabled",
  "text"
)};`}
  border: 1px solid ${(e) => i(e.theme, "Input", e.color, "disabled", "border")};
`, ee = w.div`
  ${(e) => !e.disabled && e.readOnly !== !0 && "cursor: pointer;"}
  min-height: ${(e) => r(e.theme, e.size)};
  max-height: ${(e) => r(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 && v(e.theme)};
    }
    &:hover {
      ${(e) => !e.disabled && !e.withInput && e.readOnly !== !0 && v(e.theme)};
    }
    ${(e) => e.disabled === !0 && `opacity: ${e.theme.palette.opacity[e.theme.palette.disabled.opacity]};`}
    box-sizing: border-box;
    min-width: ${(e) => R(e.theme, e.size)};
    height: ${(e) => R(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 && Q(e.theme)}; */
      ${(e) => e.disabled === !0 && `background-color: ${i(
  e.theme,
  "Input",
  e.color,
  "disabled",
  "background",
  "backgroundOpacity"
)};
        color: ${(t) => i(
  t.theme,
  "Input",
  t.color,
  "disabled",
  "text"
)};`}
    }
  }
`, te = w.span`
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  & input {
    outline: none;
    border: none;
    background-color: transparent;
    width: 100%;
  }
`, ue = q((e, t) => {
  const {
    id: u,
    name: g,
    defaultValue: z = "#000000",
    value: d,
    size: F = "small",
    tabIndex: $,
    withInput: f = !1,
    className: T = "",
    style: j = {},
    color: s = "primary",
    debounceTime: D = 0,
    readOnly: o,
    disabled: l,
    onChange: y = () => {
    },
    onFocus: U = () => {
    },
    onBlur: E = () => {
    },
    onInput: W = () => {
    },
    onKeyDown: A = () => {
    },
    labelRef: H,
    inputProps: x,
    ...k
  } = e, O = Y(), [c, I] = S(d), [K, B] = S(!1), L = new RegExp(/^#[0-9A-F]{6}$/i);
  Z(() => I(d), [d]);
  const N = G(
    X((n, C) => P(n, C), D),
    [y]
  ), P = (n, C) => {
    y && y(n, C);
  }, h = (n) => {
    d && I(n.target.value), N(n, n.target.value);
  }, m = (n) => {
    B(!0), U(n);
  }, b = (n) => {
    L.test(c) || I(z), B(!1), E(n);
  };
  return /* @__PURE__ */ a(
    ee,
    {
      ref: t,
      theme: O,
      size: F,
      className: T,
      style: j,
      disabled: l,
      readOnly: o,
      withInput: f,
      ...k,
      children: f ? /* @__PURE__ */ p(
        _,
        {
          withInput: f,
          theme: O,
          color: s,
          size: F,
          disabled: l,
          readOnly: o,
          tabIndex: $,
          isFocused: K,
          children: [
            /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
              "input",
              {
                type: "color",
                ref: t,
                id: u,
                name: g,
                value: c,
                disabled: l || o,
                onChange: h,
                onBlur: b,
                onFocus: m,
                color: s,
                ...x
              }
            ) }),
            /* @__PURE__ */ a(te, { children: /* @__PURE__ */ a(
              "input",
              {
                ref: H,
                value: c,
                onChange: h,
                onFocus: m,
                onBlur: b,
                onInput: W,
                onKeyDown: A,
                disabled: l || o,
                ...k
              }
            ) })
          ]
        }
      ) : /* @__PURE__ */ a("div", { children: d == null || d == "undefined" ? /* @__PURE__ */ a(
        "input",
        {
          type: "color",
          ref: t,
          id: u,
          name: g,
          defaultValue: z,
          disabled: l || o,
          onChange: h,
          onBlur: b,
          onFocus: m,
          color: s,
          tabIndex: $,
          ...x
        }
      ) : /* @__PURE__ */ a(
        "input",
        {
          type: "color",
          ref: t,
          id: u,
          name: g,
          value: c,
          disabled: l || o,
          onChange: h,
          onBlur: b,
          onFocus: m,
          color: s,
          tabIndex: $,
          ...x
        }
      ) })
    }
  );
});
export {
  ue as default
};