@particle-academy/react-fancy 4.19.1 → 5.1.0

package/dist/index.d.cts

@@ -376,6 +376,23 @@ interface InputProps extends InputBaseProps, InputAffixProps, Omit<InputHTMLAttr
     onValueChange?: (value: string) => void;
     leading?: ReactNode;
     trailing?: ReactNode;
+    /**
+     * Show a toggle that reveals the value, for `type="password"`.
+     *
+     * Ignored on other input types — a reveal on a field that is already visible
+     * is a button that does nothing.
+     *
+     * It occupies the trailing slot, so it replaces `trailing` when both are set:
+     * the two would otherwise stack in the same corner, and the reveal is the one
+     * a person needs to click.
+     */
+    reveal?: boolean;
+    /** Controlled reveal state. Omit to let the input own it. */
+    revealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    /** Accessible label for the toggle. Defaults to "Show password" / "Hide password". */
+    revealLabel?: string;
+    hideLabel?: string;
 }
 
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;

package/dist/index.d.ts

@@ -376,6 +376,23 @@ interface InputProps extends InputBaseProps, InputAffixProps, Omit<InputHTMLAttr
     onValueChange?: (value: string) => void;
     leading?: ReactNode;
     trailing?: ReactNode;
+    /**
+     * Show a toggle that reveals the value, for `type="password"`.
+     *
+     * Ignored on other input types — a reveal on a field that is already visible
+     * is a button that does nothing.
+     *
+     * It occupies the trailing slot, so it replaces `trailing` when both are set:
+     * the two would otherwise stack in the same corner, and the reveal is the one
+     * a person needs to click.
+     */
+    reveal?: boolean;
+    /** Controlled reveal state. Omit to let the input own it. */
+    revealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    /** Accessible label for the toggle. Defaults to "Show password" / "Hide password". */
+    revealLabel?: string;
+    hideLabel?: string;
 }
 
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;

package/dist/index.js

@@ -3177,12 +3177,21 @@ var Input = forwardRef(
     mode,
     onValueChange,
     onChange,
+    reveal,
+    revealed,
+    onRevealedChange,
+    revealLabel = "Show password",
+    hideLabel = "Hide password",
     ...props
   }, ref) => {
     const autoId = 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__ */ jsx(
       DisplayValue,
       {
@@ -3208,7 +3217,7 @@ var Input = forwardRef(
             {
               ref,
               id: inputId,
-              type,
+              type: renderedType,
               disabled,
               required,
               className: cn(
@@ -3218,7 +3227,7 @@ var Input = forwardRef(
                 errorClasses(error),
                 "w-full",
                 leading && "pl-9",
-                trailing && "pr-9",
+                (trailing || canReveal) && "pr-9",
                 className
               ),
               onChange: (e) => {
@@ -3233,7 +3242,23 @@ var Input = forwardRef(
               }
             }
           ),
-          trailing && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500", children: trailing })
+          canReveal ? /* @__PURE__ */ 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__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+            }
+          ) : trailing && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500", children: trailing })
         ] })
       }
     );
@@ -3255,6 +3280,20 @@ var Input = forwardRef(
   }
 );
 Input.displayName = "Input";
+function EyeIcon() {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function EyeOffIcon() {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+    /* @__PURE__ */ 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__ */ jsx("path", { d: "m2 2 20 20" })
+  ] });
+}
 var Textarea = forwardRef(
   ({
     size = "md",