prometeo-design-system 1.8.3 → 1.8.5

package/dist/InputFormik.es.js

@@ -1,97 +1,162 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import { c as o } from "./cn-B6yFEsav.js";
-import { FastField as $, ErrorMessage as D } from "formik";
-import { memo as L, useState as w, useCallback as f } from "react";
-import { Icons as v } from "./Icons.es.js";
-const T = ({
-  icon: r,
-  iconPosition: a = "left",
-  label: u,
-  className: F,
-  containerClassName: I,
-  id: x,
-  type: p = "text",
-  labelVariant: s = "default",
-  placeholder: d,
-  disabled: h = !1,
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { c as u } from "./cn-B6yFEsav.js";
+import { FastField as O, ErrorMessage as q } from "formik";
+import { memo as G, useState as I, useRef as H, useCallback as y, useLayoutEffect as J } from "react";
+import { Icons as N } from "./Icons.es.js";
+const Q = ({
+  icon: l,
+  iconPosition: r = "left",
+  label: d,
+  className: B,
+  containerClassName: $,
+  id: w,
+  type: j = "text",
+  labelVariant: n = "default",
+  placeholder: p,
+  disabled: b = !1,
   field: t,
-  form: N,
-  ...n
+  form: z,
+  ...a
 }) => {
-  const [i, g] = w(!1), [y, E] = w(!1), b = N.getFieldMeta(t.name), m = b.touched && b.error, j = t.value && t.value.toString().length > 0, c = p === "password", k = c ? y ? "text" : "password" : p, z = () => {
-    const l = () => r ? a === "left" ? "left-9" : "left-0" : "left-2";
-    return s === "static" ? `-top-5 ${l()} scale-90 px-1` : i || j ? `-top-2 ${l()} scale-90` : `top-1/2 -translate-y-1/2 ${l()} scale-100`;
-  }, C = () => s === "static" ? "text-sm" : "text-sm peer-focus:text-sm peer-placeholder-shown:text-base", B = () => s === "static" ? d || u : d || "", K = () => c ? r ? a === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : r ? a === "left" ? "pl-10" : "pr-10" : "", P = f(() => {
-    g(!0), n.onFocus?.();
-  }, [n]), M = f((l) => {
-    g(!1), n.onBlur?.(), t.onBlur(l);
-  }, [t, n]), S = f(() => {
-    E((l) => !l);
+  const [o, v] = I(!1), [C, K] = I(!1), c = H(null), F = z.getFieldMeta(t.name), k = F.touched && F.error, E = t.value && t.value.toString().length > 0, x = j === "password", M = x ? C ? "text" : "password" : j, P = () => n === "static" ? p || d : p || "", R = () => x ? l ? r === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : l ? r === "left" ? "pl-10" : "pr-10" : "", A = y(() => {
+    v(!0), a.onFocus?.();
+  }, [a]), D = y((i) => {
+    v(!1), a.onBlur?.(), t.onBlur(i);
+  }, [t, a]), T = y(() => {
+    K((i) => !i);
   }, []);
-  return /* @__PURE__ */ e.jsxs("div", { className: o("relative w-full bg-inherit", s === "static" && "mt-2", I), children: [
+  J(() => {
+    if (c.current) {
+      const V = ((L) => {
+        let s = L;
+        for (; s && s !== document.body; ) {
+          const f = window.getComputedStyle(s).backgroundColor;
+          if (f && f !== "transparent" && f !== "rgba(0, 0, 0, 0)")
+            return f;
+          s = s.parentElement;
+        }
+        const m = window.getComputedStyle(document.body).backgroundColor;
+        return m && m !== "transparent" && m !== "rgba(0, 0, 0, 0)" ? m : "rgb(255, 255, 255)";
+      })(c.current.parentElement);
+      c.current.style.backgroundColor = V;
+    }
+  }, []);
+  const h = {
+    default: {
+      input: `${o && "ring-primary-default-default ring-[1px] "} border-neutral-default-default hover:border-primary-default-default`,
+      label: `${o ? "text-primary-default-default" : "text-neutral-medium-default"}`,
+      icon: {},
+      placeholder: {}
+    },
+    disabled: {
+      input: "border-neutral-default-disabled",
+      label: "text-neutral-medium-disabled",
+      icon: "text-neutral-medium-disabled",
+      placeholder: {}
+    },
+    error: {
+      input: "border-error-default-default ",
+      label: "text-error-medium-default",
+      icon: {},
+      placeholder: {}
+    },
+    success: {
+      input: {},
+      label: {},
+      icon: {},
+      placeholder: {}
+    },
+    warning: {
+      input: {},
+      label: {},
+      icon: {},
+      placeholder: {}
+    }
+  }, U = {
+    none: {
+      label: "left-2 "
+    },
+    left: {
+      label: `left-9 ${(o || E || n === "static") && "left-2"} `
+    },
+    right: {
+      label: "left-2"
+    }
+  }, S = {
+    static: {
+      input: "placeholder:text-neutral-medium-default placeholder:opacity-50",
+      label: "-top-1 -translate-y-full scale-90 px-0 "
+    },
+    default: {
+      input: `${p && o ? "placeholder:text-neutral-medium-default placeholder:opacity-50" : "placeholder:text-transparent"}`,
+      label: `top-1/2 -translate-y-1/2 scale-100 peer-focus:text-sm peer-placeholder-shown:text-base ${(o || E) && "top-0 scale-90"}`
+    }
+  }, g = b ? "disabled" : k ? "error" : "default";
+  return /* @__PURE__ */ e.jsxs("div", { className: u("relative w-full bg-inherit", n === "static" && "mt-5", $), children: [
     /* @__PURE__ */ e.jsxs("div", { className: "relative bg-inherit", children: [
       /* @__PURE__ */ e.jsx(
         "input",
         {
-          disabled: h,
-          id: x || t.name,
-          type: k,
+          disabled: b,
+          id: w || t.name,
+          type: M,
           name: t.name,
           value: t.value || "",
-          placeholder: B(),
+          placeholder: P(),
           onChange: t.onChange,
-          onFocus: P,
-          onEmptied: n.onEmptied,
-          onKeyDown: n.onKeyDown,
-          onKeyUp: n.onKeyUp,
-          onBlur: M,
-          className: o(
-            "w-full px-3 h-12 text-left border-1 rounded-lg transition-all duration-200 ease-in-out text-neutral-default-default",
+          onFocus: A,
+          onEmptied: a.onEmptied,
+          onKeyDown: a.onKeyDown,
+          onKeyUp: a.onKeyUp,
+          onBlur: D,
+          className: u(
+            "w-full px-3 h-12 text-left border-[1px] rounded-lg transition-all duration-200 ease-in-out text-neutral-default-default",
             "bg-transparent focus:outline-none",
-            s === "default" && !d && "placeholder:text-transparent",
-            s === "default" && d && "placeholder:text-neutral-medium-default placeholder:opacity-50",
-            s === "static" && "placeholder:text-neutral-medium-default placeholder:opacity-50",
-            i ? "border-primary-default-default border-2 text-primary-default-default" : m ? "border-error-default-default" : "border-neutral-default-default hover:border-neutral-strong-default",
-            K(),
-            F
+            S[n].input,
+            h[g].input,
+            R(),
+            B
           )
         }
       ),
       /* @__PURE__ */ e.jsx(
         "label",
         {
-          htmlFor: x || t.name,
-          className: o(
+          ref: c,
+          htmlFor: w || a.name,
+          className: u(
             "absolute transition-all duration-200 font-bold text-sm ease-in-out pointer-events-none bg-inherit px-1 z-10",
-            C(),
-            z(),
-            j || i ? "text-primary-default-default" : m ? "text-red-500" : "text-neutral-medium-default"
+            "prometeo-fonts-label-large text-sm",
+            U[l ? r : "none"].label,
+            S[n].label,
+            h[g].label
           ),
-          children: u
+          children: d
         }
       ),
-      r && /* @__PURE__ */ e.jsx("div", { className: o(
+      l && /* @__PURE__ */ e.jsx("div", { className: u(
         "absolute top-1/2 -translate-y-1/2 text-neutral-medium-default",
-        a === "left" ? "left-3" : "right-3"
-      ), children: r }),
-      c && /* @__PURE__ */ e.jsx(
+        h[g].icon,
+        r === "left" ? "left-3" : "right-3"
+      ), children: l }),
+      x && /* @__PURE__ */ e.jsx(
         "button",
         {
           type: "button",
-          onClick: S,
-          className: o(
+          onClick: T,
+          className: u(
             "absolute top-1/2 -translate-y-1/2 p-1 text-neutral-medium-default hover:text-neutral-strong-default",
             "transition-colors duration-200 focus:outline-none focus:text-primary-default-default",
-            r && a === "right" ? "right-8" : "right-3"
+            l && r === "right" ? "right-8" : "right-3"
           ),
           tabIndex: -1,
-          disabled: h,
-          children: y ? /* @__PURE__ */ e.jsx(v.EyeVisibility, { size: 24, className: "text-neutral-default-default" }) : /* @__PURE__ */ e.jsx(v.EyeVisibilityOff, { size: 24, className: "text-neutral-default-default" })
+          disabled: b,
+          children: C ? /* @__PURE__ */ e.jsx(N.EyeVisibility, { size: 24, className: "text-neutral-default-default" }) : /* @__PURE__ */ e.jsx(N.EyeVisibilityOff, { size: 24, className: "text-neutral-default-default" })
         }
       )
     ] }),
-    m && /* @__PURE__ */ e.jsx(
-      D,
+    k && /* @__PURE__ */ e.jsx(
+      q,
       {
         name: t.name,
         component: "span",
@@ -99,7 +164,7 @@ const T = ({
       }
     )
   ] });
-}, U = L(T), G = (r) => /* @__PURE__ */ e.jsx($, { name: r.name, children: ({ field: a, form: u }) => /* @__PURE__ */ e.jsx(U, { ...r, field: a, form: u }) });
+}, W = G(Q), le = (l) => /* @__PURE__ */ e.jsx(O, { name: l.name, children: ({ field: r, form: d }) => /* @__PURE__ */ e.jsx(W, { ...l, field: r, form: d }) });
 export {
-  G as default
+  le as default
 };

package/dist/InputMultiple.es.js

@@ -1,4 +1,4 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
+import { j as r } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as E } from "./Icons.es.js";
 import { c as d } from "./cn-B6yFEsav.js";
 import M, { useRef as D, useState as p, useCallback as W, useEffect as X } from "react";

package/dist/{LayoutGeneric-p4Pll4Cm.js → LayoutGeneric-jDE96L2N.js}

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { useRef as a, createContext as i, useContext as u, memo as c } from "react";
 const o = i(null), l = ({ children: e }) => {
   const r = a(null), s = (n) => {

package/dist/LayoutGeneric.es.js

@@ -1,4 +1,4 @@
-import { L as f } from "./LayoutGeneric-p4Pll4Cm.js";
+import { L as f } from "./LayoutGeneric-jDE96L2N.js";
 export {
   f as default
 };

package/dist/Logo.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as t } from "./Icons.es.js";
 const s = () => /* @__PURE__ */ e.jsxs("div", { className: "container-logo flex items-center justify-center gap-1 bg-gradient-to-br from-[#312C85] to-[#1E1A4D] rounded-md min-w-[185px]", children: [
   /* @__PURE__ */ e.jsx(t.TicketFilled, { size: 28, className: "rotate-140 text-primary-medium-pressed icon-logo" }),

package/dist/Menu.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as r } from "./cn-B6yFEsav.js";
 import { AnimatePresence as n, motion as o } from "framer-motion";
 const s = ({ menuRef: t, children: a, className: i }) => /* @__PURE__ */ e.jsx("div", { ref: t, className: r("flex bg-neutral-default-default absolute bottom-10 left-24 border-1 border-neutral-strong-default h-auto w-60 rounded-md px-2", i), children: /* @__PURE__ */ e.jsx(n, { mode: "wait", children: /* @__PURE__ */ e.jsx(

package/dist/OtpInput.es.js

@@ -1,4 +1,4 @@
-import { j as p } from "./jsx-runtime-DKDX3adD.js";
+import { j as p } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as ve } from "./Icons.es.js";
 import { c as L } from "./cn-B6yFEsav.js";
 import * as n from "react";

package/dist/Pagination.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { motion as a } from "framer-motion";
 function h({
   currentPage: i = 1,

package/dist/ProfilePictureUpload.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { motion as n, AnimatePresence as L } from "framer-motion";
 import { useRef as B, useState as C } from "react";
 import b from "./Avatar.es.js";

package/dist/ProgressBar.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as x } from "./cn-B6yFEsav.js";
 import u from "react";
 const j = u.forwardRef(

package/dist/Select.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as w } from "./Icons.es.js";
 import { c as o } from "./cn-B6yFEsav.js";
 import { memo as se, useState as y, useRef as re, useEffect as oe } from "react";

package/dist/SelectFormik.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as v } from "./Icons.es.js";
 import { c as o } from "./cn-B6yFEsav.js";
 import { useField as P, ErrorMessage as M } from "formik";

package/dist/Spinner.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { ClipLoader as l, SyncLoader as m, HashLoader as p, GridLoader as x, DotLoader as j, BounceLoader as f } from "react-spinners";
 import { c as L } from "./cn-B6yFEsav.js";
 const y = ({

package/dist/Steps.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as j } from "./cn-B6yFEsav.js";
 import { motion as r } from "framer-motion";
 import N from "react";

package/dist/SwipeContainer.es.js

@@ -1,4 +1,4 @@
-import { j as o } from "./jsx-runtime-DKDX3adD.js";
+import { j as o } from "./jsx-runtime-ByW6EXIE.js";
 import { c as i } from "./cn-B6yFEsav.js";
 import { useState as d, useRef as D, useEffect as L } from "react";
 const O = ({

package/dist/Switch.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/Switch'
+export {}

package/dist/Switch.es.js

@@ -0,0 +1,94 @@
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { c as o } from "./cn-B6yFEsav.js";
+import { useRef as p } from "react";
+import { motion as u } from "framer-motion";
+const k = ({ name: l, value: r, onChange: c, disabled: t = !1 }) => {
+  const a = p(null), d = () => {
+    if (!a.current || t) return;
+    const m = !a.current.checked;
+    c(l, m);
+  }, i = {
+    on: {
+      default: {
+        container: "bg-primary-default-default",
+        dot: "bg-[var(--neutral-200)]"
+      },
+      disabled: {
+        container: "bg-neutral-weak-default",
+        dot: "bg-neutral-weak-focused"
+      }
+    },
+    off: {
+      default: {
+        container: "bg-neutral-weak-hover",
+        dot: "bg-neutral-medium-default"
+      },
+      disabled: {
+        container: "bg-neutral-medium-default",
+        dot: "bg-neutral-weak-default"
+      }
+    }
+  }, f = {
+    on: {
+      left: "unset",
+      right: -4
+    },
+    off: {
+      left: -4,
+      right: "unset"
+    }
+  }, h = {
+    on: {
+      width: 24,
+      height: 24
+    },
+    off: {
+      width: 16
+    }
+  }, n = r ? "on" : "off", s = t ? "disabled" : "default";
+  return /* @__PURE__ */ e.jsxs("div", { children: [
+    /* @__PURE__ */ e.jsx("input", { type: "checkbox", hidden: !0, ref: a, checked: r, disabled: t }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: o(
+          "w-14 h-8 rounded-full relative px-2",
+          i[n][s].container
+        ),
+        children: /* @__PURE__ */ e.jsx(
+          u.span,
+          {
+            onClick: d,
+            animate: f[n],
+            whileHover: t ? {} : {
+              background: n === "off" ? "rgba(29, 27, 32, 0.08)" : "rgba(101, 85, 143, 0.12)"
+            },
+            className: o(
+              "absolute top-1/2 -translate-y-1/2 grid place-items-center ",
+              "size-10 aspect-square rounded-full absolute top-1/2 -translate-y-1/2",
+              "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ e.jsx(
+              u.span,
+              {
+                animate: h[n],
+                whileTap: t ? {} : {
+                  width: 28,
+                  height: 28
+                },
+                className: o(
+                  "size-4 aspect-square rounded-full z-10",
+                  i[n][s].dot
+                )
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx("p", { children: r ? "on" : "off" })
+  ] });
+};
+export {
+  k as Switch
+};

package/dist/TabLinks.es.js

@@ -1,4 +1,4 @@
-import { j as a } from "./jsx-runtime-DKDX3adD.js";
+import { j as a } from "./jsx-runtime-ByW6EXIE.js";
 import { motion as x } from "framer-motion";
 import { memo as b } from "react";
 import { c as r } from "./cn-B6yFEsav.js";

package/dist/Table.es.js

@@ -1,4 +1,4 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
+import { j as r } from "./jsx-runtime-ByW6EXIE.js";
 import { c as l } from "./cn-B6yFEsav.js";
 import * as o from "react";
 const n = o.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ r.jsx("div", { className: "w-full", children: /* @__PURE__ */ r.jsx(

package/dist/TextArea.es.js

@@ -1,4 +1,4 @@
-import { j as y } from "./jsx-runtime-DKDX3adD.js";
+import { j as y } from "./jsx-runtime-ByW6EXIE.js";
 import { c as C } from "./cn-B6yFEsav.js";
 import * as s from "react";
 function M({

package/dist/Tooltip.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { AnimatePresence as f, motion as n } from "framer-motion";
 import { useState as p, cloneElement as x } from "react";
 import { Icons as b } from "./Icons.es.js";

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,8 @@
+export interface SwitchProps {
+    name: string;
+    value: boolean;
+    onChange: (name: string, value: boolean) => void;
+    disabled?: boolean;
+}
+declare const Switch: ({ name, value, onChange, disabled }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default Switch;

package/dist/exports/Switch.d.ts

@@ -0,0 +1 @@
+export { default as Switch } from '../components/Switch/Switch';

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as ChangueAccount } from './components/Sidebar/components/chang
 export { default as Spinner } from './components/Spinner/Spinner';
 export { default as Steps } from './components/Steps/Steps';
 export { default as SwipeContainer } from './components/SwipeContainer/SwipeContainer';
+export { default as Switch } from './components/Switch/Switch';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/Table/Table';
 export { default as TabLinks } from './components/TabLinks/TabLinks';
 export { default as TextArea } from './components/TextArea/TextArea';
@@ -73,4 +74,5 @@ export type { LayoutGenericProps } from './components/Layout/LayoutGeneric';
 export type { CountdownProgressProps } from './components/ProgressBar/ProgressBar';
 export type { IToolTipProps } from './components/Tooltip/Tootip';
 export type { InputMultipleProps } from './components/InputMultiple/InputMultiple';
+export type { SwitchProps } from './components/Switch/Switch';
 export { Icons } from './Icons/Icons';