react-better-html 1.1.9 → 1.1.11

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 krissvv
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,59 @@
 # react-better-html
 
 A component library for react that is as close to plane html as possible
+
+![NPM Version](https://img.shields.io/npm/v/react-better-html)
+![GitHub Repo stars](https://img.shields.io/github/stars/krissvv/react-better-html?style=flat)
+![GitHub package.json version](https://img.shields.io/github/package-json/v/krissvv/react-better-html)
+![NPM Type Definitions](https://img.shields.io/npm/types/react-better-html)<br/>
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/krissvv/react-better-html/deploy.yml)
+![GitHub last commit](https://img.shields.io/github/last-commit/krissvv/react-better-html)
+![NPM Downloads](https://img.shields.io/npm/dm/react-better-html)<br/>
+![NPM License](https://img.shields.io/npm/l/react-better-html)<br/>
+![React dep](https://img.shields.io/badge/React-v19-9b6499)
+
+# 🚧 Work in progress 🚧
+
+🔴 The library is not yet ready for use - development is actively in progress 🔴
+
+## Documentation
+
+You can fined the full documentation on the home page of the official [Docs](https://krissvv.github.io/react-better-html) website.
+
+## Requirements
+
+-  [React](https://react.dev) version 19.0 or above.
+
+The library uses [styles-components](https://styled-components.com) under the hood to create all of the components in the library. `styles-components` is a peer dependency and will be installed automatically when downloading the `react-better-html`.
+
+## Installation
+
+To install `react-better-html` run the following command in your project directory:
+
+```bash
+npm install react-better-html
+```
+
+## Configuration
+
+The `<BetterHtmlProvider>` component should wrap your application's root component to apply the configuration.
+
+```jsx
+import { createRoot } from "react-dom/client";
+import { BetterHtmlProvider } from "react-better-html";
+
+import App from "./App";
+
+const root = document.getElementById("root");
+createRoot(root).render(
+   <BetterHtmlProvider>
+      <App />
+   </BetterHtmlProvider>,
+);
+```
+
+This is enough for the components to work with the default configurations that the library comes with. They can be overridden when passing `value` prop to the `<BetterHtmlProvider>` tag.
+
+## Problems?
+
+Ask for help on [Stack Overflow](https://stackoverflow.com/questions/ask), on our [GitHub repository](https://github.com/krissvv/react-better-html/issues/new) or contact the contributors.

package/dist/components/BetterHtmlProvider.d.ts

@@ -1,8 +1,18 @@
-import { BetterHtmlConfig, PartialBetterHtmlConfig } from "../types/config";
+import { BetterHtmlConfig } from "../types/config";
+import { AnyOtherString, DeepPartialRecord } from "../types/app";
+import { LoaderName } from "../types/loader";
 export declare const useBetterHtmlContext: () => BetterHtmlConfig;
-export declare const useTheme: () => import("../types/theme").Theme;
+export declare const useTheme: () => {
+    colors: import("../types/theme").Colors;
+    styles: import("../types/theme").Styles;
+};
+export declare const useLoader: (loaderName?: LoaderName | AnyOtherString) => boolean;
+export declare const useLoaderControls: () => {
+    startLoading: (loaderName: LoaderName | AnyOtherString) => void;
+    stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
+};
 type BetterHtmlProviderProps = {
-    value?: PartialBetterHtmlConfig;
+    value?: DeepPartialRecord<BetterHtmlConfig>;
     children?: React.ReactNode;
 };
 declare function BetterHtmlProvider({ value, children }: BetterHtmlProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BetterHtmlProvider.js

@@ -1,58 +1,137 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.useBetterHtmlContext = void 0;
+exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const styled_components_1 = require("styled-components");
+const theme_1 = require("../constants/theme");
+const icons_1 = require("../constants/icons");
+const assets_1 = require("../constants/assets");
+const app_1 = require("../constants/app");
+const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
+   body {
+      font-family: ${(props) => props.fontFamily};
+      color: ${(props) => props.color};
+      background-color: ${(props) => props.backgroundColor};
+   }
+
+   * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      -webkit-tap-highlight-color: transparent;
+   }
+
+   a {
+      text-decoration: none;
+      color: inherit;
+   }
+`;
 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;
+    const { setLoaders, ...rest } = context;
+    return rest;
 };
 exports.useBetterHtmlContext = useBetterHtmlContext;
 const useTheme = () => {
     const context = (0, react_1.useContext)(betterHtmlContext);
+    const [currentTheme, setCurrentTheme] = (0, react_1.useState)("light");
     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;
+    (0, react_1.useEffect)(() => {
+        const html = document.querySelector("html");
+        if (!html)
+            return;
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes") {
+                    setCurrentTheme(html.getAttribute("data-theme"));
+                }
+            });
+        });
+        observer.observe(html, {
+            attributes: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return {
+        ...context.theme,
+        colors: context.theme.colors[currentTheme] ?? context.theme.colors.light,
+    };
 };
 exports.useTheme = useTheme;
+const useLoader = (loaderName) => {
+    const context = (0, react_1.useContext)(betterHtmlContext);
+    if (context === undefined)
+        throw new Error("`useLoader()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree.");
+    return loaderName ? context.loaders[loaderName.toString()] ?? false : false;
+};
+exports.useLoader = useLoader;
+const useLoaderControls = () => {
+    const context = (0, react_1.useContext)(betterHtmlContext);
+    if (context === undefined)
+        throw new Error("`useLoaderControls()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree.");
+    const startLoading = (0, react_1.useCallback)((loaderName) => {
+        context.setLoaders((oldValue) => ({
+            ...oldValue,
+            [loaderName.toString()]: true,
+        }));
+    }, []);
+    const stopLoading = (0, react_1.useCallback)((loaderName) => {
+        context.setLoaders((oldValue) => ({
+            ...oldValue,
+            [loaderName.toString()]: false,
+        }));
+    }, []);
+    return {
+        startLoading,
+        stopLoading,
+    };
+};
+exports.useLoaderControls = useLoaderControls;
+function BetterHtmlProviderContent({ children }) {
+    const theme = (0, exports.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GlobalStyle, { fontFamily: theme.styles.fontFamily, color: theme.colors.textPrimary, backgroundColor: theme.colors.backgroundBase }), children] }));
+}
 function BetterHtmlProvider({ value, children }) {
+    const [loaders, setLoaders] = (0, react_1.useState)(value?.loaders ?? {});
     const readyValue = (0, react_1.useMemo)(() => ({
+        app: {
+            ...app_1.appConfig,
+            ...value?.app,
+        },
         theme: {
             styles: {
-                space: 16,
-                gap: 8,
-                borderRadius: 10,
-                fontFamily: "Arial, sans-serif",
-                transition: "ease 0.2s",
+                ...theme_1.theme.styles,
                 ...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,
+                light: {
+                    ...theme_1.theme.colors.light,
+                    ...value?.theme?.colors?.light,
+                },
+                dark: {
+                    ...theme_1.theme.colors.dark,
+                    ...value?.theme?.colors?.dark,
+                },
             },
         },
         icons: {
+            ...icons_1.icons,
             ...value?.icons,
         },
         assets: {
+            ...assets_1.assets,
             ...value?.assets,
         },
-    }), [value]);
-    return (0, jsx_runtime_1.jsx)(betterHtmlContext.Provider, { value: readyValue, children: children });
+        loaders,
+        setLoaders,
+    }), [value, loaders]);
+    return ((0, jsx_runtime_1.jsx)(betterHtmlContext.Provider, { value: readyValue, children: (0, jsx_runtime_1.jsx)(BetterHtmlProviderContent, { children: children }) }));
 }
 exports.default = (0, react_1.memo)(BetterHtmlProvider);

package/dist/components/Button.d.ts

@@ -0,0 +1,63 @@
+import { ComponentProps } from "react";
+import { IconName } from "../types/icon";
+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> = {
+    href?: string;
+    text?: string;
+    value?: Value;
+    icon?: IconName;
+    /** @default "left" */
+    iconPosition?: "left" | "right";
+    /** @default Same as text color */
+    iconColor?: string;
+    /** @default 16 */
+    iconSize?: number;
+    image?: AssetName;
+    /** @default "left" */
+    imagePosition?: "left" | "right";
+    /** @default 16 */
+    imageWidth?: number;
+    /** @default undefined */
+    imageHeight?: number;
+    loaderName?: LoaderName | AnyOtherString;
+    /** @default 16 */
+    loaderSize?: number;
+    /** @default false */
+    isLoading?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    isSmall?: boolean;
+    /** @default false */
+    isSubmit?: boolean;
+    onClickWithValue?: (value: Value) => void;
+} & OmitProps<React.ComponentProps<"button">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;
+type ButtonComponent = {
+    <Value>(props: ButtonProps<Value>): React.ReactElement;
+    secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
+    destructive: <Value>(props: ButtonProps<Value>) => React.ReactElement;
+    icon: <Value>(props: OmitProps<ButtonProps<Value>, "icon" | "width" | "height" | "isSmall"> & {
+        icon: IconName;
+        /** @default 16 */
+        size?: number;
+        /** @default "#000000" */
+        backgroundButtonColor?: string;
+    }) => React.ReactElement;
+    upload: <Value>(props: OmitProps<ButtonProps<Value>, "onClick"> & {
+        accept?: ComponentProps<"input">["accept"];
+        /** @default false */
+        multiple?: boolean;
+        onUpload?: (files: FileList | null) => void;
+    }) => React.ReactElement;
+};
+declare const ButtonComponent: ButtonComponent;
+declare const Button: typeof ButtonComponent & {
+    secondary: typeof ButtonComponent.secondary;
+    destructive: typeof ButtonComponent.destructive;
+    icon: typeof ButtonComponent.icon;
+    upload: typeof ButtonComponent.upload;
+};
+export default Button;

package/dist/components/Button.js

@@ -0,0 +1,157 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 = __importStar(require("styled-components"));
+const hooks_1 = require("../utils/hooks");
+const Div_1 = __importDefault(require("./Div"));
+const Icon_1 = __importDefault(require("./Icon"));
+const Loader_1 = __importDefault(require("./Loader"));
+const Image_1 = __importDefault(require("./Image"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const ButtonElement = styled_components_1.default.button.withConfig({
+    shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle", "isSmall", "withText", "isLoading"].includes(prop),
+}) `
+   position: relative;
+   width: fit-content;
+   min-width: max-content;
+   font-family: ${(props) => props.theme.styles.fontFamily};
+   font-size: 16px;
+   line-height: 20px;
+   text-decoration: none;
+   color: ${(props) => props.theme.colors.base};
+   background-color: ${(props) => props.theme.colors.primary};
+   border: none;
+   border-radius: ${(props) => props.theme.styles.borderRadius}px;
+   padding: ${(props) => props.isSmall
+    ? `${props.theme.styles.gap + 1}px ${props.theme.styles.space}px`
+    : `${(props.theme.styles.gap + props.theme.styles.space) / 2 + 1}px ${props.theme.styles.space + (props.withText ? props.theme.styles.gap : 0)}px`};
+   user-select: none;
+   flex-shrink: 0;
+   transition: ${(props) => props.theme.styles.transition};
+
+   ${(props) => props.disabled
+    ? (0, styled_components_1.css) `
+              opacity: 0.6;
+              cursor: not-allowed;
+
+              &.secondary.disabled {
+                 opacity: 0.4;
+              }
+           `
+    : !props.isLoading
+        ? (0, styled_components_1.css) `
+              cursor: pointer;
+
+              &:not(.secondary):hover {
+                 filter: brightness(0.9);
+              }
+
+              &.secondary:hover {
+                 border-color: ${props.theme.colors.primary};
+              }
+           `
+        : ""}
+
+   &.secondary {
+      padding-block: ${(props) => props.isSmall ? props.theme.styles.gap : (props.theme.styles.space + props.theme.styles.gap) / 2}px;
+      border: solid 1px ${(props) => props.theme.colors.border};
+      background-color: ${(props) => props.theme.colors.backgroundContent};
+      background-image: none;
+
+      ${(props) => props.normalStyle}
+   }
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+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 isLoadingElement = isLoading ?? isLoadingHook;
+    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);
+    const onClickElement = (0, react_1.useCallback)((event) => {
+        onClick?.(event);
+        onClickWithValue?.(value);
+    }, [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 }) })] }));
+};
+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 }));
+};
+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 });
+};
+ButtonComponent.icon = function Icon({ size = 16, backgroundButtonColor, ...props }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    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 }));
+};
+ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...props }) {
+    const onClickElement = (0, react_1.useCallback)(() => {
+        const input = document.createElement("input");
+        input.setAttribute("type", "file");
+        if (accept)
+            input.setAttribute("accept", accept);
+        if (multiple)
+            input.setAttribute("multiple", "true");
+        input.addEventListener("change", () => {
+            onUpload?.(input.files);
+        });
+        input.click();
+    }, [accept]);
+    return (0, jsx_runtime_1.jsx)(ButtonComponent, { text: "Upload", icon: "uploadCloud", onClick: onClickElement, ...props });
+};
+const Button = (0, react_1.memo)(ButtonComponent);
+Button.secondary = ButtonComponent.secondary;
+Button.destructive = ButtonComponent.destructive;
+Button.icon = ButtonComponent.icon;
+Button.upload = ButtonComponent.upload;
+exports.default = Button;

package/dist/components/Div.d.ts

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

package/dist/components/Div.js

@@ -9,7 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../constants");
 const hooks_1 = require("../utils/hooks");
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const DivStylesComponent = styled_components_1.default.div.withConfig({
+const DivStyledComponent = styled_components_1.default.div.withConfig({
     shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
 }) `
    ${(props) => props.normalStyle}
@@ -37,7 +37,7 @@ const DivComponent = (0, react_1.forwardRef)(function Div({ value, as, isTabAcce
             event.currentTarget.click();
         }
     }, [onKeyDown, isTabAccessed]);
-    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 }));
+    return ((0, jsx_runtime_1.jsx)(DivStyledComponent, { 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 }));
 });
 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 }));

