react-better-html 1.1.154 → 1.1.155

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -388,7 +388,9 @@ type InputFieldProps = {
388
388
  leftIcon?: IconName | AnyOtherString;
389
389
  rightIcon?: IconName | AnyOtherString;
390
390
  prefix?: React.ReactNode;
391
+ prefixBackgroundColor?: string;
391
392
  suffix?: React.ReactNode;
393
+ suffixBackgroundColor?: string;
392
394
  insideInputFieldComponent?: React.ReactNode;
393
395
  /** @default false */
394
396
  withDebounce?: boolean;
package/dist/index.d.ts CHANGED
@@ -388,7 +388,9 @@ type InputFieldProps = {
388
388
  leftIcon?: IconName | AnyOtherString;
389
389
  rightIcon?: IconName | AnyOtherString;
390
390
  prefix?: React.ReactNode;
391
+ prefixBackgroundColor?: string;
391
392
  suffix?: React.ReactNode;
393
+ suffixBackgroundColor?: string;
392
394
  insideInputFieldComponent?: React.ReactNode;
393
395
  /** @default false */
394
396
  withDebounce?: boolean;
package/dist/index.js CHANGED
@@ -6189,7 +6189,9 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
6189
6189
  leftIcon,
6190
6190
  rightIcon,
6191
6191
  prefix,
6192
+ prefixBackgroundColor,
6192
6193
  suffix,
6194
+ suffixBackgroundColor,
6193
6195
  insideInputFieldComponent,
6194
6196
  withDebounce,
6195
6197
  debounceDelay = 0.5,
@@ -6204,6 +6206,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
6204
6206
  }, ref) {
6205
6207
  const theme2 = useTheme();
6206
6208
  const internalId = (0, import_react20.useId)();
6209
+ const { colorTheme } = useBetterHtmlContextInternal();
6207
6210
  const [_, debouncedValue, setDebouncedValue] = useDebounceState(
6208
6211
  props.value?.toString() ?? "",
6209
6212
  debounceDelay
@@ -6247,7 +6250,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
6247
6250
  justifyContent: "center",
6248
6251
  border: `1px solid ${theme2.colors.border}`,
6249
6252
  borderRight: "none",
6250
- backgroundColor: lightenColor(theme2.colors.border, 0.8),
6253
+ backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
6251
6254
  borderTopLeftRadius: theme2.styles.borderRadius,
6252
6255
  borderBottomLeftRadius: theme2.styles.borderRadius,
6253
6256
  paddingInline: theme2.styles.space,
@@ -6316,7 +6319,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
6316
6319
  justifyContent: "center",
6317
6320
  border: `1px solid ${theme2.colors.border}`,
6318
6321
  borderLeft: "none",
6319
- backgroundColor: lightenColor(theme2.colors.border, 0.8),
6322
+ backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
6320
6323
  borderTopRightRadius: theme2.styles.borderRadius,
6321
6324
  borderBottomRightRadius: theme2.styles.borderRadius,
6322
6325
  paddingInline: theme2.styles.space,