@stackloop/ui 2.0.2 → 2.0.4

package/dist/index.js

@@ -2776,7 +2776,7 @@ function u(...e) {
 }
 const xe = Le.forwardRef(
   ({ variant: e = "primary", size: t = "md", loading: a, icon: o, className: n, children: l, disabled: s, ...c }, i) => {
-    const m = "inline-flex items-center justify-center gap-2 font-medium rounded-md transition-all duration-200 touch-target disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98] w-auto", x = {
+    const m = "flex items-center justify-center gap-2 font-medium rounded-md transition-all duration-200 touch-target disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98] w-auto", x = {
       primary: "bg-primary text-white hover:bg-primary-dark active:bg-primary-dark/90 shadow-sm",
       secondary: "bg-secondary text-foreground hover:bg-border active:bg-border-dark",
       outline: "bg-transparent text-primary border-2 border-primary hover:bg-secondary active:bg-border",
@@ -2813,24 +2813,28 @@ const mt = ae(
         c.required && /* @__PURE__ */ r("span", { className: "text-error ml-1", children: "*" })
       ] }),
       /* @__PURE__ */ d("div", { className: "relative", children: [
-        o && /* @__PURE__ */ r("div", { className: "absolute left-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-primary", children: o }),
+        o && /* @__PURE__ */ r("div", { className: "absolute flex items-center pointer-events-none text-primary", style: { left: "14px", top: "50%", transform: "translateY(-50%)" }, children: o }),
         /* @__PURE__ */ r(
           "input",
           {
             ref: i,
             type: h,
             className: u(
-              "w-full px-4 py-3 rounded-md border transition-all duration-200",
+              "w-full rounded-md border transition-all duration-200",
               "bg-background text-foreground placeholder:text-foreground/50",
               "focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
               "disabled:bg-secondary disabled:cursor-not-allowed",
               "touch-target text-base",
               t && "border-error focus:ring-error",
               !t && "border-border",
-              o && "pl-11",
-              (n || y) && "pr-11",
               l
             ),
+            style: {
+              paddingTop: "12px",
+              paddingBottom: "12px",
+              paddingLeft: o ? "44px" : "16px",
+              paddingRight: n || y ? "44px" : "16px"
+            },
             ...c
           }
         ),
@@ -2839,14 +2843,22 @@ const mt = ae(
           {
             type: "button",
             onClick: () => x(!m),
-            className: "absolute right-3.5 top-1/2 -translate-y-1/2 flex items-center text-primary hover:text-primary-dark transition-colors",
+            className: "absolute text-primary hover:text-primary-dark transition-colors",
+            style: {
+              right: "14px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
             "aria-label": m ? "Hide password" : "Show password",
             whileTap: { scale: 0.9 },
             transition: { duration: 0.1 },
             children: m ? /* @__PURE__ */ r(or, { className: "w-5 h-5" }) : /* @__PURE__ */ r(ar, { className: "w-5 h-5" })
           }
         ),
-        n && !y && /* @__PURE__ */ r("div", { className: "absolute right-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-primary", children: n })
+        n && !y && /* @__PURE__ */ r("div", { className: "absolute flex items-center pointer-events-none text-primary", style: { right: "14px", top: "50%", transform: "translateY(-50%)" }, children: n })
       ] }),
       t && /* @__PURE__ */ r(
         g.p,