react-better-html 1.1.47 → 1.1.49

package/dist/components/BetterHtmlProvider.d.ts

@@ -1,5 +1,5 @@
 import { BetterHtmlConfig } from "../types/config";
-import { AnyOtherString, DeepPartialRecord } from "../types/app";
+import { AnyOtherString, DeepPartialRecord, OmitProps } from "../types/app";
 import { LoaderName } from "../types/loader";
 import { BetterHtmlPlugin, PluginName } from "../types/plugin";
 export declare const useBetterHtmlContext: () => BetterHtmlConfig;
@@ -13,8 +13,9 @@ export declare const useLoaderControls: () => {
     stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
 };
 export declare const usePlugin: (pluginName: PluginName) => BetterHtmlPlugin | undefined;
+export type BetterHtmlProviderValue = DeepPartialRecord<OmitProps<BetterHtmlConfig, "colorTheme">>;
 type BetterHtmlProviderProps = {
-    value?: DeepPartialRecord<BetterHtmlConfig>;
+    value?: BetterHtmlProviderValue;
     plugins?: BetterHtmlPlugin[];
     children?: React.ReactNode;
 };

package/dist/components/BetterHtmlProvider.js

@@ -32,7 +32,7 @@ const useBetterHtmlContext = () => {
     const context = (0, react_1.useContext)(betterHtmlContext);
     if (context === undefined)
         throw new Error("`useBetterHtmlContext()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree.");
-    const { setLoaders, ...rest } = context;
+    const { setLoaders, plugins, ...rest } = context;
     return rest;
 };
 exports.useBetterHtmlContext = useBetterHtmlContext;

package/dist/components/Modal.js

@@ -13,12 +13,13 @@ 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),
+    shouldForwardProp: (prop) => !["theme", "colorTheme", "opacity"].includes(prop),
 }) `
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
+   color: ${(props) => props.theme.colors.textPrimary};
    border: none;
    outline: none;
    background-color: transparent;
@@ -28,7 +29,7 @@ const DialogStylesElement = styled_components_1.default.dialog.withConfig({
    transition: ${(props) => props.theme.styles.transition};
 
    &::backdrop {
-      background-color: #000000a0;
+      background-color: ${(props) => (props.colorTheme === "light" ? "#000000a0" : "#000000e0")};
       opacity: ${(props) => props.opacity};
       transition: ${(props) => props.theme.styles.transition};
    }
@@ -55,7 +56,7 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
     const reactRouterDomPlugin = (0, BetterHtmlProvider_1.usePlugin)("react-router-dom");
     const urlQuery = reactRouterDomPlugin ? (0, hooks_1.useUrlQuery)() : undefined;
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
+    const { app, colorTheme } = (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);
@@ -86,7 +87,7 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
             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 + theme.styles.gap : undefined, paddingBlock: !title ? theme.styles.space : 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 + theme.styles.gap, paddingBlock: theme.styles.space, 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 + theme.styles.gap : undefined, paddingBlock: title ? theme.styles.space : undefined, children: children })] }) })) : undefined }));
+    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, colorTheme: colorTheme, 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 + theme.styles.gap : undefined, paddingBlock: !title ? theme.styles.space : 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 + theme.styles.gap, paddingBlock: theme.styles.space, 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 + theme.styles.gap : undefined, paddingBlock: title ? theme.styles.space : undefined, children: children })] }) })) : undefined }));
 });
 ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/index.d.ts

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

package/dist/types/config.d.ts

@@ -1,4 +1,4 @@
-import { ThemeConfig } from "./theme";
+import { ColorTheme, ThemeConfig } from "./theme";
 import { AssetsConfig } from "./asset";
 import { IconsConfig } from "./icon";
 import { LoaderConfig } from "./loader";
@@ -12,6 +12,7 @@ type ComponentConfig<Subcomponents extends string> = {
 export type BetterHtmlConfig = {
     app: AppConfig;
     theme: ThemeConfig;
+    colorTheme: ColorTheme;
     icons: Partial<IconsConfig>;
     assets: Partial<AssetsConfig>;
     loaders: Partial<LoaderConfig>;

package/dist/utils/hooks.d.ts

@@ -47,7 +47,7 @@ export declare function useBooleanState(initialValue?: boolean): [
     }
 ];
 export declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];
-export declare function useForm<FormFields extends Record<string, string | number | boolean | undefined>>(options: {
+export declare function useForm<FormFields extends Record<string | number, string | number | boolean | undefined>>(options: {
     defaultValues: FormFields;
     requiredFields?: (keyof FormFields)[];
     onSubmit?: (values: FormFields) => void | Promise<void>;

package/package.json

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