@carbonbits/sixr 1.4.0 → 1.5.0

package/dist/email-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/field/index.tsx","../src/components/field/use-field-behaviour.ts","../src/components/typography/index.tsx","../src/components/email-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Label } from \"@radix-ui/react-label\";\nimport { type InputHTMLAttributes, type ReactNode, useId } from \"react\";\nimport {\n  type FieldSchema,\n  type FieldValidation,\n  useFieldBehaviour,\n} from \"@/components/field/use-field-behaviour\";\nimport { Typography } from \"@/components/typography\";\n\nexport type {\n  FieldSchema,\n  FieldValidation,\n} from \"@/components/field/use-field-behaviour\";\n\n/**\n * The single-line input behind `TextInput`, `EmailInput`, `PasswordInput` and\n * `PhoneInput`. Each of those fixes the `type` (and the keyboard, autocomplete\n * and validation defaults that go with it) and hands everything else here.\n *\n * Internal: this module has no subpath of its own. Consumers reach it through\n * the specialised inputs, and its shared types through the barrel.\n */\n\nexport type FieldType = \"text\" | \"email\" | \"password\" | \"tel\";\n\n/** Props every specialised input shares. `type` is fixed by the wrapper. */\nexport type FieldProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"value\" | \"defaultValue\" | \"type\"\n> & {\n  label?: string;\n  /** Guidance under the field. Replaced by the error message while invalid. */\n  hint?: ReactNode;\n  /**\n   * Error supplied by the caller — a server-side or cross-field failure. Takes\n   * precedence over the schema, so a form can hold a field invalid regardless\n   * of what `schema` makes of the value on its own.\n   */\n  error?: string;\n  /** Renders the design's muted \"Optional\" marker at the end of the label. */\n  optional?: boolean;\n  /** Trailing label slot, for affordances like the design's \"Forgot?\" link. */\n  action?: ReactNode;\n  /** Trailing in-field slot, for affordances like the design's password peek. */\n  trailing?: ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /**\n   * Any zod schema that accepts a string. Only `safeParse` is used, so a\n   * refined, transformed or preprocessed schema works as well as a plain one.\n   */\n  schema?: FieldSchema;\n  /**\n   * When the schema runs. `blur` — the default — avoids scolding someone\n   * mid-keystroke; once a field has gone invalid it revalidates on every\n   * keystroke so the message clears as soon as it is fixed.\n   */\n  validateOn?: \"blur\" | \"change\" | \"never\";\n  onValidationChange?: (state: FieldValidation) => void;\n};\n\nconst FIELD_CLASSES =\n  \"h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45\";\nconst VALID_CLASSES =\n  \"border-line focus:border-accent focus:ring-3 focus:ring-accent-soft\";\nconst INVALID_CLASSES =\n  \"border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft\";\nfunction fieldClassName(\n  invalid: boolean,\n  hasTrailing: boolean,\n  className: string | undefined,\n): string {\n  return [\n    FIELD_CLASSES,\n    invalid ? INVALID_CLASSES : VALID_CLASSES,\n    hasTrailing ? \"pr-16\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction FieldLabel({\n  htmlFor,\n  label,\n  optional,\n  action,\n}: {\n  htmlFor: string;\n  label: string | undefined;\n  optional: boolean;\n  action: ReactNode;\n}) {\n  if (!label) {\n    return null;\n  }\n\n  return (\n    <Typography\n      variant=\"label\"\n      tone=\"muted\"\n      className=\"mb-1.5 flex items-center\"\n      asChild\n    >\n      <Label htmlFor={htmlFor}>\n        {label}\n        {optional ? (\n          <Typography\n            as=\"span\"\n            variant=\"hint\"\n            tone=\"subtle\"\n            weight=\"semibold\"\n            className=\"ml-auto\"\n          >\n            Optional\n          </Typography>\n        ) : null}\n        {action ? <span className=\"ml-auto\">{action}</span> : null}\n      </Label>\n    </Typography>\n  );\n}\n\nfunction FieldMessage({\n  id,\n  error,\n  hint,\n}: {\n  id: string;\n  error: string | undefined;\n  hint: ReactNode;\n}) {\n  if (error) {\n    return (\n      <Typography\n        as=\"p\"\n        variant=\"hint\"\n        tone=\"danger\"\n        id={id}\n        role=\"alert\"\n        className=\"mt-1.5\"\n      >\n        {error}\n      </Typography>\n    );\n  }\n\n  if (hint) {\n    return (\n      <Typography\n        as=\"p\"\n        variant=\"hint\"\n        tone=\"subtle\"\n        id={id}\n        className=\"mt-1.5\"\n      >\n        {hint}\n      </Typography>\n    );\n  }\n\n  return null;\n}\n\nexport type FieldComponentProps = FieldProps & { type: FieldType };\n\nexport function Field({\n  label,\n  hint,\n  error,\n  optional = false,\n  action,\n  trailing,\n  type,\n  value,\n  defaultValue,\n  onChange,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n  id,\n  className,\n  onBlur,\n  ...rest\n}: FieldComponentProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const describedById = `${inputId}-description`;\n\n  const { currentValue, shownError, handleChange, handleBlur } =\n    useFieldBehaviour({\n      value,\n      defaultValue,\n      error,\n      onChange,\n      onBlur,\n      schema,\n      validateOn,\n      onValidationChange,\n    });\n\n  return (\n    <div className=\"flex flex-col\">\n      <FieldLabel\n        htmlFor={inputId}\n        label={label}\n        optional={optional}\n        action={action}\n      />\n\n      <div className={trailing ? \"relative\" : undefined}>\n        <input\n          {...rest}\n          id={inputId}\n          type={type}\n          value={currentValue}\n          aria-invalid={shownError ? true : undefined}\n          aria-describedby={shownError || hint ? describedById : undefined}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          className={fieldClassName(\n            Boolean(shownError),\n            Boolean(trailing),\n            className,\n          )}\n        />\n        {trailing ? (\n          <span className=\"absolute top-1/2 right-[9px] flex -translate-y-1/2 items-center text-hint font-semibold text-fg-subtle\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n\n      <FieldMessage id={describedById} error={shownError} hint={hint} />\n    </div>\n  );\n}\n","import {\n  type ChangeEvent,\n  type FocusEvent,\n  useCallback,\n  useState,\n} from \"react\";\n\n/**\n * Structural shape of a zod schema — every zod schema satisfies it, and any\n * version of zod does. Declaring it this way rather than importing `ZodType`\n * keeps zod out of this module's public types, so consumers who only want an\n * input do not have to install zod to typecheck it.\n */\nexport type FieldSchema = {\n  safeParse: (\n    value: unknown,\n  ) =>\n    | { success: true }\n    | { success: false; error: { issues: readonly { message: string }[] } };\n};\n\n/** Outcome of a single validation pass, handed to `onValidationChange`. */\nexport type FieldValidation = {\n  valid: boolean;\n  /** First issue reported by the schema, or `undefined` when valid. */\n  error?: string;\n};\n\nexport type FieldBehaviour = {\n  value?: string;\n  defaultValue?: string;\n  /** A caller-supplied error. Outranks the schema's verdict. */\n  error?: string;\n  onChange?: (value: string) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  schema?: FieldSchema;\n  validateOn?: \"blur\" | \"change\" | \"never\";\n  onValidationChange?: (state: FieldValidation) => void;\n};\n\nconst FALLBACK_MESSAGE = \"Invalid value\";\n\nfunction runSchema(\n  schema: FieldSchema | undefined,\n  value: string,\n): FieldValidation {\n  if (!schema) {\n    return { valid: true };\n  }\n\n  const result = schema.safeParse(value);\n  if (result.success) {\n    return { valid: true };\n  }\n\n  return {\n    valid: false,\n    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE,\n  };\n}\n\n/**\n * Owns the value (controlled or not), the schema verdict, and when to re-run\n * it. Split out so the `Field` component itself stays markup.\n */\nexport function useFieldBehaviour({\n  value,\n  defaultValue,\n  error,\n  onChange,\n  onBlur,\n  schema,\n  validateOn = \"blur\",\n  onValidationChange,\n}: FieldBehaviour) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? \"\",\n  );\n  const [schemaError, setSchemaError] = useState<string | undefined>(undefined);\n\n  const isControlled = value !== undefined;\n\n  const validate = useCallback(\n    (next: string) => {\n      const state = runSchema(schema, next);\n      setSchemaError(state.error);\n      onValidationChange?.(state);\n    },\n    [schema, onValidationChange],\n  );\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const next = event.target.value;\n      if (!isControlled) {\n        setUncontrolledValue(next);\n      }\n      onChange?.(next);\n\n      // Revalidate on every keystroke once the field is already invalid, so a\n      // corrected value clears the message without waiting for another blur.\n      if (validateOn === \"change\" || (validateOn === \"blur\" && schemaError)) {\n        validate(next);\n      }\n    },\n    [isControlled, onChange, validateOn, schemaError, validate],\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      if (validateOn === \"blur\") {\n        validate(event.target.value);\n      }\n      onBlur?.(event);\n    },\n    [validateOn, validate, onBlur],\n  );\n\n  return {\n    currentValue: isControlled ? value : uncontrolledValue,\n    // A caller-supplied error outranks the schema's verdict.\n    shownError: error ?? schemaError,\n    handleChange,\n    handleBlur,\n  };\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport type { ElementType, HTMLAttributes, ReactNode, Ref } from \"react\";\n\n/**\n * The library's type scale. Everything that renders text — field labels, hints,\n * form errors, headings — goes through here, so a size or colour lives in one\n * place and the tokens in `src/styles/index.css` stay the single source of\n * truth for what \"hint\" or \"muted\" means.\n *\n * Server-safe: no state, no handlers, no directive. It composes Radix `Slot`\n * for `asChild`, which is how a consumer puts these styles on their own\n * element (a `next/link`, a Radix `Label`) without an extra wrapper.\n */\n\nexport type TypographyVariant =\n  | \"display\"\n  | \"heading\"\n  | \"subheading\"\n  | \"body\"\n  | \"label\"\n  | \"hint\"\n  | \"code\";\n\nexport type TypographyTone =\n  | \"default\"\n  | \"muted\"\n  | \"subtle\"\n  | \"accent\"\n  | \"on-accent\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"danger\";\n\nexport type TypographyWeight = \"regular\" | \"medium\" | \"semibold\" | \"bold\";\n\nexport type TypographyElement =\n  | \"p\"\n  | \"span\"\n  | \"div\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"label\"\n  | \"code\"\n  | \"strong\"\n  | \"em\"\n  | \"small\";\n\nexport type TypographyProps = Omit<HTMLAttributes<HTMLElement>, \"color\"> & {\n  /** Size and default element. `body` unless told otherwise. */\n  variant?: TypographyVariant;\n  /** Colour role, from the design tokens. */\n  tone?: TypographyTone;\n  /** Overrides the variant's default weight. */\n  weight?: TypographyWeight;\n  align?: \"start\" | \"center\" | \"end\";\n  /** Clip to one line with an ellipsis. */\n  truncate?: boolean;\n  /**\n   * An icon rendered beside the text, hidden from assistive tech. Sized to the\n   * text with `1em`, so the same SVG fits every variant.\n   */\n  icon?: ReactNode;\n  iconPosition?: \"leading\" | \"trailing\";\n  /** The element to render. Defaults per variant (`h2` for a heading, and so on). */\n  as?: TypographyElement;\n  /**\n   * Radix-style composition: render the child element itself, with these\n   * styles merged onto it, instead of a wrapper. Takes precedence over `as`.\n   */\n  asChild?: boolean;\n  ref?: Ref<HTMLElement>;\n  children?: ReactNode;\n};\n\nconst DEFAULT_ELEMENT: Record<TypographyVariant, TypographyElement> = {\n  display: \"h1\",\n  heading: \"h2\",\n  subheading: \"h3\",\n  body: \"p\",\n  label: \"span\",\n  hint: \"p\",\n  code: \"code\",\n};\n\nconst DEFAULT_WEIGHT: Record<TypographyVariant, TypographyWeight> = {\n  display: \"semibold\",\n  heading: \"semibold\",\n  subheading: \"medium\",\n  body: \"regular\",\n  label: \"semibold\",\n  hint: \"regular\",\n  code: \"regular\",\n};\n\nconst VARIANT_CLASSES: Record<TypographyVariant, string> = {\n  display: \"text-display leading-tight tracking-tight\",\n  heading: \"text-heading leading-tight tracking-tight\",\n  subheading: \"text-subheading leading-snug\",\n  body: \"text-field leading-normal\",\n  label: \"text-label leading-normal\",\n  hint: \"text-hint leading-normal\",\n  code: \"font-code text-field leading-normal\",\n};\n\nconst TONE_CLASSES: Record<TypographyTone, string> = {\n  default: \"text-fg\",\n  muted: \"text-fg-muted\",\n  subtle: \"text-fg-subtle\",\n  accent: \"text-accent\",\n  \"on-accent\": \"text-on-accent\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  danger: \"text-danger\",\n};\n\nconst WEIGHT_CLASSES: Record<TypographyWeight, string> = {\n  regular: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\",\n};\n\nconst ALIGN_CLASSES = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n} as const;\n\nconst ICON_CLASSES =\n  \"inline-flex shrink-0 items-center [&>svg]:h-[1em] [&>svg]:w-[1em]\";\n\nfunction typographyClassName({\n  variant,\n  tone,\n  weight,\n  align,\n  truncate,\n  hasIcon,\n  className,\n}: {\n  variant: TypographyVariant;\n  tone: TypographyTone;\n  weight: TypographyWeight;\n  align: \"start\" | \"center\" | \"end\" | undefined;\n  truncate: boolean;\n  hasIcon: boolean;\n  className: string | undefined;\n}): string {\n  return [\n    VARIANT_CLASSES[variant],\n    TONE_CLASSES[tone],\n    WEIGHT_CLASSES[weight],\n    align ? ALIGN_CLASSES[align] : \"\",\n    hasIcon ? \"inline-flex items-center gap-1.5\" : \"\",\n    // With an icon the root is a flex container, and text-overflow only\n    // clips block text, so the text span carries the truncation instead.\n    truncate && !hasIcon ? \"truncate\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nexport function Typography({\n  variant = \"body\",\n  tone = \"default\",\n  weight,\n  align,\n  truncate = false,\n  icon,\n  iconPosition = \"leading\",\n  as,\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: TypographyProps) {\n  const hasIcon = icon !== undefined && icon !== null;\n  // Widened to `ElementType`: the union of intrinsic tags would otherwise\n  // demand a `ref` typed to one specific element.\n  const Component: ElementType = asChild\n    ? Slot\n    : (as ?? DEFAULT_ELEMENT[variant]);\n\n  const iconNode = hasIcon ? (\n    <span aria-hidden=\"true\" className={ICON_CLASSES}>\n      {icon}\n    </span>\n  ) : null;\n\n  const content = hasIcon ? (\n    <>\n      {iconPosition === \"leading\" ? iconNode : null}\n      <span className={truncate ? \"min-w-0 truncate\" : undefined}>\n        {children}\n      </span>\n      {iconPosition === \"trailing\" ? iconNode : null}\n    </>\n  ) : (\n    children\n  );\n\n  return (\n    <Component\n      {...rest}\n      className={typographyClassName({\n        variant,\n        tone,\n        weight: weight ?? DEFAULT_WEIGHT[variant],\n        align,\n        truncate,\n        hasIcon,\n        className,\n      })}\n    >\n      {content}\n    </Component>\n  );\n}\n","\"use client\";\n\nimport { Field, type FieldProps } from \"@/components/field\";\n\nexport type {\n  FieldSchema,\n  FieldValidation,\n} from \"@/components/field\";\n\n/**\n * An email address. Fixes `type=\"email\"` and the keyboard and autofill hints\n * that go with it. Pair it with `emailSchema` from `@carbonbits/sixr/validation`\n * to validate inline; the schema stays opt-in so this bundle does not require\n * zod.\n */\nexport type EmailInputProps = FieldProps;\n\nexport function EmailInput({\n  autoComplete = \"email\",\n  inputMode = \"email\",\n  autoCapitalize = \"none\",\n  spellCheck = false,\n  ...rest\n}: EmailInputProps) {\n  return (\n    <Field\n      {...rest}\n      type=\"email\"\n      autoComplete={autoComplete}\n      inputMode={inputMode}\n      autoCapitalize={autoCapitalize}\n      spellCheck={spellCheck}\n    />\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx"]}
+{"version":3,"sources":["../src/components/field/index.tsx","../src/components/typography/index.tsx","../src/components/input/index.tsx","../src/components/email-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Label } from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport {\n  type FieldValues,\n  type UseFormReturn,\n  useController,\n  useFormContext,\n} from \"react-hook-form\";\n\n/**\n * The structure behind every form field, with no styling of its own: an id\n * shared by label and control, the error and description ids the control is\n * described by, the field's validity, and — inside a `Form` — the\n * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep\n * the control registered.\n *\n * Styled components compose these primitives with their own classes\n * (`TextInput` and friends do), and a screen that needs a control the\n * library does not ship — a select, a code entry, a toggle — composes them\n * the same way. Everything here is a plain element or a Radix `Slot`, so the\n * styling decisions stay with whoever renders the field.\n *\n * Outside a `Form` the primitives still wire label, control and messages\n * together; the control just isn't registered anywhere and the error comes\n * from the `error` prop alone.\n */\n\nexport type FieldBindings = {\n  name: string;\n  value?: unknown;\n  onChange?: (event: unknown) => void;\n  onBlur?: () => void;\n  ref?: (instance: HTMLElement | null) => void;\n};\n\nexport type FieldContextValue = {\n  id: string;\n  name: string;\n  descriptionId: string;\n  messageId: string;\n  error: string | undefined;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n  hasDescription: boolean;\n  setHasDescription: (present: boolean) => void;\n  bindings: FieldBindings;\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\n// biome-ignore lint/style/useComponentExportOnlyModules: the hook is the primitives' public API for custom compositions and belongs on the same subpath.\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext);\n\n  if (!context) {\n    throw new Error(\"Field primitives must be rendered inside FieldRoot\");\n  }\n\n  return context;\n}\n\nexport type FieldRootProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** The form field this wires up — the key in the `Form`'s values. */\n  name: string;\n  /** A caller-supplied error. Outranks whatever the form's schema reports. */\n  error?: string;\n  required?: boolean;\n  disabled?: boolean;\n  /** Render the child element as the root instead of a `div`. */\n  asChild?: boolean;\n  children: ReactNode;\n};\n\ntype FieldShellProps = Omit<\n  FieldRootProps,\n  \"name\" | \"error\" | \"required\" | \"disabled\"\n> & {\n  value: Omit<FieldContextValue, \"hasDescription\" | \"setHasDescription\">;\n};\n\nfunction useFieldIds(id: string | undefined) {\n  const generated = useId();\n  const base = id ?? generated;\n\n  return {\n    id: base,\n    descriptionId: `${base}-description`,\n    messageId: `${base}-message`,\n  };\n}\n\nfunction FieldShell({\n  value,\n  asChild = false,\n  children,\n  ...rest\n}: FieldShellProps) {\n  const [hasDescription, setHasDescription] = useState(false);\n  const Component = asChild ? Slot : \"div\";\n\n  return (\n    <FieldContext.Provider\n      value={{ ...value, hasDescription, setHasDescription }}\n    >\n      <Component\n        {...rest}\n        data-invalid={value.invalid ? \"\" : undefined}\n        data-disabled={value.disabled ? \"\" : undefined}\n      >\n        {children}\n      </Component>\n    </FieldContext.Provider>\n  );\n}\n\nfunction ConnectedFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n  const { field, fieldState } = useController({ name, disabled });\n  const shownError = error ?? fieldState.error?.message;\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error: shownError,\n        invalid: Boolean(shownError),\n        required,\n        disabled: Boolean(field.disabled ?? disabled),\n        bindings: {\n          name: field.name,\n          value: field.value ?? \"\",\n          onChange: field.onChange,\n          onBlur: field.onBlur,\n          ref: field.ref,\n        },\n      }}\n    />\n  );\n}\n\nfunction StandaloneFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error,\n        invalid: Boolean(error),\n        required,\n        disabled,\n        bindings: { name },\n      }}\n    />\n  );\n}\n\nexport function FieldRoot(props: FieldRootProps) {\n  const form = useFormContext() as UseFormReturn<FieldValues> | null;\n\n  return form ? (\n    <ConnectedFieldRoot {...props} />\n  ) : (\n    <StandaloneFieldRoot {...props} />\n  );\n}\n\nexport type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;\n\nexport function FieldLabel(props: FieldLabelProps) {\n  const { id } = useFieldContext();\n\n  return <Label {...props} htmlFor={id} />;\n}\n\nexport type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;\n\nfunction describedBy({\n  error,\n  messageId,\n  hasDescription,\n  descriptionId,\n}: Pick<\n  FieldContextValue,\n  \"error\" | \"messageId\" | \"hasDescription\" | \"descriptionId\"\n>): string | undefined {\n  if (error) {\n    return messageId;\n  }\n\n  return hasDescription ? descriptionId : undefined;\n}\n\n/**\n * Wires the field's id, name, validity and bindings onto whatever element it\n * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.\n * Handlers on the child still run; the bindings run after them.\n */\nexport function FieldControl(props: FieldControlProps) {\n  const context = useFieldContext();\n  const { id, invalid, required, disabled, bindings } = context;\n\n  // `disabled` is not on Slot's HTMLAttributes type, but it is what the\n  // wrapped control needs, so the bindings are spread untyped on purpose.\n  const controlProps: Record<string, unknown> = {\n    ...bindings,\n    id,\n    \"aria-invalid\": invalid || undefined,\n    \"aria-required\": required || undefined,\n    \"aria-describedby\": describedBy(context),\n    disabled: disabled || undefined,\n  };\n\n  return <Slot {...props} {...controlProps} />;\n}\n\nexport type FieldDescriptionProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/** Guidance under the control. Hidden while the field has an error. */\nexport function FieldDescription({\n  asChild = false,\n  ...props\n}: FieldDescriptionProps) {\n  const { descriptionId, error, setHasDescription } = useFieldContext();\n\n  useEffect(() => {\n    setHasDescription(true);\n\n    return () => setHasDescription(false);\n  }, [setHasDescription]);\n\n  if (error) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return <Component {...props} id={descriptionId} />;\n}\n\nexport type FieldMessageProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/**\n * The field's error, announced as an alert. Renders the error the field\n * currently holds; `children` is a fallback for a message the caller wants to\n * show in its place. Nothing renders while the field is valid.\n */\nexport function FieldMessage({\n  asChild = false,\n  children,\n  ...props\n}: FieldMessageProps) {\n  const { messageId, error } = useFieldContext();\n  const content = error ?? children;\n\n  if (!content) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return (\n    <Component {...props} id={messageId} role=\"alert\">\n      {content}\n    </Component>\n  );\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport type { ElementType, HTMLAttributes, ReactNode, Ref } from \"react\";\n\n/**\n * The library's type scale. Everything that renders text — field labels, hints,\n * form errors, headings — goes through here, so a size or colour lives in one\n * place and the tokens in `src/styles/index.css` stay the single source of\n * truth for what \"hint\" or \"muted\" means.\n *\n * Server-safe: no state, no handlers, no directive. It composes Radix `Slot`\n * for `asChild`, which is how a consumer puts these styles on their own\n * element (a `next/link`, a Radix `Label`) without an extra wrapper.\n */\n\nexport type TypographyVariant =\n  | \"display\"\n  | \"heading\"\n  | \"subheading\"\n  | \"body\"\n  | \"label\"\n  | \"hint\"\n  | \"code\";\n\nexport type TypographyTone =\n  | \"default\"\n  | \"muted\"\n  | \"subtle\"\n  | \"accent\"\n  | \"on-accent\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"danger\";\n\nexport type TypographyWeight = \"regular\" | \"medium\" | \"semibold\" | \"bold\";\n\nexport type TypographyElement =\n  | \"p\"\n  | \"span\"\n  | \"div\"\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"label\"\n  | \"code\"\n  | \"strong\"\n  | \"em\"\n  | \"small\";\n\nexport type TypographyProps = Omit<HTMLAttributes<HTMLElement>, \"color\"> & {\n  /** Size and default element. `body` unless told otherwise. */\n  variant?: TypographyVariant;\n  /** Colour role, from the design tokens. */\n  tone?: TypographyTone;\n  /** Overrides the variant's default weight. */\n  weight?: TypographyWeight;\n  align?: \"start\" | \"center\" | \"end\";\n  /** Clip to one line with an ellipsis. */\n  truncate?: boolean;\n  /**\n   * An icon rendered beside the text, hidden from assistive tech. Sized to the\n   * text with `1em`, so the same SVG fits every variant.\n   */\n  icon?: ReactNode;\n  iconPosition?: \"leading\" | \"trailing\";\n  /** The element to render. Defaults per variant (`h2` for a heading, and so on). */\n  as?: TypographyElement;\n  /**\n   * Radix-style composition: render the child element itself, with these\n   * styles merged onto it, instead of a wrapper. Takes precedence over `as`.\n   */\n  asChild?: boolean;\n  ref?: Ref<HTMLElement>;\n  children?: ReactNode;\n};\n\nconst DEFAULT_ELEMENT: Record<TypographyVariant, TypographyElement> = {\n  display: \"h1\",\n  heading: \"h2\",\n  subheading: \"h3\",\n  body: \"p\",\n  label: \"span\",\n  hint: \"p\",\n  code: \"code\",\n};\n\nconst DEFAULT_WEIGHT: Record<TypographyVariant, TypographyWeight> = {\n  display: \"semibold\",\n  heading: \"semibold\",\n  subheading: \"medium\",\n  body: \"regular\",\n  label: \"semibold\",\n  hint: \"regular\",\n  code: \"regular\",\n};\n\nconst VARIANT_CLASSES: Record<TypographyVariant, string> = {\n  display: \"text-display leading-tight tracking-tight\",\n  heading: \"text-heading leading-tight tracking-tight\",\n  subheading: \"text-subheading leading-snug\",\n  body: \"text-field leading-normal\",\n  label: \"text-label leading-normal\",\n  hint: \"text-hint leading-normal\",\n  code: \"font-code text-field leading-normal\",\n};\n\nconst TONE_CLASSES: Record<TypographyTone, string> = {\n  default: \"text-fg\",\n  muted: \"text-fg-muted\",\n  subtle: \"text-fg-subtle\",\n  accent: \"text-accent\",\n  \"on-accent\": \"text-on-accent\",\n  success: \"text-success\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  danger: \"text-danger\",\n};\n\nconst WEIGHT_CLASSES: Record<TypographyWeight, string> = {\n  regular: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n  bold: \"font-bold\",\n};\n\nconst ALIGN_CLASSES = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n} as const;\n\nconst ICON_CLASSES =\n  \"inline-flex shrink-0 items-center [&>svg]:h-[1em] [&>svg]:w-[1em]\";\n\nfunction typographyClassName({\n  variant,\n  tone,\n  weight,\n  align,\n  truncate,\n  hasIcon,\n  className,\n}: {\n  variant: TypographyVariant;\n  tone: TypographyTone;\n  weight: TypographyWeight;\n  align: \"start\" | \"center\" | \"end\" | undefined;\n  truncate: boolean;\n  hasIcon: boolean;\n  className: string | undefined;\n}): string {\n  return [\n    VARIANT_CLASSES[variant],\n    TONE_CLASSES[tone],\n    WEIGHT_CLASSES[weight],\n    align ? ALIGN_CLASSES[align] : \"\",\n    hasIcon ? \"inline-flex items-center gap-1.5\" : \"\",\n    // With an icon the root is a flex container, and text-overflow only\n    // clips block text, so the text span carries the truncation instead.\n    truncate && !hasIcon ? \"truncate\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nexport function Typography({\n  variant = \"body\",\n  tone = \"default\",\n  weight,\n  align,\n  truncate = false,\n  icon,\n  iconPosition = \"leading\",\n  as,\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: TypographyProps) {\n  const hasIcon = icon !== undefined && icon !== null;\n  // Widened to `ElementType`: the union of intrinsic tags would otherwise\n  // demand a `ref` typed to one specific element.\n  const Component: ElementType = asChild\n    ? Slot\n    : (as ?? DEFAULT_ELEMENT[variant]);\n\n  const iconNode = hasIcon ? (\n    <span aria-hidden=\"true\" className={ICON_CLASSES}>\n      {icon}\n    </span>\n  ) : null;\n\n  const content = hasIcon ? (\n    <>\n      {iconPosition === \"leading\" ? iconNode : null}\n      <span className={truncate ? \"min-w-0 truncate\" : undefined}>\n        {children}\n      </span>\n      {iconPosition === \"trailing\" ? iconNode : null}\n    </>\n  ) : (\n    children\n  );\n\n  return (\n    <Component\n      {...rest}\n      className={typographyClassName({\n        variant,\n        tone,\n        weight: weight ?? DEFAULT_WEIGHT[variant],\n        align,\n        truncate,\n        hasIcon,\n        className,\n      })}\n    >\n      {content}\n    </Component>\n  );\n}\n","\"use client\";\n\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport {\n  FieldControl,\n  FieldDescription,\n  FieldLabel,\n  FieldMessage,\n  FieldRoot,\n  useFieldContext,\n} from \"@/components/field\";\nimport { Typography } from \"@/components/typography\";\n\n/**\n * The design's single-line input, composed from the headless `Field`\n * primitives: label with the optional marker and action slot, the control\n * with its trailing slot, and the hint or error beneath. `TextInput`,\n * `EmailInput`, `PasswordInput` and `PhoneInput` each fix the `type` and the\n * keyboard/autofill hints and hand everything else here.\n *\n * Internal: no subpath of its own. Consumers reach it through the\n * specialised inputs, or build their own composition from `Field`.\n */\n\nexport type InputType = \"text\" | \"email\" | \"password\" | \"tel\";\n\nexport type InputFieldProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"name\" | \"type\"\n> & {\n  /** The form field this input edits — the key in the `Form`'s values. */\n  name: string;\n  label?: string;\n  /** Guidance under the field. Replaced by the error message while invalid. */\n  hint?: ReactNode;\n  /**\n   * Error supplied by the caller — a server-side or cross-field failure. Takes\n   * precedence over what the form's schema reports for this field.\n   */\n  error?: string;\n  /** Renders the design's muted \"Optional\" marker at the end of the label. */\n  optional?: boolean;\n  /** Trailing label slot, for affordances like the design's \"Forgot?\" link. */\n  action?: ReactNode;\n  /** Trailing in-field slot, for affordances like the design's password peek. */\n  trailing?: ReactNode;\n};\n\ntype InputFieldComponentProps = InputFieldProps & { type: InputType };\n\nconst CONTROL_CLASSES =\n  \"h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45\";\nconst VALID_CLASSES =\n  \"border-line focus:border-accent focus:ring-3 focus:ring-accent-soft\";\nconst INVALID_CLASSES =\n  \"border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft\";\n\nfunction InputLabel({\n  label,\n  optional,\n  action,\n}: {\n  label: string;\n  optional: boolean;\n  action: ReactNode;\n}) {\n  return (\n    <Typography\n      variant=\"label\"\n      tone=\"muted\"\n      className=\"mb-1.5 flex items-center\"\n      asChild\n    >\n      <FieldLabel>\n        {label}\n        {optional ? (\n          <Typography\n            as=\"span\"\n            variant=\"hint\"\n            tone=\"subtle\"\n            weight=\"semibold\"\n            className=\"ml-auto\"\n          >\n            Optional\n          </Typography>\n        ) : null}\n        {action ? <span className=\"ml-auto\">{action}</span> : null}\n      </FieldLabel>\n    </Typography>\n  );\n}\n\nfunction InputControl({\n  hasTrailing,\n  className,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"input\">, \"name\"> & {\n  hasTrailing: boolean;\n}) {\n  const { invalid } = useFieldContext();\n\n  return (\n    <FieldControl>\n      <input\n        {...rest}\n        className={[\n          CONTROL_CLASSES,\n          invalid ? INVALID_CLASSES : VALID_CLASSES,\n          hasTrailing ? \"pr-16\" : \"\",\n          className ?? \"\",\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n      />\n    </FieldControl>\n  );\n}\n\nfunction InputMessages({ hint }: { hint: ReactNode }) {\n  const { error } = useFieldContext();\n\n  if (error) {\n    return (\n      <Typography as=\"p\" variant=\"hint\" tone=\"danger\" asChild>\n        <FieldMessage className=\"mt-1.5\" />\n      </Typography>\n    );\n  }\n\n  if (hint) {\n    return (\n      <Typography as=\"p\" variant=\"hint\" tone=\"subtle\" asChild>\n        <FieldDescription className=\"mt-1.5\">{hint}</FieldDescription>\n      </Typography>\n    );\n  }\n\n  return null;\n}\n\nexport function InputField({\n  name,\n  label,\n  hint,\n  error,\n  optional = false,\n  action,\n  trailing,\n  id,\n  disabled,\n  required,\n  type,\n  ...rest\n}: InputFieldComponentProps) {\n  return (\n    <FieldRoot\n      name={name}\n      id={id}\n      error={error}\n      disabled={disabled}\n      required={required}\n      className=\"flex flex-col\"\n    >\n      {label ? (\n        <InputLabel label={label} optional={optional} action={action} />\n      ) : null}\n\n      <div className={trailing ? \"relative\" : undefined}>\n        <InputControl {...rest} type={type} hasTrailing={Boolean(trailing)} />\n        {trailing ? (\n          <span className=\"absolute top-1/2 right-[9px] flex -translate-y-1/2 items-center font-semibold text-fg-subtle text-hint\">\n            {trailing}\n          </span>\n        ) : null}\n      </div>\n\n      <InputMessages hint={hint} />\n    </FieldRoot>\n  );\n}\n","\"use client\";\n\nimport { InputField, type InputFieldProps } from \"@/components/input\";\n\n/**\n * An email address. Fixes `type=\"email\"` and the keyboard and autofill hints\n * that go with it. Validate it with `emailSchema` from\n * `@carbonbits/sixr/validation` in the enclosing `Form`'s schema.\n */\nexport type EmailInputProps = InputFieldProps;\n\nexport function EmailInput({\n  autoComplete = \"email\",\n  inputMode = \"email\",\n  autoCapitalize = \"none\",\n  spellCheck = false,\n  ...rest\n}: EmailInputProps) {\n  return (\n    <InputField\n      {...rest}\n      type=\"email\"\n      autoComplete={autoComplete}\n      inputMode={inputMode}\n      autoCapitalize={autoCapitalize}\n      spellCheck={spellCheck}\n    />\n  );\n}\n"],"mappings":"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","names":["Slot","jsx","jsx","jsxs","jsx"]}

