react-better-html 1.1.16 → 1.1.17

package/dist/components/BetterHtmlProvider.js

@@ -131,6 +131,9 @@ function BetterHtmlProvider({ value, children }) {
         },
         loaders,
         setLoaders,
+        components: {
+            ...value?.components,
+        },
     }), [value, loaders]);
     return ((0, jsx_runtime_1.jsx)(betterHtmlContext.Provider, { value: readyValue, children: (0, jsx_runtime_1.jsx)(BetterHtmlProviderContent, { children: children }) }));
 }

package/dist/components/Button.d.ts

@@ -4,7 +4,7 @@ import { AssetName } from "../types/asset";
 import { LoaderName } from "../types/loader";
 import { AnyOtherString, OmitProps } from "../types/app";
 import { ComponentHoverStyle, ComponentStyle } from "../types/components";
-type ButtonProps<Value> = {
+export type ButtonProps<Value> = {
     href?: string;
     text?: string;
     value?: Value;
@@ -34,7 +34,7 @@ type ButtonProps<Value> = {
     /** @default false */
     isSubmit?: boolean;
     onClickWithValue?: (value: Value) => void;
-} & OmitProps<React.ComponentProps<"button">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;
+} & OmitProps<React.ComponentProps<"button">, "style" | "defaultValue" | "translate"> & ComponentStyle & ComponentHoverStyle;
 type ButtonComponent = {
     <Value>(props: ButtonProps<Value>): React.ReactElement;
     secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;

package/dist/components/Button.js

@@ -107,8 +107,12 @@ const ButtonElement = styled_components_1.default.button.withConfig({
 const ButtonComponent = function Button({ href, text, value, icon, iconPosition = "left", iconColor, iconSize, image, imagePosition = "left", imageWidth, imageHeight, loaderName, loaderSize, isLoading, disabled, isSmall, isSubmit, onClick, onClickWithValue, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const isLoadingHook = (0, BetterHtmlProvider_1.useLoader)(loaderName);
+    const betterHtmlContext = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
     const isLoadingElement = isLoading ?? isLoadingHook;
-    const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme);
+    const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)({
+        ...betterHtmlContext.components.button?.default,
+        ...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);
@@ -118,23 +122,27 @@ const ButtonComponent = function Button({ href, text, value, icon, iconPosition
     }, [onClick, onClickWithValue, value]);
     const iconComponent = icon ? ((0, jsx_runtime_1.jsx)(Div_1.default.row, { height: 20, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, color: iconColor ?? props.color ?? theme.colors.base, size: iconSize ?? parseInt(styledComponentStyles.normalStyle.fontSize?.toString() ?? "16") }) })) : undefined;
     const imageComponent = image ? ((0, jsx_runtime_1.jsx)(Image_1.default, { name: image, color: iconColor ?? props.color ?? theme.colors.base, width: imageWidth ?? parseInt(styledComponentStyles.normalStyle.fontSize?.toString() ?? "16"), height: imageHeight })) : undefined;
-    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { as: href ? "a" : "button", theme: theme, isSmall: isSmall, withText: text !== undefined, isLoading: isLoadingElement, disabled: disabled, href: href, type: isSubmit && !isLoadingElement ? "submit" : "button", onClick: !disabled && !isLoadingElement ? onClickElement : undefined, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "center", gap: 10, pointerEvents: "none", opacity: isLoadingElement ? 0 : 1, transition: theme.styles.transition, children: [iconPosition === "left" && iconComponent, imagePosition === "left" && imageComponent, text, iconPosition === "right" && iconComponent, imagePosition === "right" && imageComponent] }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { position: "absolute", width: "100%", height: "100%", top: 0, left: 0, pointerEvents: "none", alignItems: "center", justifyContent: "center", opacity: isLoadingElement ? 1 : 0, transition: theme.styles.transition, children: (0, jsx_runtime_1.jsx)(Loader_1.default, { color: props.color ?? theme.colors.base, size: loaderSize, disabled: !isLoadingElement }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { as: (href ? "a" : "button"), theme: theme, isSmall: isSmall, withText: text !== undefined, isLoading: isLoadingElement, disabled: disabled, href: href, type: isSubmit && !isLoadingElement ? "submit" : "button", onClick: !disabled && !isLoadingElement ? onClickElement : undefined, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "center", gap: 10, pointerEvents: "none", opacity: isLoadingElement ? 0 : 1, transition: theme.styles.transition, children: [iconPosition === "left" && iconComponent, imagePosition === "left" && imageComponent, text, iconPosition === "right" && iconComponent, imagePosition === "right" && imageComponent] }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { position: "absolute", width: "100%", height: "100%", top: 0, left: 0, pointerEvents: "none", alignItems: "center", justifyContent: "center", opacity: isLoadingElement ? 1 : 0, transition: theme.styles.transition, children: (0, jsx_runtime_1.jsx)(Loader_1.default, { color: props.color ?? theme.colors.base, size: loaderSize, disabled: !isLoadingElement }) })] }));
 };
 ButtonComponent.secondary = function Secondary({ className, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(ButtonComponent, { className: `secondary${className ? ` ${className}` : ""}`, color: theme.colors.textPrimary, ...props }));
+    const betterHtmlContext = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
+    return ((0, jsx_runtime_1.jsx)(ButtonComponent, { ...betterHtmlContext.components.button?.secondary, className: `secondary${className ? ` ${className}` : ""}`, color: theme.colors.textPrimary, ...props }));
 };
 ButtonComponent.destructive = function Destructive(props) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return (0, jsx_runtime_1.jsx)(ButtonComponent, { backgroundColor: theme.colors.error, color: theme.colors.base, ...props });
