@arkyn/components 3.0.1-beta.143 → 3.0.1-beta.144
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/components/alert/alertContainer/index.d.ts +27 -43
- package/dist/components/alert/alertContainer/index.d.ts.map +1 -1
- package/dist/components/alert/alertContainer/index.js +20 -40
- package/dist/components/alert/alertContent/index.d.ts +11 -36
- package/dist/components/alert/alertContent/index.d.ts.map +1 -1
- package/dist/components/alert/alertContent/index.js +11 -31
- package/dist/components/alert/alertDescription/index.d.ts +10 -38
- package/dist/components/alert/alertDescription/index.d.ts.map +1 -1
- package/dist/components/alert/alertDescription/index.js +10 -33
- package/dist/components/alert/alertIcon/index.d.ts +14 -38
- package/dist/components/alert/alertIcon/index.d.ts.map +1 -1
- package/dist/components/alert/alertIcon/index.js +14 -32
- package/dist/components/alert/alertTitle/index.d.ts +12 -35
- package/dist/components/alert/alertTitle/index.d.ts.map +1 -1
- package/dist/components/alert/alertTitle/index.js +12 -27
- package/dist/components/audioPlayer/index.d.ts +24 -32
- package/dist/components/audioPlayer/index.d.ts.map +1 -1
- package/dist/components/audioPlayer/index.js +15 -18
- package/dist/components/audioUpload/index.d.ts +37 -48
- package/dist/components/audioUpload/index.d.ts.map +1 -1
- package/dist/components/audioUpload/index.js +23 -48
- package/dist/components/badge/index.d.ts +31 -22
- package/dist/components/badge/index.d.ts.map +1 -1
- package/dist/components/badge/index.js +14 -22
- package/dist/components/button/index.d.ts +38 -28
- package/dist/components/button/index.d.ts.map +1 -1
- package/dist/components/button/index.js +18 -28
- package/dist/components/cardTab/cardTabButton/index.d.ts +14 -52
- package/dist/components/cardTab/cardTabButton/index.d.ts.map +1 -1
- package/dist/components/cardTab/cardTabButton/index.js +12 -52
- package/dist/components/cardTab/cardTabContainer/index.d.ts +16 -58
- package/dist/components/cardTab/cardTabContainer/index.d.ts.map +1 -1
- package/dist/components/cardTab/cardTabContainer/index.js +12 -58
- package/dist/components/checkbox/index.d.ts +38 -37
- package/dist/components/checkbox/index.d.ts.map +1 -1
- package/dist/components/checkbox/index.js +21 -37
- package/dist/components/clientOnly.d.ts +13 -66
- package/dist/components/clientOnly.d.ts.map +1 -1
- package/dist/components/clientOnly.js +11 -66
- package/dist/components/currencyInput/index.d.ts +67 -50
- package/dist/components/currencyInput/index.d.ts.map +1 -1
- package/dist/components/currencyInput/index.js +28 -50
- package/dist/components/divider/index.d.ts +12 -25
- package/dist/components/divider/index.d.ts.map +1 -1
- package/dist/components/divider/index.js +8 -25
- package/dist/components/drawer/drawerContainer/index.d.ts +16 -50
- package/dist/components/drawer/drawerContainer/index.d.ts.map +1 -1
- package/dist/components/drawer/drawerContainer/index.js +13 -50
- package/dist/components/drawer/drawerHeader/index.d.ts +9 -33
- package/dist/components/drawer/drawerHeader/index.d.ts.map +1 -1
- package/dist/components/drawer/drawerHeader/index.js +8 -33
- package/dist/components/facebookPixel/index.d.ts +47 -0
- package/dist/components/facebookPixel/index.d.ts.map +1 -1
- package/dist/components/facebookPixel/index.js +35 -0
- package/dist/components/fieldError/index.d.ts +4 -11
- package/dist/components/fieldError/index.d.ts.map +1 -1
- package/dist/components/fieldError/index.js +4 -11
- package/dist/components/fieldLabel/index.d.ts +6 -21
- package/dist/components/fieldLabel/index.d.ts.map +1 -1
- package/dist/components/fieldLabel/index.js +5 -21
- package/dist/components/fieldWrapper/index.d.ts +12 -22
- package/dist/components/fieldWrapper/index.d.ts.map +1 -1
- package/dist/components/fieldWrapper/index.js +7 -22
- package/dist/components/fileUpload/index.d.ts +36 -61
- package/dist/components/fileUpload/index.d.ts.map +1 -1
- package/dist/components/fileUpload/index.js +23 -61
- package/dist/components/googleAnalytics/index.d.ts +11 -7
- package/dist/components/googleAnalytics/index.d.ts.map +1 -1
- package/dist/components/googleAnalytics/index.js +9 -7
- package/dist/components/googleTagManager/index.d.ts +27 -21
- package/dist/components/googleTagManager/index.d.ts.map +1 -1
- package/dist/components/googleTagManager/index.js +20 -21
- package/dist/components/iconButton/index.d.ts +31 -15
- package/dist/components/iconButton/index.d.ts.map +1 -1
- package/dist/components/iconButton/index.js +12 -15
- package/dist/components/imageUpload/index.d.ts +47 -75
- package/dist/components/imageUpload/index.d.ts.map +1 -1
- package/dist/components/imageUpload/index.js +27 -75
- package/dist/components/input/index.d.ts +51 -44
- package/dist/components/input/index.d.ts.map +1 -1
- package/dist/components/input/index.js +24 -44
- package/dist/components/mapView/index.d.ts +44 -0
- package/dist/components/mapView/index.d.ts.map +1 -1
- package/dist/components/mapView/index.js +35 -0
- package/dist/components/maskedInput/index.d.ts +66 -51
- package/dist/components/maskedInput/index.d.ts.map +1 -1
- package/dist/components/maskedInput/index.js +28 -51
- package/dist/components/modal/modalContainer/index.d.ts +17 -57
- package/dist/components/modal/modalContainer/index.d.ts.map +1 -1
- package/dist/components/modal/modalContainer/index.js +15 -57
- package/dist/components/modal/modalFooter/index.d.ts +17 -50
- package/dist/components/modal/modalFooter/index.d.ts.map +1 -1
- package/dist/components/modal/modalFooter/index.js +10 -50
- package/dist/components/modal/modalHeader/index.d.ts +13 -47
- package/dist/components/modal/modalHeader/index.d.ts.map +1 -1
- package/dist/components/modal/modalHeader/index.js +12 -47
- package/dist/components/multiSelect/index.d.ts +67 -62
- package/dist/components/multiSelect/index.d.ts.map +1 -1
- package/dist/components/multiSelect/index.js +28 -62
- package/dist/components/pagination/index.d.ts +18 -9
- package/dist/components/pagination/index.d.ts.map +1 -1
- package/dist/components/pagination/index.js +18 -9
- package/dist/components/phoneInput/index.d.ts +65 -30
- package/dist/components/phoneInput/index.d.ts.map +1 -1
- package/dist/components/phoneInput/index.js +35 -30
- package/dist/components/popover/index.d.ts +34 -114
- package/dist/components/popover/index.d.ts.map +1 -1
- package/dist/components/popover/index.js +25 -114
- package/dist/components/radio/radioBox/index.d.ts +17 -65
- package/dist/components/radio/radioBox/index.d.ts.map +1 -1
- package/dist/components/radio/radioBox/index.js +14 -65
- package/dist/components/radio/radioGroup/index.d.ts +36 -67
- package/dist/components/radio/radioGroup/index.d.ts.map +1 -1
- package/dist/components/radio/radioGroup/index.js +25 -67
- package/dist/components/richText/index.d.ts +33 -47
- package/dist/components/richText/index.d.ts.map +1 -1
- package/dist/components/richText/index.js +30 -44
- package/dist/components/searchPlaces.d.ts +52 -50
- package/dist/components/searchPlaces.d.ts.map +1 -1
- package/dist/components/searchPlaces.js +23 -30
- package/dist/components/select/index.d.ts +68 -63
- package/dist/components/select/index.d.ts.map +1 -1
- package/dist/components/select/index.js +29 -63
- package/dist/components/slider/index.d.ts +20 -34
- package/dist/components/slider/index.d.ts.map +1 -1
- package/dist/components/slider/index.js +15 -33
- package/dist/components/switch/index.d.ts +42 -58
- package/dist/components/switch/index.d.ts.map +1 -1
- package/dist/components/switch/index.js +24 -58
- package/dist/components/tab/tabButton/index.d.ts +14 -52
- package/dist/components/tab/tabButton/index.d.ts.map +1 -1
- package/dist/components/tab/tabButton/index.js +12 -52
- package/dist/components/tab/tabContainer/index.d.ts +16 -58
- package/dist/components/tab/tabContainer/index.d.ts.map +1 -1
- package/dist/components/tab/tabContainer/index.js +12 -58
- package/dist/components/table/tableBody/index.d.ts +13 -47
- package/dist/components/table/tableBody/index.d.ts.map +1 -1
- package/dist/components/table/tableBody/index.js +12 -47
- package/dist/components/table/tableCaption/index.d.ts +6 -46
- package/dist/components/table/tableCaption/index.d.ts.map +1 -1
- package/dist/components/table/tableCaption/index.js +6 -46
- package/dist/components/table/tableContainer/index.d.ts +12 -41
- package/dist/components/table/tableContainer/index.d.ts.map +1 -1
- package/dist/components/table/tableContainer/index.js +12 -41
- package/dist/components/table/tableFooter/index.d.ts +5 -29
- package/dist/components/table/tableFooter/index.d.ts.map +1 -1
- package/dist/components/table/tableFooter/index.js +5 -29
- package/dist/components/table/tableHeader/index.d.ts +4 -25
- package/dist/components/table/tableHeader/index.d.ts.map +1 -1
- package/dist/components/table/tableHeader/index.js +4 -25
- package/dist/components/textarea/index.d.ts +32 -64
- package/dist/components/textarea/index.d.ts.map +1 -1
- package/dist/components/textarea/index.js +16 -64
- package/dist/components/tooltip/index.d.ts +27 -55
- package/dist/components/tooltip/index.d.ts.map +1 -1
- package/dist/components/tooltip/index.js +16 -55
- package/dist/hooks/useAutomation.d.ts +18 -26
- package/dist/hooks/useAutomation.d.ts.map +1 -1
- package/dist/hooks/useAutomation.js +18 -26
- package/dist/hooks/useDrawer.d.ts +19 -64
- package/dist/hooks/useDrawer.d.ts.map +1 -1
- package/dist/hooks/useForm.d.ts +12 -29
- package/dist/hooks/useForm.d.ts.map +1 -1
- package/dist/hooks/useForm.js +12 -29
- package/dist/hooks/useHydrated.d.ts +8 -63
- package/dist/hooks/useHydrated.d.ts.map +1 -1
- package/dist/hooks/useHydrated.js +8 -63
- package/dist/hooks/useModal.d.ts +19 -59
- package/dist/hooks/useModal.d.ts.map +1 -1
- package/dist/hooks/useScopedParams.d.ts +17 -69
- package/dist/hooks/useScopedParams.d.ts.map +1 -1
- package/dist/hooks/useScopedParams.js +17 -69
- package/dist/hooks/useScrollLock.d.ts +11 -27
- package/dist/hooks/useScrollLock.d.ts.map +1 -1
- package/dist/hooks/useScrollLock.js +11 -33
- package/dist/hooks/useSearchAutomation.d.ts +16 -34
- package/dist/hooks/useSearchAutomation.d.ts.map +1 -1
- package/dist/hooks/useSearchAutomation.js +16 -34
- package/dist/hooks/useSlider.d.ts +5 -19
- package/dist/hooks/useSlider.d.ts.map +1 -1
- package/dist/hooks/useSlider.js +5 -19
- package/dist/hooks/useToast.d.ts +8 -52
- package/dist/hooks/useToast.d.ts.map +1 -1
- package/dist/hooks/useToast.js +8 -52
- package/dist/providers/drawerProvider.d.ts +15 -81
- package/dist/providers/drawerProvider.d.ts.map +1 -1
- package/dist/providers/drawerProvider.js +15 -81
- package/dist/providers/formProvider.d.ts +17 -53
- package/dist/providers/formProvider.d.ts.map +1 -1
- package/dist/providers/formProvider.js +17 -53
- package/dist/providers/modalProvider.d.ts +16 -77
- package/dist/providers/modalProvider.d.ts.map +1 -1
- package/dist/providers/modalProvider.js +16 -77
- package/dist/providers/placesProvider.d.ts +16 -11
- package/dist/providers/placesProvider.d.ts.map +1 -1
- package/dist/providers/placesProvider.js +16 -11
- package/dist/providers/toastProvider.d.ts +10 -21
- package/dist/providers/toastProvider.d.ts.map +1 -1
- package/dist/providers/toastProvider.js +10 -21
- package/dist/services/toHtml.d.ts +11 -10
- package/dist/services/toHtml.d.ts.map +1 -1
- package/dist/services/toHtml.js +11 -10
- package/dist/services/toRichTextValue.d.ts +11 -17
- package/dist/services/toRichTextValue.d.ts.map +1 -1
- package/dist/services/toRichTextValue.js +11 -17
- package/package.json +1 -1
|
@@ -1,36 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import "./styles.css";
|
|
3
3
|
/**
|
|
4
|
-
* FieldWrapper
|
|
4
|
+
* FieldWrapper — `<section>` container that groups a form field with its label and error message.
|
|
5
5
|
*
|
|
6
|
-
* @param props -
|
|
7
|
-
* @param props.
|
|
8
|
-
* @param props.orientation - Orientation of the field wrapper. Default: "vertical"
|
|
6
|
+
* @param props.children - Field elements (label, input, error, etc.).
|
|
7
|
+
* @param props.orientation - Layout direction. Default: "vertical"
|
|
9
8
|
*
|
|
10
|
-
* **...Other valid HTML properties for section
|
|
9
|
+
* **...Other valid HTML properties for `<section>`**
|
|
11
10
|
*
|
|
12
|
-
* @returns FieldWrapper JSX element
|
|
11
|
+
* @returns FieldWrapper JSX element.
|
|
13
12
|
*
|
|
14
13
|
* @example
|
|
15
14
|
* ```tsx
|
|
16
|
-
* // Basic field container
|
|
17
15
|
* <FieldWrapper>
|
|
18
|
-
* <FieldLabel>
|
|
19
|
-
* <Input name="username" />
|
|
20
|
-
* <FieldError>This field is required</FieldError>
|
|
21
|
-
* </FieldWrapper>
|
|
22
|
-
*
|
|
23
|
-
* // Field container with custom styling
|
|
24
|
-
* <FieldWrapper className="custom-spacing">
|
|
25
|
-
* <FieldLabel>Email</FieldLabel>
|
|
16
|
+
* <FieldLabel showAsterisk>Email</FieldLabel>
|
|
26
17
|
* <Input name="email" type="email" />
|
|
27
|
-
* </
|
|
28
|
-
*
|
|
29
|
-
* // Complete field with all elements
|
|
30
|
-
* <FieldWrapper>
|
|
31
|
-
* <FieldLabel showAsterisk>Password</FieldLabel>
|
|
32
|
-
* <Input name="password" type="password" />
|
|
33
|
-
* <FieldError>Password must be at least 8 characters</FieldError>
|
|
18
|
+
* <FieldError>Invalid email address</FieldError>
|
|
34
19
|
* </FieldWrapper>
|
|
35
20
|
* ```
|
|
36
21
|
*/
|
|
@@ -1,91 +1,66 @@
|
|
|
1
1
|
import "./styles.css";
|
|
2
2
|
type FileUploadProps = {
|
|
3
|
+
/** Field name for form submission (stores the uploaded file URL). Required. */
|
|
3
4
|
name: string;
|
|
5
|
+
/** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */
|
|
4
6
|
action: string;
|
|
7
|
+
/** Disables file selection and upload. @default false */
|
|
5
8
|
disabled?: boolean;
|
|
9
|
+
/** Optional label text displayed above the upload area. */
|
|
6
10
|
label?: string;
|
|
11
|
+
/** Displays an asterisk on the label to signal a required field. @default false */
|
|
7
12
|
showAsterisk?: boolean;
|
|
13
|
+
/** Label for the file-picker button after a file is selected. @default "Alterar arquivo" */
|
|
8
14
|
changeFileButtonText?: string;
|
|
15
|
+
/** Label for the file-picker button before a file is selected. @default "Selecionar arquivo" */
|
|
9
16
|
selectFileButtonText?: string;
|
|
17
|
+
/** Text displayed in the drag-and-drop zone. @default "Ou arraste e solte o arquivo aqui" */
|
|
10
18
|
dropFileText?: string;
|
|
19
|
+
/** HTTP method for the upload request. @default "POST" */
|
|
11
20
|
method?: string;
|
|
21
|
+
/** Form-data field name used for the file. @default "file" */
|
|
12
22
|
fileName?: string;
|
|
23
|
+
/** Property name in the server response that contains the file URL. @default "url" */
|
|
13
24
|
fileResponseName?: string;
|
|
25
|
+
/** Accepted file MIME types or extensions (e.g. `".pdf"`, `"image/*"`). @default "*" */
|
|
14
26
|
acceptFile?: string;
|
|
27
|
+
/** Callback fired after a successful upload. Receives the URL returned by the server. */
|
|
15
28
|
onChange?: (url?: string) => void;
|
|
16
29
|
};
|
|
17
30
|
/**
|
|
18
|
-
* FileUpload
|
|
31
|
+
* FileUpload — drag-and-drop file uploader with server upload and file-name preview.
|
|
19
32
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
* @param props.disabled - Whether the file upload is disabled. Default: false
|
|
24
|
-
* @param props.label - Optional label text to display above the file upload area
|
|
25
|
-
* @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
|
|
26
|
-
* @param props.changeFileButtonText - Text for the button to change/replace an uploaded file. Default: "Alterar arquivo"
|
|
27
|
-
* @param props.selectFileButtonText - Text for the button to select a file. Default: "Selecionar arquivo"
|
|
28
|
-
* @param props.dropFileText - Text displayed in the drop zone area. Default: "Ou arraste e solte o arquivo aqui"
|
|
29
|
-
* @param props.method - HTTP method for the upload request. Default: "POST"
|
|
30
|
-
* @param props.fileName - Form data field name for the file. Default: "file"
|
|
31
|
-
* @param props.fileResponseName - Property name in the response object containing the file URL. Default: "url"
|
|
32
|
-
* @param props.acceptFile - File types accepted by the input (e.g., "image/*", ".pdf"). Default: "*"
|
|
33
|
-
* @param props.onChange - Callback function called when file upload completes successfully, receives the file URL
|
|
33
|
+
* Sends the file via `fetch` as `multipart/form-data` and stores the returned URL
|
|
34
|
+
* in a hidden `<input>` for form submission.
|
|
35
|
+
* Integrates with `useForm` to display validation errors by field name.
|
|
34
36
|
*
|
|
35
|
-
* @
|
|
37
|
+
* @param props.name - Field name for form submission. Required.
|
|
38
|
+
* @param props.action - Upload endpoint URL. Required.
|
|
39
|
+
* @param props.disabled - Disables file selection and upload. Default: false
|
|
40
|
+
* @param props.label - Label text displayed above the upload area.
|
|
41
|
+
* @param props.showAsterisk - Appends `*` to the label. Default: false
|
|
42
|
+
* @param props.acceptFile - Accepted MIME types or extensions. Default: "*"
|
|
43
|
+
* @param props.method - HTTP method. Default: "POST"
|
|
44
|
+
* @param props.fileName - Form-data field name for the file. Default: "file"
|
|
45
|
+
* @param props.fileResponseName - Server response property containing the URL. Default: "url"
|
|
46
|
+
* @param props.onChange - Callback fired after a successful upload — receives the file URL.
|
|
47
|
+
*
|
|
48
|
+
* @returns FileUpload JSX element wrapped in `FieldWrapper`.
|
|
36
49
|
*
|
|
37
50
|
* @example
|
|
38
51
|
* ```tsx
|
|
39
|
-
* // Basic
|
|
40
|
-
* <FileUpload
|
|
41
|
-
* name="document"
|
|
42
|
-
* action="/api/upload"
|
|
43
|
-
* />
|
|
52
|
+
* // Basic
|
|
53
|
+
* <FileUpload name="document" action="/api/upload" />
|
|
44
54
|
*
|
|
45
|
-
* //
|
|
55
|
+
* // PDF only with label and callback
|
|
46
56
|
* <FileUpload
|
|
47
|
-
* name="
|
|
48
|
-
* action="/api/upload/
|
|
49
|
-
* label="
|
|
57
|
+
* name="contract"
|
|
58
|
+
* action="/api/upload/docs"
|
|
59
|
+
* label="Contract (PDF)"
|
|
50
60
|
* showAsterisk
|
|
51
|
-
* selectFileButtonText="Choose Image"
|
|
52
|
-
* changeFileButtonText="Change Image"
|
|
53
|
-
* dropFileText="Drop your image here"
|
|
54
|
-
* />
|
|
55
|
-
*
|
|
56
|
-
* // File upload with restrictions and callback
|
|
57
|
-
* <FileUpload
|
|
58
|
-
* name="pdf"
|
|
59
|
-
* action="/api/upload/document"
|
|
60
|
-
* label="Upload PDF Document"
|
|
61
61
|
* acceptFile=".pdf"
|
|
62
|
-
* fileName="document"
|
|
63
62
|
* fileResponseName="documentUrl"
|
|
64
|
-
* onChange={(url) =>
|
|
65
|
-
* />
|
|
66
|
-
*
|
|
67
|
-
* // Disabled file upload
|
|
68
|
-
* <FileUpload
|
|
69
|
-
* name="attachment"
|
|
70
|
-
* action="/api/upload"
|
|
71
|
-
* label="Attachment"
|
|
72
|
-
* disabled
|
|
73
|
-
* />
|
|
74
|
-
*
|
|
75
|
-
* // File upload with custom HTTP method and response handling
|
|
76
|
-
* <FileUpload
|
|
77
|
-
* name="file"
|
|
78
|
-
* action="/api/files"
|
|
79
|
-
* method="PUT"
|
|
80
|
-
* fileName="uploadedFile"
|
|
81
|
-
* fileResponseName="fileUrl"
|
|
82
|
-
* label="Custom Upload"
|
|
83
|
-
* onChange={(url) => {
|
|
84
|
-
* if (url) {
|
|
85
|
-
* setFileUrl(url);
|
|
86
|
-
* console.log('Upload successful:', url);
|
|
87
|
-
* }
|
|
88
|
-
* }}
|
|
63
|
+
* onChange={(url) => setContractUrl(url)}
|
|
89
64
|
* />
|
|
90
65
|
* ```
|
|
91
66
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fileUpload/index.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fileUpload/index.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IACrB,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,4FAA4F;IAC5F,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4FAA4F;IAC5F,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gGAAgG;IAChG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,6FAA6F;IAC7F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sFAAsF;IACtF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAgGzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -8,77 +8,39 @@ import { HasFileContent } from "./hasFileContent";
|
|
|
8
8
|
import { NoFileContent } from "./noFileContent";
|
|
9
9
|
import "./styles.css";
|
|
10
10
|
/**
|
|
11
|
-
* FileUpload
|
|
11
|
+
* FileUpload — drag-and-drop file uploader with server upload and file-name preview.
|
|
12
12
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* @param props.disabled - Whether the file upload is disabled. Default: false
|
|
17
|
-
* @param props.label - Optional label text to display above the file upload area
|
|
18
|
-
* @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
|
|
19
|
-
* @param props.changeFileButtonText - Text for the button to change/replace an uploaded file. Default: "Alterar arquivo"
|
|
20
|
-
* @param props.selectFileButtonText - Text for the button to select a file. Default: "Selecionar arquivo"
|
|
21
|
-
* @param props.dropFileText - Text displayed in the drop zone area. Default: "Ou arraste e solte o arquivo aqui"
|
|
22
|
-
* @param props.method - HTTP method for the upload request. Default: "POST"
|
|
23
|
-
* @param props.fileName - Form data field name for the file. Default: "file"
|
|
24
|
-
* @param props.fileResponseName - Property name in the response object containing the file URL. Default: "url"
|
|
25
|
-
* @param props.acceptFile - File types accepted by the input (e.g., "image/*", ".pdf"). Default: "*"
|
|
26
|
-
* @param props.onChange - Callback function called when file upload completes successfully, receives the file URL
|
|
13
|
+
* Sends the file via `fetch` as `multipart/form-data` and stores the returned URL
|
|
14
|
+
* in a hidden `<input>` for form submission.
|
|
15
|
+
* Integrates with `useForm` to display validation errors by field name.
|
|
27
16
|
*
|
|
28
|
-
* @
|
|
17
|
+
* @param props.name - Field name for form submission. Required.
|
|
18
|
+
* @param props.action - Upload endpoint URL. Required.
|
|
19
|
+
* @param props.disabled - Disables file selection and upload. Default: false
|
|
20
|
+
* @param props.label - Label text displayed above the upload area.
|
|
21
|
+
* @param props.showAsterisk - Appends `*` to the label. Default: false
|
|
22
|
+
* @param props.acceptFile - Accepted MIME types or extensions. Default: "*"
|
|
23
|
+
* @param props.method - HTTP method. Default: "POST"
|
|
24
|
+
* @param props.fileName - Form-data field name for the file. Default: "file"
|
|
25
|
+
* @param props.fileResponseName - Server response property containing the URL. Default: "url"
|
|
26
|
+
* @param props.onChange - Callback fired after a successful upload — receives the file URL.
|
|
27
|
+
*
|
|
28
|
+
* @returns FileUpload JSX element wrapped in `FieldWrapper`.
|
|
29
29
|
*
|
|
30
30
|
* @example
|
|
31
31
|
* ```tsx
|
|
32
|
-
* // Basic
|
|
33
|
-
* <FileUpload
|
|
34
|
-
* name="document"
|
|
35
|
-
* action="/api/upload"
|
|
36
|
-
* />
|
|
32
|
+
* // Basic
|
|
33
|
+
* <FileUpload name="document" action="/api/upload" />
|
|
37
34
|
*
|
|
38
|
-
* //
|
|
35
|
+
* // PDF only with label and callback
|
|
39
36
|
* <FileUpload
|
|
40
|
-
* name="
|
|
41
|
-
* action="/api/upload/
|
|
42
|
-
* label="
|
|
37
|
+
* name="contract"
|
|
38
|
+
* action="/api/upload/docs"
|
|
39
|
+
* label="Contract (PDF)"
|
|
43
40
|
* showAsterisk
|
|
44
|
-
* selectFileButtonText="Choose Image"
|
|
45
|
-
* changeFileButtonText="Change Image"
|
|
46
|
-
* dropFileText="Drop your image here"
|
|
47
|
-
* />
|
|
48
|
-
*
|
|
49
|
-
* // File upload with restrictions and callback
|
|
50
|
-
* <FileUpload
|
|
51
|
-
* name="pdf"
|
|
52
|
-
* action="/api/upload/document"
|
|
53
|
-
* label="Upload PDF Document"
|
|
54
41
|
* acceptFile=".pdf"
|
|
55
|
-
* fileName="document"
|
|
56
42
|
* fileResponseName="documentUrl"
|
|
57
|
-
* onChange={(url) =>
|
|
58
|
-
* />
|
|
59
|
-
*
|
|
60
|
-
* // Disabled file upload
|
|
61
|
-
* <FileUpload
|
|
62
|
-
* name="attachment"
|
|
63
|
-
* action="/api/upload"
|
|
64
|
-
* label="Attachment"
|
|
65
|
-
* disabled
|
|
66
|
-
* />
|
|
67
|
-
*
|
|
68
|
-
* // File upload with custom HTTP method and response handling
|
|
69
|
-
* <FileUpload
|
|
70
|
-
* name="file"
|
|
71
|
-
* action="/api/files"
|
|
72
|
-
* method="PUT"
|
|
73
|
-
* fileName="uploadedFile"
|
|
74
|
-
* fileResponseName="fileUrl"
|
|
75
|
-
* label="Custom Upload"
|
|
76
|
-
* onChange={(url) => {
|
|
77
|
-
* if (url) {
|
|
78
|
-
* setFileUrl(url);
|
|
79
|
-
* console.log('Upload successful:', url);
|
|
80
|
-
* }
|
|
81
|
-
* }}
|
|
43
|
+
* onChange={(url) => setContractUrl(url)}
|
|
82
44
|
* />
|
|
83
45
|
* ```
|
|
84
46
|
*/
|
|
@@ -1,23 +1,27 @@
|
|
|
1
1
|
import { JSX } from "react";
|
|
2
2
|
type GoogleAnalyticsProps = {
|
|
3
|
+
/** Google Analytics 4 Measurement ID (e.g. `"G-XXXXXXXXXX"`). Required. */
|
|
3
4
|
measurementId: string;
|
|
5
|
+
/** When true, renders the GA4 snippet in development mode (bypasses the production check). @default false */
|
|
4
6
|
showInDevMode?: boolean;
|
|
5
7
|
};
|
|
6
8
|
/**
|
|
7
|
-
* GoogleAnalytics
|
|
9
|
+
* GoogleAnalytics — injects the Google Analytics 4 script into the page client-side.
|
|
8
10
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* @param {boolean} [props.showInDevMode] - If true, renders in development mode. Default: false
|
|
11
|
+
* Renders nothing in development mode unless `showInDevMode` is `true`.
|
|
12
|
+
* Wrapped in `ClientOnly` to avoid SSR errors.
|
|
12
13
|
*
|
|
13
|
-
* @
|
|
14
|
+
* @param props.measurementId - GA4 Measurement ID (e.g. `"G-XXXXXXXXXX"`). Required.
|
|
15
|
+
* @param props.showInDevMode - Renders in development mode. Default: false
|
|
16
|
+
*
|
|
17
|
+
* @returns GoogleAnalytics JSX element, or an empty fragment in dev mode.
|
|
14
18
|
*
|
|
15
19
|
* @example
|
|
16
20
|
* ```tsx
|
|
17
|
-
* //
|
|
21
|
+
* // In your root layout
|
|
18
22
|
* <GoogleAnalytics measurementId="G-XXXXXXXXXX" />
|
|
19
23
|
*
|
|
20
|
-
* //
|
|
24
|
+
* // Enable in development for testing
|
|
21
25
|
* <GoogleAnalytics measurementId="G-XXXXXXXXXX" showInDevMode />
|
|
22
26
|
* ```
|
|
23
27
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/googleAnalytics/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5B,KAAK,oBAAoB,GAAG;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/googleAnalytics/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5B,KAAK,oBAAoB,GAAG;IAC1B,2EAA2E;IAC3E,aAAa,EAAE,MAAM,CAAC;IACtB,6GAA6G;IAC7G,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAYjE;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -2,20 +2,22 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { ClientOnly } from "../clientOnly";
|
|
3
3
|
import { GoogleAnalyticsClient } from "./googleAnalytics.client";
|
|
4
4
|
/**
|
|
5
|
-
* GoogleAnalytics
|
|
5
|
+
* GoogleAnalytics — injects the Google Analytics 4 script into the page client-side.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* @param {boolean} [props.showInDevMode] - If true, renders in development mode. Default: false
|
|
7
|
+
* Renders nothing in development mode unless `showInDevMode` is `true`.
|
|
8
|
+
* Wrapped in `ClientOnly` to avoid SSR errors.
|
|
10
9
|
*
|
|
11
|
-
* @
|
|
10
|
+
* @param props.measurementId - GA4 Measurement ID (e.g. `"G-XXXXXXXXXX"`). Required.
|
|
11
|
+
* @param props.showInDevMode - Renders in development mode. Default: false
|
|
12
|
+
*
|
|
13
|
+
* @returns GoogleAnalytics JSX element, or an empty fragment in dev mode.
|
|
12
14
|
*
|
|
13
15
|
* @example
|
|
14
16
|
* ```tsx
|
|
15
|
-
* //
|
|
17
|
+
* // In your root layout
|
|
16
18
|
* <GoogleAnalytics measurementId="G-XXXXXXXXXX" />
|
|
17
19
|
*
|
|
18
|
-
* //
|
|
20
|
+
* // Enable in development for testing
|
|
19
21
|
* <GoogleAnalytics measurementId="G-XXXXXXXXXX" showInDevMode />
|
|
20
22
|
* ```
|
|
21
23
|
*/
|
|
@@ -1,46 +1,52 @@
|
|
|
1
1
|
type GoogleTagManagerProps = {
|
|
2
|
+
/** Google Tag Manager container ID (e.g. `"GTM-XXXXXXX"`). Required. */
|
|
2
3
|
gtmId: string;
|
|
4
|
+
/** Additional key-value pairs pushed to the dataLayer on initialization. */
|
|
3
5
|
events?: Record<string, string>;
|
|
6
|
+
/** Initial key-value pairs added to the dataLayer before GTM loads. */
|
|
4
7
|
dataLayer?: Record<string, string>;
|
|
8
|
+
/** Global variable name for the dataLayer array. @default "dataLayer" */
|
|
5
9
|
dataLayerName?: string;
|
|
10
|
+
/** GTM environment auth token (for staging/testing environments). */
|
|
6
11
|
auth?: string;
|
|
12
|
+
/** GTM environment preview token (e.g. `"env-3"`). */
|
|
7
13
|
preview?: string;
|
|
14
|
+
/** When true, renders the GTM snippet in development mode (bypasses the production check). @default false */
|
|
8
15
|
showInDevMode?: boolean;
|
|
9
16
|
};
|
|
10
17
|
/**
|
|
11
|
-
* GoogleTagManager
|
|
18
|
+
* GoogleTagManager — injects the GTM `<script>` and `<noscript>` snippets into the page client-side.
|
|
12
19
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* @param props.
|
|
20
|
+
* Renders nothing in development mode unless `showInDevMode` is `true`.
|
|
21
|
+
* Wrapped in `ClientOnly` to avoid SSR errors.
|
|
22
|
+
*
|
|
23
|
+
* @param props.gtmId - GTM container ID (e.g. `"GTM-XXXXXXX"`). Required.
|
|
24
|
+
* @param props.dataLayer - Initial key-value pairs for the dataLayer.
|
|
17
25
|
* @param props.dataLayerName - Global dataLayer variable name. Default: "dataLayer"
|
|
18
|
-
* @param props.
|
|
19
|
-
* @param props.
|
|
20
|
-
* @param props.
|
|
26
|
+
* @param props.events - Additional key-value pairs pushed on initialization.
|
|
27
|
+
* @param props.auth - GTM environment auth token.
|
|
28
|
+
* @param props.preview - GTM environment preview token (e.g. `"env-3"`).
|
|
29
|
+
* @param props.showInDevMode - Renders in development mode. Default: false
|
|
21
30
|
*
|
|
22
|
-
* @returns GoogleTagManager JSX element
|
|
31
|
+
* @returns GoogleTagManager JSX element, or an empty fragment in dev mode.
|
|
23
32
|
*
|
|
24
33
|
* @example
|
|
25
34
|
* ```tsx
|
|
26
|
-
* // Basic
|
|
35
|
+
* // Basic setup in your root layout
|
|
27
36
|
* <GoogleTagManager gtmId="GTM-XXXXXXX" />
|
|
28
37
|
*
|
|
29
|
-
* //
|
|
38
|
+
* // With initial dataLayer values
|
|
30
39
|
* <GoogleTagManager
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* pageType: "home",
|
|
34
|
-
* userType: "anonymous",
|
|
35
|
-
* }}
|
|
40
|
+
* gtmId="GTM-XXXXXXX"
|
|
41
|
+
* dataLayer={{ pageType: "home", userType: "anonymous" }}
|
|
36
42
|
* />
|
|
37
43
|
*
|
|
38
|
-
* //
|
|
44
|
+
* // Staging/preview environment
|
|
39
45
|
* <GoogleTagManager
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
46
|
+
* gtmId="GTM-XXXXXXX"
|
|
47
|
+
* auth="your-auth-token"
|
|
48
|
+
* preview="env-3"
|
|
49
|
+
* showInDevMode
|
|
44
50
|
* />
|
|
45
51
|
* ```
|
|
46
52
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/googleTagManager/index.tsx"],"names":[],"mappings":"AAGA,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/googleTagManager/index.tsx"],"names":[],"mappings":"AAGA,KAAK,qBAAqB,GAAG;IAC3B,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA6BrD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -2,39 +2,38 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { ClientOnly } from "../clientOnly";
|
|
3
3
|
import { GoogleTagManagerClient } from "./googleTagManager.client";
|
|
4
4
|
/**
|
|
5
|
-
* GoogleTagManager
|
|
5
|
+
* GoogleTagManager — injects the GTM `<script>` and `<noscript>` snippets into the page client-side.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* @param props.
|
|
7
|
+
* Renders nothing in development mode unless `showInDevMode` is `true`.
|
|
8
|
+
* Wrapped in `ClientOnly` to avoid SSR errors.
|
|
9
|
+
*
|
|
10
|
+
* @param props.gtmId - GTM container ID (e.g. `"GTM-XXXXXXX"`). Required.
|
|
11
|
+
* @param props.dataLayer - Initial key-value pairs for the dataLayer.
|
|
11
12
|
* @param props.dataLayerName - Global dataLayer variable name. Default: "dataLayer"
|
|
12
|
-
* @param props.
|
|
13
|
-
* @param props.
|
|
14
|
-
* @param props.
|
|
13
|
+
* @param props.events - Additional key-value pairs pushed on initialization.
|
|
14
|
+
* @param props.auth - GTM environment auth token.
|
|
15
|
+
* @param props.preview - GTM environment preview token (e.g. `"env-3"`).
|
|
16
|
+
* @param props.showInDevMode - Renders in development mode. Default: false
|
|
15
17
|
*
|
|
16
|
-
* @returns GoogleTagManager JSX element
|
|
18
|
+
* @returns GoogleTagManager JSX element, or an empty fragment in dev mode.
|
|
17
19
|
*
|
|
18
20
|
* @example
|
|
19
21
|
* ```tsx
|
|
20
|
-
* // Basic
|
|
22
|
+
* // Basic setup in your root layout
|
|
21
23
|
* <GoogleTagManager gtmId="GTM-XXXXXXX" />
|
|
22
24
|
*
|
|
23
|
-
* //
|
|
25
|
+
* // With initial dataLayer values
|
|
24
26
|
* <GoogleTagManager
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* pageType: "home",
|
|
28
|
-
* userType: "anonymous",
|
|
29
|
-
* }}
|
|
27
|
+
* gtmId="GTM-XXXXXXX"
|
|
28
|
+
* dataLayer={{ pageType: "home", userType: "anonymous" }}
|
|
30
29
|
* />
|
|
31
30
|
*
|
|
32
|
-
* //
|
|
31
|
+
* // Staging/preview environment
|
|
33
32
|
* <GoogleTagManager
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
33
|
+
* gtmId="GTM-XXXXXXX"
|
|
34
|
+
* auth="your-auth-token"
|
|
35
|
+
* preview="env-3"
|
|
36
|
+
* showInDevMode
|
|
38
37
|
* />
|
|
39
38
|
* ```
|
|
40
39
|
*/
|
|
@@ -2,40 +2,56 @@ import { LucideIcon } from "lucide-react";
|
|
|
2
2
|
import { ButtonHTMLAttributes } from "react";
|
|
3
3
|
import "./styles.css";
|
|
4
4
|
type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-label"> & {
|
|
5
|
+
/** Lucide icon component rendered inside the button. Required. */
|
|
5
6
|
icon: LucideIcon;
|
|
7
|
+
/** Accessible label for screen readers. Required. */
|
|
6
8
|
"aria-label": string;
|
|
9
|
+
/** Shows a spinner and disables the button during async operations. @default false */
|
|
7
10
|
isLoading?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Button size.
|
|
13
|
+
* @default "md"
|
|
14
|
+
*/
|
|
8
15
|
size?: "xs" | "sm" | "md" | "lg";
|
|
16
|
+
/**
|
|
17
|
+
* Visual style variant.
|
|
18
|
+
* - `solid`: filled background.
|
|
19
|
+
* - `outline`: bordered, transparent background.
|
|
20
|
+
* - `ghost`: no border, subtle hover.
|
|
21
|
+
* - `invisible`: no visual styling.
|
|
22
|
+
* @default "solid"
|
|
23
|
+
*/
|
|
9
24
|
variant?: "solid" | "outline" | "ghost" | "invisible";
|
|
25
|
+
/**
|
|
26
|
+
* Color scheme applied to the button.
|
|
27
|
+
* @default "primary"
|
|
28
|
+
*/
|
|
10
29
|
scheme?: "primary" | "success" | "warning" | "danger" | "info";
|
|
11
30
|
};
|
|
12
31
|
/**
|
|
13
|
-
* IconButton
|
|
32
|
+
* IconButton — compact button that renders a single icon without a text label.
|
|
14
33
|
*
|
|
15
|
-
*
|
|
16
|
-
* @param props.icon - Icon to render inside the button (LucideIcon). Required
|
|
17
|
-
* @param props.aria-label - Accessible label for screen readers. Required
|
|
18
|
-
* @param props.isLoading - Controls loading state with spinner. Default: false
|
|
19
|
-
* @param props.size - Button size. Default: "md"
|
|
20
|
-
* @param props.variant - Visual variant of the button. Default: "solid"
|
|
21
|
-
* @param props.scheme - Button color scheme. Default: "primary"
|
|
34
|
+
* Always requires `aria-label` for accessibility.
|
|
22
35
|
*
|
|
23
|
-
*
|
|
36
|
+
* @param props.icon - Lucide icon component to render. Required.
|
|
37
|
+
* @param props["aria-label"] - Accessible label for screen readers. Required.
|
|
38
|
+
* @param props.isLoading - Shows a spinner and disables the button. Default: false
|
|
39
|
+
* @param props.size - Button size (`xs` | `sm` | `md` | `lg`). Default: "md"
|
|
40
|
+
* @param props.variant - Visual style variant. Default: "solid"
|
|
41
|
+
* @param props.scheme - Color scheme. Default: "primary"
|
|
24
42
|
*
|
|
25
|
-
*
|
|
43
|
+
* **...Other valid HTML properties for `<button>` (children not supported)**
|
|
44
|
+
*
|
|
45
|
+
* @returns IconButton JSX element.
|
|
26
46
|
*
|
|
27
47
|
* @example
|
|
28
48
|
* ```tsx
|
|
29
|
-
*
|
|
30
|
-
* <IconButton icon={Plus} aria-label="Add" />
|
|
49
|
+
* <IconButton icon={Plus} aria-label="Add item" />
|
|
31
50
|
*
|
|
32
|
-
* // Different color scheme and variant
|
|
33
51
|
* <IconButton icon={Trash2} aria-label="Delete" scheme="danger" variant="outline" />
|
|
34
52
|
*
|
|
35
|
-
* // Loading state
|
|
36
53
|
* <IconButton icon={Save} aria-label="Saving" isLoading />
|
|
37
54
|
*
|
|
38
|
-
* // Sizes
|
|
39
55
|
* <IconButton icon={MoreVertical} aria-label="More options" size="sm" />
|
|
40
56
|
* ```
|
|
41
57
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/iconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,IAAI,CACzB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,YAAY,CAC1B,GAAG;IACF,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/iconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,IAAI,CACzB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,YAAY,CAC1B,GAAG;IACF,kEAAkE;IAClE,IAAI,EAAE,UAAU,CAAC;IACjB,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;CAChE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CA+BzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -2,32 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Loader2 } from "lucide-react";
|
|
3
3
|
import "./styles.css";
|
|
4
4
|
/**
|
|
5
|
-
* IconButton
|
|
5
|
+
* IconButton — compact button that renders a single icon without a text label.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
* @param props.icon - Icon to render inside the button (LucideIcon). Required
|
|
9
|
-
* @param props.aria-label - Accessible label for screen readers. Required
|
|
10
|
-
* @param props.isLoading - Controls loading state with spinner. Default: false
|
|
11
|
-
* @param props.size - Button size. Default: "md"
|
|
12
|
-
* @param props.variant - Visual variant of the button. Default: "solid"
|
|
13
|
-
* @param props.scheme - Button color scheme. Default: "primary"
|
|
7
|
+
* Always requires `aria-label` for accessibility.
|
|
14
8
|
*
|
|
15
|
-
*
|
|
9
|
+
* @param props.icon - Lucide icon component to render. Required.
|
|
10
|
+
* @param props["aria-label"] - Accessible label for screen readers. Required.
|
|
11
|
+
* @param props.isLoading - Shows a spinner and disables the button. Default: false
|
|
12
|
+
* @param props.size - Button size (`xs` | `sm` | `md` | `lg`). Default: "md"
|
|
13
|
+
* @param props.variant - Visual style variant. Default: "solid"
|
|
14
|
+
* @param props.scheme - Color scheme. Default: "primary"
|
|
16
15
|
*
|
|
17
|
-
*
|
|
16
|
+
* **...Other valid HTML properties for `<button>` (children not supported)**
|
|
17
|
+
*
|
|
18
|
+
* @returns IconButton JSX element.
|
|
18
19
|
*
|
|
19
20
|
* @example
|
|
20
21
|
* ```tsx
|
|
21
|
-
*
|
|
22
|
-
* <IconButton icon={Plus} aria-label="Add" />
|
|
22
|
+
* <IconButton icon={Plus} aria-label="Add item" />
|
|
23
23
|
*
|
|
24
|
-
* // Different color scheme and variant
|
|
25
24
|
* <IconButton icon={Trash2} aria-label="Delete" scheme="danger" variant="outline" />
|
|
26
25
|
*
|
|
27
|
-
* // Loading state
|
|
28
26
|
* <IconButton icon={Save} aria-label="Saving" isLoading />
|
|
29
27
|
*
|
|
30
|
-
* // Sizes
|
|
31
28
|
* <IconButton icon={MoreVertical} aria-label="More options" size="sm" />
|
|
32
29
|
* ```
|
|
33
30
|
*/
|