react-better-html 1.1.49 → 1.1.50

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/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/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, 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.50",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [