react-better-html 1.1.72 → 1.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.72",
+   "version": "1.1.74",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [
@@ -23,7 +23,7 @@
    "scripts": {
       "clean": "rimraf dist",
       "prebuild": "npm run clean",
-      "build": "tsc",
+      "build": "tsup",
       "predeploy": "npm run build",
       "deploy": "npm publish"
    },
@@ -39,12 +39,13 @@
    "devDependencies": {
       "@types/react": "^19.0.10",
       "rimraf": "^6.0.1",
+      "tsup": "^8.5.0",
       "typescript": "^5.5.3"
    },
    "peerDependencies": {
       "react": "^19.0.0",
-      "react-router-dom": "^7.6.0",
       "react-dom": "^19.1.0",
+      "react-router-dom": "^7.6.0",
       "styled-components": "^6.1.15"
    }
 }

package/dist/components/BetterHtmlProvider.d.ts

@@ -1,29 +0,0 @@
-import { BetterHtmlConfig } from "../types/config";
-import { AnyOtherString, DeepPartialRecord, OmitProps } from "../types/app";
-import { LoaderConfig, LoaderName } from "../types/loader";
-import { BetterHtmlPlugin, PluginName } from "../types/plugin";
-export type BetterHtmlInternalConfig = BetterHtmlConfig & {
-    setLoaders: React.Dispatch<React.SetStateAction<Partial<LoaderConfig>>>;
-    plugins: BetterHtmlPlugin[];
-};
-export declare let externalBetterHtmlContextValue: BetterHtmlInternalConfig | undefined;
-export declare const useBetterHtmlContext: () => BetterHtmlConfig;
-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;
-};
-export declare const usePlugin: (pluginName: PluginName) => BetterHtmlPlugin | undefined;
-export type BetterHtmlProviderValue = DeepPartialRecord<OmitProps<BetterHtmlConfig, "colorTheme">>;
-type BetterHtmlProviderProps = {
-    value?: BetterHtmlProviderValue;
-    plugins?: BetterHtmlPlugin[];
-    children?: React.ReactNode;
-};
-declare function BetterHtmlProvider({ value, plugins: pluginsToUse, children }: BetterHtmlProviderProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof BetterHtmlProvider>;
-export default _default;

package/dist/components/BetterHtmlProvider.js

@@ -1,161 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlugin = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.externalBetterHtmlContextValue = 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;
-   }
-
-   .react-better-html-no-scrollbar::-webkit-scrollbar {
-      display: none;
-   }
-`;
-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.");
-    const { setLoaders, plugins, ...rest } = context;
-    return rest;
-};
-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,
-        colors: context.theme.colors[context.colorTheme] ?? 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;
-const usePlugin = (pluginName) => {
-    const context = (0, react_1.useContext)(betterHtmlContext);
-    if (context === undefined) {
-        throw new Error("`usePlugin()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree.");
-    }
-    return context.plugins.find((plugin) => plugin.name === pluginName);
-};
-exports.usePlugin = usePlugin;
-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, plugins: pluginsToUse, children }) {
-    const [loaders, setLoaders] = (0, react_1.useState)(value?.loaders ?? {});
-    const [plugins] = (0, react_1.useState)(pluginsToUse ?? []);
-    const [colorTheme, setColorTheme] = (0, react_1.useState)(localStorage.getItem("theme") === "dark" ? "dark" : "light");
-    const readyValue = (0, react_1.useMemo)(() => ({
-        app: {
-            ...app_1.appConfig,
-            ...value?.app,
-        },
-        theme: {
-            styles: {
-                ...theme_1.theme.styles,
-                ...value?.theme?.styles,
-            },
-            colors: {
-                light: {
-                    ...theme_1.theme.colors.light,
-                    ...value?.theme?.colors?.light,
-                },
-                dark: {
-                    ...theme_1.theme.colors.dark,
-                    ...value?.theme?.colors?.dark,
-                },
-            },
-        },
-        colorTheme,
-        icons: {
-            ...icons_1.icons,
-            ...value?.icons,
-        },
-        assets: {
-            ...assets_1.assets,
-            ...value?.assets,
-        },
-        loaders,
-        setLoaders,
-        components: {
-            ...value?.components,
-        },
-        plugins,
-    }), [value, colorTheme, loaders, plugins]);
-    (0, react_1.useEffect)(() => {
-        plugins.forEach((plugin) => {
-            plugin.initialize?.();
-        });
-    }, [plugins]);
-    (0, react_1.useEffect)(() => {
-        const html = document.querySelector("html");
-        if (!html)
-            return;
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type === "attributes") {
-                    setColorTheme(html.getAttribute("data-theme") === "dark" ? "dark" : "light");
-                }
-            });
-        });
-        observer.observe(html, {
-            attributes: true,
-        });
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    exports.externalBetterHtmlContextValue = readyValue;
-    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

