react-better-html 1.1.10 → 1.1.12

package/dist/components/Dropdown.js

@@ -0,0 +1,157 @@
+"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 hooks_2 = require("../utils/hooks");
+const Text_1 = __importDefault(require("./Text"));
+const Div_1 = __importDefault(require("./Div"));
+const InputField_1 = __importDefault(require("./InputField"));
+const Icon_1 = __importDefault(require("./Icon"));
+const Button_1 = __importDefault(require("./Button"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const Loader_1 = __importDefault(require("./Loader"));
+const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, placeholder = "Select an option", leftIcon, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, onChange, onChangeSearch, renderOption, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const dropdownHolderRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, hooks_1.useBooleanState)();
+    const [isOpenLate, setIsOpenLate] = (0, hooks_1.useBooleanState)();
+    const [isFocused, setIsFocused] = (0, hooks_1.useBooleanState)();
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
+    const [_, debouncedSearchQuery, setDebouncedSearchQuery, isLoadingDebouncedSearchQuery] = (0, hooks_2.useDebounceState)("", debounceDelay);
+    const [focusedOptionIndex, setFocusedOptionIndex] = (0, react_1.useState)();
+    const [internalValue, setInternalValue] = (0, react_1.useState)();
+    const value = controlledValue ?? internalValue;
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (!searchQuery)
+            return options;
+        const query = searchQuery.toLowerCase();
+        return options.filter((option) => option.label.toLowerCase().includes(query) ||
+            option.searchValues?.some((value) => value.toLowerCase().includes(query)));
+    }, [options, searchQuery]);
+    const onKeyDownInputField = (0, react_1.useCallback)((event) => {
+        if (event.key === "Enter" || (!withSearch && event.key === " ")) {
+            event.preventDefault();
+            if (!disabled) {
+                setIsOpen.toggle();
+                if (isOpen && filteredOptions.length > 0 && focusedOptionIndex !== undefined) {
+                    const option = filteredOptions[focusedOptionIndex];
+                    if (!option.disabled) {
+                        if (controlledValue === undefined)
+                            setInternalValue(option.value);
+                        onChange?.(option.value);
+                        setIsOpen.setFalse();
+                        inputRef.current?.blur();
+                        setSearchQuery("");
+                        setFocusedOptionIndex(undefined);
+                    }
+                }
+            }
+        }
+        else if (event.key === "Escape") {
+            setIsOpen.setFalse();
+            setFocusedOptionIndex(undefined);
+        }
+        else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            if (!isOpen)
+                setIsOpen.setTrue();
+            if (filteredOptions.length > 0) {
+                setFocusedOptionIndex((oldValue) => oldValue === undefined ? 0 : (oldValue + 1) % filteredOptions.length);
+            }
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!isOpen)
+                setIsOpen.setTrue();
+            if (filteredOptions.length > 0) {
+                setFocusedOptionIndex((oldValue) => oldValue === undefined
+                    ? filteredOptions.length - 1
+                    : (oldValue - 1 + filteredOptions.length) % filteredOptions.length);
+            }
+        }
+    }, [disabled, withSearch, isOpen, filteredOptions, focusedOptionIndex, controlledValue, onChange]);
+    const onClickOption = (0, react_1.useCallback)((option) => {
+        if (!option.disabled) {
+            if (controlledValue === undefined)
+                setInternalValue(option.value);
+            onChange?.(option.value);
+            setIsOpen.setFalse();
+            inputRef.current?.blur();
+            setSearchQuery("");
+            setFocusedOptionIndex(undefined);
+        }
+    }, [onChange, controlledValue]);
+    const onClickClearButton = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (controlledValue === undefined)
+            setInternalValue(undefined);
+        onChange?.(undefined);
+        setIsOpen.setFalse();
+        inputRef.current?.blur();
+        setSearchQuery("");
+        setFocusedOptionIndex(undefined);
+    }, [controlledValue, onChange]);
+    const onChangeValue = (0, react_1.useCallback)((newValue) => {
+        setSearchQuery(newValue);
+        if (withDebounce)
+            setDebouncedSearchQuery(newValue);
+        else
+            onChangeSearch?.(newValue);
+    }, [withDebounce, onChangeSearch]);
+    const selectedOption = (0, react_1.useMemo)(() => options.find((option) => option.value === value), [options, value]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            setIsOpenLate.setTrue();
+            if (withSearch && inputRef.current)
+                inputRef.current.focus();
+        }
+        else {
+            const timeout = setTimeout(setIsOpenLate.setFalse, 0.2 * 1000);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [isOpen, withSearch]);
+    (0, react_1.useEffect)(() => {
+        setFocusedOptionIndex(undefined);
+    }, [filteredOptions]);
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownHolderRef.current && !dropdownHolderRef.current.contains(event.target)) {
+                setIsOpen.setFalse();
+                setSearchQuery("");
+                setFocusedOptionIndex(undefined);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!withDebounce)
+            return;
+        onChangeSearch?.(debouncedSearchQuery);
+    }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
+    const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
+    const withClearButton = isOpen && selectedOption;
+    return ((0, jsx_runtime_1.jsx)(Div_1.default.column, { position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", width: "100%", children: [(0, jsx_runtime_1.jsx)(InputField_1.default, { label: label, errorText: errorText, infoText: infoText, required: required, disabled: disabled, readOnly: !withSearch, value: displayValue, placeholder: withSearch ? (selectedOption ? selectedOption.label : placeholder) : placeholder, leftIcon: leftIcon, className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}`, zIndex: isOpen || isOpenLate ? 1001 : undefined, onClick: !disabled ? setIsOpen.toggle : undefined, onFocus: setIsFocused.setTrue, onBlur: setIsFocused.setFalse, onKeyDown: onKeyDownInputField, onChangeValue: withSearch ? onChangeValue : undefined, insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`, borderTop: "none", borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", zIndex: 1000, overflowY: "auto", opacity: !isOpen ? 0 : undefined, pointerEvents: !isOpen ? "none" : undefined, transform: `translateY(${!isOpen ? -10 : 0}px)`, transition: theme.styles.transition, role: "listbox", "aria-label": label, children: isLoadingDebouncedSearchQuery || debounceIsLoading ? ((0, jsx_runtime_1.jsx)(Div_1.default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: (0, jsx_runtime_1.jsx)(Loader_1.default.text, {}) })) : filteredOptions.length ? (filteredOptions.map((option, index) => {
+                            const isSelected = option.value === value;
+                            const isDisabled = option.disabled;
+                            const isFocused = index === focusedOptionIndex;
+                            return ((0, jsx_runtime_1.jsx)(Div_1.default, { color: isDisabled
+                                    ? theme.colors.textSecondary + "80"
+                                    : isSelected
+                                        ? theme.colors.base
+                                        : theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filter: isFocused ? (isDisabled ? "brightness(0.95)" : "brightness(0.9)") : undefined, filterHover: focusedOptionIndex === undefined && !isDisabled ? "brightness(0.9)" : undefined, cursor: isDisabled ? "not-allowed" : "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: option, onClickWithValue: onClickOption, onMouseMove: () => setFocusedOptionIndex(undefined), role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, children: renderOption ? renderOption(option, index) : (0, jsx_runtime_1.jsx)(Text_1.default, { children: option.label }) }, JSON.stringify(option)));
+                        })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { textAlign: "left", children: "No options" }) })) }), role: "combobox", "aria-expanded": isOpen, "aria-controls": "dropdown-list", "aria-haspopup": "listbox", "aria-label": label, ref: inputRef }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "absolute", top: 46 / 2 + (label ? 16 + theme.styles.gap / 2 : 0), right: theme.styles.space + 1, alignItems: "center", gap: theme.styles.gap, transform: "translateY(-50%)", pointerEvents: "none", filter: disabled ? "brightness(0.9)" : undefined, opacity: disabled ? 0.6 : undefined, zIndex: isOpen || isOpenLate ? 1001 : undefined, children: [(0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", position: "relative", size: 10, iconSize: 14, opacity: !withClearButton ? 0 : undefined, pointerEvents: withClearButton ? "all" : undefined, onClick: onClickClearButton, disabled: !withClearButton }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "chevronDown", position: "relative", size: 16, color: theme.colors.textSecondary, transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme.styles.transition, pointerEvents: "none" })] })] }) }));
+});
+const Dropdown = (0, react_1.memo)(DropdownComponent);
+exports.default = Dropdown;

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;

