react-better-html 1.1.71 → 1.1.73

package/dist/components/InputField.js

@@ -1,270 +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 countries_1 = require("../constants/countries");
-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 Label_1 = __importDefault(require("./Label"));
-const Dropdown_1 = __importDefault(require("./Dropdown"));
-const Image_1 = __importDefault(require("./Image"));
-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;
-   }
-
-   &[type="date"]::-webkit-calendar-picker-indicator,
-   &[type="datetime-local"]::-webkit-calendar-picker-indicator,
-   &[type="time"]::-webkit-calendar-picker-indicator {
-      display: none;
-      -webkit-appearance: none;
-   }
-
-   &.react-better-html-phone-number-holder {
-      border-right: none;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-   }
-
-   &.react-better-html-phone-number {
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-   }
-
-   &.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;
-      }
-
-      &.react-better-html-dropdown-open-late {
-         z-index: 1001;
-      }
-   }
-
-   &.react-better-html-inputField-dateTime-opened {
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-   }
-
-   &.react-better-html-inputField-dateTime-opened-late {
-      z-index: 1001;
-   }
-
-   ${(props) => props.normalStyle}
-
-   &:hover {
-      ${(props) => props.hoverStyle}
-   }
-`;
-const TextareaElement = styled_components_1.default.textarea.withConfig({
-    shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "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`};
-   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};
-   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 hours = Array.from({ length: 24 }, (_, index) => index);
-const minutes = Array.from({ length: 60 }, (_, index) => index);
-const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label, labelColor, errorText, infoText, leftIcon, rightIcon, insideInputFieldComponent, withDebounce, debounceDelay = 0.5, onChange, onChangeValue, onClickRightIcon, holderRef, required, placeholder, ...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, ...styledComponentStylesWithExcluded, ref: holderRef, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: required, isError: !!errorText }), (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: props.className?.includes("react-better-html-dropdown-open-late") ? 1002 : 1 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, 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 : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
-});
-InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ label, placeholder, errorText, infoText, leftIcon, rightIcon, onChange, onChangeValue, onClickRightIcon, 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, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (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" })), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStyles, ...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] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : props.labelColor ?? 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 Password({ ...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 Search({ ...props }, ref) {
-    return (0, jsx_runtime_1.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref: ref, ...props });
-});
-InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const [dropdownValue, setDropdownValue] = (0, react_1.useState)();
-    const [inputFieldValue, setInputFieldValue] = (0, react_1.useState)(value?.toString() ?? "");
-    const renderOption = (0, react_1.useCallback)((option, index, isSelected) => ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }), (0, jsx_runtime_1.jsx)(Text_1.default, { children: option.label })] })), []);
-    const onChangeValueElement = (0, react_1.useCallback)((value) => {
-        const readyValue = value.replace(/\D/g, "");
-        setInputFieldValue(readyValue);
-        onChangeValue?.(dropdownValue ? `+${dropdownValue}${readyValue}` : readyValue);
-    }, [onChangeValue, dropdownValue]);
-    const options = (0, react_1.useMemo)(() => countries_1.countries.map((country) => ({
-        value: country.phoneNumberExtension,
-        label: `+${country.phoneNumberExtension}`,
-        data: country,
-    })), []);
-    const defaultValue = (0, react_1.useMemo)(() => {
-        const thisTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        const initialDefaultValue = options.find((option) => option.data?.timeZone === thisTimeZone)?.value ?? "";
-        setDropdownValue(initialDefaultValue);
-        return initialDefaultValue;
-    }, [options]);
-    (0, react_1.useEffect)(() => {
-        if (value === undefined || value === null)
-            return;
-        const newValue = value.toString();
-        const country = countries_1.countries.find((country) => country.phoneNumberExtension ===
-            newValue.slice(newValue.startsWith("+") ? 1 : 0, country.phoneNumberExtension.length + (newValue.startsWith("+") ? 1 : 0)));
-        if (!country) {
-            setInputFieldValue(newValue);
-            return;
-        }
-        setDropdownValue(country.phoneNumberExtension);
-        setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
-    }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, minWidth: 116, withSearch: true, placeholder: "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: label ?? "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] })] }));
-});
-InputFieldComponent.date = (0, react_1.forwardRef)(function Date({ className, onFocus, onBlur, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const holderRef = (0, react_1.useRef)(null);
-    const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = (0, hooks_1.useComponentInputFieldDateProps)(props, holderRef);
-    return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "date", insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", overflowY: "auto", ...insideInputFieldComponentProps, children: "Hello there" }), holderRef: holderRef, ref: ref, ...props, ...inputFieldProps }));
-});
-InputFieldComponent.dateTime = (0, react_1.forwardRef)(function DateTime({ className, onFocus, onBlur, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const holderRef = (0, react_1.useRef)(null);
-    const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = (0, hooks_1.useComponentInputFieldDateProps)(props, holderRef);
-    return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "datetime-local", insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", overflowY: "auto", ...insideInputFieldComponentProps, children: "Hello there" }), holderRef: holderRef, ref: ref, ...props, ...inputFieldProps }));
-});
-InputFieldComponent.time = (0, react_1.forwardRef)(function Time({ ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const holderRef = (0, react_1.useRef)(null);
-    const selectedHourRef = (0, react_1.useRef)(null);
-    const selectedMinuteRef = (0, react_1.useRef)(null);
-    const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = (0, hooks_1.useComponentInputFieldDateProps)(props, holderRef);
-    const onClickHour = (0, react_1.useCallback)((hour) => {
-        const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
-        inputFieldProps.onChangeValue?.(value);
-        setInternalValue(value);
-    }, [internalValue, inputFieldProps.onChangeValue]);
-    const onClickMinute = (0, react_1.useCallback)((minute) => {
-        const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
-        inputFieldProps.onChangeValue?.(value);
-        setInternalValue(value);
-    }, [internalValue, inputFieldProps.onChangeValue]);
-    (0, react_1.useEffect)(() => {
-        if (isOpen && selectedHourRef.current)
-            selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
-        if (isOpen && selectedMinuteRef.current)
-            selectedMinuteRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
-    }, [isOpen]);
-    const valueHour = parseInt(internalValue?.toString().split(":")?.[0]).toString();
-    const valueMinute = parseInt(internalValue?.toString().split(":")?.[1]).toString();
-    const buttonWidth = 50;
-    return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "time", insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: buttonWidth * 2 + 2, height: 300, backgroundColor: theme.colors.backgroundContent, borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", overflowY: "auto", ...insideInputFieldComponentProps, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { height: "100%", children: [(0, jsx_runtime_1.jsx)(Div_1.default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
-                            const isSelected = hour.toString() === valueHour;
-                            return ((0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", justifyContent: "center", color: isSelected ? theme.colors.base : theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filterHover: "brightness(0.9)", cursor: "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: hour, onClickWithValue: onClickHour, ref: isSelected ? selectedHourRef : undefined, children: (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: "center", children: hour.toString().padStart(2, "0") }) }, hour));
-                        }) }), (0, jsx_runtime_1.jsx)(Div_1.default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
-                            const isSelected = minute.toString() === valueMinute;
-                            return ((0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", justifyContent: "center", color: isSelected ? theme.colors.base : theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filterHover: "brightness(0.9)", cursor: "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: minute, onClickWithValue: onClickMinute, ref: isSelected ? selectedMinuteRef : undefined, children: (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: "center", children: minute.toString().padStart(2, "0") }) }, minute));
-                        }) })] }) }), holderRef: holderRef, ref: ref, ...props, ...inputFieldProps, minWidth: buttonWidth * 2 + 2 }));
-});
-const InputField = (0, react_1.memo)(InputFieldComponent);
-InputField.multiline = InputFieldComponent.multiline;
-InputField.email = InputFieldComponent.email;
-InputField.password = InputFieldComponent.password;
-InputField.search = InputFieldComponent.search;
-InputField.phoneNumber = InputFieldComponent.phoneNumber;
-InputField.date = InputFieldComponent.date;
-InputField.dateTime = InputFieldComponent.dateTime;
-InputField.time = InputFieldComponent.time;
-exports.default = InputField;

