react-better-html 1.1.240 → 1.1.242

package/dist/index.d.mts

@@ -87,9 +87,11 @@ 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"];
+    labelGap?: React.CSSProperties["gap"];
     errorText?: string;
     infoText?: string;
     leftIcon?: IconName | AnyOtherString;
@@ -284,9 +286,11 @@ 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"];
+    labelGap?: React.CSSProperties["gap"];
     errorText?: string;
     infoText?: string;
     /** @default false */
@@ -338,19 +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: {
@@ -392,9 +401,13 @@ type LabelProps = {
     text?: string;
     /** @default false */
     required?: boolean;
+    /** @default 16 */
+    requiredSize?: React.CSSProperties["fontSize"];
     /** @default false */
     isError?: boolean;
     fontFamily?: React.CSSProperties["fontFamily"];
+    /** @default 14 */
+    fontSize?: React.CSSProperties["fontSize"];
     letterSpacing?: React.CSSProperties["letterSpacing"];
     textTransform?: React.CSSProperties["textTransform"];
     color?: React.CSSProperties["color"];
@@ -404,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,9 +87,11 @@ 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"];
+    labelGap?: React.CSSProperties["gap"];
     errorText?: string;
     infoText?: string;
     leftIcon?: IconName | AnyOtherString;
@@ -284,9 +286,11 @@ 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"];
+    labelGap?: React.CSSProperties["gap"];
     errorText?: string;
     infoText?: string;
     /** @default false */
@@ -338,19 +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: {
@@ -392,9 +401,13 @@ type LabelProps = {
     text?: string;
     /** @default false */
     required?: boolean;
+    /** @default 16 */
+    requiredSize?: React.CSSProperties["fontSize"];
     /** @default false */
     isError?: boolean;
     fontFamily?: React.CSSProperties["fontFamily"];
+    /** @default 14 */
+    fontSize?: React.CSSProperties["fontSize"];
     letterSpacing?: React.CSSProperties["letterSpacing"];
     textTransform?: React.CSSProperties["textTransform"];
     color?: React.CSSProperties["color"];
@@ -404,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

@@ -2064,7 +2064,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 +2166,7 @@ var ButtonComponent = function Button(buttonProps) {
       isSmall,
       withText: text !== void 0,
       isLoading: isLoadingElement,
+      withNoBorder: theme2.styles.borderWidth === 0,
       disabled,
       to: href,
       href,
@@ -3574,16 +3579,26 @@ var import_react_better_core16 = require("react-better-core");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function Label(labelProps) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
-  const { text, required, isError, fontFamily, letterSpacing, textTransform, color, htmlFor } = useComponentsPropsMerger(betterHtmlContextInternal.components.label?.style?.default, labelProps);
+  const {
+    text,
+    required,
+    requiredSize = 16,
+    isError,
+    fontFamily,
+    fontSize = 14,
+    letterSpacing,
+    textTransform,
+    color,
+    htmlFor
+  } = useComponentsPropsMerger(betterHtmlContextInternal.components.label?.style?.default, labelProps);
   const theme2 = (0, import_react_better_core16.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     Text_default,
     {
       as: "label",
       width: "fit-content",
-      height: 16,
       fontFamily,
-      fontSize: 14,
+      fontSize,
       color: isError ? theme2.colors.error : color ?? theme2.colors.textSecondary,
       letterSpacing,
       textTransform,
@@ -3591,10 +3606,21 @@ function Label(labelProps) {
       "aria-required": required,
       children: [
         text,
-        required && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
-          " ",
-          "*"
-        ] })
+        required && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          Text_default,
+          {
+            as: "span",
+            display: "inline-block",
+            height: fontSize,
+            fontSize: requiredSize,
+            letterSpacing: "normal",
+            color: theme2.colors.error,
+            children: [
+              " ",
+              "*"
+            ]
+          }
+        )
       ]
     }
   );
@@ -3611,9 +3637,11 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
+    labelGap,
     errorText,
     infoText,
     required,
@@ -3853,9 +3881,11 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown(dropdow
     {
       label,
       labelFontFamily,
+      labelFontSize,
       labelLetterSpacing,
       labelTextTransform,
       labelColor,
+      labelGap,
       errorText,
       infoText,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
@@ -4427,9 +4457,11 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
+    labelGap,
     errorText,
     infoText,
     leftIcon,
@@ -4485,12 +4517,13 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...excludeStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: labelGap ?? theme2.styles.gap / 2, ...excludeStyle, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Label_default,
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -4605,9 +4638,11 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
+    labelGap,
     placeholder,
     errorText,
     infoText,
@@ -4636,12 +4671,13 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
     [onChange, onChangeValue]
   );
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { gap: labelGap ?? theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Label_default,
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -4809,6 +4845,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
   const {
     label,
     labelFontFamily,
+    labelFontSize,
     labelLetterSpacing,
     labelTextTransform,
     labelColor,
@@ -4881,6 +4918,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,
@@ -5430,12 +5468,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", "style", "hoverStyle", "size"].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;
@@ -5521,16 +5559,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,
@@ -5560,12 +5602,13 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { gap: theme2.styles.gap, ...excludeStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { gap: labelGap ?? theme2.styles.gap, ...excludeStyle, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Label_default,
       {
         text: label,
         fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
         letterSpacing: labelLetterSpacing,
         textTransform: labelTextTransform,
         color: labelColor,
@@ -5580,6 +5623,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           InputElement2,
           {
             theme: theme2,
+            size,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -5625,6 +5669,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
         Text_default,
         {
           fontFamily: textFontFamily,
+          fontSize: textFontSize,
           letterSpacing: textLetterSpacing,
           textTransform: textTextTransform,
           color,
@@ -5681,6 +5726,7 @@ var ToggleInput_default = {
     const {
       label,
       labelFontFamily,
+      labelFontSize,
       labelLetterSpacing,
       labelTextTransform,
       labelColor,
@@ -5718,6 +5764,7 @@ var ToggleInput_default = {
         {
           text: label,
           fontFamily: labelFontFamily,
+          fontSize: labelFontSize,
           letterSpacing: labelLetterSpacing,
           textTransform: labelTextTransform,
           color: labelColor,