package/dist/field.cjs

@@ -0,0 +1,206 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/field/index.tsx
+var field_exports = {};
+__export(field_exports, {
+  FieldControl: () => FieldControl,
+  FieldDescription: () => FieldDescription,
+  FieldLabel: () => FieldLabel,
+  FieldMessage: () => FieldMessage,
+  FieldRoot: () => FieldRoot,
+  useFieldContext: () => useFieldContext
+});
+module.exports = __toCommonJS(field_exports);
+var import_react_label = require("@radix-ui/react-label");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FieldContext = (0, import_react.createContext)(null);
+function useFieldContext() {
+  const context = (0, import_react.useContext)(FieldContext);
+  if (!context) {
+    throw new Error("Field primitives must be rendered inside FieldRoot");
+  }
+  return context;
+}
+function useFieldIds(id) {
+  const generated = (0, import_react.useId)();
+  const base = id ?? generated;
+  return {
+    id: base,
+    descriptionId: `${base}-description`,
+    messageId: `${base}-message`
+  };
+}
+function FieldShell({
+  value,
+  asChild = false,
+  children,
+  ...rest
+}) {
+  const [hasDescription, setHasDescription] = (0, import_react.useState)(false);
+  const Component = asChild ? import_react_slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldContext.Provider,
+    {
+      value: { ...value, hasDescription, setHasDescription },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Component,
+        {
+          ...rest,
+          "data-invalid": value.invalid ? "" : void 0,
+          "data-disabled": value.disabled ? "" : void 0,
+          children
+        }
+      )
+    }
+  );
+}
+function ConnectedFieldRoot({
+  name,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  ...rest
+}) {
+  const ids = useFieldIds(id);
+  const { field, fieldState } = (0, import_react_hook_form.useController)({ name, disabled });
+  const shownError = error ?? fieldState.error?.message;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldShell,
+    {
+      ...rest,
+      value: {
+        ...ids,
+        name,
+        error: shownError,
+        invalid: Boolean(shownError),
+        required,
+        disabled: Boolean(field.disabled ?? disabled),
+        bindings: {
+          name: field.name,
+          value: field.value ?? "",
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          ref: field.ref
+        }
+      }
+    }
+  );
+}
+function StandaloneFieldRoot({
+  name,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  ...rest
+}) {
+  const ids = useFieldIds(id);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldShell,
+    {
+      ...rest,
+      value: {
+        ...ids,
+        name,
+        error,
+        invalid: Boolean(error),
+        required,
+        disabled,
+        bindings: { name }
+      }
+    }
+  );
+}
+function FieldRoot(props) {
+  const form = (0, import_react_hook_form.useFormContext)();
+  return form ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectedFieldRoot, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StandaloneFieldRoot, { ...props });
+}
+function FieldLabel(props) {
+  const { id } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_label.Label, { ...props, htmlFor: id });
+}
+function describedBy({
+  error,
+  messageId,
+  hasDescription,
+  descriptionId
+}) {
+  if (error) {
+    return messageId;
+  }
+  return hasDescription ? descriptionId : void 0;
+}
+function FieldControl(props) {
+  const context = useFieldContext();
+  const { id, invalid, required, disabled, bindings } = context;
+  const controlProps = {
+    ...bindings,
+    id,
+    "aria-invalid": invalid || void 0,
+    "aria-required": required || void 0,
+    "aria-describedby": describedBy(context),
+    disabled: disabled || void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slot, { ...props, ...controlProps });
+}
+function FieldDescription({
+  asChild = false,
+  ...props
+}) {
+  const { descriptionId, error, setHasDescription } = useFieldContext();
+  (0, import_react.useEffect)(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
+  if (error) {
+    return null;
+  }
+  const Component = asChild ? import_react_slot.Slot : "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, id: descriptionId });
+}
+function FieldMessage({
+  asChild = false,
+  children,
+  ...props
+}) {
+  const { messageId, error } = useFieldContext();
+  const content = error ?? children;
+  if (!content) {
+    return null;
+  }
+  const Component = asChild ? import_react_slot.Slot : "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, id: messageId, role: "alert", children: content });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FieldControl,
+  FieldDescription,
+  FieldLabel,
+  FieldMessage,
+  FieldRoot,
+  useFieldContext
+});
+//# sourceMappingURL=field.cjs.map

package/dist/field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/field/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Label } from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport {\n  type FieldValues,\n  type UseFormReturn,\n  useController,\n  useFormContext,\n} from \"react-hook-form\";\n\n/**\n * The structure behind every form field, with no styling of its own: an id\n * shared by label and control, the error and description ids the control is\n * described by, the field's validity, and — inside a `Form` — the\n * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep\n * the control registered.\n *\n * Styled components compose these primitives with their own classes\n * (`TextInput` and friends do), and a screen that needs a control the\n * library does not ship — a select, a code entry, a toggle — composes them\n * the same way. Everything here is a plain element or a Radix `Slot`, so the\n * styling decisions stay with whoever renders the field.\n *\n * Outside a `Form` the primitives still wire label, control and messages\n * together; the control just isn't registered anywhere and the error comes\n * from the `error` prop alone.\n */\n\nexport type FieldBindings = {\n  name: string;\n  value?: unknown;\n  onChange?: (event: unknown) => void;\n  onBlur?: () => void;\n  ref?: (instance: HTMLElement | null) => void;\n};\n\nexport type FieldContextValue = {\n  id: string;\n  name: string;\n  descriptionId: string;\n  messageId: string;\n  error: string | undefined;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n  hasDescription: boolean;\n  setHasDescription: (present: boolean) => void;\n  bindings: FieldBindings;\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\n// biome-ignore lint/style/useComponentExportOnlyModules: the hook is the primitives' public API for custom compositions and belongs on the same subpath.\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext);\n\n  if (!context) {\n    throw new Error(\"Field primitives must be rendered inside FieldRoot\");\n  }\n\n  return context;\n}\n\nexport type FieldRootProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** The form field this wires up — the key in the `Form`'s values. */\n  name: string;\n  /** A caller-supplied error. Outranks whatever the form's schema reports. */\n  error?: string;\n  required?: boolean;\n  disabled?: boolean;\n  /** Render the child element as the root instead of a `div`. */\n  asChild?: boolean;\n  children: ReactNode;\n};\n\ntype FieldShellProps = Omit<\n  FieldRootProps,\n  \"name\" | \"error\" | \"required\" | \"disabled\"\n> & {\n  value: Omit<FieldContextValue, \"hasDescription\" | \"setHasDescription\">;\n};\n\nfunction useFieldIds(id: string | undefined) {\n  const generated = useId();\n  const base = id ?? generated;\n\n  return {\n    id: base,\n    descriptionId: `${base}-description`,\n    messageId: `${base}-message`,\n  };\n}\n\nfunction FieldShell({\n  value,\n  asChild = false,\n  children,\n  ...rest\n}: FieldShellProps) {\n  const [hasDescription, setHasDescription] = useState(false);\n  const Component = asChild ? Slot : \"div\";\n\n  return (\n    <FieldContext.Provider\n      value={{ ...value, hasDescription, setHasDescription }}\n    >\n      <Component\n        {...rest}\n        data-invalid={value.invalid ? \"\" : undefined}\n        data-disabled={value.disabled ? \"\" : undefined}\n      >\n        {children}\n      </Component>\n    </FieldContext.Provider>\n  );\n}\n\nfunction ConnectedFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n  const { field, fieldState } = useController({ name, disabled });\n  const shownError = error ?? fieldState.error?.message;\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error: shownError,\n        invalid: Boolean(shownError),\n        required,\n        disabled: Boolean(field.disabled ?? disabled),\n        bindings: {\n          name: field.name,\n          value: field.value ?? \"\",\n          onChange: field.onChange,\n          onBlur: field.onBlur,\n          ref: field.ref,\n        },\n      }}\n    />\n  );\n}\n\nfunction StandaloneFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error,\n        invalid: Boolean(error),\n        required,\n        disabled,\n        bindings: { name },\n      }}\n    />\n  );\n}\n\nexport function FieldRoot(props: FieldRootProps) {\n  const form = useFormContext() as UseFormReturn<FieldValues> | null;\n\n  return form ? (\n    <ConnectedFieldRoot {...props} />\n  ) : (\n    <StandaloneFieldRoot {...props} />\n  );\n}\n\nexport type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;\n\nexport function FieldLabel(props: FieldLabelProps) {\n  const { id } = useFieldContext();\n\n  return <Label {...props} htmlFor={id} />;\n}\n\nexport type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;\n\nfunction describedBy({\n  error,\n  messageId,\n  hasDescription,\n  descriptionId,\n}: Pick<\n  FieldContextValue,\n  \"error\" | \"messageId\" | \"hasDescription\" | \"descriptionId\"\n>): string | undefined {\n  if (error) {\n    return messageId;\n  }\n\n  return hasDescription ? descriptionId : undefined;\n}\n\n/**\n * Wires the field's id, name, validity and bindings onto whatever element it\n * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.\n * Handlers on the child still run; the bindings run after them.\n */\nexport function FieldControl(props: FieldControlProps) {\n  const context = useFieldContext();\n  const { id, invalid, required, disabled, bindings } = context;\n\n  // `disabled` is not on Slot's HTMLAttributes type, but it is what the\n  // wrapped control needs, so the bindings are spread untyped on purpose.\n  const controlProps: Record<string, unknown> = {\n    ...bindings,\n    id,\n    \"aria-invalid\": invalid || undefined,\n    \"aria-required\": required || undefined,\n    \"aria-describedby\": describedBy(context),\n    disabled: disabled || undefined,\n  };\n\n  return <Slot {...props} {...controlProps} />;\n}\n\nexport type FieldDescriptionProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/** Guidance under the control. Hidden while the field has an error. */\nexport function FieldDescription({\n  asChild = false,\n  ...props\n}: FieldDescriptionProps) {\n  const { descriptionId, error, setHasDescription } = useFieldContext();\n\n  useEffect(() => {\n    setHasDescription(true);\n\n    return () => setHasDescription(false);\n  }, [setHasDescription]);\n\n  if (error) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return <Component {...props} id={descriptionId} />;\n}\n\nexport type FieldMessageProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/**\n * The field's error, announced as an alert. Renders the error the field\n * currently holds; `children` is a fallback for a message the caller wants to\n * show in its place. Nothing renders while the field is valid.\n */\nexport function FieldMessage({\n  asChild = false,\n  children,\n  ...props\n}: FieldMessageProps) {\n  const { messageId, error } = useFieldContext();\n  const content = error ?? children;\n\n  if (!content) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return (\n    <Component {...props} id={messageId} role=\"alert\">\n      {content}\n    </Component>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/field.d.cts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Label } from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+
+/**
+ * The structure behind every form field, with no styling of its own: an id
+ * shared by label and control, the error and description ids the control is
+ * described by, the field's validity, and — inside a `Form` — the
+ * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep
+ * the control registered.
+ *
+ * Styled components compose these primitives with their own classes
+ * (`TextInput` and friends do), and a screen that needs a control the
+ * library does not ship — a select, a code entry, a toggle — composes them
+ * the same way. Everything here is a plain element or a Radix `Slot`, so the
+ * styling decisions stay with whoever renders the field.
+ *
+ * Outside a `Form` the primitives still wire label, control and messages
+ * together; the control just isn't registered anywhere and the error comes
+ * from the `error` prop alone.
+ */
+type FieldBindings = {
+    name: string;
+    value?: unknown;
+    onChange?: (event: unknown) => void;
+    onBlur?: () => void;
+    ref?: (instance: HTMLElement | null) => void;
+};
+type FieldContextValue = {
+    id: string;
+    name: string;
+    descriptionId: string;
+    messageId: string;
+    error: string | undefined;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
+    bindings: FieldBindings;
+};
+declare function useFieldContext(): FieldContextValue;
+type FieldRootProps = ComponentPropsWithoutRef<"div"> & {
+    /** The form field this wires up — the key in the `Form`'s values. */
+    name: string;
+    /** A caller-supplied error. Outranks whatever the form's schema reports. */
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Render the child element as the root instead of a `div`. */
+    asChild?: boolean;
+    children: ReactNode;
+};
+declare function FieldRoot(props: FieldRootProps): react.JSX.Element;
+type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;
+declare function FieldLabel(props: FieldLabelProps): react.JSX.Element;
+type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;
+/**
+ * Wires the field's id, name, validity and bindings onto whatever element it
+ * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.
+ * Handlers on the child still run; the bindings run after them.
+ */
+declare function FieldControl(props: FieldControlProps): react.JSX.Element;
+type FieldDescriptionProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+/** Guidance under the control. Hidden while the field has an error. */
+declare function FieldDescription({ asChild, ...props }: FieldDescriptionProps): react.JSX.Element | null;
+type FieldMessageProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+/**
+ * The field's error, announced as an alert. Renders the error the field
+ * currently holds; `children` is a fallback for a message the caller wants to
+ * show in its place. Nothing renders while the field is valid.
+ */
+declare function FieldMessage({ asChild, children, ...props }: FieldMessageProps): react.JSX.Element | null;
+
+export { type FieldBindings, type FieldContextValue, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldLabel, type FieldLabelProps, FieldMessage, type FieldMessageProps, FieldRoot, type FieldRootProps, useFieldContext };

