react-better-html 1.1.9 → 1.1.11

package/dist/components/Image.d.ts

@@ -0,0 +1,18 @@
+import { AnyOtherString, OmitProps } from "../types/app";
+import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
+import { AssetName } from "../types/asset";
+type ImageProps = {
+    name?: AssetName | AnyOtherString;
+} & OmitProps<React.ComponentProps<"img">, "style"> & ComponentStyle & ComponentHoverStyle;
+type ImageComponent = {
+    (props: ComponentPropWithRef<HTMLImageElement, ImageProps>): React.ReactElement;
+    profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
+        /** @default 40 */
+        size?: number;
+    }>) => React.ReactElement;
+};
+declare const Image: ImageComponent;
+declare const _default: ImageComponent & {
+    profileImage: typeof Image.profileImage;
+};
+export default _default;

package/dist/components/Image.js

@@ -0,0 +1,44 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const hooks_1 = require("../utils/hooks");
+const ImageElement = styled_components_1.default.img.withConfig({
+    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
+}) `
+   display: block;
+   user-select: none;
+   -webkit-user-drag: none;
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const Image = (0, react_1.forwardRef)(function Image({ name, src, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const { assets } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
+    const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme);
+    const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
+    const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
+    const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
+    (0, react_1.useEffect)(() => {
+        if (!name)
+            return;
+        if (!assets[name.toString()])
+            console.warn(`The asset \`${name}\` you are trying to use does not exist. Make sure to add it to the \`assets\` object in \`<BetterHtmlProvider>\` config value prop.`);
+    }, [assets, name]);
+    return ((0, jsx_runtime_1.jsx)(ImageElement, { ...styledComponentStyles, src: name ? assets[name.toString()] : src, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }));
+});
+Image.profileImage = (0, react_1.forwardRef)(function ProfileImage({ size = 40, ...props }, ref) {
+    return (0, jsx_runtime_1.jsx)(Image, { width: size, height: size, borderRadius: "50%", objectFit: "cover", ref: ref, ...props });
+});
+const MemoizedImage = (0, react_1.memo)(Image);
+MemoizedImage.profileImage = Image.profileImage;
+exports.default = { Image: MemoizedImage }.Image;

package/dist/components/Loader.d.ts

@@ -13,7 +13,22 @@ type LoaderProps = {
 } & OmitProps<DivProps<unknown>, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName">;
 type LoaderComponentType = {
     (props: LoaderProps): React.ReactElement;
+    box: (props: OmitProps<LoaderProps, "size"> & {
+        /** @default "Loading..." */
+        text?: string;
+        /** @default 20 */
+        size?: number;
+    }) => React.ReactElement;
+    text: (props: OmitProps<LoaderProps, "size"> & {
+        /** @default "Loading..." */
+        text?: string;
+        /** @default 14 */
+        size?: number;
+    }) => React.ReactElement;
 };
 declare const LoaderComponent: LoaderComponentType;
-declare const Loader: typeof LoaderComponent & {};
+declare const Loader: typeof LoaderComponent & {
+    box: typeof LoaderComponent.box;
+    text: typeof LoaderComponent.text;
+};
 export default Loader;

package/dist/components/Loader.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Div_1 = __importDefault(require("./Div"));
+const Text_1 = __importDefault(require("./Text"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 const StyledDiv = (0, styled_components_1.default)(Div_1.default) `
    @keyframes loaderAnimation {
@@ -28,5 +29,15 @@ const LoaderComponent = function Loader({ color, size = 16, width, disabled, ...
     const mask = `radial-gradient(farthest-side, #0000 calc(100% - ${readyWidth}px), #000 0)`;
     return ((0, jsx_runtime_1.jsx)(StyledDiv, { width: size + readyWidth * 2, height: size + readyWidth * 2, background: `radial-gradient(farthest-side, ${readyColor} 94%, #0000) top/${readyWidth}px ${readyWidth}px no-repeat, conic-gradient(#0000 30%, ${readyColor})`, borderRadius: 999, mask: mask, WebkitMask: mask, padding: readyWidth, animation: !disabled ? "loaderAnimation .6s infinite linear" : undefined, ...props }));
 };
+LoaderComponent.box = function Box({ text = "Loading...", size = 20, ...props }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsx)(Loader, { size: size, ...props }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: "center", color: props.color ?? theme.colors.textSecondary, children: text }))] }));
+};
+LoaderComponent.text = function LoaderText({ text = "Loading...", size = 14, ...props }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsx)(Loader, { size: size, ...props }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: "center", color: props.color ?? theme.colors.textSecondary, children: text }))] }));
+};
 const Loader = (0, react_1.memo)(LoaderComponent);