package/dist/components/Divider.d.ts

@@ -0,0 +1,21 @@
+type DividerProps = {
+    /** @default 1 */
+    width?: number;
+    /** @default border */
+    backgroundColor?: string;
+    paddingBlock?: number;
+};
+type VerticalDividerProps = DividerProps & {
+    /** @default "100%" */
+    height?: number;
+};
+type HorizontalDividerProps = DividerProps & {
+    text?: string;
+    /** @default textSecondary */
+    textColor?: string;
+};
+declare const _default: {
+    vertical: import("react").NamedExoticComponent<VerticalDividerProps>;
+    horizontal: import("react").NamedExoticComponent<HorizontalDividerProps>;
+};
+export default _default;

package/dist/components/Divider.js

@@ -0,0 +1,20 @@
+"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 Text_1 = __importDefault(require("./Text"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+exports.default = {
+    vertical: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, paddingBlock, height }) {
+        const theme = (0, BetterHtmlProvider_1.useTheme)();
+        return ((0, jsx_runtime_1.jsx)(Div_1.default, { width: width, height: height ?? "100%", flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border, paddingBlock: paddingBlock }));
+    }),
+    horizontal: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, paddingBlock, text, textColor, }) {
+        const theme = (0, BetterHtmlProvider_1.useTheme)();
+        return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: text ? theme.styles.space : undefined, paddingBlock: paddingBlock, children: [(0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border }), text && (0, jsx_runtime_1.jsx)(Text_1.default, { color: textColor ?? theme.colors.textSecondary, children: text }), (0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border })] }));
+    }),
+};

