react-better-html 1.1.10 → 1.1.12

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/components/ToggleInput.d.ts

@@ -0,0 +1,19 @@
+import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
+import { OmitProps } from "../types/app";
+export type ToggleInputRef = {};
+type InternalToggleInputProps<Value> = {
+    label?: string;
+    text?: string;
+    errorText?: string;
+    infoText?: string;
+    value?: Value;
+    onChange?: (checked: boolean, value?: Value) => void;
+} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange" | "name"> & ComponentStyle & ComponentHoverStyle;
+type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
+type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
+declare const _default: {
+    checkbox: ToggleInputComponentType;
+    radiobutton: ToggleInputComponentType;
+    switch: ToggleInputComponentType;
+};
+export default _default;

package/dist/components/ToggleInput.js

@@ -0,0 +1,122 @@
+"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 hooks_1 = require("../utils/hooks");
+const Text_1 = __importDefault(require("./Text"));
+const Div_1 = __importDefault(require("./Div"));
+const Icon_1 = __importDefault(require("./Icon"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const InputElement = styled_components_1.default.input.withConfig({
+    shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle"].includes(prop),
+}) `
+   position: relative;
+   appearance: none;
+   width: 24px;
+   height: 24px;
+   background-color: ${(props) => props.theme.colors.backgroundContent};
+   border: 1px solid ${(props) => props.theme.colors.border};
+   border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
+   cursor: pointer;
+   transition: ${(props) => props.theme.styles.transition};
+   flex-shrink: 0;
+
+   &[type="radio"] {
+      border-radius: 999px;
+   }
+
+   &:checked {
+      background-color: ${(props) => props.theme.colors.primary};
+      border-color: ${(props) => props.theme.colors.primary};
+   }
+
+   &:disabled {
+      filter: brightness(0.9);
+      cursor: not-allowed;
+   }
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const SwitchElement = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => !["theme", "checked", "disabled", "normalStyle", "hoverStyle"].includes(prop),
+}) `
+   position: relative;
+   width: 36px;
+   height: 20px;
+   background-color: ${(props) => (props.checked ? props.theme.colors.primary : props.theme.colors.border)};
+   border-radius: 10px;
+   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+   opacity: ${(props) => (props.disabled ? 0.5 : 1)};
+   transition: ${(props) => props.theme.styles.transition};
+
+   &::before {
+      content: "";
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      background-color: white;
+      border-radius: 50%;
+      top: 2px;
+      left: 2px;
+      transition: ${(props) => props.theme.styles.transition};
+      transform: translateX(${(props) => (props.checked ? "16px" : "0")});
+   }
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ label, text, errorText, infoText, value, onChange, checked: controlledChecked, required, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
+    const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
+    const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
+    const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
+    const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
+    const [internalChecked, setInternalChecked] = (0, react_1.useState)(false);
+    const onChangeElement = (0, react_1.useCallback)((event) => {
+        const newValue = event.target.checked;
+        if (controlledChecked === undefined)
+            setInternalChecked(newValue);
+        onChange?.(newValue, value);
+    }, [onChange, controlledChecked, value, props.type]);
+    const checked = controlledChecked ?? internalChecked;
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && (0, jsx_runtime_1.jsx)(Text_1.default, { children: text })] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
+});
+exports.default = {
+    checkbox: (0, react_1.forwardRef)(function Checkbox(props, ref) {
+        return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "checkbox", ref: ref, ...props });
+    }),
+    radiobutton: (0, react_1.forwardRef)(function RadioButton(props, ref) {
+        return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "radio", ref: ref, ...props });
+    }),
+    switch: (0, react_1.forwardRef)(function Switch({ label, errorText, infoText, disabled, onChange, checked: controlledChecked, required, ...props }, ref) {
+        const theme = (0, BetterHtmlProvider_1.useTheme)();
+        const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
+        const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
+        const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
+        const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
+        const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
+        const [internalChecked, setInternalChecked] = (0, hooks_1.useBooleanState)();
+        const checked = controlledChecked ?? internalChecked;
+        const onClickElement = (0, react_1.useCallback)(() => {
+            if (disabled)
+                return;
+            const newValue = !checked;
+            if (controlledChecked === undefined)
+                setInternalChecked.setState(newValue);
+            onChange?.(newValue);
+        }, [disabled, checked, onChange, controlledChecked]);
+        return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
+    }),
+};

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,85 @@
+"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",
+            },
+        ],
+    },
+    chevronDown: {
+        width: 512,
+        height: 512,
+        paths: [
+            {
+                d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z",
+                type: "fill",
+            },
+        ],
+    },
+    eye: {
+        width: 576,
+        height: 512,
+        paths: [
+            {
+                d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z",
+                type: "fill",
+            },
+        ],
+    },
+    eyeDashed: {
+        width: 640,
+        height: 512,
+        paths: [
+            {
+                d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z",
+                type: "fill",
+            },
+        ],
+    },
+    magnifyingGlass: {
+        width: 512,
+        height: 512,
+        paths: [
+            {
+                d: "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z",
+                type: "fill",
+            },
+        ],
+    },
+    check: {
+        width: 448,
+        height: 512,
+        paths: [
+            {
+                d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z",
+                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,16 @@
 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 Chip from "./components/Chip";
+import InputField from "./components/InputField";
+import Dropdown from "./components/Dropdown";
+import ToggleInput from "./components/ToggleInput";
+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, Chip, InputField, Dropdown, ToggleInput, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, };

package/dist/index.js

@@ -3,10 +3,38 @@ 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.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 = 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 Chip_1 = __importDefault(require("./components/Chip"));
+exports.Chip = Chip_1.default;
+const InputField_1 = __importDefault(require("./components/InputField"));
+exports.InputField = InputField_1.default;
+const Dropdown_1 = __importDefault(require("./components/Dropdown"));
+exports.Dropdown = Dropdown_1.default;
+const ToggleInput_1 = __importDefault(require("./components/ToggleInput"));
+exports.ToggleInput = ToggleInput_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" | "chevronDown" | "eye" | "eyeDashed" | "magnifyingGlass" | "check";
+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

@@ -1,8 +1,41 @@
 import { ComponentHoverStyle, ComponentStyle } from "../types/components";
 import { Theme } from "../types/theme";
-export declare function useStyledComponentStyles(props: ComponentStyle & ComponentHoverStyle, theme?: Theme): {
+export declare function useStyledComponentStyles(props: ComponentStyle & ComponentHoverStyle, theme?: Theme, 
+/** @default false */
+excludeProps?: boolean): {
     normalStyle: ComponentStyle;
     hoverStyle: ComponentStyle;
 };
 export declare function useComponentPropsWithPrefix<Props extends Record<string, any>, Prefix extends string>(props: Props, prefix: Prefix): Record<`${Prefix}-${string}`, any>;
+export declare function useComponentPropsWithExcludedStyle<Props extends Record<string, any>>(props: Props): Partial<Props>;
 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;
+};
+export declare function useBooleanState(initialValue?: boolean): [
+    state: boolean,
+    actions: {
+        setState: React.Dispatch<React.SetStateAction<boolean>>;
+        setTrue: () => void;
+        setFalse: () => void;
+        toggle: () => void;
+    }
+];
+export declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];