@agentero/design-system 0.32.2 → 0.33.1

package/src/input-password/input-password.js

@@ -0,0 +1,57 @@
+"use client";
+import { Button as e } from "../button/button.js";
+import { Input as t } from "../input/input.js";
+import { InputGroup as n } from "../input-group/index.js";
+import { IconVisibility as r, IconVisibilityOff as i } from "./icons.js";
+import { tv as a } from "tailwind-variants";
+import { useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/input-password/input-password.tsx
+var l = a({
+	slots: {
+		toggle: "group-has-[input:disabled]/input-group:hidden",
+		button: "[&_svg]:mx-0"
+	},
+	variants: { size: {
+		sm: {
+			toggle: "-me-2.25",
+			button: "rounded-sm [&_svg]:size-4"
+		},
+		md: {
+			toggle: "-me-2.25",
+			button: "rounded-sm [&_svg]:size-5"
+		},
+		lg: {
+			toggle: "-me-1.25",
+			button: "[&_svg]:size-6"
+		}
+	} },
+	defaultVariants: { size: "md" }
+}), u = ({ className: a, size: u, ...d }) => {
+	let [f, p] = o("password"), m = f === "password", h = l({ size: u });
+	return /* @__PURE__ */ c(n.Root, {
+		"data-slot": "input-password",
+		className: a,
+		children: [/* @__PURE__ */ s(t, {
+			...d,
+			size: u,
+			type: f
+		}), /* @__PURE__ */ s(n.Addon, {
+			className: h.toggle(),
+			children: /* @__PURE__ */ s(e, {
+				type: "button",
+				variant: "ghost",
+				iconOnly: !0,
+				size: u === "sm" ? "xs" : "sm",
+				className: h.button(),
+				"aria-label": m ? "Show password" : "Hide password",
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => p(m ? "text" : "password"),
+				children: s(m ? r : i, {})
+			})
+		})]
+	});
+};
+u.displayName = "InputPassword";
+//#endregion
+export { u as InputPassword, l as inputPasswordRecipe };