react-better-html 1.1.289 → 1.1.291

package/dist/index.d.mts

@@ -223,6 +223,8 @@ type PageHeaderProps = {
     rightElement?: React.ReactNode;
     /** @default false */
     lightMode?: boolean;
+    width?: React.CSSProperties["width"];
+    flex?: React.CSSProperties["flex"];
 } & Pick<ComponentMarginProps, "marginBottom">;
 type PageHeaderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
@@ -392,6 +394,10 @@ type InternalToggleInputProps<Value> = {
     errorText?: string;
     infoText?: string;
     infoTextColor?: React.CSSProperties["color"];
+    inactiveColor?: React.CSSProperties["color"];
+    activeColor?: React.CSSProperties["color"];
+    inactiveBackgroundColor?: React.CSSProperties["backgroundColor"];
+    activeBackgroundColor?: React.CSSProperties["backgroundColor"];
     /** @default 26 */
     size?: number;
     value?: Value;

package/dist/index.d.ts

@@ -223,6 +223,8 @@ type PageHeaderProps = {
     rightElement?: React.ReactNode;
     /** @default false */
     lightMode?: boolean;
+    width?: React.CSSProperties["width"];
+    flex?: React.CSSProperties["flex"];
 } & Pick<ComponentMarginProps, "marginBottom">;
 type PageHeaderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHeaderProps>): React.ReactElement;
