eai-frontend-components 2.0.5 → 2.0.6

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.
Files changed (100) hide show
  1. package/package.json +3 -3
  2. package/src/components/ui/accordion.tsx +0 -48
  3. package/src/components/ui/alert-dialog.tsx +0 -138
  4. package/src/components/ui/alert.tsx +0 -36
  5. package/src/components/ui/avatar.tsx +0 -48
  6. package/src/components/ui/badge.tsx +0 -35
  7. package/src/components/ui/breadcrumb.tsx +0 -115
  8. package/src/components/ui/button.tsx +0 -43
  9. package/src/components/ui/calendar.tsx +0 -142
  10. package/src/components/ui/card.tsx +0 -35
  11. package/src/components/ui/carousel.tsx +0 -257
  12. package/src/components/ui/chart.tsx +0 -363
  13. package/src/components/ui/checkbox.tsx +0 -26
  14. package/src/components/ui/collapsible.tsx +0 -9
  15. package/src/components/ui/command.tsx +0 -145
  16. package/src/components/ui/context-menu.tsx +0 -198
  17. package/src/components/ui/custom/date-picker.tsx +0 -97
  18. package/src/components/ui/custom/form/checkbox.tsx +0 -53
  19. package/src/components/ui/custom/form/color.tsx +0 -140
  20. package/src/components/ui/custom/form/combobox.tsx +0 -259
  21. package/src/components/ui/custom/form/cpf-cnpj.tsx +0 -85
  22. package/src/components/ui/custom/form/currency.tsx +0 -51
  23. package/src/components/ui/custom/form/date-range.tsx +0 -110
  24. package/src/components/ui/custom/form/date.tsx +0 -109
  25. package/src/components/ui/custom/form/decimal.tsx +0 -50
  26. package/src/components/ui/custom/form/file.tsx +0 -65
  27. package/src/components/ui/custom/form/form-help-text.tsx +0 -20
  28. package/src/components/ui/custom/form/form-label.tsx +0 -24
  29. package/src/components/ui/custom/form/form-message.tsx +0 -10
  30. package/src/components/ui/custom/form/ghost.tsx +0 -28
  31. package/src/components/ui/custom/form/input.tsx +0 -69
  32. package/src/components/ui/custom/form/mask.tsx +0 -78
  33. package/src/components/ui/custom/form/multi-select.tsx +0 -209
  34. package/src/components/ui/custom/form/password.tsx +0 -70
  35. package/src/components/ui/custom/form/percent.tsx +0 -52
  36. package/src/components/ui/custom/form/phone.tsx +0 -79
  37. package/src/components/ui/custom/form/radio-group.tsx +0 -94
  38. package/src/components/ui/custom/form/select.tsx +0 -62
  39. package/src/components/ui/custom/form/step-new-form.tsx +0 -49
  40. package/src/components/ui/custom/form/switch.tsx +0 -51
  41. package/src/components/ui/custom/form/text.tsx +0 -71
  42. package/src/components/ui/custom/form/textarea.tsx +0 -71
  43. package/src/components/ui/custom/form/utils.ts +0 -100
  44. package/src/components/ui/custom/header.tsx +0 -128
  45. package/src/components/ui/custom/label.tsx +0 -79
  46. package/src/components/ui/custom/not-found.tsx +0 -30
  47. package/src/components/ui/custom/sidebar/module-switcher.tsx +0 -58
  48. package/src/components/ui/custom/sidebar/nav-footer.tsx +0 -35
  49. package/src/components/ui/custom/sidebar/nav-main.tsx +0 -64
  50. package/src/components/ui/custom/sidebar/nav-submenu-collapsible.tsx +0 -60
  51. package/src/components/ui/custom/sidebar/nav-submenu-dropdown.tsx +0 -56
  52. package/src/components/ui/custom/sidebar/nav-user.tsx +0 -77
  53. package/src/components/ui/custom/sidebar/sidebar-button.tsx +0 -30
  54. package/src/components/ui/custom/sidebar/sidebar-item-two-lines.tsx +0 -25
  55. package/src/components/ui/custom/sidebar/sidebar-item.tsx +0 -19
  56. package/src/components/ui/custom/sidebar/types/sidebar.ts +0 -31
  57. package/src/components/ui/custom/table/data-table-export.tsx +0 -126
  58. package/src/components/ui/custom/table/data-table-footer.tsx +0 -148
  59. package/src/components/ui/custom/table/data-table-header.tsx +0 -58
  60. package/src/components/ui/custom/table/data-table-rows.tsx +0 -94
  61. package/src/components/ui/custom/table/data-table.tsx +0 -285
  62. package/src/components/ui/custom/table/types/data-table.ts +0 -31
  63. package/src/components/ui/custom/theme-provider.tsx +0 -121
  64. package/src/components/ui/dateRangePicker.tsx +0 -63
  65. package/src/components/ui/dialog.tsx +0 -84
  66. package/src/components/ui/drawer.tsx +0 -116
  67. package/src/components/ui/dropdown-menu.tsx +0 -173
  68. package/src/components/ui/form.tsx +0 -114
  69. package/src/components/ui/hover-card.tsx +0 -27
  70. package/src/components/ui/input.tsx +0 -265
  71. package/src/components/ui/label.tsx +0 -15
  72. package/src/components/ui/masks.ts +0 -35
  73. package/src/components/ui/pagination.tsx +0 -78
  74. package/src/components/ui/popover.tsx +0 -32
  75. package/src/components/ui/progress.tsx +0 -22
  76. package/src/components/ui/radio-group.tsx +0 -36
  77. package/src/components/ui/scroll-area.tsx +0 -46
  78. package/src/components/ui/select.tsx +0 -130
  79. package/src/components/ui/separator.tsx +0 -29
  80. package/src/components/ui/sheet.tsx +0 -90
  81. package/src/components/ui/sidebar.tsx +0 -598
  82. package/src/components/ui/skeleton.tsx +0 -15
  83. package/src/components/ui/slider.tsx +0 -18
  84. package/src/components/ui/switch.tsx +0 -26
  85. package/src/components/ui/table.tsx +0 -53
  86. package/src/components/ui/tabs.tsx +0 -47
  87. package/src/components/ui/textarea.tsx +0 -27
  88. package/src/components/ui/toast.tsx +0 -88
  89. package/src/components/ui/toaster.tsx +0 -49
  90. package/src/components/ui/tooltip.tsx +0 -31
  91. package/src/components/ui/use-calendar.tsx +0 -61
  92. package/src/components/ui/use-toast.ts +0 -186
  93. package/src/hooks/use-mobile.tsx +0 -19
  94. package/src/index.ts +0 -299
  95. package/src/lib/help/date-utils.ts +0 -41
  96. package/src/lib/help/format.ts +0 -171
  97. package/src/lib/help/theme.ts +0 -346
  98. package/src/lib/help/uuid.ts +0 -4
  99. package/src/lib/utils.ts +0 -6
  100. 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
- };