prometeo-design-system 4.7.1 → 4.7.3

package/dist/TextArea.es.js

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

package/package.json

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