@particle-academy/react-fancy 6.8.0 → 6.10.0

package/dist/{chunk-XBFTO64U.cjs.map → chunk-EDIB6V6Y.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/inputs/NumberField/NumberField.tsx"],"names":["k","forwardRef","useControllableState","useState","useRef","useEffect","jsxs","jsx","Input"],"mappings":"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","file":"chunk-XBFTO64U.cjs","sourcesContent":["import { forwardRef, useEffect, useRef, useState, type KeyboardEvent } from \"react\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Input } from \"../Input\";\nimport type { NumberFieldProps } from \"./NumberField.types\";\n\n/**\n * Plain decimal notation only. `Number()` alone is not safe here: it reads \"0x10\"\n * as 16 and \"Infinity\" as a number, and those are wrong numbers to emit.\n */\nconst NUMBER = /^[+-]?(\\d+(\\.\\d*)?|\\.\\d+)([eE][+-]?\\d+)?$/;\nconst WHOLE = /^[+-]?\\d+$/;\n\n/** The number the text says, or `null` if it does not say one. */\nfunction parseNumber(text: string): number | null {\n  const trimmed = text.trim();\n  if (!NUMBER.test(trimmed)) return null;\n\n  const n = Number(trimmed);\n  if (!Number.isFinite(n)) return null;\n  // Past 2^53 a whole number rounds to a different one than was typed.\n  if (WHOLE.test(trimmed) && !Number.isSafeInteger(n)) return null;\n\n  return n === 0 ? 0 : n; // -0 is 0\n}\n\nfunction formatNumber(value: number | null): string {\n  return value === null ? \"\" : String(value);\n}\n\n/** Decimal places in a number, so stepping can round away floating-point dust. */\nfunction decimals(n: number): number {\n  const [mantissa, exponent] = String(n).split(\"e\");\n  const places = (mantissa.split(\".\")[1] ?? \"\").length - Number(exponent ?? 0);\n  return Math.min(Math.max(places, 0), 100);\n}\n\nfunction stepped(\n  current: number | null,\n  direction: 1 | -1,\n  min: number | undefined,\n  max: number | undefined,\n  step: number,\n): number {\n  const base = min ?? 0;\n  const places = Math.max(decimals(step), decimals(base));\n  const at = (k: number) => Number((base + k * step).toFixed(places));\n  const position = ((current ?? 0) - base) / step;\n  const nudge = 1e-9;\n\n  // The next grid line in that direction, so an off-grid value lands on the grid.\n  let k =\n    direction === 1\n      ? Math.floor(position + nudge) + 1\n      : Math.ceil(position - nudge) - 1;\n\n  if (max !== undefined && at(k) > max) k = Math.floor((max - base) / step + nudge);\n  if (min !== undefined && at(k) < min) k = 0;\n\n  return at(k);\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (\n    {\n      value,\n      defaultValue = null,\n      onValueChange,\n      min,\n      max,\n      step,\n      messages,\n      name,\n      form,\n      inputMode,\n      onKeyDown,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [held, setValue] = useControllableState<number | null>(\n      value,\n      defaultValue,\n      onValueChange,\n    );\n    // A host's NaN or Infinity has no text form, so it reads as no number.\n    const current = typeof held === \"number\" && Number.isFinite(held) ? held : null;\n\n    /*\n     * The text is held apart from the number because \"1.\" and \"-\" have no number\n     * that displays them. It only moves on its own when the number moved to\n     * something the text does not say: a change from outside, or a parent refusing\n     * this one.\n     */\n    const [text, setText] = useState(() => formatNumber(current));\n    if (parseNumber(text) !== current && text !== formatNumber(current)) {\n      setText(formatNumber(current));\n    }\n\n    const stepSize = typeof step === \"number\" && step > 0 ? step : 1;\n\n    const problem = (() => {\n      if (text.trim() !== \"\" && parseNumber(text) === null) {\n        return messages?.invalid ?? \"Enter a number.\";\n      }\n      if (current === null) return \"\";\n      if (min !== undefined && current < min) return messages?.min ?? `Must be at least ${min}.`;\n      if (max !== undefined && current > max) return messages?.max ?? `Must be at most ${max}.`;\n      if (typeof step === \"number\" && step > 0) {\n        const position = (current - (min ?? 0)) / step;\n        if (Math.abs(position - Math.round(position)) > 1e-9) {\n          return messages?.step ?? `Must be in steps of ${step}.`;\n        }\n      }\n      return \"\";\n    })();\n\n    // The text input has no min/max/step of its own, so a form learns of them here.\n    // Runs every render: click-to-edit mounts a fresh input.\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    useEffect(() => {\n      inputRef.current?.setCustomValidity(problem);\n    });\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented || rest.disabled || rest.readOnly) return;\n      if (e.key !== \"ArrowUp\" && e.key !== \"ArrowDown\") return;\n\n      e.preventDefault(); // or the caret jumps to the end of the text\n      const next = stepped(current, e.key === \"ArrowUp\" ? 1 : -1, min, max, stepSize);\n      setText(formatNumber(next));\n      if (next !== current) setValue(next);\n    };\n\n    return (\n      <div data-react-fancy-number-field=\"\">\n        <Input\n          aria-invalid={problem ? true : undefined}\n          aria-valuemax={max}\n          aria-valuemin={min}\n          aria-valuenow={current ?? undefined}\n          inputMode={\n            inputMode ??\n            // A numeric or decimal keypad has no minus sign on iOS, so those are\n            // only offered where a negative number cannot be valid.\n            (min !== undefined && min >= 0\n              ? typeof step === \"number\" && Number.isInteger(step)\n                ? \"numeric\"\n                : \"decimal\"\n              : \"text\")\n          }\n          role=\"spinbutton\"\n          {...rest}\n          ref={(el) => {\n            inputRef.current = el;\n            if (typeof ref === \"function\") ref(el);\n            else if (ref) ref.current = el;\n          }}\n          // Text, not `number`: a browser reports \"-\" and \"1e\" in a number input as\n          // an empty value, indistinguishable from blank, and turns the wheel into\n          // a value change on a focused field. Neither applies to a text input.\n          type=\"text\"\n          value={text}\n          onValueChange={(next) => {\n            setText(next);\n            const parsed = parseNumber(next);\n            if (parsed !== current) setValue(parsed);\n          }}\n          onKeyDown={handleKeyDown}\n          onBlur={(e) => {\n            setText(formatNumber(current));\n            onBlur?.(e);\n          }}\n        />\n        {/* What a native submit posts: the number, never the half-typed text. */}\n        {name ? (\n          <input\n            type=\"hidden\"\n            name={name}\n            form={form}\n            disabled={rest.disabled}\n            value={formatNumber(current)}\n          />\n        ) : null}\n      </div>\n    );\n  },\n);\n\nNumberField.displayName = \"NumberField\";\n"]}
+{"version":3,"sources":["../src/components/inputs/NumberField/NumberField.tsx"],"names":["k","forwardRef","useControllableState","useState","useRef","useEffect","jsxs","jsx","Input"],"mappings":"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","file":"chunk-EDIB6V6Y.cjs","sourcesContent":["import { forwardRef, useEffect, useRef, useState, type KeyboardEvent } from \"react\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Input } from \"../Input\";\nimport type { NumberFieldProps } from \"./NumberField.types\";\n\n/**\n * Plain decimal notation only. `Number()` alone is not safe here: it reads \"0x10\"\n * as 16 and \"Infinity\" as a number, and those are wrong numbers to emit.\n */\nconst NUMBER = /^[+-]?(\\d+(\\.\\d*)?|\\.\\d+)([eE][+-]?\\d+)?$/;\nconst WHOLE = /^[+-]?\\d+$/;\n\n/** The number the text says, or `null` if it does not say one. */\nfunction parseNumber(text: string): number | null {\n  const trimmed = text.trim();\n  if (!NUMBER.test(trimmed)) return null;\n\n  const n = Number(trimmed);\n  if (!Number.isFinite(n)) return null;\n  // Past 2^53 a whole number rounds to a different one than was typed.\n  if (WHOLE.test(trimmed) && !Number.isSafeInteger(n)) return null;\n\n  return n === 0 ? 0 : n; // -0 is 0\n}\n\nfunction formatNumber(value: number | null): string {\n  return value === null ? \"\" : String(value);\n}\n\n/** Decimal places in a number, so stepping can round away floating-point dust. */\nfunction decimals(n: number): number {\n  const [mantissa, exponent] = String(n).split(\"e\");\n  const places = (mantissa.split(\".\")[1] ?? \"\").length - Number(exponent ?? 0);\n  return Math.min(Math.max(places, 0), 100);\n}\n\nfunction stepped(\n  current: number | null,\n  direction: 1 | -1,\n  min: number | undefined,\n  max: number | undefined,\n  step: number,\n): number {\n  const base = min ?? 0;\n  const places = Math.max(decimals(step), decimals(base));\n  const at = (k: number) => Number((base + k * step).toFixed(places));\n  const position = ((current ?? 0) - base) / step;\n  const nudge = 1e-9;\n\n  // The next grid line in that direction, so an off-grid value lands on the grid.\n  let k =\n    direction === 1\n      ? Math.floor(position + nudge) + 1\n      : Math.ceil(position - nudge) - 1;\n\n  if (max !== undefined && at(k) > max) k = Math.floor((max - base) / step + nudge);\n  if (min !== undefined && at(k) < min) k = 0;\n\n  return at(k);\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (\n    {\n      value,\n      defaultValue = null,\n      onValueChange,\n      min,\n      max,\n      step,\n      messages,\n      name,\n      form,\n      inputMode,\n      onKeyDown,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [held, setValue] = useControllableState<number | null>(\n      value,\n      defaultValue,\n      onValueChange,\n    );\n    // A host's NaN or Infinity has no text form, so it reads as no number.\n    const current = typeof held === \"number\" && Number.isFinite(held) ? held : null;\n\n    /*\n     * The text is held apart from the number because \"1.\" and \"-\" have no number\n     * that displays them. It only moves on its own when the number moved to\n     * something the text does not say: a change from outside, or a parent refusing\n     * this one.\n     */\n    const [text, setText] = useState(() => formatNumber(current));\n    if (parseNumber(text) !== current && text !== formatNumber(current)) {\n      setText(formatNumber(current));\n    }\n\n    const stepSize = typeof step === \"number\" && step > 0 ? step : 1;\n\n    const problem = (() => {\n      if (text.trim() !== \"\" && parseNumber(text) === null) {\n        return messages?.invalid ?? \"Enter a number.\";\n      }\n      if (current === null) return \"\";\n      if (min !== undefined && current < min) return messages?.min ?? `Must be at least ${min}.`;\n      if (max !== undefined && current > max) return messages?.max ?? `Must be at most ${max}.`;\n      if (typeof step === \"number\" && step > 0) {\n        const position = (current - (min ?? 0)) / step;\n        if (Math.abs(position - Math.round(position)) > 1e-9) {\n          return messages?.step ?? `Must be in steps of ${step}.`;\n        }\n      }\n      return \"\";\n    })();\n\n    // The text input has no min/max/step of its own, so a form learns of them here.\n    // Runs every render: click-to-edit mounts a fresh input.\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    useEffect(() => {\n      inputRef.current?.setCustomValidity(problem);\n    });\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented || rest.disabled || rest.readOnly) return;\n      if (e.key !== \"ArrowUp\" && e.key !== \"ArrowDown\") return;\n\n      e.preventDefault(); // or the caret jumps to the end of the text\n      const next = stepped(current, e.key === \"ArrowUp\" ? 1 : -1, min, max, stepSize);\n      setText(formatNumber(next));\n      if (next !== current) setValue(next);\n    };\n\n    return (\n      <div data-react-fancy-number-field=\"\">\n        <Input\n          aria-invalid={problem ? true : undefined}\n          aria-valuemax={max}\n          aria-valuemin={min}\n          aria-valuenow={current ?? undefined}\n          inputMode={\n            inputMode ??\n            // A numeric or decimal keypad has no minus sign on iOS, so those are\n            // only offered where a negative number cannot be valid.\n            (min !== undefined && min >= 0\n              ? typeof step === \"number\" && Number.isInteger(step)\n                ? \"numeric\"\n                : \"decimal\"\n              : \"text\")\n          }\n          role=\"spinbutton\"\n          {...rest}\n          ref={(el) => {\n            inputRef.current = el;\n            if (typeof ref === \"function\") ref(el);\n            else if (ref) ref.current = el;\n          }}\n          // Text, not `number`: a browser reports \"-\" and \"1e\" in a number input as\n          // an empty value, indistinguishable from blank, and turns the wheel into\n          // a value change on a focused field. Neither applies to a text input.\n          type=\"text\"\n          value={text}\n          onValueChange={(next) => {\n            setText(next);\n            const parsed = parseNumber(next);\n            if (parsed !== current) setValue(parsed);\n          }}\n          onKeyDown={handleKeyDown}\n          onBlur={(e) => {\n            setText(formatNumber(current));\n            onBlur?.(e);\n          }}\n        />\n        {/* What a native submit posts: the number, never the half-typed text. */}\n        {name ? (\n          <input\n            type=\"hidden\"\n            name={name}\n            form={form}\n            disabled={rest.disabled}\n            value={formatNumber(current)}\n          />\n        ) : null}\n      </div>\n    );\n  },\n);\n\nNumberField.displayName = \"NumberField\";\n"]}

package/dist/{chunk-KXYMMNNV.js → chunk-EDIX6EXQ.js}

@@ -2,18 +2,18 @@ import { cn } from './chunk-MMW2JGKZ.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 var insidePaddingLeft = {
-  xs: "[&_input]:pl-7 [&_select]:pl-7 [&_textarea]:pl-7",
-  sm: "[&_input]:pl-8 [&_select]:pl-8 [&_textarea]:pl-8",
-  md: "[&_input]:pl-9 [&_select]:pl-9 [&_textarea]:pl-9",
-  lg: "[&_input]:pl-10 [&_select]:pl-10 [&_textarea]:pl-10",
-  xl: "[&_input]:pl-11 [&_select]:pl-11 [&_textarea]:pl-11"
+  xs: "[&_input]:ps-7 [&_select]:ps-7 [&_textarea]:ps-7",
+  sm: "[&_input]:ps-8 [&_select]:ps-8 [&_textarea]:ps-8",
+  md: "[&_input]:ps-9 [&_select]:ps-9 [&_textarea]:ps-9",
+  lg: "[&_input]:ps-10 [&_select]:ps-10 [&_textarea]:ps-10",
+  xl: "[&_input]:ps-11 [&_select]:ps-11 [&_textarea]:ps-11"
 };
 var insidePaddingRight = {
-  xs: "[&_input]:pr-7 [&_select]:pr-7 [&_textarea]:pr-7",
-  sm: "[&_input]:pr-8 [&_select]:pr-8 [&_textarea]:pr-8",
-  md: "[&_input]:pr-9 [&_select]:pr-9 [&_textarea]:pr-9",
-  lg: "[&_input]:pr-10 [&_select]:pr-10 [&_textarea]:pr-10",
-  xl: "[&_input]:pr-11 [&_select]:pr-11 [&_textarea]:pr-11"
+  xs: "[&_input]:pe-7 [&_select]:pe-7 [&_textarea]:pe-7",
+  sm: "[&_input]:pe-8 [&_select]:pe-8 [&_textarea]:pe-8",
+  md: "[&_input]:pe-9 [&_select]:pe-9 [&_textarea]:pe-9",
+  lg: "[&_input]:pe-10 [&_select]:pe-10 [&_textarea]:pe-10",
+  xl: "[&_input]:pe-11 [&_select]:pe-11 [&_textarea]:pe-11"
 };
 var affixOutsideClasses = "inline-flex items-center border border-[color:var(--fancy-border-strong,var(--color-zinc-300))] bg-zinc-50 px-3 text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))] dark:bg-zinc-800 dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]";
 function InputWrapper({
@@ -34,7 +34,7 @@ function InputWrapper({
   }
   if (hasOutside) {
     return /* @__PURE__ */ jsxs("div", { "data-react-fancy-input-wrapper": "", className: "flex", children: [
-      hasOutsidePrefix && /* @__PURE__ */ jsx("span", { className: cn(affixOutsideClasses, "rounded-l-lg border-r-0"), children: prefix }),
+      hasOutsidePrefix && /* @__PURE__ */ jsx("span", { className: cn(affixOutsideClasses, "rounded-s-lg border-e-0"), children: prefix }),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -43,29 +43,29 @@ function InputWrapper({
             hasInsidePrefix && "relative"
           ),
           children: [
-            hasInsidePrefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: prefix }),
+            hasInsidePrefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute start-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: prefix }),
             /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
                   "w-full [&>*]:w-full",
-                  hasOutsidePrefix && !hasOutsideSuffix && "[&_input]:rounded-l-none [&_select]:rounded-l-none [&_textarea]:rounded-l-none",
-                  !hasOutsidePrefix && hasOutsideSuffix && "[&_input]:rounded-r-none [&_select]:rounded-r-none [&_textarea]:rounded-r-none",
+                  hasOutsidePrefix && !hasOutsideSuffix && "[&_input]:rounded-s-none [&_select]:rounded-s-none [&_textarea]:rounded-s-none",
+                  !hasOutsidePrefix && hasOutsideSuffix && "[&_input]:rounded-e-none [&_select]:rounded-e-none [&_textarea]:rounded-e-none",
                   hasOutsidePrefix && hasOutsideSuffix && "[&_input]:rounded-none [&_select]:rounded-none [&_textarea]:rounded-none",
                   hasInsidePrefix && insidePaddingLeft[size]
                 ),
                 children
               }
             ),
-            hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: suffix })
+            hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute end-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: suffix })
           ]
         }
       ),