+Loader.box = LoaderComponent.box;
+Loader.text = LoaderComponent.text;
 exports.default = Loader;

package/dist/components/Modal.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropWithRef } from "../types/components";
+import { OmitProps } from "../types/app";
+type ModalProps = {
+    /**
+     * If you want to have a small modal, you can use 660px as it looks good on most screens.
+     *
+     * @default 30% smaller than app.contentMaxWidth
+     * */
+    maxWidth?: number;
+    title?: string;
+    titleColor?: string;
+    description?: string;
+    descriptionColor?: string;
+    headerBackgroundColor?: string;
+    overflow?: React.CSSProperties["overflow"];
+    onOpen?: () => void;
+    onClose?: () => void;
+    children?: React.ReactNode;
+};
+export type ModalRef = {
+    open: () => void;
+    close: () => void;
+    isOpened: boolean;
+};
+type ModalComponent = {
+    (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
+    confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    }>) => React.ReactElement;
+    destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
+        onDelete?: () => void;
+        onCancel?: () => void;
+    }>) => React.ReactElement;
+};
+declare const ModalComponent: ModalComponent;
+declare const Modal: typeof ModalComponent & {
+    confirmation: typeof ModalComponent.confirmation;
+    destructive: typeof ModalComponent.destructive;
+};
+export default Modal;

package/dist/components/Modal.js

@@ -0,0 +1,93 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+const Div_1 = __importDefault(require("./Div"));
+const Button_1 = __importDefault(require("./Button"));
+const Text_1 = __importDefault(require("./Text"));
+const Divider_1 = __importDefault(require("./Divider"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const DialogStylesElement = styled_components_1.default.dialog.withConfig({
+    shouldForwardProp: (prop) => !["theme", "opacity"].includes(prop),
+}) `
+   width: 100%;
+   max-width: none;
+   height: 100%;
+   max-height: none;
+   border: none;
+   outline: none;
+   background-color: transparent;
+   margin: auto auto;
+   padding-inline: ${(props) => props.theme.styles.gap}px;
+   opacity: ${(props) => props.opacity};
+   transition: ${(props) => props.theme.styles.transition};
+
+   &::backdrop {
+      background-color: #000000a0;
+      opacity: ${(props) => props.opacity};
+      transition: ${(props) => props.theme.styles.transition};
+   }
+
+   @keyframes fadeInAnimation {
+      from {
+         transform: translateY(${(props) => props.theme.styles.space}px);
+      }
+      to {
+         transform: translateY(0px);
+      }
+   }
+
+   @keyframes fadeOutAnimation {
+      from {
+         transform: translateY(0px);
+      }
+      to {
+         transform: translateY(${(props) => props.theme.styles.space}px);
+      }
+   }
+`;
+const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title, titleColor, description, descriptionColor, headerBackgroundColor, overflow, onOpen, onClose, children, }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
+    const dialogRef = (0, react_1.useRef)(null);
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [isOpenedLate, setIsOpenedLate] = (0, react_1.useState)(false);
+    const onClickOpen = (0, react_1.useCallback)(() => {
+        dialogRef.current?.showModal();
+        setIsOpened(true);
+        setIsOpenedLate(true);
+        onOpen?.();
+    }, [onOpen]);
+    const onClickClose = (0, react_1.useCallback)(() => {
+        setIsOpened(false);
+        onClose?.();
+        setTimeout(() => {
+            dialogRef.current?.close();
+            setIsOpenedLate(false);
+        }, 0.2 * 1000);
+    }, [onClose]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            open: onClickOpen,
+            close: onClickClose,
+            isOpened,
+        };
+    }, [onClickOpen, onClickClose, isOpened]);
+    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, opacity: !isOpened ? 0 : 1, onClose: onClickClose, ref: dialogRef, children: isOpenedLate ? ((0, jsx_runtime_1.jsx)(Div_1.default.column, { position: "relative", width: "100%", maxWidth: maxWidth ?? app.contentMaxWidth / 1.3, minHeight: `calc(100% - ${theme.styles.space * 2}px)`, alignItems: "center", justifyContent: "center", marginBlock: theme.styles.space, marginInline: "auto", transform: `translateY(${theme.styles.space}px)`, transition: theme.styles.transition, animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards", children: (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", minHeight: 32 + theme.styles.space * 2, backgroundColor: theme.colors.backgroundBase, borderRadius: theme.styles.borderRadius * 2, paddingInline: !title ? theme.styles.space : undefined, paddingBlock: !title ? theme.styles.gap : undefined, overflow: overflow, children: [title ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, backgroundColor: headerBackgroundColor, borderTopLeftRadius: theme.styles.borderRadius * 2, borderTopRightRadius: theme.styles.borderRadius * 2, paddingInline: theme.styles.space, paddingBlock: theme.styles.gap, children: [(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: "h1", color: titleColor ?? theme.colors.textPrimary, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose })] }), (0, jsx_runtime_1.jsx)(Divider_1.default.horizontal, {})] })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, children: (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", onClick: onClickClose }) })), (0, jsx_runtime_1.jsx)(Div_1.default, { paddingInline: title ? theme.styles.space : undefined, paddingBlock: title ? theme.styles.gap : undefined, children: children })] }) })) : undefined }));
+});
+ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ onConfirm, 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", onClick: onConfirm })] })] }));
+});
+ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ 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", onClick: onDelete })] })] }));
+});
+const Modal = (0, react_1.memo)(ModalComponent);
+Modal.confirmation = ModalComponent.confirmation;
+Modal.destructive = ModalComponent.destructive;
+exports.default = Modal;

package/dist/components/PageHolder.d.ts

@@ -0,0 +1,8 @@
+type PageHolderProps = {
+    /** @default false */
+    noMaxContentWidth?: boolean;
+    children?: React.ReactNode;
+};
+declare function PageHolder({ noMaxContentWidth, children }: PageHolderProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof PageHolder>;
+export default _default;

package/dist/components/PageHolder.js

@@ -0,0 +1,15 @@
+"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 Div_1 = __importDefault(require("./Div"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+function PageHolder({ noMaxContentWidth, children }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { as: "main", width: "100%", maxWidth: !noMaxContentWidth ? app.contentMaxWidth : undefined, margin: "0px auto", paddingBlock: theme.styles.gap, paddingInline: theme.styles.space, children: children }));
+}
+exports.default = (0, react_1.memo)(PageHolder);

package/dist/components/Text.d.ts