package/dist/components/Label.d.ts

@@ -1,11 +0,0 @@
-export type LabelProps = {
-    text?: string;
-    /** @default false */
-    required?: boolean;
-    /** @default false */
-    isError?: boolean;
-    color?: string;
-};
-declare function Label({ text, required, isError, color }: LabelProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof Label>;
-export default _default;

package/dist/components/Label.js

@@ -1,14 +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 Text_1 = __importDefault(require("./Text"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-function Label({ text, required, isError, color }) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "label", height: 16, fontSize: 14, color: isError ? theme.colors.error : color ?? theme.colors.textSecondary, children: [text, required && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] }));
-}
-exports.default = (0, react_1.memo)(Label);

package/dist/components/Loader.d.ts

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

package/dist/components/Loader.js

@@ -1,43 +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 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 {
-      to {
-         transform: rotate(360deg);
-      }
-   }
-
-   @keyframes textLoaderAnimation {
-      to {
-         clip-path: inset(0 -1ch 0 0);
-      }
-   }
-`;
-const LoaderComponent = function Loader({ color, size = 16, width, disabled, ...props }) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const readyColor = color ?? theme.colors.textPrimary;
-    const readyWidth = width ?? size / 3;
-    const mask = `radial-gradient(farthest-side, #0000 calc(100% - ${readyWidth}px), #000 0)`;
-    return ((0, jsx_runtime_1.jsx)(StyledDiv, { width: size + readyWidth * 2, height: size + readyWidth * 2, background: `radial-gradient(farthest-side, ${readyColor} 94%, #0000) top/${readyWidth}px ${readyWidth}px no-repeat, conic-gradient(#0000 30%, ${readyColor})`, borderRadius: 999, mask: mask, WebkitMask: mask, padding: readyWidth, animation: !disabled ? "loaderAnimation .6s infinite linear" : undefined, ...props }));
-};
-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

