prometeo-design-system 1.6.0 → 1.6.1

package/dist/SelectFormik.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/SelectFormik'
+export {}
+import PrometeoDesignSystem from './exports/SelectFormik'
+export default PrometeoDesignSystem
+export * from './exports/SelectFormik'
+export {}

package/dist/SelectFormik.es.js

@@ -0,0 +1,160 @@
+import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { Icons as v } from "./Icons.es.js";
+import { c as u } from "./cn-B6yFEsav.js";
+import { useField as I, ErrorMessage as P } from "formik";
+import { useState as w, useRef as M, useEffect as R } from "react";
+const J = ({
+  label: N,
+  name: A,
+  placeholder: b = "",
+  disabled: c,
+  containerClassName: k,
+  className: C,
+  options: o = [],
+  multiple: n = !1,
+  emptyMessage: D = "No hay opciones disponibles",
+  labelVariant: g = "default"
+}) => {
+  const [a, y, i] = I(A), [l, f] = w(!1), [m, j] = w(!1), x = M(null), p = y.touched && y.error, d = a.value && (Array.isArray(a.value) ? a.value.length > 0 : a.value.toString().length > 0), O = () => g === "static" || d || l || m ? "-top-3 left-2 scale-90" : "top-1/2 -translate-y-1/2 scale-100", V = () => a.value ? Array.isArray(a.value) ? o.filter((e) => a.value.includes(e.id)) : o.filter((e) => e.id === a.value) : [], E = (e) => {
+    if (n) {
+      const r = Array.isArray(a.value) ? a.value : [], s = r.includes(e.id) ? r.filter((h) => h !== e.id) : [...r, e.id];
+      i.setValue(s);
+    } else
+      i.setValue(e.id), f(!1);
+  }, S = (e) => {
+    e.stopPropagation(), i.setValue(n ? [] : "");
+  }, z = (e, r) => {
+    if (r?.stopPropagation(), n && Array.isArray(a.value)) {
+      const s = a.value.filter((h) => h !== e);
+      i.setValue(s);
+    }
+  };
+  R(() => {
+    const e = (r) => {
+      x.current && !x.current.contains(r.target) && f(!1);
+    };
+    return l && document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [l]);
+  const F = () => {
+    const e = V();
+    return e.length === 0 ? b ? /* @__PURE__ */ t.jsx("span", { className: "text-neutral-medium-default opacity-50", children: b }) : null : n ? /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-1 flex-wrap py-1", children: e.map((r) => /* @__PURE__ */ t.jsxs("div", { className: "inline-flex items-center gap-1 px-2 py-1 bg-primary-default-default text-white text-xs rounded-md", children: [
+      /* @__PURE__ */ t.jsx("span", { className: "truncate max-w-20", children: r.label }),
+      /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          onMouseDown: (s) => {
+            s.preventDefault(), z(r.id, s);
+          },
+          className: "flex-shrink-0 hover:bg-primary-strong-default rounded-sm p-0.5 transition-colors",
+          type: "button",
+          tabIndex: -1,
+          children: /* @__PURE__ */ t.jsx(v.Close, { size: 12, className: "" })
+        }
+      )
+    ] }, r.id)) }) : /* @__PURE__ */ t.jsx("span", { children: e[0]?.label });
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: u("relative w-full bg-inherit", k), ref: x, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "relative bg-inherit", children: [
+      /* @__PURE__ */ t.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: c,
+          onClick: () => !c && f(!l),
+          onFocus: () => j(!0),
+          onBlur: () => j(!1),
+          className: u(
+            "w-full px-3 h-12 text-left border-1 rounded-lg transition-all duration-200 ease-in-out text-neutral-default-default",
+            "flex items-center justify-between bg-transparent focus:outline-none",
+            d || l || m ? "border-primary-default-default border-2" : p ? "border-error-default-default" : "border-neutral-default-default hover:border-neutral-strong-default",
+            c && "opacity-50 cursor-not-allowed",
+            C
+          ),
+          children: [
+            /* @__PURE__ */ t.jsx(
+              "label",
+              {
+                className: u(
+                  "absolute pointer-events-none bg-inherit px-1 z-10",
+                  g === "default" && "transition-all duration-200 ease-in-out",
+                  "text-md",
+                  O(),
+                  d || l || m ? "text-primary-default-default" : p ? "text-red-500" : "text-neutral-medium-default",
+                  "left-3"
+                ),
+                children: N
+              }
+            ),
+            /* @__PURE__ */ t.jsx("div", { className: "flex-1 min-w-0", children: F() }),
+            /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 ml-2", children: [
+              d && /* @__PURE__ */ t.jsx(
+                "button",
+                {
+                  onMouseDown: (e) => {
+                    e.preventDefault(), e.stopPropagation(), S(e);
+                  },
+                  className: "text-neutral-medium-default hover:text-neutral-default-default transition-colors",
+                  type: "button",
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ t.jsx(v.Close, { size: 16, className: "" })
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                v.ChevronDown,
+                {
+                  size: 20,
+                  className: u(
+                    "transition-transform text-neutral-default-default",
+                    l ? "rotate-180" : ""
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      l && /* @__PURE__ */ t.jsx("div", { className: "absolute z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-md shadow-lg max-h-60 overflow-auto", children: o.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: D }) : o.map((e) => {
+        const r = n ? Array.isArray(a.value) && a.value.includes(e.id) : a.value === e.id;
+        return /* @__PURE__ */ t.jsxs(
+          "div",
+          {
+            onMouseDown: (s) => {
+              s.preventDefault(), E(e), s.stopPropagation();
+            },
+            className: u(
+              "px-3 py-2 cursor-pointer flex items-center transition-colors",
+              r ? "bg-primary-default-default text-white" : "hover:bg-neutral-medium-selected text-neutral-default-default"
+            ),
+            children: [
+              n && /* @__PURE__ */ t.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: r,
+                  onChange: () => {
+                  },
+                  className: "mr-2 pointer-events-none"
+                }
+              ),
+              /* @__PURE__ */ t.jsx("span", { children: e.label })
+            ]
+          },
+          e.id
+        );
+      }) })
+    ] }),
+    p && /* @__PURE__ */ t.jsx(
+      P,
+      {
+        name: a.name,
+        component: "span",
+        className: "block text-error-default-default text-xs mt-1"
+      }
+    )
+  ] });
+};
+export {
+  J as default
+};

