eai-frontend-components 2.0.4

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,173 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+			inset && 'pl-8',
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className='ml-auto h-4 w-4' />
+	</DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				className,
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			inset && 'pl-8',
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Check className='h-4 w-4' />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			className,
+		)}
+		{...props}
+	>
+		<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Circle className='h-2 w-2 fill-current' />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)} {...props} />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />);
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+	return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger
+};
+

package/src/components/ui/form.tsx

@@ -0,0 +1,114 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form';
+import { cn } from '../../lib/utils';
+import { Label } from './label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+	name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};
+
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
+
+	const fieldState = getFieldState(fieldContext.name, formState);
+
+	if (!fieldContext) {
+		throw new Error('useFormField should be used within <FormField>');
+	}
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+};
+
+type FormItemContextValue = {
+	id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
+	const id = React.useId();
+
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div ref={ref} className={cn('', className)} {...props} />
+		</FormItemContext.Provider>
+	);
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>>(
+	({ className, ...props }, ref) => {
+		const { error, formItemId } = useFormField();
+
+		return <Label ref={ref} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />;
+	},
+);
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({ ...props }, ref) => {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+	return (
+		<Slot
+			ref={ref}
+			id={formItemId}
+			aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {
+	const { formDescriptionId } = useFormField();
+
+	return <p ref={ref} id={formDescriptionId} className={cn('text-sm text-muted-foreground', className)} {...props} />;
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, children, ...props }, ref) => {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;
+
+	if (!body) {
+		return null;
+	}
+
+	return (
+		<p ref={ref} id={formMessageId} className={cn('text-sm font-medium text-destructive', className)} {...props}>
+			{body}
+		</p>
+	);
+});
+FormMessage.displayName = 'FormMessage';
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,27 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+	React.ElementRef<typeof HoverCardPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+	<HoverCardPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 w-auto mr-20 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-2',
+			className,
+		)}
+		{...props}
+	/>
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+

package/src/components/ui/input.tsx

