@particle-academy/react-fancy 4.19.1 → 5.1.0

package/dist/index.cjs

@@ -3179,12 +3179,21 @@ var Input = react.forwardRef(
     mode,
     onValueChange,
     onChange,
+    reveal,
+    revealed,
+    onRevealedChange,
+    revealLabel = "Show password",
+    hideLabel = "Hide password",
     ...props
   }, ref) => {
     const autoId = react.useId();
     const inputId = id ?? autoId;
     const resolvedMode = useFieldMode(mode);
     const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    const canReveal = reveal === true && type === "password";
+    const [isRevealed, setRevealed] = useControllableState(revealed, false, onRevealedChange);
+    const shown = canReveal && isRevealed;
+    const renderedType = shown ? "text" : type;
     const input = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
       DisplayValue,
       {
@@ -3210,7 +3219,7 @@ var Input = react.forwardRef(
             {
               ref,
               id: inputId,
-              type,
+              type: renderedType,
               disabled,
               required,
               className: cn(
@@ -3220,7 +3229,7 @@ var Input = react.forwardRef(
                 errorClasses(error),
                 "w-full",
                 leading && "pl-9",
-                trailing && "pr-9",
+                (trailing || canReveal) && "pr-9",
                 className
               ),
               onChange: (e) => {
@@ -3235,7 +3244,23 @@ var Input = react.forwardRef(
               }
             }
           ),
-          trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500", children: trailing })
+          canReveal ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              id: `${inputId}-reveal`,
+              "data-react-fancy-reveal": "",
+              onClick: () => setRevealed((v) => !v),
+              disabled,
+              "aria-controls": inputId,
+              "aria-pressed": shown,
+              "aria-label": shown ? hideLabel : revealLabel,
+              title: shown ? hideLabel : revealLabel,
+              tabIndex: -1,
+              className: "absolute right-2 inline-flex items-center justify-center rounded p-1 text-zinc-400 transition-colors hover:text-zinc-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-50 dark:text-zinc-500 dark:hover:text-zinc-300",
+              children: shown ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
+            }
+          ) : trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500", children: trailing })
         ] })
       }
     );
@@ -3257,6 +3282,20 @@ var Input = react.forwardRef(
   }
 );
 Input.displayName = "Input";
+function EyeIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function EyeOffIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m2 2 20 20" })
+  ] });
+}
 var Textarea = react.forwardRef(
   ({
     size = "md",