@particle-academy/react-fancy 5.27.0 → 5.27.1

package/dist/{chunk-JAAJJJKI.js → chunk-L5KKMJ2Q.js}

@@ -6,9 +6,27 @@ import { useInlineEdit } from './chunk-OL53XYHF.js';
 import { useFieldMode } from './chunk-NRXK42LO.js';
 import { useControllableState } from './chunk-6FQGMVF2.js';
 import { cn } from './chunk-MMW2JGKZ.js';
-import { forwardRef, useId } from 'react';
+import { forwardRef, useId, useState, useCallback, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+function useAdornmentWidth() {
+  const [width, setWidth] = useState(0);
+  const [node, setNode] = useState(null);
+  const ref = useCallback((n) => setNode(n), []);
+  useEffect(() => {
+    if (!node) {
+      setWidth(0);
+      return;
+    }
+    const read = () => setWidth(node.getBoundingClientRect().width);
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node]);
+  return [ref, width];
+}
 var Input = forwardRef(
   ({
     type = "text",
@@ -42,6 +60,8 @@ var Input = forwardRef(
     const inputId = id ?? autoId;
     const resolvedMode = useFieldMode(mode);
     const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    const [leadingRef, leadingWidth] = useAdornmentWidth();
+    const [trailingRef, trailingWidth] = useAdornmentWidth();
     const canReveal = reveal === true && type === "password";
     const [isRevealed, setRevealed] = useControllableState(revealed, false, onRevealedChange);
     const shown = canReveal && isRevealed;
@@ -65,7 +85,14 @@ var Input = forwardRef(
         suffixPosition,
         size,
         children: /* @__PURE__ */ jsxs("div", { "data-react-fancy-input": "", className: "relative flex items-center", children: [
-          leading && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 text-zinc-400 dark:text-zinc-500", children: leading }),
+          leading && /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: leadingRef,
+              className: "pointer-events-none absolute left-3 text-zinc-400 dark:text-zinc-500",
+              children: leading
+            }
+          ),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -80,10 +107,21 @@ var Input = forwardRef(
                 dirtyClasses(dirty),
                 errorClasses(error),
                 "w-full",
-                leading && "pl-9",
-                (trailing || canReveal) && "pr-9",
+                // The fixed classes are the PRE-MEASURE fallback only. Once the
+                // adornment is measured, the inline style below overrides them
+                // with its real width -- a fixed 36px is correct for one icon and
+                // wrong for anything wider, which is how `https://` came to
+                // render on top of the value.
+                leading && !leadingWidth && "pl-9",
+                (trailing || canReveal) && !trailingWidth && "pr-9",
                 className
               ),
+              style: {
+                // 12px clears `left-3`/`right-3`; 8px is the gap to the text.
+                ...leadingWidth ? { paddingLeft: leadingWidth + 20 } : null,
+                ...trailingWidth ? { paddingRight: trailingWidth + 20 } : null,
+                ...props.style
+              },
               onChange: (e) => {
                 onChange?.(e);
                 onValueChange?.(e.target.value);
@@ -112,7 +150,14 @@ var Input = forwardRef(
               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 })
+          ) : trailing && /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: trailingRef,
+              className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500",
+              children: trailing
+            }
+          )
         ] })
       }
     );
@@ -151,5 +196,5 @@ function EyeOffIcon() {
 }
 
 export { Input };
-//# sourceMappingURL=chunk-JAAJJJKI.js.map
-//# sourceMappingURL=chunk-JAAJJJKI.js.map
+//# sourceMappingURL=chunk-L5KKMJ2Q.js.map
+//# sourceMappingURL=chunk-L5KKMJ2Q.js.map

