import { dynamic } from "@solidjs/web";
import { omit, untrack } from "solid-js";
import { composeRefs, userRef } from "../internals/compose-refs.jsx";
import { mergeRootProps } from "../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../internals/resolve-class-style.jsx";
import { createInput } from "./create-input.jsx";
/**
 * A native input element that automatically works with a surrounding
 * `<Field.Root>`. Renders an `<input>` element (or `as` override).
 *
 * Thin structural adapter over {@link createInput} — the field wiring
 * (labelable id, value registration, `aria-labelledby` / `aria-describedby` /
 * `aria-invalid` composition, touched / dirty / filled / focused setters and
 * the validation pipeline) lives in the primitive. Outside a `<Field.Root>`
 * the primitive's contexts resolve to their NOOP form and this still renders
 * a plain `<input>` with the forwarded consumer props.
 */
export function Input(props) {
  const c = createInput({
    value: () => props.value,
    disabled: () => props.disabled === true,
    // Setup-time read (useLabelableId consumes it once) — untrack so it
    // doesn't trip `[STRICT_READ_UNTRACKED]`.
    id: untrack(() => typeof props.id === "string" ? props.id : undefined),
    name: () => typeof props.name === "string" ? props.name : undefined
  });

  // Bind the slot bag to a `const` before the JSX spread — hydration-critical.
  // Spreading an inline call (`{...c.control(...)}`) makes the Solid SSR
  // compiler wrap it in a lazy thunk whose server-side resolution diverges
  // from the client's, dropping attributes from the SSR markup and shifting
  // hydration keys. A pre-bound variable spread is passed straight through.
  // See `collapsible-root.tsx` for the full explanation.
  const userStyling = resolveClassStyle(props, () => c.state());
  const userProps = omit(props, "class", "style", "attrs", "as", "id");
  const styledUserProps = mergeRootProps(userStyling, userProps);
  const controlProps = c.control(styledUserProps);
  const Tag = dynamic(() => props.as ?? "input");
  return <Tag {...controlProps} ref={composeRefs(c.bindControl, userRef(props))} />;
}
//# sourceMappingURL=input.jsx.map