react-better-html 1.1.11 → 1.1.12

package/dist/components/Button.js

@@ -71,8 +71,8 @@ const ButtonElement = styled_components_1.default.button.withConfig({
               opacity: 0.6;
               cursor: not-allowed;
 
-              &.secondary.disabled {
-                 opacity: 0.4;
+              &.secondary:disabled {
+                 filter: brightness(0.9);
               }
            `
     : !props.isLoading

package/dist/components/Chip.d.ts

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

package/dist/components/Chip.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Div_1 = __importDefault(require("./Div"));
+const Text_1 = __importDefault(require("./Text"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const ChipComponent = (0, react_1.forwardRef)(function Chip({ text, color, backgroundColor, borderRadius }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { width: "fit-content", backgroundColor: backgroundColor ?? theme.colors.backgroundSecondary, borderRadius: borderRadius ?? theme.styles.borderRadius / 1.3, paddingBlock: theme.styles.gap, paddingInline: theme.styles.space, ref: ref, children: (0, jsx_runtime_1.jsx)(Text_1.default, { color: color ?? theme.colors.textPrimary, children: text }) }));
+});
+ChipComponent.circle = (0, react_1.forwardRef)(function Circle(props, ref) {
+    return (0, jsx_runtime_1.jsx)(ChipComponent, { borderRadius: 999, ref: ref, ...props });
+});
+const Chip = (0, react_1.memo)(ChipComponent);
+Chip.circle = ChipComponent.circle;
+exports.default = Chip;

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,36 @@
+import { ComponentPropWithRef } from "../types/components";
+import { OmitProps } from "../types/app";
+import { IconName } from "../types/icon";
+import { DivProps } from "./Div";
+export type DropdownOption<Value, Data = unknown> = {
+    label: string;
+    value: Value;
+    disabled?: boolean;
+    searchValues?: string[];
+    data?: Data;
+};
+type DropdownProps<Value, Data> = {
+    label?: string;
+    errorText?: string;
+    infoText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    options: DropdownOption<Value, Data>[];
+    value?: Value;
+    placeholder?: string;
+    leftIcon?: IconName;
+    withSearch?: boolean;
+    withDebounce?: boolean;
+    /** @default 0.5s */
+    debounceDelay?: number;
+    debounceIsLoading?: number;
+    onChange?: (value: Value | undefined) => void;
+    onChangeSearch?: (query: string) => void;
+    renderOption?: (option: DropdownOption<Value, Data>, index: number) => React.ReactNode;
+} & OmitProps<DivProps<unknown>, "onChange">;
+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

@@ -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/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/ToggleInput.d.ts

@@ -0,0 +1,19 @@
+import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
+import { OmitProps } from "../types/app";
+export type ToggleInputRef = {};
+type InternalToggleInputProps<Value> = {
+    label?: string;
+    text?: string;
+    errorText?: string;
+    infoText?: string;
+    value?: Value;
+    onChange?: (checked: boolean, value?: Value) => void;
+} & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange" | "name"> & ComponentStyle & ComponentHoverStyle;
+type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
+type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
+declare const _default: {
+    checkbox: ToggleInputComponentType;
+    radiobutton: ToggleInputComponentType;
+    switch: ToggleInputComponentType;
+};
+export default _default;

package/dist/components/ToggleInput.js

@@ -0,0 +1,122 @@
+"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 BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const InputElement = styled_components_1.default.input.withConfig({
+    shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle"].includes(prop),
+}) `
+   position: relative;
+   appearance: none;
+   width: 24px;
+   height: 24px;
+   background-color: ${(props) => props.theme.colors.backgroundContent};
+   border: 1px solid ${(props) => props.theme.colors.border};
+   border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
+   cursor: pointer;
+   transition: ${(props) => props.theme.styles.transition};
+   flex-shrink: 0;
+
+   &[type="radio"] {
+      border-radius: 999px;
+   }
+
+   &:checked {
+      background-color: ${(props) => props.theme.colors.primary};
+      border-color: ${(props) => props.theme.colors.primary};
+   }
+
+   &:disabled {
+      filter: brightness(0.9);
+      cursor: not-allowed;
+   }
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const SwitchElement = styled_components_1.default.div.withConfig({
+    shouldForwardProp: (prop) => !["theme", "checked", "disabled", "normalStyle", "hoverStyle"].includes(prop),
+}) `
+   position: relative;
+   width: 36px;
+   height: 20px;
+   background-color: ${(props) => (props.checked ? props.theme.colors.primary : props.theme.colors.border)};
+   border-radius: 10px;
+   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+   opacity: ${(props) => (props.disabled ? 0.5 : 1)};
+   transition: ${(props) => props.theme.styles.transition};
+
+   &::before {
+      content: "";
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      background-color: white;
+      border-radius: 50%;
+      top: 2px;
+      left: 2px;
+      transition: ${(props) => props.theme.styles.transition};
+      transform: translateX(${(props) => (props.checked ? "16px" : "0")});
+   }
+
+   ${(props) => props.normalStyle}
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ label, text, errorText, infoText, value, onChange, checked: controlledChecked, required, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const styledComponentStyles = (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 [internalChecked, setInternalChecked] = (0, react_1.useState)(false);
+    const onChangeElement = (0, react_1.useCallback)((event) => {
+        const newValue = event.target.checked;
+        if (controlledChecked === undefined)
+            setInternalChecked(newValue);
+        onChange?.(newValue, value);
+    }, [onChange, controlledChecked, value, props.type]);
+    const checked = controlledChecked ?? internalChecked;
+    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.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && (0, jsx_runtime_1.jsx)(Text_1.default, { children: text })] }), (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 }))] }));
+});
+exports.default = {
+    checkbox: (0, react_1.forwardRef)(function Checkbox(props, ref) {
+        return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "checkbox", ref: ref, ...props });
+    }),
+    radiobutton: (0, react_1.forwardRef)(function RadioButton(props, ref) {
+        return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "radio", ref: ref, ...props });
+    }),
+    switch: (0, react_1.forwardRef)(function Switch({ label, errorText, infoText, disabled, onChange, checked: controlledChecked, required, ...props }, ref) {
+        const theme = (0, BetterHtmlProvider_1.useTheme)();
+        const styledComponentStyles = (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 [internalChecked, setInternalChecked] = (0, hooks_1.useBooleanState)();
+        const checked = controlledChecked ?? internalChecked;
+        const onClickElement = (0, react_1.useCallback)(() => {
+            if (disabled)
+                return;
+            const newValue = !checked;
+            if (controlledChecked === undefined)
+                setInternalChecked.setState(newValue);
+            onChange?.(newValue);
+        }, [disabled, checked, onChange, controlledChecked]);
+        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.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (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 }))] }));
+    }),
+};

package/dist/constants/icons.js

@@ -32,4 +32,54 @@ exports.icons = {
             },
         ],
     },
+    chevronDown: {
+        width: 512,
+        height: 512,
+        paths: [
+            {
+                d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z",
+                type: "fill",
+            },
+        ],
+    },
+    eye: {
+        width: 576,
+        height: 512,
+        paths: [
+            {
+                d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z",
+                type: "fill",
+            },
+        ],
+    },
+    eyeDashed: {
+        width: 640,
+        height: 512,
+        paths: [
+            {
+                d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z",
+                type: "fill",
+            },
+        ],
+    },
+    magnifyingGlass: {
+        width: 512,
+        height: 512,
+        paths: [
+            {
+                d: "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z",
+                type: "fill",
+            },
+        ],
+    },
+    check: {
+        width: 448,
+        height: 512,
+        paths: [
+            {
+                d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z",
+                type: "fill",
+            },
+        ],
+    },
 };

package/dist/index.d.ts

@@ -7,6 +7,10 @@ import Button from "./components/Button";
 import Divider from "./components/Divider";
 import Modal, { type ModalRef } from "./components/Modal";
 import PageHolder from "./components/PageHolder";
+import Chip from "./components/Chip";
+import InputField from "./components/InputField";
+import Dropdown from "./components/Dropdown";
+import ToggleInput from "./components/ToggleInput";
 import { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
 import { usePageResize, useMediaQuery } from "./utils/hooks";
-export { Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, };
+export { Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, ToggleInput, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, };

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = void 0;
+exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = void 0;
 const Div_1 = __importDefault(require("./components/Div"));
 exports.Div = Div_1.default;
 const Text_1 = __importDefault(require("./components/Text"));
@@ -22,6 +22,14 @@ const Modal_1 = __importDefault(require("./components/Modal"));
 exports.Modal = Modal_1.default;
 const PageHolder_1 = __importDefault(require("./components/PageHolder"));
 exports.PageHolder = PageHolder_1.default;
+const Chip_1 = __importDefault(require("./components/Chip"));
+exports.Chip = Chip_1.default;
+const InputField_1 = __importDefault(require("./components/InputField"));
+exports.InputField = InputField_1.default;
+const Dropdown_1 = __importDefault(require("./components/Dropdown"));
+exports.Dropdown = Dropdown_1.default;
+const ToggleInput_1 = __importDefault(require("./components/ToggleInput"));
+exports.ToggleInput = ToggleInput_1.default;
 const BetterHtmlProvider_1 = require("./components/BetterHtmlProvider");
 Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return BetterHtmlProvider_1.useTheme; } });

package/dist/types/icon.d.ts

@@ -1,4 +1,4 @@
-export type IconName = "XMark" | "uploadCloud" | "trash";
+export type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "eye" | "eyeDashed" | "magnifyingGlass" | "check";
 export type IconData = {
     width: number;
     height: number;

package/dist/utils/hooks.d.ts

@@ -1,10 +1,13 @@
 import { ComponentHoverStyle, ComponentStyle } from "../types/components";
 import { Theme } from "../types/theme";
-export declare function useStyledComponentStyles(props: ComponentStyle & ComponentHoverStyle, theme?: Theme): {
+export declare function useStyledComponentStyles(props: ComponentStyle & ComponentHoverStyle, theme?: Theme, 
+/** @default false */
+excludeProps?: boolean): {
     normalStyle: ComponentStyle;
     hoverStyle: ComponentStyle;
 };
 export declare function useComponentPropsWithPrefix<Props extends Record<string, any>, Prefix extends string>(props: Props, prefix: Prefix): Record<`${Prefix}-${string}`, any>;
+export declare function useComponentPropsWithExcludedStyle<Props extends Record<string, any>>(props: Props): Partial<Props>;
 export declare function useComponentPropsWithoutStyle<Props extends Record<string, any>>(props: Props): Partial<Props>;
 export declare function usePageResize(): {
     width: number;
@@ -26,3 +29,13 @@ export declare function useMediaQuery(): {
     size1500: boolean;
     size1600: boolean;
 };
+export declare function useBooleanState(initialValue?: boolean): [
+    state: boolean,
+    actions: {
+        setState: React.Dispatch<React.SetStateAction<boolean>>;
+        setTrue: () => void;
+        setFalse: () => void;
+        toggle: () => void;
+    }
+];
+export declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];

package/dist/utils/hooks.js

@@ -2,21 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyledComponentStyles = useStyledComponentStyles;
 exports.useComponentPropsWithPrefix = useComponentPropsWithPrefix;
+exports.useComponentPropsWithExcludedStyle = useComponentPropsWithExcludedStyle;
 exports.useComponentPropsWithoutStyle = useComponentPropsWithoutStyle;
 exports.usePageResize = usePageResize;
 exports.useMediaQuery = useMediaQuery;
+exports.useBooleanState = useBooleanState;
+exports.useDebounceState = useDebounceState;
 const react_1 = require("react");
 const cssProps = Object.keys(document.documentElement.style).reduce((previousValue, currentValue) => {
     previousValue[currentValue.toLowerCase()] = true;
     previousValue[`${currentValue}Hover`.toLowerCase()] = true;
     return previousValue;
 }, {});
-function useStyledComponentStyles(props, theme) {
-    const styles = (0, react_1.useMemo)(() => {
+const cssPropsToExclude = [
+    "position",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight",
+    "margin",
+    "marginTop",
+    "marginBottom",
+    "marginLeft",
+    "marginRight",
+    "marginBlock",
+    "marginInline",
+    "marginBlockStart",
+    "marginBlockEnd",
+    "marginInlineStart",
+    "marginInlineEnd",
+    "marginTrim",
+    "zIndex",
+];
+function useStyledComponentStyles(props, theme, 
+/** @default false */
+excludeProps) {
+    return (0, react_1.useMemo)(() => {
         const normalStyle = {};
         const hoverStyle = {};
         let haveHover = false;
         for (const key in props) {
+            if (excludeProps && cssPropsToExclude.includes(key))
+                continue;
             if (key.endsWith("Hover")) {
                 haveHover = true;
                 const normalKey = key.slice(0, -5);
@@ -35,7 +68,6 @@ function useStyledComponentStyles(props, theme) {
             hoverStyle,
         };
     }, [props, theme]);
-    return styles;
 }
 function useComponentPropsWithPrefix(props, prefix) {
     return (0, react_1.useMemo)(() => {
@@ -48,6 +80,15 @@ function useComponentPropsWithPrefix(props, prefix) {
         return returnValue;
     }, [props, prefix]);
 }
+function useComponentPropsWithExcludedStyle(props) {
+    return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
+        const key = currentValue;
+        if (!cssPropsToExclude.includes(key))
+            return previousValue;
+        previousValue[key] = props[key];
+        return previousValue;
+    }, {}), [props]);
+}
 function useComponentPropsWithoutStyle(props) {
     return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
         if (!cssProps[currentValue.toLowerCase()])
@@ -92,3 +133,26 @@ function useMediaQuery() {
         size1600: width <= 1600,
     };
 }
+function useBooleanState(initialValue = false) {
+    const [state, setState] = (0, react_1.useState)(initialValue);
+    const setTrue = (0, react_1.useCallback)(() => setState(true), []);
+    const setFalse = (0, react_1.useCallback)(() => setState(false), []);
+    const toggle = (0, react_1.useCallback)(() => setState((oldValue) => !oldValue), []);
+    return [state, { setState, setTrue, setFalse, toggle }];
+}
+function useDebounceState(initialValue, delay = 0.5) {
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(initialValue);
+    const [isLoading, setIsLoading] = useBooleanState();
+    (0, react_1.useEffect)(() => {
+        setIsLoading.setTrue();
+        const timer = setTimeout(() => {
+            setDebouncedValue(value);
+            setIsLoading.setFalse();
+        }, delay * 1000);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return [value, debouncedValue, setValue, isLoading];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.11",
+   "version": "1.1.12",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [