react-better-html 1.1.38 → 1.1.39

package/dist/components/FormRow.d.ts

@@ -0,0 +1,20 @@
+import { IconName } from "../types/icon";
+import { AnyOtherString } from "../types/app";
+import { ComponentMarginProps, ComponentPropWithRef } from "../types/components";
+type FormRowProps = {
+    gap?: React.CSSProperties["gap"];
+    children?: React.ReactNode;
+} & ComponentMarginProps;
+type FormRowComponentType = {
+    (props: ComponentPropWithRef<HTMLDivElement, FormRowProps>): React.ReactElement;
+    withTitle: (props: ComponentPropWithRef<HTMLDivElement, FormRowProps & {
+        icon?: IconName | AnyOtherString;
+        title?: string;
+        description?: string;
+    }>) => React.ReactElement;
+};
+declare const FormRowComponent: FormRowComponentType;
+declare const FormRow: typeof FormRowComponent & {
+    withTitle: typeof FormRowComponent.withTitle;
+};
+export default FormRow;

package/dist/components/FormRow.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../utils/hooks");
+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 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 }));
+});
+FormRowComponent.withTitle = (0, react_1.forwardRef)(function WithTitle({ icon, title, description, children, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(FormRowComponent, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "100%", alignItems: "center", gap: theme.styles.space, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }), (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: "h3", children: title }), description && (0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: description })] })] }), (0, jsx_runtime_1.jsx)(Div_1.default, { width: "100%", children: children })] }));
+});
+const FormRow = (0, react_1.memo)(FormRowComponent);
+FormRow.withTitle = FormRowComponent.withTitle;
+exports.default = FormRow;

package/dist/components/Modal.js

@@ -90,11 +90,31 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
 });
 ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinue })] })] }));
+    const modalRef = (0, react_1.useRef)(null);
+    const onCancelElement = (0, react_1.useCallback)(() => {
+        onCancel?.();
+        modalRef.current?.close();
+    }, [onCancel]);
+    const onContinueElement = (0, react_1.useCallback)(() => {
+        onContinue?.();
+        modalRef.current?.close();
+    }, [onContinue]);
+    (0, react_1.useImperativeHandle)(ref, () => modalRef.current, []);
+    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancelElement }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinueElement })] })] }));
 });
 ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: "Delete", loaderName: deleteButtonLoaderName, onClick: onDelete })] })] }));
+    const modalRef = (0, react_1.useRef)(null);
+    const onCancelElement = (0, react_1.useCallback)(() => {
+        onCancel?.();
+        modalRef.current?.close();
+    }, [onCancel]);
+    const onDeleteElement = (0, react_1.useCallback)(() => {
+        onDelete?.();
+        modalRef.current?.close();
+    }, [onDelete]);
+    (0, react_1.useImperativeHandle)(ref, () => modalRef.current, []);
+    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancelElement }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: "Delete", loaderName: deleteButtonLoaderName, onClick: onDeleteElement })] })] }));
 });
 const Modal = (0, react_1.memo)(ModalComponent);
 Modal.confirmation = ModalComponent.confirmation;

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ComponentMarginProps } from "../types/components";
+import { TextAs } from "./Text";
+type PageHeaderProps = {
+    imageUrl?: string;
+    imageSize?: number;
+    title?: string;
+    titleAs?: TextAs;
+    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 const _default: React.MemoExoticComponent<typeof PageHeader>;
+export default _default;

package/dist/components/PageHeader.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../utils/hooks");
+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, }) {
+    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] }));
+}
+exports.default = (0, react_1.memo)(PageHeader);

package/dist/components/Text.d.ts

@@ -1,8 +1,9 @@
 import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { OmitProps } from "../types/app";
+export type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
 export type TextProps = {
     /** @default "p" */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
+    as?: TextAs;
 } & OmitProps<React.ComponentProps<"p">, "style"> & ComponentStyle & ComponentHoverStyle;
 type TextComponentType = {
     (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>): React.ReactElement;

package/dist/index.d.ts

@@ -7,12 +7,14 @@ import Button from "./components/Button";
 import Divider from "./components/Divider";
 import Modal, { type ModalRef } from "./components/Modal";
 import PageHolder from "./components/PageHolder";
+import PageHeader from "./components/PageHeader";
 import Chip from "./components/Chip";
 import InputField from "./components/InputField";
 import Dropdown, { type DropdownOption } from "./components/Dropdown";
 import ToggleInput from "./components/ToggleInput";
 import Form from "./components/Form";
 import Label from "./components/Label";
+import FormRow from "./components/FormRow";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
 import { usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
 import { generateRandomString, getBrowser, formatPhoneNumber } from "./utils/functions";
@@ -25,4 +27,4 @@ import { type PluginName, type BetterHtmlPlugin } from "./types/plugin";
 import { type Color, type ColorName, type ColorTheme, type Colors, type Styles, type Theme, type ThemeConfig } from "./types/theme";
 import { isMobileDevice } from "./constants";
 export * from "./plugins";
-export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };
+export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, PageHeader, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, FormRow, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };

package/dist/index.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileDevice = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
+exports.isMobileDevice = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.FormRow = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHeader = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
 const Div_1 = __importDefault(require("./components/Div"));
 exports.Div = Div_1.default;
 const Text_1 = __importDefault(require("./components/Text"));
@@ -58,6 +58,8 @@ const Modal_1 = __importDefault(require("./components/Modal"));
 exports.Modal = Modal_1.default;
 const PageHolder_1 = __importDefault(require("./components/PageHolder"));
 exports.PageHolder = PageHolder_1.default;
+const PageHeader_1 = __importDefault(require("./components/PageHeader"));
+exports.PageHeader = PageHeader_1.default;
 const Chip_1 = __importDefault(require("./components/Chip"));
 exports.Chip = Chip_1.default;
 const InputField_1 = __importDefault(require("./components/InputField"));
@@ -70,6 +72,8 @@ const Form_1 = __importDefault(require("./components/Form"));
 exports.Form = Form_1.default;
 const Label_1 = __importDefault(require("./components/Label"));
 exports.Label = Label_1.default;
+const FormRow_1 = __importDefault(require("./components/FormRow"));
+exports.FormRow = FormRow_1.default;
 const BetterHtmlProvider_1 = __importStar(require("./components/BetterHtmlProvider"));
 exports.BetterHtmlProvider = BetterHtmlProvider_1.default;
 Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });

package/package.json

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