@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.51

package/dist/types/components/card/Card.d.ts

@@ -1,8 +1,8 @@
-import { type MouseEventHandler } from "react";
+import { type DragEvent, type MouseEventHandler } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
-import { type AriaProps, type ChildrenProp, type CssProp, type TestProps } from "../../types";
-export interface CardProps extends CssProp, AriaProps, TestProps, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
+import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
+export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
     /**
      * apply flex fill styling
      */
@@ -11,6 +11,10 @@ export interface CardProps extends CssProp, AriaProps, TestProps, ChildrenProp<R
      * click handler
      */
     onClick?: MouseEventHandler;
+    /**
+     * drag start handler
+     */
+    onDragStart?: (event: DragEvent, dragKey: string, dragData?: KeyValue) => void;
     /**
      * body css classname(s)
      */
@@ -36,4 +40,4 @@ export interface CardProps extends CssProp, AriaProps, TestProps, ChildrenProp<R
      */
     dragData?: KeyValue;
 }
-export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, flex, draggable, dragKey, dragData, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, onDragStart, flex, draggable, dragKey, dragData, ref, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/card/FlipContent.d.ts

@@ -0,0 +1,7 @@
+import { type ChildrenProp, type RefProp } from "../../types";
+export interface FlipContentRef {
+    flipCard: () => void;
+}
+export interface Props extends ChildrenProp, RefProp<FlipContentRef> {
+}
+export declare const FlipContent: ({ ref, children }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/chip/Chip.d.ts

@@ -1,14 +1,14 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type ChildProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type AriaProps, type ChildProp, type ColorType, type CssProp, type IconProps, type PaletteType, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
 export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
     /**
      * chip size
      */
-    size?: SizeType;
+    size?: SizeType | number | string;
     /**
      * chip color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * chip styling
      */

package/dist/types/components/collapsable/Collapsable.d.ts

@@ -1,8 +1,8 @@
 import { type RefObject } from "react";
 import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
 interface CollapsableRef {
-    button: RefObject<HTMLElement>;
-    body: RefObject<HTMLElement>;
+    button: RefObject<HTMLElement | null>;
+    body: RefObject<HTMLElement | null>;
     open: boolean;
 }
 export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp<CollapsableRef>, ChildrenProp {
@@ -18,6 +18,10 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
      * header button className
      */
     headerClassName?: string;
+    /**
+     * Header position sticky
+     */
+    stickyHeader?: boolean;
     /**
      * open state icon
      */
@@ -43,5 +47,5 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
      */
     onClose?: () => void;
 }
-export declare const Collapsable: ({ ref, disabled, className, bodyClassName, headerClassName, children, iconAlign, iconClosed, iconOpen, open, onClose, onOpen, ...aria }: CollapsableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapsable: ({ ref, disabled, className, bodyClassName, headerClassName, children, iconAlign, stickyHeader, iconClosed, iconOpen, open, onClose, onOpen, ...aria }: CollapsableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/divider/Divider.d.ts

@@ -1,20 +1,24 @@
-import { type CssProp, type ChildProp, type ColorType, type PaletteType } from "../../types";
+import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../../types";
 export interface DividerProps extends CssProp, Partial<ChildProp> {
-    /**
-     * apply text bg
-     */
-    fill?: boolean;
     /**
      * vertical rule
      */
     vertical?: boolean;
+    /**
+     * divider label classname(s)
+     */
+    labelClassName?: string;
     /**
      * rule color
      */
-    color?: ColorType | PaletteType | "tint";
+    color?: ColorType | PaletteType | string;
     /**
      * text alignment
      */
     align?: "start" | "end" | "center";
+    /**
+     * divider style
+     */
+    style?: "solid" | "dashed" | "dotted";
 }
-export declare const Divider: ({ children, color, vertical, fill, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: ({ children, color, vertical, labelClassName, style, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/dropdown/DropdownTool.d.ts

@@ -1,6 +1,7 @@
 import { type ChildProp, type CssProp } from "../../types";
 import { type DropdownProps } from "./Dropdown";
-export declare const DropdownTool: ({ children, className, groupHover, ...props }: ChildProp & CssProp & Omit<DropdownProps, "children"> & {
+export declare const DropdownTool: ({ children, className, groupHover, icon, ...props }: ChildProp & CssProp & Omit<DropdownProps, "children"> & {
+    icon?: string;
     /**
      * hide until group hovered
      */

package/dist/types/components/empty/EmptyContent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+import { type ChildrenProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
 export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenProp> {
     /**
      * empty title
@@ -17,5 +17,9 @@ export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenP
      * empty icon
      */
     icon?: string | React.ReactElement;
+    /**
+     * icon color
+     */
+    iconColor?: ColorType | PaletteType;
 }
-export declare const EmptyContent: ({ children, title, message, icon, className, size, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyContent: ({ children, title, message, icon, className, size, iconColor, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/icon/Icon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type PaletteType, type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
 export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
     /**
      * svg path / webfont className / 1-4 letter text
@@ -8,11 +8,11 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
     /**
      * background color (CSS color / tailwind color)
      */
-    bg?: ColorType | string;
+    bg?: ColorType | PaletteType | string;
     /**
      * icon color (CSS color / tailwind color)
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * flip icon in rtl
      */
@@ -33,6 +33,7 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
      * apply animation
      */
     animate?: "spin" | "pulse" | "bounce";
+    disabled?: boolean;
     /**
      * click handler
      */
@@ -41,4 +42,4 @@ export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
 /**
  * An icon is a display component for svg icon path / image
  */
-export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, disabled, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/index.d.ts

@@ -1,5 +1,5 @@
 export { ActionLabel } from "./actionLabel/ActionLabel";
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Skeleton, Loading, } from "./animations/Animations";
+export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton, } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
 export { Badge, getBadgeProps } from "./badge/Badge";
@@ -11,6 +11,7 @@ export { ToggleButtonGroup } from "./button/ToggleButtonGroup";
 export { Callout } from "./callout/Callout";
 export { Card } from "./card/Card";
 export { CardCover } from "./card/CardCover";
+export { FlipContent, type FlipContentRef } from "./card/FlipContent";
 export { Chip } from "./chip/Chip";
 export { Collapsable } from "./collapsable/Collapsable";
 export { Divider } from "./divider/Divider";

package/dist/types/components/media/Media.d.ts

@@ -1,5 +1,5 @@
-import { type AriaProps, type CssProp } from "../../types";
-export interface BaseProps extends CssProp, AriaProps {
+import { type AriaProps, type CssProp, type TestProps } from "../../types";
+export interface BaseProps extends CssProp, TestProps, AriaProps {
     /**
      * media source
      */

package/dist/types/components/menu/ContextMenu.d.ts

@@ -3,5 +3,6 @@ import { type ChildrenProp } from "../../types";
 import { type Menu } from "./Menu";
 export interface ContextMenuProps extends ChildrenProp {
     menu: React.ReactElement<typeof Menu>;
+    disabled?: boolean;
 }
-export declare const ContextMenu: ({ children, menu }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ children, menu, disabled }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/menu/MenuItem.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type PolymorphicProps } from "../../types";
 import { type MenuItemProps } from "./types";
-export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, tabIndex, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/menu/types.d.ts

@@ -1,5 +1,5 @@
 import { type ElementType, type MouseEvent } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type TestProps } from "../../types";
+import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type IconProps, type TestProps } from "../../types";
 export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps {
     /**
      * menu id passed via menu.onClick
@@ -16,7 +16,7 @@ export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps
     /**
      * menu color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * item active
      */
@@ -51,6 +51,7 @@ export interface MenuRootProps extends CssProp {
 export interface MenuInnerProps extends MenuItemProps {
     label: string;
     minimal?: never;
+    trigger?: "hover" | "click";
     /**
      * floating menu className
      */

package/dist/types/components/navigator/Navigator.d.ts

@@ -1,12 +1,15 @@
-import { type AriaProps, type ColorType, type CssProp, type TestProps } from "../../types";
-export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+import { type AriaProps, type ChildProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
+export interface NavigatorProps extends CssProp, AriaProps, TestProps, Partial<ChildProp> {
+    length?: number;
+    current?: number;
+    disableKeyHandlers?: boolean;
     /**
      * navigator button color
      */
-    color?: ColorType | string;
+    color?: ColorType | PaletteType | string;
     /**
      * navigation handler
      */
     onNavigate: (dir: -1 | 1) => void;
 }
-export declare const Navigator: ({ className, onNavigate, color, ...aria }: NavigatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navigator: ({ className, onNavigate, color, children, length, current, disableKeyHandlers, ...aria }: NavigatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/panel/Panel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
 import { type AriaProps, type ChildrenProp, type CollapseProps, type CssProp, type ExpandProps, type IconProps, type TestProps } from "../../types";

package/dist/types/components/progress/ProgressBar.d.ts

@@ -1,7 +1,7 @@
-import { type ColorType } from "../../types";
+import { type PaletteType, type ColorType } from "../../types";
 export interface ProgressProps {
     /**
-     * progress value (0-100)
+     * progress value (0-1)
      */
     value: number;
     /**
@@ -11,7 +11,7 @@ export interface ProgressProps {
     /**
      * color
      */
-    color?: ColorType;
+    color?: ColorType | PaletteType;
     /**
      * animate
      */

package/dist/types/components/progress/ProgressCircle.d.ts

@@ -1,7 +1,7 @@
-import { type ColorType } from "../../types";
+import { type PaletteType, type ColorType } from "../../types";
 export interface ProgressProps {
     /**
-     * progress value (0-100)
+     * progress value (0-1)
      */
     value: number;
     /**
@@ -11,6 +11,6 @@ export interface ProgressProps {
     /**
      * color
      */
-    color?: ColorType;
+    color?: ColorType | PaletteType;
 }
 export declare const ProgressCircle: ({ value, size, color, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/tabpanel/Tab.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from "react";
-import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps } from "../../types";
-export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps {
+import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorState, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps, type TooltipProp } from "../../types";
+export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps, TooltipProp {
     /**
      * tab id
      */
@@ -12,11 +12,11 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
     /**
      * tab color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * tab badge
      */
-    badge?: BadgeType;
+    badge?: string | number | BadgeType;
     /**
      * disabled
      */
@@ -42,4 +42,4 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
      */
     onClick?: (id: string) => CallbackReturn;
 }
-export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, minimal, onClick, tabFlex, color, actions, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, onClick, tabFlex, color, actions, tooltip, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/tabpanel/TabPanel.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type CallbackReturn, type ChildrenProp } from "../../types";
 import { Tab } from "./Tab";
 export interface TabPanelProps extends ChildrenProp<typeof Tab> {
@@ -29,6 +30,14 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
      * tab list className
      */
     headerClassName?: string;
+    /**
+     * append element
+     */
+    append?: ReactNode;
+    /**
+     * prepend element
+     */
+    prepend?: ReactNode;
     /**
      * change handler
      */
@@ -38,4 +47,4 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
      */
     onBeforeChange?: (nextTab: string, currentTab?: string) => CallbackReturn;
 }
-export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, justify, variant, tabFlex, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, justify, variant, tabFlex, append, prepend, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/boundary/ErrorBoundary.d.ts

@@ -22,5 +22,5 @@ export declare class ErrorBoundary extends Component<{
     };
     constructor(props: AnyObject);
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

package/dist/types/core/content/Content.d.ts

@@ -1,9 +1,10 @@
-import { type ChildrenProp, type CssProp, type PositionObject, type RefProp, type SizeObject, type TestProps } from "../../types";
+import { type MouseEvent } from "react";
+import { type ChildrenProp, type CssProp, type RefProp, type ScrollObject, type SizeObject, type TestProps } from "../../types";
 export interface ContentProps extends ChildrenProp, CssProp, RefProp, TestProps {
     /**
      * scroll vevent handler
      */
-    onScroll?: (event: PositionObject) => void;
+    onScroll?: (scroll: ScrollObject, event: MouseEvent<HTMLDivElement>) => void;
     /**
      * scroll vevent handler
      */

package/dist/types/core/headfoot/HeadFoot.d.ts

@@ -1,14 +1,6 @@
-import { type AriaProps, type ChildrenProp, type ColorWithGrays, type CssProp, type TestProps } from "../../types";
+import { type AriaProps, type ChildrenProp, type CssProp, type TestProps } from "../../types";
 interface BaseProps extends CssProp, AriaProps, ChildrenProp, TestProps {
     dir?: "ltr" | "rtl";
-    /**
-     * background color
-     */
-    bg?: ColorWithGrays | string;
-    /**
-     * background color
-     */
-    color?: ColorWithGrays | string;
 }
 type DefaultProps = BaseProps & {
     flex?: false;

package/dist/types/core/page/Page.d.ts

@@ -1,5 +1,5 @@
-import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
-export interface PageProps extends IconProps, ChildrenProp, TestProps {
+import { type ChildrenProp, type IconProps, type RefProp, type TestProps } from "../../types";
+export interface PageProps extends IconProps, ChildrenProp, TestProps, RefProp<HTMLDivElement> {
     /**
      * page title
      */
@@ -20,4 +20,4 @@ export interface PageProps extends IconProps, ChildrenProp, TestProps {
 /**
  * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
  */
-export declare const Page: ({ children, paper, title, titleClassName, icon, rtlFlip, iconBg, iconColor, loading, "data-testid": testId, "data-test-value": testValue, }: PageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Page: ({ ref, children, paper, title, titleClassName, icon, rtlFlip, iconBg, iconColor, loading, "data-testid": testId, "data-test-value": testValue, ...rest }: PageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/responsive/Responsive.d.ts

@@ -39,15 +39,19 @@ export interface ColProps extends AriaProps, CssProp, TestProps, Partial<Childre
     /**
      * column flex
      */
-    flex?: "auto" | "fill" | "full";
+    flex?: "auto" | "fill" | "full" | "initial" | "content";
     /**
      * stretch inner content
      */
     stretchContent?: boolean;
+    /**
+     * truncate text
+     */
+    truncate?: boolean;
 }
 /**
  * Responsive layout container
  */
 export declare const Container: ({ children, fullWidth, className, gutter, ...aria }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Row: ({ children, gutter, noWrap, orient, align, justify, className, ...aria }: RowProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Col: ({ children, flex, align, className, stretchContent, ...aria }: ColProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Col: ({ children, flex, align, truncate, className, stretchContent, ...aria }: ColProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/theme/ThemeProvider.d.ts

@@ -8,9 +8,9 @@ export interface ThemeProps {
      * branding css className
      *
      * .branding {
-     *  --primary: #color;
-     *  --accent: #color;
-     *  --tint: #color;
+     *  --color-primary: #color;
+     *  --color-accent: #color;
+     *  --color-tint: #color;
      * }
      */
     branding?: string;
@@ -29,7 +29,7 @@ export interface ThemeProps {
     /**
      * component rounding
      */
-    rounding?: "minimal" | "normal" | "full";
+    rounding?: "sm" | "md" | "full";
 }
 /**
  * Theme override

package/dist/types/hooks/useOverlayService.d.ts

@@ -1,8 +1,6 @@
-import { type FC, type ReactNode } from "react";
-type OverlayComponent = FC<{
-    onClose: (args?: AnyObject) => void;
-    [key: string]: AnyObject;
-}>;
+import { type ElementType, type ReactNode } from "react";
+import { type ModalProps } from "../types";
+type OverlayComponent = ElementType<ModalProps<AnyObject>>;
 export declare const useOverlayService: (ModalOrFlyout: OverlayComponent) => [
     Overlay: ReactNode | null,
     openOverlay: (props?: KeyValue) => Promise<AnyObject>

package/dist/types/hooks/useResize.d.ts

@@ -21,7 +21,7 @@ export declare const useResize: <T extends HTMLElement = HTMLDivElement>(onResiz
     x: number;
     y: number;
 }) => void, { isReverse, isVertical, onStart, onEnd }: Options) => {
-    ref: RefObject<T>;
+    ref: RefObject<T | null>;
     onMouseDown: React.MouseEventHandler;
 };
 export {};

package/dist/types/hooks/useResizeObserver.d.ts

@@ -1,3 +1,3 @@
 import { type RefObject } from "react";
 import { type SizeObject } from "../types";
-export declare const useResizeObserver: <T extends HTMLElement = HTMLDivElement>(onResize?: (size: SizeObject) => void) => RefObject<T>;
+export declare const useResizeObserver: <T extends HTMLElement = HTMLDivElement>(onResize?: (size: SizeObject) => void) => RefObject<T | null>;

package/dist/types/index.d.ts

@@ -15,5 +15,8 @@ export * from "./hooks/useResizeObserver";
 export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
+export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
+export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
+export { cloneChildren } from "./utils";
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";

package/dist/types/overlays/alert/Alert.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * toast type
@@ -16,7 +15,7 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */

package/dist/types/overlays/flyout/Flyout.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import { type ElementType } from "react";
 import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface FlyoutProps extends AriaProps, TestProps, IconProps, ChildrenProp {
+export interface FlyoutProps extends AriaProps, TestProps, Omit<IconProps, "icon">, ChildrenProp {
+    icon?: string | ElementType<IconProps>;
     /**
      * flyout alignment
      */

package/dist/types/overlays/message/Message.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * message title
@@ -12,7 +11,7 @@ export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */

package/dist/types/overlays/modal/Modal.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import { type ElementType } from "react";
 import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenProp {
+export interface ModalProps extends AriaProps, TestProps, Omit<IconProps, "icon">, ChildrenProp {
+    icon?: string | ElementType<IconProps>;
     /**
      * header className
      */
@@ -41,6 +42,14 @@ export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenPro
      * minimum width
      */
     minWidth?: string | number;
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
+    /**
+     * hide mask background
+     */
+    noMask?: boolean;
     /**
      * close handler
      */
@@ -50,4 +59,4 @@ export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenPro
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, size, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, noMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/toast/Toast.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
+import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * toast type
@@ -16,7 +15,7 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */

package/dist/types/overlays/tooltip/Tooltip.d.ts

@@ -10,9 +10,9 @@ export interface TooltipProps extends TooltipType, RefProp {
      */
     copyContent?: boolean | string;
     disabled?: boolean;
-    children: ReactElement;
+    children: ReactElement<KeyValue>;
 }
 export declare const getTooltipProps: (tooltip?: string | TooltipType, innerRef?: AnyObject) => (TooltipType & {
     ref: AnyObject;
 }) | undefined;
-export declare const Tooltip: ({ ref, children, color, content, open, copyContent, disabled, placement: _placement, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ ref, children, color, textColor, content, open, copyContent, disabled, placement: _placement, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;