@consumidor-positivo/aurora 0.0.56 → 0.0.57

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 (5) hide show
  1. package/dist/components/SelectField/index.es.js +90 -66
  2. package/dist/components/SelectField/index.es.js.map +1 -1
  3. package/dist/components/form/SelectField/index.d.ts +5 -2
  4. package/dist/components/tokens/styles.css +1 -1
  5. package/package.json +1 -1
package/dist/components/SelectField/index.es.js CHANGED
@@ -103,7 +103,10 @@ const SelectField = ({
103
103
  label,
104
104
  options,
105
105
  optional,
106
+ error,
107
+ errorMessage,
106
108
  disabled,
109
+ required,
107
110
  value,
108
111
  onChange,
109
112
  style,
@@ -128,77 +131,98 @@ const SelectField = ({
128
131
  const dropdownClasses = classNames("au-field__select", {
129
132
  "au-field__select--disabled": disabled,
130
133
  "au-field__select--open": isDropdownOpen,
134
+ "au-field__select--required": required,
135
+ "au-field__select--error": error,
131
136
  [className]: className
132
137
  });
133
- return /* @__PURE__ */ jsxs(Field.Root, { style, customclass: className, disabled, children: [
134
- /* @__PURE__ */ jsx(Field.Label, { text: label, optional, disabled }),
135
- /* @__PURE__ */ jsxs("div", { className: dropdownClasses, children: [
136
- /* @__PURE__ */ jsxs(
137
- "div",
138
- {
139
- className: "au-field__select-wrapper",
140
- onClick: toggleDropdown,
141
- onKeyDown: onKeyDownDropdown,
142
- tabIndex: disabled ? -1 : 0,
143
- ref: selectRef,
144
- role: "combobox",
145
- "aria-haspopup": "listbox",
146
- "aria-expanded": isDropdownOpen,
147
- "aria-labelledby": "select-label",
148
- "aria-activedescendant": activeOptionIndex !== null ? options[activeOptionIndex].value : void 0,
149
- onBlur,
150
- children: [
151
- /* @__PURE__ */ jsx("div", { className: "au-field__select-display", children: ((_a = options.find((option) => option.value === currentValue)) == null ? void 0 : _a.label) || placeholder || "Selecionar..." }),
152
- /* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconChevronDown, {}) })
153
- ]
154
- }
155
- ),
156
- /* @__PURE__ */ jsx(
157
- "ul",
158
- {
159
- className: classNames("au-field__select-options", {
160
- "au-field__select-options--open": isDropdownOpen
161
- }),
162
- role: "listbox",
163
- "aria-live": "polite",
164
- tabIndex: -1,
165
- children: options.map((option, index) => /* @__PURE__ */ jsxs(
166
- "li",
138
+ return /* @__PURE__ */ jsxs(
139
+ Field.Root,
140
+ {
141
+ style,
142
+ customclass: className,
143
+ error,
144
+ disabled,
145
+ children: [
146
+ /* @__PURE__ */ jsx(
147
+ Field.Label,
148
+ {
149
+ text: label,
150
+ optional,
151
+ required,
152
+ error,
153
+ disabled
154
+ }
155
+ ),
156
+ /* @__PURE__ */ jsxs("div", { className: dropdownClasses, children: [
157
+ /* @__PURE__ */ jsxs(
158
+ "div",
167
159
  {
168
- className: classNames("au-field__select-option", {
169
- "au-field__select-option--highlighted": activeOptionIndex === index,
170
- "au-field__select-option--selected": option.value === currentValue,
171
- "au-field__select-option--disabled": option.disabled
172
- }),
173
- role: "option",
174
- "aria-selected": option.value === currentValue,
175
- "aria-disabled": option.disabled,
176
- onClick: () => selectOption(option.value, option.disabled),
177
- onMouseEnter: () => setActiveOptionIndex(index),
160
+ className: "au-field__select-wrapper",
161
+ onClick: toggleDropdown,
162
+ onKeyDown: onKeyDownDropdown,
163
+ tabIndex: disabled ? -1 : 0,
164
+ ref: selectRef,
165
+ role: "combobox",
166
+ "aria-haspopup": "listbox",
167
+ "aria-expanded": isDropdownOpen,
168
+ "aria-labelledby": "select-label",
169
+ "aria-activedescendant": activeOptionIndex !== null ? options[activeOptionIndex].value : void 0,
170
+ onBlur,
178
171
  children: [
179
- option.label,
180
- option.disabled ? /* @__PURE__ */ jsx(IconSlash, {}) : option.value === currentValue ? /* @__PURE__ */ jsx(IconCheck, {}) : null
172
+ /* @__PURE__ */ jsx("div", { className: "au-field__select-display", children: ((_a = options.find((option) => option.value === currentValue)) == null ? void 0 : _a.label) || placeholder || "Selecionar..." }),
173
+ /* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconChevronDown, {}) })
181
174
  ]
182
- },
183
- option.value
184
- ))
185
- }
186
- ),
187
- /* @__PURE__ */ jsx(
188
- "select",
189
- {
190
- hidden: true,
191
- disabled,
192
- value: currentValue,
193
- onChange: (e) => selectOption(e.target.value),
194
- ref: selectElementRef,
195
- name,
196
- onBlur,
197
- children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
198
- }
199
- )
200
- ] })
201
- ] });
175
+ }
176
+ ),
177
+ /* @__PURE__ */ jsx(
178
+ "ul",
179
+ {
180
+ className: classNames("au-field__select-options", {
181
+ "au-field__select-options--open": isDropdownOpen
182
+ }),
183
+ role: "listbox",
184
+ "aria-live": "polite",
185
+ tabIndex: -1,
186
+ children: options.map((option, index) => /* @__PURE__ */ jsxs(
187
+ "li",
188
+ {
189
+ className: classNames("au-field__select-option", {
190
+ "au-field__select-option--highlighted": activeOptionIndex === index,
191
+ "au-field__select-option--selected": option.value === currentValue,
192
+ "au-field__select-option--disabled": option.disabled
193
+ }),
194
+ role: "option",
195
+ "aria-selected": option.value === currentValue,
196
+ "aria-disabled": option.disabled,
197
+ onClick: () => selectOption(option.value, option.disabled),
198
+ onMouseEnter: () => setActiveOptionIndex(index),
199
+ children: [
200
+ option.label,
201
+ option.disabled ? /* @__PURE__ */ jsx(IconSlash, {}) : option.value === currentValue ? /* @__PURE__ */ jsx(IconCheck, {}) : null
202
+ ]
203
+ },
204
+ option.value
205
+ ))
206
+ }
207
+ ),
208
+ /* @__PURE__ */ jsx(
209
+ "select",
210
+ {
211
+ hidden: true,
212
+ disabled,
213
+ value: currentValue,
214
+ onChange: (e) => selectOption(e.target.value),
215
+ ref: selectElementRef,
216
+ name,
217
+ onBlur,
218
+ children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
219
+ }
220
+ )
221
+ ] }),
222
+ /* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: !!error, message: errorMessage })
223
+ ]
224
+ }
225
+ );
202
226
  };
203
227
  export {
204
228
  SelectField
package/dist/components/SelectField/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\n\ntype OptionProps = {\n value: string\n disabled?: boolean\n}\n\nexport const useSelectField = (\n options: OptionProps[],\n initialValue?: string,\n onChange?: (value: string) => void,\n disabled?: boolean,\n register?: (instance: HTMLSelectElement | null) => void,\n) => {\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n const [currentValue, setCurrentValue] = useState<string>(initialValue || '')\n const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n null,\n )\n const selectRef = useRef<HTMLDivElement>(null)\n const selectElementRef = useRef<HTMLSelectElement>(null)\n\n useEffect(() => {\n if (initialValue) {\n setCurrentValue(initialValue)\n }\n }, [initialValue])\n\n useEffect(() => {\n if (register && selectElementRef.current) {\n register(selectElementRef.current)\n }\n }, [register])\n\n const toggleDropdown = () => {\n setIsDropdownOpen((prev) => !prev)\n setActiveOptionIndex(null)\n if (selectRef.current) {\n selectRef.current.focus()\n }\n }\n\n const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n if (optionDisabled) return\n\n setCurrentValue(optionValue)\n setIsDropdownOpen(false)\n\n if (onChange) {\n onChange(optionValue)\n }\n }\n\n const _findNextAvailableIndex = (\n currentIndex: number,\n direction: 'down' | 'up',\n ) => {\n const step = direction === 'down' ? 1 : -1\n let nextIndex = (currentIndex + step + options.length) % options.length\n\n while (options[nextIndex]?.disabled) {\n nextIndex = (nextIndex + step + options.length) % options.length\n }\n\n return nextIndex\n }\n\n const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n const _actions: Record<string, () => void> = {\n Enter: () => {\n if (!isDropdownOpen) {\n toggleDropdown()\n return\n }\n if (\n activeOptionIndex !== null &&\n !options[activeOptionIndex].disabled\n ) {\n e.preventDefault()\n selectOption(\n options[activeOptionIndex].value,\n options[activeOptionIndex].disabled,\n )\n }\n },\n ArrowDown: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n ArrowUp: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(prev !== null ? prev : options.length, 'up'),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n Escape: () => {\n setIsDropdownOpen(false)\n },\n }\n\n if (_actions[e.key]) {\n _actions[e.key]()\n }\n }\n\n return {\n isDropdownOpen,\n currentValue,\n selectRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n }\n}\n","import { useSelectField } from './hook'\nimport Field from '../Field'\nimport classNames from 'classnames'\nimport { IconChevronDown, IconSlash, IconCheck } from '../../icons'\nimport './styles.scss'\n\ntype OptionProps = {\n value: string\n label: string\n disabled?: boolean\n}\n\ntype SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string\n options: OptionProps[]\n optional?: boolean\n placeholder?: string\n disabled?: boolean\n value?: string\n onChange?: (value: string) => void\n onBlur?: () => void\n name?: string\n register?: (instance: HTMLSelectElement | null) => void\n}\n\nexport const SelectField = ({\n label,\n options,\n optional,\n disabled,\n value,\n onChange,\n style,\n className,\n placeholder,\n name,\n register,\n onBlur,\n}: SelectFieldProps) => {\n const {\n isDropdownOpen,\n currentValue,\n selectRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n } = useSelectField(options, value, onChange, disabled, register)\n\n const dropdownClasses = classNames('au-field__select', {\n 'au-field__select--disabled': disabled,\n 'au-field__select--open': isDropdownOpen,\n [className!]: className,\n })\n\n return (\n <Field.Root style={style} customclass={className} disabled={disabled}>\n <Field.Label text={label} optional={optional} disabled={disabled} />\n <div className={dropdownClasses}>\n <div\n className=\"au-field__select-wrapper\"\n onClick={toggleDropdown}\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby=\"select-label\"\n aria-activedescendant={\n activeOptionIndex !== null\n ? options[activeOptionIndex].value\n : undefined\n }\n onBlur={onBlur}>\n <div className=\"au-field__select-display\">\n {options.find((option) => option.value === currentValue)?.label ||\n placeholder ||\n 'Selecionar...'}\n </div>\n <div className=\"au-field__select-icon\">\n <IconChevronDown />\n </div>\n </div>\n <ul\n className={classNames('au-field__select-options', {\n 'au-field__select-options--open': isDropdownOpen,\n })}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={-1}>\n {options.map((option, index) => (\n <li\n key={option.value}\n className={classNames('au-field__select-option', {\n 'au-field__select-option--highlighted':\n activeOptionIndex === index,\n 'au-field__select-option--selected':\n option.value === currentValue,\n 'au-field__select-option--disabled': option.disabled,\n })}\n role=\"option\"\n aria-selected={option.value === currentValue}\n aria-disabled={option.disabled}\n onClick={() => selectOption(option.value, option.disabled)}\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash />\n ) : option.value === currentValue ? (\n <IconCheck />\n ) : null}\n </li>\n ))}\n </ul>\n <select\n hidden\n disabled={disabled}\n value={currentValue}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}\n onBlur={onBlur}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\n\ntype OptionProps = {\n value: string\n disabled?: boolean\n}\n\nexport const useSelectField = (\n options: OptionProps[],\n initialValue?: string,\n onChange?: (value: string) => void,\n disabled?: boolean,\n register?: (instance: HTMLSelectElement | null) => void,\n) => {\n const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n const [currentValue, setCurrentValue] = useState<string>(initialValue || '')\n const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n null,\n )\n const selectRef = useRef<HTMLDivElement>(null)\n const selectElementRef = useRef<HTMLSelectElement>(null)\n\n useEffect(() => {\n if (initialValue) {\n setCurrentValue(initialValue)\n }\n }, [initialValue])\n\n useEffect(() => {\n if (register && selectElementRef.current) {\n register(selectElementRef.current)\n }\n }, [register])\n\n const toggleDropdown = () => {\n setIsDropdownOpen((prev) => !prev)\n setActiveOptionIndex(null)\n if (selectRef.current) {\n selectRef.current.focus()\n }\n }\n\n const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n if (optionDisabled) return\n\n setCurrentValue(optionValue)\n setIsDropdownOpen(false)\n\n if (onChange) {\n onChange(optionValue)\n }\n }\n\n const _findNextAvailableIndex = (\n currentIndex: number,\n direction: 'down' | 'up',\n ) => {\n const step = direction === 'down' ? 1 : -1\n let nextIndex = (currentIndex + step + options.length) % options.length\n\n while (options[nextIndex]?.disabled) {\n nextIndex = (nextIndex + step + options.length) % options.length\n }\n\n return nextIndex\n }\n\n const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n const _actions: Record<string, () => void> = {\n Enter: () => {\n if (!isDropdownOpen) {\n toggleDropdown()\n return\n }\n if (\n activeOptionIndex !== null &&\n !options[activeOptionIndex].disabled\n ) {\n e.preventDefault()\n selectOption(\n options[activeOptionIndex].value,\n options[activeOptionIndex].disabled,\n )\n }\n },\n ArrowDown: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n ArrowUp: () => {\n e.preventDefault()\n setActiveOptionIndex((prev) =>\n _findNextAvailableIndex(prev !== null ? prev : options.length, 'up'),\n )\n if (!isDropdownOpen) toggleDropdown()\n },\n Escape: () => {\n setIsDropdownOpen(false)\n },\n }\n\n if (_actions[e.key]) {\n _actions[e.key]()\n }\n }\n\n return {\n isDropdownOpen,\n currentValue,\n selectRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n }\n}\n","import { useSelectField } from './hook'\nimport Field from '../Field'\nimport classNames from 'classnames'\nimport { IconChevronDown, IconSlash, IconCheck } from '../../icons'\nimport './styles.scss'\n\ntype OptionProps = {\n value: string\n label: string\n disabled?: boolean\n}\n\ntype SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string\n options: OptionProps[]\n optional?: boolean\n disabled?: boolean\n required?: boolean\n error?: boolean\n errorMessage?: string\n placeholder?: string\n value?: string\n onChange?: (value: string) => void\n onBlur?: () => void\n name?: string\n register?: (instance: HTMLSelectElement | null) => void\n}\n\nexport const SelectField = ({\n label,\n options,\n optional,\n error,\n errorMessage,\n disabled,\n required,\n value,\n onChange,\n style,\n className,\n placeholder,\n name,\n register,\n onBlur,\n}: SelectFieldProps) => {\n const {\n isDropdownOpen,\n currentValue,\n selectRef,\n selectElementRef,\n toggleDropdown,\n selectOption,\n onKeyDownDropdown,\n setActiveOptionIndex,\n activeOptionIndex,\n } = useSelectField(options, value, onChange, disabled, register)\n\n const dropdownClasses = classNames('au-field__select', {\n 'au-field__select--disabled': disabled,\n 'au-field__select--open': isDropdownOpen,\n 'au-field__select--required': required,\n 'au-field__select--error': error,\n [className!]: className,\n })\n\n return (\n <Field.Root\n style={style}\n customclass={className}\n error={error}\n disabled={disabled}>\n <Field.Label\n text={label}\n optional={optional}\n required={required}\n error={error}\n disabled={disabled}\n />\n <div className={dropdownClasses}>\n <div\n className=\"au-field__select-wrapper\"\n onClick={toggleDropdown}\n onKeyDown={onKeyDownDropdown}\n tabIndex={disabled ? -1 : 0}\n ref={selectRef}\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={isDropdownOpen}\n aria-labelledby=\"select-label\"\n aria-activedescendant={\n activeOptionIndex !== null\n ? options[activeOptionIndex].value\n : undefined\n }\n onBlur={onBlur}>\n <div className=\"au-field__select-display\">\n {options.find((option) => option.value === currentValue)?.label ||\n placeholder ||\n 'Selecionar...'}\n </div>\n <div className=\"au-field__select-icon\">\n <IconChevronDown />\n </div>\n </div>\n <ul\n className={classNames('au-field__select-options', {\n 'au-field__select-options--open': isDropdownOpen,\n })}\n role=\"listbox\"\n aria-live=\"polite\"\n tabIndex={-1}>\n {options.map((option, index) => (\n <li\n key={option.value}\n className={classNames('au-field__select-option', {\n 'au-field__select-option--highlighted':\n activeOptionIndex === index,\n 'au-field__select-option--selected':\n option.value === currentValue,\n 'au-field__select-option--disabled': option.disabled,\n })}\n role=\"option\"\n aria-selected={option.value === currentValue}\n aria-disabled={option.disabled}\n onClick={() => selectOption(option.value, option.disabled)}\n onMouseEnter={() => setActiveOptionIndex(index)}>\n {option.label}\n {option.disabled ? (\n <IconSlash />\n ) : option.value === currentValue ? (\n <IconCheck />\n ) : null}\n </li>\n ))}\n </ul>\n <select\n hidden\n disabled={disabled}\n value={currentValue}\n onChange={(e) => selectOption(e.target.value)}\n ref={selectElementRef}\n name={name}\n onBlur={onBlur}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n </Field.Root>\n )\n}\n"],"names":[],"mappings":"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"}
package/dist/components/form/SelectField/index.d.ts CHANGED
@@ -8,13 +8,16 @@ type SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {
8
8
  label?: string;
9
9
  options: OptionProps[];
10
10
  optional?: boolean;
11
- placeholder?: string;
12
11
  disabled?: boolean;
12
+ required?: boolean;
13
+ error?: boolean;
14
+ errorMessage?: string;
15
+ placeholder?: string;
13
16
  value?: string;
14
17
  onChange?: (value: string) => void;
15
18
  onBlur?: () => void;
16
19
  name?: string;
17
20
  register?: (instance: HTMLSelectElement | null) => void;
18
21
  };
19
- export declare const SelectField: ({ label, options, optional, disabled, value, onChange, style, className, placeholder, name, register, onBlur, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const SelectField: ({ label, options, optional, error, errorMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
20
23
  export {};
package/dist/components/tokens/styles.css CHANGED
@@ -1 +1 @@
1
- html{box-sizing:border-box;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}:focus{outline:none}body{font-family:"Source Sans 3",sans-serif;background-color:#fff}.au-field{cursor:pointer;border-radius:8px}.au-field__input-holder{position:relative;height:56px}.au-field__input{background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-family:inherit;font-size:16px;line-height:22px;padding:16px;height:56px;width:100%}.au-field__input:hover{border:1px solid #16181d}.au-field__input:focus{border-color:#0048db;outline:1px solid #0048db}.au-field:focus-within:not(.au-field--error) .au-field__header-label{color:#0048db}.au-field__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}.au-field__header-label{color:#454a54;cursor:pointer;font-size:14px;font-weight:600}.au-field__header-label--required{color:#991717}.au-field__header-icon span{font-size:14px;color:#454a54}.au-field__right-slot{position:absolute;right:16px;top:50%;transform:translateY(-50%)}.au-field__error-message{color:#991717;font-size:16px;font-weight:400;line-height:24px;padding-top:8px}.au-field--disabled{cursor:not-allowed}.au-field--disabled .au-field__input{background-color:#e2e4e9;border-color:#5e6573;color:#5e6573;cursor:not-allowed}.au-field--disabled .au-field__header-label{color:#5e6573;cursor:not-allowed}.au-field--error .au-field__input{background-color:#f5eff0;border-color:#991717}.au-field--error .au-field__input:focus{border-color:#0048db}.au-field--error .au-field__header-label{color:#991717}.au-field--success .au-field__input{animation:inputSuccess 2s forwards}.au-field--success .au-field__header-label{animation:labelSuccess 2s forwards}.au-field--success .au-field__header-icon .au-icon{animation:iconSucess 2s forwards}@keyframes inputSuccess{0%,70%{background-color:#f0fcf5;border-color:#10593b}}@keyframes labelSuccess{0%,70%{color:#10593b}}@keyframes iconSucess{0%,70%{opacity:1}to{opacity:0}}.au-token-field{max-width:max-content}.au-token-field__container{display:flex;gap:8px}.au-token-field__input{font-size:20px;text-align:center;padding:8px}.au-token-field__input[type=number]::-webkit-inner-spin-button,.au-token-field__input[type=number]::-webkit-outer-spin-button{display:none}.au-field__select{position:relative;margin-bottom:1rem}.au-field__select-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;padding:16px;background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-size:16px;line-height:22px}.au-field__select-wrapper:focus-within{border:2px solid #0048db}.au-field__select-icon{transition:transform .2s ease}.au-field__select-options{display:flex;flex-direction:column;width:100%;margin-top:16px;border:1px solid #0048db;background:#fff;border-radius:8px;overflow:hidden;cursor:auto;position:absolute;transform-origin:top left;transform:scaleY(0);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s .2s;z-index:1}.au-field__select-options--open{transform:scaleY(1);opacity:1;visibility:visible;transition:transform .2s,opacity .2s}.au-field__select-option{display:flex;justify-content:space-between;padding:16px 24px;cursor:pointer}.au-field__select-option:not(.au-field__select-option--selected):hover,.au-field__select-option--highlighted:not(.au-field__select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__select-option--selected{background-color:#0048db;color:#fff;font-weight:700}.au-field__select-option--selected .au-icon>svg{color:#fff}.au-field__select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--disabled .au-icon>svg{color:#5e6573}.au-field__select--open .au-field__select-wrapper{border:2px solid #0048db}.au-field__select--open .au-field__select-wrapper .au-field__select-icon{transform:rotate(180deg)}.au-field__select--disabled{pointer-events:none;cursor:not-allowed}.au-field__select--disabled .au-field__select-wrapper{background-color:#e2e4e9}.au-field__select--disabled .au-field__select-wrapper .au-icon>svg{color:#5e6573}.au-field:not(.au-field-error):has(.au-field__select--open) .au-field__header-label{color:#0048db}.au-field:not(.au-field-error):has(.au-field__select--open) .au-field__select-wrapper,.au-field:not(.au-field-error):has(.au-field__select--open) .au-field__select-wrapper:focus-within{border-width:1px}.au-password-field__container{position:relative;height:56px}.au-password-field__input{position:absolute;padding:16px 92px 16px 16px}.au-password-field__btn{background-color:transparent;border:none;color:#0048db;cursor:pointer;font-family:"Source Sans 3",sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;position:absolute;z-index:1;background-position-y:center;right:16px;height:56px}.au-password-field__btn:disabled{cursor:not-allowed}@media (min-width: 600px){.au-datepicker__segment{position:relative}}.au-datepicker__segment--open .au-datepicker__segment-input .au-icon{transform:rotate(180deg)}.au-datepicker__segment--open .au-datepicker__segment-list-holder{transform:translate(0);visibility:visible}@media (min-width: 600px){.au-datepicker__segment--open .au-datepicker__segment-list-holder{opacity:1;transform:none}}.au-datepicker__segment-input{padding:8px;gap:8px;display:flex;border-radius:8px;cursor:pointer;border:1px solid #e2e4e9}.au-datepicker__segment-list-holder{background:#fff;border-radius:16px 16px 0 0;position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:1;display:flex;flex-direction:column;transform:translate(100%);transition:visibility .2s,transform .2s}@media (min-width: 600px){.au-datepicker__segment-list-holder{inset:unset;left:0;opacity:0;top:calc(100% + 8px);height:224px;border-radius:16px;border:1px solid #e2e4e9;transform:none;transition:opacity .2s,visibility .2s,transform .2s}}.au-datepicker__segment-list-header{padding:24px 16px;display:flex;align-items:center;justify-content:space-between}@media (min-width: 600px){.au-datepicker__segment-list-header{display:none}}.au-datepicker__segment-list{overflow-x:scroll;flex:1}.au-datepicker__segment-list-item{padding:16px 24px;font-size:16px;line-height:150%;cursor:pointer}.au-datepicker__segment-list-item:hover,.au-datepicker__segment-list-item--active{background-color:#f6f7fa}.au-datepicker__segment-list-item:not(:last-of-type){border-bottom:1px solid #e2e4e9}@media (min-width: 600px){.au-datepicker__segment-list-item:not(:last-of-type){border-bottom:none}}.au-datepicker__segment-title{font-family:"Source Sans 3",sans-serif;font-size:16px;font-weight:600}.au-datepicker__header{display:flex;justify-content:space-between}.au-datepicker__header-segments{display:flex;gap:8px}.au-datepicker__header-navigation-btn{cursor:pointer;outline:none;background-color:transparent;border:none}.au-datepicker__calendar{visibility:hidden;opacity:0;position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;transition:opacity .2s,visibility .2s}@media (min-width: 600px){.au-datepicker__calendar{width:414px;position:absolute;top:calc(100% + 90px);left:0;right:auto;bottom:auto;transition:opacity .2s,visibility .2s,transform .2s ease-in-out}}.au-datepicker__calendar--visible,.au-datepicker__calendar--visible .au-datepicker__calendar-backdrop{visibility:visible;opacity:1}.au-datepicker__calendar--visible .au-datepicker__calendar-card{transform:translateY(0)}@media (min-width: 600px){.au-datepicker__calendar--visible{transform:translateY(-74px)}}.au-datepicker__calendar-backdrop{background-color:#16181dcc;cursor:pointer;position:absolute;width:100%;height:100%;visibility:0;z-index:1;-webkit-tap-highlight-color:transparent;opacity:0;transition:visibility .2s,opacity .2s}@media (min-width: 600px){.au-datepicker__calendar-backdrop{display:none}}.au-datepicker__calendar-card{width:100%;padding:16px;position:absolute;border-radius:16px 16px 0 0;border:1px solid #e2e4e9;background:#fff;bottom:0;z-index:2;transform:translateY(500px);transition:transform .2s ease-in-out}@media (min-width: 600px){.au-datepicker__calendar-card{position:relative;height:auto;transform:none;bottom:auto;transition:none;border-radius:16px}}.au-datepicker__calendar-base{width:100%}.au-datepicker__calendar-grid{width:100%;margin-top:16px}.au-datepicker__calendar-weekday,.au-datepicker__calendar-day{width:48px;height:48px;font-size:16px;font-weight:400;text-align:center;color:#16181d}@media (max-width: 320px){.au-datepicker__calendar-weekday,.au-datepicker__calendar-day{width:30px;height:30px}}.au-datepicker__calendar-day{cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid transparent;transition:border .2s ease-in-out,color .2s ease-in-out,background-color .2s ease-in-out}.au-datepicker__calendar-day:hover{border:1px solid #0048db}.au-datepicker__calendar-day[data-disabled]{cursor:default;color:#5e6573}.au-datepicker__calendar-day[data-disabled]:hover{border:1px solid transparent}.au-datepicker__calendar-day[data-selected]{background-color:#0048db;color:#fff}.au-datepicker__calendar-actions-dock{display:flex;gap:8px;padding-top:16px}@media (min-width: 600px){.au-datepicker__calendar-actions-dock{display:none}}.au-datepicker__calendar-cancel{max-width:125px}.au-datepicker{position:relative;-webkit-tap-highlight-color:transparent}.au-datepicker__field-container,.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
+ html{box-sizing:border-box;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}:focus{outline:none}body{font-family:"Source Sans 3",sans-serif;background-color:#fff}.au-field{cursor:pointer;border-radius:8px}.au-field__input-holder{position:relative;height:56px}.au-field__input{background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-family:inherit;font-size:16px;line-height:22px;padding:16px;height:56px;width:100%}.au-field__input:hover{border:1px solid #16181d}.au-field__input:focus{border-color:#0048db;outline:1px solid #0048db}.au-field:focus-within:not(.au-field--error) .au-field__header-label{color:#0048db}.au-field__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}.au-field__header-label{color:#454a54;cursor:pointer;font-size:14px;font-weight:600}.au-field__header-label--required{color:#991717}.au-field__header-icon span{font-size:14px;color:#454a54}.au-field__right-slot{position:absolute;right:16px;top:50%;transform:translateY(-50%)}.au-field__error-message{color:#991717;font-size:16px;font-weight:400;line-height:24px;padding-top:8px}.au-field--disabled{cursor:not-allowed}.au-field--disabled .au-field__input{background-color:#e2e4e9;border-color:#5e6573;color:#5e6573;cursor:not-allowed}.au-field--disabled .au-field__header-label{color:#5e6573;cursor:not-allowed}.au-field--error .au-field__input{background-color:#f5eff0;border-color:#991717}.au-field--error .au-field__input:focus{border-color:#0048db}.au-field--error .au-field__header-label{color:#991717}.au-field--success .au-field__input{animation:inputSuccess 2s forwards}.au-field--success .au-field__header-label{animation:labelSuccess 2s forwards}.au-field--success .au-field__header-icon .au-icon{animation:iconSucess 2s forwards}@keyframes inputSuccess{0%,70%{background-color:#f0fcf5;border-color:#10593b}}@keyframes labelSuccess{0%,70%{color:#10593b}}@keyframes iconSucess{0%,70%{opacity:1}to{opacity:0}}.au-token-field{max-width:max-content}.au-token-field__container{display:flex;gap:8px}.au-token-field__input{font-size:20px;text-align:center;padding:8px}.au-token-field__input[type=number]::-webkit-inner-spin-button,.au-token-field__input[type=number]::-webkit-outer-spin-button{display:none}.au-field__select{position:relative;margin-bottom:1rem}.au-field__select-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;padding:16px;background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-size:16px;line-height:22px}.au-field__select-wrapper:focus-within{border:2px solid #0048db}.au-field__select-icon{transition:transform .2s ease}.au-field__select-options{display:flex;flex-direction:column;width:100%;margin-top:16px;border:1px solid #0048db;background:#fff;border-radius:8px;overflow:hidden;cursor:auto;position:absolute;transform-origin:top left;transform:scaleY(0);opacity:0;visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s .2s;z-index:1}.au-field__select-options--open{transform:scaleY(1);opacity:1;visibility:visible;transition:transform .2s,opacity .2s}.au-field__select-option{display:flex;justify-content:space-between;padding:16px 24px;cursor:pointer}.au-field__select-option:not(.au-field__select-option--selected):hover,.au-field__select-option--highlighted:not(.au-field__select-option--selected){background-color:#f6f7fa;color:#16181d}.au-field__select-option--selected{background-color:#0048db;color:#fff;font-weight:700}.au-field__select-option--selected .au-icon>svg{color:#fff}.au-field__select-option--disabled{pointer-events:none;cursor:not-allowed;background-color:#e2e4e9;color:#5e6573}.au-field__select-option--disabled .au-icon>svg{color:#5e6573}.au-field__select--open .au-field__select-wrapper{border:2px solid #0048db}.au-field__select--open .au-field__select-wrapper .au-field__select-icon{transform:rotate(180deg)}.au-field__select--disabled{pointer-events:none;cursor:not-allowed}.au-field__select--disabled .au-field__select-wrapper{background-color:#e2e4e9}.au-field__select--disabled .au-field__select-wrapper .au-icon>svg{color:#5e6573}.au-field__select--error .au-field__select-wrapper{background-color:#f5eff0;border-color:#991717}.au-field__select--error .au-field__select-wrapper:focus{border-color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__header-label{color:#0048db}.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper,.au-field:not(.au-field--error):has(.au-field__select--open) .au-field__select-wrapper:focus-within{border-width:1px}.au-password-field__container{position:relative;height:56px}.au-password-field__input{position:absolute;padding:16px 92px 16px 16px}.au-password-field__btn{background-color:transparent;border:none;color:#0048db;cursor:pointer;font-family:"Source Sans 3",sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;position:absolute;z-index:1;background-position-y:center;right:16px;height:56px}.au-password-field__btn:disabled{cursor:not-allowed}@media (min-width: 600px){.au-datepicker__segment{position:relative}}.au-datepicker__segment--open .au-datepicker__segment-input .au-icon{transform:rotate(180deg)}.au-datepicker__segment--open .au-datepicker__segment-list-holder{transform:translate(0);visibility:visible}@media (min-width: 600px){.au-datepicker__segment--open .au-datepicker__segment-list-holder{opacity:1;transform:none}}.au-datepicker__segment-input{padding:8px;gap:8px;display:flex;border-radius:8px;cursor:pointer;border:1px solid #e2e4e9}.au-datepicker__segment-list-holder{background:#fff;border-radius:16px 16px 0 0;position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:1;display:flex;flex-direction:column;transform:translate(100%);transition:visibility .2s,transform .2s}@media (min-width: 600px){.au-datepicker__segment-list-holder{inset:unset;left:0;opacity:0;top:calc(100% + 8px);height:224px;border-radius:16px;border:1px solid #e2e4e9;transform:none;transition:opacity .2s,visibility .2s,transform .2s}}.au-datepicker__segment-list-header{padding:24px 16px;display:flex;align-items:center;justify-content:space-between}@media (min-width: 600px){.au-datepicker__segment-list-header{display:none}}.au-datepicker__segment-list{overflow-x:scroll;flex:1}.au-datepicker__segment-list-item{padding:16px 24px;font-size:16px;line-height:150%;cursor:pointer}.au-datepicker__segment-list-item:hover,.au-datepicker__segment-list-item--active{background-color:#f6f7fa}.au-datepicker__segment-list-item:not(:last-of-type){border-bottom:1px solid #e2e4e9}@media (min-width: 600px){.au-datepicker__segment-list-item:not(:last-of-type){border-bottom:none}}.au-datepicker__segment-title{font-family:"Source Sans 3",sans-serif;font-size:16px;font-weight:600}.au-datepicker__header{display:flex;justify-content:space-between}.au-datepicker__header-segments{display:flex;gap:8px}.au-datepicker__header-navigation-btn{cursor:pointer;outline:none;background-color:transparent;border:none}.au-datepicker__calendar{visibility:hidden;opacity:0;position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;transition:opacity .2s,visibility .2s}@media (min-width: 600px){.au-datepicker__calendar{width:414px;position:absolute;top:calc(100% + 90px);left:0;right:auto;bottom:auto;transition:opacity .2s,visibility .2s,transform .2s ease-in-out}}.au-datepicker__calendar--visible,.au-datepicker__calendar--visible .au-datepicker__calendar-backdrop{visibility:visible;opacity:1}.au-datepicker__calendar--visible .au-datepicker__calendar-card{transform:translateY(0)}@media (min-width: 600px){.au-datepicker__calendar--visible{transform:translateY(-74px)}}.au-datepicker__calendar-backdrop{background-color:#16181dcc;cursor:pointer;position:absolute;width:100%;height:100%;visibility:0;z-index:1;-webkit-tap-highlight-color:transparent;opacity:0;transition:visibility .2s,opacity .2s}@media (min-width: 600px){.au-datepicker__calendar-backdrop{display:none}}.au-datepicker__calendar-card{width:100%;padding:16px;position:absolute;border-radius:16px 16px 0 0;border:1px solid #e2e4e9;background:#fff;bottom:0;z-index:2;transform:translateY(500px);transition:transform .2s ease-in-out}@media (min-width: 600px){.au-datepicker__calendar-card{position:relative;height:auto;transform:none;bottom:auto;transition:none;border-radius:16px}}.au-datepicker__calendar-base{width:100%}.au-datepicker__calendar-grid{width:100%;margin-top:16px}.au-datepicker__calendar-weekday,.au-datepicker__calendar-day{width:48px;height:48px;font-size:16px;font-weight:400;text-align:center;color:#16181d}@media (max-width: 320px){.au-datepicker__calendar-weekday,.au-datepicker__calendar-day{width:30px;height:30px}}.au-datepicker__calendar-day{cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid transparent;transition:border .2s ease-in-out,color .2s ease-in-out,background-color .2s ease-in-out}.au-datepicker__calendar-day:hover{border:1px solid #0048db}.au-datepicker__calendar-day[data-disabled]{cursor:default;color:#5e6573}.au-datepicker__calendar-day[data-disabled]:hover{border:1px solid transparent}.au-datepicker__calendar-day[data-selected]{background-color:#0048db;color:#fff}.au-datepicker__calendar-actions-dock{display:flex;gap:8px;padding-top:16px}@media (min-width: 600px){.au-datepicker__calendar-actions-dock{display:none}}.au-datepicker__calendar-cancel{max-width:125px}.au-datepicker{position:relative;-webkit-tap-highlight-color:transparent}.au-datepicker__field-container,.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}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@consumidor-positivo/aurora",
3
3
  "private": false,
4
- "version": "0.0.56",
4
+ "version": "0.0.57",
5
5
  "type": "module",
6
6
  "main": "./dist/main.es.js",
7
7
  "modules": "./dist/main.es.js",