package/dist/components/Image.d.ts

@@ -0,0 +1,18 @@
+import { AnyOtherString, OmitProps } from "../types/app";
+import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
+import { AssetName } from "../types/asset";
+type ImageProps = {
+    name?: AssetName | AnyOtherString;
+} & OmitProps<React.ComponentProps<"img">, "style"> & ComponentStyle & ComponentHoverStyle;
+type ImageComponent = {
+    (props: ComponentPropWithRef<HTMLImageElement, ImageProps>): React.ReactElement;
+    profileImage: (props: ComponentPropWithRef<HTMLImageElement, OmitProps<ImageProps, "width" | "height"> & {
+        /** @default 40 */
+        size?: number;
+    }>) => React.ReactElement;
+};
+declare const Image: ImageComponent;
+declare const _default: ImageComponent & {
+    profileImage: typeof Image.profileImage;
+};
+export default _default;

package/dist/components/Image.js

@@ -0,0 +1,44 @@
+"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 BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const hooks_1 = require("../utils/hooks");
+const ImageElement = styled_components_1.default.img.withConfig({
+    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
+}) `
+   display: block;
+   user-select: none;
+   -webkit-user-drag: none;
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const Image = (0, react_1.forwardRef)(function Image({ name, src, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const { assets } = (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);
+    (0, react_1.useEffect)(() => {
+        if (!name)
+            return;
+        if (!assets[name.toString()])
+            console.warn(`The asset \`${name}\` you are trying to use does not exist. Make sure to add it to the \`assets\` object in \`<BetterHtmlProvider>\` config value prop.`);
+    }, [assets, name]);
+    return ((0, jsx_runtime_1.jsx)(ImageElement, { ...styledComponentStyles, src: name ? assets[name.toString()] : src, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }));
+});
+Image.profileImage = (0, react_1.forwardRef)(function ProfileImage({ size = 40, ...props }, ref) {
+    return (0, jsx_runtime_1.jsx)(Image, { width: size, height: size, borderRadius: "50%", objectFit: "cover", ref: ref, ...props });
+});
+const MemoizedImage = (0, react_1.memo)(Image);
+MemoizedImage.profileImage = Image.profileImage;
+exports.default = { Image: MemoizedImage }.Image;