@@ -1,19 +1,13 @@
-import { ComponentHoverStyle, ComponentStyle } from "../types/components";
+import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { OmitProps } from "../types/app";
 export type TextProps = {
     /** @default "p" */
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
-} & OmitProps<React.ComponentProps<"div">, "style"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"p">, "style"> & ComponentStyle & ComponentHoverStyle;
 type TextComponentType = {
-    (props: TextProps & {
-        ref?: React.Ref<HTMLDivElement>;
-    }): React.ReactElement;
-    unknown: (props: TextProps & {
-        ref?: React.Ref<HTMLDivElement>;
-    }) => React.ReactElement;
-    oneLine: (props: TextProps & {
-        ref?: React.Ref<HTMLDivElement>;
-    }) => React.ReactElement;
+    (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>): React.ReactElement;
+    unknown: (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>) => React.ReactElement;
+    oneLine: (props: ComponentPropWithRef<HTMLParagraphElement, TextProps>) => React.ReactElement;
 };
 declare const TextComponent: TextComponentType;
 declare const Text: typeof TextComponent & {

package/dist/constants/app.d.ts

@@ -0,0 +1,2 @@
+import { AppConfig } from "../types/config";
+export declare const appConfig: AppConfig;

package/dist/constants/app.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appConfig = void 0;
+exports.appConfig = {
+    contentMaxWidth: 1100,
+};

package/dist/constants/assets.d.ts

@@ -0,0 +1,2 @@
+import { AssetsConfig } from "../types/asset";
+export declare const assets: AssetsConfig;

package/dist/constants/assets.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assets = void 0;
+const logo_svg_1 = __importDefault(require("../assets/logo.svg"));
+exports.assets = {
+    logo: logo_svg_1.default,
+};

package/dist/constants/icons.d.ts

@@ -0,0 +1,2 @@
+import { IconsConfig } from "../types/icon";
+export declare const icons: IconsConfig;

package/dist/constants/icons.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.icons = void 0;
+exports.icons = {
+    XMark: {
+        width: 384,
+        height: 512,
+        paths: [
+            {
+                d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z",
+                type: "fill",
+            },
+        ],
+    },
+    uploadCloud: {
+        width: 640,
+        height: 512,
+        paths: [
+            {
+                d: "M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39L296 392c0 13.3 10.7 24 24 24s24-10.7 24-24l0-134.1 39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z",
+                type: "fill",
+            },
+        ],
+    },
+    trash: {
+        width: 448,
+        height: 512,
+        paths: [
+            {
+                d: "M135.2 17.7C140.6 6.8 151.7 0 163.8 0L284.2 0c12.1 0 23.2 6.8 28.6 17.7L320 32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 7.2-14.3zM32 128l384 0 0 320c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-320zm96 64c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16z",
+                type: "fill",
+            },
+        ],
+    },
+};

package/dist/constants/theme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeConfig } from "../types/theme";
+export declare const theme: ThemeConfig;

package/dist/constants/theme.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.theme = void 0;
+exports.theme = {
+    styles: {
+        space: 16,
+        gap: 8,
+        borderRadius: 10,
+        fontFamily: "Arial, sans-serif",
+        transition: "ease 0.2s",
+    },
+    colors: {
+        light: {
+            textPrimary: "#111111",
+            textSecondary: "#777777",
+            label: "#111111",
+            primary: "#6d466b",
+            secondary: "#412234",
+            success: "#28a745",
+            info: "#17a2b8",
+            warn: "#ffc107",
+            error: "#dc3545",
+            base: "#f8f8f8",
+            backgroundBase: "#f8f8f8",
+            backgroundSecondary: "#e8e8e8",
+            backgroundContent: "#ffffff",
+            border: "#ced4da",
+        },
+        dark: {
+            textPrimary: "#f8f8f8",
+            textSecondary: "#e8e8e8",
+            label: "#111111",
+            primary: "#9b6499",
+            secondary: "#6c466b",
+            success: "#28a745",
+            info: "#17a2b8",
+            warn: "#ffc107",
+            error: "#dc3545",
+            base: "#f8f8f8",
+            backgroundBase: "#111111",
+            backgroundSecondary: "#222222",
+            backgroundContent: "#333333",
+            border: "#777777",
+        },
+    },
+};

package/dist/index.d.ts

@@ -1,4 +1,12 @@
 import Div from "./components/Div";
 import Text from "./components/Text";
 import Loader from "./components/Loader";
