@axa-fr/design-system-slash-react 1.2.1-alpha.12 → 1.2.1-alpha.123

package/dist/Form/MultiSelect/useMultiSelectStyle.js

@@ -0,0 +1,81 @@
+export const useMultiSelectStyle = () => {
+    // The recommended way to provide custom styles to react-select is to use the styles prop
+    // https://react-select.com/styles#the-styles-prop
+    const styles = {
+        container: () => ({
+            width: "100%",
+        }),
+        control: (provided, state) => ({
+            ...provided,
+            whiteSpace: "normal",
+            borderRadius: "0",
+            borderColor: state.isFocused ? "var(--axablue80)" : provided.borderColor,
+            boxShadow: state.isFocused ? "0" : provided.boxShadow,
+            width: "100%",
+            cursor: state.isDisabled ? "not-allowed" : "pointer",
+            ":hover": {
+                borderColor: state.isFocused
+                    ? "var(--axablue80)"
+                    : provided.borderColor,
+            },
+        }),
+        menu: (provided) => ({
+            ...provided,
+            borderRadius: "0",
+        }),
+        menuList: (provided) => ({
+            ...provided,
+            padding: "0",
+        }),
+        option: (provided, state) => ({
+            ...provided,
+            backgroundColor: (state.isSelected && !state.isMulti) || state.isFocused
+                ? "var(--axablue30)"
+                : "var(--white)",
+            color: state.isSelected || state.isFocused
+                ? "var(--axablue80)"
+                : provided.color,
+            cursor: state.isDisabled ? "not-allowed" : "pointer",
+            padding: "0.406rem 0.75rem",
+            ":hover": {
+                backgroundColor: "var(--axablue30)",
+                color: "var(--axablue80)",
+            },
+        }),
+        singleValue: (provided) => ({
+            ...provided,
+            whiteSpace: "normal",
+        }),
+        multiValue: (provided) => ({
+            ...provided,
+            whiteSpace: "normal",
+            flexDirection: "row-reverse",
+            borderRadius: "0.25rem",
+        }),
+        multiValueLabel: (provided, state) => ({
+            ...provided,
+            whiteSpace: "normal",
+            backgroundColor: state.isDisabled
+                ? provided.backgroundColor
+                : "var(--axablue30)",
+            color: state.isDisabled ? provided.backgroundColor : "var(--axablue80)",
+            padding: "0.125rem 0.375rem 0.125rem 0.375rem",
+            borderRadius: "0 0.25rem 0.25rem 0",
+        }),
+        multiValueRemove: (provided, state) => ({
+            ...provided,
+            backgroundColor: state.isDisabled
+                ? provided.backgroundColor
+                : "var(--axablue30)",
+            color: state.isDisabled ? provided.color : "var(--axablue80)",
+            //   borderRadius: "0.25rem 0 0 0.25rem",
+            ":hover": {
+                backgroundColor: state.isDisabled
+                    ? provided.backgroundColor
+                    : "var(--axablue40)",
+                color: state.isDisabled ? provided.color : "var(--axablue80)",
+            },
+        }),
+    };
+    return { styles };
+};

package/dist/Form/Number/NumberInput.d.ts

@@ -1,12 +1,9 @@
 import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
-import { LegacyField } from "../core";
+import { ComponentPropsWithRef } from "react";
+import { type ConsumerFieldProps } from "../core";
 import { Number } from "./Number";
-type Props = ComponentPropsWithoutRef<typeof LegacyField> & ComponentPropsWithRef<typeof Number> & {
-    helpMessage?: ReactNode;
-    children?: ReactNode;
-};
-export declare const NumberInput: ({ message, children, helpMessage, id, label, classNameContainerLabel, classNameContainerInput, forceDisplayMessage, messageType, isVisible, className, disabled, classModifier, required, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = Omit<ConsumerFieldProps & ComponentPropsWithRef<typeof Number>, "children">;
+export declare const NumberInput: ({ rightElement, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Number/NumberInput.js

@@ -1,16 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
-import { useId, } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { Field } from "../core";
 import { Number } from "./Number";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-export const NumberInput = ({ message, children, helpMessage, id, label, classNameContainerLabel, classNameContainerInput, forceDisplayMessage, messageType, isVisible, className, disabled = false, classModifier = "", required, ...otherProps }) => {
-    const inputUseId = useId();
-    const errorUseId = useId();
-    const inputId = id ?? inputUseId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__text", classModifier: inputFieldClassModifier, children: [_jsx(Number, { id: inputId, classModifier: inputClassModifier, disabled: disabled, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...otherProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+export const NumberInput = ({ rightElement, ...props }) => {
+    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Number, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), rightElement] })) }));
 };