package/dist/components/Icon.d.ts

@@ -0,0 +1,13 @@
+import { AnyOtherString, OmitProps } from "../types/app";
+import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
+import { IconName } from "../types/icon";
+type IconProps = {
+    name: IconName | AnyOtherString;
+    /** @default 16 */
+    size?: number;
+} & OmitProps<React.ComponentProps<"svg">, "style" | "width" | "height" | "viewBox" | "fill" | "xmlns"> & ComponentStyle & ComponentHoverStyle;
+type IconComponent = {
+    (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
+};
+declare const _default: IconComponent;
+export default _default;

package/dist/components/Icon.js

@@ -0,0 +1,36 @@
+"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 react_2 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../utils/hooks");
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const IconElement = styled_components_1.default.svg.withConfig({
+    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
+}) `
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const Icon = (0, react_2.forwardRef)(function Icon({ name, size = 16, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const { icons } = (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);
+    const svgColor = props.color ?? theme.colors.textPrimary;
+    (0, react_2.useEffect)(() => {
+        if (!icons[name])
+            console.warn(`The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterHtmlProvider>\` config value prop.`);
+    }, [icons, name]);
+    return ((0, jsx_runtime_1.jsx)(IconElement, { width: size, height: size, viewBox: `0 0 ${icons[name]?.width ?? 0} ${icons[name]?.height ?? 0}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: icons[name]?.paths.map((path) => ((0, react_1.createElement)("path", { ...path, fill: path.type === "fill" ? svgColor : undefined, stroke: path.type === "stroke" ? svgColor : undefined, key: path.d }))) }));
+});
+const MemoizedIcon = (0, react_2.memo)(Icon);
+exports.default = { Icon: MemoizedIcon }.Icon;