react-better-html 1.1.39 → 1.1.41

package/dist/components/FormRow.d.ts

@@ -2,6 +2,7 @@ import { IconName } from "../types/icon";
 import { AnyOtherString } from "../types/app";
 import { ComponentMarginProps, ComponentPropWithRef } from "../types/components";
 type FormRowProps = {
+    oneItemOnly?: boolean;
     gap?: React.CSSProperties["gap"];
     children?: React.ReactNode;
 } & ComponentMarginProps;

package/dist/components/FormRow.js

@@ -10,12 +10,12 @@ const Div_1 = __importDefault(require("./Div"));
 const Icon_1 = __importDefault(require("./Icon"));
 const Text_1 = __importDefault(require("./Text"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const FormRowComponent = (0, react_1.forwardRef)(function FormRow({ gap, children, ...props }, ref) {
+const FormRowComponent = (0, react_1.forwardRef)(function FormRow({ oneItemOnly, gap, children, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const mediaQuery = (0, hooks_1.useMediaQuery)();
     const breakingPoint = mediaQuery.size900;
     const readyGap = breakingPoint ? theme.styles.gap : theme.styles.space * 2;
-    return ((0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref: ref, children: children }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref: ref, children: [children, oneItemOnly && (0, jsx_runtime_1.jsx)(Div_1.default, { width: "100%" })] }));
 });
 FormRowComponent.withTitle = (0, react_1.forwardRef)(function WithTitle({ icon, title, description, children, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/components/PageHeader.d.ts

@@ -6,11 +6,12 @@ type PageHeaderProps = {
     imageSize?: number;
     title?: string;
     titleAs?: TextAs;
+    titleRightElement?: React.ReactNode;
     description?: string;
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
     lightMode?: boolean;
 } & Pick<ComponentMarginProps, "marginBottom">;
-declare function PageHeader({ imageUrl, imageSize, title, titleAs, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof PageHeader>;
 export default _default;

package/dist/components/PageHeader.js

@@ -10,9 +10,9 @@ const Div_1 = __importDefault(require("./Div"));
 const Text_1 = __importDefault(require("./Text"));
 const Image_1 = __importDefault(require("./Image"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-function PageHeader({ imageUrl, imageSize = 60, title, titleAs, description, textAlign, rightElement, lightMode, marginBottom, }) {
+function PageHeader({ imageUrl, imageSize = 60, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const mediaQuery = (0, hooks_1.useMediaQuery)();
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description })] }), rightElement] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description })] }), rightElement] }));
 }
 exports.default = (0, react_1.memo)(PageHeader);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.39",
+   "version": "1.1.41",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [