| 51 | } |
| 52 | |
| 53 | export const InputDateBase = ({ |
| 54 | tooltip, |
| 55 | shortcut, |
| 56 | groupRef, |
| 57 | size = "md", |
| 58 | isInvalid, |
| 59 | isDisabled, |
| 60 | icon: Icon, |
| 61 | wrapperClassName, |
| 62 | tooltipClassName, |
| 63 | iconClassName, |
| 64 | ...inputProps |
| 65 | }: Omit<InputDateBaseProps, "label" | "hint">) => { |
| 66 | // Check if the input has a leading icon or tooltip |
| 67 | const hasTrailingIcon = tooltip || isInvalid; |
| 68 | const hasLeadingIcon = Icon; |
| 69 | |
| 70 | // If the input is inside a `TextFieldContext`, use its context to simplify applying styles |
| 71 | const context = useContext(DateFieldContext); |
| 72 | |
| 73 | const inputSize = context?.size || size; |
| 74 | |
| 75 | const sizes = sortCx({ |
| 76 | sm: { |
| 77 | root: cx("px-3 py-2 text-sm", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-8.5"), |
| 78 | iconLeading: "left-3 size-4 stroke-[2.25px]", |
| 79 | iconTrailing: "right-3", |
| 80 | shortcut: "pr-2.5", |
| 81 | }, |
| 82 | md: { |
| 83 | root: cx("px-3 py-2 text-md", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"), |
| 84 | iconLeading: "left-3 size-5", |
| 85 | iconTrailing: "right-3", |
| 86 | shortcut: "pr-2.5", |
| 87 | }, |
| 88 | lg: { |
| 89 | root: cx("px-3.5 py-2.5 text-md", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"), |
| 90 | iconLeading: "left-3.5 size-5", |
| 91 | iconTrailing: "right-3.5", |
| 92 | shortcut: "pr-3", |
| 93 | }, |
| 94 | }); |
| 95 | |
| 96 | return ( |
| 97 | <AriaGroup |
| 98 | {...{ isDisabled, isInvalid }} |
| 99 | ref={groupRef} |
| 100 | className={({ isFocusWithin, isDisabled, isInvalid }) => |
| 101 | cx( |
| 102 | "group/input relative flex w-full flex-row place-content-center place-items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset", |
| 103 | |
| 104 | isFocusWithin && !isDisabled && "ring-2 ring-brand", |
| 105 | |
| 106 | // Disabled state styles |
| 107 | isDisabled && "cursor-not-allowed opacity-50 in-data-input-wrapper:opacity-100", |
| 108 | "group-disabled:cursor-not-allowed group-disabled:opacity-50 in-data-input-wrapper:group-disabled:opacity-100", |
| 109 | |
| 110 | // Invalid state styles |