import { cn } from "#lib/utils.ts";
import { inputGroup as styles } from "./classes.ts";

export interface Input extends Marko.Input<"div"> {
  /**
   * Marks the group as disabled. Sets `aria-disabled="true"` on the root (the
   * ARIA signal that the group's addons are dimmed for) and `data-disabled`,
   * which every descendant addon restyles against via `group-data-*`
   * selectors — mirrors `Field`'s `disabled` prop. Does not itself disable
   * the inner control; pass `disabled` to `InputGroupInput`/
   * `InputGroupTextarea` (or a custom control) too, same as `Field`.
   */
  disabled?: boolean;
}

<const/{ disabled, class: className, content, ...rest }=input/>

<div
  role="group"
  data-slot="input-group"
  aria-disabled=(disabled ? "true" : undefined)
  data-disabled=(disabled ? "true" : undefined)
  ...rest
  class=cn(styles.root, className)
>
  <${content}/>
</div>