-export { Div, Text, Loader };
+import Icon from "./components/Icon";
+import Image from "./components/Image";
+import Button from "./components/Button";
+import Divider from "./components/Divider";
+import Modal, { type ModalRef } from "./components/Modal";
+import PageHolder from "./components/PageHolder";
+import { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
+import { usePageResize, useMediaQuery } from "./utils/hooks";
+export { Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, };

package/dist/index.js

@@ -3,10 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Loader = exports.Text = exports.Div = void 0;
+exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = void 0;
 const Div_1 = __importDefault(require("./components/Div"));
 exports.Div = Div_1.default;
 const Text_1 = __importDefault(require("./components/Text"));
 exports.Text = Text_1.default;
 const Loader_1 = __importDefault(require("./components/Loader"));
 exports.Loader = Loader_1.default;
+const Icon_1 = __importDefault(require("./components/Icon"));
+exports.Icon = Icon_1.default;
+const Image_1 = __importDefault(require("./components/Image"));
+exports.Image = Image_1.default;
+const Button_1 = __importDefault(require("./components/Button"));
+exports.Button = Button_1.default;
+const Divider_1 = __importDefault(require("./components/Divider"));
+exports.Divider = Divider_1.default;
+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 BetterHtmlProvider_1 = require("./components/BetterHtmlProvider");
+Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return BetterHtmlProvider_1.useTheme; } });
+Object.defineProperty(exports, "useLoader", { enumerable: true, get: function () { return BetterHtmlProvider_1.useLoader; } });
+Object.defineProperty(exports, "useLoaderControls", { enumerable: true, get: function () { return BetterHtmlProvider_1.useLoaderControls; } });
+const hooks_1 = require("./utils/hooks");
+Object.defineProperty(exports, "usePageResize", { enumerable: true, get: function () { return hooks_1.usePageResize; } });
+Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return hooks_1.useMediaQuery; } });

package/dist/types/app.d.ts

@@ -12,3 +12,4 @@ export type DeepPartialRecord<T> = {
 };
 /** returns only the required props */
 export type PickAllRequired<T, K extends keyof T> = Required<Pick<T, K>>;
+export type AnyOtherString = Omit<string & {}, "">;

package/dist/types/asset.d.ts

@@ -1,2 +1,4 @@
-export type AssetsConfig = Record<AssetName, string>;
-export type AssetName = "";
+export type AssetName = "logo";
+export type AssetsConfig = Record<AssetName, string> & {
+    [key: string]: string;
+};

package/dist/types/components.d.ts

@@ -4,3 +4,6 @@ export type ComponentHoverStyle = {
 };
 export type ComponentMarginProps = Pick<ComponentStyle, "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "marginBlock" | "marginInline">;
 export type ComponentPaddingProps = Pick<ComponentStyle, "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingBlock" | "paddingInline">;
+export type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
+    ref?: React.Ref<ComponentRef>;
+};

package/dist/types/config.d.ts

@@ -1,13 +1,14 @@
-import { PartialTheme, Theme } from "./theme";
+import { ThemeConfig } from "./theme";
 import { AssetsConfig } from "./asset";
 import { IconsConfig } from "./icon";
+import { LoaderConfig } from "./loader";
+export type AppConfig = {
+    contentMaxWidth: number;
+};
 export type BetterHtmlConfig = {
-    theme: Theme;
+    app: AppConfig;
+    theme: ThemeConfig;
     icons: Partial<IconsConfig>;
     assets: Partial<AssetsConfig>;
-};
-export type PartialBetterHtmlConfig = {
-    theme?: PartialTheme;
-    icons?: Partial<IconsConfig>;
-    assets?: Partial<AssetsConfig>;
+    loaders: Partial<LoaderConfig>;
 };

package/dist/types/icon.d.ts

@@ -1,8 +1,11 @@
-export type IconsConfig = Record<IconName, {
+export type IconName = "XMark" | "uploadCloud" | "trash";
+export type IconData = {
     width: number;
     height: number;
     paths: (React.ComponentProps<"path"> & {
         type: "fill" | "stroke";
     })[];
-}>;
-export type IconName = "";
+};
+export type IconsConfig = Record<IconName, IconData> & {
+    [key: string]: IconData;
+};

package/dist/types/loader.d.ts

@@ -1 +1,4 @@
 export type LoaderName = "";
+export type LoaderConfig = Record<LoaderName, boolean | undefined> & {
+    [key: string]: boolean | undefined;
+};

package/dist/types/theme.d.ts