-      hasOutsideSuffix && /* @__PURE__ */ jsx("span", { className: cn(affixOutsideClasses, "rounded-r-lg border-l-0"), children: suffix })
+      hasOutsideSuffix && /* @__PURE__ */ jsx("span", { className: cn(affixOutsideClasses, "rounded-e-lg border-s-0"), children: suffix })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { "data-react-fancy-input-wrapper": "", className: "relative flex items-center", children: [
-    hasInsidePrefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: prefix }),
+    hasInsidePrefix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute start-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: prefix }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -77,10 +77,10 @@ function InputWrapper({
         children
       }
     ),
-    hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: suffix })
+    hasInsideSuffix && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute end-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]", children: suffix })
   ] });
 }
 
 export { InputWrapper };
-//# sourceMappingURL=chunk-KXYMMNNV.js.map
-//# sourceMappingURL=chunk-KXYMMNNV.js.map
+//# sourceMappingURL=chunk-EDIX6EXQ.js.map
+//# sourceMappingURL=chunk-EDIX6EXQ.js.map

package/dist/{chunk-KXYMMNNV.js.map → chunk-EDIX6EXQ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/inputs/InputWrapper.tsx"],"names":[],"mappings":"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","file":"chunk-KXYMMNNV.js","sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AffixPosition } from \"./inputs.types\";\nimport type { Size } from \"../../utils/types\";\n\ninterface InputWrapperProps {\n  children: ReactNode;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  prefixPosition?: AffixPosition;\n  suffixPosition?: AffixPosition;\n  size?: Size;\n  /** Extra padding className to apply to the input when affixes are \"inside\" */\n  insidePrefixPadding?: string;\n  insideSuffixPadding?: string;\n}\n\n// NOTE: these must be COMPLETE, static class strings. Tailwind only detects\n// utilities it can see verbatim in the source — building the arbitrary variant\n// at runtime (e.g. `[&_input]:${\"pl-9\"}`) means `[&_input]:pl-9` is never\n// emitted to CSS, so the inside affix gets no padding and overlaps the text\n// (issue #6). Keep input/select/textarea spelled out here.\nconst insidePaddingLeft: Record<Size, string> = {\n  xs: \"[&_input]:pl-7 [&_select]:pl-7 [&_textarea]:pl-7\",\n  sm: \"[&_input]:pl-8 [&_select]:pl-8 [&_textarea]:pl-8\",\n  md: \"[&_input]:pl-9 [&_select]:pl-9 [&_textarea]:pl-9\",\n  lg: \"[&_input]:pl-10 [&_select]:pl-10 [&_textarea]:pl-10\",\n  xl: \"[&_input]:pl-11 [&_select]:pl-11 [&_textarea]:pl-11\",\n};\n\nconst insidePaddingRight: Record<Size, string> = {\n  xs: \"[&_input]:pr-7 [&_select]:pr-7 [&_textarea]:pr-7\",\n  sm: \"[&_input]:pr-8 [&_select]:pr-8 [&_textarea]:pr-8\",\n  md: \"[&_input]:pr-9 [&_select]:pr-9 [&_textarea]:pr-9\",\n  lg: \"[&_input]:pr-10 [&_select]:pr-10 [&_textarea]:pr-10\",\n  xl: \"[&_input]:pr-11 [&_select]:pr-11 [&_textarea]:pr-11\",\n};\n\nconst affixOutsideClasses =\n  \"inline-flex items-center border border-[color:var(--fancy-border-strong,var(--color-zinc-300))] bg-zinc-50 px-3 text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))] dark:bg-zinc-800 dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\";\n\nexport function InputWrapper({\n  children,\n  prefix,\n  suffix,\n  prefixPosition = \"inside\",\n  suffixPosition = \"inside\",\n  size = \"md\",\n}: InputWrapperProps) {\n  const hasInsidePrefix = prefix && prefixPosition === \"inside\";\n  const hasInsideSuffix = suffix && suffixPosition === \"inside\";\n  const hasOutsidePrefix = prefix && prefixPosition === \"outside\";\n  const hasOutsideSuffix = suffix && suffixPosition === \"outside\";\n  const hasOutside = hasOutsidePrefix || hasOutsideSuffix;\n\n  if (!prefix && !suffix) {\n    return <>{children}</>;\n  }\n\n  if (hasOutside) {\n    return (\n      <div data-react-fancy-input-wrapper=\"\" className=\"flex\">\n        {hasOutsidePrefix && (\n          <span className={cn(affixOutsideClasses, \"rounded-l-lg border-r-0\")}>\n            {prefix}\n          </span>\n        )}\n        <div\n          className={cn(\n            \"relative flex flex-1 items-center\",\n            hasInsidePrefix && \"relative\",\n          )}\n        >\n          {hasInsidePrefix && (\n            <span className=\"pointer-events-none absolute left-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n              {prefix}\n            </span>\n          )}\n          <div\n            className={cn(\n              \"w-full [&>*]:w-full\",\n              hasOutsidePrefix && !hasOutsideSuffix && \"[&_input]:rounded-l-none [&_select]:rounded-l-none [&_textarea]:rounded-l-none\",\n              !hasOutsidePrefix && hasOutsideSuffix && \"[&_input]:rounded-r-none [&_select]:rounded-r-none [&_textarea]:rounded-r-none\",\n              hasOutsidePrefix && hasOutsideSuffix && \"[&_input]:rounded-none [&_select]:rounded-none [&_textarea]:rounded-none\",\n              hasInsidePrefix && insidePaddingLeft[size],\n            )}\n          >\n            {children}\n          </div>\n          {hasInsideSuffix && (\n            <span className=\"pointer-events-none absolute right-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n              {suffix}\n            </span>\n          )}\n        </div>\n        {hasOutsideSuffix && (\n          <span className={cn(affixOutsideClasses, \"rounded-r-lg border-l-0\")}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  // Both inside\n  return (\n    <div data-react-fancy-input-wrapper=\"\" className=\"relative flex items-center\">\n      {hasInsidePrefix && (\n        <span className=\"pointer-events-none absolute left-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n          {prefix}\n        </span>\n      )}\n      <div\n        className={cn(\n          \"w-full\",\n          hasInsidePrefix && insidePaddingLeft[size],\n          hasInsideSuffix && insidePaddingRight[size],\n        )}\n      >\n        {children}\n      </div>\n      {hasInsideSuffix && (\n        <span className=\"pointer-events-none absolute right-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n          {suffix}\n        </span>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/inputs/InputWrapper.tsx"],"names":[],"mappings":"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","file":"chunk-EDIX6EXQ.js","sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AffixPosition } from \"./inputs.types\";\nimport type { Size } from \"../../utils/types\";\n\ninterface InputWrapperProps {\n  children: ReactNode;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  prefixPosition?: AffixPosition;\n  suffixPosition?: AffixPosition;\n  size?: Size;\n  /** Extra padding className to apply to the input when affixes are \"inside\" */\n  insidePrefixPadding?: string;\n  insideSuffixPadding?: string;\n}\n\n// NOTE: these must be COMPLETE, static class strings. Tailwind only detects\n// utilities it can see verbatim in the source — building the arbitrary variant\n// at runtime (e.g. `[&_input]:${\"pl-9\"}`) means `[&_input]:ps-9` is never\n// emitted to CSS, so the inside affix gets no padding and overlaps the text\n// (issue #6). Keep input/select/textarea spelled out here.\nconst insidePaddingLeft: Record<Size, string> = {\n  xs: \"[&_input]:ps-7 [&_select]:ps-7 [&_textarea]:ps-7\",\n  sm: \"[&_input]:ps-8 [&_select]:ps-8 [&_textarea]:ps-8\",\n  md: \"[&_input]:ps-9 [&_select]:ps-9 [&_textarea]:ps-9\",\n  lg: \"[&_input]:ps-10 [&_select]:ps-10 [&_textarea]:ps-10\",\n  xl: \"[&_input]:ps-11 [&_select]:ps-11 [&_textarea]:ps-11\",\n};\n\nconst insidePaddingRight: Record<Size, string> = {\n  xs: \"[&_input]:pe-7 [&_select]:pe-7 [&_textarea]:pe-7\",\n  sm: \"[&_input]:pe-8 [&_select]:pe-8 [&_textarea]:pe-8\",\n  md: \"[&_input]:pe-9 [&_select]:pe-9 [&_textarea]:pe-9\",\n  lg: \"[&_input]:pe-10 [&_select]:pe-10 [&_textarea]:pe-10\",\n  xl: \"[&_input]:pe-11 [&_select]:pe-11 [&_textarea]:pe-11\",\n};\n\nconst affixOutsideClasses =\n  \"inline-flex items-center border border-[color:var(--fancy-border-strong,var(--color-zinc-300))] bg-zinc-50 px-3 text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))] dark:bg-zinc-800 dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\";\n\nexport function InputWrapper({\n  children,\n  prefix,\n  suffix,\n  prefixPosition = \"inside\",\n  suffixPosition = \"inside\",\n  size = \"md\",\n}: InputWrapperProps) {\n  const hasInsidePrefix = prefix && prefixPosition === \"inside\";\n  const hasInsideSuffix = suffix && suffixPosition === \"inside\";\n  const hasOutsidePrefix = prefix && prefixPosition === \"outside\";\n  const hasOutsideSuffix = suffix && suffixPosition === \"outside\";\n  const hasOutside = hasOutsidePrefix || hasOutsideSuffix;\n\n  if (!prefix && !suffix) {\n    return <>{children}</>;\n  }\n\n  if (hasOutside) {\n    return (\n      <div data-react-fancy-input-wrapper=\"\" className=\"flex\">\n        {hasOutsidePrefix && (\n          <span className={cn(affixOutsideClasses, \"rounded-s-lg border-e-0\")}>\n            {prefix}\n          </span>\n        )}\n        <div\n          className={cn(\n            \"relative flex flex-1 items-center\",\n            hasInsidePrefix && \"relative\",\n          )}\n        >\n          {hasInsidePrefix && (\n            <span className=\"pointer-events-none absolute start-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n              {prefix}\n            </span>\n          )}\n          <div\n            className={cn(\n              \"w-full [&>*]:w-full\",\n              hasOutsidePrefix && !hasOutsideSuffix && \"[&_input]:rounded-s-none [&_select]:rounded-s-none [&_textarea]:rounded-s-none\",\n              !hasOutsidePrefix && hasOutsideSuffix && \"[&_input]:rounded-e-none [&_select]:rounded-e-none [&_textarea]:rounded-e-none\",\n              hasOutsidePrefix && hasOutsideSuffix && \"[&_input]:rounded-none [&_select]:rounded-none [&_textarea]:rounded-none\",\n              hasInsidePrefix && insidePaddingLeft[size],\n            )}\n          >\n            {children}\n          </div>\n          {hasInsideSuffix && (\n            <span className=\"pointer-events-none absolute end-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n              {suffix}\n            </span>\n          )}\n        </div>\n        {hasOutsideSuffix && (\n          <span className={cn(affixOutsideClasses, \"rounded-e-lg border-s-0\")}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  // Both inside\n  return (\n    <div data-react-fancy-input-wrapper=\"\" className=\"relative flex items-center\">\n      {hasInsidePrefix && (\n        <span className=\"pointer-events-none absolute start-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n          {prefix}\n        </span>\n      )}\n      <div\n        className={cn(\n          \"w-full\",\n          hasInsidePrefix && insidePaddingLeft[size],\n          hasInsideSuffix && insidePaddingRight[size],\n        )}\n      >\n        {children}\n      </div>\n      {hasInsideSuffix && (\n        <span className=\"pointer-events-none absolute end-3 z-10 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n          {suffix}\n        </span>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-HNJXBMHI.cjs → chunk-EEFU5BVM.cjs}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkMRZXTL46_cjs = require('./chunk-MRZXTL46.cjs');
-var chunkP53432AK_cjs = require('./chunk-P53432AK.cjs');
-var chunkQF7CD4JH_cjs = require('./chunk-QF7CD4JH.cjs');
-var chunkO3F6DYWR_cjs = require('./chunk-O3F6DYWR.cjs');
-var chunkKKYILQTG_cjs = require('./chunk-KKYILQTG.cjs');
+var chunkDFROB5TW_cjs = require('./chunk-DFROB5TW.cjs');
+var chunkUIBAIWUR_cjs = require('./chunk-UIBAIWUR.cjs');
+var chunkQ7XL37T3_cjs = require('./chunk-Q7XL37T3.cjs');
+var chunkXG6J5MOK_cjs = require('./chunk-XG6J5MOK.cjs');
+var chunkTBLKVTJC_cjs = require('./chunk-TBLKVTJC.cjs');
 var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
 var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
 var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