package/dist/Form/Pass/PassInput.d.ts

@@ -1,10 +1,10 @@
 import { ComponentProps, ReactNode } from "react";
-import { LegacyField } from "../core";
+import { ConsumerFieldProps } from "../core";
 import { Pass } from "./Pass";
 type PassProps = ComponentProps<typeof Pass>;
-type Props = ComponentProps<typeof LegacyField> & Omit<PassProps, "onToggleType" | "type"> & {
+type Props = Omit<ConsumerFieldProps & PassProps & {
     helpMessage?: ReactNode;
     score?: string;
-};
-declare const PassInput: ({ message, children, helpMessage, id, disabled, label, messageType, isVisible, forceDisplayMessage, className, classModifier, classNameContainerLabel, classNameContainerInput, score, required, ...passProps }: Props) => import("react/jsx-runtime").JSX.Element;
+}, "onToggleType" | "type" | "children">;
+declare const PassInput: ({ rightElement, score, classModifier, disabled, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { PassInput };

package/dist/Form/Pass/PassInput.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Field } from "../core";
 import { Pass } from "./Pass";
-import { useAriaInvalid } from "../core/useAriaInvalid";
 const strengthList = {
     0: "bad",
     1: "okay",
@@ -24,15 +23,9 @@ const calculateStrength = (score) => {
     }
     return strengthList[strength];
 };
-const PassInput = ({ message, children, helpMessage, id, disabled = false, label, messageType, isVisible, forceDisplayMessage, className, classModifier, classNameContainerLabel, classNameContainerInput, score, required, ...passProps }) => {
+const PassInput = ({ rightElement, score, classModifier, disabled, ...props }) => {
     const strength = calculateStrength(score);
-    const classModifierStrength = [classModifier ?? "", strength ?? ""].join(" ");
     const [type, setType] = useState("password");
-    const inputId = useId();
-    const errorUseId = useId();
-    const finalId = id ?? inputId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifierStrength, disabled, Boolean(children), required);
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsx(LegacyField, { label: label, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, id: finalId, classModifier: `${classModifierStrength} ${inputFieldClassModifier}`, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: _jsxs(FieldInput, { className: "af-form__pass-container", classModifier: inputFieldClassModifier, children: [_jsx(Pass, { ...passProps, type: type, id: inputId, disabled: disabled, classModifier: inputClassModifier, "aria-describedby": errorUseId, "aria-invalid": isInvalid, onToggleType: () => setType(type === "password" ? "text" : "password") }), children, _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }) }));
+    return (_jsx(Field, { ...props, classModifier: classModifier, renderInput: ({ id, classModifier: modifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Pass, { ...props, type: type, id: id, disabled: disabled, classModifier: `${modifier} ${strength}`, "aria-describedby": errorId, "aria-invalid": ariaInvalid, onToggleType: () => setType(type === "password" ? "text" : "password") }), rightElement] })) }));
 };
 export { PassInput };

package/dist/Form/Radio/Radio.d.ts

@@ -1,14 +1,26 @@
-import { ComponentPropsWithRef } from "react";
 import type { Option } from "../core";
-import { RadioItem } from "./RadioItem";
 export declare enum RadioModes {
     classic = "classic",
     default = "default",
-    inline = "inline"
+    inline = "inline",
+    card = "card"
 }