@@ -0,0 +1,265 @@
+import InputMask from '@mona-health/react-input-mask';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { formatDecimal } from '../../lib/help/format';
+import { cn } from '../../lib/utils';
+import { DatePicker } from './custom/date-picker';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+	mask?: string;
+	maskPlaceholder?: string | null;
+	maxLength?: number;
+	placeholder?: string;
+	label?: string;
+	disabled?: boolean;
+}
+
+export interface InputDecimalProps extends InputProps {
+	symbol?: string;
+}
+
+function classBorderColor(className: string | undefined, ariaInvalid: boolean | undefined) {
+	if (className?.includes('border-none')) {
+		return '';
+	}
+	return ariaInvalid ? 'border-red-600' : 'border-input';
+}
+
+const InputFile = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, disabled, ...props }, ref) => {
+	return (
+		<input
+			type='file'
+			placeholder={placeholder}
+			disabled={disabled}
+			className={cn(
+				'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				classBorderColor(className, props['aria-invalid'] === true),
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, type, maxLength, disabled, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			placeholder={placeholder}
+			maxLength={maxLength}
+			disabled={disabled}
+			className={cn(
+				'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				classBorderColor(className, props['aria-invalid'] === true),
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+
+const InputUF = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, type, maxLength, disabled, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			placeholder={placeholder}
+			maxLength={maxLength}
+			disabled={disabled}
+			className={cn(
+				'flex h-10 w-full rounded-md border px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				classBorderColor(className, props['aria-invalid'] === true),
+				className,
+			)}
+			ref={ref}
+			{...props}
+			onChange={(e) => {
+				alert(e.target.value);
+			}}
+		/>
+	);
+});
+
+const InputText = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, type, maxLength, value, disabled, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			placeholder={placeholder}
+			maxLength={maxLength}
+			value={value || ''}
+			className={cn(
+				'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				classBorderColor(className, props['aria-invalid'] === true),
+				className,
+			)}
+			disabled={disabled}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+
+const MaskInput = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, type, mask, maskPlaceholder, value, maxLength, disabled, placeholder, ...props }, ref) => {
+		return (
+			<InputMask
+				ref={ref}
+				mask={mask || ''}
+				maskPlaceholder={maskPlaceholder}
+				type={type}
+				value={value || ''}
+				disabled={disabled}
+				maxLength={maxLength}
+				placeholder={placeholder}
+				className={cn(
+					'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+					classBorderColor(className, props['aria-invalid'] === true),
+					className,
+				)}
+				{...props}
+			/>
+		);
+	},
+);
+
+const MaskInputDate = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, type, mask, maxLength, disabled, placeholder, onChange, value, ...props }, ref) => {
+		const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+		const handleDayPickerSelect = (selectedDate: Date | null) => {
+			setSelectedDate(selectedDate);
+
+			if (selectedDate) {
+				const formattedDate = selectedDate.toLocaleDateString('pt-BR');
+				if (onChange) {
+					onChange({ target: { value: formattedDate } } as React.ChangeEvent<HTMLInputElement>);
+				}
+			}
+		};
+		useEffect(() => {
+			if (value) {
+				const parsedDate = new Date(Array.isArray(value) ? value[0] : value);
+				if (!Number.isNaN(parsedDate.getTime())) {
+					setSelectedDate(parsedDate);
+				}
+			}
+		}, [value]);
+
+		return (
+			<div className='relative w-full'>
+				<InputMask
+					ref={ref}
+					mask={'99/99/9999'}
+					value={value || ''}
+					onChange={onChange}
+					type={type}
+					disabled={disabled}
+					maxLength={maxLength}
+					placeholder={placeholder ?? 'DD/MM/AAAA'}
+					className={cn(
+						'flex h-10 w-full rounded-md border bg-background pl-9 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+						classBorderColor(className, props['aria-invalid'] === true),
+						className,
+					)}
+					{...props}
+				/>
+
+				<div className='absolute left-3 top-1/2 -translate-y-1/2 cursor-pointer'>
+					<DatePicker onDateSelected={handleDayPickerSelect} selectedDateProps={selectedDate} />
+				</div>
+			</div>
+		);
+	},
+);
+
+const MaskInputCpfCnpj = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, mask, value, disabled, ...props }, ref) => {
+	return (
+		<div>
+			<InputMask
+				ref={ref}
+				type={type}
+				mask={mask || ''}
+				maskPlaceholder={null}
+				value={value || ''}
+				disabled={disabled}
+				placeholder={'000.000.000-00'}
+				className={cn(
+					'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+					classBorderColor(className, props['aria-invalid'] === true),
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+});
+
+const MaskInputFone = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, mask, value, disabled, ...props }, ref) => {
+	return (
+		<div>
+			<InputMask
+				ref={ref}
+				type={type}
+				mask={mask || ''}
+				maskPlaceholder={null}
+				value={value || ''}
+				disabled={disabled}
+				placeholder='(00) 0 0000-0000'
+				className={cn(
+					'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+					classBorderColor(className, props['aria-invalid'] === true),
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+});
+
+const InputPassword = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, type, maxLength, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			placeholder={placeholder}
+			maxLength={maxLength}
+			className={cn(
+				'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				classBorderColor(className, props['aria-invalid'] === true),
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+
+const MaskInputDecimal = React.forwardRef<HTMLInputElement, InputDecimalProps>(({ className, value, onChange, disabled, symbol, ...props }, ref) => {
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const numericValue = Number(event.target.value.replace(/\D/g, '')) / 100;
+		const formattedValue = symbol ? `${symbol} ${formatDecimal(numericValue)}` : formatDecimal(numericValue);
+
+		if (onChange) {
+			onChange({ ...event, target: { ...event.target, value: formattedValue } });
+		}
+	};
+
+	return (
+		<InputMask
+			ref={ref}
+			mask=''
+			value={value || ''}
+			onChange={handleChange}
+			disabled={disabled}
+			placeholder={symbol ? `${symbol} 0,00` : '0,00'}
+			className={cn(
+				'flex h-10 w-full rounded-md border bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:border-disabled disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				classBorderColor(className, props['aria-invalid'] === true),
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+
+export { Input, InputFile, InputPassword, InputText, InputUF, MaskInput, MaskInputCpfCnpj, MaskInputDate, MaskInputDecimal, MaskInputFone };
+

package/src/components/ui/label.tsx

@@ -0,0 +1,15 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps, cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const labelVariants = cva('text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />);
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
+

package/src/components/ui/masks.ts

@@ -0,0 +1,35 @@
+import { Modify } from '@react-input/mask';
+
+export const modifyPhone: Modify = ({ value, data, selectionStart, selectionEnd }) => {
+	const _value = value.slice(0, selectionStart) + (data ?? '') + value.slice(selectionEnd);
+	const len = _value ? _value.replace(/[\D]+/g, '').length : 0;
+
+	return maskPhone(_value);
+};
+
+export function maskPhone(value: string | null) {
+	const len = value ? value.replace(/[\D]+/g, '').length : 0;
+
+	if (len > 10) return { mask: '(__) _ ____-____', replacement: { _: /\d/ } };
+
+	return { mask: '(__) ____-_____', replacement: { _: /\d/ } };
+}
+
+export const modifyCpfCnpj: Modify = ({ value, data, selectionStart, selectionEnd }) => {
+	const _value = value.slice(0, selectionStart) + (data ?? '') + value.slice(selectionEnd);
+	const len = _value ? _value.replace(/[\D]+/g, '').length : 0;
+
+	return maskCpfCnpj(_value);
+};
+
+export function maskCpfCnpj(value: string | null) {
+	const len = value ? value.replace(/[\D]+/g, '').length : 0;
+
+	if (len > 11) return { mask: '__.___.___/____-__', replacement: { _: /\d/ } };
+
+	return { mask: '___.___.___-___', replacement: { _: /\d/ } };
+}
+
+export const removeMaskNumber = (value: string): string => {
+	return value?.replace(/\D/g, '');
+};