prometeo-design-system 4.5.0 → 4.6.1

package/dist/DialogModal.es.js

@@ -1,29 +1,31 @@
 import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { forwardRef as y, memo as r, useState as D, useRef as x, useCallback as l, useImperativeHandle as k } from "react";
-import { c as j } from "./cn-B6yFEsav.js";
-const C = y(
-  ({ children: e, onClose: t, className: c }, i) => {
-    const [n, s] = D(!1), [u, g] = D(null), f = x(t), p = x(u);
-    f.current = t, p.current = u;
-    const m = l((a) => {
-      g(a ?? null), s(!0);
-    }, []), d = l(() => {
-      s(!1), f.current?.(p.current), setTimeout(() => g(null), 300);
+import { forwardRef as w, memo as r, useState as C, useRef as x, useCallback as n, useImperativeHandle as R } from "react";
+import { createPortal as O } from "react-dom";
+import { c as b } from "./cn-B6yFEsav.js";
+const y = w(
+  ({ children: e, onClose: t, className: s, attachToParent: c = !1 }, i) => {
+    const [l, g] = C(!1), [u, f] = C(null), m = x(t), d = x(u);
+    m.current = t, d.current = u;
+    const D = n((a) => {
+      f(a ?? null), g(!0);
+    }, []), p = n(() => {
+      g(!1), m.current?.(d.current), setTimeout(() => f(null), 300);
     }, []);
-    return k(
+    R(
       i,
       () => ({
-        open: m,
-        close: d,
-        isOpen: n,
-        getContext: () => p.current
+        open: D,
+        close: p,
+        isOpen: l,
+        getContext: () => d.current
       }),
-      [m, d, n]
-    ), /* @__PURE__ */ o.jsx(o.Fragment, { children: n && /* @__PURE__ */ o.jsxs(
+      [D, p, l]
+    );
+    const j = /* @__PURE__ */ o.jsx(o.Fragment, { children: l && /* @__PURE__ */ o.jsxs(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
-        onClick: d,
+        onClick: p,
         children: [
           /* @__PURE__ */ o.jsx(
             "div",
@@ -36,9 +38,9 @@ const C = y(
             "div",
             {
               onClick: (a) => a.stopPropagation(),
-              className: j(
+              className: b(
                 "bg-neutral-default-default  w-3/4 h-3/4 xl:w-3/4 xl:h-10/12 rounded-lg shadow-lg border-neutral-strong-default border relative p-6",
-                c
+                s
               ),
               children: typeof e == "function" ? e(u) : e
             }
@@ -46,39 +48,40 @@ const C = y(
         ]
       }
     ) });
+    return c ? j : O(j, document.body);
   }
 );
-C.displayName = "Dialog";
-const b = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: j("flex flex-col gap-4 h-full"), children: e }) }));
-b.displayName = "DialogContent";
-const N = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("h1", { className: t, children: e }));
-N.displayName = "DialogTitle";
-const h = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-h.displayName = "DialogHeader";
+y.displayName = "Dialog";
+const N = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: b("flex flex-col gap-4 h-full"), children: e }) }));
+N.displayName = "DialogContent";
+const h = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("h1", { className: t, children: e }));
+h.displayName = "DialogTitle";
 const v = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-v.displayName = "DialogFooter";