@@ -82,7 +82,7 @@ var Input = react.forwardRef(
     const pasting = pasteThreshold !== void 0 || pasteImages;
     const editorRef = react.useRef(null);
     const hiddenRef = react.useRef(null);
-    const paste = chunkKKYILQTG_cjs.useInlinePaste({
+    const paste = chunkTBLKVTJC_cjs.useInlinePaste({
       pasteThreshold,
       pasteImages,
       previewChars,
@@ -108,7 +108,7 @@ var Input = react.forwardRef(
     );
     const labelId = `${inputId}-label`;
     const input = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(
-      chunkP53432AK_cjs.DisplayValue,
+      chunkUIBAIWUR_cjs.DisplayValue,
       {
         size,
         interactive,
@@ -118,7 +118,7 @@ var Input = react.forwardRef(
         children: type === "password" ? props.value ? "\u2022\u2022\u2022\u2022\u2022\u2022" : "" : props.value
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
-      chunkMRZXTL46_cjs.InputWrapper,
+      chunkDFROB5TW_cjs.InputWrapper,
       {
         prefix,
         suffix,
@@ -130,13 +130,13 @@ var Input = react.forwardRef(
             "span",
             {
               ref: leadingRef,
-              className: "pointer-events-none absolute left-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]",
+              className: "pointer-events-none absolute start-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]",
               children: leading
             }
           ),
           pasting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-              chunkKKYILQTG_cjs.InlinePasteEditor,
+              chunkTBLKVTJC_cjs.InlinePasteEditor,
               {
                 ref: editorRef,
                 id: inputId,
@@ -154,20 +154,20 @@ var Input = react.forwardRef(
                 disabled: disabled === true,
                 ariaLabelledBy: label ? labelId : props["aria-labelledby"],
                 ariaInvalid: Boolean(error),
-                placeholderClassName: chunkZU5Q77OT_cjs.cn(pastePlaceholderClasses[size], leading ? "left-9" : void 0),
+                placeholderClassName: chunkZU5Q77OT_cjs.cn(pastePlaceholderClasses[size], leading ? "start-9" : void 0),
                 style: {
-                  ...leadingWidth ? { paddingLeft: leadingWidth + 20 } : null,
-                  ...trailingWidth ? { paddingRight: trailingWidth + 20 } : null
+                  ...leadingWidth ? { paddingInlineStart: leadingWidth + 20 } : null,
+                  ...trailingWidth ? { paddingInlineEnd: trailingWidth + 20 } : null
                 },
                 className: chunkZU5Q77OT_cjs.cn(
-                  chunkO3F6DYWR_cjs.inputBaseClasses,
-                  chunkO3F6DYWR_cjs.inputSizeClasses[size],
-                  chunkO3F6DYWR_cjs.dirtyClasses(dirty),
-                  chunkO3F6DYWR_cjs.errorClasses(error),
+                  chunkXG6J5MOK_cjs.inputBaseClasses,
+                  chunkXG6J5MOK_cjs.inputSizeClasses[size],
+                  chunkXG6J5MOK_cjs.dirtyClasses(dirty),
+                  chunkXG6J5MOK_cjs.errorClasses(error),
                   // One line, like the <input> it stands in for.
                   "min-h-0 max-h-none w-full overflow-x-auto overflow-y-hidden whitespace-nowrap break-normal",
-                  leading && !leadingWidth && "pl-9",
-                  trailing && !trailingWidth && "pr-9",
+                  leading && !leadingWidth && "ps-9",
+                  trailing && !trailingWidth && "pe-9",
                   className,
                   pasteClassNames?.input
                 )
@@ -188,7 +188,7 @@ var Input = react.forwardRef(
                 value: paste.expand(pasteValue)
               }
             ),
-            pasteImages && filesName && /* @__PURE__ */ jsxRuntime.jsx(chunkKKYILQTG_cjs.PastedFilesInput, { name: filesName, files: pastedFiles, form: props.form })
+            pasteImages && filesName && /* @__PURE__ */ jsxRuntime.jsx(chunkTBLKVTJC_cjs.PastedFilesInput, { name: filesName, files: pastedFiles, form: props.form })
           ] }) : /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -198,24 +198,25 @@ var Input = react.forwardRef(
               disabled,
               required,
               className: chunkZU5Q77OT_cjs.cn(
-                chunkO3F6DYWR_cjs.inputBaseClasses,
-                chunkO3F6DYWR_cjs.inputSizeClasses[size],
-                chunkO3F6DYWR_cjs.dirtyClasses(dirty),
-                chunkO3F6DYWR_cjs.errorClasses(error),
+                chunkXG6J5MOK_cjs.inputBaseClasses,
+                chunkXG6J5MOK_cjs.inputSizeClasses[size],
+                chunkXG6J5MOK_cjs.dirtyClasses(dirty),
+                chunkXG6J5MOK_cjs.errorClasses(error),
                 "w-full",
                 // 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",
+                leading && !leadingWidth && "ps-9",
+                (trailing || canReveal) && !trailingWidth && "pe-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,
+                // 12px clears `start-3`/`end-3`; 8px is the gap to the text. Logical,
+                // like the adornments, so both sides swap in RTL.
+                ...leadingWidth ? { paddingInlineStart: leadingWidth + 20 } : null,
+                ...trailingWidth ? { paddingInlineEnd: trailingWidth + 20 } : null,
                 ...props.style
               },
               onChange: (e) => {
@@ -243,14 +244,14 @@ var Input = react.forwardRef(
               "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-[color:var(--fancy-text-faint,var(--color-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-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))] dark:hover:text-zinc-300",
+              className: "absolute end-2 inline-flex items-center justify-center rounded p-1 text-[color:var(--fancy-text-faint,var(--color-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-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))] dark:hover:text-zinc-300",
               children: shown ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {})
             }
           ) : trailing && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               ref: trailingRef,
-              className: "pointer-events-none absolute right-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]",
+              className: "pointer-events-none absolute end-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]",
               children: trailing
             }
           )
@@ -259,7 +260,7 @@ var Input = react.forwardRef(
     );
     if (label || error || description) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        chunkQF7CD4JH_cjs.Field,
+        chunkQ7XL37T3_cjs.Field,
         {
           label,
           labelId: pasting ? labelId : void 0,
@@ -278,11 +279,11 @@ var Input = react.forwardRef(
 );
 Input.displayName = "Input";
 var pastePlaceholderClasses = {
-  xs: "left-2 top-1 text-xs",
-  sm: "left-2.5 top-1.5 text-sm",
-  md: "left-3 top-2 text-sm",
-  lg: "left-4 top-2.5 text-base",
-  xl: "left-5 top-3 text-lg"
+  xs: "start-2 top-1 text-xs",
+  sm: "start-2.5 top-1.5 text-sm",
+  md: "start-3 top-2 text-sm",
+  lg: "start-4 top-2.5 text-base",
+  xl: "start-5 top-3 text-lg"
 };
 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: [
@@ -300,5 +301,5 @@ function EyeOffIcon() {
 }
 
 exports.Input = Input;
-//# sourceMappingURL=chunk-HNJXBMHI.cjs.map
-//# sourceMappingURL=chunk-HNJXBMHI.cjs.map
+//# sourceMappingURL=chunk-EEFU5BVM.cjs.map
+//# sourceMappingURL=chunk-EEFU5BVM.cjs.map

package/dist/chunk-EEFU5BVM.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","useRef","useInlinePaste","useMemo","jsx","DisplayValue","InputWrapper","jsxs","Fragment","InlinePasteEditor","cn","inputBaseClasses","inputSizeClasses","dirtyClasses","errorClasses","PastedFilesInput","Field"],"mappings":"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","file":"chunk-EEFU5BVM.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` (now `ps-9` / `pe-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, useMemo, useRef } 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 {\n  InlinePasteEditor,\n  PastedFilesInput,\n  useInlinePaste,\n  type InlinePasteEditorHandle,\n} from \"../../PastePills\";\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      pasteThreshold,\n      pasteImages = false,\n      pasteFilesName,\n      previewChars = 20,\n      renderPastePreview,\n      pasteClassNames,\n      heldPastes,\n      onHeldPastesChange,\n      heldImages,\n      onHeldImagesChange,\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    /*\n     * Paste pills: the same core `Composer` and `PromptInput` use, so the three\n     * cannot disagree about what a pill holds or what a send carries. Hooks run\n     * whether or not it is on (Rules of Hooks); nothing is rendered unless asked.\n     */\n    const pasting = pasteThreshold !== undefined || pasteImages;\n    const editorRef = useRef<InlinePasteEditorHandle>(null);\n    const hiddenRef = useRef<HTMLInputElement | null>(null);\n    const paste = useInlinePaste({\n      pasteThreshold,\n      pasteImages,\n      previewChars,\n      renderPastePreview,\n      classNames: pasteClassNames,\n      disabled: disabled === true,\n      heldPastes,\n      onHeldPastesChange,\n      heldImages,\n      onHeldImagesChange,\n      editorRef,\n      blockText: false,\n    });\n    const [pasteValue, setPasteValue] = useControllableState<string>(\n      props.value === undefined ? undefined : String(props.value),\n      props.defaultValue === undefined ? \"\" : String(props.defaultValue),\n      onValueChange,\n    );\n    const filesName = pasteFilesName ?? (props.name ? `${props.name}_files[]` : undefined);\n    const pastedFiles = useMemo(\n      () => (pasteImages ? paste.imagesIn(pasteValue).map((i) => i.file) : []),\n      [pasteImages, paste, pasteValue],\n    );\n    const labelId = `${inputId}-label`;\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 start-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\"\n            >\n              {leading}\n            </span>\n          )}\n          {pasting ? (\n            <>\n              <div className=\"min-w-0 flex-1\">\n                <InlinePasteEditor\n                  ref={editorRef}\n                  id={inputId}\n                  value={pasteValue}\n                  known={paste.known}\n                  onChange={(next) => {\n                    setPasteValue(next);\n                    paste.prune(next);\n                  }}\n                  // Enter in a text field submits its form; keep that.\n                  onSubmit={() => hiddenRef.current?.form?.requestSubmit()}\n                  multiline={false}\n                  onPaste={paste.decidePaste}\n                  onHostsChange={paste.onHostsChange}\n                  placeholder={props.placeholder ?? \"\"}\n                  disabled={disabled === true}\n                  ariaLabelledBy={label ? labelId : props[\"aria-labelledby\"]}\n                  ariaInvalid={Boolean(error)}\n                  placeholderClassName={cn(pastePlaceholderClasses[size], leading ? \"start-9\" : undefined)}\n                  style={{\n                    ...(leadingWidth ? { paddingInlineStart: leadingWidth + 20 } : null),\n                    ...(trailingWidth ? { paddingInlineEnd: trailingWidth + 20 } : null),\n                  }}\n                  className={cn(\n                    inputBaseClasses,\n                    inputSizeClasses[size],\n                    dirtyClasses(dirty),\n                    errorClasses(error),\n                    // One line, like the <input> it stands in for.\n                    \"min-h-0 max-h-none w-full overflow-x-auto overflow-y-hidden whitespace-nowrap break-normal\",\n                    leading && !leadingWidth && \"ps-9\",\n                    trailing && !trailingWidth && \"pe-9\",\n                    className,\n                    pasteClassNames?.input,\n                  )}\n                />\n              </div>\n              {paste.portals}\n              {/* What a native submit posts: the value with every pill expanded. */}\n              <input\n                ref={(el) => {\n                  hiddenRef.current = el;\n                  if (typeof ref === \"function\") ref(el);\n                  else if (ref) ref.current = el;\n                }}\n                type=\"hidden\"\n                name={props.name}\n                form={props.form}\n                value={paste.expand(pasteValue)}\n              />\n              {pasteImages && filesName && (\n                <PastedFilesInput name={filesName} files={pastedFiles} form={props.form} />\n              )}\n            </>\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 && \"ps-9\",\n                (trailing || canReveal) && !trailingWidth && \"pe-9\",\n                className,\n              )}\n              style={{\n                // 12px clears `start-3`/`end-3`; 8px is the gap to the text. Logical,\n                // like the adornments, so both sides swap in RTL.\n                ...(leadingWidth ? { paddingInlineStart: leadingWidth + 20 } : null),\n                ...(trailingWidth ? { paddingInlineEnd: 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          )}\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 end-2 inline-flex items-center justify-center rounded p-1 text-[color:var(--fancy-text-faint,var(--color-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-[color:var(--fancy-text-faint-dark,var(--color-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 end-3 text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-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          labelId={pasting ? labelId : undefined}\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/** Where the placeholder sits over the paste editor, matching `inputSizeClasses`. */\nconst pastePlaceholderClasses = {\n  xs: \"start-2 top-1 text-xs\",\n  sm: \"start-2.5 top-1.5 text-sm\",\n  md: \"start-3 top-2 text-sm\",\n  lg: \"start-4 top-2.5 text-base\",\n  xl: \"start-5 top-3 text-lg\",\n} as const;\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-KOAMRCSC.cjs → chunk-ETUDUDSL.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
 var chunkI27K6NLX_cjs = require('./chunk-I27K6NLX.cjs');
-var chunkP53432AK_cjs = require('./chunk-P53432AK.cjs');
-var chunkQF7CD4JH_cjs = require('./chunk-QF7CD4JH.cjs');
-var chunkO3F6DYWR_cjs = require('./chunk-O3F6DYWR.cjs');
+var chunkUIBAIWUR_cjs = require('./chunk-UIBAIWUR.cjs');
+var chunkQ7XL37T3_cjs = require('./chunk-Q7XL37T3.cjs');
+var chunkXG6J5MOK_cjs = require('./chunk-XG6J5MOK.cjs');
+var chunk36IC3NDN_cjs = require('./chunk-36IC3NDN.cjs');
 var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
 var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
 var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
@@ -69,7 +70,7 @@ function MultiSwitch({
 }) {
   const reactId = react.useId();
   const labelId = label ? `${id ?? reactId}-label` : void 0;
-  const resolvedOptions = list.map(chunkO3F6DYWR_cjs.resolveOption);
+  const resolvedOptions = list.map(chunkXG6J5MOK_cjs.resolveOption);
   const fallback = defaultValue ?? resolvedOptions[0]?.value;
   const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
   const { showControl, interactive, enterEdit, exitEdit } = chunkKJ22KE56_cjs.useInlineEdit(resolvedMode, disabled);
@@ -93,9 +94,11 @@ function MultiSwitch({
     }
     const containerRect = container.getBoundingClientRect();
     const itemRect = activeItem.getBoundingClientRect();
+    const rtl = chunk36IC3NDN_cjs.isRtl(container);
     setIndicator({
-      left: itemRect.left - containerRect.left,
-      width: itemRect.width
+      left: rtl ? containerRect.right - itemRect.right : itemRect.left - containerRect.left,
+      width: itemRect.width,
+      rtl
     });
   }, [selectedIndex]);
   react.useEffect(() => {
@@ -111,7 +114,7 @@ function MultiSwitch({
     observer.observe(activeItem);
     return () => observer.disconnect();
   }, [updateIndicator, selectedIndex, showControl]);
-  const control = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(chunkP53432AK_cjs.DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.jsxs(
+  const control = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(chunkUIBAIWUR_cjs.DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ...rest,
@@ -138,7 +141,7 @@ function MultiSwitch({
             "data-react-fancy-multi-switch-thumb": "",
             "data-color": selectedColor,
             className: colorClasses ? `absolute top-0 bottom-0 rounded-lg ${colorClasses.thumb} transition-all duration-200 ease-out` : "absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out",
-            style: { left: indicator.left, width: indicator.width }
+            style: indicator.rtl ? { right: indicator.left, width: indicator.width } : { left: indicator.left, width: indicator.width }
           }
         ),
         resolvedOptions.map((option, index) => {
@@ -179,7 +182,7 @@ function MultiSwitch({
   );
   if (label || error || description) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkQF7CD4JH_cjs.Field,
+      chunkQ7XL37T3_cjs.Field,
       {
         label,
         labelHidden,
@@ -198,5 +201,5 @@ function MultiSwitch({
 MultiSwitch.displayName = "MultiSwitch";
 
 exports.MultiSwitch = MultiSwitch;
-//# sourceMappingURL=chunk-KOAMRCSC.cjs.map
-//# sourceMappingURL=chunk-KOAMRCSC.cjs.map
+//# sourceMappingURL=chunk-ETUDUDSL.cjs.map
+//# sourceMappingURL=chunk-ETUDUDSL.cjs.map

package/dist/chunk-ETUDUDSL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.colors.ts","../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":["useId","resolveOption","useFieldMode","useInlineEdit","useControllableState","useRef","useMemo","composeRefs","useState","useCallback","isRtl","useEffect","DisplayValue","jsxs","cn","jsx","Field"],"mappings":"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","file":"chunk-ETUDUDSL.cjs","sourcesContent":["// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Shades follow badgeSolid: 600 / dark 500 for\n// the thumb, with dark label text on the light hues (amber, yellow, lime).\nimport type { Color } from \"../../../utils/types\";\n\nexport type MultiSwitchColorClasses = {\n  /** The selected thumb's fill. */\n  thumb: string;\n  /** The selected option's label, readable on the thumb. */\n  text: string;\n  /** The container border while this option is selected. */\n  border: string;\n};\n\nexport const multiSwitchColorClasses: Record<Color, MultiSwitchColorClasses> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: { thumb: \"bg-brand\", text: \"text-brand-contrast\", border: \"border-brand\" },\n  slate: { thumb: \"bg-slate-600 dark:bg-slate-500\", text: \"text-white\", border: \"border-slate-500 dark:border-slate-400\" },\n  gray: { thumb: \"bg-gray-600 dark:bg-gray-500\", text: \"text-white\", border: \"border-gray-500 dark:border-gray-400\" },\n  zinc: { thumb: \"bg-zinc-600 dark:bg-zinc-500\", text: \"text-white\", border: \"border-zinc-500 dark:border-zinc-400\" },\n  neutral: { thumb: \"bg-neutral-600 dark:bg-neutral-500\", text: \"text-white\", border: \"border-neutral-500 dark:border-neutral-400\" },\n  stone: { thumb: \"bg-stone-600 dark:bg-stone-500\", text: \"text-white\", border: \"border-stone-500 dark:border-stone-400\" },\n  red: { thumb: \"bg-red-600 dark:bg-red-500\", text: \"text-white\", border: \"border-red-500 dark:border-red-400\" },\n  orange: { thumb: \"bg-orange-600 dark:bg-orange-500\", text: \"text-white\", border: \"border-orange-500 dark:border-orange-400\" },\n  amber: { thumb: \"bg-amber-400 dark:bg-amber-300\", text: \"text-amber-950\", border: \"border-amber-500 dark:border-amber-400\" },\n  yellow: { thumb: \"bg-yellow-400 dark:bg-yellow-300\", text: \"text-yellow-950\", border: \"border-yellow-500 dark:border-yellow-400\" },\n  lime: { thumb: \"bg-lime-400 dark:bg-lime-300\", text: \"text-lime-950\", border: \"border-lime-500 dark:border-lime-400\" },\n  green: { thumb: \"bg-green-600 dark:bg-green-500\", text: \"text-white\", border: \"border-green-500 dark:border-green-400\" },\n  emerald: { thumb: \"bg-emerald-600 dark:bg-emerald-500\", text: \"text-white\", border: \"border-emerald-500 dark:border-emerald-400\" },\n  teal: { thumb: \"bg-teal-600 dark:bg-teal-500\", text: \"text-white\", border: \"border-teal-500 dark:border-teal-400\" },\n  cyan: { thumb: \"bg-cyan-600 dark:bg-cyan-500\", text: \"text-white\", border: \"border-cyan-500 dark:border-cyan-400\" },\n  sky: { thumb: \"bg-sky-600 dark:bg-sky-500\", text: \"text-white\", border: \"border-sky-500 dark:border-sky-400\" },\n  blue: { thumb: \"bg-blue-600 dark:bg-blue-500\", text: \"text-white\", border: \"border-blue-500 dark:border-blue-400\" },\n  indigo: { thumb: \"bg-indigo-600 dark:bg-indigo-500\", text: \"text-white\", border: \"border-indigo-500 dark:border-indigo-400\" },\n  violet: { thumb: \"bg-violet-600 dark:bg-violet-500\", text: \"text-white\", border: \"border-violet-500 dark:border-violet-400\" },\n  purple: { thumb: \"bg-purple-600 dark:bg-purple-500\", text: \"text-white\", border: \"border-purple-500 dark:border-purple-400\" },\n  fuchsia: { thumb: \"bg-fuchsia-600 dark:bg-fuchsia-500\", text: \"text-white\", border: \"border-fuchsia-500 dark:border-fuchsia-400\" },\n  pink: { thumb: \"bg-pink-600 dark:bg-pink-500\", text: \"text-white\", border: \"border-pink-500 dark:border-pink-400\" },\n  rose: { thumb: \"bg-rose-600 dark:bg-rose-500\", text: \"text-white\", border: \"border-rose-500 dark:border-rose-400\" },\n};\n","import { useRef, useState, useEffect, useCallback, useId, useMemo, type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { composeRefs } from \"../../../utils/compose-refs\";\nimport { isRtl } from \"../../../utils/direction\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { resolveOption } from \"../inputs.utils\";\nimport type { Color, Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\nimport { multiSwitchColorClasses } from \"./MultiSwitch.colors\";\n\nconst BORDER_DEFAULT =\n  \"border-[color:var(--fancy-border-strong,var(--color-zinc-300))] dark:border-[color:var(--fancy-border-strong-dark,var(--color-zinc-700))]\";\n\nconst sizeClasses: Record<Size, string> = {\n  xs: \"px-2 py-1 text-xs\",\n  sm: \"px-2.5 py-1.5 text-sm\",\n  md: \"px-3 py-2 text-sm\",\n  lg: \"px-4 py-2.5 text-base\",\n  xl: \"px-5 py-3 text-lg\",\n};\n\nexport function MultiSwitch<V = string>({\n  size = \"md\",\n  dirty,\n  error,\n  label,\n  labelHidden,\n  description,\n  required,\n  disabled,\n  className,\n  id,\n  name,\n  list,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  linear,\n  mode,\n  ...rest\n}: MultiSwitchProps<V>) {\n  const reactId = useId();\n  // A `<label for>` cannot name a div[role=\"radiogroup\"], so the group points at\n  // the label instead. Needs an id the label and the group both agree on.\n  const labelId = label ? `${id ?? reactId}-label` : undefined;\n\n  // resolveOption hands an object option back as-is, so `color` survives it.\n  const resolvedOptions = list.map(resolveOption) as Array<\n    ReturnType<typeof resolveOption<V>> & { color?: Color }\n  >;\n  const fallback = defaultValue ?? resolvedOptions[0]?.value;\n  const resolvedMode = useFieldMode(mode);\n  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n  const [value, setValue] = useControllableState(controlledValue, fallback as V, onValueChange);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const externalRef = (rest as { ref?: Ref<HTMLDivElement> }).ref;\n  const containerSetRef = useMemo(() => composeRefs(externalRef, containerRef), [externalRef]);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [indicator, setIndicator] = useState<{ left: number; width: number; rtl?: boolean } | null>(null);\n\n  const selectedIndex = resolvedOptions.findIndex(\n    (o) => o.value === value,\n  );\n  const selectedColor = resolvedOptions[selectedIndex]?.color;\n  const colorClasses = selectedColor ? multiSwitchColorClasses[selectedColor] : undefined;\n\n  const updateIndicator = useCallback(() => {\n    const container = containerRef.current;\n    const activeItem = itemRefs.current[selectedIndex];\n    if (!container || !activeItem) {\n      setIndicator(null);\n      return;\n    }\n    const containerRect = container.getBoundingClientRect();\n    const itemRect = activeItem.getBoundingClientRect();\n    // Offset from the inline START edge. In RTL that is the right edge, and\n    // measuring from the left there would put the thumb a border-width off the\n    // item, since the container's border is on the other side.\n    const rtl = isRtl(container);\n    setIndicator({\n      left: rtl ? containerRect.right - itemRect.right : itemRect.left - containerRect.left,\n      width: itemRect.width,\n      rtl,\n    });\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    updateIndicator();\n  }, [updateIndicator]);\n\n  // The selected option can change size without the selection changing: a\n  // label carrying a live count (\"Changed 4\" -> \"Changed 12\"), a font loading\n  // late, the container reflowing. Watch the selected option and the container\n  // and re-measure. Without ResizeObserver (SSR, older jsdom) the thumb is\n  // measured on selection only, as it always was.\n  useEffect(() => {\n    if (typeof ResizeObserver === \"undefined\") return;\n    const container = containerRef.current;\n    const activeItem = itemRefs.current[selectedIndex];\n    if (!container || !activeItem) return;\n    const observer = new ResizeObserver(() => updateIndicator());\n    observer.observe(container);\n    observer.observe(activeItem);\n    return () => observer.disconnect();\n  }, [updateIndicator, selectedIndex, showControl]);\n\n  const control = !showControl ? (\n    <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n      {resolvedOptions.find((o) => o.value === value)?.label}\n    </DisplayValue>\n  ) : (\n    <div\n      {...rest}\n      // React 19 passes `ref` to a function component as a plain prop, so a\n      // caller's ref (Tooltip's anchor, or anyone's) arrives in `rest`. Spread\n      // after `ref={containerRef}` it REPLACED the ref the thumb is measured\n      // from, and the selected thumb never rendered. Feed both instead.\n      ref={containerSetRef}\n      data-react-fancy-multi-switch=\"\"\n      role=\"radiogroup\"\n      id={id}\n      aria-labelledby={labelId}\n      onBlur={(e) => {\n        if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n      }}\n      className={cn(\n        \"relative inline-flex rounded-lg border bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        colorClasses ? colorClasses.border : BORDER_DEFAULT,\n        dirty && \"ring-2 ring-amber-400/50\",\n        error && \"ring-2 ring-red-500/50\",\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className,\n      )}\n    >\n      {indicator && (\n        <span\n          data-react-fancy-multi-switch-thumb=\"\"\n          data-color={selectedColor}\n          className={\n            colorClasses\n              ? `absolute top-0 bottom-0 rounded-lg ${colorClasses.thumb} transition-all duration-200 ease-out`\n              : \"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\n          }\n          style={indicator.rtl ? { right: indicator.left, width: indicator.width } : { left: indicator.left, width: indicator.width }}\n        />\n      )}\n      {resolvedOptions.map((option, index) => {\n        const isSelected = option.value === value;\n        return (\n          <button\n            key={String(option.value)}\n            ref={(el) => { itemRefs.current[index] = el; }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            disabled={disabled || option.disabled}\n            autoFocus={interactive && (selectedIndex === -1 ? index === 0 : isSelected)}\n            onClick={() => {\n              if (linear) {\n                const nextIndex = (selectedIndex + 1) % resolvedOptions.length;\n                setValue(resolvedOptions[nextIndex].value as V);\n              } else {\n                setValue(option.value as V);\n              }\n            }}\n            className={cn(\n              \"relative z-10 font-medium transition-colors duration-200\",\n              sizeClasses[size],\n              isSelected\n                ? (colorClasses?.text ?? \"text-white\")\n                : \"text-[color:var(--fancy-text-subtle,var(--color-zinc-600))] hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-subtle-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n              (disabled || option.disabled) && \"cursor-not-allowed\",\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n      {name && <input type=\"hidden\" name={name} value={String(value)} />}\n    </div>\n  );\n\n  if (label || error || description) {\n    return (\n      <Field\n        label={label}\n        labelHidden={labelHidden}\n        labelId={labelId}\n        description={description}\n        error={error}\n        required={required}\n        htmlFor={id}\n        size={size}\n      >\n        {control}\n      </Field>\n    );\n  }\n\n  return control;\n}\n\nMultiSwitch.displayName = \"MultiSwitch\";\n"]}