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