package/dist/components/InputField.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
+import { OmitProps } from "../types/app";
+import { IconName } from "../types/icon";
+type InputFieldProps = {
+    label?: string;
+    errorText?: string;
+    infoText?: string;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+    insideInputFieldComponent?: React.ReactNode;
+    withDebounce?: boolean;
+    /** @default 0.5s */
+    debounceDelay?: number;
+    onChangeValue?: (value: string) => void;
+    onClickRightIcon?: () => void;
+} & OmitProps<React.ComponentProps<"input">, "style"> & ComponentStyle & ComponentHoverStyle;
+type InputFieldComponentType = {
+    (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
+    multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
+    email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+};
+declare const InputFieldComponent: InputFieldComponentType;
+type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style">;
+declare const InputField: typeof InputFieldComponent & {
+    multiline: typeof InputFieldComponent.multiline;
+    email: typeof InputFieldComponent.email;
+    password: typeof InputFieldComponent.password;
+    search: typeof InputFieldComponent.search;
+};
+export default InputField;

package/dist/components/InputField.js

@@ -0,0 +1,146 @@
+"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 Text_1 = __importDefault(require("./Text"));
+const Div_1 = __importDefault(require("./Div"));
+const Icon_1 = __importDefault(require("./Icon"));
+const Button_1 = __importDefault(require("./Button"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const InputElement = styled_components_1.default.input.withConfig({
+    shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop),
+}) `
+   position: relative;
+   width: 100%;
+   font-family: ${(props) => props.theme.styles.fontFamily};
+   font-size: 16px;
+   line-height: 20px;
+   color: ${(props) => props.theme.colors.textPrimary};
+   background: ${(props) => props.theme.colors.backgroundContent};
+   border: 1px solid ${(props) => props.theme.colors.border};
+   border-radius: ${(props) => props.theme.styles.borderRadius}px;
+   outline: none;
+   padding: ${(props) => `${(props.theme.styles.space + props.theme.styles.gap) / 2}px ${props.theme.styles.space + props.theme.styles.gap}px`};
+   padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : undefined};
+   padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : undefined};
+   transition: ${(props) => props.theme.styles.transition};
+
+   &::placeholder {
+      color: ${(props) => props.theme.colors.textSecondary}80;
+   }
+
+   &:focus {
+      border-color: ${(props) => props.theme.colors.primary};
+   }
+
+   &:disabled {
+      filter: brightness(0.9);
+      cursor: not-allowed;
+   }
+
+   &.react-better-html-dropdown {
+      padding-right: ${(props) => props.theme.styles.space + 16 + props.theme.styles.space - 1}px;
+
+      &.react-better-html-dropdown-open {
+         border-bottom-left-radius: 0px;
+         border-bottom-right-radius: 0px;
+      }
+   }
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const TextareaElement = styled_components_1.default.textarea.withConfig({
+    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
+}) `
+   width: 100%;
+   min-height: 3lh;
+   max-height: 8lh;
+   font-family: ${(props) => props.theme.styles.fontFamily};
+   font-size: 16px;
+   line-height: 20px;
+   color: ${(props) => props.theme.colors.textPrimary};
+   background: ${(props) => props.theme.colors.backgroundContent};
+   border: 1px solid ${(props) => props.theme.colors.border};
+   border-radius: ${(props) => props.theme.styles.borderRadius}px;
+   outline: none;
+   padding: ${(props) => `${(props.theme.styles.gap + props.theme.styles.space) / 2}px ${props.theme.styles.space + props.theme.styles.gap}px`};
+   resize: vertical;
+   transition: border-color ${(props) => props.theme.styles.transition};
+
+   &::placeholder {
+      color: ${(props) => props.theme.colors.textSecondary}80;
+   }
+
+   &:focus {
+      border-color: ${(props) => props.theme.colors.primary};
+   }
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label, errorText, infoText, leftIcon, rightIcon, insideInputFieldComponent, withDebounce, debounceDelay = 0.5, onChange, onChangeValue, onClickRightIcon, required, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const [_, debouncedValue, setDebouncedValue] = (0, hooks_1.useDebounceState)(props.value?.toString() ?? "", debounceDelay);
+    const styledComponentStylesWithoutExcluded = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
+    const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
+    const dataProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "data");
+    const ariaProps = (0, hooks_1.useComponentPropsWithPrefix)(props, "aria");
+    const restProps = (0, hooks_1.useComponentPropsWithoutStyle)(props);
+    const onChangeElement = (0, react_1.useCallback)((event) => {
+        const newValue = event.target.value;
+        if (withDebounce) {
+            onChange?.(event);
+            setDebouncedValue(newValue);
+        }
+        else {
+            onChange?.(event);
+            onChangeValue?.(newValue);
+        }
+    }, [onChange, onChangeValue, withDebounce]);
+    (0, react_1.useEffect)(() => {
+        if (!withDebounce)
+            return;
+        onChangeValue?.(debouncedValue);
+    }, [withDebounce, onChangeValue, debouncedValue]);
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1002 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
+});
+InputFieldComponent.multiline = (0, react_1.forwardRef)(function Textarea({ label, errorText, infoText, onChange, onChangeValue, required, ...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 onChangeElement = (0, react_1.useCallback)((event) => {
+        onChange?.(event);
+        onChangeValue?.(event.target.value);
+    }, [onChange, onChangeValue]);
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: [label, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] })), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
+});
+InputFieldComponent.email = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "email", placeholder: "your@email.here", autoComplete: "email", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));
+});
+InputFieldComponent.password = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
+    const [isPassword, setIsPassword] = (0, hooks_1.useBooleanState)(true);
+    return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: isPassword ? "password" : "text", placeholder: "******", rightIcon: isPassword ? "eye" : "eyeDashed", onClickRightIcon: setIsPassword.toggle, autoComplete: "current-password", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));
+});
+InputFieldComponent.search = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
+    return (0, jsx_runtime_1.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref: ref, ...props });
+});
+const InputField = (0, react_1.memo)(InputFieldComponent);
+InputField.multiline = InputFieldComponent.multiline;
+InputField.email = InputFieldComponent.email;
+InputField.password = InputFieldComponent.password;
+InputField.search = InputFieldComponent.search;
+exports.default = InputField;