+    const betterHtmlContext = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
+    return ((0, jsx_runtime_1.jsx)(ButtonComponent, { ...betterHtmlContext.components.button?.destructive, backgroundColor: theme.colors.error, color: theme.colors.base, ...props }));
 };
 ButtonComponent.icon = function Icon({ size = 16, backgroundButtonColor, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const betterHtmlContext = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
     const buttonSize = size + theme.styles.space;
     const backgroundButtonColorReady = backgroundButtonColor ?? theme.colors.textPrimary;
-    return ((0, jsx_runtime_1.jsx)(ButtonComponent, { width: buttonSize, height: buttonSize, color: theme.colors.textPrimary, backgroundColor: backgroundButtonColorReady + "00", backgroundImage: "none", backgroundColorHover: backgroundButtonColorReady + "20", borderRadius: 999, iconSize: size, loaderSize: 12, border: "none", padding: 0, filterHover: "none !important", ...props }));
+    return ((0, jsx_runtime_1.jsx)(ButtonComponent, { ...betterHtmlContext.components.button?.icon, width: buttonSize, height: buttonSize, color: theme.colors.textPrimary, backgroundColor: backgroundButtonColorReady + "00", backgroundImage: "none", backgroundColorHover: backgroundButtonColorReady + "20", borderRadius: 999, iconSize: size, loaderSize: 12, border: "none", padding: 0, filterHover: "none !important", ...props }));
 };
 ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...props }) {
+    const betterHtmlContext = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
     const onClickElement = (0, react_1.useCallback)(() => {
         const input = document.createElement("input");
         input.setAttribute("type", "file");
@@ -147,7 +155,7 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...props
         });
         input.click();
     }, [accept]);
-    return (0, jsx_runtime_1.jsx)(ButtonComponent, { text: "Upload", icon: "uploadCloud", onClick: onClickElement, ...props });
+    return ((0, jsx_runtime_1.jsx)(ButtonComponent, { ...betterHtmlContext.components.button?.upload, text: "Upload", icon: "uploadCloud", onClick: onClickElement, ...props }));
 };
 const Button = (0, react_1.memo)(ButtonComponent);
 Button.secondary = ButtonComponent.secondary;

package/dist/components/PageHolder.js

@@ -10,6 +10,6 @@ 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 }));
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { as: "main", width: "100%", maxWidth: !noMaxContentWidth ? app.contentMaxWidth : undefined, margin: "0px auto", padding: theme.styles.space, children: children }));
 }
 exports.default = (0, react_1.memo)(PageHolder);

package/dist/types/config.d.ts

@@ -2,13 +2,21 @@ import { ThemeConfig } from "./theme";
 import { AssetsConfig } from "./asset";
 import { IconsConfig } from "./icon";
 import { LoaderConfig } from "./loader";
+import { ComponentHoverStyle, ComponentStyle } from "./components";
 export type AppConfig = {
     contentMaxWidth: number;
 };
+type ComponentConfig<Subcomponents extends string> = {
+    [key in Subcomponents]?: ComponentStyle & ComponentHoverStyle;
+};
 export type BetterHtmlConfig = {
     app: AppConfig;
     theme: ThemeConfig;
     icons: Partial<IconsConfig>;
     assets: Partial<AssetsConfig>;
     loaders: Partial<LoaderConfig>;
+    components: {
+        button?: ComponentConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
+    };
 };
+export {};

package/package.json

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