package/dist/field.d.ts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Label } from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+
+/**
+ * The structure behind every form field, with no styling of its own: an id
+ * shared by label and control, the error and description ids the control is
+ * described by, the field's validity, and — inside a `Form` — the
+ * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep
+ * the control registered.
+ *
+ * Styled components compose these primitives with their own classes
+ * (`TextInput` and friends do), and a screen that needs a control the
+ * library does not ship — a select, a code entry, a toggle — composes them
+ * the same way. Everything here is a plain element or a Radix `Slot`, so the
+ * styling decisions stay with whoever renders the field.
+ *
+ * Outside a `Form` the primitives still wire label, control and messages
+ * together; the control just isn't registered anywhere and the error comes
+ * from the `error` prop alone.
+ */
+type FieldBindings = {
+    name: string;
+    value?: unknown;
+    onChange?: (event: unknown) => void;
+    onBlur?: () => void;
+    ref?: (instance: HTMLElement | null) => void;
+};
+type FieldContextValue = {
+    id: string;
+    name: string;
+    descriptionId: string;
+    messageId: string;
+    error: string | undefined;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
+    bindings: FieldBindings;
+};
+declare function useFieldContext(): FieldContextValue;
+type FieldRootProps = ComponentPropsWithoutRef<"div"> & {
+    /** The form field this wires up — the key in the `Form`'s values. */
+    name: string;
+    /** A caller-supplied error. Outranks whatever the form's schema reports. */
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Render the child element as the root instead of a `div`. */
+    asChild?: boolean;
+    children: ReactNode;
+};
+declare function FieldRoot(props: FieldRootProps): react.JSX.Element;
+type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;
+declare function FieldLabel(props: FieldLabelProps): react.JSX.Element;
+type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;
+/**
+ * Wires the field's id, name, validity and bindings onto whatever element it
+ * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.
+ * Handlers on the child still run; the bindings run after them.
+ */
+declare function FieldControl(props: FieldControlProps): react.JSX.Element;
+type FieldDescriptionProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+/** Guidance under the control. Hidden while the field has an error. */
+declare function FieldDescription({ asChild, ...props }: FieldDescriptionProps): react.JSX.Element | null;
+type FieldMessageProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+/**
+ * The field's error, announced as an alert. Renders the error the field
+ * currently holds; `children` is a fallback for a message the caller wants to
+ * show in its place. Nothing renders while the field is valid.
+ */
+declare function FieldMessage({ asChild, children, ...props }: FieldMessageProps): react.JSX.Element | null;
+
+export { type FieldBindings, type FieldContextValue, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldLabel, type FieldLabelProps, FieldMessage, type FieldMessageProps, FieldRoot, type FieldRootProps, useFieldContext };