@tapizlabs/ui 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -15,6 +15,11 @@ The format is based on Keep a Changelog and the package follows Semantic Version
 - shared `ConfirmDialog` supports both `description` and compatibility `message` props
 - consumer apps are now migrated to shared theme, fonts, and shared UI primitives
 
+## [0.2.6] - 2026-06-12
+
+### Fixed
+- `PasswordInput` inner input no longer renders its own focus signal bar; the wrapper's `focus-within` signal stays at the field's left edge even when the wrapper has extra padding (e.g. `pl-10` for an inline icon)
+
 ## [0.2.5] - 2026-06-12
 
 ### Fixed

package/dist/index.js

@@ -2360,17 +2360,17 @@ import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
 function Drawer({ open, onClose, title, description, children, footer, side = "right", className = "" }) {
   if (!open) return null;
   return /* @__PURE__ */ jsxs44("div", { className: "fixed inset-0 z-50", children: [
-    /* @__PURE__ */ jsx61("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-[var(--tapiz-bg-overlay)]", onClick: onClose }),
-    /* @__PURE__ */ jsxs44("section", { className: `absolute top-0 h-full w-full max-w-md border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] shadow-[var(--tapiz-shadow-lg)] ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
-      /* @__PURE__ */ jsxs44("header", { className: "flex items-start justify-between gap-4 border-b border-[var(--tapiz-border-subtle)] p-5", children: [
+    /* @__PURE__ */ jsx61("button", { type: "button", "aria-label": "Close drawer", className: "absolute inset-0 bg-(--tapiz-bg-overlay)", onClick: onClose }),
+    /* @__PURE__ */ jsxs44("section", { className: `absolute top-0 h-full w-full max-w-md border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) shadow-(--tapiz-shadow-lg) ${side === "right" ? "right-0 border-l" : "left-0 border-r"} ${className}`, children: [
+      /* @__PURE__ */ jsxs44("header", { className: "flex items-start justify-between gap-4 border-b border-(--tapiz-border-subtle) p-5", children: [
         /* @__PURE__ */ jsxs44("div", { children: [
-          title ? /* @__PURE__ */ jsx61("h2", { className: "text-lg font-semibold text-[var(--tapiz-text-primary)]", children: title }) : null,
-          description ? /* @__PURE__ */ jsx61("p", { className: "mt-1 text-sm text-[var(--tapiz-text-muted)]", children: description }) : null
+          title ? /* @__PURE__ */ jsx61("h2", { className: "text-lg font-semibold text-(--tapiz-text-primary)", children: title }) : null,
+          description ? /* @__PURE__ */ jsx61("p", { className: "mt-1 text-sm text-(--tapiz-text-muted)", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsx61("button", { type: "button", onClick: onClose, className: "border border-[var(--tapiz-border-subtle)] px-2 py-1 font-mono text-sm text-[var(--tapiz-text-muted)] hover:text-[var(--tapiz-text-primary)]", children: "\xD7" })
+        /* @__PURE__ */ jsx61("button", { type: "button", onClick: onClose, className: "border border-(--tapiz-border-subtle) px-2 py-1 font-mono text-sm text-(--tapiz-text-muted) hover:text-(--tapiz-text-primary)", children: "\xD7" })
       ] }),
       /* @__PURE__ */ jsx61("div", { className: "max-h-[calc(100vh-9rem)] overflow-auto p-5", children }),
-      footer ? /* @__PURE__ */ jsx61("footer", { className: "border-t border-[var(--tapiz-border-subtle)] p-4", children: footer }) : null
+      footer ? /* @__PURE__ */ jsx61("footer", { className: "border-t border-(--tapiz-border-subtle) p-4", children: footer }) : null
     ] })
   ] });
 }
@@ -3057,14 +3057,14 @@ function PasswordInput({
   return /* @__PURE__ */ jsxs74(
     "div",
     {
-      className: `flex border border-[var(--tapiz-border-strong)] bg-[var(--tapiz-bg-surface)] focus-within:border-[var(--tapiz-border-focus)] focus-within:shadow-[inset_3px_0_0_0_var(--tapiz-signal)] ${className}`,
+      className: `flex border border-(--tapiz-border-strong) bg-(--tapiz-bg-surface) focus-within:border-(--tapiz-border-focus) focus-within:shadow-[inset_3px_0_0_0_var(--tapiz-signal)] ${className}`,
       children: [
         /* @__PURE__ */ jsx97(
           "input",
           {
             ...props,
             type: visible ? "text" : "password",
-            className: "min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-[var(--tapiz-text-primary)] outline-none"
+            className: "min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-(--tapiz-text-primary) outline-none focus:shadow-none!"
           }
         ),
         /* @__PURE__ */ jsx97(
@@ -3075,7 +3075,7 @@ function PasswordInput({
             "aria-pressed": visible,
             onClick: () => setVisible((v) => !v),
             tabIndex: -1,
-            className: "grid place-items-center px-3 text-[var(--tapiz-text-muted)] transition-colors hover:text-[var(--tapiz-text-primary)]",
+            className: "grid place-items-center px-3 text-(--tapiz-text-muted) transition-colors hover:text-(--tapiz-text-primary)",
             children: visible ? /* @__PURE__ */ jsx97(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx97(Eye, { size: 15 })
           }
         )