@@ -1,65 +0,0 @@
-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";
-export type ButtonProps<Value> = {
-    text?: string;
-    value?: Value;
-    href?: string;
-    download?: string;
-    target?: React.ComponentProps<"a">["target"];
-    icon?: IconName | AnyOtherString;
-    /** @default "left" */
-    iconPosition?: "left" | "right";
-    /** @default Same as text color */
-    iconColor?: string;
-    /** @default 16 */
-    iconSize?: number;
-    image?: AssetName | AnyOtherString;
-    /** @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" | "translate" | "value"> & 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 | AnyOtherString;
-        /** @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

@@ -1,166 +0,0 @@
-"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),
-}) `
-   display: block;
-   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 {
-                 filter: brightness(0.9);
-              }
-           `
-    : !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, download, target, 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)({
-        ...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);
-    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, download: download, target: target, 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)();
-    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)();
-    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, { ...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");
-        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, { ...betterHtmlContext.components.button?.upload, 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/Chip.d.ts

@@ -1,20 +0,0 @@
-import { ComponentPropWithRef } from "../types/components";
-import { OmitProps } from "../types/app";
-export type ChipProps = {
-    text: string;
-    /** @default theme.colors.textPrimary */
-    color?: string;
-    /** @default backgroundSecondary */
-    backgroundColor?: string;
-    /** @default theme.styles.borderRadius / 1.3 */
-    borderRadius?: number;
-};
-type ChipComponentType = {
-    (props: ComponentPropWithRef<HTMLDivElement, ChipProps>): React.ReactElement;
-    circle: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "borderRadius">>) => React.ReactElement;
-};
-declare const ChipComponent: ChipComponentType;
-declare const Chip: typeof ChipComponent & {
-    circle: typeof ChipComponent.circle;
-};
-export default Chip;

package/dist/components/Chip.js

@@ -1,20 +0,0 @@
-"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");
-const ChipComponent = (0, react_1.forwardRef)(function Chip({ text, color, backgroundColor, borderRadius }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Div_1.default, { width: "fit-content", backgroundColor: backgroundColor ?? theme.colors.backgroundSecondary, borderRadius: borderRadius ?? theme.styles.borderRadius / 1.3, paddingBlock: theme.styles.gap, paddingInline: theme.styles.space, ref: ref, children: (0, jsx_runtime_1.jsx)(Text_1.default, { color: color ?? theme.colors.textPrimary, children: text }) }));
-});
-ChipComponent.circle = (0, react_1.forwardRef)(function Circle(props, ref) {
-    return (0, jsx_runtime_1.jsx)(ChipComponent, { borderRadius: 999, ref: ref, ...props });
-});
-const Chip = (0, react_1.memo)(ChipComponent);
-Chip.circle = ChipComponent.circle;
-exports.default = Chip;

package/dist/components/ColorThemeSwitch.d.ts

@@ -1,15 +0,0 @@
-import { ComponentMarginProps } from "../types/components";
-export type ColorThemeSwitchProps = {
-    /** @default false */
-    withMoon?: boolean;
-    className?: string;
-} & ComponentMarginProps;
-type ColorThemeSwitchComponentType = {
-    (props: ColorThemeSwitchProps): React.ReactElement;
-    withText: (props: ColorThemeSwitchProps) => React.ReactElement;
-};
-declare const ColorThemeSwitchComponent: ColorThemeSwitchComponentType;
-declare const ColorThemeSwitch: typeof ColorThemeSwitchComponent & {
-    withText: typeof ColorThemeSwitchComponent.withText;
-};
-export default ColorThemeSwitch;

