react-better-html 1.1.219 → 1.1.221

package/dist/index.d.mts

@@ -348,6 +348,8 @@ type DivComponentType = {
     grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
     box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value> & OmitProps<PageHeaderProps, "marginBottom"> & {
         headerBackgroundColor?: string;
+        /** @default theme.colors.primary */
+        activeColor?: string;
         isActive?: boolean;
     }>) => React.ReactElement;
 };
@@ -368,7 +370,7 @@ type LoaderProps = {
     width?: number;
     /** @default false */
     disabled?: boolean;
-} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName" | "transform" | "clipPath">;
+} & OmitProps<DivProps, "children" | "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName" | "transform" | "clipPath">;
 type LoaderComponentType = {
     (props: LoaderProps): React.ReactElement;
     box: (props: OmitProps<LoaderProps, "size"> & {
@@ -982,8 +984,8 @@ type FoldableRef = {
     toggle: () => void;
 };
 type FoldableComponentType = {
-    (props: ComponentPropWithRef<HTMLDivElement, FoldableProps>): React.ReactElement;
-    box: (props: ComponentPropWithRef<HTMLDivElement, FoldableProps>) => React.ReactElement;
+    (props: ComponentPropWithRef<FoldableRef, FoldableProps>): React.ReactElement;
+    box: (props: ComponentPropWithRef<FoldableRef, FoldableProps>) => React.ReactElement;
 };
 declare const FoldableComponent: FoldableComponentType;
 declare const Foldable: typeof FoldableComponent & {

package/dist/index.d.ts

@@ -348,6 +348,8 @@ type DivComponentType = {
     grid: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display">>) => React.ReactElement;
     box: <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value> & OmitProps<PageHeaderProps, "marginBottom"> & {
         headerBackgroundColor?: string;
+        /** @default theme.colors.primary */
+        activeColor?: string;
         isActive?: boolean;
     }>) => React.ReactElement;
 };
@@ -368,7 +370,7 @@ type LoaderProps = {
     width?: number;
     /** @default false */
     disabled?: boolean;
-} & OmitProps<DivProps, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName" | "transform" | "clipPath">;
+} & OmitProps<DivProps, "children" | "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName" | "transform" | "clipPath">;
 type LoaderComponentType = {
     (props: LoaderProps): React.ReactElement;
     box: (props: OmitProps<LoaderProps, "size"> & {
@@ -982,8 +984,8 @@ type FoldableRef = {
     toggle: () => void;
 };
 type FoldableComponentType = {
-    (props: ComponentPropWithRef<HTMLDivElement, FoldableProps>): React.ReactElement;
-    box: (props: ComponentPropWithRef<HTMLDivElement, FoldableProps>) => React.ReactElement;
+    (props: ComponentPropWithRef<FoldableRef, FoldableProps>): React.ReactElement;
+    box: (props: ComponentPropWithRef<FoldableRef, FoldableProps>) => React.ReactElement;
 };
 declare const FoldableComponent: FoldableComponentType;
 declare const Foldable: typeof FoldableComponent & {

package/dist/index.js

@@ -1777,20 +1777,22 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
   rightElement,
   lightMode,
   headerBackgroundColor,
+  activeColor,
   isActive,
   children,
   ...props
 }, ref) {
   const theme2 = (0, import_react_better_core7.useTheme)();
   const withClick = props.onClick || props.onClickWithValue;
+  const readyActiveColor = activeColor ?? theme2.colors.primary;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     DivComponent,
     {
       color: isActive ? theme2.colors.base : void 0,
-      backgroundColor: isActive ? theme2.colors.primary : theme2.colors.backgroundContent,
-      border: `1px solid ${isActive ? theme2.colors.primary : theme2.colors.border}`,
+      backgroundColor: isActive ? readyActiveColor : theme2.colors.backgroundContent,
+      border: `1px solid ${isActive ? readyActiveColor : theme2.colors.border}`,
       borderRadius: theme2.styles.borderRadius,
-      borderColorHover: withClick && !isActive ? theme2.colors.primary : void 0,
+      borderColorHover: withClick && !isActive ? readyActiveColor : void 0,
       filterHover: withClick && isActive ? "brightness(0.9)" : void 0,
       cursor: withClick ? "pointer" : void 0,
       paddingBlock: title ? theme2.styles.space : theme2.styles.gap,
@@ -7142,18 +7144,14 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
       observer.disconnect();
     };
   }, [isOpen]);
-  (0, import_react30.useImperativeHandle)(
-    ref,
-    () => {
-      return {
-        open,
-        close,
-        toggle: toggleOpen,
-        isOpen
-      };
-    },
-    [open, close, toggleOpen, isOpen]
-  );
+  (0, import_react30.useImperativeHandle)(ref, () => {
+    return {
+      open,
+      close,
+      toggle: toggleOpen,
+      isOpen
+    };
+  }, [open, close, toggleOpen, isOpen]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", ...props, children: [
     renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       Div_default.row,