react-better-html 1.1.7 → 1.1.9

package/dist/components/BetterHtmlProvider.d.ts

@@ -0,0 +1,10 @@
+import { BetterHtmlConfig, PartialBetterHtmlConfig } from "../types/config";
+export declare const useBetterHtmlContext: () => BetterHtmlConfig;
+export declare const useTheme: () => import("../types/theme").Theme;
+type BetterHtmlProviderProps = {
+    value?: PartialBetterHtmlConfig;
+    children?: React.ReactNode;
+};
+declare function BetterHtmlProvider({ value, children }: BetterHtmlProviderProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof BetterHtmlProvider>;
+export default _default;

package/dist/components/BetterHtmlProvider.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.useBetterHtmlContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const betterHtmlContext = (0, react_1.createContext)(undefined);
+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.");
+    return context;
+};
+exports.useBetterHtmlContext = useBetterHtmlContext;
+const useTheme = () => {
+    const context = (0, react_1.useContext)(betterHtmlContext);
+    if (context === undefined)
+        throw new Error("`useTheme()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree.");
+    return context.theme;
+};
+exports.useTheme = useTheme;
+function BetterHtmlProvider({ value, children }) {
+    const readyValue = (0, react_1.useMemo)(() => ({
+        theme: {
+            styles: {
+                space: 16,
+                gap: 8,
+                borderRadius: 10,
+                fontFamily: "Arial, sans-serif",
+                transition: "ease 0.2s",
+                ...value?.theme?.styles,
+            },
+            colors: {
+                textPrimary: "#111111",
+                textSecondary: "#777777",
+                label: "#111111",
+                primary: "#6d466b",
+                secondary: "#412234",
+                success: "#28a745",
+                info: "#17a2b8",
+                warn: "#ffc107",
+                error: "#dc3545",
+                backgroundBase: "#f8f8f8",
+                backgroundSecondary: "#e8e8e8",
+                backgroundContent: "#ffffff",
+                border: "#ced4da",
+                ...value?.theme?.colors,
+            },
+        },
+        icons: {
+            ...value?.icons,
+        },
+        assets: {
+            ...value?.assets,
+        },
+    }), [value]);
+    return (0, jsx_runtime_1.jsx)(betterHtmlContext.Provider, { value: readyValue, children: children });
+}
+exports.default = (0, react_1.memo)(BetterHtmlProvider);

package/dist/components/Div.d.ts

@@ -1,27 +1,37 @@
 import { JSX } from "react";
-import { ComponentStyle } from "../types/components";
+import { ComponentHoverStyle, ComponentStyle } from "../types/components";
 import { OmitProps } from "../types/app";