package/dist/components/SelectFormik/SelectFormik.d.ts

@@ -0,0 +1,18 @@
+export interface ISelectFormikOption {
+    id: number | string;
+    label: string;
+}
+export interface ISelectFormik {
+    label: string;
+    name: string;
+    placeholder?: string;
+    disabled: boolean;
+    containerClassName: string;
+    className: string;
+    labelVariant?: 'default' | 'static';
+    options: ISelectFormikOption[];
+    multiple?: boolean;
+    emptyMessage?: string;
+}
+declare const SelectFormik: ({ label, name, placeholder, disabled, containerClassName, className, options, multiple, emptyMessage, labelVariant, }: ISelectFormik) => import("react/jsx-runtime").JSX.Element;
+export default SelectFormik;

package/dist/exports/SelectFormik.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/SelectFormik/SelectFormik';
+export type { ISelectFormik, ISelectFormikOption, } from '../components/SelectFormik/SelectFormik';

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { Menu } from './components/Menu/MenuComposable';
 export { default as Pagination } from './components/Pagination/Pagination';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
 export { default as Select } from './components/Select/Select';
+export { default as SelectFormik } from './components/SelectFormik/SelectFormik';
 export { default as ChangueAccount } from './components/Sidebar/components/changue-account';
 export { default as Spinner } from './components/Spinner/Spinner';
 export { default as SwipeContainer } from './components/SwipeContainer/SwipeContainer';