@@ -1,46 +0,0 @@
-import { ComponentPropWithRef } from "../types/components";
-import { AnyOtherString, OmitProps } from "../types/app";
-import { LoaderName } from "../types/loader";
-export 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;
-    /** @requires ReactRouterDomPlugin */
-    name?: 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"> & {
-        continueButtonLoaderName?: LoaderName | AnyOtherString;
-        onContinue?: () => void;
-        onCancel?: () => void;
-    }>) => React.ReactElement;
-    destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
-        deleteButtonLoaderName?: LoaderName | AnyOtherString;
-        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

@@ -1,123 +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 hooks_1 = require("../utils/hooks");
-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", "colorTheme", "opacity"].includes(prop),
-}) `
-   width: 100%;
-   max-width: none;
-   height: 100%;
-   max-height: none;
-   color: ${(props) => props.theme.colors.textPrimary};
-   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: ${(props) => (props.colorTheme === "light" ? "#000000a0" : "#222222e0")};
-      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, name, overflow, onOpen, onClose, children, }, ref) {
-    const reactRouterDomPlugin = (0, BetterHtmlProvider_1.usePlugin)("react-router-dom");
-    const urlQuery = reactRouterDomPlugin ? (0, hooks_1.useUrlQuery)() : undefined;
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const { app, colorTheme } = (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);
-        if (urlQuery && name)
-            urlQuery.setQuery({
-                [`${name}-modal`]: "opened",
-            }, false);
-        onOpen?.();
-    }, [onOpen, urlQuery, name]);
-    const onClickClose = (0, react_1.useCallback)(() => {
-        setIsOpened(false);
-        onClose?.();
-        if (urlQuery && name)
-            urlQuery.removeQuery(`${name}-modal`, false);
-        setTimeout(() => {
-            dialogRef.current?.close();
-            setIsOpenedLate(false);
-        }, 0.2 * 1000);
-    }, [onClose, urlQuery, name]);
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return {
-            open: onClickOpen,
-            close: onClickClose,
-            isOpened,
-        };
-    }, [onClickOpen, onClickClose, isOpened]);
-    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, colorTheme: colorTheme, 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 + theme.styles.gap : undefined, paddingBlock: !title ? theme.styles.space : 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 - 1, borderTopRightRadius: theme.styles.borderRadius * 2 - 1, paddingInline: theme.styles.space + theme.styles.gap, paddingBlock: theme.styles.space, transition: theme.styles.transition, 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, transition: theme.styles.transition, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, transition: theme.styles.transition, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose, transition: theme.styles.transition })] }), (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 + theme.styles.gap : undefined, paddingBlock: title ? theme.styles.space : undefined, children: children })] }) })) : undefined }));
-});
-ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const modalRef = (0, react_1.useRef)(null);
-    const onCancelElement = (0, react_1.useCallback)(() => {
-        onCancel?.();
-        modalRef.current?.close();
-    }, [onCancel]);
-    const onContinueElement = (0, react_1.useCallback)(() => {
-        onContinue?.();
-        modalRef.current?.close();
-    }, [onContinue]);
-    (0, react_1.useImperativeHandle)(ref, () => modalRef.current, []);
-    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, 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: onCancelElement }), (0, jsx_runtime_1.jsx)(Button_1.default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinueElement })] })] }));
-});
-ModalComponent.destructive = (0, react_1.forwardRef)(function Destructive({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const modalRef = (0, react_1.useRef)(null);
-    const onCancelElement = (0, react_1.useCallback)(() => {
-        onCancel?.();
-        modalRef.current?.close();
-    }, [onCancel]);
-    const onDeleteElement = (0, react_1.useCallback)(() => {
-        onDelete?.();
-        modalRef.current?.close();
-    }, [onDelete]);
-    (0, react_1.useImperativeHandle)(ref, () => modalRef.current, []);
-    return ((0, jsx_runtime_1.jsxs)(Modal, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, 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: onCancelElement }), (0, jsx_runtime_1.jsx)(Button_1.default.destructive, { icon: "trash", text: "Delete", loaderName: deleteButtonLoaderName, onClick: onDeleteElement })] })] }));
-});
-const Modal = (0, react_1.memo)(ModalComponent);
-Modal.confirmation = ModalComponent.confirmation;
-Modal.destructive = ModalComponent.destructive;
-exports.default = Modal;

package/dist/components/PageHeader.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import { ComponentMarginProps } from "../types/components";
-import { TextAs } from "./Text";
-export type PageHeaderProps = {
-    imageUrl?: string;
-    imageSize?: number;
-    title?: string;
-    titleAs?: TextAs;
-    titleRightElement?: React.ReactNode;
-    description?: string;
-    textAlign?: React.CSSProperties["textAlign"];
-    rightElement?: React.ReactNode;
-    /** @default false */
-    lightMode?: boolean;
-} & Pick<ComponentMarginProps, "marginBottom">;
-declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof PageHeader>;
-export default _default;

package/dist/components/PageHeader.js

@@ -1,19 +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 Image_1 = __importDefault(require("./Image"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-function PageHeader({ imageUrl, imageSize = 60, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
-    const mediaQuery = (0, hooks_1.useMediaQuery)();
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : undefined, textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description }))] }), rightElement] }));
-}
-exports.default = (0, react_1.memo)(PageHeader);

package/dist/components/PageHolder.d.ts

@@ -1,8 +0,0 @@
-export type PageHolderProps = {
-    /** @default false */
-    noMaxContentWidth?: boolean;
-    children?: React.ReactNode;
-};
-declare function PageHolder({ noMaxContentWidth, children }: PageHolderProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof PageHolder>;
-export default _default;

package/dist/components/PageHolder.js

@@ -1,15 +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 BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-function PageHolder({ noMaxContentWidth, children }) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
-    return ((0, jsx_runtime_1.jsx)(Div_1.default, { as: "main", width: "100%", maxWidth: !noMaxContentWidth ? app.contentMaxWidth : undefined, margin: "0px auto", padding: theme.styles.space, children: children }));
-}
-exports.default = (0, react_1.memo)(PageHolder);