conversion-ui-library 1.1.12 → 1.1.13

package/dist/index.es.js

@@ -4404,7 +4404,12 @@ const FD = (t) => /* @__PURE__ */ I(
   return /* @__PURE__ */ y(
     a,
     {
-      className: j(fL[e], dL[r], o.className, n),
+      className: j(
+        fL[e],
+        dL[r],
+        o.className,
+        n
+      ),
       ...i
     }
   );
@@ -12789,12 +12794,6 @@ const CB = zr(
         md: "h-10 px-3 py-[7px] rounded-md",
         lg: "h-12 px-5 rounded-md"
       },
-      error: {
-        true: "!border-red-500 !bg-white"
-      },
-      success: {
-        true: "!border-green-500 !bg-white"
-      },
       disabled: {
         true: "bg-soft-1 border-soft-1 cursor-not-allowed opacity-60 pointer-events-none"
       }
@@ -12822,66 +12821,80 @@ const CB = zr(
     ...h
   }, O) => {
     const [p, g] = m.useState(!1), v = f === "password", b = v && u && p ? "text" : f;
-    return /* @__PURE__ */ I("div", { className: "w-full", children: [
-      a && /* @__PURE__ */ I(
-        Je,
-        {
-          size: "small",
-          fontWeight: "medium",
-          className: "mb-2 block text-sub",
-          children: [
-            a,
-            d && /* @__PURE__ */ y("span", { className: "ml-1 text-red-500", children: "*" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ I(
-        "div",
-        {
-          className: j(
-            CB({ variant: e, size: r, error: n, success: i, disabled: o }),
-            t
+    return /* @__PURE__ */ I(
+      "div",
+      {
+        className: "w-full group/textfield",
+        "data-error": n || void 0,
+        "data-success": i || void 0,
+        "data-disabled": o || void 0,
+        children: [
+          a && /* @__PURE__ */ I(
+            Je,
+            {
+              size: "small",
+              fontWeight: "medium",
+              className: "mb-2 block text-sub",
+              children: [
+                a,
+                d && /* @__PURE__ */ y("span", { className: "ml-1 text-red-500", children: "*" })
+              ]
+            }
           ),
-          children: [
-            l && /* @__PURE__ */ y("div", { className: "flex shrink-0 items-center text-sub-1", children: l }),
-            /* @__PURE__ */ y(
-              "input",
-              {
-                ref: O,
-                type: b,
-                disabled: o ?? void 0,
-                className: j(
-                  "flex-1 min-w-0 bg-transparent  !text-label-sm font-medium text-strong outline-none placeholder:text-sub-1",
-                  "disabled:cursor-not-allowed"
+          /* @__PURE__ */ I(
+            "div",
+            {
+              className: j(
+                CB({ variant: e, size: r, disabled: o }),
+                // CSS-based state management - no re-render needed
+                "group-data-[error]/textfield:!border-red-500 group-data-[error]/textfield:!bg-white",
+                "group-data-[success]/textfield:!border-green-500 group-data-[success]/textfield:!bg-white",
+                t
+              ),
+              children: [
+                l && /* @__PURE__ */ y("div", { className: "flex shrink-0 items-center text-sub-1", children: l }),
+                /* @__PURE__ */ y(
+                  "input",
+                  {
+                    ref: O,
+                    type: b,
+                    disabled: o ?? void 0,
+                    className: j(
+                      "flex-1 min-w-0 bg-transparent  !text-label-sm font-medium text-strong outline-none placeholder:text-sub-1",
+                      "disabled:cursor-not-allowed"
+                    ),
+                    ...h
+                  }
                 ),
-                ...h
-              }
-            ),
-            v && u && /* @__PURE__ */ y(
-              "button",
-              {
-                type: "button",
-                onClick: () => g(!p),
-                disabled: o ?? void 0,
-                className: "flex shrink-0 items-center text-sub-1 transition-colors hover:text-strong",
-                children: p ? /* @__PURE__ */ y(DI, { className: "h-4 w-4" }) : /* @__PURE__ */ y(zI, { className: "h-4 w-4" })
-              }
-            ),
-            !v && c && /* @__PURE__ */ y("div", { className: "flex shrink-0 items-center text-sub-1", children: c })
-          ]
-        }
-      ),
-      s && /* @__PURE__ */ y(
-        "p",
-        {
-          className: j(
-            "mt-1 text-xs",
-            n ? "text-red-500" : i ? "text-green-500" : "text-sub"
+                v && u && /* @__PURE__ */ y(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => g(!p),
+                    disabled: o ?? void 0,
+                    className: "flex shrink-0 items-center text-sub-1 transition-colors hover:text-strong",
+                    children: p ? /* @__PURE__ */ y(DI, { className: "h-4 w-4" }) : /* @__PURE__ */ y(zI, { className: "h-4 w-4" })
+                  }
+                ),
+                !v && c && /* @__PURE__ */ y("div", { className: "flex shrink-0 items-center text-sub-1", children: c })
+              ]
+            }
           ),
-          children: s
-        }
-      )
-    ] });
+          s && /* @__PURE__ */ y(
+            "p",
+            {
+              className: j(
+                "mt-1 text-xs text-sub",
+                // CSS-based color management
+                "group-data-[error]/textfield:text-red-500",
+                "group-data-[success]/textfield:text-green-500"
+              ),
+              children: s
+            }
+          )
+        ]
+      }
+    );
   }
 );
 $B.displayName = "TextField";
@@ -52208,24 +52221,27 @@ const Zye = /* @__PURE__ */ le.inputHandler.of((t, e, r, n, i) => {
     color: Vye
   }
 ]), Jye = [Hye, /* @__PURE__ */ F_(Kye)], ebe = zc.define([
-  { tag: P.keyword, color: "#d73a49", fontWeight: "bold" },
+  { tag: P.keyword, color: "#3B82F6", fontWeight: "semibold" },
   { tag: [P.name, P.deleted, P.character, P.macroName], color: "#22863a" },
   { tag: [P.propertyName], color: "#6f42c1" },
   { tag: [P.processingInstruction, P.string, P.inserted], color: "#032f62" },
   { tag: [P.function(P.variableName), P.labelName], color: "#6f42c1" },
   { tag: [P.color, P.constant(P.name), P.standard(P.name)], color: "#005cc5" },
   { tag: [P.definition(P.name), P.separator], color: "#24292e" },
-  { tag: [P.className], color: "#6f42c1", fontWeight: "bold" },
-  { tag: [P.number, P.changed, P.annotation, P.modifier, P.self, P.namespace], color: "#005cc5" },
-  { tag: [P.typeName], color: "#d73a49", fontWeight: "bold" },
+  { tag: [P.className], color: "#6f42c1", fontWeight: "semibold" },
+  {
+    tag: [P.number, P.changed, P.annotation, P.modifier, P.self, P.namespace],
+    color: "#005cc5"
+  },
+  { tag: [P.typeName], color: "#d73a49", fontWeight: "semibold" },
   { tag: [P.operator, P.operatorKeyword], color: "#d73a49" },
   { tag: [P.url, P.escape, P.regexp, P.link], color: "#032f62" },
   { tag: [P.meta, P.comment], color: "#6a737d", fontStyle: "italic" },
-  { tag: P.strong, fontWeight: "bold" },
+  { tag: P.strong, fontWeight: "semibold" },
   { tag: P.emphasis, fontStyle: "italic" },
   { tag: P.link, textDecoration: "underline" },
-  { tag: P.heading, fontWeight: "bold", color: "#005cc5" },
-  { tag: [P.atom, P.bool, P.special(P.variableName)], color: "#e36209" },
+  { tag: P.heading, fontWeight: "semibold", color: "#005cc5" },
+  { tag: [P.atom, P.bool, P.special(P.variableName)], color: "#EF4444" },
   { tag: P.invalid, color: "#cb2431" }
 ]), tbe = zr(
   "w-full border transition-all duration-200 shadow-sm overflow-hidden",