react-better-html 1.1.241 → 1.1.243

package/dist/index.d.mts

@@ -87,6 +87,7 @@ declare const Button: typeof ButtonComponent & {
 type InputFieldProps = {
     label?: string;
     labelFontFamily?: React.CSSProperties["fontFamily"];
+    labelFontSize?: React.CSSProperties["fontSize"];
     labelLetterSpacing?: React.CSSProperties["letterSpacing"];
     labelTextTransform?: React.CSSProperties["textTransform"];
     labelColor?: React.CSSProperties["color"];
@@ -285,6 +286,7 @@ type DropdownOption<Value, Data = unknown> = {
 type DropdownProps<Value = unknown, Data = unknown> = {
     label?: string;
     labelFontFamily?: React.CSSProperties["fontFamily"];
+    labelFontSize?: React.CSSProperties["fontSize"];
     labelLetterSpacing?: React.CSSProperties["letterSpacing"];
     labelTextTransform?: React.CSSProperties["textTransform"];
     labelColor?: React.CSSProperties["color"];
@@ -340,20 +342,24 @@ type ToggleInputRef = {};
 type InternalToggleInputProps<Value> = {
     label?: string;
     labelFontFamily?: React.CSSProperties["fontFamily"];
+    labelFontSize?: React.CSSProperties["fontSize"];
     labelLetterSpacing?: React.CSSProperties["letterSpacing"];
     labelTextTransform?: React.CSSProperties["textTransform"];
     labelColor?: React.CSSProperties["color"];
     labelGap?: React.CSSProperties["gap"];
     text?: string;
     textFontFamily?: React.CSSProperties["fontFamily"];
+    textFontSize?: React.CSSProperties["fontSize"];
     textLetterSpacing?: React.CSSProperties["letterSpacing"];
     textTextTransform?: React.CSSProperties["textTransform"];
     textAdvanced?: React.ReactNode;
     errorText?: string;
     infoText?: string;
+    /** @default 26 */
+    size?: number;
     value?: Value;
     onChange?: (checked: boolean, value?: Value) => void;
-} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange" | "size"> & ComponentStyle & ComponentHoverStyle;
 type ToggleInputProps<Value = unknown> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
 type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
 declare const _default$5: {
@@ -411,7 +417,7 @@ declare function Label(labelProps: LabelProps): react_jsx_runtime.JSX.Element;
 declare const _default$3: react.MemoExoticComponent<typeof Label>;
 
 type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
-    [key in Subcomponents]?: ComponentProps;
+    [key in Subcomponents]?: Partial<ComponentProps>;
 };
 type ComponentTagReplacementConfig<Subcomponents extends string> = {
     [key in Subcomponents]?: React.ElementType;

package/dist/index.d.ts

@@ -87,6 +87,7 @@ declare const Button: typeof ButtonComponent & {
 type InputFieldProps = {
     label?: string;
     labelFontFamily?: React.CSSProperties["fontFamily"];
+    labelFontSize?: React.CSSProperties["fontSize"];
     labelLetterSpacing?: React.CSSProperties["letterSpacing"];
     labelTextTransform?: React.CSSProperties["textTransform"];
     labelColor?: React.CSSProperties["color"];
@@ -285,6 +286,7 @@ type DropdownOption<Value, Data = unknown> = {
 type DropdownProps<Value = unknown, Data = unknown> = {
     label?: string;
     labelFontFamily?: React.CSSProperties["fontFamily"];
+    labelFontSize?: React.CSSProperties["fontSize"];
     labelLetterSpacing?: React.CSSProperties["letterSpacing"];
     labelTextTransform?: React.CSSProperties["textTransform"];
     labelColor?: React.CSSProperties["color"];
@@ -340,20 +342,24 @@ type ToggleInputRef = {};
 type InternalToggleInputProps<Value> = {
     label?: string;
     labelFontFamily?: React.CSSProperties["fontFamily"];
+    labelFontSize?: React.CSSProperties["fontSize"];
     labelLetterSpacing?: React.CSSProperties["letterSpacing"];
     labelTextTransform?: React.CSSProperties["textTransform"];
     labelColor?: React.CSSProperties["color"];
     labelGap?: React.CSSProperties["gap"];
     text?: string;
     textFontFamily?: React.CSSProperties["fontFamily"];
+    textFontSize?: React.CSSProperties["fontSize"];
     textLetterSpacing?: React.CSSProperties["letterSpacing"];
     textTextTransform?: React.CSSProperties["textTransform"];
     textAdvanced?: React.ReactNode;
     errorText?: string;
     infoText?: string;
+    /** @default 26 */
+    size?: number;
     value?: Value;
     onChange?: (checked: boolean, value?: Value) => void;
-} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange" | "size"> & ComponentStyle & ComponentHoverStyle;
 type ToggleInputProps<Value = unknown> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
 type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
 declare const _default$5: {
@@ -411,7 +417,7 @@ declare function Label(labelProps: LabelProps): react_jsx_runtime.JSX.Element;
 declare const _default$3: react.MemoExoticComponent<typeof Label>;
 
 type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
-    [key in Subcomponents]?: ComponentProps;
+    [key in Subcomponents]?: Partial<ComponentProps>;
 };
 type ComponentTagReplacementConfig<Subcomponents extends string> = {
     [key in Subcomponents]?: React.ElementType;

package/dist/index.js

@@ -2034,7 +2034,9 @@ var Loader_default = Loader2;
 // src/components/Button.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ButtonElement = import_styled_components6.default.button.withConfig({
-  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "isSmall", "withText", "isLoading"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "isSmall", "withText", "isLoading", "withNoBorder"].includes(
+    prop
+  )
 })`
    display: block;
    position: relative;
@@ -2064,7 +2066,11 @@ var ButtonElement = import_styled_components6.default.button.withConfig({
                 }
 
                 &.secondary:hover {
-                   border-color: ${props.theme.colors.primary};
+                   ${props.withNoBorder ? import_styled_components6.css`
+                           filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                        ` : import_styled_components6.css`
+                           border-color: ${props.theme.colors.primary};
+                        `}
                 }
              ` : ""}
 
@@ -2162,6 +2168,7 @@ var ButtonComponent = function Button(buttonProps) {
       isSmall,
       withText: text !== void 0,
       isLoading: isLoadingElement,
+      withNoBorder: theme2.styles.borderWidth === 0,
       disabled,
       to: href,
       href,
@@ -3632,6 +3639,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -3875,6 +3883,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
     {
       label,
       labelFontFamily,
+      labelFontSize,
       labelLetterSpacing,
       labelTextTransform,
       labelColor,
@@ -4288,7 +4297,17 @@ var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
 var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
 var InputElement = import_styled_components11.default.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "withPrefix", "withSuffix", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => ![
+    "theme",
+    "colorTheme",
+    "withLeftIcon",
+    "withRightIcon",
+    "withPrefix",
+    "withSuffix",
+    "style",
+    "hoverStyle",
+    "withNoBorder"
+  ].includes(prop)
 })`
    position: relative;
    width: 100%;
@@ -4314,7 +4333,11 @@ var InputElement = import_styled_components11.default.input.withConfig({
    }
 
    &:focus {
-      border-color: ${(props) => props.theme.colors.primary};
+      ${(props) => props.withNoBorder ? import_styled_components11.css`
+                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+              ` : import_styled_components11.css`
+                 border-color: ${props.theme.colors.primary};
+              `}
    }
 
    &:disabled {
@@ -4410,7 +4433,7 @@ var InputElement = import_styled_components11.default.input.withConfig({
    }
 `;
 var TextareaElement = import_styled_components11.default.textarea.withConfig({
-  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "withLeftIcon", "withRightIcon", "style", "hoverStyle", "withNoBorder"].includes(prop)
 })`
    width: 100%;
    min-height: 3lh;
@@ -4433,9 +4456,11 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
       color: ${(props) => props.theme.colors.textSecondary}80;
    }
 
-   &:focus {
-      border-color: ${(props) => props.theme.colors.primary};
-   }
+   ${(props) => props.withNoBorder ? import_styled_components11.css`
+              filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+           ` : import_styled_components11.css`
+              border-color: ${props.theme.colors.primary};
+           `}
 
    ${(props) => props.style}
 
@@ -4450,6 +4475,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4515,6 +4541,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -4557,6 +4584,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
             InputElement,
             {
               theme: theme2,
+              colorTheme,
               withLeftIcon: leftIcon !== void 0,
               withRightIcon: rightIcon !== void 0,
               withPrefix: prefix !== void 0,
@@ -4567,6 +4595,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
               onChange: onChangeElement,
               style,
               hoverStyle,
+              withNoBorder: theme2.styles.borderWidth === 0,
               ...restProps,
               ...dataProps,
               ...ariaProps,
@@ -4629,6 +4658,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4650,6 +4680,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
   );
   const theme2 = (0, import_react_better_core19.useTheme)();
   const internalId = (0, import_react21.useId)();
+  const { colorTheme } = (0, import_react_better_core19.useBetterCoreContext)();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
@@ -4667,6 +4698,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -4691,6 +4723,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
         TextareaElement,
         {
           theme: theme2,
+          colorTheme,
           withLeftIcon: leftIcon !== void 0,
           withRightIcon: rightIcon !== void 0,
           required,
@@ -4699,6 +4732,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
           id: readyId,
           style,
           hoverStyle,
+          withNoBorder: theme2.styles.borderWidth === 0,
           ...restProps,
           ...dataProps,
           ...ariaProps,
@@ -4834,6 +4868,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4906,6 +4941,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
       {
         text: readyLabel,
         fontFamily: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelFontFamily ?? labelFontFamily,
+        fontSize: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelFontSize ?? labelFontSize,
         letterSpacing: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelLetterSpacing ?? labelLetterSpacing,
         textTransform: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelTextTransform ?? labelTextTransform,
         color: betterHtmlContextInternal.components.inputField?.style?.phoneNumber?.labelColor ?? labelColor,
@@ -5455,12 +5491,12 @@ var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
 var InputElement2 = import_styled_components12.default.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "size", "withNoBorder"].includes(prop)
 })`
    position: relative;
    appearance: none;
-   width: ${componentSize}px;
-   height: ${componentSize}px;
+   width: ${(props) => props.size ?? componentSize}px;
+   height: ${(props) => props.size ?? componentSize}px;
    background-color: ${(props) => props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
@@ -5485,7 +5521,11 @@ var InputElement2 = import_styled_components12.default.input.withConfig({
    ${(props) => props.style}
 
    &:hover {
-      border-color: ${(props) => props.theme.colors.primary};
+      ${(props) => props.withNoBorder ? import_styled_components12.css`
+                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+              ` : import_styled_components12.css`
+                 border-color: ${props.theme.colors.primary};
+              `}
 
       ${(props) => props.hoverStyle}
    }
@@ -5546,17 +5586,20 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
 var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   label,
   labelFontFamily,
+  labelFontSize,
   labelLetterSpacing,
   labelTextTransform,
   labelColor,
   labelGap,
   text,
   textFontFamily,
+  textFontSize,
   textLetterSpacing,
   textTextTransform,
   textAdvanced,
   errorText,
   infoText,
+  size,
   value,
   onChange,
   checked: controlledChecked,
@@ -5567,6 +5610,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
 }, ref) {
   const theme2 = (0, import_react_better_core20.useTheme)();
   const internalId = (0, import_react22.useId)();
+  const { colorTheme } = (0, import_react_better_core20.useBetterCoreContext)();
   const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
@@ -5592,6 +5636,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -5606,6 +5651,9 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           InputElement2,
           {
             theme: theme2,
+            colorTheme,
+            size,
+            withNoBorder: theme2.styles.borderWidth === 0,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -5651,6 +5699,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
         Text_default,
         {
           fontFamily: textFontFamily,
+          fontSize: textFontSize,
           letterSpacing: textLetterSpacing,
           textTransform: textTextTransform,
           color,
@@ -5707,6 +5756,7 @@ var ToggleInput_default = {
     const {
       label,
       labelFontFamily,
+      labelFontSize,
       labelLetterSpacing,
       labelTextTransform,
       labelColor,
@@ -5744,6 +5794,7 @@ var ToggleInput_default = {
         {
           text: label,
           fontFamily: labelFontFamily,
+          fontSize: labelFontSize,
           letterSpacing: labelLetterSpacing,
           textTransform: labelTextTransform,
           color: labelColor,