react-better-html 1.1.49 → 1.1.51

package/dist/components/Chip.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropWithRef } from "../types/components";
 import { OmitProps } from "../types/app";
-type ChipProps = {
+export type ChipProps = {
     text: string;
     /** @default theme.colors.textPrimary */
     color?: string;

package/dist/components/ColorThemeSwitch.d.ts

@@ -1,5 +1,5 @@
 import { ComponentMarginProps } from "../types/components";
-type ColorThemeSwitchProps = {
+export type ColorThemeSwitchProps = {
     withMoon?: boolean;
     className?: string;
 } & ComponentMarginProps;

package/dist/components/Divider.d.ts

@@ -5,11 +5,11 @@ type DividerProps = {
     /** @default border */
     backgroundColor?: string;
 } & ComponentMarginProps;
-type VerticalDividerProps = DividerProps & {
+export type VerticalDividerProps = DividerProps & {
     /** @default "100%" */
     height?: number;
 };
-type HorizontalDividerProps = DividerProps & {
+export type HorizontalDividerProps = DividerProps & {
     text?: string;
     /** @default textSecondary */
     textColor?: string;

package/dist/components/Dropdown.d.ts

@@ -9,7 +9,7 @@ export type DropdownOption<Value, Data = unknown> = {
     searchValues?: string[];
     data?: Data;
 };
-export type DropdownProps<Value, Data> = {
+export type DropdownProps<Value, Data = unknown> = {
     label?: string;
     errorText?: string;
     infoText?: string;

package/dist/components/Form.d.ts

@@ -2,7 +2,7 @@ import { ComponentMarginProps } from "../types/components";
 import { LoaderName } from "../types/loader";
 import { AnyOtherString, OmitProps } from "../types/app";
 import { useForm } from "../utils/hooks";
-type FormProps = {
+export type FormProps = {
     form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
     submitButtonText?: string;
     submitButtonLoaderName?: LoaderName | AnyOtherString;

package/dist/components/FormRow.d.ts

@@ -1,7 +1,7 @@
 import { IconName } from "../types/icon";
 import { AnyOtherString } from "../types/app";
 import { ComponentMarginProps, ComponentPropWithRef } from "../types/components";
-type FormRowProps = {
+export type FormRowProps = {
     oneItemOnly?: boolean;
     gap?: React.CSSProperties["gap"];
     children?: React.ReactNode;

package/dist/components/Icon.d.ts

@@ -1,7 +1,7 @@
 import { AnyOtherString, OmitProps } from "../types/app";
 import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { IconName } from "../types/icon";
-type IconProps = {
+export type IconProps = {
     name: IconName | AnyOtherString;
     /** @default 16 */
     size?: number;

package/dist/components/Image.d.ts

@@ -1,7 +1,7 @@
 import { AnyOtherString, OmitProps } from "../types/app";
 import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { AssetName } from "../types/asset";
-type ImageProps = {
+export type ImageProps = {
     name?: AssetName | AnyOtherString;
 } & OmitProps<React.ComponentProps<"img">, "style"> & ComponentStyle & ComponentHoverStyle;
 type ImageComponent = {

package/dist/components/InputField.js

@@ -78,7 +78,7 @@ const InputElement = styled_components_1.default.input.withConfig({
    }
 `;
 const TextareaElement = styled_components_1.default.textarea.withConfig({
-    shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop),
+    shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop),
 }) `
    width: 100%;
    min-height: 3lh;
@@ -92,6 +92,8 @@ const TextareaElement = styled_components_1.default.textarea.withConfig({
    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};
 
@@ -133,9 +135,9 @@ const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label,
             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.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", zIndex: 1002 })), (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 : theme.colors.textSecondary, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, 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", 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 : theme.colors.textSecondary, children: errorText || infoText }))] }));
 });
-InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ label, placeholder, errorText, infoText, onChange, onChangeValue, required, ...props }, ref) {
+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");
@@ -145,7 +147,7 @@ InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ lab
         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.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, required: required, placeholder: placeholder ?? label, 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 }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, 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 : 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 }));

package/dist/components/Label.d.ts

@@ -1,4 +1,4 @@
-type LabelProps = {
+export type LabelProps = {
     text?: string;
     required?: boolean;
     isError?: boolean;

package/dist/components/Loader.d.ts

@@ -1,7 +1,7 @@
 import { Color } from "../types/theme";
 import { OmitProps } from "../types/app";
 import { DivProps } from "./Div";
-type LoaderProps = {
+export type LoaderProps = {
     /** @default textPrimary */
     color?: Color;
     /** @default 16 */

package/dist/components/Modal.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropWithRef } from "../types/components";
 import { AnyOtherString, OmitProps } from "../types/app";
 import { LoaderName } from "../types/loader";
-type ModalProps = {
+export type ModalProps = {
     /**
      * If you want to have a small modal, you can use 660px as it looks good on most screens.
      *

package/dist/components/Modal.js

@@ -29,7 +29,7 @@ const DialogStylesElement = styled_components_1.default.dialog.withConfig({
    transition: ${(props) => props.theme.styles.transition};
 
    &::backdrop {
-      background-color: ${(props) => (props.colorTheme === "light" ? "#000000a0" : "#000000e0")};
+      background-color: ${(props) => (props.colorTheme === "light" ? "#000000a0" : "#222222e0")};
       opacity: ${(props) => props.opacity};
       transition: ${(props) => props.theme.styles.transition};
    }

package/dist/components/PageHeader.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentMarginProps } from "../types/components";
 import { TextAs } from "./Text";
-type PageHeaderProps = {
+export type PageHeaderProps = {
     imageUrl?: string;
     imageSize?: number;
     title?: string;

package/dist/components/PageHolder.d.ts

@@ -1,4 +1,4 @@
-type PageHolderProps = {
+export type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
     children?: React.ReactNode;

package/dist/index.d.ts

@@ -1,21 +1,21 @@
-import Div from "./components/Div";
-import Text from "./components/Text";
-import Loader from "./components/Loader";
-import Icon from "./components/Icon";
-import Image from "./components/Image";
-import Button from "./components/Button";
-import Divider from "./components/Divider";
-import Modal, { type ModalRef } from "./components/Modal";
-import PageHolder from "./components/PageHolder";
-import PageHeader from "./components/PageHeader";
-import Chip from "./components/Chip";
-import InputField from "./components/InputField";
-import Dropdown, { type DropdownOption } from "./components/Dropdown";
-import ToggleInput from "./components/ToggleInput";
-import Form from "./components/Form";
-import Label from "./components/Label";
-import FormRow from "./components/FormRow";
-import ColorThemeSwitch from "./components/ColorThemeSwitch";
+import Div, { type DivProps } from "./components/Div";
+import Text, { type TextProps, type TextAs } from "./components/Text";
+import Loader, { type LoaderProps } from "./components/Loader";
+import Icon, { type IconProps } from "./components/Icon";
+import Image, { type ImageProps } from "./components/Image";
+import Button, { type ButtonProps } from "./components/Button";
+import Divider, { type HorizontalDividerProps, type VerticalDividerProps } from "./components/Divider";
+import Modal, { type ModalRef, type ModalProps } from "./components/Modal";
+import PageHolder, { type PageHolderProps } from "./components/PageHolder";
+import PageHeader, { type PageHeaderProps } from "./components/PageHeader";
+import Chip, { type ChipProps } from "./components/Chip";
+import InputField, { type InputFieldProps, type TextareaFieldProps } from "./components/InputField";
+import Dropdown, { type DropdownOption, type DropdownProps } from "./components/Dropdown";
+import ToggleInput, { type ToggleInputRef, type ToggleInputProps } from "./components/ToggleInput";
+import Form, { type FormProps } from "./components/Form";
+import Label, { type LabelProps } from "./components/Label";
+import FormRow, { type FormRowProps } from "./components/FormRow";
+import ColorThemeSwitch, { type ColorThemeSwitchProps } from "./components/ColorThemeSwitch";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls, type BetterHtmlProviderValue } from "./components/BetterHtmlProvider";
 import { usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
 import { generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject } from "./utils/functions";
@@ -29,4 +29,4 @@ import { type Color, type ColorName, type ColorTheme, type Colors, type Styles,
 import { type BrowserName } from "./types/other";
 import { isMobileDevice } from "./constants";
 export * from "./plugins";
-export { BetterHtmlProvider, BetterHtmlProviderValue, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, PageHeader, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, FormRow, ColorThemeSwitch, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, BrowserName, isMobileDevice, };
+export { BetterHtmlProvider, BetterHtmlProviderValue, Div, DivProps, Text, TextProps, TextAs, Loader, LoaderProps, Icon, IconProps, Image, ImageProps, Button, ButtonProps, Divider, HorizontalDividerProps, VerticalDividerProps, Modal, ModalProps, ModalRef, PageHolder, PageHolderProps, PageHeader, PageHeaderProps, Chip, ChipProps, InputField, InputFieldProps, TextareaFieldProps, Dropdown, DropdownOption, DropdownProps, ToggleInput, ToggleInputRef, ToggleInputProps, Form, FormProps, Label, LabelProps, FormRow, FormRowProps, ColorThemeSwitch, ColorThemeSwitchProps, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, BrowserName, isMobileDevice, };

package/package.json

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