prometeo-design-system 4.5.0 → 4.6.0

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/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.0",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",