eai-frontend-components 2.0.5 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/ui/accordion.tsx +0 -48
- package/src/components/ui/alert-dialog.tsx +0 -138
- package/src/components/ui/alert.tsx +0 -36
- package/src/components/ui/avatar.tsx +0 -48
- package/src/components/ui/badge.tsx +0 -35
- package/src/components/ui/breadcrumb.tsx +0 -115
- package/src/components/ui/button.tsx +0 -43
- package/src/components/ui/calendar.tsx +0 -142
- package/src/components/ui/card.tsx +0 -35
- package/src/components/ui/carousel.tsx +0 -257
- package/src/components/ui/chart.tsx +0 -363
- package/src/components/ui/checkbox.tsx +0 -26
- package/src/components/ui/collapsible.tsx +0 -9
- package/src/components/ui/command.tsx +0 -145
- package/src/components/ui/context-menu.tsx +0 -198
- package/src/components/ui/custom/date-picker.tsx +0 -97
- package/src/components/ui/custom/form/checkbox.tsx +0 -53
- package/src/components/ui/custom/form/color.tsx +0 -140
- package/src/components/ui/custom/form/combobox.tsx +0 -259
- package/src/components/ui/custom/form/cpf-cnpj.tsx +0 -85
- package/src/components/ui/custom/form/currency.tsx +0 -51
- package/src/components/ui/custom/form/date-range.tsx +0 -110
- package/src/components/ui/custom/form/date.tsx +0 -109
- package/src/components/ui/custom/form/decimal.tsx +0 -50
- package/src/components/ui/custom/form/file.tsx +0 -65
- package/src/components/ui/custom/form/form-help-text.tsx +0 -20
- package/src/components/ui/custom/form/form-label.tsx +0 -24
- package/src/components/ui/custom/form/form-message.tsx +0 -10
- package/src/components/ui/custom/form/ghost.tsx +0 -28
- package/src/components/ui/custom/form/input.tsx +0 -69
- package/src/components/ui/custom/form/mask.tsx +0 -78
- package/src/components/ui/custom/form/multi-select.tsx +0 -209
- package/src/components/ui/custom/form/password.tsx +0 -70
- package/src/components/ui/custom/form/percent.tsx +0 -52
- package/src/components/ui/custom/form/phone.tsx +0 -79
- package/src/components/ui/custom/form/radio-group.tsx +0 -94
- package/src/components/ui/custom/form/select.tsx +0 -62
- package/src/components/ui/custom/form/step-new-form.tsx +0 -49
- package/src/components/ui/custom/form/switch.tsx +0 -51
- package/src/components/ui/custom/form/text.tsx +0 -71
- package/src/components/ui/custom/form/textarea.tsx +0 -71
- package/src/components/ui/custom/form/utils.ts +0 -100
- package/src/components/ui/custom/header.tsx +0 -128
- package/src/components/ui/custom/label.tsx +0 -79
- package/src/components/ui/custom/not-found.tsx +0 -30
- package/src/components/ui/custom/sidebar/module-switcher.tsx +0 -58
- package/src/components/ui/custom/sidebar/nav-footer.tsx +0 -35
- package/src/components/ui/custom/sidebar/nav-main.tsx +0 -64
- package/src/components/ui/custom/sidebar/nav-submenu-collapsible.tsx +0 -60
- package/src/components/ui/custom/sidebar/nav-submenu-dropdown.tsx +0 -56
- package/src/components/ui/custom/sidebar/nav-user.tsx +0 -77
- package/src/components/ui/custom/sidebar/sidebar-button.tsx +0 -30
- package/src/components/ui/custom/sidebar/sidebar-item-two-lines.tsx +0 -25
- package/src/components/ui/custom/sidebar/sidebar-item.tsx +0 -19
- package/src/components/ui/custom/sidebar/types/sidebar.ts +0 -31
- package/src/components/ui/custom/table/data-table-export.tsx +0 -126
- package/src/components/ui/custom/table/data-table-footer.tsx +0 -148
- package/src/components/ui/custom/table/data-table-header.tsx +0 -58
- package/src/components/ui/custom/table/data-table-rows.tsx +0 -94
- package/src/components/ui/custom/table/data-table.tsx +0 -285
- package/src/components/ui/custom/table/types/data-table.ts +0 -31
- package/src/components/ui/custom/theme-provider.tsx +0 -121
- package/src/components/ui/dateRangePicker.tsx +0 -63
- package/src/components/ui/dialog.tsx +0 -84
- package/src/components/ui/drawer.tsx +0 -116
- package/src/components/ui/dropdown-menu.tsx +0 -173
- package/src/components/ui/form.tsx +0 -114
- package/src/components/ui/hover-card.tsx +0 -27
- package/src/components/ui/input.tsx +0 -265
- package/src/components/ui/label.tsx +0 -15
- package/src/components/ui/masks.ts +0 -35
- package/src/components/ui/pagination.tsx +0 -78
- package/src/components/ui/popover.tsx +0 -32
- package/src/components/ui/progress.tsx +0 -22
- package/src/components/ui/radio-group.tsx +0 -36
- package/src/components/ui/scroll-area.tsx +0 -46
- package/src/components/ui/select.tsx +0 -130
- package/src/components/ui/separator.tsx +0 -29
- package/src/components/ui/sheet.tsx +0 -90
- package/src/components/ui/sidebar.tsx +0 -598
- package/src/components/ui/skeleton.tsx +0 -15
- package/src/components/ui/slider.tsx +0 -18
- package/src/components/ui/switch.tsx +0 -26
- package/src/components/ui/table.tsx +0 -53
- package/src/components/ui/tabs.tsx +0 -47
- package/src/components/ui/textarea.tsx +0 -27
- package/src/components/ui/toast.tsx +0 -88
- package/src/components/ui/toaster.tsx +0 -49
- package/src/components/ui/tooltip.tsx +0 -31
- package/src/components/ui/use-calendar.tsx +0 -61
- package/src/components/ui/use-toast.ts +0 -186
- package/src/hooks/use-mobile.tsx +0 -19
- package/src/index.ts +0 -299
- package/src/lib/help/date-utils.ts +0 -41
- package/src/lib/help/format.ts +0 -171
- package/src/lib/help/theme.ts +0 -346
- package/src/lib/help/uuid.ts +0 -4
- package/src/lib/utils.ts +0 -6
- package/src/styles/globals.css +0 -59
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
2
|
-
import { Check, ChevronRight, Circle } from 'lucide-react';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { cn } from '../../lib/utils';
|
|
5
|
-
|
|
6
|
-
const DropdownMenu = DropdownMenuPrimitive.Root;
|
|
7
|
-
|
|
8
|
-
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
|
9
|
-
|
|
10
|
-
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
|
11
|
-
|
|
12
|
-
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
|
13
|
-
|
|
14
|
-
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
|
15
|
-
|
|
16
|
-
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
|
17
|
-
|
|
18
|
-
const DropdownMenuSubTrigger = React.forwardRef<
|
|
19
|
-
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
|
20
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
21
|
-
inset?: boolean;
|
|
22
|
-
}
|
|
23
|
-
>(({ className, inset, children, ...props }, ref) => (
|
|
24
|
-
<DropdownMenuPrimitive.SubTrigger
|
|
25
|
-
ref={ref}
|
|
26
|
-
className={cn(
|
|
27
|
-
'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',
|
|
28
|
-
inset && 'pl-8',
|
|
29
|
-
className,
|
|
30
|
-
)}
|
|
31
|
-
{...props}
|
|
32
|
-
>
|
|
33
|
-
{children}
|
|
34
|
-
<ChevronRight className='ml-auto h-4 w-4' />
|
|
35
|
-
</DropdownMenuPrimitive.SubTrigger>
|
|
36
|
-
));
|
|
37
|
-
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
|
|
38
|
-
|
|
39
|
-
const DropdownMenuSubContent = React.forwardRef<
|
|
40
|
-
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
|
41
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
|
42
|
-
>(({ className, ...props }, ref) => (
|
|
43
|
-
<DropdownMenuPrimitive.SubContent
|
|
44
|
-
ref={ref}
|
|
45
|
-
className={cn(
|
|
46
|
-
'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',
|
|
47
|
-
className,
|
|
48
|
-
)}
|
|
49
|
-
{...props}
|
|
50
|
-
/>
|
|
51
|
-
));
|
|
52
|
-
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
|
|
53
|
-
|
|
54
|
-
const DropdownMenuContent = React.forwardRef<
|
|
55
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
|
56
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
|
57
|
-
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
58
|
-
<DropdownMenuPrimitive.Portal>
|
|
59
|
-
<DropdownMenuPrimitive.Content
|
|
60
|
-
ref={ref}
|
|
61
|
-
sideOffset={sideOffset}
|
|
62
|
-
className={cn(
|
|
63
|
-
'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',
|
|
64
|
-
className,
|
|
65
|
-
)}
|
|
66
|
-
{...props}
|
|
67
|
-
/>
|
|
68
|
-
</DropdownMenuPrimitive.Portal>
|
|
69
|
-
));
|
|
70
|
-
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
|
71
|
-
|
|
72
|
-
const DropdownMenuItem = React.forwardRef<
|
|
73
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
|
74
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
|
75
|
-
inset?: boolean;
|
|
76
|
-
}
|
|
77
|
-
>(({ className, inset, ...props }, ref) => (
|
|
78
|
-
<DropdownMenuPrimitive.Item
|
|
79
|
-
ref={ref}
|
|
80
|
-
className={cn(
|
|
81
|
-
'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',
|
|
82
|
-
inset && 'pl-8',
|
|
83
|
-
className,
|
|
84
|
-
)}
|
|
85
|
-
{...props}
|
|
86
|
-
/>
|
|
87
|
-
));
|
|
88
|
-
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
|
89
|
-
|
|
90
|
-
const DropdownMenuCheckboxItem = React.forwardRef<
|
|
91
|
-
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
|
92
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
|
93
|
-
>(({ className, children, checked, ...props }, ref) => (
|
|
94
|
-
<DropdownMenuPrimitive.CheckboxItem
|
|
95
|
-
ref={ref}
|
|
96
|
-
className={cn(
|
|
97
|
-
'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',
|
|
98
|
-
className,
|
|
99
|
-
)}
|
|
100
|
-
checked={checked}
|
|
101
|
-
{...props}
|
|
102
|
-
>
|
|
103
|
-
<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
|
|
104
|
-
<DropdownMenuPrimitive.ItemIndicator>
|
|
105
|
-
<Check className='h-4 w-4' />
|
|
106
|
-
</DropdownMenuPrimitive.ItemIndicator>
|
|
107
|
-
</span>
|
|
108
|
-
{children}
|
|
109
|
-
</DropdownMenuPrimitive.CheckboxItem>
|
|
110
|
-
));
|
|
111
|
-
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
|
|
112
|
-
|
|
113
|
-
const DropdownMenuRadioItem = React.forwardRef<
|
|
114
|
-
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
|
115
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
|
116
|
-
>(({ className, children, ...props }, ref) => (
|
|
117
|
-
<DropdownMenuPrimitive.RadioItem
|
|
118
|
-
ref={ref}
|
|
119
|
-
className={cn(
|
|
120
|
-
'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',
|
|
121
|
-
className,
|
|
122
|
-
)}
|
|
123
|
-
{...props}
|
|
124
|
-
>
|
|
125
|
-
<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
|
|
126
|
-
<DropdownMenuPrimitive.ItemIndicator>
|
|
127
|
-
<Circle className='h-2 w-2 fill-current' />
|
|
128
|
-
</DropdownMenuPrimitive.ItemIndicator>
|
|
129
|
-
</span>
|
|
130
|
-
{children}
|
|
131
|
-
</DropdownMenuPrimitive.RadioItem>
|
|
132
|
-
));
|
|
133
|
-
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
|
134
|
-
|
|
135
|
-
const DropdownMenuLabel = React.forwardRef<
|
|
136
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
|
137
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
|
138
|
-
inset?: boolean;
|
|
139
|
-
}
|
|
140
|
-
>(({ className, inset, ...props }, ref) => (
|
|
141
|
-
<DropdownMenuPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)} {...props} />
|
|
142
|
-
));
|
|
143
|
-
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
|
144
|
-
|
|
145
|
-
const DropdownMenuSeparator = React.forwardRef<
|
|
146
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
|
147
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
|
148
|
-
>(({ className, ...props }, ref) => <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />);
|
|
149
|
-
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
|
150
|
-
|
|
151
|
-
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
|
|
152
|
-
return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
|
|
153
|
-
};
|
|
154
|
-
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
|
|
155
|
-
|
|
156
|
-
export {
|
|
157
|
-
DropdownMenu,
|
|
158
|
-
DropdownMenuCheckboxItem,
|
|
159
|
-
DropdownMenuContent,
|
|
160
|
-
DropdownMenuGroup,
|
|
161
|
-
DropdownMenuItem,
|
|
162
|
-
DropdownMenuLabel,
|
|
163
|
-
DropdownMenuPortal,
|
|
164
|
-
DropdownMenuRadioGroup,
|
|
165
|
-
DropdownMenuRadioItem,
|
|
166
|
-
DropdownMenuSeparator,
|
|
167
|
-
DropdownMenuShortcut,
|
|
168
|
-
DropdownMenuSub,
|
|
169
|
-
DropdownMenuSubContent,
|
|
170
|
-
DropdownMenuSubTrigger,
|
|
171
|
-
DropdownMenuTrigger
|
|
172
|
-
};
|
|
173
|
-
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
2
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form';
|
|
5
|
-
import { cn } from '../../lib/utils';
|
|
6
|
-
import { Label } from './label';
|
|
7
|
-
|
|
8
|
-
const Form = FormProvider;
|
|
9
|
-
|
|
10
|
-
type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
|
11
|
-
name: TName;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
|
|
15
|
-
|
|
16
|
-
const FormField = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
|
|
17
|
-
...props
|
|
18
|
-
}: ControllerProps<TFieldValues, TName>) => {
|
|
19
|
-
return (
|
|
20
|
-
<FormFieldContext.Provider value={{ name: props.name }}>
|
|
21
|
-
<Controller {...props} />
|
|
22
|
-
</FormFieldContext.Provider>
|
|
23
|
-
);
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const useFormField = () => {
|
|
27
|
-
const fieldContext = React.useContext(FormFieldContext);
|
|
28
|
-
const itemContext = React.useContext(FormItemContext);
|
|
29
|
-
const { getFieldState, formState } = useFormContext();
|
|
30
|
-
|
|
31
|
-
const fieldState = getFieldState(fieldContext.name, formState);
|
|
32
|
-
|
|
33
|
-
if (!fieldContext) {
|
|
34
|
-
throw new Error('useFormField should be used within <FormField>');
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
const { id } = itemContext;
|
|
38
|
-
|
|
39
|
-
return {
|
|
40
|
-
id,
|
|
41
|
-
name: fieldContext.name,
|
|
42
|
-
formItemId: `${id}-form-item`,
|
|
43
|
-
formDescriptionId: `${id}-form-item-description`,
|
|
44
|
-
formMessageId: `${id}-form-item-message`,
|
|
45
|
-
...fieldState,
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
type FormItemContextValue = {
|
|
50
|
-
id: string;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
|
|
54
|
-
|
|
55
|
-
const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
|
|
56
|
-
const id = React.useId();
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<FormItemContext.Provider value={{ id }}>
|
|
60
|
-
<div ref={ref} className={cn('', className)} {...props} />
|
|
61
|
-
</FormItemContext.Provider>
|
|
62
|
-
);
|
|
63
|
-
});
|
|
64
|
-
FormItem.displayName = 'FormItem';
|
|
65
|
-
|
|
66
|
-
const FormLabel = React.forwardRef<React.ElementRef<typeof LabelPrimitive.Root>, React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>>(
|
|
67
|
-
({ className, ...props }, ref) => {
|
|
68
|
-
const { error, formItemId } = useFormField();
|
|
69
|
-
|
|
70
|
-
return <Label ref={ref} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />;
|
|
71
|
-
},
|
|
72
|
-
);
|
|
73
|
-
FormLabel.displayName = 'FormLabel';
|
|
74
|
-
|
|
75
|
-
const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({ ...props }, ref) => {
|
|
76
|
-
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
77
|
-
|
|
78
|
-
return (
|
|
79
|
-
<Slot
|
|
80
|
-
ref={ref}
|
|
81
|
-
id={formItemId}
|
|
82
|
-
aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
|
|
83
|
-
aria-invalid={!!error}
|
|
84
|
-
{...props}
|
|
85
|
-
/>
|
|
86
|
-
);
|
|
87
|
-
});
|
|
88
|
-
FormControl.displayName = 'FormControl';
|
|
89
|
-
|
|
90
|
-
const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => {
|
|
91
|
-
const { formDescriptionId } = useFormField();
|
|
92
|
-
|
|
93
|
-
return <p ref={ref} id={formDescriptionId} className={cn('text-sm text-muted-foreground', className)} {...props} />;
|
|
94
|
-
});
|
|
95
|
-
FormDescription.displayName = 'FormDescription';
|
|
96
|
-
|
|
97
|
-
const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, children, ...props }, ref) => {
|
|
98
|
-
const { error, formMessageId } = useFormField();
|
|
99
|
-
const body = error ? String(error?.message) : children;
|
|
100
|
-
|
|
101
|
-
if (!body) {
|
|
102
|
-
return null;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
return (
|
|
106
|
-
<p ref={ref} id={formMessageId} className={cn('text-sm font-medium text-destructive', className)} {...props}>
|
|
107
|
-
{body}
|
|
108
|
-
</p>
|
|
109
|
-
);
|
|
110
|
-
});
|
|
111
|
-
FormMessage.displayName = 'FormMessage';
|
|
112
|
-
|
|
113
|
-
export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
|
|
114
|
-
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { cn } from '../../lib/utils';
|
|
4
|
-
|
|
5
|
-
const HoverCard = HoverCardPrimitive.Root;
|
|
6
|
-
|
|
7
|
-
const HoverCardTrigger = HoverCardPrimitive.Trigger;
|
|
8
|
-
|
|
9
|
-
const HoverCardContent = React.forwardRef<
|
|
10
|
-
React.ElementRef<typeof HoverCardPrimitive.Content>,
|
|
11
|
-
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
|
|
12
|
-
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
|
|
13
|
-
<HoverCardPrimitive.Content
|
|
14
|
-
ref={ref}
|
|
15
|
-
align={align}
|
|
16
|
-
sideOffset={sideOffset}
|
|
17
|
-
className={cn(
|
|
18
|
-
'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',
|
|
19
|
-
className,
|
|
20
|
-
)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
));
|
|
24
|
-
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
|
|
25
|
-
|
|
26
|
-
export { HoverCard, HoverCardContent, HoverCardTrigger };
|
|
27
|
-
|
|
@@ -1,265 +0,0 @@
|
|
|
1
|
-
import InputMask from '@mona-health/react-input-mask';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { useEffect, useState } from 'react';
|
|
4
|
-
import { formatDecimal } from '../../lib/help/format';
|
|
5
|
-
import { cn } from '../../lib/utils';
|
|
6
|
-
import { DatePicker } from './custom/date-picker';
|
|
7
|
-
|
|
8
|
-
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
9
|
-
mask?: string;
|
|
10
|
-
maskPlaceholder?: string | null;
|
|
11
|
-
maxLength?: number;
|
|
12
|
-
placeholder?: string;
|
|
13
|
-
label?: string;
|
|
14
|
-
disabled?: boolean;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export interface InputDecimalProps extends InputProps {
|
|
18
|
-
symbol?: string;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function classBorderColor(className: string | undefined, ariaInvalid: boolean | undefined) {
|
|
22
|
-
if (className?.includes('border-none')) {
|
|
23
|
-
return '';
|
|
24
|
-
}
|
|
25
|
-
return ariaInvalid ? 'border-red-600' : 'border-input';
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
const InputFile = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, disabled, ...props }, ref) => {
|
|
29
|
-
return (
|
|
30
|
-
<input
|
|
31
|
-
type='file'
|
|
32
|
-
placeholder={placeholder}
|
|
33
|
-
disabled={disabled}
|
|
34
|
-
className={cn(
|
|
35
|
-
'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',
|
|
36
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
37
|
-
className,
|
|
38
|
-
)}
|
|
39
|
-
ref={ref}
|
|
40
|
-
{...props}
|
|
41
|
-
/>
|
|
42
|
-
);
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, type, maxLength, disabled, ...props }, ref) => {
|
|
46
|
-
return (
|
|
47
|
-
<input
|
|
48
|
-
type={type}
|
|
49
|
-
placeholder={placeholder}
|
|
50
|
-
maxLength={maxLength}
|
|
51
|
-
disabled={disabled}
|
|
52
|
-
className={cn(
|
|
53
|
-
'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',
|
|
54
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
55
|
-
className,
|
|
56
|
-
)}
|
|
57
|
-
ref={ref}
|
|
58
|
-
{...props}
|
|
59
|
-
/>
|
|
60
|
-
);
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
const InputUF = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, type, maxLength, disabled, ...props }, ref) => {
|
|
64
|
-
return (
|
|
65
|
-
<input
|
|
66
|
-
type={type}
|
|
67
|
-
placeholder={placeholder}
|
|
68
|
-
maxLength={maxLength}
|
|
69
|
-
disabled={disabled}
|
|
70
|
-
className={cn(
|
|
71
|
-
'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',
|
|
72
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
73
|
-
className,
|
|
74
|
-
)}
|
|
75
|
-
ref={ref}
|
|
76
|
-
{...props}
|
|
77
|
-
onChange={(e) => {
|
|
78
|
-
alert(e.target.value);
|
|
79
|
-
}}
|
|
80
|
-
/>
|
|
81
|
-
);
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
const InputText = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, type, maxLength, value, disabled, ...props }, ref) => {
|
|
85
|
-
return (
|
|
86
|
-
<input
|
|
87
|
-
type={type}
|
|
88
|
-
placeholder={placeholder}
|
|
89
|
-
maxLength={maxLength}
|
|
90
|
-
value={value || ''}
|
|
91
|
-
className={cn(
|
|
92
|
-
'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',
|
|
93
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
94
|
-
className,
|
|
95
|
-
)}
|
|
96
|
-
disabled={disabled}
|
|
97
|
-
ref={ref}
|
|
98
|
-
{...props}
|
|
99
|
-
/>
|
|
100
|
-
);
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
const MaskInput = React.forwardRef<HTMLInputElement, InputProps>(
|
|
104
|
-
({ className, type, mask, maskPlaceholder, value, maxLength, disabled, placeholder, ...props }, ref) => {
|
|
105
|
-
return (
|
|
106
|
-
<InputMask
|
|
107
|
-
ref={ref}
|
|
108
|
-
mask={mask || ''}
|
|
109
|
-
maskPlaceholder={maskPlaceholder}
|
|
110
|
-
type={type}
|
|
111
|
-
value={value || ''}
|
|
112
|
-
disabled={disabled}
|
|
113
|
-
maxLength={maxLength}
|
|
114
|
-
placeholder={placeholder}
|
|
115
|
-
className={cn(
|
|
116
|
-
'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',
|
|
117
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
118
|
-
className,
|
|
119
|
-
)}
|
|
120
|
-
{...props}
|
|
121
|
-
/>
|
|
122
|
-
);
|
|
123
|
-
},
|
|
124
|
-
);
|
|
125
|
-
|
|
126
|
-
const MaskInputDate = React.forwardRef<HTMLInputElement, InputProps>(
|
|
127
|
-
({ className, type, mask, maxLength, disabled, placeholder, onChange, value, ...props }, ref) => {
|
|
128
|
-
const [selectedDate, setSelectedDate] = useState<Date | null>(null);
|
|
129
|
-
const handleDayPickerSelect = (selectedDate: Date | null) => {
|
|
130
|
-
setSelectedDate(selectedDate);
|
|
131
|
-
|
|
132
|
-
if (selectedDate) {
|
|
133
|
-
const formattedDate = selectedDate.toLocaleDateString('pt-BR');
|
|
134
|
-
if (onChange) {
|
|
135
|
-
onChange({ target: { value: formattedDate } } as React.ChangeEvent<HTMLInputElement>);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
useEffect(() => {
|
|
140
|
-
if (value) {
|
|
141
|
-
const parsedDate = new Date(Array.isArray(value) ? value[0] : value);
|
|
142
|
-
if (!Number.isNaN(parsedDate.getTime())) {
|
|
143
|
-
setSelectedDate(parsedDate);
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}, [value]);
|
|
147
|
-
|
|
148
|
-
return (
|
|
149
|
-
<div className='relative w-full'>
|
|
150
|
-
<InputMask
|
|
151
|
-
ref={ref}
|
|
152
|
-
mask={'99/99/9999'}
|
|
153
|
-
value={value || ''}
|
|
154
|
-
onChange={onChange}
|
|
155
|
-
type={type}
|
|
156
|
-
disabled={disabled}
|
|
157
|
-
maxLength={maxLength}
|
|
158
|
-
placeholder={placeholder ?? 'DD/MM/AAAA'}
|
|
159
|
-
className={cn(
|
|
160
|
-
'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',
|
|
161
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
162
|
-
className,
|
|
163
|
-
)}
|
|
164
|
-
{...props}
|
|
165
|
-
/>
|
|
166
|
-
|
|
167
|
-
<div className='absolute left-3 top-1/2 -translate-y-1/2 cursor-pointer'>
|
|
168
|
-
<DatePicker onDateSelected={handleDayPickerSelect} selectedDateProps={selectedDate} />
|
|
169
|
-
</div>
|
|
170
|
-
</div>
|
|
171
|
-
);
|
|
172
|
-
},
|
|
173
|
-
);
|
|
174
|
-
|
|
175
|
-
const MaskInputCpfCnpj = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, mask, value, disabled, ...props }, ref) => {
|
|
176
|
-
return (
|
|
177
|
-
<div>
|
|
178
|
-
<InputMask
|
|
179
|
-
ref={ref}
|
|
180
|
-
type={type}
|
|
181
|
-
mask={mask || ''}
|
|
182
|
-
maskPlaceholder={null}
|
|
183
|
-
value={value || ''}
|
|
184
|
-
disabled={disabled}
|
|
185
|
-
placeholder={'000.000.000-00'}
|
|
186
|
-
className={cn(
|
|
187
|
-
'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',
|
|
188
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
189
|
-
className,
|
|
190
|
-
)}
|
|
191
|
-
{...props}
|
|
192
|
-
/>
|
|
193
|
-
</div>
|
|
194
|
-
);
|
|
195
|
-
});
|
|
196
|
-
|
|
197
|
-
const MaskInputFone = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, mask, value, disabled, ...props }, ref) => {
|
|
198
|
-
return (
|
|
199
|
-
<div>
|
|
200
|
-
<InputMask
|
|
201
|
-
ref={ref}
|
|
202
|
-
type={type}
|
|
203
|
-
mask={mask || ''}
|
|
204
|
-
maskPlaceholder={null}
|
|
205
|
-
value={value || ''}
|
|
206
|
-
disabled={disabled}
|
|
207
|
-
placeholder='(00) 0 0000-0000'
|
|
208
|
-
className={cn(
|
|
209
|
-
'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',
|
|
210
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
211
|
-
className,
|
|
212
|
-
)}
|
|
213
|
-
{...props}
|
|
214
|
-
/>
|
|
215
|
-
</div>
|
|
216
|
-
);
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
const InputPassword = React.forwardRef<HTMLInputElement, InputProps>(({ className, placeholder, type, maxLength, ...props }, ref) => {
|
|
220
|
-
return (
|
|
221
|
-
<input
|
|
222
|
-
type={type}
|
|
223
|
-
placeholder={placeholder}
|
|
224
|
-
maxLength={maxLength}
|
|
225
|
-
className={cn(
|
|
226
|
-
'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',
|
|
227
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
228
|
-
className,
|
|
229
|
-
)}
|
|
230
|
-
ref={ref}
|
|
231
|
-
{...props}
|
|
232
|
-
/>
|
|
233
|
-
);
|
|
234
|
-
});
|
|
235
|
-
|
|
236
|
-
const MaskInputDecimal = React.forwardRef<HTMLInputElement, InputDecimalProps>(({ className, value, onChange, disabled, symbol, ...props }, ref) => {
|
|
237
|
-
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
238
|
-
const numericValue = Number(event.target.value.replace(/\D/g, '')) / 100;
|
|
239
|
-
const formattedValue = symbol ? `${symbol} ${formatDecimal(numericValue)}` : formatDecimal(numericValue);
|
|
240
|
-
|
|
241
|
-
if (onChange) {
|
|
242
|
-
onChange({ ...event, target: { ...event.target, value: formattedValue } });
|
|
243
|
-
}
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
return (
|
|
247
|
-
<InputMask
|
|
248
|
-
ref={ref}
|
|
249
|
-
mask=''
|
|
250
|
-
value={value || ''}
|
|
251
|
-
onChange={handleChange}
|
|
252
|
-
disabled={disabled}
|
|
253
|
-
placeholder={symbol ? `${symbol} 0,00` : '0,00'}
|
|
254
|
-
className={cn(
|
|
255
|
-
'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',
|
|
256
|
-
classBorderColor(className, props['aria-invalid'] === true),
|
|
257
|
-
className,
|
|
258
|
-
)}
|
|
259
|
-
{...props}
|
|
260
|
-
/>
|
|
261
|
-
);
|
|
262
|
-
});
|
|
263
|
-
|
|
264
|
-
export { Input, InputFile, InputPassword, InputText, InputUF, MaskInput, MaskInputCpfCnpj, MaskInputDate, MaskInputDecimal, MaskInputFone };
|
|
265
|
-
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
2
|
-
import { type VariantProps, cva } from 'class-variance-authority';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { cn } from '../../lib/utils';
|
|
5
|
-
|
|
6
|
-
const labelVariants = cva('text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
|
|
7
|
-
|
|
8
|
-
const Label = React.forwardRef<
|
|
9
|
-
React.ElementRef<typeof LabelPrimitive.Root>,
|
|
10
|
-
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
|
|
11
|
-
>(({ className, ...props }, ref) => <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />);
|
|
12
|
-
Label.displayName = LabelPrimitive.Root.displayName;
|
|
13
|
-
|
|
14
|
-
export { Label };
|
|
15
|
-
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { Modify } from '@react-input/mask';
|
|
2
|
-
|
|
3
|
-
export const modifyPhone: Modify = ({ value, data, selectionStart, selectionEnd }) => {
|
|
4
|
-
const _value = value.slice(0, selectionStart) + (data ?? '') + value.slice(selectionEnd);
|
|
5
|
-
const len = _value ? _value.replace(/[\D]+/g, '').length : 0;
|
|
6
|
-
|
|
7
|
-
return maskPhone(_value);
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export function maskPhone(value: string | null) {
|
|
11
|
-
const len = value ? value.replace(/[\D]+/g, '').length : 0;
|
|
12
|
-
|
|
13
|
-
if (len > 10) return { mask: '(__) _ ____-____', replacement: { _: /\d/ } };
|
|
14
|
-
|
|
15
|
-
return { mask: '(__) ____-_____', replacement: { _: /\d/ } };
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export const modifyCpfCnpj: Modify = ({ value, data, selectionStart, selectionEnd }) => {
|
|
19
|
-
const _value = value.slice(0, selectionStart) + (data ?? '') + value.slice(selectionEnd);
|
|
20
|
-
const len = _value ? _value.replace(/[\D]+/g, '').length : 0;
|
|
21
|
-
|
|
22
|
-
return maskCpfCnpj(_value);
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export function maskCpfCnpj(value: string | null) {
|
|
26
|
-
const len = value ? value.replace(/[\D]+/g, '').length : 0;
|
|
27
|
-
|
|
28
|
-
if (len > 11) return { mask: '__.___.___/____-__', replacement: { _: /\d/ } };
|
|
29
|
-
|
|
30
|
-
return { mask: '___.___.___-___', replacement: { _: /\d/ } };
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export const removeMaskNumber = (value: string): string => {
|
|
34
|
-
return value?.replace(/\D/g, '');
|
|
35
|
-
};
|