@flanksource/clicky-ui 0.3.21 → 0.3.23

package/dist/components/InputField.cjs

@@ -14,6 +14,7 @@ const InputField = react.forwardRef(function InputField2({
   shortcutKey,
   hotkey,
   onShortcut,
+  invalid,
   className,
   inputClassName,
   shortcutClassName,
@@ -44,6 +45,13 @@ const InputField = react.forwardRef(function InputField2({
         "flex w-full gap-density-2 rounded-md border border-border bg-background px-density-2",
         "focus-within:ring-2 focus-within:ring-ring",
         as === "textarea" ? "min-h-control-h items-start py-density-1" : "h-control-h items-center",
+        // Same pair ComboboxControl uses, so an invalid text field and an
+        // invalid combobox read identically in the same form.
+        invalid && "border-destructive focus-within:ring-destructive",
+        // The border lives out here while `disabled` lands on the inner
+        // element, so the chrome can only see it through :has(). Without this
+        // a disabled field is indistinguishable from an editable one.
+        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
         className
       ),
       children: [
@@ -56,9 +64,11 @@ const InputField = react.forwardRef(function InputField2({
             onChange: (event) => onChange == null ? void 0 : onChange(event.target.value, event),
             className: utils.cn(
               "min-w-0 flex-1 resize-y border-none bg-transparent text-sm text-foreground outline-none",
-              "placeholder:text-muted-foreground",
+              "placeholder:text-placeholder",
+              "disabled:cursor-not-allowed",
               inputClassName
             ),
+            ...invalid ? { "aria-invalid": true } : {},
             ...rest
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -70,10 +80,12 @@ const InputField = react.forwardRef(function InputField2({
             onChange: (event) => onChange == null ? void 0 : onChange(event.target.value, event),
             className: utils.cn(
               "min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none",
-              "placeholder:text-muted-foreground",
+              "placeholder:text-placeholder",
+              "disabled:cursor-not-allowed",
               type === "search" && "[&::-webkit-search-cancel-button]:appearance-none",
               inputClassName
             ),
+            ...invalid ? { "aria-invalid": true } : {},
             ...rest
           }
         ),

package/dist/components/InputField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.cjs","sources":["../../src/components/InputField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\n\ntype NativeInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"prefix\" | \"size\" | \"type\" | \"value\"\n>;\n\ntype NativeTextareaProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"onChange\" | \"prefix\" | \"size\" | \"value\"\n>;\n\ntype InputFieldSharedProps<\n  TElement extends HTMLInputElement | HTMLTextAreaElement,\n> = {\n  /** Controlled input value. */\n  value?: string | undefined;\n  /** Native input type. Ignored when `as=\"textarea\"`. */\n  type?: InputHTMLAttributes<HTMLInputElement>[\"type\"] | undefined;\n  /** Called with the next text value. */\n  onChange?:\n    | ((value: string, event: ChangeEvent<TElement>) => void)\n    | undefined;\n  /** Leading adornment rendered before the input. */\n  prefix?: ReactNode | undefined;\n  /** Trailing adornment rendered after the input and before the shortcut. */\n  suffix?: ReactNode | undefined;\n  /** Keyboard-shortcut hint rendered as a trailing `<kbd>`. Pass `null` to hide it. */\n  shortcut?: string | null | undefined;\n  /** Override the key matched for cmd/ctrl shortcuts. Defaults to the shortcut's last character. */\n  shortcutKey?: string | undefined;\n  /**\n   * Shortcut to bind, in `useHotkey` combo syntax (`\"mod+k\"`, `\"mod+shift+p\"`),\n   * where `mod` is ⌘ on macOS and Ctrl elsewhere. Preferred over `shortcutKey`:\n   * it matches modifiers exactly, whereas a key derived from the `shortcut`\n   * badge cannot express them.\n   */\n  hotkey?: string | undefined;\n  /** Called before the field is focused when the shortcut is pressed. */\n  onShortcut?: (() => void) | undefined;\n  /** Classes applied to the outer control. */\n  className?: string | undefined;\n  /** Classes applied to the native input. */\n  inputClassName?: string | undefined;\n  /** Classes applied to the shortcut badge. */\n  shortcutClassName?: string | undefined;\n};\n\nexport type InputFieldInputProps = NativeInputProps &\n  InputFieldSharedProps<HTMLInputElement> & {\n    as?: \"input\" | undefined;\n  };\n\nexport type InputFieldTextareaProps = NativeTextareaProps &\n  InputFieldSharedProps<HTMLTextAreaElement> & {\n    as: \"textarea\";\n  };\n\nexport type InputFieldProps = InputFieldInputProps | InputFieldTextareaProps;\n\n/**\n * Shared single-line input chrome with optional prefix/suffix adornments and a\n * global cmd/ctrl keyboard shortcut. Consumers keep native input semantics while\n * sharing the clicky border, focus ring, and density tokens.\n */\nexport const InputField = forwardRef<\n  HTMLInputElement | HTMLTextAreaElement,\n  InputFieldProps\n>(function InputField(\n  {\n    as = \"input\",\n    value,\n    onChange,\n    prefix,\n    suffix,\n    shortcut,\n    shortcutKey,\n    hotkey,\n    onShortcut,\n    className,\n    inputClassName,\n    shortcutClassName,\n    type = \"text\",\n    ...rest\n  },\n  forwardedRef,\n) {\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n  useImperativeHandle(\n    forwardedRef,\n    () => inputRef.current as HTMLInputElement | HTMLTextAreaElement,\n    [],\n  );\n\n  // `hotkey` is the precise form; `shortcut`/`shortcutKey` keep working by\n  // deriving a cmd/ctrl combo from the badge's last character.\n  const effectiveShortcutKey =\n    shortcutKey ?? (shortcut ? shortcut.slice(-1).toLowerCase() : undefined);\n  const combo = hotkey ?? (effectiveShortcutKey ? `mod+${effectiveShortcutKey}` : null);\n\n  useHotkey(\n    combo,\n    () => {\n      onShortcut?.();\n      inputRef.current?.focus();\n    },\n    { enabled: Boolean(onShortcut) },\n  );\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full gap-density-2 rounded-md border border-border bg-background px-density-2\",\n        \"focus-within:ring-2 focus-within:ring-ring\",\n        as === \"textarea\"\n          ? \"min-h-control-h items-start py-density-1\"\n          : \"h-control-h items-center\",\n        className,\n      )}\n    >\n      {prefix && (\n        <span className=\"inline-flex shrink-0 items-center\">{prefix}</span>\n      )}\n      {as === \"textarea\" ? (\n        <textarea\n          ref={inputRef as Ref<HTMLTextAreaElement>}\n          value={value}\n          onChange={(event) =>\n            (\n              onChange as\n                | ((\n                    value: string,\n                    event: ChangeEvent<HTMLTextAreaElement>,\n                  ) => void)\n                | undefined\n            )?.(event.target.value, event)\n          }\n          className={cn(\n            \"min-w-0 flex-1 resize-y border-none bg-transparent text-sm text-foreground outline-none\",\n            \"placeholder:text-muted-foreground\",\n            inputClassName,\n          )}\n          {...(rest as NativeTextareaProps)}\n        />\n      ) : (\n        <input\n          ref={inputRef as Ref<HTMLInputElement>}\n          type={type}\n          value={value}\n          onChange={(event) =>\n            (\n              onChange as\n                | ((\n                    value: string,\n                    event: ChangeEvent<HTMLInputElement>,\n                  ) => void)\n                | undefined\n            )?.(event.target.value, event)\n          }\n          className={cn(\n            \"min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none\",\n            \"placeholder:text-muted-foreground\",\n            type === \"search\" &&\n              \"[&::-webkit-search-cancel-button]:appearance-none\",\n            inputClassName,\n          )}\n          {...(rest as NativeInputProps)}\n        />\n      )}\n      {suffix && (\n        <span className=\"inline-flex shrink-0 items-center\">{suffix}</span>\n      )}\n      {shortcut && (\n        <kbd\n          className={cn(\n            \"shrink-0 rounded border border-border px-1 font-mono text-[10px] text-muted-foreground\",\n            shortcutClassName,\n          )}\n        >\n          {shortcut}\n        </kbd>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","InputField","useRef","useImperativeHandle","useHotkey","jsxs","cn","jsx"],"mappings":";;;;;;AA4EO,MAAM,aAAaA,MAAAA,WAGxB,SAASC,YACT;AAAA,EACE,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GACA,cACA;AACA,QAAM,WAAWC,MAAAA,OAAsD,IAAI;AAC3EC,QAAAA;AAAAA,IACE;AAAA,IACA,MAAM,SAAS;AAAA,IACf,CAAA;AAAA,EAAC;AAKH,QAAM,uBACJ,gBAAgB,WAAW,SAAS,MAAM,EAAE,EAAE,gBAAgB;AAChE,QAAM,QAAQ,WAAW,uBAAuB,OAAO,oBAAoB,KAAK;AAEhFC,YAAAA;AAAAA,IACE;AAAA,IACA,MAAM;;AACJ;AACA,qBAAS,YAAT,mBAAkB;AAAA,IACpB;AAAA,IACA,EAAE,SAAS,QAAQ,UAAU,EAAA;AAAA,EAAE;AAGjC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA,OAAO,aACH,6CACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,UACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,UAAA,QAAO;AAAA,QAE7D,OAAO,aACNA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,UAEP,qCAME,MAAM,OAAO,OAAO;AAAA,YAE1B,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAI;AAAA,UAAA;AAAA,QAAA,IAGPC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,UAAU,CAAC,UAEP,qCAME,MAAM,OAAO,OAAO;AAAA,YAE1B,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,cACA,SAAS,YACP;AAAA,cACF;AAAA,YAAA;AAAA,YAED,GAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGR,UACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,UAAA,QAAO;AAAA,QAE7D,YACCA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;;"}
+{"version":3,"file":"InputField.cjs","sources":["../../src/components/InputField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\n\ntype NativeInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"prefix\" | \"size\" | \"type\" | \"value\"\n>;\n\ntype NativeTextareaProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"onChange\" | \"prefix\" | \"size\" | \"value\"\n>;\n\ntype InputFieldSharedProps<\n  TElement extends HTMLInputElement | HTMLTextAreaElement,\n> = {\n  /** Controlled input value. */\n  value?: string | undefined;\n  /** Native input type. Ignored when `as=\"textarea\"`. */\n  type?: InputHTMLAttributes<HTMLInputElement>[\"type\"] | undefined;\n  /** Called with the next text value. */\n  onChange?:\n    | ((value: string, event: ChangeEvent<TElement>) => void)\n    | undefined;\n  /** Leading adornment rendered before the input. */\n  prefix?: ReactNode | undefined;\n  /** Trailing adornment rendered after the input and before the shortcut. */\n  suffix?: ReactNode | undefined;\n  /** Keyboard-shortcut hint rendered as a trailing `<kbd>`. Pass `null` to hide it. */\n  shortcut?: string | null | undefined;\n  /** Override the key matched for cmd/ctrl shortcuts. Defaults to the shortcut's last character. */\n  shortcutKey?: string | undefined;\n  /**\n   * Shortcut to bind, in `useHotkey` combo syntax (`\"mod+k\"`, `\"mod+shift+p\"`),\n   * where `mod` is ⌘ on macOS and Ctrl elsewhere. Preferred over `shortcutKey`:\n   * it matches modifiers exactly, whereas a key derived from the `shortcut`\n   * badge cannot express them.\n   */\n  hotkey?: string | undefined;\n  /** Called before the field is focused when the shortcut is pressed. */\n  onShortcut?: (() => void) | undefined;\n  /**\n   * Marks the control as invalid: renders a destructive border and sets\n   * aria-invalid on the native element. Purely presentational — the consumer\n   * decides what invalid means, exactly as `Combobox`'s own `invalid` does.\n   */\n  invalid?: boolean | undefined;\n  /** Classes applied to the outer control. */\n  className?: string | undefined;\n  /** Classes applied to the native input. */\n  inputClassName?: string | undefined;\n  /** Classes applied to the shortcut badge. */\n  shortcutClassName?: string | undefined;\n};\n\nexport type InputFieldInputProps = NativeInputProps &\n  InputFieldSharedProps<HTMLInputElement> & {\n    as?: \"input\" | undefined;\n  };\n\nexport type InputFieldTextareaProps = NativeTextareaProps &\n  InputFieldSharedProps<HTMLTextAreaElement> & {\n    as: \"textarea\";\n  };\n\nexport type InputFieldProps = InputFieldInputProps | InputFieldTextareaProps;\n\n/**\n * Shared single-line input chrome with optional prefix/suffix adornments and a\n * global cmd/ctrl keyboard shortcut. Consumers keep native input semantics while\n * sharing the clicky border, focus ring, and density tokens.\n */\nexport const InputField = forwardRef<\n  HTMLInputElement | HTMLTextAreaElement,\n  InputFieldProps\n>(function InputField(\n  {\n    as = \"input\",\n    value,\n    onChange,\n    prefix,\n    suffix,\n    shortcut,\n    shortcutKey,\n    hotkey,\n    onShortcut,\n    invalid,\n    className,\n    inputClassName,\n    shortcutClassName,\n    type = \"text\",\n    ...rest\n  },\n  forwardedRef,\n) {\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n  useImperativeHandle(\n    forwardedRef,\n    () => inputRef.current as HTMLInputElement | HTMLTextAreaElement,\n    [],\n  );\n\n  // `hotkey` is the precise form; `shortcut`/`shortcutKey` keep working by\n  // deriving a cmd/ctrl combo from the badge's last character.\n  const effectiveShortcutKey =\n    shortcutKey ?? (shortcut ? shortcut.slice(-1).toLowerCase() : undefined);\n  const combo = hotkey ?? (effectiveShortcutKey ? `mod+${effectiveShortcutKey}` : null);\n\n  useHotkey(\n    combo,\n    () => {\n      onShortcut?.();\n      inputRef.current?.focus();\n    },\n    { enabled: Boolean(onShortcut) },\n  );\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full gap-density-2 rounded-md border border-border bg-background px-density-2\",\n        \"focus-within:ring-2 focus-within:ring-ring\",\n        as === \"textarea\"\n          ? \"min-h-control-h items-start py-density-1\"\n          : \"h-control-h items-center\",\n        // Same pair ComboboxControl uses, so an invalid text field and an\n        // invalid combobox read identically in the same form.\n        invalid && \"border-destructive focus-within:ring-destructive\",\n        // The border lives out here while `disabled` lands on the inner\n        // element, so the chrome can only see it through :has(). Without this\n        // a disabled field is indistinguishable from an editable one.\n        \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50\",\n        className,\n      )}\n    >\n      {prefix && (\n        <span className=\"inline-flex shrink-0 items-center\">{prefix}</span>\n      )}\n      {as === \"textarea\" ? (\n        <textarea\n          ref={inputRef as Ref<HTMLTextAreaElement>}\n          value={value}\n          onChange={(event) =>\n            (\n              onChange as\n                | ((\n                    value: string,\n                    event: ChangeEvent<HTMLTextAreaElement>,\n                  ) => void)\n                | undefined\n            )?.(event.target.value, event)\n          }\n          className={cn(\n            \"min-w-0 flex-1 resize-y border-none bg-transparent text-sm text-foreground outline-none\",\n            \"placeholder:text-placeholder\",\n            \"disabled:cursor-not-allowed\",\n            inputClassName,\n          )}\n          {...(invalid ? { \"aria-invalid\": true } : {})}\n          {...(rest as NativeTextareaProps)}\n        />\n      ) : (\n        <input\n          ref={inputRef as Ref<HTMLInputElement>}\n          type={type}\n          value={value}\n          onChange={(event) =>\n            (\n              onChange as\n                | ((\n                    value: string,\n                    event: ChangeEvent<HTMLInputElement>,\n                  ) => void)\n                | undefined\n            )?.(event.target.value, event)\n          }\n          className={cn(\n            \"min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none\",\n            \"placeholder:text-placeholder\",\n            \"disabled:cursor-not-allowed\",\n            type === \"search\" &&\n              \"[&::-webkit-search-cancel-button]:appearance-none\",\n            inputClassName,\n          )}\n          // Spread last so a caller passing its own aria-invalid still wins.\n          {...(invalid ? { \"aria-invalid\": true } : {})}\n          {...(rest as NativeInputProps)}\n        />\n      )}\n      {suffix && (\n        <span className=\"inline-flex shrink-0 items-center\">{suffix}</span>\n      )}\n      {shortcut && (\n        <kbd\n          className={cn(\n            \"shrink-0 rounded border border-border px-1 font-mono text-[10px] text-muted-foreground\",\n            shortcutClassName,\n          )}\n        >\n          {shortcut}\n        </kbd>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","InputField","useRef","useImperativeHandle","useHotkey","jsxs","cn","jsx"],"mappings":";;;;;;AAkFO,MAAM,aAAaA,MAAAA,WAGxB,SAASC,YACT;AAAA,EACE,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GACA,cACA;AACA,QAAM,WAAWC,MAAAA,OAAsD,IAAI;AAC3EC,QAAAA;AAAAA,IACE;AAAA,IACA,MAAM,SAAS;AAAA,IACf,CAAA;AAAA,EAAC;AAKH,QAAM,uBACJ,gBAAgB,WAAW,SAAS,MAAM,EAAE,EAAE,gBAAgB;AAChE,QAAM,QAAQ,WAAW,uBAAuB,OAAO,oBAAoB,KAAK;AAEhFC,YAAAA;AAAAA,IACE;AAAA,IACA,MAAM;;AACJ;AACA,qBAAS,YAAT,mBAAkB;AAAA,IACpB;AAAA,IACA,EAAE,SAAS,QAAQ,UAAU,EAAA;AAAA,EAAE;AAGjC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA,OAAO,aACH,6CACA;AAAA;AAAA;AAAA,QAGJ,WAAW;AAAA;AAAA;AAAA;AAAA,QAIX;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,UACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,UAAA,QAAO;AAAA,QAE7D,OAAO,aACNA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,UAEP,qCAME,MAAM,OAAO,OAAO;AAAA,YAE1B,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAI,UAAU,EAAE,gBAAgB,KAAA,IAAS,CAAA;AAAA,YACzC,GAAI;AAAA,UAAA;AAAA,QAAA,IAGPC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,UAAU,CAAC,UAEP,qCAME,MAAM,OAAO,OAAO;AAAA,YAE1B,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAS,YACP;AAAA,cACF;AAAA,YAAA;AAAA,YAGD,GAAI,UAAU,EAAE,gBAAgB,KAAA,IAAS,CAAA;AAAA,YACzC,GAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGR,UACCC,2BAAAA,IAAC,QAAA,EAAK,WAAU,qCAAqC,UAAA,QAAO;AAAA,QAE7D,YACCA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;;"}

package/dist/components/InputField.d.ts

@@ -25,6 +25,12 @@ type InputFieldSharedProps<TElement extends HTMLInputElement | HTMLTextAreaEleme
     hotkey?: string | undefined;
     /** Called before the field is focused when the shortcut is pressed. */
     onShortcut?: (() => void) | undefined;
+    /**
+     * Marks the control as invalid: renders a destructive border and sets
+     * aria-invalid on the native element. Purely presentational — the consumer
+     * decides what invalid means, exactly as `Combobox`'s own `invalid` does.
+     */
+    invalid?: boolean | undefined;
     /** Classes applied to the outer control. */
     className?: string | undefined;
     /** Classes applied to the native input. */

package/dist/components/InputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../src/components/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAEd,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAIf,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAClD,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAC7B,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CACzC,CAAC;AAEF,KAAK,qBAAqB,CACxB,QAAQ,SAAS,gBAAgB,GAAG,mBAAmB,IACrD;IACF,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,uDAAuD;IACvD,IAAI,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,uCAAuC;IACvC,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,GACvD,SAAS,CAAC;IACd,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,2EAA2E;IAC3E,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,uEAAuE;IACvE,UAAU,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACtC,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GACjD,qBAAqB,CAAC,gBAAgB,CAAC,GAAG;IACxC,EAAE,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEJ,MAAM,MAAM,uBAAuB,GAAG,mBAAmB,GACvD,qBAAqB,CAAC,mBAAmB,CAAC,GAAG;IAC3C,EAAE,EAAE,UAAU,CAAC;CAChB,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,oBAAoB,GAAG,uBAAuB,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,UAAU,oIAuHrB,CAAC"}
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../src/components/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAEd,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAIf,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAClD,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAC7B,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CACzC,CAAC;AAEF,KAAK,qBAAqB,CACxB,QAAQ,SAAS,gBAAgB,GAAG,mBAAmB,IACrD;IACF,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,uDAAuD;IACvD,IAAI,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,uCAAuC;IACvC,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,GACvD,SAAS,CAAC;IACd,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,2EAA2E;IAC3E,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,uEAAuE;IACvE,UAAU,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GACjD,qBAAqB,CAAC,gBAAgB,CAAC,GAAG;IACxC,EAAE,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEJ,MAAM,MAAM,uBAAuB,GAAG,mBAAmB,GACvD,qBAAqB,CAAC,mBAAmB,CAAC,GAAG;IAC3C,EAAE,EAAE,UAAU,CAAC;CAChB,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,oBAAoB,GAAG,uBAAuB,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,UAAU,oIAoIrB,CAAC"}

package/dist/components/InputField.js

@@ -12,6 +12,7 @@ const InputField = forwardRef(function InputField2({
   shortcutKey,
   hotkey,
   onShortcut,
+  invalid,
   className,
   inputClassName,
   shortcutClassName,
@@ -42,6 +43,13 @@ const InputField = forwardRef(function InputField2({
         "flex w-full gap-density-2 rounded-md border border-border bg-background px-density-2",
         "focus-within:ring-2 focus-within:ring-ring",
         as === "textarea" ? "min-h-control-h items-start py-density-1" : "h-control-h items-center",
+        // Same pair ComboboxControl uses, so an invalid text field and an
+        // invalid combobox read identically in the same form.
+        invalid && "border-destructive focus-within:ring-destructive",
+        // The border lives out here while `disabled` lands on the inner
+        // element, so the chrome can only see it through :has(). Without this
+        // a disabled field is indistinguishable from an editable one.
+        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
         className
       ),
       children: [
@@ -54,9 +62,11 @@ const InputField = forwardRef(function InputField2({
             onChange: (event) => onChange == null ? void 0 : onChange(event.target.value, event),
             className: cn(
               "min-w-0 flex-1 resize-y border-none bg-transparent text-sm text-foreground outline-none",
-              "placeholder:text-muted-foreground",
+              "placeholder:text-placeholder",
+              "disabled:cursor-not-allowed",
               inputClassName
             ),
+            ...invalid ? { "aria-invalid": true } : {},
             ...rest
           }
         ) : /* @__PURE__ */ jsx(
@@ -68,10 +78,12 @@ const InputField = forwardRef(function InputField2({
             onChange: (event) => onChange == null ? void 0 : onChange(event.target.value, event),
             className: cn(
               "min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none",
-              "placeholder:text-muted-foreground",
+              "placeholder:text-placeholder",
+              "disabled:cursor-not-allowed",
               type === "search" && "[&::-webkit-search-cancel-button]:appearance-none",
               inputClassName
             ),
+            ...invalid ? { "aria-invalid": true } : {},
             ...rest
           }
         ),

package/dist/components/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../src/components/InputField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\n\ntype NativeInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"prefix\" | \"size\" | \"type\" | \"value\"\n>;\n\ntype NativeTextareaProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"onChange\" | \"prefix\" | \"size\" | \"value\"\n>;\n\ntype InputFieldSharedProps<\n  TElement extends HTMLInputElement | HTMLTextAreaElement,\n> = {\n  /** Controlled input value. */\n  value?: string | undefined;\n  /** Native input type. Ignored when `as=\"textarea\"`. */\n  type?: InputHTMLAttributes<HTMLInputElement>[\"type\"] | undefined;\n  /** Called with the next text value. */\n  onChange?:\n    | ((value: string, event: ChangeEvent<TElement>) => void)\n    | undefined;\n  /** Leading adornment rendered before the input. */\n  prefix?: ReactNode | undefined;\n  /** Trailing adornment rendered after the input and before the shortcut. */\n  suffix?: ReactNode | undefined;\n  /** Keyboard-shortcut hint rendered as a trailing `<kbd>`. Pass `null` to hide it. */\n  shortcut?: string | null | undefined;\n  /** Override the key matched for cmd/ctrl shortcuts. Defaults to the shortcut's last character. */\n  shortcutKey?: string | undefined;\n  /**\n   * Shortcut to bind, in `useHotkey` combo syntax (`\"mod+k\"`, `\"mod+shift+p\"`),\n   * where `mod` is ⌘ on macOS and Ctrl elsewhere. Preferred over `shortcutKey`:\n   * it matches modifiers exactly, whereas a key derived from the `shortcut`\n   * badge cannot express them.\n   */\n  hotkey?: string | undefined;\n  /** Called before the field is focused when the shortcut is pressed. */\n  onShortcut?: (() => void) | undefined;\n  /** Classes applied to the outer control. */\n  className?: string | undefined;\n  /** Classes applied to the native input. */\n  inputClassName?: string | undefined;\n  /** Classes applied to the shortcut badge. */\n  shortcutClassName?: string | undefined;\n};\n\nexport type InputFieldInputProps = NativeInputProps &\n  InputFieldSharedProps<HTMLInputElement> & {\n    as?: \"input\" | undefined;\n  };\n\nexport type InputFieldTextareaProps = NativeTextareaProps &\n  InputFieldSharedProps<HTMLTextAreaElement> & {\n    as: \"textarea\";\n  };\n\nexport type InputFieldProps = InputFieldInputProps | InputFieldTextareaProps;\n\n/**\n * Shared single-line input chrome with optional prefix/suffix adornments and a\n * global cmd/ctrl keyboard shortcut. Consumers keep native input semantics while\n * sharing the clicky border, focus ring, and density tokens.\n */\nexport const InputField = forwardRef<\n  HTMLInputElement | HTMLTextAreaElement,\n  InputFieldProps\n>(function InputField(\n  {\n    as = \"input\",\n    value,\n    onChange,\n    prefix,\n    suffix,\n    shortcut,\n    shortcutKey,\n    hotkey,\n    onShortcut,\n    className,\n    inputClassName,\n    shortcutClassName,\n    type = \"text\",\n    ...rest\n  },\n  forwardedRef,\n) {\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n  useImperativeHandle(\n    forwardedRef,\n    () => inputRef.current as HTMLInputElement | HTMLTextAreaElement,\n    [],\n  );\n\n  // `hotkey` is the precise form; `shortcut`/`shortcutKey` keep working by\n  // deriving a cmd/ctrl combo from the badge's last character.\n  const effectiveShortcutKey =\n    shortcutKey ?? (shortcut ? shortcut.slice(-1).toLowerCase() : undefined);\n  const combo = hotkey ?? (effectiveShortcutKey ? `mod+${effectiveShortcutKey}` : null);\n\n  useHotkey(\n    combo,\n    () => {\n      onShortcut?.();\n      inputRef.current?.focus();\n    },\n    { enabled: Boolean(onShortcut) },\n  );\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full gap-density-2 rounded-md border border-border bg-background px-density-2\",\n        \"focus-within:ring-2 focus-within:ring-ring\",\n        as === \"textarea\"\n          ? \"min-h-control-h items-start py-density-1\"\n          : \"h-control-h items-center\",\n        className,\n      )}\n    >\n      {prefix && (\n        <span className=\"inline-flex shrink-0 items-center\">{prefix}</span>\n      )}\n      {as === \"textarea\" ? (\n        <textarea\n          ref={inputRef as Ref<HTMLTextAreaElement>}\n          value={value}\n          onChange={(event) =>\n            (\n              onChange as\n                | ((\n                    value: string,\n                    event: ChangeEvent<HTMLTextAreaElement>,\n                  ) => void)\n                | undefined\n            )?.(event.target.value, event)\n          }\n          className={cn(\n            \"min-w-0 flex-1 resize-y border-none bg-transparent text-sm text-foreground outline-none\",\n            \"placeholder:text-muted-foreground\",\n            inputClassName,\n          )}\n          {...(rest as NativeTextareaProps)}\n        />\n      ) : (\n        <input\n          ref={inputRef as Ref<HTMLInputElement>}\n          type={type}\n          value={value}\n          onChange={(event) =>\n            (\n              onChange as\n                | ((\n                    value: string,\n                    event: ChangeEvent<HTMLInputElement>,\n                  ) => void)\n                | undefined\n            )?.(event.target.value, event)\n          }\n          className={cn(\n            \"min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none\",\n            \"placeholder:text-muted-foreground\",\n            type === \"search\" &&\n              \"[&::-webkit-search-cancel-button]:appearance-none\",\n            inputClassName,\n          )}\n          {...(rest as NativeInputProps)}\n        />\n      )}\n      {suffix && (\n        <span className=\"inline-flex shrink-0 items-center\">{suffix}</span>\n      )}\n      {shortcut && (\n        <kbd\n          className={cn(\n            \"shrink-0 rounded border border-border px-1 font-mono text-[10px] text-muted-foreground\",\n            shortcutClassName,\n          )}\n        >\n          {shortcut}\n        </kbd>\n      )}\n    </div>\n  );\n});\n"],"names":["InputField"],"mappings":";;;;AA4EO,MAAM,aAAa,WAGxB,SAASA,YACT;AAAA,EACE,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GACA,cACA;AACA,QAAM,WAAW,OAAsD,IAAI;AAC3E;AAAA,IACE;AAAA,IACA,MAAM,SAAS;AAAA,IACf,CAAA;AAAA,EAAC;AAKH,QAAM,uBACJ,gBAAgB,WAAW,SAAS,MAAM,EAAE,EAAE,gBAAgB;AAChE,QAAM,QAAQ,WAAW,uBAAuB,OAAO,oBAAoB,KAAK;AAEhF;AAAA,IACE;AAAA,IACA,MAAM;;AACJ;AACA,qBAAS,YAAT,mBAAkB;AAAA,IACpB;AAAA,IACA,EAAE,SAAS,QAAQ,UAAU,EAAA;AAAA,EAAE;AAGjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,OAAO,aACH,6CACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,UACC,oBAAC,QAAA,EAAK,WAAU,qCAAqC,UAAA,QAAO;AAAA,QAE7D,OAAO,aACN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,UAEP,qCAME,MAAM,OAAO,OAAO;AAAA,YAE1B,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAI;AAAA,UAAA;AAAA,QAAA,IAGP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,UAAU,CAAC,UAEP,qCAME,MAAM,OAAO,OAAO;AAAA,YAE1B,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA,SAAS,YACP;AAAA,cACF;AAAA,YAAA;AAAA,YAED,GAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGR,UACC,oBAAC,QAAA,EAAK,WAAU,qCAAqC,UAAA,QAAO;AAAA,QAE7D,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"InputField.js","sources":["../../src/components/InputField.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useHotkey } from \"../hooks/use-hotkey\";\n\ntype NativeInputProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"prefix\" | \"size\" | \"type\" | \"value\"\n>;\n\ntype NativeTextareaProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"onChange\" | \"prefix\" | \"size\" | \"value\"\n>;\n\ntype InputFieldSharedProps<\n  TElement extends HTMLInputElement | HTMLTextAreaElement,\n> = {\n  /** Controlled input value. */\n  value?: string | undefined;\n  /** Native input type. Ignored when `as=\"textarea\"`. */\n  type?: InputHTMLAttributes<HTMLInputElement>[\"type\"] | undefined;\n  /** Called with the next text value. */\n  onChange?:\n    | ((value: string, event: ChangeEvent<TElement>) => void)\n    | undefined;\n  /** Leading adornment rendered before the input. */\n  prefix?: ReactNode | undefined;\n  /** Trailing adornment rendered after the input and before the shortcut. */\n  suffix?: ReactNode | undefined;\n  /** Keyboard-shortcut hint rendered as a trailing `<kbd>`. Pass `null` to hide it. */\n  shortcut?: string | null | undefined;\n  /** Override the key matched for cmd/ctrl shortcuts. Defaults to the shortcut's last character. */\n  shortcutKey?: string | undefined;\n  /**\n   * Shortcut to bind, in `useHotkey` combo syntax (`\"mod+k\"`, `\"mod+shift+p\"`),\n   * where `mod` is ⌘ on macOS and Ctrl elsewhere. Preferred over `shortcutKey`:\n   * it matches modifiers exactly, whereas a key derived from the `shortcut`\n   * badge cannot express them.\n   */\n  hotkey?: string | undefined;\n  /** Called before the field is focused when the shortcut is pressed. */\n  onShortcut?: (() => void) | undefined;\n  /**\n   * Marks the control as invalid: renders a destructive border and sets\n   * aria-invalid on the native element. Purely presentational — the consumer\n   * decides what invalid means, exactly as `Combobox`'s own `invalid` does.\n   */\n  invalid?: boolean | undefined;\n  /** Classes applied to the outer control. */\n  className?: string | undefined;\n  /** Classes applied to the native input. */\n  inputClassName?: string | undefined;\n  /** Classes applied to the shortcut badge. */\n  shortcutClassName?: string | undefined;\n};\n\nexport type InputFieldInputProps = NativeInputProps &\n  InputFieldSharedProps<HTMLInputElement> & {\n    as?: \"input\" | undefined;\n  };\n\nexport type InputFieldTextareaProps = NativeTextareaProps &\n  InputFieldSharedProps<HTMLTextAreaElement> & {\n    as: \"textarea\";\n  };\n\nexport type InputFieldProps = InputFieldInputProps | InputFieldTextareaProps;\n\n/**\n * Shared single-line input chrome with optional prefix/suffix adornments and a\n * global cmd/ctrl keyboard shortcut. Consumers keep native input semantics while\n * sharing the clicky border, focus ring, and density tokens.\n */\nexport const InputField = forwardRef<\n  HTMLInputElement | HTMLTextAreaElement,\n  InputFieldProps\n>(function InputField(\n  {\n    as = \"input\",\n    value,\n    onChange,\n    prefix,\n    suffix,\n    shortcut,\n    shortcutKey,\n    hotkey,\n    onShortcut,\n    invalid,\n    className,\n    inputClassName,\n    shortcutClassName,\n    type = \"text\",\n    ...rest\n  },\n  forwardedRef,\n) {\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n  useImperativeHandle(\n    forwardedRef,\n    () => inputRef.current as HTMLInputElement | HTMLTextAreaElement,\n    [],\n  );\n\n  // `hotkey` is the precise form; `shortcut`/`shortcutKey` keep working by\n  // deriving a cmd/ctrl combo from the badge's last character.\n  const effectiveShortcutKey =\n    shortcutKey ?? (shortcut ? shortcut.slice(-1).toLowerCase() : undefined);\n  const combo = hotkey ?? (effectiveShortcutKey ? `mod+${effectiveShortcutKey}` : null);\n\n  useHotkey(\n    combo,\n    () => {\n      onShortcut?.();\n      inputRef.current?.focus();\n    },\n    { enabled: Boolean(onShortcut) },\n  );\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full gap-density-2 rounded-md border border-border bg-background px-density-2\",\n        \"focus-within:ring-2 focus-within:ring-ring\",\n        as === \"textarea\"\n          ? \"min-h-control-h items-start py-density-1\"\n          : \"h-control-h items-center\",\n        // Same pair ComboboxControl uses, so an invalid text field and an\n        // invalid combobox read identically in the same form.\n        invalid && \"border-destructive focus-within:ring-destructive\",\n        // The border lives out here while `disabled` lands on the inner\n        // element, so the chrome can only see it through :has(). Without this\n        // a disabled field is indistinguishable from an editable one.\n        \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50\",\n        className,\n      )}\n    >\n      {prefix && (\n        <span className=\"inline-flex shrink-0 items-center\">{prefix}</span>\n      )}\n      {as === \"textarea\" ? (\n        <textarea\n          ref={inputRef as Ref<HTMLTextAreaElement>}\n          value={value}\n          onChange={(event) =>\n            (\n              onChange as\n                | ((\n                    value: string,\n                    event: ChangeEvent<HTMLTextAreaElement>,\n                  ) => void)\n                | undefined\n            )?.(event.target.value, event)\n          }\n          className={cn(\n            \"min-w-0 flex-1 resize-y border-none bg-transparent text-sm text-foreground outline-none\",\n            \"placeholder:text-placeholder\",\n            \"disabled:cursor-not-allowed\",\n            inputClassName,\n          )}\n          {...(invalid ? { \"aria-invalid\": true } : {})}\n          {...(rest as NativeTextareaProps)}\n        />\n      ) : (\n        <input\n          ref={inputRef as Ref<HTMLInputElement>}\n          type={type}\n          value={value}\n          onChange={(event) =>\n            (\n              onChange as\n                | ((\n                    value: string,\n                    event: ChangeEvent<HTMLInputElement>,\n                  ) => void)\n                | undefined\n            )?.(event.target.value, event)\n          }\n          className={cn(\n            \"min-w-0 flex-1 border-none bg-transparent text-sm text-foreground outline-none\",\n            \"placeholder:text-placeholder\",\n            \"disabled:cursor-not-allowed\",\n            type === \"search\" &&\n              \"[&::-webkit-search-cancel-button]:appearance-none\",\n            inputClassName,\n          )}\n          // Spread last so a caller passing its own aria-invalid still wins.\n          {...(invalid ? { \"aria-invalid\": true } : {})}\n          {...(rest as NativeInputProps)}\n        />\n      )}\n      {suffix && (\n        <span className=\"inline-flex shrink-0 items-center\">{suffix}</span>\n      )}\n      {shortcut && (\n        <kbd\n          className={cn(\n            \"shrink-0 rounded border border-border px-1 font-mono text-[10px] text-muted-foreground\",\n            shortcutClassName,\n          )}\n        >\n          {shortcut}\n        </kbd>\n      )}\n    </div>\n  );\n});\n"],"names":["InputField"],"mappings":";;;;AAkFO,MAAM,aAAa,WAGxB,SAASA,YACT;AAAA,EACE,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GACA,cACA;AACA,QAAM,WAAW,OAAsD,IAAI;AAC3E;AAAA,IACE;AAAA,IACA,MAAM,SAAS;AAAA,IACf,CAAA;AAAA,EAAC;AAKH,QAAM,uBACJ,gBAAgB,WAAW,SAAS,MAAM,EAAE,EAAE,gBAAgB;AAChE,QAAM,QAAQ,WAAW,uBAAuB,OAAO,oBAAoB,KAAK;AAEhF;AAAA,IACE;AAAA,IACA,MAAM;;AACJ;AACA,qBAAS,YAAT,mBAAkB;AAAA,IACpB;AAAA,IACA,EAAE,SAAS,QAAQ,UAAU,EAAA;AAAA,EAAE;AAGjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,OAAO,aACH,6CACA;AAAA;AAAA;AAAA,QAGJ,WAAW;AAAA;AAAA;AAAA;AAAA,QAIX;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,UACC,oBAAC,QAAA,EAAK,WAAU,qCAAqC,UAAA,QAAO;AAAA,QAE7D,OAAO,aACN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,UAEP,qCAME,MAAM,OAAO,OAAO;AAAA,YAE1B,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAI,UAAU,EAAE,gBAAgB,KAAA,IAAS,CAAA;AAAA,YACzC,GAAI;AAAA,UAAA;AAAA,QAAA,IAGP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,UAAU,CAAC,UAEP,qCAME,MAAM,OAAO,OAAO;AAAA,YAE1B,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAS,YACP;AAAA,cACF;AAAA,YAAA;AAAA,YAGD,GAAI,UAAU,EAAE,gBAAgB,KAAA,IAAS,CAAA;AAAA,YACzC,GAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGR,UACC,oBAAC,QAAA,EAAK,WAAU,qCAAqC,UAAA,QAAO;AAAA,QAE7D,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/ItemActions.cjs

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+const UiChevronUp = require("../icons/components/UiChevronUp.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+const UiCopy = require("../icons/components/UiCopy.cjs");
+const UiTrash = require("../icons/components/UiTrash.cjs");
+function ItemActions({
+  label,
+  index,
+  count,
+  onMove,
+  onDuplicate,
+  onRemove,
+  leading,
+  reveal = true,
+  size = "md",
+  className
+}) {
+  const action = utils.cn(
+    "inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30",
+    jsonSchemaFormSize.controlHeightClass[size]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "ml-auto flex shrink-0 items-center gap-0.5",
+        reveal && "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100",
+        className
+      ),
+      children: [
+        leading,
+        onMove && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${label} up`,
+              disabled: index === 0,
+              className: action,
+              onClick: () => onMove(index - 1),
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronUp.UiChevronUp, className: "text-sm" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${label} down`,
+              disabled: index >= count - 1,
+              className: action,
+              onClick: () => onMove(index + 1),
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown, className: "text-sm" })
+            }
+          )
+        ] }),
+        onDuplicate && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Duplicate ${label}`,
+            className: action,
+            onClick: onDuplicate,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCopy.UiCopy, className: "text-sm" })
+          }
+        ),
+        onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${label}`,
+            className: utils.cn(action, "hover:bg-destructive/10 hover:text-destructive"),
+            onClick: onRemove,
+            "data-item-index": index,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiTrash.UiTrash, className: "text-sm" })
+          }
+        )
+      ]
+    }
+  );
+}
+exports.ItemActions = ItemActions;
+//# sourceMappingURL=ItemActions.cjs.map

package/dist/components/ItemActions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemActions.cjs","sources":["../../src/components/ItemActions.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { SizeToken } from \"../lib/size\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp, UiCopy, UiTrash } from \"../icons\";\nimport { controlHeightClass } from \"./json-schema-form-size\";\n\n// The per-row action cluster shared by every editable-list surface: AccordionList\n// and the JsonSchemaForm array displays. Each action is offered ONLY when its\n// handler is supplied, which is how a list opts into reorder without opting into\n// delete — there is no separate flag to keep in sync with the callback.\nexport interface ItemActionsProps {\n  /** Names the item in every action's accessible label (\"Move Routes up\"). */\n  label: string;\n  /** This row's position, used for the reorder targets and the end-disabling. */\n  index: number;\n  /** Total rows, so the last row's \"down\" disables itself. */\n  count: number;\n  /**\n   * Offers both reorder buttons, called with the destination index. The button\n   * at either end of the list renders disabled rather than missing, so the\n   * cluster keeps a constant width down a long list.\n   */\n  onMove?: (to: number) => void;\n  /** Offers the duplicate button. */\n  onDuplicate?: () => void;\n  /** Offers the remove button. */\n  onRemove?: () => void;\n  /** Consumer actions, rendered before the built-in ones. */\n  leading?: ReactNode;\n  /**\n   * Reveal on row hover / focus-within. Defaults to true, which requires\n   * `group` on the row container — a long list is then not a wall of\n   * permanently dim icons, while keyboard users still see the actions the\n   * moment they arrive. Pass false for a row that must always show them.\n   */\n  reveal?: boolean;\n  size?: SizeToken;\n  className?: string;\n}\n\nexport function ItemActions({\n  label,\n  index,\n  count,\n  onMove,\n  onDuplicate,\n  onRemove,\n  leading,\n  reveal = true,\n  size = \"md\",\n  className,\n}: ItemActionsProps) {\n  const action = cn(\n    \"inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\",\n    controlHeightClass[size],\n  );\n  return (\n    <div\n      className={cn(\n        \"ml-auto flex shrink-0 items-center gap-0.5\",\n        reveal &&\n          \"opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100\",\n        className,\n      )}\n    >\n      {leading}\n      {onMove && (\n        <>\n          <button\n            type=\"button\"\n            aria-label={`Move ${label} up`}\n            disabled={index === 0}\n            className={action}\n            onClick={() => onMove(index - 1)}\n          >\n            <Icon icon={UiChevronUp} className=\"text-sm\" />\n          </button>\n          <button\n            type=\"button\"\n            aria-label={`Move ${label} down`}\n            disabled={index >= count - 1}\n            className={action}\n            onClick={() => onMove(index + 1)}\n          >\n            <Icon icon={UiChevronDown} className=\"text-sm\" />\n          </button>\n        </>\n      )}\n      {onDuplicate && (\n        <button\n          type=\"button\"\n          aria-label={`Duplicate ${label}`}\n          className={action}\n          onClick={onDuplicate}\n        >\n          <Icon icon={UiCopy} className=\"text-sm\" />\n        </button>\n      )}\n      {onRemove && (\n        <button\n          type=\"button\"\n          aria-label={`Remove ${label}`}\n          className={cn(action, \"hover:bg-destructive/10 hover:text-destructive\")}\n          onClick={onRemove}\n          data-item-index={index}\n        >\n          <Icon icon={UiTrash} className=\"text-sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["cn","controlHeightClass","jsxs","Fragment","jsx","Icon","UiChevronUp","UiChevronDown","UiCopy","UiTrash"],"mappings":";;;;;;;;;;AAyCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AACF,GAAqB;AACnB,QAAM,SAASA,MAAAA;AAAAA,IACb;AAAA,IACAC,mBAAAA,mBAAmB,IAAI;AAAA,EAAA;AAEzB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF,MAAAA;AAAAA,QACT;AAAA,QACA,UACE;AAAA,QACF;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QACA,UACCE,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,QAAQ,KAAK;AAAA,cACzB,UAAU,UAAU;AAAA,cACpB,WAAW;AAAA,cACX,SAAS,MAAM,OAAO,QAAQ,CAAC;AAAA,cAE/B,UAAAA,2BAAAA,IAACC,WAAA,EAAK,MAAMC,YAAAA,aAAa,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAE/CF,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,QAAQ,KAAK;AAAA,cACzB,UAAU,SAAS,QAAQ;AAAA,cAC3B,WAAW;AAAA,cACX,SAAS,MAAM,OAAO,QAAQ,CAAC;AAAA,cAE/B,UAAAA,2BAAAA,IAACC,WAAA,EAAK,MAAME,cAAAA,eAAe,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACjD,GACF;AAAA,QAED,eACCH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,aAAa,KAAK;AAAA,YAC9B,WAAW;AAAA,YACX,SAAS;AAAA,YAET,UAAAA,2BAAAA,IAACC,WAAA,EAAK,MAAMG,OAAAA,QAAQ,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3C,YACCJ,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,UAAU,KAAK;AAAA,YAC3B,WAAWJ,MAAAA,GAAG,QAAQ,gDAAgD;AAAA,YACtE,SAAS;AAAA,YACT,mBAAiB;AAAA,YAEjB,UAAAI,2BAAAA,IAACC,WAAA,EAAK,MAAMI,QAAAA,SAAS,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3C;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/components/ItemActions.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SizeToken } from '../lib/size';
+export interface ItemActionsProps {
+    /** Names the item in every action's accessible label ("Move Routes up"). */
+    label: string;
+    /** This row's position, used for the reorder targets and the end-disabling. */
+    index: number;
+    /** Total rows, so the last row's "down" disables itself. */
+    count: number;
+    /**
+     * Offers both reorder buttons, called with the destination index. The button
+     * at either end of the list renders disabled rather than missing, so the
+     * cluster keeps a constant width down a long list.
+     */
+    onMove?: (to: number) => void;
+    /** Offers the duplicate button. */
+    onDuplicate?: () => void;
+    /** Offers the remove button. */
+    onRemove?: () => void;
+    /** Consumer actions, rendered before the built-in ones. */
+    leading?: ReactNode;
+    /**
+     * Reveal on row hover / focus-within. Defaults to true, which requires
+     * `group` on the row container — a long list is then not a wall of
+     * permanently dim icons, while keyboard users still see the actions the
+     * moment they arrive. Pass false for a row that must always show them.
+     */
+    reveal?: boolean;
+    size?: SizeToken;
+    className?: string;
+}
+export declare function ItemActions({ label, index, count, onMove, onDuplicate, onRemove, leading, reveal, size, className, }: ItemActionsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ItemActions.d.ts.map

package/dist/components/ItemActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemActions.d.ts","sourceRoot":"","sources":["../../src/components/ItemActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAS7C,MAAM,WAAW,gBAAgB;IAC/B,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,WAAW,EACX,QAAQ,EACR,OAAO,EACP,MAAa,EACb,IAAW,EACX,SAAS,GACV,EAAE,gBAAgB,2CA4DlB"}

package/dist/components/ItemActions.js

@@ -0,0 +1,87 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { controlHeightClass } from "./json-schema-form-size.js";
+import { UiChevronUp } from "../icons/components/UiChevronUp.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiCopy } from "../icons/components/UiCopy.js";
+import { UiTrash } from "../icons/components/UiTrash.js";
+function ItemActions({
+  label,
+  index,
+  count,
+  onMove,
+  onDuplicate,
+  onRemove,
+  leading,
+  reveal = true,
+  size = "md",
+  className
+}) {
+  const action = cn(
+    "inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30",
+    controlHeightClass[size]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "ml-auto flex shrink-0 items-center gap-0.5",
+        reveal && "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100",
+        className
+      ),
+      children: [
+        leading,
+        onMove && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${label} up`,
+              disabled: index === 0,
+              className: action,
+              onClick: () => onMove(index - 1),
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiChevronUp, className: "text-sm" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${label} down`,
+              disabled: index >= count - 1,
+              className: action,
+              onClick: () => onMove(index + 1),
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown, className: "text-sm" })
+            }
+          )
+        ] }),
+        onDuplicate && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Duplicate ${label}`,
+            className: action,
+            onClick: onDuplicate,
+            children: /* @__PURE__ */ jsx(Icon, { icon: UiCopy, className: "text-sm" })
+          }
+        ),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${label}`,
+            className: cn(action, "hover:bg-destructive/10 hover:text-destructive"),
+            onClick: onRemove,
+            "data-item-index": index,
+            children: /* @__PURE__ */ jsx(Icon, { icon: UiTrash, className: "text-sm" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ItemActions
+};
+//# sourceMappingURL=ItemActions.js.map

package/dist/components/ItemActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemActions.js","sources":["../../src/components/ItemActions.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { SizeToken } from \"../lib/size\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp, UiCopy, UiTrash } from \"../icons\";\nimport { controlHeightClass } from \"./json-schema-form-size\";\n\n// The per-row action cluster shared by every editable-list surface: AccordionList\n// and the JsonSchemaForm array displays. Each action is offered ONLY when its\n// handler is supplied, which is how a list opts into reorder without opting into\n// delete — there is no separate flag to keep in sync with the callback.\nexport interface ItemActionsProps {\n  /** Names the item in every action's accessible label (\"Move Routes up\"). */\n  label: string;\n  /** This row's position, used for the reorder targets and the end-disabling. */\n  index: number;\n  /** Total rows, so the last row's \"down\" disables itself. */\n  count: number;\n  /**\n   * Offers both reorder buttons, called with the destination index. The button\n   * at either end of the list renders disabled rather than missing, so the\n   * cluster keeps a constant width down a long list.\n   */\n  onMove?: (to: number) => void;\n  /** Offers the duplicate button. */\n  onDuplicate?: () => void;\n  /** Offers the remove button. */\n  onRemove?: () => void;\n  /** Consumer actions, rendered before the built-in ones. */\n  leading?: ReactNode;\n  /**\n   * Reveal on row hover / focus-within. Defaults to true, which requires\n   * `group` on the row container — a long list is then not a wall of\n   * permanently dim icons, while keyboard users still see the actions the\n   * moment they arrive. Pass false for a row that must always show them.\n   */\n  reveal?: boolean;\n  size?: SizeToken;\n  className?: string;\n}\n\nexport function ItemActions({\n  label,\n  index,\n  count,\n  onMove,\n  onDuplicate,\n  onRemove,\n  leading,\n  reveal = true,\n  size = \"md\",\n  className,\n}: ItemActionsProps) {\n  const action = cn(\n    \"inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\",\n    controlHeightClass[size],\n  );\n  return (\n    <div\n      className={cn(\n        \"ml-auto flex shrink-0 items-center gap-0.5\",\n        reveal &&\n          \"opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100\",\n        className,\n      )}\n    >\n      {leading}\n      {onMove && (\n        <>\n          <button\n            type=\"button\"\n            aria-label={`Move ${label} up`}\n            disabled={index === 0}\n            className={action}\n            onClick={() => onMove(index - 1)}\n          >\n            <Icon icon={UiChevronUp} className=\"text-sm\" />\n          </button>\n          <button\n            type=\"button\"\n            aria-label={`Move ${label} down`}\n            disabled={index >= count - 1}\n            className={action}\n            onClick={() => onMove(index + 1)}\n          >\n            <Icon icon={UiChevronDown} className=\"text-sm\" />\n          </button>\n        </>\n      )}\n      {onDuplicate && (\n        <button\n          type=\"button\"\n          aria-label={`Duplicate ${label}`}\n          className={action}\n          onClick={onDuplicate}\n        >\n          <Icon icon={UiCopy} className=\"text-sm\" />\n        </button>\n      )}\n      {onRemove && (\n        <button\n          type=\"button\"\n          aria-label={`Remove ${label}`}\n          className={cn(action, \"hover:bg-destructive/10 hover:text-destructive\")}\n          onClick={onRemove}\n          data-item-index={index}\n        >\n          <Icon icon={UiTrash} className=\"text-sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAyCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AACF,GAAqB;AACnB,QAAM,SAAS;AAAA,IACb;AAAA,IACA,mBAAmB,IAAI;AAAA,EAAA;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UACE;AAAA,QACF;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QACA,UACC,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,QAAQ,KAAK;AAAA,cACzB,UAAU,UAAU;AAAA,cACpB,WAAW;AAAA,cACX,SAAS,MAAM,OAAO,QAAQ,CAAC;AAAA,cAE/B,UAAA,oBAAC,MAAA,EAAK,MAAM,aAAa,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAE/C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,QAAQ,KAAK;AAAA,cACzB,UAAU,SAAS,QAAQ;AAAA,cAC3B,WAAW;AAAA,cACX,SAAS,MAAM,OAAO,QAAQ,CAAC;AAAA,cAE/B,UAAA,oBAAC,MAAA,EAAK,MAAM,eAAe,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACjD,GACF;AAAA,QAED,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,aAAa,KAAK;AAAA,YAC9B,WAAW;AAAA,YACX,SAAS;AAAA,YAET,UAAA,oBAAC,MAAA,EAAK,MAAM,QAAQ,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3C,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,UAAU,KAAK;AAAA,YAC3B,WAAW,GAAG,QAAQ,gDAAgD;AAAA,YACtE,SAAS;AAAA,YACT,mBAAiB;AAAA,YAEjB,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3C;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/JsonSchemaForm.cjs

@@ -214,7 +214,7 @@ function PreferencesMenu({
               value: fieldFilter,
               onChange: (e) => onFilterChange(e.target.value),
               onKeyDown: (e) => e.stopPropagation(),
-              className: "w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              className: "w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-placeholder focus-visible:ring-2 focus-visible:ring-ring"
             }
           ),
           filterActive && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/JsonSchemaForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose, UiEllipsisBold, UiSearch } from \"../icons\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { FormErrorSummary } from \"./json-schema-form-error-display\";\nimport { unmatchedFormErrors } from \"./json-schema-form-errors\";\nimport { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport { applySchemaDefaults } from \"./json-schema-form-resolve\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { DEFAULT_FORM_SIZE, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport {\n  DEFAULT_PREFERENCES_STORAGE_KEY,\n  readPreferences,\n  writePreferences,\n  type FormPreferences,\n  type LayoutMode,\n  type SortMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n  layout: FormLayout | undefined,\n  inline: boolean,\n  modeOverride: LayoutMode | undefined,\n): FormLayout {\n  const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n  const mode = modeOverride ?? baseMode;\n  const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n  // `help` is orthogonal to mode, so it survives a menu-driven mode flip.\n  const help = layout?.help ? { help: layout.help } : {};\n  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth, ...help };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\n    ...help,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  errors = [],\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n  lookupFetcher,\n}: JsonSchemaFormProps) {\n  // When the menu is hidden, never touch localStorage and start from an empty\n  // override so behaviour is identical to before this feature existed.\n  const [prefs, setPrefs] = useState<FormPreferences>(() =>\n    showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n  );\n  // The field filter is transient view state (a \"find\" over the fields), never\n  // persisted — reopening the form should never start with fields hidden.\n  const [fieldFilter, setFieldFilter] = useState(\"\");\n\n  const effectiveSize = prefs.size ?? size;\n  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\n\n  const applyPrefs = (next: FormPreferences) => {\n    setPrefs(next);\n    if (persistPreferences) writePreferences(preferencesStorageKey, next);\n  };\n\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  const effectiveValue = useMemo(() => applySchemaDefaults(resolvedSchema, value), [resolvedSchema, value]);\n  const preExtensions = pre ?? [];\n  const unmatchedErrors = useMemo(\n    () =>\n      unmatchedFormErrors({\n        schema: resolvedSchema,\n        value: effectiveValue,\n        errors,\n        hideReadOnlyFields,\n        pre: preExtensions,\n        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n      }),\n    [effectiveValue, errors, fieldFilter, hiddenKeys, hideReadOnlyFields, preExtensions, resolvedSchema],\n  );\n  // Defaults are part of the submitted form value, not only presentation. This\n  // is especially important for required discriminator fields whose default\n  // selects an if/then branch.\n  useEffect(() => {\n    if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n  }, [effectiveValue, onChange, readOnly, value]);\n\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    layout: resolvedLayout,\n    size: effectiveSize,\n    sortMode: effectiveSortMode,\n    pre: preExtensions,\n    post: post ?? [],\n    rootValue: effectiveValue,\n    onRootChange: onChange,\n    instancePath: \"\",\n    errors,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n    ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n  };\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey = typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === \"\");\n\n  const objectRows = discKey\n    ? null\n    : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n  const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n      <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n        {showPreferencesMenu && !inPickerPhase && (\n          <PreferencesMenu\n            size={effectiveSize}\n            layoutMode={resolvedLayout.mode}\n            sortMode={effectiveSortMode}\n            fieldFilter={fieldFilter}\n            onFilterChange={setFieldFilter}\n            onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n            onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n            onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n          />\n        )}\n        {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n        <FormErrorSummary errors={unmatchedErrors} />\n        <FieldsGrid\n          layout={resolvedLayout}\n          size={effectiveSize}\n          columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n          columnMinWidth={cssLength(resolvedSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n          {...(typeof resolvedSchema[\"x-columns-max-width\"] === \"string\"\n            ? { columnsMaxWidth: resolvedSchema[\"x-columns-max-width\"] }\n            : {})}\n          {...(typeof resolvedSchema[\"x-classes\"] === \"string\" ? { className: resolvedSchema[\"x-classes\"] } : {})}\n        >\n          {discKey ? (\n            <DiscriminatedForm\n              schema={resolvedSchema}\n              value={effectiveValue}\n              onChange={onChange}\n              ctx={ctx}\n              discKey={discKey}\n            />\n          ) : (\n            objectRows\n          )}\n        </FieldsGrid>\n        {noMatches && (\n          <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n            No fields match “{fieldFilter.trim()}”.\n          </p>\n        )}\n      </div>\n    </FormLookupProvider>\n  );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n  { value: \"xs\", label: \"Extra small\" },\n  { value: \"sm\", label: \"Small\" },\n  { value: \"md\", label: \"Medium\" },\n  { value: \"lg\", label: \"Large\" },\n  { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n  { value: \"stacked\", label: \"Stacked\" },\n  { value: \"inline\", label: \"Inline\" },\n];\n\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  sortMode,\n  fieldFilter,\n  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\n  onFilterChange: (value: string) => void;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => void;\n}) {\n  const filterActive = fieldFilter.trim() !== \"\";\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Form display options\"\n      className=\"absolute right-0 top-0 z-10\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label=\"Form display options\"\n          aria-haspopup=\"menu\"\n          className={cn(\n            \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n          )}\n        >\n          <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          <div className=\"px-2 pb-1.5 pt-1\">\n            <div className=\"relative\">\n              <Icon\n                icon={UiSearch}\n                className=\"pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                aria-label=\"Filter fields\"\n                placeholder=\"Filter fields…\"\n                value={fieldFilter}\n                onChange={(e) => onFilterChange(e.target.value)}\n                // Keep arrow/space/enter keys inside the input instead of driving\n                // the menu's list navigation or closing it.\n                onKeyDown={(e) => e.stopPropagation()}\n                className=\"w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n              />\n              {filterActive && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear filter\"\n                  onClick={() => onFilterChange(\"\")}\n                  className=\"absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} className=\"text-xs\" />\n                </button>\n              )}\n            </div>\n          </div>\n          <PreferenceSection title=\"Size\" />\n          {SIZE_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === size}\n              onSelect={() => {\n                onSelectSize(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Layout\" />\n          {LAYOUT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === layoutMode}\n              onSelect={() => {\n                onSelectLayout(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n        </>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n  return (\n    <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n      {title}\n    </div>\n  );\n}\n\nfunction PreferenceItem({ label, selected, onSelect }: { label: string; selected: boolean; onSelect: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitemradio\"\n      aria-checked={selected}\n      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n      onClick={onSelect}\n    >\n      <span className=\"flex w-3.5 shrink-0 justify-center\">\n        {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n      </span>\n      {label}\n    </button>\n  );\n}\n"],"names":["DEFAULT_FORM_SIZE","DEFAULT_PREFERENCES_STORAGE_KEY","useState","readPreferences","writePreferences","useMemo","rehydrateRefs","applySchemaDefaults","unmatchedFormErrors","useEffect","renderApi","renderObjectFields","FormLookupProvider","jsxs","cn","fieldInnerGapClass","jsx","labelSizeClass","FormErrorSummary","FieldsGrid","normalizeColumns","cssLength","DEFAULT_COLUMN_MIN_WIDTH","DiscriminatedForm","DropdownMenu","Icon","UiEllipsisBold","Fragment","UiSearch","UiClose","UiCheck"],"mappings":"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"}
+{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose, UiEllipsisBold, UiSearch } from \"../icons\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { FormErrorSummary } from \"./json-schema-form-error-display\";\nimport { unmatchedFormErrors } from \"./json-schema-form-errors\";\nimport { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport { applySchemaDefaults } from \"./json-schema-form-resolve\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { DEFAULT_FORM_SIZE, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport {\n  DEFAULT_PREFERENCES_STORAGE_KEY,\n  readPreferences,\n  writePreferences,\n  type FormPreferences,\n  type LayoutMode,\n  type SortMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n  layout: FormLayout | undefined,\n  inline: boolean,\n  modeOverride: LayoutMode | undefined,\n): FormLayout {\n  const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n  const mode = modeOverride ?? baseMode;\n  const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n  // `help` is orthogonal to mode, so it survives a menu-driven mode flip.\n  const help = layout?.help ? { help: layout.help } : {};\n  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth, ...help };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\n    ...help,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  errors = [],\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n  lookupFetcher,\n}: JsonSchemaFormProps) {\n  // When the menu is hidden, never touch localStorage and start from an empty\n  // override so behaviour is identical to before this feature existed.\n  const [prefs, setPrefs] = useState<FormPreferences>(() =>\n    showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n  );\n  // The field filter is transient view state (a \"find\" over the fields), never\n  // persisted — reopening the form should never start with fields hidden.\n  const [fieldFilter, setFieldFilter] = useState(\"\");\n\n  const effectiveSize = prefs.size ?? size;\n  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\n\n  const applyPrefs = (next: FormPreferences) => {\n    setPrefs(next);\n    if (persistPreferences) writePreferences(preferencesStorageKey, next);\n  };\n\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  const effectiveValue = useMemo(() => applySchemaDefaults(resolvedSchema, value), [resolvedSchema, value]);\n  const preExtensions = pre ?? [];\n  const unmatchedErrors = useMemo(\n    () =>\n      unmatchedFormErrors({\n        schema: resolvedSchema,\n        value: effectiveValue,\n        errors,\n        hideReadOnlyFields,\n        pre: preExtensions,\n        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n      }),\n    [effectiveValue, errors, fieldFilter, hiddenKeys, hideReadOnlyFields, preExtensions, resolvedSchema],\n  );\n  // Defaults are part of the submitted form value, not only presentation. This\n  // is especially important for required discriminator fields whose default\n  // selects an if/then branch.\n  useEffect(() => {\n    if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n  }, [effectiveValue, onChange, readOnly, value]);\n\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    layout: resolvedLayout,\n    size: effectiveSize,\n    sortMode: effectiveSortMode,\n    pre: preExtensions,\n    post: post ?? [],\n    rootValue: effectiveValue,\n    onRootChange: onChange,\n    instancePath: \"\",\n    errors,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n    ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n  };\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey = typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === \"\");\n\n  const objectRows = discKey\n    ? null\n    : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n  const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n      <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n        {showPreferencesMenu && !inPickerPhase && (\n          <PreferencesMenu\n            size={effectiveSize}\n            layoutMode={resolvedLayout.mode}\n            sortMode={effectiveSortMode}\n            fieldFilter={fieldFilter}\n            onFilterChange={setFieldFilter}\n            onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n            onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n            onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n          />\n        )}\n        {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n        <FormErrorSummary errors={unmatchedErrors} />\n        <FieldsGrid\n          layout={resolvedLayout}\n          size={effectiveSize}\n          columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n          columnMinWidth={cssLength(resolvedSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n          {...(typeof resolvedSchema[\"x-columns-max-width\"] === \"string\"\n            ? { columnsMaxWidth: resolvedSchema[\"x-columns-max-width\"] }\n            : {})}\n          {...(typeof resolvedSchema[\"x-classes\"] === \"string\" ? { className: resolvedSchema[\"x-classes\"] } : {})}\n        >\n          {discKey ? (\n            <DiscriminatedForm\n              schema={resolvedSchema}\n              value={effectiveValue}\n              onChange={onChange}\n              ctx={ctx}\n              discKey={discKey}\n            />\n          ) : (\n            objectRows\n          )}\n        </FieldsGrid>\n        {noMatches && (\n          <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n            No fields match “{fieldFilter.trim()}”.\n          </p>\n        )}\n      </div>\n    </FormLookupProvider>\n  );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n  { value: \"xs\", label: \"Extra small\" },\n  { value: \"sm\", label: \"Small\" },\n  { value: \"md\", label: \"Medium\" },\n  { value: \"lg\", label: \"Large\" },\n  { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n  { value: \"stacked\", label: \"Stacked\" },\n  { value: \"inline\", label: \"Inline\" },\n];\n\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  sortMode,\n  fieldFilter,\n  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\n  onFilterChange: (value: string) => void;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => void;\n}) {\n  const filterActive = fieldFilter.trim() !== \"\";\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Form display options\"\n      className=\"absolute right-0 top-0 z-10\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label=\"Form display options\"\n          aria-haspopup=\"menu\"\n          className={cn(\n            \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n          )}\n        >\n          <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          <div className=\"px-2 pb-1.5 pt-1\">\n            <div className=\"relative\">\n              <Icon\n                icon={UiSearch}\n                className=\"pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                aria-label=\"Filter fields\"\n                placeholder=\"Filter fields…\"\n                value={fieldFilter}\n                onChange={(e) => onFilterChange(e.target.value)}\n                // Keep arrow/space/enter keys inside the input instead of driving\n                // the menu's list navigation or closing it.\n                onKeyDown={(e) => e.stopPropagation()}\n                className=\"w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-placeholder focus-visible:ring-2 focus-visible:ring-ring\"\n              />\n              {filterActive && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear filter\"\n                  onClick={() => onFilterChange(\"\")}\n                  className=\"absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} className=\"text-xs\" />\n                </button>\n              )}\n            </div>\n          </div>\n          <PreferenceSection title=\"Size\" />\n          {SIZE_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === size}\n              onSelect={() => {\n                onSelectSize(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Layout\" />\n          {LAYOUT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === layoutMode}\n              onSelect={() => {\n                onSelectLayout(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n        </>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n  return (\n    <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n      {title}\n    </div>\n  );\n}\n\nfunction PreferenceItem({ label, selected, onSelect }: { label: string; selected: boolean; onSelect: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitemradio\"\n      aria-checked={selected}\n      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n      onClick={onSelect}\n    >\n      <span className=\"flex w-3.5 shrink-0 justify-center\">\n        {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n      </span>\n      {label}\n    </button>\n  );\n}\n"],"names":["DEFAULT_FORM_SIZE","DEFAULT_PREFERENCES_STORAGE_KEY","useState","readPreferences","writePreferences","useMemo","rehydrateRefs","applySchemaDefaults","unmatchedFormErrors","useEffect","renderApi","renderObjectFields","FormLookupProvider","jsxs","cn","fieldInnerGapClass","jsx","labelSizeClass","FormErrorSummary","FieldsGrid","normalizeColumns","cssLength","DEFAULT_COLUMN_MIN_WIDTH","DiscriminatedForm","DropdownMenu","Icon","UiEllipsisBold","Fragment","UiSearch","UiClose","UiCheck"],"mappings":"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"}

package/dist/components/JsonSchemaForm.js

@@ -212,7 +212,7 @@ function PreferencesMenu({
               value: fieldFilter,
               onChange: (e) => onFilterChange(e.target.value),
               onKeyDown: (e) => e.stopPropagation(),
-              className: "w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              className: "w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-placeholder focus-visible:ring-2 focus-visible:ring-ring"
             }
           ),
           filterActive && /* @__PURE__ */ jsx(