react-better-html 1.1.89 → 1.1.91

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();
@@ -2517,8 +2543,22 @@ var Image = (0, import_react8.forwardRef)(function Image2({ name, src, ...props
     }
   );
 });
-Image.profileImage = (0, import_react8.forwardRef)(function ProfileImage({ size = 40, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Image, { width: size, height: size, borderRadius: "50%", objectFit: "cover", ref, ...props });
+Image.profileImage = (0, import_react8.forwardRef)(function ProfileImage({ size = 40, letters, backgroundColor, ...props }, ref) {
+  const theme2 = useTheme();
+  return letters ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Div_default.row,
+    {
+      width: size,
+      height: size,
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      borderRadius: 999,
+      alignItems: "center",
+      justifyContent: "center",
+      ref,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Image, { width: size, height: size, borderRadius: 999, objectFit: "cover", ref, ...props });
 });
 var MemoizedImage = (0, import_react8.memo)(Image);
 MemoizedImage.profileImage = Image.profileImage;
@@ -4879,7 +4919,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 +4928,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 +4951,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   errorText,
   infoText,
   required,
+  name,
   disabled,
   options,
   value: controlledValue,
@@ -4925,6 +4968,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   onChange,
   onChangeSearch,
   renderOption,
+  id,
   ...props
 }, ref) {
   const theme2 = useTheme();
@@ -5068,9 +5112,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 +5218,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 +5551,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 +5588,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 +5612,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 +5667,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 +5683,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 +5707,7 @@ InputFieldComponent.multiline = (0, import_react18.forwardRef)(function Multilin
           required,
           placeholder: placeholder ?? label,
           onChange: onChangeElement,
+          id: readyId,
           ...styledComponentStyles,
           ...dataProps,
           ...ariaProps,
@@ -5729,8 +5784,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 +5834,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 +5871,7 @@ InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneN
           value: inputFieldValue,
           onChangeValue: onChangeValueElement,
           ref,
+          id: readyId,
           ...props
         }
       )
@@ -6223,9 +6290,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 +6315,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 +6327,7 @@ var ToggleInputComponent = (0, import_react19.forwardRef)(function ToggleInput({
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
+            id: readyId,
             ...styledComponentStyles,
             ...dataProps,
             ...ariaProps,
@@ -6330,9 +6401,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 +6420,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 +6442,10 @@ var ToggleInput_default = {
               disabled: disabled ?? false,
               isMouseDown,
               onClick: onClickElement,
+              id: readyId,
+              role: "switch",
+              "aria-checked": checked,
+              "aria-disabled": disabled ?? false,
               ...styledComponentStyles,
               ...dataProps,
               ...ariaProps,