@@ -56,6 +57,7 @@ export type { SidebarContextValue } from './components/Sidebar/hooks/useSidebarH
 export type { SpinnerProps, SpinnerSize, SpinnerVariant, } from './components/Spinner/Spinner';
 export type { PaginationProps } from './components/Pagination/Pagination';
 export type { SelectOptionRendererProps, SelectProps, SelectionDisplayProps, } from './components/Select/Select';
+export type { ISelectFormik, ISelectFormikOption, } from './components/SelectFormik/SelectFormik';
 export type { DialogHandle } from './components/Dialog/Dialog';
 export { DropZone } from './components/DropZone/DropZone';
 export type { ToasterPrometeo } from './components/Toaster/Toaster';

package/dist/prometeo-design-system.es.js

@@ -6,7 +6,7 @@ import { default as Be } from "./CheckboxFormik.es.js";
 import { default as Re, useDialogControl as qe } from "./DialogModal.es.js";
 import { default as Ae, useDrawerDesktop as Te } from "./DrawerDesktop.es.js";
 import { default as Ee, useDrawerMobile as Oe } from "./DrawerMobile.es.js";
-import { default as He } from "./Header.es.js";
+import { default as Fe } from "./Header.es.js";
 import { default as We } from "./Input.es.js";
 import { default as Me } from "./InputFormik.es.js";
 import { default as Ve } from "./Logo.es.js";
@@ -14,14 +14,15 @@ import { Menu as Xe } from "./Menu.es.js";
 import { default as Je } from "./Pagination.es.js";
 import { default as Qe } from "./ProgressBar.es.js";
 import { default as _e } from "./Select.es.js";
-import { default as tt } from "./Spinner.es.js";
-import { default as rt } from "./SwipeContainer.es.js";
-import { default as nt } from "./TabLinks.es.js";
-import { Table as st, TableBody as lt, TableCaption as ct, TableCell as ut, TableFooter as dt, TableHead as ft, TableHeader as pt, TableRow as mt } from "./Table.es.js";
-import { default as bt } from "./TextArea.es.js";
-import { default as gt } from "./Tooltip.es.js";
+import { default as tt } from "./SelectFormik.es.js";
+import { default as rt } from "./Spinner.es.js";
+import { default as nt } from "./SwipeContainer.es.js";
+import { default as st } from "./TabLinks.es.js";
+import { Table as ct, TableBody as ut, TableCaption as dt, TableCell as ft, TableFooter as pt, TableHead as mt, TableHeader as xt, TableRow as bt } from "./Table.es.js";
+import { default as gt } from "./TextArea.es.js";
+import { default as ht } from "./Tooltip.es.js";
 import { u as j } from "./LayoutGeneric-jDE96L2N.js";
-import { L as ht, S as wt } from "./LayoutGeneric-jDE96L2N.js";
+import { L as jt, S as Nt } from "./LayoutGeneric-jDE96L2N.js";
 import { j as a } from "./jsx-runtime-ByW6EXIE.js";
 import { c as s } from "./cn-B6yFEsav.js";
 import { useRef as p, useState as v, useLayoutEffect as q, createContext as P, useContext as A, forwardRef as N, useCallback as T, useEffect as C } from "react";
@@ -29,8 +30,8 @@ import { useGSAP as S } from "@gsap/react";
 import c from "gsap";
 import { Icons as b } from "./Icons.es.js";
 import { motion as d, AnimatePresence as k } from "framer-motion";
-import { default as Nt } from "./OtpInput.es.js";
-import { DropZone as St } from "./DropZone.es.js";
+import { default as St } from "./OtpInput.es.js";
+import { DropZone as It } from "./DropZone.es.js";
 const D = (t, e) => {
   S(
     () => {
@@ -131,12 +132,12 @@ const D = (t, e) => {
       }
     )
   ] }) });