package/dist/chunk-L5KKMJ2Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-adornment-width.ts","../src/components/inputs/Input/Input.tsx"],"names":[],"mappings":"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","file":"chunk-L5KKMJ2Q.js","sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Measure an inline adornment so the input can reserve exactly its width.\n *\n * ## Why this exists\n *\n * `leading` / `trailing` render ABSOLUTELY over the input, so they take no\n * space in flow and the input must be padded by hand to keep text clear of\n * them. That padding used to be a fixed `pl-9` / `pr-9` — 36px, sized for a\n * single icon. Any wider adornment ran straight under the value: `leading =\n * \"https://\"` is roughly 50px, so `https://` and `fancy.app` rendered on top of\n * one another.\n *\n * A fixed padding cannot be right for arbitrary content, and these props accept\n * arbitrary content — a currency code, a unit, a protocol, a short label. So\n * the width is measured rather than assumed.\n *\n * Returns `0` until measured (and on the server), which is the signal to keep\n * the old fixed padding as a fallback: an unmeasured render is then no worse\n * than it was before, rather than unpadded.\n *\n * `ResizeObserver` rather than a one-shot read, because the width changes after\n * first paint for reasons the first paint cannot see — a webfont swapping in,\n * the adornment's own content changing, a container query resizing the text.\n */\nexport function useAdornmentWidth(): [(node: HTMLElement | null) => void, number] {\n  const [width, setWidth] = useState(0);\n  const [node, setNode] = useState<HTMLElement | null>(null);\n\n  const ref = useCallback((n: HTMLElement | null) => setNode(n), []);\n\n  useEffect(() => {\n    if (!node) {\n      setWidth(0);\n\n      return;\n    }\n\n    const read = () => setWidth(node.getBoundingClientRect().width);\n    read();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver(read);\n    observer.observe(node);\n\n    return () => observer.disconnect();\n  }, [node]);\n\n  return [ref, width];\n}\n","import { forwardRef, useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { useAdornmentWidth } from \"../../../hooks/use-adornment-width\";\nimport { Field } from \"../Field\";\nimport { InputWrapper } from \"../InputWrapper\";\nimport {\n  dirtyClasses,\n  errorClasses,\n  inputBaseClasses,\n  inputSizeClasses,\n} from \"../inputs.utils\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport type { InputProps } from \"./Input.types\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = \"text\",\n      size = \"md\",\n      dirty,\n      error,\n      label,\n      labelHidden,\n      description,\n      required,\n      disabled,\n      className,\n      id,\n      leading,\n      trailing,\n      prefix,\n      suffix,\n      prefixPosition,\n      suffixPosition,\n      mode,\n      onValueChange,\n      onChange,\n      reveal,\n      revealed,\n      onRevealedChange,\n      revealLabel = \"Show password\",\n      hideLabel = \"Hide password\",\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n    // Measured, not assumed: `leading`/`trailing` take arbitrary content, and a\n    // fixed padding can only ever be right for one width. See\n    // `useAdornmentWidth` for what went wrong with the fixed version.\n    const [leadingRef, leadingWidth] = useAdornmentWidth();\n    const [trailingRef, trailingWidth] = useAdornmentWidth();\n\n    // Only meaningful on a password field: a reveal on an already-visible input\n    // is a button that does nothing.\n    const canReveal = reveal === true && type === \"password\";\n    const [isRevealed, setRevealed] = useControllableState(revealed, false, onRevealedChange);\n    const shown = canReveal && isRevealed;\n    // The rendered type, NOT the declared one — `type` stays \"password\" so the\n    // display-mode masking below and any caller reading props are unaffected.\n    const renderedType = shown ? \"text\" : type;\n\n    const input = !showControl ? (\n      <DisplayValue\n        size={size}\n        interactive={interactive}\n        onActivate={enterEdit}\n        leading={leading ?? prefix}\n        trailing={trailing ?? suffix}\n      >\n        {type === \"password\" ? (props.value ? \"••••••\" : \"\") : (props.value as string | undefined)}\n      </DisplayValue>\n    ) : (\n      <InputWrapper\n        prefix={prefix}\n        suffix={suffix}\n        prefixPosition={prefixPosition}\n        suffixPosition={suffixPosition}\n        size={size}\n      >\n        <div data-react-fancy-input=\"\" className=\"relative flex items-center\">\n          {leading && (\n            <span\n              ref={leadingRef}\n              className=\"pointer-events-none absolute left-3 text-zinc-400 dark:text-zinc-500\"\n            >\n              {leading}\n            </span>\n          )}\n          <input\n            ref={ref}\n            id={inputId}\n            type={renderedType}\n            disabled={disabled}\n            required={required}\n            className={cn(\n              inputBaseClasses,\n              inputSizeClasses[size],\n              dirtyClasses(dirty),\n              errorClasses(error),\n              \"w-full\",\n              // The fixed classes are the PRE-MEASURE fallback only. Once the\n              // adornment is measured, the inline style below overrides them\n              // with its real width -- a fixed 36px is correct for one icon and\n              // wrong for anything wider, which is how `https://` came to\n              // render on top of the value.\n              leading && !leadingWidth && \"pl-9\",\n              (trailing || canReveal) && !trailingWidth && \"pr-9\",\n              className,\n            )}\n            style={{\n              // 12px clears `left-3`/`right-3`; 8px is the gap to the text.\n              ...(leadingWidth ? { paddingLeft: leadingWidth + 20 } : null),\n              ...(trailingWidth ? { paddingRight: trailingWidth + 20 } : null),\n              ...props.style,\n            }}\n            onChange={(e) => {\n              onChange?.(e);\n              onValueChange?.(e.target.value);\n            }}\n            {...props}\n            // Inline click-to-edit: focus on entering edit, return to the display\n            // (and run the host's onBlur) when focus leaves.\n            autoFocus={interactive || props.autoFocus}\n            onBlur={(e) => {\n              props.onBlur?.(e);\n              if (interactive) exitEdit();\n            }}\n          />\n          {canReveal ? (\n            <button\n              type=\"button\"\n              // type=\"button\" is load-bearing: the default is \"submit\", so a\n              // reveal inside a login form would submit it on every click.\n              id={`${inputId}-reveal`}\n              data-react-fancy-reveal=\"\"\n              onClick={() => setRevealed((v) => !v)}\n              disabled={disabled}\n              aria-controls={inputId}\n              aria-pressed={shown}\n              aria-label={shown ? hideLabel : revealLabel}\n              title={shown ? hideLabel : revealLabel}\n              // Not focusable by tab: the field and the submit button are the\n              // path through a login form, and a reveal in between is a stop\n              // most people do not want. Still reachable by click and by\n              // screen readers.\n              tabIndex={-1}\n              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\"\n            >\n              {shown ? <EyeOffIcon /> : <EyeIcon />}\n            </button>\n          ) : (\n            trailing && (\n              <span\n                ref={trailingRef}\n                className=\"pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500\"\n              >\n                {trailing}\n              </span>\n            )\n          )}\n        </div>\n      </InputWrapper>\n    );\n\n    if (label || error || description) {\n      return (\n        <Field\n          label={label}\n          labelHidden={labelHidden}\n          description={description}\n          error={error}\n          required={required}\n          htmlFor={inputId}\n          size={size}\n        >\n          {input}\n        </Field>\n      );\n    }\n\n    return input;\n  },\n);\n\nInput.displayName = \"Input\";\n\n/**\n * Inline SVGs rather than the Icon component: Input is the most-installed\n * primitive in the kit, and routing it through the icon registry would make\n * every consumer's password field depend on an icon set being configured.\n */\nfunction EyeIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <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\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  );\n}\n\nfunction EyeOffIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <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\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <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\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  );\n}\n"]}

