react-better-html 1.1.263 → 1.1.265

package/dist/index.d.mts

@@ -1049,24 +1049,14 @@ declare const Tooltip: typeof TooltipComponent & {
 type FoldableProps = {
     isOpen?: boolean;
     defaultOpen?: boolean;
-    title?: string;
-    /** @default "h3" */
-    titleAs?: TextAs;
-    /** @default textPrimary */
-    titleColor?: React.CSSProperties["color"];
-    titleRightElement?: React.ReactNode;
-    description?: string;
-    /** @default textSecondary */
-    descriptionColor?: React.CSSProperties["color"];
-    rightElement?: React.ReactNode;
-    icon?: IconName | AnyOtherString;
-    image?: AssetName | AnyOtherString;
     headerPaddingBlock?: React.CSSProperties["paddingBlock"];
     headerPaddingInline?: React.CSSProperties["paddingInline"];
+    /** @default "right" */
+    arrowPosition?: "left" | "right";
     renderHeader?: (isOpen: boolean, toggleOpen: () => void) => React.ReactNode;
     onOpenChange?: (isOpen: boolean) => void;
     children?: React.ReactNode;
-} & OmitProps<DivProps, "ref">;
+} & OmitProps<PageHeaderProps, "marginBottom"> & OmitProps<DivProps, "ref">;
 type FoldableRef = {
     isOpen: boolean;
     open: () => void;

package/dist/index.d.ts

@@ -1049,24 +1049,14 @@ declare const Tooltip: typeof TooltipComponent & {
 type FoldableProps = {
     isOpen?: boolean;
     defaultOpen?: boolean;
-    title?: string;
-    /** @default "h3" */
-    titleAs?: TextAs;
-    /** @default textPrimary */
-    titleColor?: React.CSSProperties["color"];
-    titleRightElement?: React.ReactNode;
-    description?: string;
-    /** @default textSecondary */
-    descriptionColor?: React.CSSProperties["color"];
-    rightElement?: React.ReactNode;
-    icon?: IconName | AnyOtherString;
-    image?: AssetName | AnyOtherString;
     headerPaddingBlock?: React.CSSProperties["paddingBlock"];
     headerPaddingInline?: React.CSSProperties["paddingInline"];
+    /** @default "right" */
+    arrowPosition?: "left" | "right";
     renderHeader?: (isOpen: boolean, toggleOpen: () => void) => React.ReactNode;
     onOpenChange?: (isOpen: boolean) => void;
     children?: React.ReactNode;
-} & OmitProps<DivProps, "ref">;
+} & OmitProps<PageHeaderProps, "marginBottom"> & OmitProps<DivProps, "ref">;
 type FoldableRef = {
     isOpen: boolean;
     open: () => void;

package/dist/index.js

@@ -7704,17 +7704,27 @@ var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
+  icon,
+  iconColor,
+  iconSize,
+  image,
+  imageUrl,
+  imageSize,
+  imageAzProfileImage,
   title,
   titleAs = "h3",
+  titleFontSize,
   titleColor,
   titleRightElement,
   description,
+  descriptionFontSize,
   descriptionColor,
+  textAlign,
   rightElement,
-  icon,
-  image,
+  lightMode,
   headerPaddingBlock,
   headerPaddingInline,
+  arrowPosition = "right",
   renderHeader,
   onOpenChange,
   children,
@@ -7768,6 +7778,7 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
       isOpen
     };
   }, [open, close, toggleOpen, isOpen]);
+  const arrow = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "chevronDown", transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme2.styles.transition });
   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,
@@ -7781,35 +7792,33 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
-            image && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  Text_default,
-                  {
-                    as: titleAs,
-                    fontWeight: 700,
-                    lineHeight: "20px",
-                    color: titleColor ?? theme2.colors.textPrimary,
-                    children: title
-                  }
-                ),
-                titleRightElement
-              ] }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { color: descriptionColor ?? theme2.colors.textSecondary, children: description })
-            ] })
-          ] }),
-          rightElement,
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            Icon_default,
+          arrowPosition === "left" && arrow,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            PageHeader_default,
             {
-              name: "chevronDown",
-              transform: `rotate(${isOpen ? 180 : 0}deg)`,
-              transition: theme2.styles.transition
+              icon,
+              iconColor,
+              iconSize,
+              image,
+              imageUrl,
+              imageSize,
+              imageAzProfileImage,
+              title,
+              titleAs,
+              titleFontSize,
+              titleColor,
+              titleRightElement,
+              description,
+              descriptionFontSize,
+              descriptionColor,
+              textAlign,
+              rightElement,
+              lightMode,
+              marginBottom: 0
             }
-          )
+          ) }),
+          rightElement,
+          arrowPosition === "right" && arrow
         ]
       }
     ),