@@ -1,3 +1,6 @@
+export type Color = `#${string}` | "transparent";
+export type ColorName = "textPrimary" | "textSecondary" | "label" | "primary" | "secondary" | "success" | "info" | "warn" | "error" | "base" | "backgroundBase" | "backgroundSecondary" | "backgroundContent" | "border";
+export type ColorTheme = "light" | "dark";
 export type Styles = {
     space: number;
     gap: number;
@@ -5,13 +8,12 @@ export type Styles = {
     fontFamily: string;
     transition: string;
 };
-export type Color = `#${string}` | "transparent";
-export type Colors = Record<"textPrimary" | "textSecondary" | "label" | "primary" | "secondary" | "success" | "info" | "warn" | "error" | "backgroundBase" | "backgroundSecondary" | "backgroundContent" | "border", Color>;
+export type Colors = Record<ColorName, Color>;
 export type Theme = {
     styles: Styles;
     colors: Colors;
 };
-export type PartialTheme = {
-    styles?: Partial<Styles>;
-    colors?: Partial<Colors>;
+export type ThemeConfig = {
+    styles: Styles;
+    colors: Record<ColorTheme, Colors>;
 };

package/dist/utils/hooks.d.ts

@@ -6,3 +6,23 @@ export declare function useStyledComponentStyles(props: ComponentStyle & Compone
 };
 export declare function useComponentPropsWithPrefix<Props extends Record<string, any>, Prefix extends string>(props: Props, prefix: Prefix): Record<`${Prefix}-${string}`, any>;
 export declare function useComponentPropsWithoutStyle<Props extends Record<string, any>>(props: Props): Partial<Props>;
+export declare function usePageResize(): {
+    width: number;
+    height: number;
+};
+export declare function useMediaQuery(): {
+    size320: boolean;
+    size400: boolean;
+    size500: boolean;
+    size600: boolean;
+    size700: boolean;
+    size800: boolean;
+    size900: boolean;
+    size1000: boolean;
+    size1100: boolean;
+    size1200: boolean;
+    size1300: boolean;
+    size1400: boolean;
+    size1500: boolean;
+    size1600: boolean;
+};

package/dist/utils/hooks.js

@@ -3,9 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyledComponentStyles = useStyledComponentStyles;
 exports.useComponentPropsWithPrefix = useComponentPropsWithPrefix;
 exports.useComponentPropsWithoutStyle = useComponentPropsWithoutStyle;
+exports.usePageResize = usePageResize;
+exports.useMediaQuery = useMediaQuery;
 const react_1 = require("react");
 const cssProps = Object.keys(document.documentElement.style).reduce((previousValue, currentValue) => {
     previousValue[currentValue.toLowerCase()] = true;
+    previousValue[`${currentValue}Hover`.toLowerCase()] = true;
     return previousValue;
 }, {});
 function useStyledComponentStyles(props, theme) {
@@ -52,3 +55,40 @@ function useComponentPropsWithoutStyle(props) {
         return previousValue;
     }, {}), [props]);
 }
+function usePageResize() {
+    const [width, setWidth] = (0, react_1.useState)(window.innerWidth);
+    const [height, setHeight] = (0, react_1.useState)(window.innerHeight);
+    (0, react_1.useEffect)(() => {
+        const onResize = () => {
+            setWidth(window.innerWidth);
+            setHeight(window.innerHeight);
+        };
+        window.addEventListener("resize", onResize);
+        return () => {
+            window.removeEventListener("resize", onResize);
+        };
+    }, []);
+    return {
+        width,
+        height,
+    };
+}
+function useMediaQuery() {
+    const { width } = usePageResize();
+    return {
+        size320: width <= 320,
+        size400: width <= 400,
+        size500: width <= 500,
+        size600: width <= 600,
+        size700: width <= 700,
+        size800: width <= 800,
+        size900: width <= 900,
+        size1000: width <= 1000,
+        size1100: width <= 1100,
+        size1200: width <= 1200,
+        size1300: width <= 1300,
+        size1400: width <= 1400,
+        size1500: width <= 1500,
+        size1600: width <= 1600,
+    };
+}