prometeo-design-system 2.0.2 → 2.1.0

package/dist/DrawerDesktop.es.js

@@ -1,67 +1,142 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
-import { c as d } from "./index-BOQuZ0gG.js";
-import { forwardRef as j, useState as D, useRef as x, useCallback as s, useImperativeHandle as b } from "react";
-import { Drawer as o } from "vaul";
-import { Icons as v } from "./Icons.es.js";
-import { c as m } from "./cn-B6yFEsav.js";
-const C = d("text-sm cursor-pointer font-medium shadow-sm transition-all absolute z-30", {
-  variants: {
-    direction: {
-      left: "right-4 top-4",
-      right: "left-4 top-4"
-    }
-  }
-}), O = d("right-0 top-0 bottom-0 fixed z-50 outline-none w-full md:w-[450px] lg:w-[550px] xl:w-[600px] h-full flex flex-col", {
-  variants: {
-    direction: {
-      left: "left-0",
-      right: "right-0"
-    }
-  }
-}), N = j(({ children: t, direction: r, modal: a = !1, className: c, onClose: i, defaultOpen: w = !1 }, h) => {
-  const [l, n] = D(w), f = x(i);
-  f.current = i;
-  const u = s(() => {
+import { j as s } from "./jsx-runtime-ByW6EXIE.js";
+import { c as b } from "./cn-B6yFEsav.js";
+import { c as y, B as h } from "./Button-Bc0LYLfg.js";
+import { createPortal as g } from "react-dom";
+import { Icons as C } from "./Icons.es.js";
+import { forwardRef as k, useState as j, useRef as x, useEffect as v, useCallback as l, useImperativeHandle as D } from "react";
+const O = k((e, a) => {
+  const [t, n] = j(e.defaultOpen || !1), o = x(e.onClose), {
+    modal: c = !1,
+    children: d,
+    className: u,
+    direction: f = "left",
+    attachToParent: i = !1,
+    closeOnOverlayClick: p = !1
+  } = e;
+  v(() => {
+    o.current = e.onClose;
+  }, [e.onClose]);
+  const r = l(() => {
     n(!0);
-  }, []), p = s(() => {
-    n(!1);
-  }, []), g = s(() => {
-    n(!1), f.current?.();
+  }, []), m = l(() => {
+    n(!1), o.current?.();
   }, []);
-  return b(h, () => ({
-    open: u,
-    close: p,
-    isOpen: l
-  }), [u, p, l]), /* @__PURE__ */ e.jsx(o.Root, { direction: r, open: l, onOpenChange: g, modal: a, children: /* @__PURE__ */ e.jsxs(o.Portal, { children: [
-    /* @__PURE__ */ e.jsx(o.Overlay, { className: "fixed inset-0 bg-black/60 z-50" }),
-    /* @__PURE__ */ e.jsxs(
-      o.Content,
+  D(a, () => ({
+    open: r,
+    close: m,
+    isOpen: t
+  }), [t, r, m]);
+  const w = /* @__PURE__ */ s.jsx(
+    z,
+    {
+      isOpen: t,
+      close: m,
+      direction: f,
+      modal: c,
+      className: u,
+      attachToParent: i,
+      closeOnOverlayClick: p,
+      children: d
+    }
+  );
+  return i ? w : g(w, document.body);
+});
+O.displayName = "DrawerDesktopV2";
+const z = ({ children: e, direction: a = "left", isOpen: t, close: n, modal: o = !1, className: c, attachToParent: d = !1, closeOnOverlayClick: u = !1 }) => {
+  v(() => {
+    if (t && o) {
+      const r = window.scrollY;
+      return document.body.style.position = "fixed", document.body.style.top = `-${r}px`, document.body.style.width = "100%", () => {
+        document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, r);
+      };
+    }
+  }, [t, o]);
+  const f = y("border-neutral-strong-default", {
+    variants: {
+      isOpen: {
+        true: "desktop-drawer-visible",
+        false: "desktop-drawer-hidden"
+      },
+      direction: {
+        left: "left-0 border-r-[1px] border-l-0",
+        right: "right-0 border-l-[1px] border-r-0"
+      }
+    }
+  }), i = y("fixed inset-0 bg-black/60 z-[55] cursor-default", {
+    variants: {
+      isOpen: {
+        true: "drawer-overlay-visible",
+        false: "drawer-overlay-hidden"
+      }
+    }
+  }), p = y("", {
+    variants: {
+      direction: {
+        left: "right-0",
+        right: "left-0"
+      }
+    }
+  });
+  return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+    o && /* @__PURE__ */ s.jsx(
+      "div",
       {
-        className: m(O({ direction: r }), c),
-        style: { "--initial-transform": "calc(100% + 8px)" },
+        className: b(i({ isOpen: t })),
+        onClick: (r) => {
+          r.preventDefault(), r.stopPropagation(), u && n();
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ s.jsxs(
+      "div",
+      {
+        className: b(
+          "bg-neutral-strong-default p-4 pt-10 h-full top-0 z-[60] w-max overflow-y-auto",
+          d ? "absolute" : "fixed",
+          f({ isOpen: t, direction: a }),
+          c
+        ),
+        role: "dialog",
+        "aria-modal": o,
         children: [
-          /* @__PURE__ */ e.jsx(o.Close, { className: m(C({ direction: r })), children: /* @__PURE__ */ e.jsx(v.Close, { size: 24, className: "text-neutral-default-default" }) }),
-          /* @__PURE__ */ e.jsx("div", { className: "bg-neutral-default-default w-full flex-1 overflow-y-auto min-h-0 border-l border-neutral-strong-default", children: t })
+          /* @__PURE__ */ s.jsx(
+            h,
+            {
+              icon: /* @__PURE__ */ s.jsx(C.Close, { size: 24 }),
+              animate: !1,
+              type: "button",
+              size: "small",
+              variant: "text",
+              onClick: n,
+              label: "",
+              color: "secondary",
+              className: b(
+                "absolute top-0 z-50",
+                p({ direction: a })
+              ),
+              "aria-label": "Close drawer"
+            }
+          ),
+          e
         ]
       }
     )
-  ] }) });
-});
-N.displayName = "DrawerDesktop";
-const E = () => {
-  const t = x(null), r = s(() => {
-    t.current?.open();
-  }, []), a = s(() => {
-    t.current?.close();
+  ] });
+}, E = () => {
+  const e = x(null), a = l(() => {
+    e.current?.open();
+  }, []), t = l(() => {
+    e.current?.close();
   }, []);
   return {
-    isOpen: s(() => t.current?.isOpen ?? !1, []),
-    open: r,
-    close: a,
-    drawerRef: t
+    isOpen: l(() => e.current?.isOpen ?? !1, []),
+    open: a,
+    close: t,
+    drawerRef: e
   };
 };
 export {
-  N as default,
+  O as default,
   E as useDrawerDesktop
 };

package/dist/Input.es.js

@@ -1,10 +1,10 @@
 import { j as t } from "./jsx-runtime-ByW6EXIE.js";
 import { Icons as J } from "./Icons.es.js";
 import { c as e } from "./cn-B6yFEsav.js";
-import { memo as ie, useState as v, useRef as K, useCallback as pe, useEffect as L, useLayoutEffect as xe } from "react";
-import { useDebounce as me } from "use-debounce";
-import ge from "./Spinner.es.js";
-const C = {
+import { memo as xe, useState as H, useRef as K, useCallback as me, useEffect as L, useLayoutEffect as ge } from "react";
+import { useDebounce as be } from "use-debounce";
+import he from "./Spinner.es.js";
+const j = {
   default: {
     container: "",
     input: e(
@@ -53,24 +53,24 @@ const C = {
       "peer-focus:text-success-light"
     )
   }
-}, he = ({
+}, we = ({
   label: S,
   icon: a,
   iconPosition: g = "left",
-  onChange: E,
+  onChange: P,
   value: u = "",
   debounceMs: c = 0,
-  name: k,
-  width: h = "100%",
+  name: E,
+  width: b = "100%",
   height: o,
   variant: f = "default",
   labelVariant: l = "default",
   size: Q = "medium",
-  disabled: z = !1,
+  disabled: k = !1,
   type: r = "text",
   isFetching: d,
-  errorComponent: P,
-  helperComponent: R,
+  errorComponent: R,
+  helperComponent: v,
   placeholder: U,
   required: D = !1,
   onFocus: W,
@@ -79,9 +79,11 @@ const C = {
   onKeyDown: Y,
   onKeyUp: Z,
   className: _,
-  isActive: i
+  isActive: i,
+  style: q,
+  readOnly: A = !1
 }) => {
-  const [b, F] = v(u), [I] = me(b, c), [q, O] = v(i || !1), [B, A] = v(!1), w = K(null), $ = K(null);
+  const [h, F] = H(u), [z] = be(h, c), [M, O] = H(i || !1), [I, ee] = H(!1), w = K(null), $ = K(null);
   let p = Q;
   o && (p = "customHeight");
   const x = {
@@ -109,34 +111,34 @@ const C = {
       label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
       icon: "w-6 h-6 right-3"
     }
-  }, T = pe(E, [E]);
+  }, T = me(P, []);
   L(() => {
-    c > 0 && I !== u && T(I);
-  }, [I, c, T, u]), L(() => {
+    c > 0 && z !== u && T(z);
+  }, [z, c, T, u]), L(() => {
     F(u);
   }, [u]), L(() => {
     i && $.current?.focus();
   }, [i]);
-  const M = (s) => {
+  const te = (s) => {
     O(!0), W?.(s);
-  }, ee = (s) => {
+  }, re = (s) => {
     i === void 0 && (O(!1), X?.(s));
-  }, te = (s) => {
-    const m = s.target.value, H = s.target.name, n = b;
-    F(m), n.length > 0 && m.length === 0 && V?.(), (!c || c === 0) && E(m, H);
-  }, re = () => {
-    A(!B);
-  }, N = {};
-  h && h !== "100%" && (N.width = h), o && (N.height = o);
-  const se = b.length > 0, G = f === "error" && P, oe = !G && R, le = r === "password", ne = () => l === "static" || i || q || se ? "-top-2 left-2 scale-90" : a ? `top-1/2 -translate-y-1/2 ${g === "left" ? "ml-6" : "mr-6"} scale-100 ` : "top-1/2 -translate-y-1/2 scale-100", ae = () => l === "static" ? o ? "text-sm" : "text-xs" : o ? x.customHeight.label : x[p].label, ue = () => o ? { height: o } : {}, ce = () => l === "default" ? S : U || S || "", fe = () => le ? a ? g === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : a ? g === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", de = l === "default" && "transition-all duration-200 ease-in-out";
-  return xe(() => {
+  }, se = (s) => {
+    const m = s.target.value, N = s.target.name, n = h;
+    F(m), n.length > 0 && m.length === 0 && V?.(), (!c || c === 0) && P(m, N);
+  }, oe = () => {
+    ee(!I);
+  }, B = {};
+  b && b !== "100%" && (B.width = b), o && (B.height = o);
+  const le = h.length > 0, G = f === "error" && R, ne = !G && v, ae = r === "password", ue = () => l === "static" || i || M || le ? "-top-2 left-2 scale-90" : a ? `top-1/2 -translate-y-1/2 ${g === "left" ? "ml-6" : "mr-6"} scale-100 ` : "top-1/2 -translate-y-1/2 scale-100", ce = () => l === "static" ? o ? "text-sm" : "text-xs" : o ? x.customHeight.label : x[p].label, fe = () => o ? { height: o } : {}, de = () => l === "default" ? S : U || S || "", ie = () => ae ? a ? g === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : a ? g === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", pe = l === "default" && "transition-all duration-200 ease-in-out";
+  return ge(() => {
     if (w.current) {
-      const m = ((H) => {
-        let n = H;
+      const m = ((N) => {
+        let n = N;
         for (; n && n !== document.body; ) {
-          const j = window.getComputedStyle(n).backgroundColor;
-          if (j && j !== "transparent" && j !== "rgba(0, 0, 0, 0)")
-            return j;
+          const C = window.getComputedStyle(n).backgroundColor;
+          if (C && C !== "transparent" && C !== "rgba(0, 0, 0, 0)")
+            return C;
           n = n.parentElement;
         }
         const y = window.getComputedStyle(document.body).backgroundColor;
@@ -151,84 +153,86 @@ const C = {
         className: e(
           "relative",
           x[p].container,
-          !h && "w-full",
+          !b && "w-full",
           "bg-inherit",
           l === "static" && "mt-2",
           _
         ),
-        style: N,
+        style: { ...q, ...B },
         children: [
           /* @__PURE__ */ t.jsx(
             "input",
             {
-              id: k,
-              name: k,
+              id: E,
+              name: E,
               ref: $,
-              value: b,
-              placeholder: ce(),
-              type: r === "password" && B ? "text" : r,
+              value: h,
+              placeholder: de(),
+              type: r === "password" && I ? "text" : r,
               className: e(
                 "peer w-full border-1 rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
                 "focus:outline-none px-3",
                 l === "default" && "placeholder:text-transparent",
                 l === "static" && "placeholder:text-neutral-medium-default placeholder:opacity-50",
                 x[p].input,
-                C[f].input,
+                j[f].input,
                 a && "pr-10",
-                z && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
-                C[f].container,
-                fe()
+                k && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                j[f].container,
+                ie()
               ),
-              style: ue(),
-              onChange: te,
-              onFocus: M,
-              onBlur: ee,
-              disabled: z,
+              style: fe(),
+              onChange: se,
+              onFocus: te,
+              onBlur: re,
+              disabled: k,
               required: D,
               onEmptied: V,
               onKeyDown: Y,
-              onKeyUp: Z
+              onKeyUp: Z,
+              readOnly: A
             }
           ),
           /* @__PURE__ */ t.jsx(
             "label",
             {
               ref: w,
-              htmlFor: k,
+              htmlFor: E,
               className: e(
                 "absolute left-3 pointer-events-none px-1 z-10",
-                de,
-                ae(),
-                C[f].label,
-                ne(),
+                pe,
+                ce(),
+                j[f].label,
+                ue(),
                 D && "after:content-['*'] after:text-error-default after:ml-1",
-                z && "text-neutral-medium-disabled prometeo-fonts-label-large"
+                k && "text-neutral-medium-disabled prometeo-fonts-label-large"
               ),
               children: S
             }
           ),
           (a || r === "password" || d) && /* @__PURE__ */ t.jsx(
-            "div",
+            "button",
             {
+              type: "button",
               className: e(
                 "absolute top-1/2 -translate-y-1/2 flex items-center justify-center z-10",
                 x[p].icon,
-                C[f].icon,
+                j[f].icon,
                 r === "password" && !d ? "cursor-pointer" : "pointer-events-none",
                 g === "right" ? "right-3" : "left-3"
               ),
-              onClick: r === "password" && !d ? re : void 0,
+              onClick: r === "password" && !d ? oe : void 0,
               onMouseDown: (s) => r === "password" && !d && s.preventDefault(),
-              children: /* @__PURE__ */ t.jsx("div", { children: d && r !== "password" ? /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(ge, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }) : r === "password" ? B ? /* @__PURE__ */ t.jsx(J.EyeVisibility, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(J.EyeVisibilityOff, { size: 24, className: "" }) : a })
+              children: /* @__PURE__ */ t.jsx("div", { children: d && r !== "password" ? /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(he, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }) : r === "password" ? I ? /* @__PURE__ */ t.jsx(J.EyeVisibility, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(J.EyeVisibilityOff, { size: 24, className: "" }) : a })
             }
           )
         ]
       }
     ),
-    oe && R,
-    G && P
+    ne && v,
+    G && R
   ] });
-}, ke = ie(he);
+}, Ie = xe(we);
 export {
-  ke as default
+  Ie as default
 };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -25,21 +25,21 @@ interface DatePickerBaseProps {
 }
 interface DatePickerSingleProps extends DatePickerBaseProps {
     mode?: "single";
-    selected?: Date;
-    onSelect?: (date: Date | undefined) => void;
+    selected: Date | undefined;
+    onSelect: (date: Date) => void;
 }
 interface DatePickerRangeProps extends DatePickerBaseProps {
     mode: "range";
-    selected?: DateRange;
-    onSelect?: (range: DateRange | undefined) => void;
+    selected: DateRange | undefined;
+    onSelect: (range: DateRange) => void;
     min?: number;
     max?: number;
     excludeDisabled?: boolean;
 }
 interface DatePickerMultipleProps extends DatePickerBaseProps {
     mode: "multiple";
-    selected?: Date[];
-    onSelect?: (dates: Date[] | undefined) => void;
+    selected: Date[] | undefined;
+    onSelect: (dates: Date[]) => void;
     min?: number;
     max?: number;
 }

package/dist/components/Drawer/DrawerDesktop.d.ts

@@ -4,12 +4,14 @@ export interface DrawerDesktopHandle {
     isOpen: boolean;
 }
 export interface DrawerDesktopProps {
-    children: React.ReactNode;
-    direction: 'left' | 'right';
+    children?: React.ReactNode;
+    direction?: 'left' | 'right';
     modal?: boolean;
     className?: string;
     onClose?: () => void;
     defaultOpen?: boolean;
+    attachToParent?: boolean;
+    closeOnOverlayClick?: boolean;
 }
-declare const DrawerDesktop: import('react').ForwardRefExoticComponent<DrawerDesktopProps & import('react').RefAttributes<DrawerDesktopHandle>>;
-export default DrawerDesktop;
+declare const DrawerDesktopV2: import('react').ForwardRefExoticComponent<DrawerDesktopProps & import('react').RefAttributes<DrawerDesktopHandle>>;
+export default DrawerDesktopV2;

package/dist/components/Drawer/DrawerDesktop_old.d.ts

@@ -0,0 +1,15 @@
+export interface DrawerDesktopHandle {
+    open: () => void;
+    close: () => void;
+    isOpen: boolean;
+}
+export interface DrawerDesktopProps {
+    children: React.ReactNode;
+    direction: 'left' | 'right';
+    modal?: boolean;
+    className?: string;
+    onClose?: () => void;
+    defaultOpen?: boolean;
+}
+declare const DrawerDesktop: import('react').ForwardRefExoticComponent<DrawerDesktopProps & import('react').RefAttributes<DrawerDesktopHandle>>;
+export default DrawerDesktop;

package/dist/components/Input/Input.d.ts

@@ -29,6 +29,8 @@ export interface InputProps {
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     isActive?: boolean;
+    style?: React.CSSProperties;
+    readOnly?: boolean;
 }
-declare const _default: import('react').MemoExoticComponent<({ label, icon, iconPosition, onChange, value, debounceMs, name, width, height, variant, labelVariant, size, disabled, type, isFetching, errorComponent, helperComponent, placeholder, required, onFocus, onBlur, onEmptied, onKeyDown, onKeyUp, className, isActive }: InputProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ label, icon, iconPosition, onChange, value, debounceMs, name, width, height, variant, labelVariant, size, disabled, type, isFetching, errorComponent, helperComponent, placeholder, required, onFocus, onBlur, onEmptied, onKeyDown, onKeyUp, className, isActive, style, readOnly }: InputProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;