-}, E = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("h-16 ", e), children: t }), O = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("flex-1 overflow-y-auto p-4", e), children: t }), z = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("p-4 border-t border-neutral-strong-default", e), children: t }), H = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: s("flex-1", t) }), ie = Object.assign(w, {
+}, E = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("h-16 ", e), children: t }), O = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("flex-1 overflow-y-auto p-4", e), children: t }), z = ({ children: t, className: e }) => /* @__PURE__ */ a.jsx("div", { className: s("p-4 border-t border-neutral-strong-default", e), children: t }), F = ({ className: t }) => /* @__PURE__ */ a.jsx("div", { className: s("flex-1", t) }), ie = Object.assign(w, {
   Root: w,
   Header: E,
   Content: O,
   Footer: z,
-  Spacer: H
+  Spacer: F
 }), I = P(
   void 0
 ), se = () => {
@@ -144,7 +145,7 @@ const D = (t, e) => {
   if (!t)
     throw new Error("useSidebar must be used within a Sidebar.Root");
   return t;
-}, F = ({
+}, H = ({
   children: t
 }) => {
   const [e, o] = v(!1), [r, n] = v(!1), i = p(null), l = () => {
@@ -508,7 +509,7 @@ const D = (t, e) => {
     );
   }
 ), h = N(
-  (t, e) => /* @__PURE__ */ a.jsx(F, { children: /* @__PURE__ */ a.jsx(V, { ...t, ref: e }) })
+  (t, e) => /* @__PURE__ */ a.jsx(H, { children: /* @__PURE__ */ a.jsx(V, { ...t, ref: e }) })
 );
 h.displayName = "SidebarRoot";
 const G = ({ isCollapsed: t, onToggleCollapse: e }) => /* @__PURE__ */ a.jsx("div", { className: s("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", t && ""), children: /* @__PURE__ */ a.jsx(
@@ -840,39 +841,40 @@ export {
   Re as DialogModal,
   Ae as DrawerDesktop,
   Ee as DrawerMobile,
-  St as DropZone,
-  He as Header,
+  It as DropZone,
+  Fe as Header,
   b as Icons,
   We as Input,
   Me as InputFormik,
-  ht as LayoutGeneric,
+  jt as LayoutGeneric,
   Ve as Logo,
   Xe as Menu,
   ue as NavBarActions,
   me as NavbarCollapseButton,
   de as NavbarLinks,
   ce as NavigationLink,
-  Nt as OtpInput,
+  St as OtpInput,
   Je as Pagination,
   Qe as ProgressBar,
   ie as SecondaryBar,
   _e as Select,
+  tt as SelectFormik,
   le as Sidebar,
-  F as SidebarProvider,
-  wt as SidebarRefProvider,
-  tt as Spinner,
-  rt as SwipeContainer,
-  nt as TabLinks,
-  st as Table,
-  lt as TableBody,
-  ct as TableCaption,
-  ut as TableCell,
-  dt as TableFooter,
-  ft as TableHead,
-  pt as TableHeader,
-  mt as TableRow,
-  bt as TextArea,
-  gt as Tooltip,
+  H as SidebarProvider,
+  Nt as SidebarRefProvider,
+  rt as Spinner,
+  nt as SwipeContainer,
+  st as TabLinks,
+  ct as Table,
+  ut as TableBody,
+  dt as TableCaption,
+  ft as TableCell,
+  pt as TableFooter,
+  mt as TableHead,
+  xt as TableHeader,
+  bt as TableRow,
+  gt as TextArea,
+  ht as Tooltip,
   fe as useActionsNavbar,
   be as useClickOutside,
   qe as useDialogControl,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -81,6 +81,10 @@
       "types": "./dist/Select.d.ts",
       "import": "./dist/Select.es.js"
     },
+    "./SelectFormik": {
+      "types": "./dist/SelectFormik.d.ts",
+      "import": "./dist/SelectFormik.es.js"
+    },
     "./Spinner": {
       "types": "./dist/Spinner.d.ts",
       "import": "./dist/Spinner.es.js"