@particle-academy/react-fancy 5.0.0 → 5.2.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>>;
@@ -826,8 +843,18 @@ declare function Portal({ children, container }: PortalProps): react.ReactPortal
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Which heading element to render */
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    /** Text size */
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /**
+     * Text size, on a SEMANTIC ramp — the names are steps on this scale, not
+     * Tailwind class names. `xl` is `text-2xl` and `2xl` is `text-4xl`, and that
+     * offset has been true since the component shipped, so the display steps
+     * below continue the same ramp rather than re-basing it and silently
+     * resizing every existing heading.
+     *
+     * `3xl`–`7xl` are DISPLAY sizes: hero type, "typography at maximum volume".
+     * They carry tighter tracking, because letter-spacing tuned for body-adjacent
+     * headings reads loose and unset once type gets big.
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
     /** Font weight */
     weight?: "normal" | "medium" | "semibold" | "bold";
 }

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>>;
@@ -826,8 +843,18 @@ declare function Portal({ children, container }: PortalProps): react.ReactPortal
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** Which heading element to render */
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    /** Text size */
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /**
+     * Text size, on a SEMANTIC ramp — the names are steps on this scale, not
+     * Tailwind class names. `xl` is `text-2xl` and `2xl` is `text-4xl`, and that
+     * offset has been true since the component shipped, so the display steps
+     * below continue the same ramp rather than re-basing it and silently
+     * resizing every existing heading.
+     *
+     * `3xl`–`7xl` are DISPLAY sizes: hero type, "typography at maximum volume".
+     * They carry tighter tracking, because letter-spacing tuned for body-adjacent
+     * headings reads loose and unset once type gets big.
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
     /** Font weight */
     weight?: "normal" | "medium" | "semibold" | "bold";
 }

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",
@@ -6183,7 +6222,20 @@ var sizeClasses3 = {
   md: "text-base",
   lg: "text-lg",
   xl: "text-2xl",
-  "2xl": "text-4xl"
+  "2xl": "text-4xl",
+  // Display steps. Each is the next Tailwind size up, continuing the ramp.
+  "3xl": "text-5xl",
+  "4xl": "text-6xl",
+  "5xl": "text-7xl",
+  "6xl": "text-8xl",
+  "7xl": "text-9xl"
+};
+var trackingClasses = {
+  "3xl": "tracking-tight",
+  "4xl": "tracking-tight",
+  "5xl": "tracking-tighter",
+  "6xl": "tracking-tighter",
+  "7xl": "tracking-tighter"
 };
 var weightClasses = {
   normal: "font-normal",
@@ -6208,6 +6260,7 @@ var Heading = forwardRef(
         className: cn(
           "text-zinc-900 dark:text-zinc-100",
           sizeClasses3[size],
+          trackingClasses[size],
           weightClasses[weight],
           className
         ),