-type Props = Omit<ComponentPropsWithRef<typeof RadioItem>, "id" | "label" | "className"> & {
+declare const Radio: import("react").ForwardRefExoticComponent<(({
     options: Option[];
-    mode?: keyof typeof RadioModes;
-};
-declare const Radio: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    options: Option[];
+    orientation?: "horizontal" | "vertical";
+    error?: boolean;
+}, "ref"> & {
+    mode: "card";
+}) | Omit<{
+    options: Option[];
+} & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
+    classModifier?: string;
+    optionClassName?: string;
+    label?: import("react").ReactNode;
+    isChecked?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "className" | "id" | "label"> & {
+    mode?: "classic" | "default" | "inline";
+}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export { Radio };

package/dist/Form/Radio/Radio.js

@@ -1,11 +1,14 @@
 import { createElement as _createElement } from "react";
-import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
 import { RadioItem } from "./RadioItem";
+import { RadioCardGroup } from "./RadioCardGroup";
 export var RadioModes;
 (function (RadioModes) {
     RadioModes["classic"] = "classic";
     RadioModes["default"] = "default";
     RadioModes["inline"] = "inline";
+    RadioModes["card"] = "card";
 })(RadioModes || (RadioModes = {}));
 const getClassNameMode = (mode) => {
     switch (mode) {
@@ -13,13 +16,19 @@ const getClassNameMode = (mode) => {
             return "af-form__radio";
         case RadioModes.inline:
             return "af-form__radio-inline";
+        case RadioModes.card:
+            return "af-form__radio-card";
         default:
             return "af-form__radio-custom";
     }
 };
-const Radio = forwardRef(({ classModifier, options, value = "", mode = RadioModes.default, children, disabled, ...otherProps }, inputRef) => {
-    const classNameMode = getClassNameMode(mode);
-    return options.map((option) => (_createElement(RadioItem, { ...otherProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, classModifier: classModifier, ref: inputRef, ...option }, children)));
+const Radio = forwardRef(({ options, value = "", children, disabled, ...otherProps }, inputRef) => {
+    const { mode, ...onlyNecessaryProps } = otherProps;
+    const classNameMode = getClassNameMode(mode ?? "default");
+    if (mode === "card") {
+        return (_jsx(RadioCardGroup, { ...onlyNecessaryProps, options: options, disabled: disabled, value: value, children: children }));
+    }
+    return options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, ref: inputRef, ...option }, children)));
 });
 Radio.displayName = "EnhancedInputRadio";
 export { Radio };

package/dist/Form/Radio/RadioCardGroup.d.ts

