@consumidor-positivo/aurora 0.0.52 → 0.0.53

package/dist/components/SelectField/index.es.js

@@ -0,0 +1,205 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { aK as Field } from "../../tokens-N1zNCjKI.js";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import "../Icon/index.es.js";
+import { IconCheck } from "../icons/IconCheck/index.es.js";
+import { IconChevronDown } from "../icons/IconChevronDown/index.es.js";
+import { IconSlash } from "../icons/IconSlash/index.es.js";
+const useSelectField = (options, initialValue, onChange, disabled, register) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [currentValue, setCurrentValue] = useState(initialValue || "");
+  const [activeOptionIndex, setActiveOptionIndex] = useState(
+    null
+  );
+  const selectRef = useRef(null);
+  const selectElementRef = useRef(null);
+  useEffect(() => {
+    if (initialValue) {
+      setCurrentValue(initialValue);
+    }
+  }, [initialValue]);
+  useEffect(() => {
+    if (register && selectElementRef.current) {
+      register(selectElementRef.current);
+    }
+  }, [register]);
+  const toggleDropdown = () => {
+    setIsDropdownOpen((prev) => !prev);
+    setActiveOptionIndex(null);
+    if (selectRef.current) {
+      selectRef.current.focus();
+    }
+  };
+  const selectOption = (optionValue, optionDisabled) => {
+    if (optionDisabled) return;
+    setCurrentValue(optionValue);
+    setIsDropdownOpen(false);
+    if (onChange) {
+      onChange(optionValue);
+    }
+  };
+  const _findNextAvailableIndex = (currentIndex, direction) => {
+    var _a;
+    const step = direction === "down" ? 1 : -1;
+    let nextIndex = (currentIndex + step + options.length) % options.length;
+    while ((_a = options[nextIndex]) == null ? void 0 : _a.disabled) {
+      nextIndex = (nextIndex + step + options.length) % options.length;
+    }
+    return nextIndex;
+  };
+  const onKeyDownDropdown = (e) => {
+    if (disabled) return;
+    const _actions = {
+      Enter: () => {
+        if (!isDropdownOpen) {
+          toggleDropdown();
+          return;
+        }
+        if (activeOptionIndex !== null && !options[activeOptionIndex].disabled) {
+          e.preventDefault();
+          selectOption(
+            options[activeOptionIndex].value,
+            options[activeOptionIndex].disabled
+          );
+        }
+      },
+      ArrowDown: () => {
+        e.preventDefault();
+        setActiveOptionIndex(
+          (prev) => _findNextAvailableIndex(prev !== null ? prev : -1, "down")
+        );
+        if (!isDropdownOpen) toggleDropdown();
+      },
+      ArrowUp: () => {
+        e.preventDefault();
+        setActiveOptionIndex(
+          (prev) => _findNextAvailableIndex(prev !== null ? prev : options.length, "up")
+        );
+        if (!isDropdownOpen) toggleDropdown();
+      },
+      Escape: () => {
+        setIsDropdownOpen(false);
+      }
+    };
+    if (_actions[e.key]) {
+      _actions[e.key]();
+    }
+  };
+  return {
+    isDropdownOpen,
+    currentValue,
+    selectRef,
+    selectElementRef,
+    toggleDropdown,
+    selectOption,
+    onKeyDownDropdown,
+    setActiveOptionIndex,
+    activeOptionIndex
+  };
+};
+const SelectField = ({
+  label,
+  options,
+  optional,
+  disabled,
+  value,
+  onChange,
+  style,
+  className,
+  placeholder,
+  name,
+  register,
+  onBlur
+}) => {
+  var _a;
+  const {
+    isDropdownOpen,
+    currentValue,
+    selectRef,
+    selectElementRef,
+    toggleDropdown,
+    selectOption,
+    onKeyDownDropdown,
+    setActiveOptionIndex,
+    activeOptionIndex
+  } = useSelectField(options, value, onChange, disabled, register);
+  const dropdownClasses = classNames("au-field__select", {
+    "au-field__select--disabled": disabled,
+    "au-field__select--open": isDropdownOpen,
+    [className]: className
+  });
+  return /* @__PURE__ */ jsxs(Field.Root, { style, customclass: className, disabled, children: [
+    /* @__PURE__ */ jsx(Field.Label, { text: label, optional, disabled }),
+    /* @__PURE__ */ jsxs("div", { className: dropdownClasses, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "au-field__select-wrapper",
+          onClick: toggleDropdown,
+          onKeyDown: onKeyDownDropdown,
+          tabIndex: disabled ? -1 : 0,
+          ref: selectRef,
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": isDropdownOpen,
+          "aria-labelledby": "select-label",
+          "aria-activedescendant": activeOptionIndex !== null ? options[activeOptionIndex].value : void 0,
+          onBlur,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "au-field__select-display", children: ((_a = options.find((option) => option.value === currentValue)) == null ? void 0 : _a.label) || placeholder || "Selecionar..." }),
+            /* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconChevronDown, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: classNames("au-field__select-options", {
+            "au-field__select-options--open": isDropdownOpen
+          }),
+          role: "listbox",
+          "aria-live": "polite",
+          tabIndex: -1,
+          children: options.map((option, index) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: classNames("au-field__select-option", {
+                "au-field__select-option--highlighted": activeOptionIndex === index,
+                "au-field__select-option--selected": option.value === currentValue,
+                "au-field__select-option--disabled": option.disabled
+              }),
+              role: "option",
+              "aria-selected": option.value === currentValue,
+              "aria-disabled": option.disabled,
+              onClick: () => selectOption(option.value, option.disabled),
+              onMouseEnter: () => setActiveOptionIndex(index),
+              children: [
+                option.label,
+                option.disabled ? /* @__PURE__ */ jsx(IconSlash, {}) : option.value === currentValue ? /* @__PURE__ */ jsx(IconCheck, {}) : null
+              ]
+            },
+            option.value
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          hidden: true,
+          disabled,
+          value: currentValue,
+          onChange: (e) => selectOption(e.target.value),
+          ref: selectElementRef,
+          name,
+          onBlur,
+          children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  SelectField
+};
+//# sourceMappingURL=index.es.js.map

package/dist/components/SelectField/index.es.js.map

@@ -0,0 +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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"}

package/dist/components/form/SelectField/hook.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+type OptionProps = {
+    value: string;
+    disabled?: boolean;
+};
+export declare const useSelectField: (options: OptionProps[], initialValue?: string, onChange?: ((value: string) => void) | undefined, disabled?: boolean, register?: ((instance: HTMLSelectElement | null) => void) | undefined) => {
+    isDropdownOpen: boolean;
+    currentValue: string;
+    selectRef: import('react').RefObject<HTMLDivElement>;
+    selectElementRef: import('react').RefObject<HTMLSelectElement>;
+    toggleDropdown: () => void;
+    selectOption: (optionValue: string, optionDisabled?: boolean) => void;
+    onKeyDownDropdown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    setActiveOptionIndex: import('react').Dispatch<import('react').SetStateAction<number | null>>;
+    activeOptionIndex: number | null;
+};
+export {};

package/dist/components/form/SelectField/index.d.ts

@@ -0,0 +1,20 @@
+
+type OptionProps = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {
+    label?: string;
+    options: OptionProps[];
+    optional?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    name?: string;
+    register?: (instance: HTMLSelectElement | null) => void;
+};
+export declare const SelectField: ({ label, options, optional, disabled, value, onChange, style, className, placeholder, name, register, onBlur, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tokens/styles.css

@@ -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}.au-field__input{background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;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__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-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}.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: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__input:focus~.au-checkbox__check{box-shadow:0 0 0 1px #fff,0 0 0 3px #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__check{border:2px solid #c4c9d4}.au-checkbox--disabled .au-checkbox__label{color:#c4c9d4}
+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}.au-field__input{background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;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__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}.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: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__input:focus~.au-checkbox__check{box-shadow:0 0 0 1px #fff,0 0 0 3px #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__check{border:2px solid #c4c9d4}.au-checkbox--disabled .au-checkbox__label{color:#c4c9d4}

package/dist/main.d.ts

@@ -11,6 +11,7 @@ export { Text } from './components/Text';
 export { Footer } from './components/Footer';
 export { InputField } from './components/form/InputField';
 export { TokenField } from './components/form/TokenField';
+export { SelectField } from './components/form/SelectField';
 export { PasswordField } from './components/form/PasswordField';
 export { CheckboxField } from './components/form/CheckboxField';
 export { useDrawer } from './components/Drawer/hooks';

package/dist/main.es.js

@@ -11,6 +11,7 @@ import { Text } from "./components/Text/index.es.js";
 import { Footer } from "./components/Footer/index.es.js";
 import { InputField } from "./components/InputField/index.es.js";
 import { TokenField } from "./components/TokenField/index.es.js";
+import { SelectField } from "./components/SelectField/index.es.js";
 import { PasswordField } from "./components/PasswordField/index.es.js";
 import { CheckboxField } from "./components/CheckboxField/index.es.js";
 import { useState } from "react";
@@ -779,6 +780,7 @@ export {
   ac as SPACING_700,
   ad as SPACING_800,
   ae as SPACING_900,
+  SelectField,
   Text,
   TokenField,
   useDrawer

package/dist/main.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.es.js","sources":["../lib/components/Drawer/hooks.ts"],"sourcesContent":["import { useState } from 'react'\n\ntype UseDrawerProps = Record<string, boolean>\n\nexport function useDrawer(props: UseDrawerProps) {\n  const [drawerOpen, setDrawerOpen] = useState<UseDrawerProps>(props)\n\n  function handleOpenDrawer(name: string) {\n    setDrawerOpen((prev) => {\n      return {\n        ...prev,\n        [name]: !prev[name],\n      }\n    })\n  }\n\n  return {\n    handleOpenDrawer,\n    drawerOpen,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,UAAU,OAAuB;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAElE,WAAS,iBAAiB,MAAc;AACtC,kBAAc,CAAC,SAAS;AACf,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,IAAI,GAAG,CAAC,KAAK,IAAI;AAAA,MAAA;AAAA,IACpB,CACD;AAAA,EACH;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"main.es.js","sources":["../lib/components/Drawer/hooks.ts"],"sourcesContent":["import { useState } from 'react'\n\ntype UseDrawerProps = Record<string, boolean>\n\nexport function useDrawer(props: UseDrawerProps) {\n  const [drawerOpen, setDrawerOpen] = useState<UseDrawerProps>(props)\n\n  function handleOpenDrawer(name: string) {\n    setDrawerOpen((prev) => {\n      return {\n        ...prev,\n        [name]: !prev[name],\n      }\n    })\n  }\n\n  return {\n    handleOpenDrawer,\n    drawerOpen,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,UAAU,OAAuB;AAC/C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAElE,WAAS,iBAAiB,MAAc;AACtC,kBAAc,CAAC,SAAS;AACf,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,IAAI,GAAG,CAAC,KAAK,IAAI;AAAA,MAAA;AAAA,IACpB,CACD;AAAA,EACH;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@consumidor-positivo/aurora",
   "private": false,
-  "version": "0.0.52",
+  "version": "0.0.53",
   "type": "module",
   "main": "./dist/main.es.js",
   "modules": "./dist/main.es.js",