package/dist/components/ColorThemeSwitch.js

@@ -1,54 +0,0 @@
-"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 hooks_1 = require("../utils/hooks");
-const Div_1 = __importDefault(require("./Div"));
-const Text_1 = __importDefault(require("./Text"));
-const ToggleInput_1 = __importDefault(require("./ToggleInput"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const ColorThemeSwitchComponent = function ColorThemeSwitch({ withMoon, className, ...props }) {
-    const form = (0, hooks_1.useForm)({
-        defaultValues: {
-            darkMode: localStorage.getItem("theme") === "dark",
-        },
-    });
-    (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => {
-            window.document.body.parentElement?.setAttribute("data-theme", form.values.darkMode ? "dark" : "light");
-            localStorage.setItem("theme", form.values.darkMode ? "dark" : "light");
-        }, 0.2 * 1000);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [form.values.darkMode]);
-    (0, react_1.useEffect)(() => {
-        const html = document.querySelector("html");
-        if (!html)
-            return;
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type === "attributes") {
-                    form.setFieldValue("darkMode", html.getAttribute("data-theme") === "dark");
-                }
-            });
-        });
-        observer.observe(html, {
-            attributes: true,
-        });
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.switch, { className: `react-better-html-color-theme-switch ${withMoon ? ` react-better-html-color-theme-switch-with-moon` : ""}${className ? ` ${className}` : ""}`, ...form.getSwitchProps("darkMode"), ...props }));
-};
-ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "fit-content", alignItems: "center", gap: theme.styles.gap, userSelect: "none", ...props, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { children: "Light" }), (0, jsx_runtime_1.jsx)(ColorThemeSwitchComponent, { withMoon: withMoon, className: className }), (0, jsx_runtime_1.jsx)(Text_1.default, { children: "Dark" })] }));
-};
-const ColorThemeSwitch = (0, react_1.memo)(ColorThemeSwitchComponent);
-ColorThemeSwitch.withText = ColorThemeSwitchComponent.withText;
-exports.default = ColorThemeSwitch;

package/dist/components/Div.d.ts

@@ -1,30 +0,0 @@
-import { WebTarget } from "styled-components";
-import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
-import { OmitProps } from "../types/app";
-export type DivProps<Value> = {
-    value?: Value;
-    /** @default "div" */
-    as?: WebTarget;
-    /** @default false */
-    isTabAccessed?: boolean;
-    onClickWithValue?: (value: Value) => void;
-} & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;
-type DivComponentType = {
-    <Value>(props: ComponentPropWithRef<HTMLDivElement, DivProps<Value>>): React.ReactElement;
-    row: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
-        invertFlexDirection?: boolean;
-    }>) => React.ReactElement;
-    column: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<DivProps<Value>, "display" | "flexDirection"> & {
-        invertFlexDirection?: boolean;
-    }>) => 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 & {
-    row: typeof DivComponent.row;
-    column: typeof DivComponent.column;
-    grid: typeof DivComponent.grid;
-    box: typeof DivComponent.box;
-};
-export default Div;

package/dist/components/Div.js

@@ -1,60 +0,0 @@
-"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 constants_1 = require("../constants");
-const hooks_1 = require("../utils/hooks");
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const DivStyledComponent = styled_components_1.default.div.withConfig({
-    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
-}) `
-   ${(props) => props.normalStyle}
-
-   &:hover {
-      ${(props) => props.hoverStyle}
-   }
-`;
-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);
-    const onClickElement = (0, react_1.useCallback)((event) => {
-        onClick?.(event);
-        onClickWithValue?.(value);
-    }, [onClick, onClickWithValue, value]);
-    const onKeyDownElement = (0, react_1.useCallback)((event) => {
-        onKeyDown?.(event);
-        if (!isTabAccessed)
-            return;
-        if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            event.currentTarget.click();
-        }
-    }, [onKeyDown, isTabAccessed]);
-    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({ invertFlexDirection, ...props }, ref) {
-    return (0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: invertFlexDirection ? "column" : "row", ref: ref, ...props });
-});
-DivComponent.column = (0, react_1.forwardRef)(function Column({ invertFlexDirection, ...props }, ref) {
-    return (0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: 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;