package/dist/components/Loader.d.ts

@@ -13,7 +13,22 @@ type LoaderProps = {
 } & OmitProps<DivProps<unknown>, "width" | "height" | "color" | "background" | "borderRadius" | "mask" | "WebkitMask" | "padding" | "animation" | "animationName">;
 type LoaderComponentType = {
     (props: LoaderProps): React.ReactElement;
+    box: (props: OmitProps<LoaderProps, "size"> & {
+        /** @default "Loading..." */
+        text?: string;
+        /** @default 20 */
+        size?: number;
+    }) => React.ReactElement;
+    text: (props: OmitProps<LoaderProps, "size"> & {
+        /** @default "Loading..." */
+        text?: string;
+        /** @default 14 */
+        size?: number;
+    }) => React.ReactElement;
 };
 declare const LoaderComponent: LoaderComponentType;
-declare const Loader: typeof LoaderComponent & {};
+declare const Loader: typeof LoaderComponent & {
+    box: typeof LoaderComponent.box;
+    text: typeof LoaderComponent.text;
+};
 export default Loader;

package/dist/components/Loader.js

@@ -7,6 +7,7 @@ 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 Text_1 = __importDefault(require("./Text"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 const StyledDiv = (0, styled_components_1.default)(Div_1.default) `
    @keyframes loaderAnimation {
@@ -28,5 +29,15 @@ const LoaderComponent = function Loader({ color, size = 16, width, disabled, ...
     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 }));
 };
+LoaderComponent.box = function Box({ text = "Loading...", size = 20, ...props }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsx)(Loader, { size: size, ...props }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: "center", color: props.color ?? theme.colors.textSecondary, children: text }))] }));
+};
+LoaderComponent.text = function LoaderText({ text = "Loading...", size = 14, ...props }) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsx)(Loader, { size: size, ...props }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: "center", color: props.color ?? theme.colors.textSecondary, children: text }))] }));
+};
 const Loader = (0, react_1.memo)(LoaderComponent);
+Loader.box = LoaderComponent.box;
+Loader.text = LoaderComponent.text;
 exports.default = Loader;

package/dist/components/Modal.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropWithRef } from "../types/components";
+import { OmitProps } from "../types/app";
+type ModalProps = {
+    /**
+     * If you want to have a small modal, you can use 660px as it looks good on most screens.
+     *
+     * @default 30% smaller than app.contentMaxWidth
+     * */
+    maxWidth?: number;
+    title?: string;
+    titleColor?: string;
+    description?: string;
+    descriptionColor?: string;
+    headerBackgroundColor?: string;
+    overflow?: React.CSSProperties["overflow"];
+    onOpen?: () => void;
+    onClose?: () => void;
+    children?: React.ReactNode;
+};
+export type ModalRef = {
+    open: () => void;
+    close: () => void;
+    isOpened: boolean;
+};
+type ModalComponent = {
+    (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
+    confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    }>) => React.ReactElement;
+    destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
+        onDelete?: () => void;
+        onCancel?: () => void;
+    }>) => React.ReactElement;
+};
+declare const ModalComponent: ModalComponent;
+declare const Modal: typeof ModalComponent & {
+    confirmation: typeof ModalComponent.confirmation;
+    destructive: typeof ModalComponent.destructive;
+};
+export default Modal;

package/dist/components/Modal.js

@@ -0,0 +1,93 @@
+"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 Button_1 = __importDefault(require("./Button"));
+const Text_1 = __importDefault(require("./Text"));
+const Divider_1 = __importDefault(require("./Divider"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const DialogStylesElement = styled_components_1.default.dialog.withConfig({
+    shouldForwardProp: (prop) => !["theme", "opacity"].includes(prop),
+}) `
+   width: 100%;
+   max-width: none;
+   height: 100%;
+   max-height: none;
+   border: none;
+   outline: none;
+   background-color: transparent;
+   margin: auto auto;
+   padding-inline: ${(props) => props.theme.styles.gap}px;
+   opacity: ${(props) => props.opacity};
+   transition: ${(props) => props.theme.styles.transition};
+
+   &::backdrop {
+      background-color: #000000a0;
+      opacity: ${(props) => props.opacity};
+      transition: ${(props) => props.theme.styles.transition};
+   }
+
+   @keyframes fadeInAnimation {
+      from {
+         transform: translateY(${(props) => props.theme.styles.space}px);
+      }
+      to {
+         transform: translateY(0px);
+      }
+   }
+
+   @keyframes fadeOutAnimation {
+      from {
+         transform: translateY(0px);
+      }
+      to {
+         transform: translateY(${(props) => props.theme.styles.space}px);
+      }
+   }
+`;
+const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title, titleColor, description, descriptionColor, headerBackgroundColor, overflow, onOpen, onClose, children, }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
+    const dialogRef = (0, react_1.useRef)(null);
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [isOpenedLate, setIsOpenedLate] = (0, react_1.useState)(false);
+    const onClickOpen = (0, react_1.useCallback)(() => {
+        dialogRef.current?.showModal();
+        setIsOpened(true);
+        setIsOpenedLate(true);
+        onOpen?.();
+    }, [onOpen]);
+    const onClickClose = (0, react_1.useCallback)(() => {
+        setIsOpened(false);
+        onClose?.();
+        setTimeout(() => {
+            dialogRef.current?.close();
+            setIsOpenedLate(false);
+        }, 0.2 * 1000);
+    }, [onClose]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            open: onClickOpen,
+            close: onClickClose,
+            isOpened,
+        };
+    }, [onClickOpen, onClickClose, isOpened]);
+    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, opacity: !isOpened ? 0 : 1, onClose: onClickClose, ref: dialogRef, children: isOpenedLate ? ((0, jsx_runtime_1.jsx)(Div_1.default.column, { position: "relative", width: "100%", maxWidth: maxWidth ?? app.contentMaxWidth / 1.3, minHeight: `calc(100% - ${theme.styles.space * 2}px)`, alignItems: "center", justifyContent: "center", marginBlock: theme.styles.space, marginInline: "auto", transform: `translateY(${theme.styles.space}px)`, transition: theme.styles.transition, animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards", children: (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", minHeight: 32 + theme.styles.space * 2, backgroundColor: theme.colors.backgroundBase, borderRadius: theme.styles.borderRadius * 2, paddingInline: !title ? theme.styles.space : undefined, paddingBlock: !title ? theme.styles.gap : undefined, overflow: overflow, children: [title ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, backgroundColor: headerBackgroundColor, borderTopLeftRadius: theme.styles.borderRadius * 2, borderTopRightRadius: theme.styles.borderRadius * 2, paddingInline: theme.styles.space, paddingBlock: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: "h1", color: titleColor ?? theme.colors.textPrimary, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose })] }), (0, jsx_runtime_1.jsx)(Divider_1.default.horizontal, {})] })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, children: (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", onClick: onClickClose }) })), (0, jsx_runtime_1.jsx)(Div_1.default, { paddingInline: title ? theme.styles.space : undefined, paddingBlock: title ? theme.styles.gap : undefined, children: children })] }) })) : undefined }));
+});
+ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ onConfirm, onCancel, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: "Continue", onClick: onConfirm })] })] }));
+});
+ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ onDelete, onCancel, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: ref, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space * 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onCancel }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: "Delete", onClick: onDelete })] })] }));
+});
+const Modal = (0, react_1.memo)(ModalComponent);
+Modal.confirmation = ModalComponent.confirmation;
+Modal.destructive = ModalComponent.destructive;
+exports.default = Modal;