-const w = Object.assign(C, {
-  Content: b,
-  Header: h,
-  Footer: v,
-  Title: N
+v.displayName = "DialogHeader";
+const k = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
+k.displayName = "DialogFooter";
+const F = Object.assign(y, {
+  Content: N,
+  Header: v,
+  Footer: k,
+  Title: h
 });
-w.displayName = "DialogModal";
-const H = () => {
-  const e = x(null), t = l((s) => {
-    e.current?.open(s);
-  }, []), c = l(() => {
+F.displayName = "DialogModal";
+const I = () => {
+  const e = x(null), t = n((l) => {
+    e.current?.open(l);
+  }, []), s = n(() => {
     e.current?.close();
-  }, []), i = l(() => e.current?.isOpen ?? !1, []), n = l(() => e.current?.getContext() ?? null, []);
+  }, []), c = n(() => e.current?.isOpen ?? !1, []), i = n(() => e.current?.getContext() ?? null, []);
   return {
     ref: e,
     open: t,
-    close: c,
-    isOpen: i,
-    getContext: n
+    close: s,
+    isOpen: c,
+    getContext: i
   };
 };
 export {
-  w as default,
-  H as useDialogControl
+  F as default,
+  I as useDialogControl
 };

package/dist/Header.es.js

@@ -1,34 +1,34 @@
 import { j as t } from "./jsx-runtime-GkKLlHH4.js";
-import { c as i } from "./cn-B6yFEsav.js";
+import { c as a } from "./cn-B6yFEsav.js";
 import { motion as n } from "framer-motion";
 import { memo as f } from "react";
-const c = ({ title: e, subtitle: s, children: l, className: m, subtitleClassName: r, titleClassName: d, mainActionSlot: a }) => /* @__PURE__ */ t.jsxs(
+const c = ({ title: e, subtitle: l, children: s, className: r, subtitleClassName: d, titleClassName: m, mainActionSlot: i }) => /* @__PURE__ */ t.jsxs(
   n.header,
   {
     initial: { opacity: 0, y: -10 },
     animate: { opacity: 1, y: 0 },
     transition: { duration: 0.6, ease: "easeOut" },
-    className: i(
+    className: a(
       "flex items-center sm:min-h-20 md:min-h-24 lg:min-h-28 xl:min-h-32 2xl:min-h-36 overflow-hidden px-4 md:px-0 py-2 md:py-3",
-      "flex justify-between items-center w-full",
-      a && "px-1",
-      m
+      "flex justify-between items-center w-full max-w-full overflow-hidden",
+      i && "px-1",
+      r
     ),
     children: [
-      /* @__PURE__ */ t.jsxs("div", { className: i(
-        "flex items-center md:items-start md:flex-col leading-6 h-full justify-center min-w-max",
-        a && "justify-start gap-1"
+      /* @__PURE__ */ t.jsxs("div", { className: a(
+        "flex items-center md:items-start md:flex-col leading-6 h-full justify-center overflow-hidden p-1  ",
+        i && "justify-start gap-1 w-full"
       ), children: [
-        a && /* @__PURE__ */ t.jsx("div", { className: "md:px-3", children: typeof a == "function" ? a() : a }),
-        /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col leading-6 justify-center md:px-6", children: [
-          s && /* @__PURE__ */ t.jsx("h3", { className: i(" prometeo-fonts-body-medium text-neutral-medium-default ", r), children: s }),
-          e && /* @__PURE__ */ t.jsx("h1", { className: i("prometeo-fonts-headline-small text-neutral-strong-default", d), children: e })
+        i && /* @__PURE__ */ t.jsx("div", { className: "md:px-3", children: typeof i == "function" ? i() : i }),
+        /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col leading-6 justify-center md:px-6 relative overflow-hidden ", children: [
+          l && /* @__PURE__ */ t.jsx("h3", { className: a(" prometeo-fonts-body-medium text-neutral-medium-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full", d), children: l }),
+          e && /* @__PURE__ */ t.jsx("h1", { className: a("prometeo-fonts-headline-small text-neutral-strong-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full wrap-break-word", m), children: e })
         ] })
       ] }),
-      l && /* @__PURE__ */ t.jsx("div", { className: "bg-red-400 px-2", children: l })
+      s && /* @__PURE__ */ t.jsx("div", { className: "shrink relative", children: s })
     ]
   }
-), u = f(c, (e, s) => e.title !== s.title || e.subtitle !== s.subtitle || e.className !== s.className ? !1 : e.children !== s.children ? !e.children && !s.children : !0);
+), u = f(c, (e, l) => e.title !== l.title || e.subtitle !== l.subtitle || e.className !== l.className ? !1 : e.children !== l.children ? !e.children && !l.children : !0);
 u.displayName = "Header";
 export {
   u as default

package/dist/TextArea.es.js

@@ -1,66 +1,108 @@
-import { j as k } from "./jsx-runtime-GkKLlHH4.js";
-import { c as A } from "./cn-B6yFEsav.js";
-import * as a from "react";
-import { forwardRef as E } from "react";
-const M = E(
+import { j as o } from "./jsx-runtime-GkKLlHH4.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import * as s from "react";
+import { forwardRef as V, Children as _, isValidElement as $ } from "react";
+const b = V(
   ({
-    className: f,
-    autoResize: r = !1,
-    userResize: c = !0,
-    minRows: l = 3,
-    maxRows: n,
-    placeholder: d,
-    onChange: m,
-    value: h,
-    rows: p,
-    disabled: x = !1,
-    ...g
+    className: t,
+    autoResize: a = !0,
+    userResize: f = !1,
+    minRows: d = 1,
+    maxRows: u,
+    placeholder: H,
+    onChange: v,
+    value: S,
+    rows: n,
+    disabled: k = !1,
+    children: m,
+    ...A
     // ← Para pasar las props nativas
-  }, t) => {
-    const o = a.useRef(null), b = a.useCallback(
+  }, l) => {
+    const y = s.useRef(null), r = s.useRef(null), L = s.useCallback(
       (e) => {
-        o.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+        y.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
       },
-      [t]
-    ), s = a.useCallback(() => {
-      const e = o.current;
-      if (!e || !r) return;
+      [l]
+    ), h = s.useCallback(() => {
+      const e = y.current;
+      if (!e || !a) return;
       e.style.height = "auto";
-      const C = e.scrollHeight, i = Number.parseInt(getComputedStyle(e).lineHeight) || 20, j = l * i + 16;
-      let u = Math.max(C, j);
-      if (n) {
-        const N = n * i + 16;
-        u = Math.min(u, N);
+      const F = e.scrollHeight, x = Number.parseInt(getComputedStyle(e).lineHeight) || 16, I = Math.min((n ?? d) * x, r.current?.clientHeight || 0);
+      let c = Math.max(F, I);
+      if (u || n) {
+        const O = (u || n || 1) * x;
+        c = Math.min(c, O);
       }
-      e.style.height = `${u}px`;
-    }, [r, l, n]), y = (e) => {
-      m?.(e), s();
+      e.style.height = `${c}px`, c > x + 12 && (e.style.alignContent = "start");
+    }, [a, d, u]), R = () => {
+      r.current?.classList.remove("border-neutral-default-default"), r.current?.classList.add("border-primary-default-default");
+    }, E = () => {
+      r.current?.classList.remove("border-primary-default-default"), r.current?.classList.add("border-neutral-default-default");
+    }, z = (e) => {
+      v?.(e), h();
     };
-    a.useEffect(() => {
-      s();
-    }, [s]);
-    const H = () => c ? r ? "resize-x" : "resize" : "resize-none";
-    return /* @__PURE__ */ k.jsx(
-      "textarea",
-      {
-        ref: b,
-        "data-slot": "textarea",
-        className: A(
-          "placeholder:text-neutral-medium-default text-neutral-default-default appearance-none border border-neutral-default-default focus:border-primary-default-default flex w-full rounded-md px-3 py-2 outline-none disabled:cursor-default disabled:opacity-50 md:text-sm",
-          H(),
-          f
-        ),
-        onChange: y,
-        rows: r ? l : p,
-        value: h,
-        placeholder: d,
-        disabled: x,
-        ...g
+    s.useEffect(() => {
+      h();
+    }, [h]);
+    const M = () => f ? a ? "resize-x" : "resize" : "resize-none", T = typeof m == "function" ? m() : m, B = _.toArray(T);
+    let g = null, p = null;
+    return B.forEach((e) => {
+      if ($(e)) {
+        if (e.type === j && !g) {
+          g = e;
+          return;
+        }
+        if (e.type === C && !p) {
+          p = e;
+          return;
+        }
       }
-    );
+    }), /* @__PURE__ */ o.jsxs("div", { ref: r, className: i(
+      "transition-all duration-300 ease-in-out",
+      "border border-neutral-default-default px-3 rounded-lg",
+      "flex gap-1 items-stretch",
+      "relative",
+      "overflow-auto prometeo-scrollbar-thin-weak"
+    ), children: [
+      g,
+      /* @__PURE__ */ o.jsx(
+        "textarea",
+        {
+          ref: L,
+          "data-slot": "textarea",
+          className: i(
+            // 'border border-amber-400/30',
+            "flex-2 shrink-0 min-w-min h-fit my-3 ",
+            "prometeo-fonts-body-large resize-none",
+            "placeholder:text-neutral-medium-default text-neutral-default-default appearance-none",
+            "content-center",
+            "outline-none",
+            "prometeo-scrollbar-thin-weak",
+            M(),
+            t
+          ),
+          onChange: z,
+          onFocus: R,
+          onBlur: E,
+          rows: n ?? d,
+          value: S,
+          placeholder: H,
+          disabled: k,
+          ...A
+        }
+      ),
+      p
+    ] });
   }
-);
-M.displayName = "TextArea";
+), N = (t) => {
+  const { children: a, className: f } = t;
+  return /* @__PURE__ */ o.jsx("div", { className: i("slot", f), children: a });
+}, j = (t) => /* @__PURE__ */ o.jsx(N, { ...t, className: i("left-slot flex gap-1 items-center py-3", t?.className) }), C = (t) => /* @__PURE__ */ o.jsx(N, { ...t, className: i("right-slot flex gap-1 items-end py-3", t?.className) }), q = Object.assign(b, {
+  Root: b,
+  LeftSlot: j,
+  RightSlot: C
+});
+q.displayName = "TextArea";
 export {
-  M as default
+  q as default
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -3,6 +3,7 @@ interface DialogProps<TContext = unknown> {
     children: React.ReactNode | ((context: TContext | null) => React.ReactNode);
     onClose?: (context: TContext | null) => void;
     className?: string;
+    attachToParent?: boolean;
 }
 export interface DialogHandle<TContext = unknown> {
     open: (context?: TContext) => void;

package/dist/components/TextArea/TextArea.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 import * as React from "react";
-export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "children"> {
     autoResize?: boolean;
     userResize?: boolean;
     minRows?: number;
@@ -10,6 +11,15 @@ export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     placeholder?: string;
     rows?: number;
     disabled?: boolean;
+    children?: ReactNode | (() => ReactNode);
 }
-declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+type SlotProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>> & {
+    Root: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+    LeftSlot: (props: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    RightSlot: (props: SlotProps) => import("react/jsx-runtime").JSX.Element;
+};
 export default TextArea;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.5.0",
+  "version": "4.6.1",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",