package/dist/{chunk-HBCKKE24.cjs → chunk-LHNC42J3.cjs}

@@ -11,6 +11,24 @@ var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function useAdornmentWidth() {
+  const [width, setWidth] = react.useState(0);
+  const [node, setNode] = react.useState(null);
+  const ref = react.useCallback((n) => setNode(n), []);
+  react.useEffect(() => {
+    if (!node) {
+      setWidth(0);
+      return;
+    }
+    const read = () => setWidth(node.getBoundingClientRect().width);
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node]);
+  return [ref, width];
+}
 var Input = react.forwardRef(
   ({
     type = "text",
@@ -44,6 +62,8 @@ var Input = react.forwardRef(
     const inputId = id ?? autoId;
     const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
     const { showControl, interactive, enterEdit, exitEdit } = chunkKJ22KE56_cjs.useInlineEdit(resolvedMode, disabled);
+    const [leadingRef, leadingWidth] = useAdornmentWidth();
+    const [trailingRef, trailingWidth] = useAdornmentWidth();
     const canReveal = reveal === true && type === "password";
     const [isRevealed, setRevealed] = chunkOUOEQZHY_cjs.useControllableState(revealed, false, onRevealedChange);
     const shown = canReveal && isRevealed;
@@ -67,7 +87,14 @@ var Input = react.forwardRef(
         suffixPosition,
         size,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-input": "", className: "relative flex items-center", children: [
-          leading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 text-zinc-400 dark:text-zinc-500", children: leading }),
+          leading && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: leadingRef,
+              className: "pointer-events-none absolute left-3 text-zinc-400 dark:text-zinc-500",
+              children: leading
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -82,10 +109,21 @@ var Input = react.forwardRef(
                 chunkYLGTDBB2_cjs.dirtyClasses(dirty),
                 chunkYLGTDBB2_cjs.errorClasses(error),
                 "w-full",
-                leading && "pl-9",
-                (trailing || canReveal) && "pr-9",
+                // The fixed classes are the PRE-MEASURE fallback only. Once the
+                // adornment is measured, the inline style below overrides them
+                // with its real width -- a fixed 36px is correct for one icon and
+                // wrong for anything wider, which is how `https://` came to
+                // render on top of the value.
+                leading && !leadingWidth && "pl-9",
+                (trailing || canReveal) && !trailingWidth && "pr-9",
                 className
               ),
+              style: {
+                // 12px clears `left-3`/`right-3`; 8px is the gap to the text.
+                ...leadingWidth ? { paddingLeft: leadingWidth + 20 } : null,
+                ...trailingWidth ? { paddingRight: trailingWidth + 20 } : null,
+                ...props.style
+              },
               onChange: (e) => {
                 onChange?.(e);
                 onValueChange?.(e.target.value);
@@ -114,7 +152,14 @@ var Input = react.forwardRef(
               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 })
+          ) : trailing && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: trailingRef,
+              className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500",
+              children: trailing
+            }
+          )
         ] })
       }
     );