@@ -0,0 +1,10 @@
+import "@axa-fr/design-system-slash-css/dist/Form/Radio/RadioCardGroup.css";
+import { ComponentProps } from "react";
+import type { Option } from "../core";
+type Props = ComponentProps<"input"> & {
+    options: Option[];
+    orientation?: "horizontal" | "vertical";
+    error?: boolean;
+};
+export declare const RadioCardGroup: ({ children, options, className, value, name, orientation, disabled, error, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/Radio/RadioCardGroup.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Form/Radio/RadioCardGroup.css";
+import { useId, useRef } from "react";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+const DEFAULT_CLASSNAME = "af-card";
+const DEFAULT_CONTAINER_CLASSNAME = "af-form__radio-card-group";
+export const RadioCardGroup = ({ children, options, className, value, name, orientation = "vertical", disabled = false, error = false, ...otherProps }) => {
+    const idGenerated = useId();
+    const radioGroupRef = useRef(null);
+    return (_jsxs("div", { ref: radioGroupRef, role: "radiogroup", className: classNames([
+            DEFAULT_CONTAINER_CLASSNAME,
+            className,
+            orientation === "horizontal" &&
+                `${DEFAULT_CONTAINER_CLASSNAME}--horizontal`,
+        ]), children: [options.map(({ name: optionName, icon, label, disabled: optionDisabled, value: optionValue, ...otherOptionProps }) => {
+                const newName = name || optionName || idGenerated;
+                const allClassNames = classNames([
+                    DEFAULT_CLASSNAME,
+                    orientation === "horizontal" && `${DEFAULT_CLASSNAME}--horizontal`,
+                    error && `${DEFAULT_CLASSNAME}--error`,
+                ]);
+                const isDisabled = disabled || optionDisabled;
+                return (_jsxs("label", { className: allClassNames, children: [_jsx("input", { ...otherProps, type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : optionValue === value, value: optionValue, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, optionValue));
+            }), children] }));
+};

package/dist/Form/Radio/RadioInput.d.ts

@@ -1,44 +1,6 @@
-import { RadioModes } from "./Radio";
-declare const RadioInput: import("react").ForwardRefExoticComponent<Omit<{
-    message?: string;
-    messageType?: import("../core").MessageTypes;
-} & {
-    className?: string;
-    classModifier?: string;
-    forceDisplayMessage?: boolean;
-    children: import("react").ReactNode;
-    setStateMemoryFn?: typeof import("../core/FieldForm").setStateMemory;
-    onChangeByStateFn?: typeof import("../core/FieldForm").onChangeByState;
-    setStateOnBlurFn?: typeof import("../core/FieldForm").setStateOnBlur;
-    setStateOnFocusFn?: typeof import("../core/FieldForm").setStateOnFocus;
-    initialState?: {
-        hasLostFocusOnce: boolean;
-        hasFocus: boolean;
-        hasChange: boolean;
-        memory: {
-            message?: string;
-            messageType?: import("../core").MessageTypes;
-        };
-    };
-}, "children"> & {
-    label: import("react").ReactNode;
-    children?: import("react").ReactNode;
-    id?: string;
-    classModifier?: string;
-    classNameContainerLabel?: string;
-    classNameContainerInput?: string;
-    isVisible?: boolean;
-    roleContainer?: string;
-    ariaLabelContainer?: string;
-    isLabelContainerLinkedToInput?: boolean;
-    errorId?: string;
-} & Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
-    classModifier?: string;
-    optionClassName?: string;
-    label?: import("react").ReactNode;
-    isChecked?: boolean;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "label" | "className" | "id"> & {
-    options: import("../core").Option[];
-    mode?: keyof typeof RadioModes;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+import { ComponentPropsWithoutRef } from "react";
+import { type ConsumerFieldProps } from "../core";
+import { Radio } from "./Radio";
+type RadioInputProps = Omit<ConsumerFieldProps & ComponentPropsWithoutRef<typeof Radio>, "children">;
+declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export { RadioInput };

package/dist/Form/Radio/RadioInput.js

@@ -1,16 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { LegacyField, getFirstId, useInputClassModifier, useOptionsWithId, } from "../core";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Field, useOptionsWithId } from "../core";
 import { Radio, RadioModes } from "./Radio";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-const RadioInput = forwardRef(({ mode, messageType, message, className, classModifier = "", isVisible, options, classNameContainerLabel, classNameContainerInput, label, forceDisplayMessage, children, required, disabled = false, ariaLabelContainer, ...radioProps }, inputRef) => {
-    const rowModifier = `${classModifier ?? ""}${mode === RadioModes.classic ? " label-top " : ""}`;
+const RadioInput = forwardRef(({ label, mode = "default", options, rightElement, ...props }, inputRef) => {
+    const labelPosition = mode === RadioModes.classic ? "top" : "center";
     const newOptions = useOptionsWithId(options);
-    const firstId = getFirstId(newOptions);
-    const errorUseId = useId();
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsxs(LegacyField, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier + inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, roleContainer: "radiogroup", ariaLabelContainer: ariaLabelContainer ?? label?.toString(), isLabelContainerLinkedToInput: false, errorId: errorUseId, children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: inputClassModifier, ref: inputRef, disabled: disabled, required: required || classModifier?.includes("required"), "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...radioProps }), children] }));
+    return (_jsx(Field, { label: label, labelPosition: labelPosition, roleContainer: mode !== "card" ? "radiogroup" : undefined, ...props, renderInput: ({ classModifier, ariaInvalid, errorId, ...radioProps }) => (_jsxs(_Fragment, { children: [_jsx(Radio, { options: newOptions, mode: mode, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...radioProps }), rightElement] })) }));
 });
 RadioInput.displayName = "EnhancedInputRadio";
 export { RadioInput };

package/dist/Form/Select/Select.d.ts

@@ -1,61 +1,14 @@
 import { OptionHTMLAttributes } from "react";
 declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<{
-    form?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    ref?: import("react").Ref<HTMLSelectElement> | undefined;
-    key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
+    color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
+    name?: string | undefined | undefined;
+    style?: import("react").CSSProperties | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
+    tabIndex?: number | undefined | undefined;
     "aria-activedescendant"?: string | undefined | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
     "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -281,9 +234,56 @@ declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<{
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
+    ref?: import("react").Ref<HTMLSelectElement> | undefined;
+    form?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
+    title?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     classModifier?: string | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
     disabled?: boolean | undefined | undefined;
-    name?: string | undefined | undefined;
     value?: string | number | readonly string[] | undefined;
     required?: boolean | undefined | undefined;
     autoComplete?: string | undefined | undefined;