diff --git a/libs/shared/lib/components/inputs/index.tsx b/libs/shared/lib/components/inputs/index.tsx index 4f89fed34183f968c0bcc02ccc312361e10325d0..aa098a0e7eb9a42ff3fa4bb359f36c2203454c68 100644 --- a/libs/shared/lib/components/inputs/index.tsx +++ b/libs/shared/lib/components/inputs/index.tsx @@ -78,6 +78,11 @@ type BooleanProps = { value: boolean; tooltip?: string; onChange?: (value: boolean) => void; + size?: 'xs' | 'sm' | 'md' | 'xl'; + info?: string; + required?: boolean; + className?: string; + inline?: boolean; }; type RadioProps = { @@ -417,23 +422,31 @@ export const CheckboxInput = ({ label, value, options, onChange, tooltip }: Chec ); }; -export const BooleanInput = ({ label, value, onChange, tooltip }: BooleanProps) => { +export const BooleanInput = ({ label, value, onChange, tooltip, info, size, required, className }: BooleanProps) => { return ( <Tooltip> - <TooltipTrigger> - <label className={`label cursor-pointer w-fit gap-2 px-0 py-1`}> - <span className="text-sm">{label}</span> - <input - type="checkbox" - checked={value} - onChange={(event) => { - if (onChange) { - onChange(event.target.checked); - } - }} - className="checkbox checkbox-xs" - /> - </label> + <TooltipTrigger className={className + 'w-full flex justify-between'}> + {label && ( + <label className="label p-0"> + <span + className={`text-${size} text-left truncate font-medium text-secondary-700 ${required && "after:content-['*'] after:ml-0.5 after:text-danger-500"}`} + > + {label} + </span> + {info && <Info tooltip={info} />} + </label> + )} + <input + type="checkbox" + checked={value} + onChange={(event) => { + if (onChange) { + onChange(event.target.checked); + } + }} + className="checkbox checkbox-xs" + aria-label={`Toggle ${label}`} + /> </TooltipTrigger> {tooltip && <TooltipContent>{tooltip}</TooltipContent>} </Tooltip>