react-better-html 1.1.284 → 1.1.285

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
@@ -212,6 +212,10 @@ type PageHeaderProps = {
212
212
  descriptionFontSize?: React.CSSProperties["fontSize"];
213
213
  /** @default textSecondary */
214
214
  descriptionColor?: React.CSSProperties["color"];
215
+ /** @default theme.styles.space */
216
+ imageGap?: React.CSSProperties["gap"];
217
+ /** @default theme.styles.gap / 2 */
218
+ titleGap?: React.CSSProperties["gap"];
215
219
  textAlign?: React.CSSProperties["textAlign"];
216
220
  rightElement?: React.ReactNode;
217
221
  /** @default false */
@@ -1196,6 +1200,8 @@ type SideMenuPageHolderProps = PageHolderProps & {
1196
1200
  type BurgerButtonProps = {
1197
1201
  /** @default "left" */
1198
1202
  position?: "left" | "center" | "right";
1203
+ /** @default theme.colors.border */
1204
+ color?: React.CSSProperties["color"];
1199
1205
  onClick?: (isOpened: boolean) => void;
1200
1206
  };
1201
1207
  declare const SideMenu: typeof SideMenuComponent & {
package/dist/index.d.ts CHANGED
@@ -212,6 +212,10 @@ type PageHeaderProps = {
212
212
  descriptionFontSize?: React.CSSProperties["fontSize"];
213
213
  /** @default textSecondary */
214
214
  descriptionColor?: React.CSSProperties["color"];
215
+ /** @default theme.styles.space */
216
+ imageGap?: React.CSSProperties["gap"];
217
+ /** @default theme.styles.gap / 2 */
218
+ titleGap?: React.CSSProperties["gap"];
215
219
  textAlign?: React.CSSProperties["textAlign"];
216
220
  rightElement?: React.ReactNode;
217
221
  /** @default false */
@@ -1196,6 +1200,8 @@ type SideMenuPageHolderProps = PageHolderProps & {
1196
1200
  type BurgerButtonProps = {
1197
1201
  /** @default "left" */
1198
1202
  position?: "left" | "center" | "right";
1203
+ /** @default theme.colors.border */
1204
+ color?: React.CSSProperties["color"];
1199
1205
  onClick?: (isOpened: boolean) => void;
1200
1206
  };
1201
1207
  declare const SideMenu: typeof SideMenuComponent & {
package/dist/index.js CHANGED
@@ -1687,6 +1687,8 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
1687
1687
  description,
1688
1688
  descriptionFontSize,
1689
1689
  descriptionColor,
1690
+ imageGap,
1691
+ titleGap,
1690
1692
  textAlign,
1691
1693
  rightElement,
1692
1694
  lightMode,
@@ -1701,7 +1703,7 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
1701
1703
  Div_default.row,
1702
1704
  {
1703
1705
  alignItems: "center",
1704
- gap: theme2.styles.space,
1706
+ gap: imageGap ?? theme2.styles.space,
1705
1707
  marginBottom: marginBottom ?? theme2.styles.space * 2,
1706
1708
  ref,
1707
1709
  children: [
@@ -1722,7 +1724,7 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
1722
1724
  {
1723
1725
  alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
1724
1726
  flex: 1,
1725
- gap: theme2.styles.gap / 2,
1727
+ gap: titleGap ?? theme2.styles.gap / 2,
1726
1728
  children: [
1727
1729
  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1728
1730
  Div_default.row,
@@ -1869,6 +1871,7 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
1869
1871
  titleRightElement,
1870
1872
  description,
1871
1873
  descriptionColor,
1874
+ titleGap,
1872
1875
  textAlign,
1873
1876
  rightElement,
1874
1877
  lightMode,
@@ -1922,6 +1925,7 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
1922
1925
  titleRightElement,
1923
1926
  description,
1924
1927
  descriptionColor,
1928
+ titleGap,
1925
1929
  textAlign,
1926
1930
  rightElement,
1927
1931
  lightMode,
@@ -7941,6 +7945,7 @@ var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
7941
7945
  description,
7942
7946
  descriptionFontSize,
7943
7947
  descriptionColor,
7948
+ titleGap,
7944
7949
  textAlign,
7945
7950
  rightElement,
7946
7951
  lightMode,
@@ -8033,6 +8038,7 @@ var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
8033
8038
  description,
8034
8039
  descriptionFontSize,
8035
8040
  descriptionColor,
8041
+ titleGap,
8036
8042
  textAlign,
8037
8043
  rightElement,
8038
8044
  lightMode,
@@ -8639,7 +8645,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
8639
8645
  }
8640
8646
  );
8641
8647
  };
8642
- SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onClick }) {
8648
+ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", color, onClick }) {
8643
8649
  const theme2 = (0, import_react_better_core29.useTheme)();
8644
8650
  const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
8645
8651
  const [isHovered, setIsHovered] = (0, import_react_better_core29.useBooleanState)();
@@ -8648,6 +8654,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
8648
8654
  onClick?.(!sideMenuIsOpenMobile);
8649
8655
  }, [onClick, sideMenuIsOpenMobile]);
8650
8656
  const width = 2;
8657
+ const backgroundColor = color ?? theme2.colors.border;
8651
8658
  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
8652
8659
  Div_default,
8653
8660
  {
@@ -8669,7 +8676,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
8669
8676
  top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
8670
8677
  left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
8671
8678
  right: position === "right" ? 0 : void 0,
8672
- backgroundColor: theme2.colors.border,
8679
+ backgroundColor,
8673
8680
  borderRadius: 999,
8674
8681
  transform: sideMenuIsOpenMobile ? "rotate(45deg)" : position === "center" ? "translateX(-50%)" : void 0,
8675
8682
  transition: theme2.styles.transition
@@ -8684,7 +8691,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
8684
8691
  top: "50%",
8685
8692
  left: position === "left" ? 0 : position === "center" ? "50%" : "auto",
8686
8693
  right: position === "right" ? 0 : void 0,
8687
- backgroundColor: theme2.colors.border,
8694
+ backgroundColor,
8688
8695
  borderRadius: 999,
8689
8696
  transform: `translateY(-50%)${position === "center" ? " translateX(-50%)" : ""}`,
8690
8697
  opacity: sideMenuIsOpenMobile ? 0 : void 0,
@@ -8700,7 +8707,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
8700
8707
  bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
8701
8708
  left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
8702
8709
  right: position === "right" ? 0 : void 0,
8703
- backgroundColor: theme2.colors.border,
8710
+ backgroundColor,
8704
8711
  borderRadius: 999,
8705
8712
  transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : position === "center" ? "translateX(-50%)" : void 0,
8706
8713
  transition: theme2.styles.transition