import React from "react";

export function InputGroup({ className = "", children, ...props }) {
  return <div role="group" className={["o-input", className].filter(Boolean).join(" ")} data-slot="input-group" {...props}>{children}</div>;
}
export function InputGroupAddon({ align = "inline-start", className = "", children, ...props }) {
  const cls = ["o-input__addon", align === "inline-end" ? "o-input__addon--end" : "o-input__addon--start", className].filter(Boolean).join(" ");
  return <div className={cls} data-slot="input-group-addon" data-align={align} {...props}>{children}</div>;
}
export function InputGroupText({ className = "", children, ...props }) {
  return <span className={className} data-slot="input-group-text" style={{ color: "var(--muted-foreground)" }} {...props}>{children}</span>;
}
export function InputGroupInput({ className = "", ...props }) {
  return <input className={["o-input__control", className].filter(Boolean).join(" ")} data-slot="input" {...props} />;
}
export function InputGroupTextarea({ className = "", ...props }) {
  return <textarea className={["o-textarea__control", className].filter(Boolean).join(" ")} data-slot="textarea" {...props} />;
}
