52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { type PropsWithChildren } from 'react';
|
|
|
|
import { twMerge } from 'tailwind-merge';
|
|
import { tv } from 'tailwind-variants';
|
|
|
|
export interface InputGroupProps extends PropsWithChildren {
|
|
className?: string;
|
|
innerClassName?: string;
|
|
isReadOnly?: boolean;
|
|
}
|
|
const style = tv({
|
|
slots: {
|
|
container: 'relative flex flex-col justify-center items-start bg-white',
|
|
base: [
|
|
'h-9',
|
|
'flex',
|
|
'items-center',
|
|
'text-sm',
|
|
'text-dabeeo-black-34',
|
|
'leading-[18px]',
|
|
'border',
|
|
'border-dabeeo-gray-be',
|
|
'has-data-focused:border-dabeeo-black-34',
|
|
'has-data-hovered:border-dabeeo-black-34',
|
|
'has-data-disabled:bg-dabeeo-gray-eb',
|
|
'has-data-disabled:text-dabeeo-gray-99',
|
|
'has-data-disabled:border-dabeeo-gray-be',
|
|
'has-data-invalid:border-dabeeo-red',
|
|
'has-data-invalid:has-data-focused:border-dabeeo-red',
|
|
'has-data-invalid:has-data-hovered:border-dabeeo-red',
|
|
'w-full',
|
|
'has-[[type=number]]:leading-6',
|
|
],
|
|
input: ['w-full', 'px-3', 'outline-0', '[&[type=number]]:pr-1.5'],
|
|
},
|
|
variants: {
|
|
isReadOnly: {
|
|
true: {
|
|
base: 'bg-dabeeo-yellow-secondary has-data-hovered:border-dabeeo-gray-be has-data-focused:border-dabeeo-gray-be',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
export const InputGroup = ({ className, innerClassName, isReadOnly = false, children }: InputGroupProps) => {
|
|
const styles = style({ isReadOnly });
|
|
return (
|
|
<div className={twMerge(styles.container(), className)}>
|
|
<div className={twMerge(styles.base(), innerClassName)}>{children}</div>
|
|
</div>
|
|
);
|
|
};
|