react-better-html 1.1.88 → 1.1.90

package/dist/index.js

@@ -2020,6 +2020,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         value: values[field]?.toString() ?? "",
+        name: field.toString(),
         onChangeValue: (newValue) => {
           const readyValue = type === "number" ? newValue ? Number(newValue) : void 0 : newValue;
           setFieldValue(field, readyValue);
@@ -2043,6 +2044,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         value: values[field]?.toString() ?? "",
+        name: field.toString(),
         onChangeValue: (newValue) => {
           setFieldValue(field, newValue);
         },
@@ -2056,6 +2058,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         value: values[field],
+        name: field.toString(),
         onChange: (value) => {
           setFieldValue(field, value);
         },
@@ -2069,6 +2072,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         checked: values[field],
+        name: field.toString(),
         onChange: (checked) => {
           setFieldValue(field, checked);
         },
@@ -2097,6 +2101,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         checked: values[field],
+        name: field.toString(),
         onChange: (checked) => {
           setFieldValue(field, checked);
         },
@@ -2232,7 +2237,17 @@ var DivStyledComponent = import_styled_components2.default.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var DivComponent = (0, import_react3.forwardRef)(function Div({ value, as, isTabAccessed, onClickWithValue, role, onClick, onKeyDown, children, ...props }, ref) {
+var DivComponent = (0, import_react3.forwardRef)(function Div({
+  as = "div",
+  value,
+  isTabAccessed,
+  onClickWithValue,
+  role,
+  onClick,
+  onKeyDown,
+  children,
+  ...props
+}, ref) {
   const theme2 = useTheme();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -2326,7 +2341,7 @@ var Div_default = Div2;
 var import_react4 = require("react");
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TextStyledComponent = import_styled_components3.default.div.withConfig({
+var TextStyledComponent = import_styled_components3.default.p.withConfig({
   shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
 })`
    ${(props) => props.normalStyle}
@@ -2335,13 +2350,24 @@ var TextStyledComponent = import_styled_components3.default.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var TextComponent = (0, import_react4.forwardRef)(function Text({ as = "p", children, ...props }, ref) {
+var TextComponent = (0, import_react4.forwardRef)(function Text({ children, ...props }, ref) {
   const theme2 = useTheme();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TextStyledComponent, { as, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    TextStyledComponent,
+    {
+      as: props.as,
+      ...styledComponentStyles,
+      ...dataProps,
+      ...ariaProps,
+      ...restProps,
+      ref,
+      children
+    }
+  );
 });
 TextComponent.unknown = (0, import_react4.forwardRef)(function Unknown(props, ref) {
   const theme2 = useTheme();
@@ -3294,7 +3320,7 @@ var desaturateColor = (hexColor, amount) => {
 
 // src/components/Chip.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var ChipComponent = (0, import_react14.forwardRef)(function Chip({ text, color, backgroundColor, borderRadius, isSmall, isCircle, ...props }, ref) {
+var ChipComponent = (0, import_react14.forwardRef)(function Chip({ text, color, backgroundColor, borderRadius, isCircle, ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Div_default,
@@ -3302,8 +3328,8 @@ var ChipComponent = (0, import_react14.forwardRef)(function Chip({ text, color,
       width: "fit-content",
       backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
       borderRadius: isCircle ? 999 : borderRadius ?? theme2.styles.borderRadius / 1.3,
-      paddingBlock: theme2.styles.gap / (isSmall ? 2 : 1),
-      paddingInline: theme2.styles.space / (isSmall ? 1.5 : 1),
+      paddingBlock: theme2.styles.gap / 2,
+      paddingInline: theme2.styles.space / 1.5,
       ...props,
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
@@ -4879,7 +4905,7 @@ var getFormErrorObject = (formValues) => {
 // src/components/Label.tsx
 var import_react15 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function Label({ text, required, isError, color }) {
+function Label({ text, required, isError, color, htmlFor }) {
   const theme2 = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     Text_default,
@@ -4888,6 +4914,8 @@ function Label({ text, required, isError, color }) {
       height: 16,
       fontSize: 14,
       color: isError ? theme2.colors.error : color ?? theme2.colors.textSecondary,
+      htmlFor,
+      "aria-required": required,
       children: [
         text,
         required && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
@@ -4909,6 +4937,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   errorText,
   infoText,
   required,
+  name,
   disabled,
   options,
   value: controlledValue,
@@ -4925,6 +4954,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   onChange,
   onChangeSearch,
   renderOption,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
@@ -5068,9 +5098,11 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
         errorText,
         infoText,
         required,
+        name,
         disabled,
         readOnly: !withSearch,
         value: displayValue,
+        id,
         cursor: !withSearch ? "pointer" : void 0,
         placeholder: withSearch ? selectedOption ? selectedOption.label : readyPlaceholder : readyPlaceholder,
         leftIcon,
@@ -5172,7 +5204,8 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
               color: theme2.colors.textSecondary,
               transform: `rotate(${isOpen ? 180 : 0}deg)`,
               transition: theme2.styles.transition,
-              pointerEvents: "none"
+              pointerEvents: "none",
+              "aria-hidden": true
             }
           )
         ]
@@ -5504,9 +5537,11 @@ var InputFieldComponent = (0, import_react18.forwardRef)(function InputField({
   holderRef,
   required,
   placeholder,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
+  const internalId = (0, import_react18.useId)();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState(
     props.value?.toString() ?? "",
     debounceDelay
@@ -5539,8 +5574,9 @@ var InputFieldComponent = (0, import_react18.forwardRef)(function InputField({
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
+  const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
@@ -5562,6 +5598,7 @@ var InputFieldComponent = (0, import_react18.forwardRef)(function InputField({
           withRightIcon: rightIcon !== void 0,
           required,
           placeholder: placeholder ?? label,
+          id: readyId,
           onChange: onChangeElement,
           ...styledComponentStylesWithoutExcluded,
           ...dataProps,
@@ -5616,9 +5653,11 @@ InputFieldComponent.multiline = (0, import_react18.forwardRef)(function Multilin
   onChangeValue,
   onClickRightIcon,
   required,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
+  const internalId = (0, import_react18.useId)();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
@@ -5630,8 +5669,9 @@ InputFieldComponent.multiline = (0, import_react18.forwardRef)(function Multilin
     },
     [onChange, onChangeValue]
   );
+  const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { gap: theme2.styles.gap, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, required, isError: !!errorText }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
@@ -5653,6 +5693,7 @@ InputFieldComponent.multiline = (0, import_react18.forwardRef)(function Multilin
           required,
           placeholder: placeholder ?? label,
           onChange: onChangeElement,
+          id: readyId,
           ...styledComponentStyles,
           ...dataProps,
           ...ariaProps,
@@ -5729,8 +5770,9 @@ InputFieldComponent.password = (0, import_react18.forwardRef)(function Password(
 InputFieldComponent.search = (0, import_react18.forwardRef)(function Search({ ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
 });
-InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, ...props }, ref) {
+InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
   const theme2 = useTheme();
+  const internalId = (0, import_react18.useId)();
   const [dropdownValue, setDropdownValue] = (0, import_react18.useState)();
   const [inputFieldValue, setInputFieldValue] = (0, import_react18.useState)(value?.toString() ?? "");
   const renderOption = (0, import_react18.useCallback)(
@@ -5778,8 +5820,18 @@ InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneN
     setDropdownValue(country.phoneNumberExtension);
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
+  const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Label_default,
+      {
+        text: label,
+        color: labelColor,
+        required: props.required,
+        isError: !!props.errorText,
+        htmlFor: readyId
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Dropdown_default,
@@ -5805,6 +5857,7 @@ InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneN
           value: inputFieldValue,
           onChangeValue: onChangeValueElement,
           ref,
+          id: readyId,
           ...props
         }
       )
@@ -6223,9 +6276,11 @@ var ToggleInputComponent = (0, import_react19.forwardRef)(function ToggleInput({
   checked: controlledChecked,
   color,
   required,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
+  const internalId = (0, import_react19.useId)();
   const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
   const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
   const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -6246,8 +6301,9 @@ var ToggleInputComponent = (0, import_react19.forwardRef)(function ToggleInput({
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
+  const readyId = id ?? internalId;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -6257,6 +6313,7 @@ var ToggleInputComponent = (0, import_react19.forwardRef)(function ToggleInput({
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
+            id: readyId,
             ...styledComponentStyles,
             ...dataProps,
             ...ariaProps,
@@ -6330,9 +6387,11 @@ var ToggleInput_default = {
     onChange,
     checked: controlledChecked,
     required,
+    id,
     ...props
   }, ref) {
     const theme2 = useTheme();
+    const internalId = (0, import_react19.useId)();
     const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
     const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
     const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -6347,8 +6406,9 @@ var ToggleInput_default = {
       if (controlledChecked === void 0) setInternalChecked.setState(newIsChecked);
       onChange?.(newIsChecked, value);
     }, [disabled, checked, onChange, controlledChecked, value]);
+    const readyId = id ?? internalId;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Div_default.row,
         {
@@ -6368,6 +6428,10 @@ var ToggleInput_default = {
               disabled: disabled ?? false,
               isMouseDown,
               onClick: onClickElement,
+              id: readyId,
+              role: "switch",
+              "aria-checked": checked,
+              "aria-disabled": disabled ?? false,
               ...styledComponentStyles,
               ...dataProps,
               ...ariaProps,