react-better-html 1.1.81 → 1.1.82

package/dist/index.d.mts

@@ -649,6 +649,7 @@ type TabsContentProps = {
     tab: string;
     tabWithDot?: boolean;
     tabsGroupName?: string;
+    isInitialTab?: boolean;
     children?: React.ReactNode;
 };
 declare const Tabs: typeof TabsComponent & {
@@ -662,6 +663,7 @@ type FoldableProps = {
     description?: string;
     icon?: IconName | AnyOtherString;
     image?: AssetName | AnyOtherString;
+    headerPaddingBlock?: React.CSSProperties["paddingBlock"];
     headerPaddingInline?: React.CSSProperties["paddingInline"];
     renderHeader?: (isOpen: boolean, toggleOpen: () => void) => React.ReactNode;
     onOpenChange?: (isOpen: boolean) => void;

package/dist/index.d.ts

@@ -649,6 +649,7 @@ type TabsContentProps = {
     tab: string;
     tabWithDot?: boolean;
     tabsGroupName?: string;
+    isInitialTab?: boolean;
     children?: React.ReactNode;
 };
 declare const Tabs: typeof TabsComponent & {
@@ -662,6 +663,7 @@ type FoldableProps = {
     description?: string;
     icon?: IconName | AnyOtherString;
     image?: AssetName | AnyOtherString;
+    headerPaddingBlock?: React.CSSProperties["paddingBlock"];
     headerPaddingInline?: React.CSSProperties["paddingInline"];
     renderHeader?: (isOpen: boolean, toggleOpen: () => void) => React.ReactNode;
     onOpenChange?: (isOpen: boolean) => void;

package/dist/index.js

@@ -6753,7 +6753,7 @@ var TabsComponent = function Tabs({
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children })
   ] });
 };
-TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, children }) {
+TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
   const thisTabGroupData = (0, import_react24.useMemo)(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
@@ -6768,7 +6768,7 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, child
       );
     }
   }, [tabWithDot]);
-  return thisTabGroupData?.selectedTab === tab ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children }) : void 0;
+  return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children }) : void 0;
 };
 var Tabs2 = (0, import_react24.memo)(TabsComponent);
 Tabs2.content = TabsComponent.content;
@@ -6786,6 +6786,7 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
   description,
   icon,
   image,
+  headerPaddingBlock,
   headerPaddingInline,
   renderHeader,
   onOpenChange,
@@ -6832,7 +6833,7 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
         width: "100%",
         alignItems: "center",
         gap: theme2.styles.gap,
-        paddingBlock: theme2.styles.gap,
+        paddingBlock: headerPaddingBlock ?? theme2.styles.gap,
         paddingInline: headerPaddingInline,
         cursor: "pointer",
         onClick: toggleOpen,
@@ -6842,7 +6843,7 @@ var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
             icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
             /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { as: "h3", fontWeight: 700, children: title }),
+              title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
               description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })
           ] }),
@@ -6880,6 +6881,7 @@ FoldableComponent.box = (0, import_react25.forwardRef)(function Box3({ ...props
       backgroundColor: theme2.colors.backgroundContent,
       border: `1px solid ${theme2.colors.border}`,
       borderRadius: theme2.styles.borderRadius,
+      headerPaddingBlock: (theme2.styles.gap + theme2.styles.space) / 2,
       headerPaddingInline: theme2.styles.space,
       ...props,
       ref