prometeo-design-system 3.1.3 → 3.1.4

package/dist/Input-EkMrxcNX.js

@@ -1,241 +0,0 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
-import { c as t } from "./cn-B6yFEsav.js";
-import { useRef as _, useLayoutEffect as q, memo as V, forwardRef as F, useState as ee } from "react";
-import te from "./Spinner.es.js";
-import { H as re } from "./HelperComponent-DhGU_ug-.js";
-import { EyeVisibility as oe } from "./Icons/EyeVisibility.es.js";
-import { EyeVisibilityOff as le } from "./Icons/EyeVisibilityOff.es.js";
-import { Close as se } from "./Icons/Close.es.js";
-const ae = (o) => {
-  let e = o;
-  for (; e && e !== document.body; ) {
-    const n = window.getComputedStyle(e).backgroundColor;
-    if (n && n !== "transparent" && n !== "rgba(0, 0, 0, 0)")
-      return n;
-    e = e.parentElement;
-  }
-  const l = window.getComputedStyle(document.body).backgroundColor;
-  return l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)" ? l : "rgb(255, 255, 255)";
-};
-function ne() {
-  const o = _(null);
-  return q(() => {
-    if (!o.current || !o.current.parentElement) return;
-    const e = ae(o.current.parentElement);
-    o.current.style.backgroundColor = e;
-  }, []), {
-    ref: o
-  };
-}
-const b = {
-  default: {
-    container: "",
-    input: t(
-      "border-neutral-default-default text-neutral-default-default!",
-      "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
-      "hover:border-neutral-strong-default"
-    ),
-    label: t("text-neutral-medium-default"),
-    icon: t(
-      "text-neutral-medium-default",
-      "peer-focus:text-primary-default-default"
-    )
-  },
-  error: {
-    container: "",
-    input: t(
-      "border-error-default-default text-neutral-default-default",
-      "focus:border-error-default focus:border-2",
-      "focus:ring-0 focus:ring-error-default/20"
-    ),
-    label: t("text-lime-500", "peer-focus:text-error-light"),
-    icon: t("text-error-light", "peer-focus:text-error-light")
-  },
-  success: {
-    container: "",
-    input: t(
-      "border-success-default-default text-neutral-default-default",
-      "focus:border-success-default focus:border-2",
-      "focus:ring-0 focus:ring-success-default/20"
-    ),
-    label: t("text-success", "peer-focus:text-success-light"),
-    icon: t("text-success-light", "peer-focus:text-success-light")
-  }
-}, v = F(
-  ({
-    label: o,
-    icon: e,
-    iconPosition: l = "left",
-    onChange: N,
-    value: n,
-    name: g,
-    width: x = "100%",
-    height: u,
-    variant: c = "default",
-    labelVariant: a = "default",
-    size: H = "medium",
-    disabled: f = !1,
-    type: s = "text",
-    isFetching: p,
-    errorComponent: h,
-    helperComponent: w,
-    placeholder: $,
-    required: z = !1,
-    onFocus: k,
-    onBlur: I,
-    onKeyDown: L,
-    onKeyUp: R,
-    className: B,
-    style: P,
-    readOnly: D = !1,
-    onClear: C,
-    ...E
-  }, A) => {
-    const [y, M] = ee(!1), { ref: O } = ne();
-    let d = H;
-    u && (d = "customHeight");
-    const i = {
-      small: {
-        container: "text-sm",
-        input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
-        label: ` prometeo-fonts-label-large 
-            peer-focus:prometeo-fonts-label-large  
-            peer-placeholder-shown:${a === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
-        icon: "w-4 h-4 right-3"
-      },
-      medium: {
-        container: "text-base",
-        input: "h-12 px-3 prometeo-fonts-body-large",
-        label: ` prometeo-fonts-label-large 
-            peer-focus:prometeo-fonts-label-large  
-            peer-placeholder-shown:${a === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
-        icon: "w-5 h-5 right-3"
-      },
-      large: {
-        container: "text-lg",
-        input: "h-14 px-3 text-lg  border-b border-t-0 border-x-0 rounded-none focus:ring-0 prometeo-fonts-body-xlarge ",
-        label: "peer-placeholder-shown:prometeo-fonts-body-xlarge peer-focus:prometeo-fonts-label-large peer-focus:text-neutral-medium-default prometeo-fonts-label-large ",
-        icon: "w-6 h-6 right-3"
-      },
-      customHeight: {
-        container: "text-base",
-        input: "text-base",
-        label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
-        icon: "w-6 h-6 right-3"
-      }
-    }, T = () => {
-      M(!y);
-    }, j = {};
-    x && x !== "100%" && (j.width = x), u && (j.height = u);
-    const S = c === "error" && h, G = !S && w, J = s === "password", K = () => a === "static" ? "-top-1 -translate-y-full left-0 pl-3" : e ? `${m ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${l === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${m ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, Q = () => u ? i.customHeight.label : i[d].label, U = () => u ? { height: u } : {}, W = () => a === "default" ? o : $ || o || "", X = () => J ? e ? l === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : e ? l === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Y = a === "default" && "transition-all duration-200 ease-in-out", m = h || w;
-    return /* @__PURE__ */ r.jsxs(
-      "div",
-      {
-        className: t(
-          "relative",
-          i[d].container,
-          !x && "w-full",
-          "bg-inherit",
-          a === "static" && "mt-2",
-          B
-        ),
-        style: { ...P, ...j },
-        children: [
-          /* @__PURE__ */ r.jsx(
-            "input",
-            {
-              id: g,
-              name: g,
-              ref: A,
-              value: n,
-              placeholder: W(),
-              type: s === "password" && y ? "text" : s,
-              className: t(
-                "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
-                "focus:outline-none px-3",
-                a === "default" && "placeholder:text-transparent",
-                a === "static" && "placeholder:text-neutral-medium-default ",
-                b[c].input,
-                i[d].input,
-                e && "pr-10",
-                f && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
-                b[c].container,
-                X()
-              ),
-              style: U(),
-              onChange: N,
-              onFocus: k,
-              onBlur: I,
-              disabled: f,
-              required: z,
-              onKeyDown: L,
-              onKeyUp: R,
-              defaultValue: E.defaultValue,
-              readOnly: D,
-              ...E
-            }
-          ),
-          /* @__PURE__ */ r.jsx(
-            "label",
-            {
-              ref: O,
-              htmlFor: g,
-              className: t(
-                "absolute left-3 pointer-events-none px-1 z-10",
-                Y,
-                Q(),
-                b[c].label,
-                K(),
-                z && "after:content-['*'] after:text-error-default after:ml-1",
-                f && "text-neutral-medium-disabled prometeo-fonts-label-large"
-              ),
-              children: o
-            }
-          ),
-          (e || s === "password" || p) && /* @__PURE__ */ r.jsx(
-            "button",
-            {
-              tabIndex: -1,
-              type: "button",
-              className: t(
-                `absolute ${m ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
-                i[d].icon,
-                b[c].icon,
-                s === "password" && !p ? "cursor-pointer" : "pointer-events-none",
-                l === "right" ? "right-3" : "left-3"
-              ),
-              onClick: s === "password" && !p ? T : void 0,
-              onMouseDown: (Z) => s === "password" && !p && Z.preventDefault(),
-              children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
-                p && s !== "password" ? /* @__PURE__ */ r.jsx(te, { variant: "sync", size: "small", className: "size-5" }) : e,
-                s === "password" && (y ? /* @__PURE__ */ r.jsx(oe, { size: 24, className: "" }) : /* @__PURE__ */ r.jsx(le, { size: 24, className: "" }))
-              ] })
-            }
-          ),
-          C && /* @__PURE__ */ r.jsx(
-            "button",
-            {
-              type: "button",
-              className: t(
-                `absolute ${m ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
-                "size-6 p-1 rounded-full",
-                "hover:bg-neutral-medium-hover transition-colors",
-                f && "opacity-50 cursor-not-allowed"
-              ),
-              disabled: f,
-              onClick: C,
-              children: /* @__PURE__ */ r.jsx(se, { size: 20, className: "" })
-            }
-          ),
-          m && /* @__PURE__ */ r.jsx("div", { className: "min-h-6", children: (S || G) && /* @__PURE__ */ r.jsx(re, { className: "absolute ", variant: c, children: h || w }) })
-        ]
-      }
-    );
-  }
-);
-v.displayName = "Input";
-const be = V(v);
-export {
-  be as I,
-  ne as u
-};