-type DivProps<Value> = {
+export type DivProps<Value> = {
     value?: Value;
+    /** @default "div" */
     as?: keyof JSX.IntrinsicElements;
     isTabAccessed?: boolean;
     onClickWithValue?: (value: Value) => void;
-} & OmitProps<React.ComponentProps<"div">, "style"> & ComponentStyle;
-type DivComponent = {
+} & OmitProps<React.ComponentProps<"div">, "style"> & ComponentStyle & ComponentHoverStyle;
+type DivComponentType = {
     <Value>(props: DivProps<Value> & {
         ref?: React.Ref<HTMLDivElement>;
     }): React.ReactElement;
-    row: <Value>(props: DivProps<Value> & {
+    row: <Value>(props: OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
+        invertFlexDirection?: boolean;
         ref?: React.Ref<HTMLDivElement>;
+    }) => React.ReactElement;
+    column: <Value>(props: OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
         invertFlexDirection?: boolean;
+        ref?: React.Ref<HTMLDivElement>;
     }) => React.ReactElement;
-    column: <Value>(props: DivProps<Value> & {
+    grid: <Value>(props: OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
         ref?: React.Ref<HTMLDivElement>;
-        invertFlexDirection?: boolean;
     }) => React.ReactElement;
-    grid: <Value>(props: DivProps<Value> & {
+    box: <Value>(props: DivProps<Value> & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.ReactElement;
 };
-declare const _default: import("react").MemoExoticComponent<DivComponent>;
-export default _default;
+declare const DivComponent: DivComponentType;
+declare const Div: typeof DivComponent & {
+    row: typeof DivComponent.row;
+    column: typeof DivComponent.column;
+    grid: typeof DivComponent.grid;
+    box: typeof DivComponent.box;
+};
+export default Div;

package/dist/components/Div.js

@@ -8,7 +8,8 @@ const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../constants");
 const hooks_1 = require("../utils/hooks");
-const DivElement = styled_components_1.default.div.withConfig({
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const DivStylesComponent = styled_components_1.default.div.withConfig({
     shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
 }) `
    ${(props) => props.normalStyle}
@@ -17,8 +18,9 @@ const DivElement = styled_components_1.default.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-const Div = (0, react_1.forwardRef)(function Div({ value, as, isTabAccessed, onClickWithValue, role, onClick, onKeyDown, ...props }, ref) {
-    const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props);
+const DivComponent = (0, react_1.forwardRef)(function Div({ value, as, isTabAccessed, onClickWithValue, role, onClick, onKeyDown, children, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    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);
@@ -35,6 +37,24 @@ const Div = (0, react_1.forwardRef)(function Div({ value, as, isTabAccessed, onC
             event.currentTarget.click();
         }
     }, [onKeyDown, isTabAccessed]);
-    return ((0, jsx_runtime_1.jsx)(DivElement, { as: as, tabIndex: isTabAccessed && !constants_1.isMobileDevice ? 0 : undefined, role: role ?? (onClick ? "button" : undefined), onClick: onClickElement, onKeyDown: onKeyDownElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }));
+    return ((0, jsx_runtime_1.jsx)(DivStylesComponent, { as: as, tabIndex: isTabAccessed && !constants_1.isMobileDevice ? 0 : undefined, role: role ?? (onClick ? "button" : undefined), onClick: onClickElement, onKeyDown: onKeyDownElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: children }));
 });
-exports.default = (0, react_1.memo)(Div);
+DivComponent.row = (0, react_1.forwardRef)(function Row(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: props.invertFlexDirection ? "column" : "row", ref: ref, ...props }));
+});
+DivComponent.column = (0, react_1.forwardRef)(function Column(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: props.invertFlexDirection ? "row" : "column", ref: ref, ...props }));
+});
+DivComponent.grid = (0, react_1.forwardRef)(function Grid(props, ref) {
+    return (0, jsx_runtime_1.jsx)(DivComponent, { display: "grid", ref: ref, ...props });
+});
+DivComponent.box = (0, react_1.forwardRef)(function Box(props, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(DivComponent, { backgroundColor: theme.colors.backgroundContent, border: `1px solid ${theme.colors.border}`, borderRadius: theme.styles.borderRadius, paddingBlock: theme.styles.gap, paddingInline: theme.styles.space, ref: ref, ...props }));
+});
+const Div = (0, react_1.memo)(DivComponent);
+Div.row = DivComponent.row;
+Div.column = DivComponent.column;
+Div.grid = DivComponent.grid;
+Div.box = DivComponent.box;
+exports.default = Div;

package/dist/components/Loader.d.ts

@@ -0,0 +1,19 @@
+import { Color } from "../types/theme";
+import { OmitProps } from "../types/app";
+import { DivProps } from "./Div";
+type LoaderProps = {
+    /** @default textPrimary */
+    color?: Color;
+    /** @default 16 */
+    size?: number;
+    /** @default 5 */
+    width?: number;
+    /** @default false */
+    disabled?: boolean;
+} & OmitProps<DivProps<unknown>, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName">;
+type LoaderComponentType = {
+    (props: LoaderProps): React.ReactElement;
+};
+declare const LoaderComponent: LoaderComponentType;
+declare const Loader: typeof LoaderComponent & {};
+export default Loader;

package/dist/components/Loader.js

@@ -0,0 +1,32 @@
+"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 BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const StyledDiv = (0, styled_components_1.default)(Div_1.default) `
+   @keyframes loaderAnimation {
+      to {
+         transform: rotate(360deg);
+      }
+   }
+
+   @keyframes textLoaderAnimation {
+      to {
+         clip-path: inset(0 -1ch 0 0);
+      }
+   }
+`;
+const LoaderComponent = function Loader({ color, size = 16, width, disabled, ...props }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const readyColor = color ?? theme.colors.textPrimary;
+    const readyWidth = width ?? size / 3;
+    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 }));
+};
+const Loader = (0, react_1.memo)(LoaderComponent);
+exports.default = Loader;

package/dist/components/Text.d.ts

@@ -0,0 +1,23 @@
+import { ComponentHoverStyle, 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;
+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;
+};
+declare const TextComponent: TextComponentType;
+declare const Text: typeof TextComponent & {
+    unknown: typeof TextComponent.unknown;
+    oneLine: typeof TextComponent.oneLine;
+};
+export default Text;

package/dist/components/Text.js

@@ -0,0 +1,38 @@
+"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 BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const TextStyledComponent = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
+}) `
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const TextComponent = (0, react_1.forwardRef)(function Text({ as = "p", children, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    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);
+    return ((0, jsx_runtime_1.jsx)(TextStyledComponent, { as: as, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: children }));
+});
+TextComponent.unknown = (0, react_1.forwardRef)(function Unknown(props, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme.colors.textSecondary, ref: ref, ...props }));
+});
+TextComponent.oneLine = (0, react_1.forwardRef)(function OneLine(props, ref) {
+    return (0, jsx_runtime_1.jsx)(TextComponent, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", ref: ref, ...props });
+});
+const Text = (0, react_1.memo)(TextComponent);
+Text.unknown = TextComponent.unknown;
+Text.oneLine = TextComponent.oneLine;
+exports.default = Text;

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 import Div from "./components/Div";
-export { Div };
+import Text from "./components/Text";
+import Loader from "./components/Loader";
+export { Div, Text, Loader };

package/dist/index.js

@@ -3,6 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Div = void 0;
+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;

package/dist/types/components.d.ts

@@ -2,21 +2,5 @@ export type ComponentStyle = React.CSSProperties;
 export type ComponentHoverStyle = {
     [CSSProperty in keyof ComponentStyle as `${CSSProperty & string}Hover`]: ComponentStyle[CSSProperty];
 };
-export type ComponentMarginProps = {
-    margin?: ComponentStyle["margin"];
-    marginTop?: ComponentStyle["marginTop"];
-    marginBottom?: ComponentStyle["marginBottom"];
-    marginLeft?: ComponentStyle["marginLeft"];
-    marginRight?: ComponentStyle["marginRight"];
-    marginBlock?: ComponentStyle["marginBlock"];
-    marginInline?: ComponentStyle["marginInline"];
-};
-export type ComponentPaddingProps = {
-    padding?: ComponentStyle["padding"];
-    paddingTop?: ComponentStyle["paddingTop"];
-    paddingBottom?: ComponentStyle["paddingBottom"];
-    paddingLeft?: ComponentStyle["paddingLeft"];
-    paddingRight?: ComponentStyle["paddingRight"];
-    paddingBlock?: ComponentStyle["paddingBlock"];
-    paddingInline?: ComponentStyle["paddingInline"];
-};
+export type ComponentMarginProps = Pick<ComponentStyle, "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "marginBlock" | "marginInline">;
+export type ComponentPaddingProps = Pick<ComponentStyle, "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingBlock" | "paddingInline">;

package/dist/types/config.d.ts

@@ -0,0 +1,13 @@
+import { PartialTheme, Theme } from "./theme";
+import { AssetsConfig } from "./asset";
+import { IconsConfig } from "./icon";
+export type BetterHtmlConfig = {
+    theme: Theme;
+    icons: Partial<IconsConfig>;
+    assets: Partial<AssetsConfig>;
+};
+export type PartialBetterHtmlConfig = {
+    theme?: PartialTheme;
+    icons?: Partial<IconsConfig>;
+    assets?: Partial<AssetsConfig>;
+};

package/dist/types/config.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/theme.d.ts

@@ -1,14 +1,12 @@
 export type Styles = {
-    sideSpace: number;
-    borderRadius: number;
-    borderRadiusSmall?: number;
+    space: number;
     gap: number;
-    fontSize?: number;
+    borderRadius: number;
     fontFamily: string;
     transition: string;
 };
 export type Color = `#${string}` | "transparent";
-export type Colors = Record<"textPrimary" | "textSecondary" | "brand" | "brandSecondary" | "success" | "info" | "warn" | "error" | "errorSecondary" | "backgroundBase" | "backgroundSecondary" | "backgroundTertiary" | "border", Color>;
+export type Colors = Record<"textPrimary" | "textSecondary" | "label" | "primary" | "secondary" | "success" | "info" | "warn" | "error" | "backgroundBase" | "backgroundSecondary" | "backgroundContent" | "border", Color>;
 export type Theme = {
     styles: Styles;
     colors: Colors;

package/dist/utils/hooks.js

@@ -5,7 +5,7 @@ exports.useComponentPropsWithPrefix = useComponentPropsWithPrefix;
 exports.useComponentPropsWithoutStyle = useComponentPropsWithoutStyle;
 const react_1 = require("react");
 const cssProps = Object.keys(document.documentElement.style).reduce((previousValue, currentValue) => {
-    previousValue[currentValue] = true;
+    previousValue[currentValue.toLowerCase()] = true;
     return previousValue;
 }, {});
 function useStyledComponentStyles(props, theme) {
@@ -20,7 +20,7 @@ function useStyledComponentStyles(props, theme) {
                 hoverStyle[normalKey] = props[key];
             }
             else {
-                if (key.startsWith("data-") || key.startsWith("aria-"))
+                if (!cssProps[key.toLowerCase()])
                     continue;
                 normalStyle[key] = props[key];
             }
@@ -47,7 +47,7 @@ function useComponentPropsWithPrefix(props, prefix) {
 }
 function useComponentPropsWithoutStyle(props) {
     return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
-        if (!cssProps[currentValue])
+        if (!cssProps[currentValue.toLowerCase()])
             previousValue[currentValue] = props[currentValue];
         return previousValue;
     }, {}), [props]);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.7",
+   "version": "1.1.9",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [
@@ -35,11 +35,9 @@
    ],
    "author": "Kristiyan Valchev (kriss.vv)",
    "license": "ISC",
-   "dependencies": {
-      "rimraf": "^6.0.1"
-   },
    "devDependencies": {
       "@types/react": "^19.0.10",
+      "rimraf": "^6.0.1",
       "typescript": "^5.5.3"
    },
    "peerDependencies": {