@consumidor-positivo/aurora 0.0.77 → 0.0.78
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/Checkbox/index.es.js +135 -0
- package/dist/components/Checkbox/index.es.js.map +1 -0
- package/dist/components/{CheckboxField → Checkbox}/styles.css +1 -1
- package/dist/components/form/{CheckboxField → Checkbox/Field}/index.d.ts +1 -6
- package/dist/components/form/Checkbox/Group/hook.d.ts +11 -0
- package/dist/components/form/Checkbox/Group/index.d.ts +3 -0
- package/dist/components/form/Checkbox/index.d.ts +8 -0
- package/dist/components/form/Checkbox/types.d.ts +19 -0
- package/dist/main.d.ts +1 -1
- package/dist/main.es.js +2 -2
- package/package.json +1 -1
- package/dist/components/CheckboxField/index.es.js +0 -46
- package/dist/components/CheckboxField/index.es.js.map +0 -1
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import $dbSRa$react__default, { useState, useEffect } from "react";
|
|
3
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
|
+
import "../Icon/index.es.js";
|
|
5
|
+
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
6
|
+
import { F as Field } from "../../index-DfksciAR.js";
|
|
7
|
+
import { m as COLOR_NEUTRAL_00 } from "../../tokens-DGTtjw-_.js";
|
|
8
|
+
import { Conditional } from "../Conditional/index.es.js";
|
|
9
|
+
import { Text } from "../Text/index.es.js";
|
|
10
|
+
import './styles.css';const CheckboxField = ({
|
|
11
|
+
label,
|
|
12
|
+
error,
|
|
13
|
+
errorMessage,
|
|
14
|
+
disabled,
|
|
15
|
+
id,
|
|
16
|
+
style,
|
|
17
|
+
...props
|
|
18
|
+
}) => {
|
|
19
|
+
const checkboxClasses = classNames("au-checkbox", {
|
|
20
|
+
"au-checkbox--error": !!error,
|
|
21
|
+
"au-checkbox--disabled": !!disabled
|
|
22
|
+
});
|
|
23
|
+
const getSafeId = (id2) => {
|
|
24
|
+
return id2 ? id2 : `au-checkbox-${Math.random()}`;
|
|
25
|
+
};
|
|
26
|
+
const [safeId] = useState(getSafeId(id));
|
|
27
|
+
return /* @__PURE__ */ jsxs("div", { className: checkboxClasses, style, children: [
|
|
28
|
+
/* @__PURE__ */ jsxs("label", { htmlFor: safeId, className: "au-checkbox__holder", children: [
|
|
29
|
+
/* @__PURE__ */ jsx(
|
|
30
|
+
"input",
|
|
31
|
+
{
|
|
32
|
+
className: "au-checkbox__input",
|
|
33
|
+
type: "checkbox",
|
|
34
|
+
id: safeId,
|
|
35
|
+
disabled,
|
|
36
|
+
...props
|
|
37
|
+
}
|
|
38
|
+
),
|
|
39
|
+
/* @__PURE__ */ jsx("span", { className: "au-checkbox__check", children: /* @__PURE__ */ jsx(IconCheck, { rawColor: COLOR_NEUTRAL_00 }) }),
|
|
40
|
+
/* @__PURE__ */ jsx("span", { className: "au-checkbox__label", children: label })
|
|
41
|
+
] }),
|
|
42
|
+
/* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: !!error, message: errorMessage })
|
|
43
|
+
] });
|
|
44
|
+
};
|
|
45
|
+
const useCheckboxGroup = ({ onChange, name }) => {
|
|
46
|
+
const getSafeName = (name2) => {
|
|
47
|
+
return name2 ? name2 : `au-checkbox-group-${Math.random()}`;
|
|
48
|
+
};
|
|
49
|
+
const [safeName] = useState(getSafeName(name));
|
|
50
|
+
const [selectedOptions, setSelectedOptions] = useState([{}]);
|
|
51
|
+
function handleSelectOption(checked, option, index) {
|
|
52
|
+
setSelectedOptions({
|
|
53
|
+
...selectedOptions,
|
|
54
|
+
[index]: checked ? option : false
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
const returnResponse = Object.values(selectedOptions).filter(
|
|
59
|
+
(item) => !!item
|
|
60
|
+
);
|
|
61
|
+
if (onChange) {
|
|
62
|
+
const event = {
|
|
63
|
+
target: {
|
|
64
|
+
checked: returnResponse
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
onChange(event);
|
|
68
|
+
}
|
|
69
|
+
}, [selectedOptions]);
|
|
70
|
+
return {
|
|
71
|
+
handleSelectOption,
|
|
72
|
+
safeName
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
const CheckboxGroup = ({
|
|
76
|
+
name,
|
|
77
|
+
defaultValue,
|
|
78
|
+
orientation = "vertical",
|
|
79
|
+
label,
|
|
80
|
+
error,
|
|
81
|
+
errorMessage,
|
|
82
|
+
required = false,
|
|
83
|
+
children,
|
|
84
|
+
onChange,
|
|
85
|
+
onFocus
|
|
86
|
+
}) => {
|
|
87
|
+
const groupClass = classNames("au-checkbox-group", {
|
|
88
|
+
"au-checkbox-group--horizontal": orientation === "horizontal"
|
|
89
|
+
});
|
|
90
|
+
const { handleSelectOption, safeName } = useCheckboxGroup({ onChange, name });
|
|
91
|
+
const childrenWithProps = $dbSRa$react__default.Children.map(children, (child, index) => {
|
|
92
|
+
if ($dbSRa$react__default.isValidElement(child)) {
|
|
93
|
+
const childProps = child.props;
|
|
94
|
+
return /* @__PURE__ */ jsx(
|
|
95
|
+
CheckboxField,
|
|
96
|
+
{
|
|
97
|
+
name: safeName,
|
|
98
|
+
error,
|
|
99
|
+
defaultChecked: defaultValue === childProps.value,
|
|
100
|
+
onChange: (e) => handleSelectOption(e.target.checked, childProps, index),
|
|
101
|
+
onFocus,
|
|
102
|
+
...child.props
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
return child;
|
|
107
|
+
});
|
|
108
|
+
return /* @__PURE__ */ jsxs("div", { className: groupClass, children: [
|
|
109
|
+
/* @__PURE__ */ jsx(
|
|
110
|
+
Conditional,
|
|
111
|
+
{
|
|
112
|
+
condition: !!label,
|
|
113
|
+
renderIf: /* @__PURE__ */ jsxs(Text, { variant: "body-small", weight: "semibold", color: "secondary", children: [
|
|
114
|
+
label,
|
|
115
|
+
" ",
|
|
116
|
+
!!required && /* @__PURE__ */ jsx("span", { className: "au-checkbox-group__label--required", children: "*" })
|
|
117
|
+
] })
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ jsx("div", { className: "au-checkbox-group__fields", children: childrenWithProps }),
|
|
121
|
+
/* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: !!error, message: errorMessage })
|
|
122
|
+
] });
|
|
123
|
+
};
|
|
124
|
+
const components = {
|
|
125
|
+
Field: CheckboxField,
|
|
126
|
+
Group: CheckboxGroup
|
|
127
|
+
};
|
|
128
|
+
Object.keys(components).forEach((key) => {
|
|
129
|
+
const component = components[key];
|
|
130
|
+
component.displayName = `Checkbox.${key}`;
|
|
131
|
+
});
|
|
132
|
+
export {
|
|
133
|
+
components as Checkbox
|
|
134
|
+
};
|
|
135
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Checkbox/Field/index.tsx","../../../lib/components/form/Checkbox/Group/hook.tsx","../../../lib/components/form/Checkbox/Group/index.tsx","../../../lib/components/form/Checkbox/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport classNames from 'classnames'\nimport { IconCheck } from '@components/icons'\nimport { COLOR_NEUTRAL_00 } from '@core/tokens'\nimport Field from '../../Field'\n\nimport { CheckboxFieldProps } from '../types'\nimport './styles.scss'\n\nexport const CheckboxField = ({\n label,\n error,\n errorMessage,\n disabled,\n id,\n style,\n ...props\n}: CheckboxFieldProps) => {\n const checkboxClasses = classNames('au-checkbox', {\n 'au-checkbox--error': !!error,\n 'au-checkbox--disabled': !!disabled,\n })\n\n const getSafeId = (id: CheckboxFieldProps['id']) => {\n return id ? id : `au-checkbox-${Math.random()}`\n }\n const [safeId] = useState(getSafeId(id))\n\n return (\n <div className={checkboxClasses} style={style}>\n <label htmlFor={safeId} className=\"au-checkbox__holder\">\n <input\n className=\"au-checkbox__input\"\n type=\"checkbox\"\n id={safeId}\n disabled={disabled}\n {...props}\n />\n <span className=\"au-checkbox__check\">\n <IconCheck rawColor={COLOR_NEUTRAL_00} />\n </span>\n <span className=\"au-checkbox__label\">{label}</span>\n </label>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </div>\n )\n}\n","import { useEffect, useState } from 'react'\nimport { CheckboxFieldProps } from '../types'\n\ntype UseCheckboxGroupProps = {\n name?: string\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const useCheckboxGroup = ({ onChange, name }: UseCheckboxGroupProps) => {\n const getSafeName = (name?: string): string => {\n return name ? name : `au-checkbox-group-${Math.random()}`\n }\n const [safeName] = useState(getSafeName(name))\n\n const [selectedOptions, setSelectedOptions] = useState([{}])\n\n function handleSelectOption(\n checked: boolean,\n option: CheckboxFieldProps,\n index: number,\n ) {\n setSelectedOptions({\n ...selectedOptions,\n [index]: checked ? option : false,\n })\n }\n\n useEffect(() => {\n const returnResponse = Object.values(selectedOptions).filter(\n (item) => !!item,\n )\n\n if (onChange) {\n const event = {\n target: {\n checked: returnResponse,\n },\n } as unknown as React.ChangeEvent<HTMLInputElement>\n\n onChange(event)\n }\n }, [selectedOptions])\n\n return {\n handleSelectOption,\n safeName,\n }\n}\n","import React from 'react'\nimport classNames from 'classnames'\nimport './styles.scss'\nimport Field from '@components/form/Field'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport { CheckboxField } from '../Field'\nimport { CheckboxFieldProps, CheckboxGroupProps } from '../types'\nimport { useCheckboxGroup } from './hook'\n\nexport const CheckboxGroup = ({\n name,\n defaultValue,\n orientation = 'vertical',\n label,\n error,\n errorMessage,\n required = false,\n children,\n onChange,\n onFocus,\n}: CheckboxGroupProps) => {\n const groupClass = classNames('au-checkbox-group', {\n 'au-checkbox-group--horizontal': orientation === 'horizontal',\n })\n\n const { handleSelectOption, safeName } = useCheckboxGroup({onChange, name})\n\n const childrenWithProps = React.Children.map(children, (child, index) => {\n if (React.isValidElement(child)) {\n const childProps = child.props as CheckboxFieldProps\n\n return (\n <CheckboxField\n name={safeName}\n error={error}\n defaultChecked={defaultValue === childProps.value}\n onChange={(e) =>\n handleSelectOption(e.target.checked, childProps, index)\n }\n onFocus={onFocus}\n {...child.props}\n />\n )\n }\n return child\n })\n\n return (\n <div className={groupClass}>\n <Conditional\n condition={!!label}\n renderIf={\n <Text variant=\"body-small\" weight=\"semibold\" color=\"secondary\">\n {label}{' '}\n {!!required && (\n <span className=\"au-checkbox-group__label--required\">*</span>\n )}\n </Text>\n }\n />\n <div className=\"au-checkbox-group__fields\">{childrenWithProps}</div>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </div>\n )\n}\n","import { CheckboxField } from './Field'\nimport { CheckboxGroup } from './Group'\nimport { CheckboxFieldProps, CheckboxGroupProps } from './types'\n\ntype Components = {\n Field: React.FC<CheckboxFieldProps>\n Group: React.FC<CheckboxGroupProps>\n}\n\nconst components: Components = {\n Field: CheckboxField,\n Group: CheckboxGroup,\n}\n\nObject.keys(components).forEach((key) => {\n const component = components[key as keyof Components]\n component.displayName = `Checkbox.${key}`\n})\n\nexport { components as Checkbox }\n"],"names":["id","name","React"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-checkbox{position:relative}.au-checkbox__holder{cursor:pointer;display:flex;gap:8px;align-items:start}.au-checkbox__input{position:absolute;opacity:0;width:0;height:0}.au-checkbox__input:checked~.au-checkbox__check{background-color:#0048db;border-color:#0048db}.au-checkbox__input:checked~.au-checkbox__check .au-icon svg{opacity:1}.au-checkbox__input:hover:not(:focus)~.au-checkbox__check{border-color:#0048db;outline:2px solid #F2F5FC}.au-checkbox__input:hover:not(:checked)~.au-checkbox__check{background-color:#f2f5fc}.au-checkbox__input:focus~.au-checkbox__check{box-shadow:0 0 0 1px #fff,0 0 0 3px #0048db}.au-checkbox__check{background-color:#fff;border:2px solid #454a54;border-radius:4px;height:24px;width:24px;transition:background-color .2s ease}.au-checkbox__check .au-icon svg{position:absolute;left:0;top:0;opacity:0;transition:opacity .2s ease}.au-checkbox__label{color:#454a54;font-family:"Source Sans 3",sans-serif;font-size:16px;line-height:24px;word-wrap:break-word;max-width:calc(100% - 32px)}.au-checkbox--error .au-checkbox__check{border:2px solid #991717}.au-checkbox--disabled .au-checkbox__holder{cursor:not-allowed}.au-checkbox--disabled .au-checkbox__input:checked~.au-checkbox__check{background-color:#c4c9d4;border-color:#c4c9d4}.au-checkbox--disabled .au-checkbox__input:hover~.au-checkbox__check{border-color:#c4c9d4;outline:none}.au-checkbox--disabled .au-checkbox__input:hover:not(:checked)~.au-checkbox__check{background-color:inherit}.au-checkbox--disabled .au-checkbox__check{border:2px solid #c4c9d4}.au-checkbox--disabled .au-checkbox__label{color:#c4c9d4}
|
|
1
|
+
.au-checkbox{position:relative}.au-checkbox__holder{cursor:pointer;display:flex;gap:8px;align-items:start}.au-checkbox__input{position:absolute;opacity:0;width:0;height:0}.au-checkbox__input:checked~.au-checkbox__check{background-color:#0048db;border-color:#0048db}.au-checkbox__input:checked~.au-checkbox__check .au-icon svg{opacity:1}.au-checkbox__input:hover:not(:focus)~.au-checkbox__check{border-color:#0048db;outline:2px solid #F2F5FC}.au-checkbox__input:hover:not(:checked)~.au-checkbox__check{background-color:#f2f5fc}.au-checkbox__input:focus~.au-checkbox__check{box-shadow:0 0 0 1px #fff,0 0 0 3px #0048db}.au-checkbox__check{background-color:#fff;border:2px solid #454a54;border-radius:4px;height:24px;width:24px;transition:background-color .2s ease}.au-checkbox__check .au-icon svg{position:absolute;left:0;top:0;opacity:0;transition:opacity .2s ease}.au-checkbox__label{color:#454a54;font-family:"Source Sans 3",sans-serif;font-size:16px;line-height:24px;word-wrap:break-word;max-width:calc(100% - 32px)}.au-checkbox--error .au-checkbox__check{border:2px solid #991717}.au-checkbox--disabled .au-checkbox__holder{cursor:not-allowed}.au-checkbox--disabled .au-checkbox__input:checked~.au-checkbox__check{background-color:#c4c9d4;border-color:#c4c9d4}.au-checkbox--disabled .au-checkbox__input:hover~.au-checkbox__check{border-color:#c4c9d4;outline:none}.au-checkbox--disabled .au-checkbox__input:hover:not(:checked)~.au-checkbox__check{background-color:inherit}.au-checkbox--disabled .au-checkbox__check{border:2px solid #c4c9d4}.au-checkbox--disabled .au-checkbox__label{color:#c4c9d4}.au-checkbox-group{display:flex;flex-direction:column;gap:16px}.au-checkbox-group__label--required{color:#991717}.au-checkbox-group__fields{display:flex;flex-direction:column;gap:16px}.au-checkbox-group--horizontal .au-checkbox-group__fields{flex-direction:row}
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
+
import { CheckboxFieldProps } from '../types';
|
|
1
2
|
|
|
2
|
-
type CheckboxFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
3
|
-
label: string;
|
|
4
|
-
error?: boolean;
|
|
5
|
-
errorMessage?: string;
|
|
6
|
-
};
|
|
7
3
|
export declare const CheckboxField: ({ label, error, errorMessage, disabled, id, style, ...props }: CheckboxFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CheckboxFieldProps } from '../types';
|
|
2
|
+
|
|
3
|
+
type UseCheckboxGroupProps = {
|
|
4
|
+
name?: string;
|
|
5
|
+
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
6
|
+
};
|
|
7
|
+
export declare const useCheckboxGroup: ({ onChange, name }: UseCheckboxGroupProps) => {
|
|
8
|
+
handleSelectOption: (checked: boolean, option: CheckboxFieldProps, index: number) => void;
|
|
9
|
+
safeName: string;
|
|
10
|
+
};
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CheckboxField } from './Field';
|
|
2
|
+
|
|
3
|
+
export type CheckboxFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
4
|
+
label?: string;
|
|
5
|
+
error?: boolean;
|
|
6
|
+
errorMessage?: string;
|
|
7
|
+
};
|
|
8
|
+
export type CheckboxGroupProps = {
|
|
9
|
+
children: React.ReactElement<typeof CheckboxField>[];
|
|
10
|
+
name?: string;
|
|
11
|
+
defaultValue?: string | number;
|
|
12
|
+
orientation?: 'horizontal' | 'vertical';
|
|
13
|
+
label?: string;
|
|
14
|
+
error?: boolean;
|
|
15
|
+
errorMessage?: string;
|
|
16
|
+
required?: boolean;
|
|
17
|
+
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
18
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
19
|
+
};
|
package/dist/main.d.ts
CHANGED
|
@@ -14,8 +14,8 @@ export { TokenField } from './components/form/TokenField';
|
|
|
14
14
|
export { SelectField } from './components/form/SelectField';
|
|
15
15
|
export { PasswordField } from './components/form/PasswordField';
|
|
16
16
|
export { DatepickerField } from './components/form/Datepicker';
|
|
17
|
-
export { CheckboxField } from './components/form/CheckboxField';
|
|
18
17
|
export { TextAreaField } from './components/form/TextareaField';
|
|
18
|
+
export { Checkbox } from './components/form/Checkbox';
|
|
19
19
|
export { Radio } from './components/form/Radio';
|
|
20
20
|
export { useDrawer } from './components/Drawer/hooks';
|
|
21
21
|
export * from './components/Logo';
|
package/dist/main.es.js
CHANGED
|
@@ -13,8 +13,8 @@ import { TokenField } from "./components/TokenField/index.es.js";
|
|
|
13
13
|
import { SelectField } from "./components/SelectField/index.es.js";
|
|
14
14
|
import { PasswordField } from "./components/PasswordField/index.es.js";
|
|
15
15
|
import { DatepickerField } from "./components/Datepicker/index.es.js";
|
|
16
|
-
import { CheckboxField } from "./components/CheckboxField/index.es.js";
|
|
17
16
|
import { TextAreaField } from "./components/TextareaField/index.es.js";
|
|
17
|
+
import { Checkbox } from "./components/Checkbox/index.es.js";
|
|
18
18
|
import { Radio } from "./components/Radio/index.es.js";
|
|
19
19
|
import { useState } from "react";
|
|
20
20
|
import { L, a, b, c, d, e, f, g, h, i, j, k, l, m } from "./Tertiary-DMp-1eWT.js";
|
|
@@ -415,7 +415,7 @@ export {
|
|
|
415
415
|
V as COLOR_WARNING_50,
|
|
416
416
|
U as COLOR_WARNING_60,
|
|
417
417
|
ak as CONTAINER_SIZE,
|
|
418
|
-
|
|
418
|
+
Checkbox,
|
|
419
419
|
Conditional,
|
|
420
420
|
DatepickerField,
|
|
421
421
|
Drawer,
|
package/package.json
CHANGED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
|
-
import "../Icon/index.es.js";
|
|
5
|
-
import { IconCheck } from "../icons/IconCheck/index.es.js";
|
|
6
|
-
import { F as Field } from "../../index-DfksciAR.js";
|
|
7
|
-
import { m as COLOR_NEUTRAL_00 } from "../../tokens-DGTtjw-_.js";
|
|
8
|
-
import './styles.css';const CheckboxField = ({
|
|
9
|
-
label,
|
|
10
|
-
error,
|
|
11
|
-
errorMessage,
|
|
12
|
-
disabled,
|
|
13
|
-
id,
|
|
14
|
-
style,
|
|
15
|
-
...props
|
|
16
|
-
}) => {
|
|
17
|
-
const checkboxClasses = classNames("au-checkbox", {
|
|
18
|
-
"au-checkbox--error": !!error,
|
|
19
|
-
"au-checkbox--disabled": !!disabled
|
|
20
|
-
});
|
|
21
|
-
const getSafeId = (id2) => {
|
|
22
|
-
return id2 ? id2 : `au-checkbox-${Math.random()}`;
|
|
23
|
-
};
|
|
24
|
-
const [safeId] = useState(getSafeId(id));
|
|
25
|
-
return /* @__PURE__ */ jsxs("div", { className: checkboxClasses, style, children: [
|
|
26
|
-
/* @__PURE__ */ jsxs("label", { htmlFor: safeId, className: "au-checkbox__holder", children: [
|
|
27
|
-
/* @__PURE__ */ jsx(
|
|
28
|
-
"input",
|
|
29
|
-
{
|
|
30
|
-
className: "au-checkbox__input",
|
|
31
|
-
type: "checkbox",
|
|
32
|
-
id: safeId,
|
|
33
|
-
disabled,
|
|
34
|
-
...props
|
|
35
|
-
}
|
|
36
|
-
),
|
|
37
|
-
/* @__PURE__ */ jsx("span", { className: "au-checkbox__check", children: /* @__PURE__ */ jsx(IconCheck, { rawColor: COLOR_NEUTRAL_00 }) }),
|
|
38
|
-
/* @__PURE__ */ jsx("span", { className: "au-checkbox__label", children: label })
|
|
39
|
-
] }),
|
|
40
|
-
/* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: !!error, message: errorMessage })
|
|
41
|
-
] });
|
|
42
|
-
};
|
|
43
|
-
export {
|
|
44
|
-
CheckboxField
|
|
45
|
-
};
|
|
46
|
-
//# sourceMappingURL=index.es.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/CheckboxField/index.tsx"],"sourcesContent":["import { useState } from 'react'\nimport classNames from 'classnames'\nimport { IconCheck } from '@components/icons'\nimport { COLOR_NEUTRAL_00 } from '@core/tokens'\nimport Field from '../Field'\n\nimport './styles.scss'\n\ntype CheckboxFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {\n label: string\n error?: boolean\n errorMessage?: string\n}\n\nexport const CheckboxField = ({\n label,\n error,\n errorMessage,\n disabled,\n id,\n style,\n ...props\n}: CheckboxFieldProps) => {\n const checkboxClasses = classNames('au-checkbox', {\n 'au-checkbox--error': !!error,\n 'au-checkbox--disabled': !!disabled,\n })\n\n const getSafeId = (id: CheckboxFieldProps['id']) => {\n return id ? id : `au-checkbox-${Math.random()}`\n }\n const [safeId] = useState(getSafeId(id))\n\n return (\n <div className={checkboxClasses} style={style}>\n <label htmlFor={safeId} className=\"au-checkbox__holder\">\n <input\n className=\"au-checkbox__input\"\n type=\"checkbox\"\n id={safeId}\n disabled={disabled}\n {...props}\n />\n <span className=\"au-checkbox__check\">\n <IconCheck rawColor={COLOR_NEUTRAL_00} />\n </span>\n <span className=\"au-checkbox__label\">{label}</span>\n </label>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </div>\n )\n}\n"],"names":["id"],"mappings":";;;;;;;AAcO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AAClB,QAAA,kBAAkB,WAAW,eAAe;AAAA,IAChD,sBAAsB,CAAC,CAAC;AAAA,IACxB,yBAAyB,CAAC,CAAC;AAAA,EAAA,CAC5B;AAEK,QAAA,YAAY,CAACA,QAAiC;AAClD,WAAOA,MAAKA,MAAK,eAAe,KAAK,OAAQ,CAAA;AAAA,EAAA;AAE/C,QAAM,CAAC,MAAM,IAAI,SAAS,UAAU,EAAE,CAAC;AAEvC,SACG,qBAAA,OAAA,EAAI,WAAW,iBAAiB,OAC/B,UAAA;AAAA,IAAA,qBAAC,SAAM,EAAA,SAAS,QAAQ,WAAU,uBAChC,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,IAAI;AAAA,UACJ;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,MACA,oBAAC,UAAK,WAAU,sBACd,8BAAC,WAAU,EAAA,UAAU,kBAAkB,EACzC,CAAA;AAAA,MACC,oBAAA,QAAA,EAAK,WAAU,sBAAsB,UAAM,OAAA;AAAA,IAAA,GAC9C;AAAA,IACA,oBAAC,MAAM,cAAN,EAAmB,UAAU,CAAC,CAAC,OAAO,SAAS,cAAc;AAAA,EAChE,EAAA,CAAA;AAEJ;"}
|