| 57 | } |
| 58 | |
| 59 | export const InputGroup = ({ size = "md", prefix, leadingAddon, trailingAddon, label, hint, hideRequiredIndicator, children, ...props }: InputGroupProps) => { |
| 60 | const hasLeading = !!leadingAddon; |
| 61 | const hasTrailing = !!trailingAddon; |
| 62 | |
| 63 | const paddings = sortCx({ |
| 64 | sm: { |
| 65 | input: cx( |
| 66 | // Apply padding styles when select element is passed as a child |
| 67 | hasLeading && "group-has-[&>select]:pr-9 group-has-[&>select]:pl-2", |
| 68 | hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"), |
| 69 | ), |
| 70 | leadingText: "pr-1.5 pl-3", |
| 71 | }, |
| 72 | md: { |
| 73 | input: cx( |
| 74 | // Apply padding styles when select element is passed as a child |
| 75 | hasLeading && "group-has-[&>select]:pr-9 group-has-[&>select]:pl-2.5", |
| 76 | hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"), |
| 77 | ), |
| 78 | leadingText: "pr-2 pl-3", |
| 79 | }, |
| 80 | lg: { |
| 81 | input: cx( |
| 82 | // Apply padding styles when select element is passed as a child |
| 83 | hasLeading && "group-has-[&>select]:pr-9.5 group-has-[&>select]:pl-3", |
| 84 | hasTrailing && (prefix ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3"), |
| 85 | ), |
| 86 | leadingText: "pr-2 pl-3.5", |
| 87 | }, |
| 88 | }); |
| 89 | |
| 90 | return ( |
| 91 | <TextField |
| 92 | size={size} |
| 93 | aria-label={label || undefined} |
| 94 | inputClassName={cx(paddings[size].input)} |
| 95 | tooltipClassName={cx(hasTrailing && !hasLeading && "group-has-[&>select]:right-0")} |
| 96 | wrapperClassName={cx( |
| 97 | "z-10", |
| 98 | // Apply styles based on the presence of leading or trailing elements |
| 99 | hasLeading && "rounded-l-none", |
| 100 | hasTrailing && "rounded-r-none", |
| 101 | // When select element is passed as a child |
| 102 | "group-has-[&>select]:bg-transparent group-has-[&>select]:shadow-none group-has-[&>select]:ring-0 group-has-[&>select]:focus-within:ring-0", |
| 103 | )} |
| 104 | {...props} |
| 105 | > |
| 106 | {({ isDisabled, isInvalid, isRequired }) => ( |
| 107 | <> |
| 108 | {label && <Label isRequired={hideRequiredIndicator ? false : isRequired}>{label}</Label>} |
| 109 | |
| 110 | <div |
| 111 | // Used to apply styles based on the size of the input group within children |
| 112 | data-input-size={size} |
| 113 | className={cx( |
| 114 | "group relative flex h-max w-full flex-row justify-center rounded-lg bg-primary transition-all duration-100 ease-linear", |
| 115 | |
| 116 | // Only apply focus ring when child is select and input is focused |