react-better-html 1.1.89 → 1.1.91

package/dist/index.mjs

@@ -1941,6 +1941,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);
@@ -1964,6 +1965,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         value: values[field]?.toString() ?? "",
+        name: field.toString(),
         onChangeValue: (newValue) => {
           setFieldValue(field, newValue);
         },
@@ -1977,6 +1979,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         value: values[field],
+        name: field.toString(),
         onChange: (value) => {
           setFieldValue(field, value);
         },
@@ -1990,6 +1993,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         checked: values[field],
+        name: field.toString(),
         onChange: (checked) => {
           setFieldValue(field, checked);
         },
@@ -2018,6 +2022,7 @@ function useForm(options) {
       return {
         required: requiredFields?.includes(field),
         checked: values[field],
+        name: field.toString(),
         onChange: (checked) => {
           setFieldValue(field, checked);
         },
@@ -2153,7 +2158,17 @@ var DivStyledComponent = styled.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var DivComponent = forwardRef(function Div({ value, as, isTabAccessed, onClickWithValue, role, onClick, onKeyDown, children, ...props }, ref) {
+var DivComponent = 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");
@@ -2247,7 +2262,7 @@ var Div_default = Div2;
 import { forwardRef as forwardRef2, memo as memo3 } from "react";
 import styled2 from "styled-components";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var TextStyledComponent = styled2.div.withConfig({
+var TextStyledComponent = styled2.p.withConfig({
   shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
 })`
    ${(props) => props.normalStyle}
@@ -2256,13 +2271,24 @@ var TextStyledComponent = styled2.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var TextComponent = forwardRef2(function Text({ as = "p", children, ...props }, ref) {
+var TextComponent = forwardRef2(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__ */ jsx3(TextStyledComponent, { as, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref, children });
+  return /* @__PURE__ */ jsx3(
+    TextStyledComponent,
+    {
+      as: props.as,
+      ...styledComponentStyles,
+      ...dataProps,
+      ...ariaProps,
+      ...restProps,
+      ref,
+      children
+    }
+  );
 });
 TextComponent.unknown = forwardRef2(function Unknown(props, ref) {
   const theme2 = useTheme();
@@ -2438,8 +2464,22 @@ var Image = forwardRef4(function Image2({ name, src, ...props }, ref) {
     }
   );
 });
-Image.profileImage = forwardRef4(function ProfileImage({ size = 40, ...props }, ref) {
-  return /* @__PURE__ */ jsx6(Image, { width: size, height: size, borderRadius: "50%", objectFit: "cover", ref, ...props });
+Image.profileImage = forwardRef4(function ProfileImage({ size = 40, letters, backgroundColor, ...props }, ref) {
+  const theme2 = useTheme();
+  return letters ? /* @__PURE__ */ jsx6(
+    Div_default.row,
+    {
+      width: size,
+      height: size,
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      borderRadius: 999,
+      alignItems: "center",
+      justifyContent: "center",
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx6(Text_default, { fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
+    }
+  ) : /* @__PURE__ */ jsx6(Image, { width: size, height: size, borderRadius: 999, objectFit: "cover", ref, ...props });
 });
 var MemoizedImage = memo6(Image);
 MemoizedImage.profileImage = Image.profileImage;
@@ -3251,7 +3291,7 @@ Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef8, memo as memo16, useCallback as useCallback8, useState as useState6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4 } from "react";
+import { forwardRef as forwardRef8, memo as memo16, useCallback as useCallback8, useState as useState6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4, useId } from "react";
 import styled8 from "styled-components";
 
 // src/constants/countries.ts
@@ -4800,7 +4840,7 @@ var getFormErrorObject = (formValues) => {
 // src/components/Label.tsx
 import { memo as memo13 } from "react";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
-function Label({ text, required, isError, color }) {
+function Label({ text, required, isError, color, htmlFor }) {
   const theme2 = useTheme();
   return /* @__PURE__ */ jsxs7(
     Text_default,
@@ -4809,6 +4849,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__ */ jsxs7(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
@@ -4830,6 +4872,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   errorText,
   infoText,
   required,
+  name,
   disabled,
   options,
   value: controlledValue,
@@ -4846,6 +4889,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   onChange,
   onChangeSearch,
   renderOption,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
@@ -4989,9 +5033,11 @@ var DropdownComponent = forwardRef7(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,
@@ -5093,7 +5139,8 @@ var DropdownComponent = forwardRef7(function Dropdown({
               color: theme2.colors.textSecondary,
               transform: `rotate(${isOpen ? 180 : 0}deg)`,
               transition: theme2.styles.transition,
-              pointerEvents: "none"
+              pointerEvents: "none",
+              "aria-hidden": true
             }
           )
         ]
@@ -5425,9 +5472,11 @@ var InputFieldComponent = forwardRef8(function InputField({
   holderRef,
   required,
   placeholder,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
+  const internalId = useId();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState(
     props.value?.toString() ?? "",
     debounceDelay
@@ -5460,8 +5509,9 @@ var InputFieldComponent = forwardRef8(function InputField({
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
+  const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-    label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+    label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ jsx15(
         Icon_default,
@@ -5483,6 +5533,7 @@ var InputFieldComponent = forwardRef8(function InputField({
           withRightIcon: rightIcon !== void 0,
           required,
           placeholder: placeholder ?? label,
+          id: readyId,
           onChange: onChangeElement,
           ...styledComponentStylesWithoutExcluded,
           ...dataProps,
@@ -5537,9 +5588,11 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
   onChangeValue,
   onClickRightIcon,
   required,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
+  const internalId = useId();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
@@ -5551,8 +5604,9 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
     },
     [onChange, onChangeValue]
   );
+  const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs10(Div_default.column, { gap: theme2.styles.gap, children: [
-    label && /* @__PURE__ */ jsx15(Label_default, { text: label, required, isError: !!errorText }),
+    label && /* @__PURE__ */ jsx15(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ jsx15(
         Icon_default,
@@ -5574,6 +5628,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
           required,
           placeholder: placeholder ?? label,
           onChange: onChangeElement,
+          id: readyId,
           ...styledComponentStyles,
           ...dataProps,
           ...ariaProps,
@@ -5650,8 +5705,9 @@ InputFieldComponent.password = forwardRef8(function Password({ ...props }, ref)
 InputFieldComponent.search = forwardRef8(function Search({ ...props }, ref) {
   return /* @__PURE__ */ jsx15(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
 });
-InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, value, onChangeValue, labelColor, ...props }, ref) {
+InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
   const theme2 = useTheme();
+  const internalId = useId();
   const [dropdownValue, setDropdownValue] = useState6();
   const [inputFieldValue, setInputFieldValue] = useState6(value?.toString() ?? "");
   const renderOption = useCallback8(
@@ -5699,8 +5755,18 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
     setDropdownValue(country.phoneNumberExtension);
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
+  const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, children: [
-    label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }),
+    label && /* @__PURE__ */ jsx15(
+      Label_default,
+      {
+        text: label,
+        color: labelColor,
+        required: props.required,
+        isError: !!props.errorText,
+        htmlFor: readyId
+      }
+    ),
     /* @__PURE__ */ jsxs10(Div_default.row, { children: [
       /* @__PURE__ */ jsx15(
         Dropdown_default,
@@ -5726,6 +5792,7 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
           value: inputFieldValue,
           onChangeValue: onChangeValueElement,
           ref,
+          id: readyId,
           ...props
         }
       )
@@ -6038,7 +6105,7 @@ InputField2.time = InputFieldComponent.time;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback9, useState as useState7 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback9, useId as useId2, useState as useState7 } from "react";
 import styled9 from "styled-components";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var componentSize = 26;
@@ -6144,9 +6211,11 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
   checked: controlledChecked,
   color,
   required,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
+  const internalId = useId2();
   const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
   const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
   const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -6167,8 +6236,9 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
+  const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs11(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-    label && /* @__PURE__ */ jsx16(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+    label && /* @__PURE__ */ jsx16(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ jsx16(
@@ -6178,6 +6248,7 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
+            id: readyId,
             ...styledComponentStyles,
             ...dataProps,
             ...ariaProps,
@@ -6251,9 +6322,11 @@ var ToggleInput_default = {
     onChange,
     checked: controlledChecked,
     required,
+    id,
     ...props
   }, ref) {
     const theme2 = useTheme();
+    const internalId = useId2();
     const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
     const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
     const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -6268,8 +6341,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__ */ jsxs11(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-      label && /* @__PURE__ */ jsx16(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+      label && /* @__PURE__ */ jsx16(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
       /* @__PURE__ */ jsx16(
         Div_default.row,
         {
@@ -6289,6 +6363,10 @@ var ToggleInput_default = {
               disabled: disabled ?? false,
               isMouseDown,
               onClick: onClickElement,
+              id: readyId,
+              role: "switch",
+              "aria-checked": checked,
+              "aria-disabled": disabled ?? false,
               ...styledComponentStyles,
               ...dataProps,
               ...ariaProps,