@@ -153,5 +198,5 @@ function EyeOffIcon() {
 }
 
 exports.Input = Input;
-//# sourceMappingURL=chunk-HBCKKE24.cjs.map
-//# sourceMappingURL=chunk-HBCKKE24.cjs.map
+//# sourceMappingURL=chunk-LHNC42J3.cjs.map
+//# sourceMappingURL=chunk-LHNC42J3.cjs.map

package/dist/chunk-LHNC42J3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-adornment-width.ts","../src/components/inputs/Input/Input.tsx"],"names":["useState","useCallback","useEffect","forwardRef","useId","useFieldMode","useInlineEdit","useControllableState","jsx","DisplayValue","InputWrapper","jsxs","cn","inputBaseClasses","inputSizeClasses","dirtyClasses","errorClasses","Field"],"mappings":"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","file":"chunk-LHNC42J3.cjs","sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Measure an inline adornment so the input can reserve exactly its width.\n *\n * ## Why this exists\n *\n * `leading` / `trailing` render ABSOLUTELY over the input, so they take no\n * space in flow and the input must be padded by hand to keep text clear of\n * them. That padding used to be a fixed `pl-9` / `pr-9` — 36px, sized for a\n * single icon. Any wider adornment ran straight under the value: `leading =\n * \"https://\"` is roughly 50px, so `https://` and `fancy.app` rendered on top of\n * one another.\n *\n * A fixed padding cannot be right for arbitrary content, and these props accept\n * arbitrary content — a currency code, a unit, a protocol, a short label. So\n * the width is measured rather than assumed.\n *\n * Returns `0` until measured (and on the server), which is the signal to keep\n * the old fixed padding as a fallback: an unmeasured render is then no worse\n * than it was before, rather than unpadded.\n *\n * `ResizeObserver` rather than a one-shot read, because the width changes after\n * first paint for reasons the first paint cannot see — a webfont swapping in,\n * the adornment's own content changing, a container query resizing the text.\n */\nexport function useAdornmentWidth(): [(node: HTMLElement | null) => void, number] {\n  const [width, setWidth] = useState(0);\n  const [node, setNode] = useState<HTMLElement | null>(null);\n\n  const ref = useCallback((n: HTMLElement | null) => setNode(n), []);\n\n  useEffect(() => {\n    if (!node) {\n      setWidth(0);\n\n      return;\n    }\n\n    const read = () => setWidth(node.getBoundingClientRect().width);\n    read();\n\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver(read);\n    observer.observe(node);\n\n    return () => observer.disconnect();\n  }, [node]);\n\n  return [ref, width];\n}\n","import { forwardRef, useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { useAdornmentWidth } from \"../../../hooks/use-adornment-width\";\nimport { Field } from \"../Field\";\nimport { InputWrapper } from \"../InputWrapper\";\nimport {\n  dirtyClasses,\n  errorClasses,\n  inputBaseClasses,\n  inputSizeClasses,\n} from \"../inputs.utils\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport type { InputProps } from \"./Input.types\";\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = \"text\",\n      size = \"md\",\n      dirty,\n      error,\n      label,\n      labelHidden,\n      description,\n      required,\n      disabled,\n      className,\n      id,\n      leading,\n      trailing,\n      prefix,\n      suffix,\n      prefixPosition,\n      suffixPosition,\n      mode,\n      onValueChange,\n      onChange,\n      reveal,\n      revealed,\n      onRevealedChange,\n      revealLabel = \"Show password\",\n      hideLabel = \"Hide password\",\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n\n    // Measured, not assumed: `leading`/`trailing` take arbitrary content, and a\n    // fixed padding can only ever be right for one width. See\n    // `useAdornmentWidth` for what went wrong with the fixed version.\n    const [leadingRef, leadingWidth] = useAdornmentWidth();\n    const [trailingRef, trailingWidth] = useAdornmentWidth();\n\n    // Only meaningful on a password field: a reveal on an already-visible input\n    // is a button that does nothing.\n    const canReveal = reveal === true && type === \"password\";\n    const [isRevealed, setRevealed] = useControllableState(revealed, false, onRevealedChange);\n    const shown = canReveal && isRevealed;\n    // The rendered type, NOT the declared one — `type` stays \"password\" so the\n    // display-mode masking below and any caller reading props are unaffected.\n    const renderedType = shown ? \"text\" : type;\n\n    const input = !showControl ? (\n      <DisplayValue\n        size={size}\n        interactive={interactive}\n        onActivate={enterEdit}\n        leading={leading ?? prefix}\n        trailing={trailing ?? suffix}\n      >\n        {type === \"password\" ? (props.value ? \"••••••\" : \"\") : (props.value as string | undefined)}\n      </DisplayValue>\n    ) : (\n      <InputWrapper\n        prefix={prefix}\n        suffix={suffix}\n        prefixPosition={prefixPosition}\n        suffixPosition={suffixPosition}\n        size={size}\n      >\n        <div data-react-fancy-input=\"\" className=\"relative flex items-center\">\n          {leading && (\n            <span\n              ref={leadingRef}\n              className=\"pointer-events-none absolute left-3 text-zinc-400 dark:text-zinc-500\"\n            >\n              {leading}\n            </span>\n          )}\n          <input\n            ref={ref}\n            id={inputId}\n            type={renderedType}\n            disabled={disabled}\n            required={required}\n            className={cn(\n              inputBaseClasses,\n              inputSizeClasses[size],\n              dirtyClasses(dirty),\n              errorClasses(error),\n              \"w-full\",\n              // The fixed classes are the PRE-MEASURE fallback only. Once the\n              // adornment is measured, the inline style below overrides them\n              // with its real width -- a fixed 36px is correct for one icon and\n              // wrong for anything wider, which is how `https://` came to\n              // render on top of the value.\n              leading && !leadingWidth && \"pl-9\",\n              (trailing || canReveal) && !trailingWidth && \"pr-9\",\n              className,\n            )}\n            style={{\n              // 12px clears `left-3`/`right-3`; 8px is the gap to the text.\n              ...(leadingWidth ? { paddingLeft: leadingWidth + 20 } : null),\n              ...(trailingWidth ? { paddingRight: trailingWidth + 20 } : null),\n              ...props.style,\n            }}\n            onChange={(e) => {\n              onChange?.(e);\n              onValueChange?.(e.target.value);\n            }}\n            {...props}\n            // Inline click-to-edit: focus on entering edit, return to the display\n            // (and run the host's onBlur) when focus leaves.\n            autoFocus={interactive || props.autoFocus}\n            onBlur={(e) => {\n              props.onBlur?.(e);\n              if (interactive) exitEdit();\n            }}\n          />\n          {canReveal ? (\n            <button\n              type=\"button\"\n              // type=\"button\" is load-bearing: the default is \"submit\", so a\n              // reveal inside a login form would submit it on every click.\n              id={`${inputId}-reveal`}\n              data-react-fancy-reveal=\"\"\n              onClick={() => setRevealed((v) => !v)}\n              disabled={disabled}\n              aria-controls={inputId}\n              aria-pressed={shown}\n              aria-label={shown ? hideLabel : revealLabel}\n              title={shown ? hideLabel : revealLabel}\n              // Not focusable by tab: the field and the submit button are the\n              // path through a login form, and a reveal in between is a stop\n              // most people do not want. Still reachable by click and by\n              // screen readers.\n              tabIndex={-1}\n              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\"\n            >\n              {shown ? <EyeOffIcon /> : <EyeIcon />}\n            </button>\n          ) : (\n            trailing && (\n              <span\n                ref={trailingRef}\n                className=\"pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500\"\n              >\n                {trailing}\n              </span>\n            )\n          )}\n        </div>\n      </InputWrapper>\n    );\n\n    if (label || error || description) {\n      return (\n        <Field\n          label={label}\n          labelHidden={labelHidden}\n          description={description}\n          error={error}\n          required={required}\n          htmlFor={inputId}\n          size={size}\n        >\n          {input}\n        </Field>\n      );\n    }\n\n    return input;\n  },\n);\n\nInput.displayName = \"Input\";\n\n/**\n * Inline SVGs rather than the Icon component: Input is the most-installed\n * primitive in the kit, and routing it through the icon registry would make\n * every consumer's password field depend on an icon set being configured.\n */\nfunction EyeIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <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\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  );\n}\n\nfunction EyeOffIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <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\" />\n      <path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" />\n      <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\" />\n      <path d=\"m2 2 20 20\" />\n    </svg>\n  );\n}\n"]}

package/dist/{chunk-IUWUXCCB.js → chunk-ZDVVE4OV.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-QJKWBU3I.js';
 import { DatePicker } from './chunk-L2FPIFMN.js';
-import { Input } from './chunk-JAAJJJKI.js';
+import { Input } from './chunk-L5KKMJ2Q.js';
 import { Select } from './chunk-ZH3SPBVB.js';
 import { Text } from './chunk-5RLP77KK.js';
 import { Textarea } from './chunk-DEFGT75G.js';
@@ -1337,5 +1337,5 @@ function buildItems({
 }
 
 export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches };
-//# sourceMappingURL=chunk-IUWUXCCB.js.map
-//# sourceMappingURL=chunk-IUWUXCCB.js.map
+//# sourceMappingURL=chunk-ZDVVE4OV.js.map
+//# sourceMappingURL=chunk-ZDVVE4OV.js.map