@@ -392,6 +394,10 @@ type InternalToggleInputProps<Value> = {
     errorText?: string;
     infoText?: string;
     infoTextColor?: React.CSSProperties["color"];
+    inactiveColor?: React.CSSProperties["color"];
+    activeColor?: React.CSSProperties["color"];
+    inactiveBackgroundColor?: React.CSSProperties["backgroundColor"];
+    activeBackgroundColor?: React.CSSProperties["backgroundColor"];
     /** @default 26 */
     size?: number;
     value?: Value;

package/dist/index.js

@@ -1693,6 +1693,8 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
   textAlign,
   rightElement,
   lightMode,
+  width,
+  flex,
   marginBottom
 }, ref) {
   const theme2 = (0, import_react_better_core6.useTheme)();
@@ -1703,6 +1705,8 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Div_default.row,
     {
+      width,
+      flex,
       alignItems: "center",
       gap: imageGap ?? theme2.styles.space,
       marginBottom: marginBottom ?? theme2.styles.space * 2,
@@ -2223,6 +2227,7 @@ var ButtonComponent = function Button({
     value,
     download,
     target,
+    gap,
     icon,
     iconPosition = "left",
     iconColor,
@@ -2314,7 +2319,7 @@ var ButtonComponent = function Button({
             height: href ? "100%" : void 0,
             alignItems: "center",
             justifyContent: "center",
-            gap: 10,
+            gap: gap ?? (theme2.styles.gap + theme2.styles.space) / 2,
             pointerEvents: "none",
             opacity: isLoadingElement ? 0 : 1,
             transition: theme2.styles.transition,
@@ -2399,13 +2404,16 @@ ButtonComponent.text = function Text3(buttonProps) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ButtonComponent,
     {
+      fontWeight: 700,
       color: readyColor,
       colorHover: (0, import_react_better_core9.lightenColor)(readyColor, 0.3),
       backgroundColor: "transparent",
       backgroundColorHover: "transparent",
       borderRadius: 0,
       loaderSize: 12,
-      isSmall: true,
+      gap: theme2.styles.gap,
+      paddingInline: theme2.styles.gap,
+      paddingBlock: theme2.styles.gap / 2,
       ...fromSubcomponentProps,
       ...props
     }
@@ -3905,6 +3913,8 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
     withMultiselect,
     id,
     textAlign,
+    backgroundColor,
+    borderRadius,
     ...props
   } = useComponentsPropsMerger(
     betterHtmlContextInternal.components.dropdown?.style?.default,
@@ -4130,6 +4140,8 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
       infoTextColor,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
       textAlign,
+      backgroundColor,
+      borderRadius,
       name,
       disabled,
       readOnly: !withSearch,
@@ -5842,13 +5854,24 @@ var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
 var InputElement2 = import_styled_components12.default.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "size", "withNoBorder"].includes(prop)
+  shouldForwardProp: (prop) => ![
+    "theme",
+    "colorTheme",
+    "style",
+    "hoverStyle",
+    "size",
+    "withNoBorder",
+    "inactiveColor",
+    "activeColor",
+    "inactiveBackgroundColor",
+    "activeBackgroundColor"
+  ].includes(prop)
 })`
    position: relative;
    appearance: none;
    width: ${(props) => props.size ?? componentSize}px;
    height: ${(props) => props.size ?? componentSize}px;
-   background-color: ${(props) => props.theme.colors.backgroundContent};
+   background-color: ${(props) => props.inactiveBackgroundColor ?? 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;
    cursor: pointer;
@@ -5860,8 +5883,8 @@ var InputElement2 = import_styled_components12.default.input.withConfig({
    }
 
    &:checked {
-      background-color: ${(props) => props.theme.colors.primary};
-      border-color: ${(props) => props.theme.colors.primary};
+      background-color: ${(props) => props.activeBackgroundColor ?? props.theme.colors.primary};
+      border-color: ${(props) => props.activeBackgroundColor ?? props.theme.colors.primary};
    }
 
    &:disabled {
@@ -5882,7 +5905,18 @@ var InputElement2 = import_styled_components12.default.input.withConfig({
    }
 `;
 var SwitchElement = import_styled_components12.default.div.withConfig({
-  shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => ![
+    "theme",
+    "checked",
+    "disabled",
+    "isMouseDown",
+    "style",
+    "hoverStyle",
+    "activeColor",
+    "inactiveColor",
+    "inactiveBackgroundColor",
+    "activeBackgroundColor"
+  ].includes(prop)
 })`
    --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
    --ball-size: ${componentSize - switchComponentBallGap * 2}px;
@@ -5890,7 +5924,7 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
    position: relative;
    width: var(--width);
    height: ${componentSize}px;
-   background-color: ${(props) => props.checked ? props.theme.colors.primary : props.theme.colors.border};
+   background-color: ${(props) => props.checked ? props.activeBackgroundColor ?? props.theme.colors.primary : props.inactiveBackgroundColor ?? props.theme.colors.border};
    border-radius: 999px;
    cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
    opacity: ${(props) => props.disabled ? 0.5 : 1};
@@ -5901,7 +5935,7 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
       position: absolute;
       width: ${(props) => componentSize - switchComponentBallGap * 2 + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
       height: ${componentSize - switchComponentBallGap * 2}px;
-      background-color: ${(props) => props.theme.colors.base};
+      background-color: ${(props) => props.checked ? props.activeColor ?? props.theme.colors.base : props.inactiveColor ?? props.theme.colors.base};
       border-radius: 999px;
       top: ${switchComponentBallGap}px;
       left: ${switchComponentBallGap}px;
@@ -5917,7 +5951,7 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
          position: absolute;
          width: ${(props) => componentSize - switchComponentBallGap * 2 + (props.isMouseDown ? switchComponentMouseDownDifference : 0)}px;
          height: ${componentSize - switchComponentBallGap * 2}px;
-         background-color: ${(props) => props.checked ? props.theme.colors.primary : "transparent"};
+         background-color: ${(props) => props.checked ? props.activeBackgroundColor ?? props.theme.colors.primary : "transparent"};
          border-radius: 999px;
          top: ${switchComponentBallGap}px;
          left: ${switchComponentBallGap}px;
@@ -5951,6 +5985,10 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
   errorText,
   infoText,
   infoTextColor,
+  inactiveColor,
+  activeColor,
+  inactiveBackgroundColor,
+  activeBackgroundColor,
   size = componentSize,
   value,
   onChange,
@@ -6006,6 +6044,10 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
             colorTheme,
             size,
             withNoBorder: theme2.styles.borderWidth === 0,
+            inactiveColor,
+            activeColor,
+            inactiveBackgroundColor,
+            activeBackgroundColor,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -6024,7 +6066,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
             position: "absolute",
             top: "50%",
             left: "50%",
-            color: theme2.colors.base,
+            color: activeColor ?? theme2.colors.base,
             size: size / 1.8,
             transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
             opacity: checked ? 1 : 0,
@@ -6039,7 +6081,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
             height: size / 2,
             top: "50%",
             left: "50%",
-            backgroundColor: theme2.colors.base,
+            backgroundColor: activeColor ?? theme2.colors.base,
             borderRadius: 999,
             transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
             opacity: checked ? 1 : 0,