@clicoh/orion-library 1.0.19 → 1.1.0-beta.2

package/dist/components/01-atoms/Input/utils/border.js.map

@@ -1 +1 @@
-{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE;IAC/C,MAAM,UAAU,GAA4C;QAC1D,SAAS,EAAE,IAAI,CACb,sIAAsI,EACtI,2PAA2P,EAC3P,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CACpC;KACF,CAAC;IAEF,MAAM,eAAe,GAAG,IAAI,CAC1B,iGAAiG,EACjG,sOAAsO,EACtO,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CACxC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAI,CACxB,wEAAwE,CACzE,CAAC;IAEF,OAAO;QACL,UAAU;QACV,eAAe;QACf,aAAa;KACd,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"border.js","sourceRoot":"","sources":["../../../../../src/components/01-atoms/Input/utils/border.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE;IAC/C,MAAM,UAAU,GAA4C;QAC1D,SAAS,EAAE,IAAI,CACb,sIAAsI,EACtI,0RAA0R,EAC1R,KAAK,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,4BAA4B,CACzE;KACF,CAAC;IAEF,MAAM,eAAe,GAAG,IAAI,CAC1B,iGAAiG,EACjG,uQAAuQ,EACvQ,KAAK;QACH,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,gCAAgC,CACrC,CAAC;IAEF,MAAM,aAAa,GAAG,IAAI,CACxB,wEAAwE,CACzE,CAAC;IAEF,OAAO;QACL,UAAU;QACV,eAAe;QACf,aAAa;KACd,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/01-atoms/Logo/Logo.d.ts

@@ -10,5 +10,5 @@ import type { ReactNode, SVGProps } from 'react';
  * @param {SVGProps<SVGSVGElement>} props - The properties for the SVG element.
  * @returns {ReactNode} The rendered SVG logo.
  */
-export declare function Logo(props: SVGProps<SVGSVGElement>): ReactNode;
+export declare function Logo({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }: SVGProps<SVGSVGElement>): ReactNode;
 //# sourceMappingURL=Logo.d.ts.map

package/dist/components/01-atoms/Logo/Logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Logo/Logo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,GAAG,SAAS,CAc9D"}
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Logo/Logo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,EACnB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,SAAS,EACb,EAAE,QAAQ,CAAC,aAAa,CAAC,GAAG,SAAS,CAqBrC"}

package/dist/components/01-atoms/Logo/Logo.jsx

@@ -10,8 +10,9 @@ import clsx from 'clsx';
  * @param {SVGProps<SVGSVGElement>} props - The properties for the SVG element.
  * @returns {ReactNode} The rendered SVG logo.
  */
-export function Logo(props) {
-    return (<svg width={58} height={26} {...props} viewBox="0 0 58 26" xmlns="http://www.w3.org/2000/svg" className={clsx('fill-black dark:fill-white', props.className)}>
+export function Logo({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }) {
+    const hasAccessibleName = Boolean(ariaLabel || ariaLabelledBy);
+    return (<svg width={58} height={26} {...restProps} role={hasAccessibleName ? 'img' : undefined} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} aria-hidden={hasAccessibleName ? undefined : true} focusable="false" viewBox="0 0 58 26" xmlns="http://www.w3.org/2000/svg" className={clsx('fill-black dark:fill-white', restProps.className)}>
       <path d="M45.029 15.705V10.26h7.631v3.323h2.713V2.707H52.66v4.838H45.03V2.707h-2.712v16.058h2.712v-3.06ZM12.362.532H9.65v12.994h2.713V.532ZM17.148 4.52h-2.713v9.006h2.713V4.52ZM15.793 0a1.676 1.676 0 1 0 .07 3.353A1.676 1.676 0 0 0 15.792 0ZM25.283 10.126a2.333 2.333 0 0 1-1.885 1.042 2.06 2.06 0 0 1-2.171-2.137 2.091 2.091 0 0 1 2.116-2.155 2.276 2.276 0 0 1 1.822.948l.133.174 1.941-1.705-.117-.152a4.79 4.79 0 0 0-3.778-1.798 4.713 4.713 0 0 0-4.472 6.514 4.639 4.639 0 0 0 4.454 2.845 4.779 4.779 0 0 0 4.063-2.01l.123-.164-2.11-1.582-.119.18ZM6.772 10.126a2.334 2.334 0 0 1-1.885 1.042 2.061 2.061 0 0 1-2.17-2.136A2.09 2.09 0 0 1 4.83 6.876a2.276 2.276 0 0 1 1.823.948L6.786 8l1.94-1.707-.118-.152A4.79 4.79 0 0 0 4.83 4.344 4.713 4.713 0 0 0 .36 10.858a4.64 4.64 0 0 0 4.453 2.845 4.78 4.78 0 0 0 4.064-2.01l.122-.164-2.11-1.582-.117.18ZM34.495 15.882a6.586 6.586 0 1 0-6.675-6.586 6.484 6.484 0 0 0 6.675 6.586Zm0-10.636a4.054 4.054 0 1 1-3.873 4.05 3.921 3.921 0 0 1 3.873-4.05Z"/>
       <path d="M55.392 14.874h-4.567v2.609h2.91a16.654 16.654 0 0 1-4.863 3.718 16.511 16.511 0 0 1-19.04-3l-1.892 1.426a18.857 18.857 0 0 0 27.452-.48v2.904H58v-7.177h-2.608Z"/>
     </svg>);

package/dist/components/01-atoms/Logo/Logo.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Logo/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB;;;;;;;;;;GAUG;AACH,MAAM,UAAU,IAAI,CAAC,KAA8B;IACjD,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC,EAAE,CAAC,CACV,MAAM,CAAC,CAAC,EAAE,CAAC,CACX,IAAI,KAAK,CAAC,CACV,OAAO,CAAC,WAAW,CACnB,KAAK,CAAC,4BAA4B,CAClC,SAAS,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAE/D;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,s9BAAs9B,EAC99B;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,kKAAkK,EAC5K;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Logo.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/Logo/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB;;;;;;;;;;GAUG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,SAAS,EACY;IACxB,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,IAAI,cAAc,CAAC,CAAC;IAE/D,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC,EAAE,CAAC,CACV,MAAM,CAAC,CAAC,EAAE,CAAC,CACX,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAC5C,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,eAAe,CAAC,CAAC,cAAc,CAAC,CAChC,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAClD,SAAS,CAAC,OAAO,CACjB,OAAO,CAAC,WAAW,CACnB,KAAK,CAAC,4BAA4B,CAClC,SAAS,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAEnE;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,s9BAAs9B,EAC99B;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,kKAAkK,EAC5K;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts

@@ -11,6 +11,7 @@ type MultiSelectProps = {
     disabled?: boolean;
     helperText?: string;
     error?: string;
+    clearButtonAriaLabel?: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>;
 /**
  * MultiSelect component for rendering a multi-select dropdown.
@@ -42,10 +43,11 @@ type MultiSelectProps = {
  * @param {boolean} [props.disabled] - Boolean to disable the multi-select input.
  * @param {string} [props.helperText] - Helper text to be displayed below the input.
  * @param {string} [props.error] - Error message to be displayed below the input.
+ * @param {string} [props.clearButtonAriaLabel] - Accessible label for the button that clears the selection.
  * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
  *
  * @returns {ReactNode} The rendered MultiSelect component.
  */
-export declare function MultiSelect({ options, value, onChange, label, disabled, helperText, error, ...restProps }: MultiSelectProps): ReactNode;
+export declare function MultiSelect({ options, value, onChange, label, disabled, helperText, error, clearButtonAriaLabel, ...restProps }: MultiSelectProps): ReactNode;
 export {};
 //# sourceMappingURL=MultiSelect.d.ts.map

package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EACnB,SAAS,EAIV,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CA2K9B"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EAEnB,SAAS,EAIV,MAAM,OAAO,CAAC;AASf,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAqB,EACrB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,oBAAoB,EACpB,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAoT9B"}

package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx

@@ -2,12 +2,13 @@
 import clsx from 'clsx';
 import { useEffect, useRef, useState, } from 'react';
 import { FaSortDown } from 'react-icons/fa';
+import { FiCheck } from 'react-icons/fi';
 import { IoIosSearch, IoMdCloseCircleOutline } from 'react-icons/io';
 import { generateUniqueId } from '../../../utils';
 import { Each, Show } from '../../00-base';
-import { Checkbox } from '../Checkbox';
 import { generateBorder } from '../Input/utils/border';
 import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
+const EMPTY_OPTIONS = [];
 /**
  * MultiSelect component for rendering a multi-select dropdown.
  *
@@ -38,25 +39,29 @@ import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText'
  * @param {boolean} [props.disabled] - Boolean to disable the multi-select input.
  * @param {string} [props.helperText] - Helper text to be displayed below the input.
  * @param {string} [props.error] - Error message to be displayed below the input.
+ * @param {string} [props.clearButtonAriaLabel] - Accessible label for the button that clears the selection.
  * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
  *
  * @returns {ReactNode} The rendered MultiSelect component.
  */
-export function MultiSelect({ options, value = [], onChange, label, disabled, helperText, error, ...restProps }) {
+export function MultiSelect({ options, value = EMPTY_OPTIONS, onChange, label, disabled, helperText, error, clearButtonAriaLabel, ...restProps }) {
     const [id, setId] = useState('');
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [selectedOptions, setSelectedOptions] = useState(value);
     const [isOpen, setIsOpen] = useState(false);
     const [query, setQuery] = useState('');
-    const [itemsSelected, setItemsSelected] = useState(0);
     const containerRef = useRef(null);
-    const inputClasses = clsx('peer disabled:text-gray-3 pointer-events-none h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all select-none focus:text-black');
+    const triggerRef = useRef(null);
+    const optionRefs = useRef([]);
+    const listboxId = `${id}-listbox`;
+    const feedbackId = `${id}-feedback`;
+    const inputClasses = clsx('peer disabled:text-gray-3 dark:disabled:text-gray-2 pointer-events-none h-full w-full rounded-full bg-transparent px-5 text-sm font-normal text-black outline-0 transition-all select-none focus:text-black dark:text-white dark:focus:text-white');
     const { labelProps, legendClasses, fieldsetClasses } = generateBorder(error);
     const handleToggleDropdown = () => {
         if (disabled) {
             return;
         }
-        setIsOpen(!isOpen);
+        setIsOpen((currentIsOpen) => !currentIsOpen);
     };
     const handleOptionClick = (option) => {
         const isSelected = selectedOptions.some((selectedOption) => selectedOption.value === option.value);
@@ -64,7 +69,7 @@ export function MultiSelect({ options, value = [], onChange, label, disabled, he
             ? selectedOptions.filter((selectedOption) => selectedOption.value !== option.value)
             : [...selectedOptions, option];
         setSelectedOptions(newSelectedOptions);
-        onChange && onChange(newSelectedOptions);
+        onChange?.(newSelectedOptions);
     };
     const handleQueryChange = (e) => {
         const newQuery = e.target.value;
@@ -82,19 +87,73 @@ export function MultiSelect({ options, value = [], onChange, label, disabled, he
         setSelectedOptions([]);
         setFilteredOptions(options);
         setQuery('');
+        onChange?.([]);
+    };
+    const focusOption = (index) => {
+        optionRefs.current[index]?.focus();
+    };
+    const closeDropdown = () => {
+        setIsOpen(false);
+        triggerRef.current?.focus();
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (disabled) {
+            return;
+        }
+        if (event.key === 'Enter' ||
+            event.key === ' ' ||
+            event.key === 'ArrowDown') {
+            event.preventDefault();
+            setIsOpen(true);
+            setTimeout(() => focusOption(0));
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            setIsOpen(false);
+        }
+    };
+    const handleSearchKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            closeDropdown();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            focusOption(0);
+        }
+    };
+    const handleOptionKeyDown = (event, index, option) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            focusOption(Math.min(index + 1, filteredOptions.length - 1));
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            focusOption(Math.max(index - 1, 0));
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            focusOption(0);
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            focusOption(filteredOptions.length - 1);
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleOptionClick(option);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            closeDropdown();
+        }
     };
-    if (id) {
-        labelProps.htmlFor = id;
-    }
     useEffect(() => {
         setFilteredOptions(options);
     }, [options]);
     useEffect(() => {
         setSelectedOptions(value);
-    }, [value?.length]);
-    useEffect(() => {
-        setItemsSelected(selectedOptions?.length);
-    }, [selectedOptions]);
+    }, [value]);
     useEffect(() => {
         document.addEventListener('mousedown', handleOutsideClick);
         setId(generateUniqueId());
@@ -102,41 +161,59 @@ export function MultiSelect({ options, value = [], onChange, label, disabled, he
             document.removeEventListener('mousedown', handleOutsideClick);
         };
     }, []);
-    return (<div className={clsx('relative w-full', restProps.className)} ref={containerRef}>
+    return (<div {...restProps} className={clsx('relative w-full', restProps.className)} ref={containerRef}>
       <div className={clsx('relative h-9 rounded-full', disabled ? 'pointer-events-none select-none' : 'cursor-pointer')} onClick={handleToggleDropdown}>
-        <input id={id} placeholder=" " defaultValue={itemsSelected ? `${itemsSelected} seleccionado(s)` : ''} className={inputClasses} disabled={disabled}/>
-        <label {...labelProps}>{label}</label>
-        <FaSortDown className="absolute top-2 right-4"/>
-        <fieldset className={fieldsetClasses}>
+        <input ref={triggerRef} id={id} role="combobox" placeholder=" " value={selectedOptions.length
+            ? `${selectedOptions.length} seleccionado(s)`
+            : ''} readOnly className={inputClasses} disabled={disabled} aria-expanded={isOpen} aria-haspopup="listbox" aria-controls={listboxId} aria-invalid={Boolean(error)} aria-describedby={error || helperText ? feedbackId : undefined} onKeyDown={handleTriggerKeyDown}/>
+        <label {...labelProps} htmlFor={id || undefined} className={clsx(labelProps.className, 'dark:peer-disabled:text-gray-2', error ? 'dark:text-error-dark' : 'dark:text-white')}>
+          {label}
+        </label>
+        <FaSortDown aria-hidden="true" className="absolute top-2 right-4 dark:text-white"/>
+        <fieldset className={clsx(fieldsetClasses, 'dark:peer-disabled:border-gray-2', error ? 'dark:border-error-dark' : 'dark:border-white')}>
           <legend className={legendClasses}>{label}</legend>
         </fieldset>
       </div>
-      <RenderErrorOrHelperText disabled={disabled} helperText={helperText} error={error} className="pl-6"/>
-      {!!isOpen && (<div className="border-gray-5 absolute top-10 z-20 w-full rounded-lg border bg-white px-4 py-2 shadow-lg">
+      <div id={feedbackId}>
+        <RenderErrorOrHelperText disabled={disabled} helperText={helperText} error={error} className={clsx('pl-6', error && !disabled ? 'dark:text-error-dark' : 'dark:text-gray-2')}/>
+      </div>
+      {!!isOpen && (<div className="border-gray-5 dark:border-gray-1 dark:bg-black-1 absolute top-10 z-20 w-full rounded-lg border bg-white px-4 py-2 text-black shadow-lg dark:text-white">
           <div className="mb-2 flex items-center gap-x-2">
             <div className="relative flex w-full">
-              <input type="text" className="peer flex-1 rounded-full border px-3 py-1.5 outline-hidden" value={query} onChange={handleQueryChange} onFocus={() => setIsOpen(true)}/>
-              <IoIosSearch size={18} className="absolute top-2 right-2"/>
+              <input type="text" aria-label={label} aria-controls={listboxId} className="peer dark:border-gray-1 dark:bg-black-2 flex-1 rounded-full border px-3 py-1.5 outline-hidden dark:text-white" value={query} onChange={handleQueryChange} onFocus={() => setIsOpen(true)} onKeyDown={handleSearchKeyDown}/>
+              <IoIosSearch aria-hidden="true" size={18} className="absolute top-2 right-2"/>
             </div>
-            <button type="button" onClick={handleRemoveItems} className="disabled:text-gray-3 size-7 rounded-full p-1 text-xl transition not-disabled:hover:bg-black not-disabled:hover:text-white">
-              <IoMdCloseCircleOutline />
+            <button type="button" aria-label={clearButtonAriaLabel} onClick={handleRemoveItems} className="disabled:text-gray-3 dark:disabled:text-gray-2 size-7 rounded-full p-1 text-xl transition not-disabled:hover:bg-black not-disabled:hover:text-white dark:not-disabled:hover:bg-white dark:not-disabled:hover:text-black">
+              <IoMdCloseCircleOutline aria-hidden="true"/>
             </button>
           </div>
-          <ul className="flex max-h-64 flex-col gap-y-1 overflow-y-auto bg-white">
+          <ul id={listboxId} role="listbox" aria-multiselectable="true" className="dark:bg-black-1 flex max-h-64 flex-col gap-y-1 overflow-y-auto bg-white">
             <Show>
               <Show.When isTrue={Boolean(filteredOptions.length)}>
-                <Each of={filteredOptions} render={(option) => (<li className="flex items-center gap-2" key={option.value}>
-                      <Checkbox checkbox={{
-                    checked: selectedOptions.some((selectedOption) => selectedOption.value === option.value),
-                    onChange: () => handleOptionClick(option),
-                }} label={{
-                    children: option.label,
-                    className: 'flex-auto',
-                }}/>
-                    </li>)}/>
+                <Each of={filteredOptions} render={(option, index) => {
+                const isSelected = selectedOptions.some((selectedOption) => selectedOption.value === option.value);
+                return (<li ref={(element) => {
+                        optionRefs.current[index] = element;
+                    }} role="option" aria-selected={isSelected} tabIndex={index === 0 ? 0 : -1} className="focus-visible:ring-lavender dark:focus-visible:ring-lavender-dark flex items-center gap-2 rounded-sm outline-hidden focus-visible:ring-2" key={option.value} onClick={() => handleOptionClick(option)} onKeyDown={(event) => handleOptionKeyDown(event, index, option)}>
+                        <span aria-hidden="true" className={clsx('flex size-4 shrink-0 items-center justify-center rounded-sm border', isSelected
+                        ? 'border-black bg-black text-white dark:border-white dark:bg-white dark:text-black'
+                        : 'border-gray-2 dark:border-gray-2 dark:bg-black-1 bg-white')}>
+                          <Show>
+                            <Show.When isTrue={isSelected}>
+                              <FiCheck className="size-3"/>
+                            </Show.When>
+                          </Show>
+                        </span>
+                        <span className="flex-auto dark:text-white">
+                          {option.label}
+                        </span>
+                      </li>);
+            }}/>
               </Show.When>
               <Show.Else>
-                <span className="p-2">Opción no encontrada</span>
+                <li role="option" aria-disabled="true" className="p-2">
+                  Opción no encontrada
+                </li>
               </Show.Else>
             </Show>
           </ul>

package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiSelect.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/01-atoms/OtpInput/OtpInput.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 type OtpInputProps = {
     label: string;
     length?: number;
@@ -6,6 +6,7 @@ type OtpInputProps = {
     labelStyle?: string;
     error?: string;
     handleSubmit: (otp: string) => void;
+    getDigitAriaLabel?: (digit: number) => string;
 } & HTMLAttributes<HTMLDivElement>;
 /**
  * OtpInput component for rendering a one-time password input field with multiple digit boxes.
@@ -28,11 +29,12 @@ type OtpInputProps = {
  * @param {string} [props.labelStyle] - Additional CSS classes for the label.
  * @param {string} [props.error] - Error message to be displayed below the input fields.
  * @param {(otp: string) => void} props.handleSubmit - Callback function called when the OTP is complete (all boxes filled).
+ * @param {(digit: number) => string} [props.getDigitAriaLabel] - Generates an accessible label for each one-based digit position.
  * @param {React.HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
  * @required props.label, props.handleSubmit
  *
  * @returns {ReactNode} The rendered OtpInput component.
  */
-export declare function OtpInput({ length, disabled, label, labelStyle, error, handleSubmit, ...restProps }: OtpInputProps): import("react").JSX.Element;
+export declare function OtpInput({ length, disabled, label, labelStyle, error, handleSubmit, getDigitAriaLabel, ...restProps }: OtpInputProps): ReactNode;
 export {};
 //# sourceMappingURL=OtpInput.d.ts.map

package/dist/components/01-atoms/OtpInput/OtpInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/OtpInput/OtpInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,cAAc,EAAE,MAAM,OAAO,CAAC;AAKzD,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,wBAAgB,QAAQ,CAAC,EACvB,MAAU,EACV,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,aAAa,+BAuGf"}
+{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/OtpInput/OtpInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAIf,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,wBAAgB,QAAQ,CAAC,EACvB,MAAU,EACV,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,YAAY,EACZ,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,aAAa,GAAG,SAAS,CA2H3B"}

package/dist/components/01-atoms/OtpInput/OtpInput.jsx

@@ -1,8 +1,8 @@
 'use client';
-import { useState, useRef } from 'react';
+import clsx from 'clsx';
+import { useId, useRef, useState, } from 'react';
 import { Each, Show } from '../../00-base';
 import { Paragraph } from '../Paragraph';
-import clsx from 'clsx';
 /**
  * OtpInput component for rendering a one-time password input field with multiple digit boxes.
  *
@@ -24,14 +24,18 @@ import clsx from 'clsx';
  * @param {string} [props.labelStyle] - Additional CSS classes for the label.
  * @param {string} [props.error] - Error message to be displayed below the input fields.
  * @param {(otp: string) => void} props.handleSubmit - Callback function called when the OTP is complete (all boxes filled).
+ * @param {(digit: number) => string} [props.getDigitAriaLabel] - Generates an accessible label for each one-based digit position.
  * @param {React.HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the container div.
  * @required props.label, props.handleSubmit
  *
  * @returns {ReactNode} The rendered OtpInput component.
  */
-export function OtpInput({ length = 4, disabled = false, label, labelStyle, error, handleSubmit, ...restProps }) {
+export function OtpInput({ length = 4, disabled = false, label, labelStyle, error, handleSubmit, getDigitAriaLabel, ...restProps }) {
     const [otp, setOtp] = useState(Array.from({ length }, () => ''));
     const inputRefs = useRef([]);
+    const accessibilityId = useId();
+    const labelId = `${accessibilityId}-label`;
+    const errorId = `${accessibilityId}-error`;
     const onSubmit = (newCode) => setTimeout(() => handleSubmit(newCode.join('')), 100);
     const handleInputChange = (index, value) => {
         if (value && !/^\d$/.test(value))
@@ -57,7 +61,7 @@ export function OtpInput({ length = 4, disabled = false, label, labelStyle, erro
     };
     const handlePaste = (e) => {
         e.preventDefault();
-        const pastedData = e.clipboardData.getData('text').slice(0, 6);
+        const pastedData = e.clipboardData.getData('text').slice(0, length);
         if (!/^\d+$/.test(pastedData))
             return;
         const newCode = [...otp];
@@ -71,21 +75,23 @@ export function OtpInput({ length = 4, disabled = false, label, labelStyle, erro
         onSubmit(newCode);
     };
     return (<div {...restProps} className={clsx('w-full', restProps.className)}>
-      <Paragraph size="body-1" className={clsx('text-lavender pb-4', labelStyle)}>
+      <Paragraph id={labelId} size="body-1" className={clsx('text-lavender dark:text-lavender-dark pb-4', labelStyle)}>
         {label}
       </Paragraph>
 
-      <div className="flex items-center gap-x-2" onPaste={handlePaste}>
+      <div role="group" aria-labelledby={labelId} className="flex items-center gap-x-2" onPaste={handlePaste}>
         <Each of={Array.from({ length })} render={(_, index) => (<input ref={(me) => {
                 if (me) {
                     inputRefs.current[index] = me;
                 }
-            }} name={`otp-${index}`} key={`OtpInput-${index}`} value={otp[index]} onChange={(e) => handleInputChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} type="text" maxLength={1} className={clsx('disabled:border-gray-3 disabled:text-gray-3 size-10 rounded-lg border bg-transparent text-center text-sm font-normal text-black outline-0 transition-all focus:text-black', error ? 'border-error' : 'border-lavender')} disabled={disabled}/>)}/>
+            }} name={`otp-${index}`} key={`OtpInput-${index}`} value={otp[index]} onChange={(e) => handleInputChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} type="text" inputMode="numeric" autoComplete="one-time-code" maxLength={1} aria-label={getDigitAriaLabel?.(index + 1)} aria-invalid={Boolean(error)} aria-describedby={error ? errorId : undefined} className={clsx('disabled:border-gray-3 disabled:text-gray-3 dark:disabled:border-gray-2 dark:disabled:text-gray-2 size-10 rounded-lg border bg-transparent text-center text-sm font-normal text-black outline-0 transition-all focus:text-black dark:text-white dark:focus:text-white', error
+                ? 'border-error dark:border-error-dark'
+                : 'border-lavender dark:border-lavender-dark')} disabled={disabled}/>)}/>
       </div>
 
       <Show>
         <Show.When isTrue={!!error}>
-          <Paragraph size="body-2" className="text-error pt-2">
+          <Paragraph id={errorId} size="body-2" className="text-error dark:text-error-dark pt-2">
             {error}
           </Paragraph>
         </Show.When>

package/dist/components/01-atoms/OtpInput/OtpInput.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"OtpInput.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/OtpInput/OtpInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OtpInput.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/OtpInput/OtpInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/01-atoms/RadialProgressBar/RadialProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadialProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/RadialProgressBar/RadialProgressBar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE,sBAAsB,GAAG,SAAS,CAmDpC"}
+{"version":3,"file":"RadialProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/RadialProgressBar/RadialProgressBar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE,sBAAsB,GAAG,SAAS,CAuDpC"}

package/dist/components/01-atoms/RadialProgressBar/RadialProgressBar.jsx

@@ -28,14 +28,14 @@ export function RadialProgressBar({ value, className, text, fontSize, }) {
         }, 500);
     }, [value]);
     return (<div className={clsx(className, 'relative')}>
-      <svg className="h-full w-full" viewBox="0 0 100 100">
-        <circle className="text-gray-5 stroke-current" strokeWidth="10" cx="50" cy="50" r="40" fill="transparent"/>
+      <svg className="h-full w-full text-black dark:text-white" viewBox="0 0 100 100">
+        <circle className="text-gray-5 dark:text-gray-1 stroke-current" strokeWidth="10" cx="50" cy="50" r="40" fill="transparent"/>
         <circle style={{
             transition: 'stroke-dashoffset 0.5s',
             transform: 'rotate(-90deg)',
             transformOrigin: '50% 50%',
-        }} className="text-lavender stroke-current" strokeWidth="10" strokeLinecap="round" cx="50" cy="50" r="40" fill="transparent" strokeDasharray="251.2" strokeDashoffset={`calc(251.2 - (251.2 * ${percent}) / 100)`}/>
-        {!!text && (<text x="50" y="50" textAnchor="middle" alignmentBaseline="middle" fontWeight="600" fontSize={fontSize ?? '1rem'}>
+        }} className="text-lavender dark:text-lavender-dark stroke-current" strokeWidth="10" strokeLinecap="round" cx="50" cy="50" r="40" fill="transparent" strokeDasharray="251.2" strokeDashoffset={`calc(251.2 - (251.2 * ${percent}) / 100)`}/>
+        {!!text && (<text className="fill-current" x="50" y="50" textAnchor="middle" alignmentBaseline="middle" fontWeight="600" fontSize={fontSize ?? '1rem'}>
             {text}
           </text>)}
       </svg>

package/dist/components/01-atoms/RadialProgressBar/RadialProgressBar.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"RadialProgressBar.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/RadialProgressBar/RadialProgressBar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AASvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,IAAI,EACJ,QAAQ,GACe;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,GAAG,EAAE;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAC1C;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,eAAe,CAAC,OAAO,CAAC,aAAa,CAClD;QAAA,CAAC,MAAM,CACL,SAAS,CAAC,4BAA4B,CACtC,WAAW,CAAC,IAAI,CAChB,EAAE,CAAC,IAAI,CACP,EAAE,CAAC,IAAI,CACP,CAAC,CAAC,IAAI,CACN,IAAI,CAAC,aAAa,EAEpB;QAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC;YACL,UAAU,EAAE,wBAAwB;YACpC,SAAS,EAAE,gBAAgB;YAC3B,eAAe,EAAE,SAAS;SAC3B,CAAC,CACF,SAAS,CAAC,8BAA8B,CACxC,WAAW,CAAC,IAAI,CAChB,aAAa,CAAC,OAAO,CACrB,EAAE,CAAC,IAAI,CACP,EAAE,CAAC,IAAI,CACP,CAAC,CAAC,IAAI,CACN,IAAI,CAAC,aAAa,CAClB,eAAe,CAAC,OAAO,CACvB,gBAAgB,CAAC,CAAC,yBAAyB,OAAO,UAAU,CAAC,EAE/D;QAAA,CAAC,CAAC,CAAC,IAAI,IAAI,CACT,CAAC,IAAI,CACH,CAAC,CAAC,IAAI,CACN,CAAC,CAAC,IAAI,CACN,UAAU,CAAC,QAAQ,CACnB,iBAAiB,CAAC,QAAQ,CAC1B,UAAU,CAAC,KAAK,CAChB,QAAQ,CAAC,CAAC,QAAQ,IAAI,MAAM,CAAC,CAE7B;YAAA,CAAC,IAAI,CACP;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"RadialProgressBar.jsx","sourceRoot":"","sources":["../../../../src/components/01-atoms/RadialProgressBar/RadialProgressBar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AASvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,IAAI,EACJ,QAAQ,GACe;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,GAAG,EAAE;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAC1C;MAAA,CAAC,GAAG,CACF,SAAS,CAAC,0CAA0C,CACpD,OAAO,CAAC,aAAa,CAErB;QAAA,CAAC,MAAM,CACL,SAAS,CAAC,6CAA6C,CACvD,WAAW,CAAC,IAAI,CAChB,EAAE,CAAC,IAAI,CACP,EAAE,CAAC,IAAI,CACP,CAAC,CAAC,IAAI,CACN,IAAI,CAAC,aAAa,EAEpB;QAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC;YACL,UAAU,EAAE,wBAAwB;YACpC,SAAS,EAAE,gBAAgB;YAC3B,eAAe,EAAE,SAAS;SAC3B,CAAC,CACF,SAAS,CAAC,sDAAsD,CAChE,WAAW,CAAC,IAAI,CAChB,aAAa,CAAC,OAAO,CACrB,EAAE,CAAC,IAAI,CACP,EAAE,CAAC,IAAI,CACP,CAAC,CAAC,IAAI,CACN,IAAI,CAAC,aAAa,CAClB,eAAe,CAAC,OAAO,CACvB,gBAAgB,CAAC,CAAC,yBAAyB,OAAO,UAAU,CAAC,EAE/D;QAAA,CAAC,CAAC,CAAC,IAAI,IAAI,CACT,CAAC,IAAI,CACH,SAAS,CAAC,cAAc,CACxB,CAAC,CAAC,IAAI,CACN,CAAC,CAAC,IAAI,CACN,UAAU,CAAC,QAAQ,CACnB,iBAAiB,CAAC,QAAQ,CAC1B,UAAU,CAAC,KAAK,CAChB,QAAQ,CAAC,CAAC,QAAQ,IAAI,MAAM,CAAC,CAE7B;YAAA,CAAC,IAAI,CACP;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/components/01-atoms/Radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAMf,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;IACvE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAwB,GACzB,EAAE,UAAU,GAAG,SAAS,CAkFxB"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/01-atoms/Radio/Radio.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAIxE,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;IACvE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAwB,GACzB,EAAE,UAAU,GAAG,SAAS,CAmFxB"}

package/dist/components/01-atoms/Radio/Radio.jsx

@@ -1,10 +1,8 @@
 'use client';
 import clsx from 'clsx';
-import { useEffect, useState, } from 'react';
-import { generateUniqueId } from '../../../utils';
+import { useId } from 'react';
 import { Each } from '../../00-base';
 import { RenderErrorOrHelperText } from '../Input/utils/RenderErrorOrHelperText';
-import { Paragraph } from '../Paragraph';
 /**
  * Radio component for rendering a group of radio buttons with labels, helper text, and error message.
  *
@@ -32,42 +30,37 @@ import { Paragraph } from '../Paragraph';
  */
 export function Radio({ label, options, radio, helperText, error, orientation = 'vertical', }) {
     const optionsArr = Object.entries(options);
-    const [ids, setIds] = useState(new Array(optionsArr.length).fill({
-        radio: {},
-        label: {},
-    }));
-    const radioClasses = clsx('relative h-4 w-4 cursor-pointer border-2 outline-hidden', error && !radio.disabled ? 'accent-error' : 'accent-black', !radio.disabled &&
-        'before:absolute before:-top-1 before:-left-1 before:h-6 before:w-6 before:rounded-full before:bg-transparent before:transition hover:before:bg-black/15', radio.className);
-    const labelClasses = clsx('cursor-pointer p-2 text-sm', error ? 'text-error' : 'text-black', radio.disabled && 'text-gray-3');
-    useEffect(() => {
-        setIds((prevIds) => {
-            if (prevIds.length === optionsArr.length) {
-                return prevIds;
-            }
-            return optionsArr.map(() => {
-                const id = generateUniqueId();
-                return {
-                    radio: { id },
-                    label: { htmlFor: id },
-                };
-            });
-        });
-    }, [optionsArr]);
-    return (<div className="w-full max-w-full">
-      <Paragraph size="body-1" className="pb-1.5">
+    const groupId = useId();
+    const descriptionId = error || helperText ? `${groupId}-description` : undefined;
+    const describedBy = [radio['aria-describedby'], descriptionId].filter(Boolean).join(' ') ||
+        undefined;
+    const radioClasses = clsx('disabled:accent-gray-3 dark:disabled:accent-gray-2 relative h-4 w-4 cursor-pointer border-2 outline-hidden disabled:cursor-not-allowed', error && !radio.disabled
+        ? 'accent-error dark:accent-error-dark'
+        : 'accent-black dark:accent-white', !radio.disabled &&
+        'before:absolute before:-top-1 before:-left-1 before:h-6 before:w-6 before:rounded-full before:bg-transparent before:transition hover:before:bg-black/15 dark:hover:before:bg-white/15', radio.className);
+    const labelClasses = clsx('cursor-pointer p-2 text-sm', radio.disabled
+        ? 'text-gray-3 dark:text-gray-2 cursor-not-allowed'
+        : error
+            ? 'text-error dark:text-error-dark'
+            : 'text-black dark:text-white');
+    return (<fieldset className="w-full max-w-full border-0 p-0" aria-describedby={descriptionId}>
+      <legend className={clsx('pb-1.5 text-sm font-normal', radio.disabled
+            ? 'text-gray-3 dark:text-gray-2'
+            : 'text-black dark:text-white')}>
         {label}
-      </Paragraph>
+      </legend>
       <div className={clsx('flex', orientation === 'vertical' ? 'flex-col' : 'flex-row gap-4')}>
         <Each of={optionsArr} render={([value, text], index) => {
+            const id = `${groupId}-${index}`;
             return (<div className="flex items-center" key={value}>
-                <input {...radio} {...ids[index].radio} type="radio" className={radioClasses} value={value} checked={radio.value === value}/>
-                <label {...ids[index].label} className={labelClasses}>
+                <input {...radio} id={id} type="radio" className={radioClasses} name={radio.name ?? groupId} value={value} checked={radio.value === value} aria-invalid={error ? true : radio['aria-invalid']} aria-describedby={describedBy}/>
+                <label htmlFor={id} className={labelClasses}>
                   {text}
                 </label>
               </div>);
         }}/>
       </div>
-      <RenderErrorOrHelperText disabled={radio.disabled} helperText={helperText} error={error}/>
-    </div>);
+      <RenderErrorOrHelperText id={descriptionId} disabled={radio.disabled} helperText={helperText} error={error}/>
+    </fieldset>);
 }
 //# sourceMappingURL=Radio.jsx.map