react-better-html 1.1.153 → 1.1.155

package/dist/index.mjs

@@ -3084,6 +3084,7 @@ var DivComponent = forwardRef4(function Div({
   as = "div",
   value,
   isTabAccessed,
+  htmlContentTranslate,
   onClickWithValue,
   role,
   onClick,
@@ -3119,6 +3120,7 @@ var DivComponent = forwardRef4(function Div({
     {
       as,
       tabIndex: isTabAccessed && !isMobileDevice ? 0 : void 0,
+      translate: htmlContentTranslate,
       role: role ?? (onClick ? "button" : void 0),
       onClick: onClickElement,
       onKeyDown: onKeyDownElement,
@@ -5944,7 +5946,9 @@ var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
 var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
 var InputElement = styled10.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "withPrefix", "withSuffix", "normalStyle", "hoverStyle"].includes(
+    prop
+  )
 })`
    position: relative;
    width: 100%;
@@ -5955,10 +5959,14 @@ var InputElement = styled10.input.withConfig({
    background: ${(props) => props.theme.colors.backgroundContent};
    border: 1px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius}px;
+   border-top-left-radius: ${(props) => props.withPrefix ? 0 : void 0};
+   border-bottom-left-radius: ${(props) => props.withPrefix ? 0 : void 0};
+   border-top-right-radius: ${(props) => props.withSuffix ? 0 : void 0};
+   border-bottom-right-radius: ${(props) => props.withSuffix ? 0 : void 0};
    outline: none;
-   padding: ${(props) => `${(props.theme.styles.space + props.theme.styles.gap) / 2}px ${props.theme.styles.space + props.theme.styles.gap}px`};
-   padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
-   padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
+   padding: ${(props) => `${(props.theme.styles.space + props.theme.styles.gap) / 2}px ${props.theme.styles.space}px`};
+   padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : props.withPrefix ? `${props.theme.styles.space}px` : void 0};
+   padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : props.withSuffix ? `${props.theme.styles.space}px` : void 0};
    transition: ${(props) => props.theme.styles.transition};
 
    &::placeholder {
@@ -6065,7 +6073,7 @@ var TextareaElement = styled10.textarea.withConfig({
    border: 1px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius}px;
    outline: none;
-   padding: ${(props) => `${(props.theme.styles.gap + props.theme.styles.space) / 2}px ${props.theme.styles.space + props.theme.styles.gap}px`};
+   padding: ${(props) => `${(props.theme.styles.gap + props.theme.styles.space) / 2}px ${props.theme.styles.space}px`};
    padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
    padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
    resize: vertical;
@@ -6094,6 +6102,10 @@ var InputFieldComponent = forwardRef11(function InputField({
   infoText,
   leftIcon,
   rightIcon,
+  prefix,
+  prefixBackgroundColor,
+  suffix,
+  suffixBackgroundColor,
   insideInputFieldComponent,
   withDebounce,
   debounceDelay = 0.5,
@@ -6108,6 +6120,7 @@ var InputFieldComponent = forwardRef11(function InputField({
 }, ref) {
   const theme2 = useTheme();
   const internalId = useId();
+  const { colorTheme } = useBetterHtmlContextInternal();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState(
     props.value?.toString() ?? "",
     debounceDelay
@@ -6143,58 +6156,90 @@ var InputFieldComponent = forwardRef11(function InputField({
   const readyId = id ?? internalId;
   return /* @__PURE__ */ jsxs12(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ jsx17(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs12(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
-      leftIcon && /* @__PURE__ */ jsx17(
-        Icon_default,
-        {
-          name: leftIcon,
-          position: "absolute",
-          top: (props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 46) / 2,
-          left: theme2.styles.space + 1,
-          transform: "translateY(-50%)",
-          pointerEvents: "none",
-          zIndex: leftIconZIndex
-        }
-      ),
-      /* @__PURE__ */ jsx17(
-        InputElement,
+    /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "stretch", width: "100%", children: [
+      prefix && /* @__PURE__ */ jsx17(
+        Div_default.row,
         {
-          theme: theme2,
-          withLeftIcon: leftIcon !== void 0,
-          withRightIcon: rightIcon !== void 0,
-          required,
-          placeholder: placeholder ?? label,
-          id: readyId,
-          onChange: onChangeElement,
-          ...styledComponentStylesWithoutExcluded,
-          ...dataProps,
-          ...ariaProps,
-          ...restProps,
-          ref
+          alignItems: "center",
+          justifyContent: "center",
+          border: `1px solid ${theme2.colors.border}`,
+          borderRight: "none",
+          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          paddingInline: theme2.styles.space,
+          children: prefix
         }
       ),
-      rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx17(
-        Button_default.icon,
-        {
-          icon: rightIcon,
-          position: "absolute",
-          top: 46 / 2,
-          right: theme2.styles.space + 1 - theme2.styles.space / 2,
-          transform: "translateY(-50%)",
-          onClick: onClickRightIcon
-        }
-      ) : /* @__PURE__ */ jsx17(
-        Icon_default,
+      /* @__PURE__ */ jsxs12(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
+        leftIcon && /* @__PURE__ */ jsx17(
+          Icon_default,
+          {
+            name: leftIcon,
+            position: "absolute",
+            top: (props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 46) / 2,
+            left: theme2.styles.space + 1,
+            transform: "translateY(-50%)",
+            pointerEvents: "none",
+            zIndex: leftIconZIndex
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          InputElement,
+          {
+            theme: theme2,
+            withLeftIcon: leftIcon !== void 0,
+            withRightIcon: rightIcon !== void 0,
+            withPrefix: prefix !== void 0,
+            withSuffix: suffix !== void 0,
+            required,
+            placeholder: placeholder ?? label,
+            id: readyId,
+            onChange: onChangeElement,
+            ...styledComponentStylesWithoutExcluded,
+            ...dataProps,
+            ...ariaProps,
+            ...restProps,
+            ref
+          }
+        ),
+        rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx17(
+          Button_default.icon,
+          {
+            icon: rightIcon,
+            position: "absolute",
+            top: 46 / 2,
+            right: theme2.styles.space + 1 - theme2.styles.space / 2,
+            transform: "translateY(-50%)",
+            onClick: onClickRightIcon
+          }
+        ) : /* @__PURE__ */ jsx17(
+          Icon_default,
+          {
+            name: rightIcon,
+            position: "absolute",
+            top: 46 / 2,
+            right: theme2.styles.space + 1,
+            transform: "translateY(-50%)",
+            pointerEvents: "none"
+          }
+        ) : void 0,
+        insideInputFieldComponent
+      ] }),
+      suffix && /* @__PURE__ */ jsx17(
+        Div_default.row,
         {
-          name: rightIcon,
-          position: "absolute",
-          top: 46 / 2,
-          right: theme2.styles.space + 1,
-          transform: "translateY(-50%)",
-          pointerEvents: "none"
+          alignItems: "center",
+          justifyContent: "center",
+          border: `1px solid ${theme2.colors.border}`,
+          borderLeft: "none",
+          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
+          borderTopRightRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
+          paddingInline: theme2.styles.space,
+          children: suffix
         }
-      ) : void 0,
-      insideInputFieldComponent
+      )
     ] }),
     (errorText || infoText) && /* @__PURE__ */ jsx17(
       Text_default,