react-better-html 1.1.72 → 1.1.73

package/dist/components/Divider.d.ts

@@ -1,21 +0,0 @@
-import { ComponentMarginProps } from "../types/components";
-type DividerProps = {
-    /** @default 1 */
-    width?: number;
-    /** @default border */
-    backgroundColor?: string;
-} & ComponentMarginProps;
-export type VerticalDividerProps = DividerProps & {
-    /** @default "100%" */
-    height?: number;
-};
-export 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

@@ -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");
-exports.default = {
-    vertical: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, height, ...props }) {
-        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, ...props }));
-    }),
-    horizontal: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, text, textColor, ...props }) {
-        const theme = (0, BetterHtmlProvider_1.useTheme)();
-        return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "100%", alignItems: "center", gap: text ? theme.styles.space : undefined, ...props, 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/Dropdown.d.ts

@@ -1,48 +0,0 @@
-import { ComponentPropWithRef } from "../types/components";
-import { AnyOtherString, OmitProps } from "../types/app";
-import { IconName } from "../types/icon";
-import { DivProps } from "./Div";
-export type DropdownOption<Value, Data = unknown> = {
-    value: Value;
-    label: string;
-    /** @default false */
-    disabled?: boolean;
-    searchValues?: string[];
-    data?: Data;
-};
-export type DropdownProps<Value, Data = unknown> = {
-    label?: string;
-    labelColor?: string;
-    errorText?: string;
-    infoText?: string;
-    /** @default false */
-    required?: boolean;
-    /** @default false */
-    disabled?: boolean;
-    options: DropdownOption<Value, Data>[];
-    value?: Value;
-    defaultValue?: Value;
-    placeholder?: string;
-    leftIcon?: IconName | AnyOtherString;
-    inputFieldClassName?: string;
-    /** @default false */
-    withSearch?: boolean;
-    /** @default false */
-    withDebounce?: boolean;
-    /** @default 0.5s */
-    debounceDelay?: number;
-    /** @default false */
-    debounceIsLoading?: boolean;
-    debounceMinimumSymbolsRequired?: number;
-    /** @default false */
-    withoutClearButton?: boolean;
-    onChange?: (value: Value | undefined) => void;
-    onChangeSearch?: (query: string) => void;
-    renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
-} & OmitProps<DivProps<unknown>, "onChange" | "defaultChecked">;
-type DropdownComponentType = {
-    <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
-};
-declare const DropdownComponent: DropdownComponentType;
-declare const Dropdown: typeof DropdownComponent & {};
-export default Dropdown;

package/dist/components/Dropdown.js

@@ -1,160 +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 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 Loader_1 = __importDefault(require("./Loader"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, labelColor, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder, leftIcon, inputFieldClassName, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, withoutClearButton, 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)(defaultValue);
-    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();
-        setInternalValue(undefined);
-        onChange?.(undefined);
-        setIsOpen.setFalse();
-        inputRef.current?.blur();
-        setSearchQuery("");
-        setFocusedOptionIndex(undefined);
-    }, [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;
-    const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-    return ((0, jsx_runtime_1.jsx)(Div_1.default.column, { width: "100%", 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, labelColor: labelColor, errorText: errorText, infoText: infoText, required: required, disabled: disabled, readOnly: !withSearch, value: displayValue, cursor: !withSearch ? "pointer" : undefined, placeholder: withSearch ? (selectedOption ? selectedOption.label : readyPlaceholder) : readyPlaceholder, leftIcon: leftIcon, className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`, 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, isSelected) : (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: debounceMinimumSymbolsRequired !== undefined &&
-                                    searchQuery.length < debounceMinimumSymbolsRequired
-                                    ? `Enter at least ${debounceMinimumSymbolsRequired} characters`
-                                    : "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: [!withoutClearButton && ((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/ExampleComponent.d.ts

@@ -1,5 +0,0 @@
-type ExampleComponentProps = {
-    test?: string;
-};
-declare const _default: import("react").MemoExoticComponent<import("react").ComponentType<ExampleComponentProps>>;
-export default _default;

package/dist/components/ExampleComponent.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const withPlugin_1 = require("../utils/withPlugin");
-function ExampleComponent({ test, plugin }) {
-    const { Link } = plugin.components || {};
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h1", { children: ["Example Component with Router Plugin: ", test] }), (0, jsx_runtime_1.jsx)(Link, { to: "/", children: "Go to Home Page" })] }));
-}
-exports.default = (0, react_1.memo)((0, withPlugin_1.withPlugin)("react-router-dom", ExampleComponent));

package/dist/components/Form.d.ts

@@ -1,25 +0,0 @@
-import { ComponentMarginProps } from "../types/components";
-import { LoaderName } from "../types/loader";
-import { AnyOtherString, OmitProps } from "../types/app";
-import { useForm } from "../utils/hooks";
-export type FormProps = {
-    form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
-    submitButtonText?: string;
-    submitButtonLoaderName?: LoaderName | AnyOtherString;
-    submitButtonId?: string;
-    /** @default false */
-    submitButtonIsDisabled?: boolean;
-    /** @default "right" */
-    actionButtonsLocation?: "left" | "center" | "right";
-    gap?: React.CSSProperties["gap"];
-    /** @default false */
-    isSubmitting?: boolean;
-    /** @default false */
-    isDestructive?: boolean;
-    onClickCancel?: () => void;
-    onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
-    children?: React.ReactNode;
-} & ComponentMarginProps;
-declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation, gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof Form>;
-export default _default;

package/dist/components/Form.js

@@ -1,27 +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 Button_1 = __importDefault(require("./Button"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, submitButtonIsDisabled, actionButtonsLocation = "right", gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const submitButtonIsDisabledInternal = (0, react_1.useMemo)(() => {
-        if (!form || !form.requiredFields)
-            return false;
-        return Object.entries(form.values).some(([key, value]) => form.requiredFields?.includes(key) &&
-            (value === undefined || value === null || value?.toString().trim() === ""));
-    }, [form]);
-    const SubmitButtonTag = isDestructive ? Button_1.default.destructive : Button_1.default;
-    const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-    return ((0, jsx_runtime_1.jsx)(Div_1.default, { width: "100%", ...props, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [gap !== undefined ? (0, jsx_runtime_1.jsx)(Div_1.default.column, { gap: gap, children: children }) : children, submitButtonText && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: actionButtonsLocation === "left"
-                        ? "flex-start"
-                        : actionButtonsLocation === "center"
-                            ? "center"
-                            : "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space, children: [onClickCancel && (0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onClickCancel }), (0, jsx_runtime_1.jsx)(SubmitButtonTag, { text: submitButtonText, isLoading: isSubmitting || form?.isSubmitting, loaderName: submitButtonLoaderName, disabled: submitButtonIsDisabledFinal, id: submitButtonId, isSubmit: true })] }))] }) }));
-}
-exports.default = (0, react_1.memo)(Form);

package/dist/components/FormRow.d.ts

@@ -1,32 +0,0 @@
-import { IconName } from "../types/icon";
-import { AnyOtherString } from "../types/app";
-import { ComponentMarginProps, ComponentPropWithRef } from "../types/components";
-import { LoaderName } from "../types/loader";
-export type FormRowProps = {
-    oneItemOnly?: boolean;
-    /**
-     * @description Weather to break the two items into two separate lines on mobile or not
-     * @default false
-     */
-    noBreakingPoint?: boolean;
-    gap?: React.CSSProperties["gap"];
-    children?: React.ReactNode;
-} & ComponentMarginProps;
-type FormRowComponentType = {
-    (props: ComponentPropWithRef<HTMLDivElement, FormRowProps>): React.ReactElement;
-    withTitle: (props: ComponentPropWithRef<HTMLDivElement, FormRowProps & {
-        icon?: IconName | AnyOtherString;
-        title?: string;
-        description?: string;
-        withActions?: boolean;
-        saveButtonLoaderName?: LoaderName | AnyOtherString;
-        resetButtonLoaderName?: LoaderName | AnyOtherString;
-        onClickSave?: () => void;
-        onClickReset?: () => void;
-    }>) => React.ReactElement;
-};
-declare const FormRowComponent: FormRowComponentType;
-declare const FormRow: typeof FormRowComponent & {
-    withTitle: typeof FormRowComponent.withTitle;
-};
-export default FormRow;

package/dist/components/FormRow.js

@@ -1,28 +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 Icon_1 = __importDefault(require("./Icon"));
-const Text_1 = __importDefault(require("./Text"));
-const Button_1 = __importDefault(require("./Button"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const FormRowComponent = (0, react_1.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const mediaQuery = (0, hooks_1.useMediaQuery)();
-    const breakingPoint = !noBreakingPoint ? mediaQuery.size900 : false;
-    const readyGap = breakingPoint || (noBreakingPoint && mediaQuery.size900) ? theme.styles.gap : theme.styles.space * 2;
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref: ref, children: [children, oneItemOnly && (0, jsx_runtime_1.jsx)(Div_1.default, { width: "100%" })] }));
-});
-FormRowComponent.withTitle = (0, react_1.forwardRef)(function WithTitle({ icon, title, description, withActions, saveButtonLoaderName, resetButtonLoaderName, onClickSave, onClickReset, children, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const mediaQuery = (0, hooks_1.useMediaQuery)();
-    return ((0, jsx_runtime_1.jsxs)(FormRowComponent, { ...props, ref: ref, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: "100%", alignItems: "center", gap: theme.styles.space, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon }), (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: "h3", children: title }), description && (0, jsx_runtime_1.jsx)(Text_1.default, { color: theme.colors.textSecondary, children: description })] })] }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { width: props.noBreakingPoint && mediaQuery.size900 ? undefined : "100%", alignItems: "center", gap: theme.styles.gap, children: [children, withActions && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [onClickReset && ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset })), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })] }))] })] }));
-});
-const FormRow = (0, react_1.memo)(FormRowComponent);
-FormRow.withTitle = FormRowComponent.withTitle;
-exports.default = FormRow;

package/dist/components/Icon.d.ts

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

package/dist/components/Icon.js

@@ -1,36 +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 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.toString()])
-            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.toString()]?.width ?? 0} ${icons[name.toString()]?.height ?? 0}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: icons[name.toString()]?.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

@@ -1,18 +0,0 @@
-import { AnyOtherString, OmitProps } from "../types/app";
-import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
-import { AssetName } from "../types/asset";
-export 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

@@ -1,44 +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 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

@@ -1,44 +0,0 @@
-import React from "react";
-import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
-import { AnyOtherString, OmitProps } from "../types/app";
-import { IconName } from "../types/icon";
-export type InputFieldProps = {
-    label?: string;
-    labelColor?: string;
-    errorText?: string;
-    infoText?: string;
-    leftIcon?: IconName | AnyOtherString;
-    rightIcon?: IconName | AnyOtherString;
-    insideInputFieldComponent?: React.ReactNode;
-    /** @default false */
-    withDebounce?: boolean;
-    /** @default 0.5s */
-    debounceDelay?: number;
-    onChangeValue?: (value: string) => void;
-    onClickRightIcon?: () => void;
-    holderRef?: React.ForwardedRef<HTMLDivElement>;
-} & OmitProps<React.ComponentProps<"input">, "style" | "ref"> & ComponentStyle & ComponentHoverStyle;
-export type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
-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;
-    phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type">>) => React.ReactElement;
-    date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-};
-declare const InputFieldComponent: InputFieldComponentType;
-declare const InputField: typeof InputFieldComponent & {
-    multiline: typeof InputFieldComponent.multiline;
-    email: typeof InputFieldComponent.email;
-    password: typeof InputFieldComponent.password;
-    search: typeof InputFieldComponent.search;
-    phoneNumber: typeof InputFieldComponent.phoneNumber;
-    date: typeof InputFieldComponent.date;
-    dateTime: typeof InputFieldComponent.dateTime;
-    time: typeof InputFieldComponent.time;
-};
-export default InputField;