@zuzjs/ui 1.0.23 → 1.0.25

package/dist/index.d.cts

@@ -298,13 +298,16 @@ interface Skeleton {
 interface LayerHandler {
     inBackground?: boolean;
     forceClose?: boolean;
+    forceLoading?: boolean;
 }
 interface DialogController {
     id: number;
+    setLoading: (mod: boolean) => void;
     hide: () => void;
 }
 interface DrawerController {
     id: number;
+    setLoading: (mod: boolean) => void;
     close: () => void;
 }
 
@@ -420,11 +423,23 @@ declare const Avatar: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react
     referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
 } & react.RefAttributes<AvatarHandler>>;
 
+declare const SPINNER: {
+    readonly Simple: "SIMPLE";
+    readonly Roller: "ROLLER";
+    readonly Wave: "Wave";
+};
+type SpinnerProps = BoxProps & {
+    type?: ValueOf<typeof SPINNER>;
+    variant?: ValueOf<typeof Variant>;
+};
+
 type BadgeProps = BoxProps & {
     size?: number;
     type?: ValueOf<typeof Status>;
+    variant?: ValueOf<typeof Variant>;
     label?: string;
     loading?: boolean;
+    spinner?: ValueOf<typeof SPINNER>;
 };
 declare const Badge: react__default.FC<BadgeProps>;
 
@@ -433,16 +448,6 @@ declare const Box: {
     displayName: string;
 };
 
-declare const SPINNER: {
-    readonly Simple: "SIMPLE";
-    readonly Roller: "ROLLER";
-    readonly Wave: "Wave";
-};
-type SpinnerProps = BoxProps & {
-    type?: ValueOf<typeof SPINNER>;
-    variant?: ValueOf<typeof Variant>;
-};
-
 type ButtonProps = Props<`button`> & {
     ref?: Ref<HTMLButtonElement>;
     icon?: string | null;
@@ -1036,6 +1041,23 @@ declare enum ToastType {
     Warn = "warn",
     Promise = "promise"
 }
+declare enum ToastPosition {
+    TopLeft = "TopLeft",
+    TopCenter = "TopCenter",
+    TopRight = "TopRight",
+    BottomLeft = "BottomLeft",
+    BottomCenter = "BottomCenter",
+    BottomRight = "BottomRight"
+}
+declare enum ToastStyle {
+    Stack = "stack",
+    Individual = "individual"
+}
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+}
 declare const ToastDefaultTitle: dynamic;
 interface ToastProps {
     id?: number;
@@ -1044,11 +1066,19 @@ interface ToastProps {
     title?: string | ReactNode;
     message?: string | ReactNode;
     duration?: number;
+    sticky?: boolean;
+    position?: ToastPosition;
+    style?: ToastStyle;
+    actions?: ToastAction[];
+    variant?: ValueOf<typeof Variant>;
     inBackground?: boolean;
+    progress?: boolean;
     onClose?: (id: number) => void;
     onClick?: () => void;
 }
 
+type LayerType = "dialog" | "drawer" | "toast" | "menu";
+
 declare const LayersProvider: FC<{
     children: ReactNode;
 }>;
@@ -1250,7 +1280,7 @@ interface OptionItemProps {
 /**
  * Props for the Select component.
  */
-type SelectProps = Omit<BoxProps, "onChange"> & {
+type SelectProps = Omit<BoxProps, "onChange" | "ref"> & {
     ref?: Ref<SelectHandler>;
     /**
      * Size of the select field.
@@ -1297,6 +1327,11 @@ type SelectProps = Omit<BoxProps, "onChange"> & {
      * Placeholder text for the search input field.
      */
     searchPlaceholder?: string;
+    /**
+     * Expand width to parent 100%
+     * width:100%
+     */
+    expanded?: boolean;
     /**
      * Max Height
      */
@@ -1707,6 +1742,9 @@ declare const TextWheel: react__default.ForwardRefExoticComponent<Omit<TextWheel
 
 declare const Toast: FC<ToastProps & {
     index: number;
+    total: number;
+    isHovered: boolean;
+    forceClose?: boolean;
 }>;
 
 type ToolTipProps = BoxProps & {
@@ -1784,8 +1822,14 @@ interface ThemeConfig {
      */
     spinner?: SpinnerProps;
     toast?: {
+        variant?: ValueOf<typeof Variant>;
+        position?: ToastPosition;
+        style?: ToastStyle;
+        transition?: ValueOf<typeof TRANSITIONS>;
         curve?: ValueOf<typeof TRANSITION_CURVES>;
+        type?: ToastType;
         duration?: number;
+        progress?: boolean;
     };
 }
 type ThemeProviderProps = {
@@ -1801,16 +1845,21 @@ declare const useBase: <T extends keyof JSX.IntrinsicElements>(props: Props<T>,
     rest: ComponentPropsWithRef<T>;
 };
 
-interface PositionOptions {
-    offset?: number;
-    direction?: ValueOf<typeof POSITION>;
-    container?: HTMLElement | null;
-    triggerRef?: React.RefObject<HTMLElement>;
-}
-declare const usePosition: (ref: React.RefObject<HTMLElement>, // The element to be positioned
-options?: PositionOptions) => {
-    postion: "fixed" | "absolute" | null;
-    reposition: () => void;
+declare const useContextMenu: () => {
+    showContextMenu: (e: MouseEvent$1<Element, MouseEvent> | TouchEvent, items: ContextItem[], origin?: ValueOf<typeof ORIGIN>) => void;
+    showMenu: (ref: RefObject<HTMLElement | null>, { items, origin, offsetX, offsetY, transition, curve, arrow, duration, header, footer }: {
+        transition?: ValueOf<typeof TRANSITIONS>;
+        curve?: ValueOf<typeof TRANSITION_CURVES>;
+        arrow?: boolean;
+        duration?: number;
+        offsetX?: number;
+        offsetY?: number;
+        items: ContextItem[];
+        origin?: ValueOf<typeof ORIGIN>;
+        header?: ReactNode | FC;
+        footer?: ReactNode | FC;
+    }) => void;
+    hide: (type: LayerType) => void;
 };
 
 declare const useDialog: () => {
@@ -1819,16 +1868,6 @@ declare const useDialog: () => {
     hide: (id: number) => void;
 };
 
-declare const useToast: () => {
-    show: (title: string, message?: string, icon?: string, duration?: number) => number;
-    hide: (id: number) => void;
-    success: (title: string, message?: string, icon?: string, duration?: number) => number;
-    error: (title: string, message?: string, icon?: string, duration?: number) => number;
-    warn: (title: string, message?: string, icon?: string, duration?: number) => number;
-    promise: (title: string, message?: string, icon?: string, duration?: number) => number;
-    clearAll: () => void;
-};
-
 declare const useDrawer: () => {
     clearAll: () => void;
     open: (child?: string | ReactNode | ReactNode[]) => DrawerController;
@@ -1860,21 +1899,48 @@ declare const useMorph: (sourceRef: RefObject<HTMLElement | null>, active: boole
     sourceRect: DOMRect | null;
 };
 
-declare const useContextMenu: () => {
-    showContextMenu: (e: MouseEvent$1<Element, MouseEvent> | TouchEvent, items: ContextItem[], origin?: ValueOf<typeof ORIGIN>) => void;
-    showMenu: (ref: RefObject<HTMLElement | null>, { items, origin, offsetX, offsetY, transition, curve, arrow, duration, header, footer }: {
-        transition?: ValueOf<typeof TRANSITIONS>;
-        curve?: ValueOf<typeof TRANSITION_CURVES>;
-        arrow?: boolean;
-        duration?: number;
-        offsetX?: number;
-        offsetY?: number;
-        items: ContextItem[];
-        origin?: ValueOf<typeof ORIGIN>;
-        header?: ReactNode | FC;
-        footer?: ReactNode | FC;
-    }) => void;
-    hide: () => void;
+interface PositionOptions {
+    offset?: number;
+    direction?: ValueOf<typeof POSITION>;
+    container?: HTMLElement | null;
+    triggerRef?: React.RefObject<HTMLElement>;
+}
+declare const usePosition: (ref: React.RefObject<HTMLElement>, // The element to be positioned
+options?: PositionOptions) => {
+    postion: "fixed" | "absolute" | null;
+    reposition: () => void;
+};
+
+interface SnackProps {
+    title: string;
+    message?: string;
+    icon?: string;
+    duration?: number;
+    sticky?: boolean;
+    position?: ToastPosition;
+    style?: ToastStyle;
+    actions?: ToastAction[];
+}
+interface SnackBtn {
+    label?: string;
+    onClick?: () => void;
+}
+declare const useSnack: () => {
+    ok: (props: SnackProps, ok?: SnackBtn) => number;
+    success: (props: SnackProps, ok?: SnackBtn) => number;
+    error: (props: SnackProps, ok?: SnackBtn) => number;
+    confirm: (props: SnackProps, ok?: SnackBtn, cancel?: SnackBtn) => number;
+    warn: (props: SnackProps, ok?: SnackBtn) => number;
+};
+
+declare const useToast: () => {
+    show: (title: string, message?: string, icon?: string, duration?: number) => number;
+    hide: (id: number) => void;
+    success: (title: string, message?: string, icon?: string, duration?: number) => number;
+    error: (title: string, message?: string, icon?: string, duration?: number) => number;
+    warn: (title: string, message?: string, icon?: string, duration?: number) => number;
+    promise: (title: string, message?: string, icon?: string, duration?: number) => number;
+    clearAll: () => void;
 };
 
 declare const PACKAGE_NAME: string;
@@ -1899,4 +1965,4 @@ declare const animationTransition: (transition: ValueOf<typeof TRANSITIONS>, off
 };
 declare const getAnimationTransition: (transition: ValueOf<typeof TRANSITIONS>, to?: boolean, from?: boolean) => dynamic;
 
-export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Bubble, BubbleMediaType, type BubbleProps, BubbleStatus, Button, type ButtonHandler, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Chart, type ChartProps, CheckBox, type CheckBoxProps, type CheckboxHandler, CodeBlock, type CodeBlockProps, ColorScheme$1 as ColorScheme, type Column, type ContextItem, ContextMenu, type ContextMenuHandler, type ContextMenuProps, type CookieConsentProps, CookiesConsent, Cover, type CoverProps, type CropHandler, CropShape, Cropper, type CropperProps, Crumb, type CrumbItem, type CrumbProps, DATATYPE, DIALOG, DIALOG_ACTION_POSITION, DRAWER_SIDE, DatePicker, Dialog, type DialogActionHandler, type DialogController, type DialogHandler, type DialogProps, Drawer, type DrawerController, type DrawerHandler, type DrawerProps, FILTER, FORMVALIDATION, FORMVALIDATION_STYLE, Fab, type FabProps, type FilterProps, Filters, Form, type FormHandler, type FormInputs, type FormProps, Grid, type GridProps, Group, type GroupProps, Icon, type IconProps, Image, type ImageProps, Input, type InputProps, type KeyCombination, type KeyboardKey, type KeyboardKeyProps, KeyBoardKeys as KeyboardKeys, KeysLabelMap, KeysMap, Label, type LabelProps, type LayerHandler, LayersProvider, List, type ListItem, type ListItemObject, type ListProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, Position, ProgressBar, type ProgressBarProps, type ProgressHandler, type Props, RADIO, Radio, type RadioHandler, type RadioProps, type Row, type RowSelectCallback, SHEET, SHEET_ACTION_POSITION, SKELETON, SLIDER, SORT, SPINNER, ScrollView, type ScrollViewProps, Search, type SearchHandler, type SearchProps, type Segment, type SegmentController, type SegmentItemProps, type SegmentProps, Select, type SelectHandler, type SelectProps, Segmented as SelectTabs, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderProps, Span, type SpanProps, Spinner, type SpinnerProps, Status, Switch, type CheckboxHandler as SwitchHandler, TRANSITIONS, TRANSITION_CURVES, type Tab, type TabBodyProps, type TabProps, TabView, type TabViewHandler, type TabViewProps, ForwardedTable as Table, type TableController, type TableOfContentItem, TableOfContents, type TableOfContentsProps, type TableProps, type TableSortCallback, Terminal, type TerminalCommandFn, type TerminalCommands, type TerminalHandler, type TerminalLine, type TerminalProps, Text, type TextAreaProps, TextWheel, type TextWheelHandler, type TextWheelProps, TextArea as Textarea, ThemeProvider, ToastDefaultTitle, type ToastProps, Toast as ToastProvider, ToastType, ToolTip, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type Value, type ValueOf, Variant, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, type animationProps, animationTransition, buildClassString, buildWithStyles, cleanProps, css, type cssShortKey, type cssShortKeys, type dynamic, getAnimationCurve, getAnimationTransition, getZuzMap, isKeyCombination, type parallaxEffectProps, setZuzMap, splitAtoms, useBase, useContextMenu, useDialog, useDrawer, useFx, useMorph, usePosition, useToast };
+export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Bubble, BubbleMediaType, type BubbleProps, BubbleStatus, Button, type ButtonHandler, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Chart, type ChartProps, CheckBox, type CheckBoxProps, type CheckboxHandler, CodeBlock, type CodeBlockProps, ColorScheme$1 as ColorScheme, type Column, type ContextItem, ContextMenu, type ContextMenuHandler, type ContextMenuProps, type CookieConsentProps, CookiesConsent, Cover, type CoverProps, type CropHandler, CropShape, Cropper, type CropperProps, Crumb, type CrumbItem, type CrumbProps, DATATYPE, DIALOG, DIALOG_ACTION_POSITION, DRAWER_SIDE, DatePicker, Dialog, type DialogActionHandler, type DialogController, type DialogHandler, type DialogProps, Drawer, type DrawerController, type DrawerHandler, type DrawerProps, FILTER, FORMVALIDATION, FORMVALIDATION_STYLE, Fab, type FabProps, type FilterProps, Filters, Form, type FormHandler, type FormInputs, type FormProps, Grid, type GridProps, Group, type GroupProps, Icon, type IconProps, Image, type ImageProps, Input, type InputProps, type KeyCombination, type KeyboardKey, type KeyboardKeyProps, KeyBoardKeys as KeyboardKeys, KeysLabelMap, KeysMap, Label, type LabelProps, type LayerHandler, LayersProvider, List, type ListItem, type ListItemObject, type ListProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, Position, ProgressBar, type ProgressBarProps, type ProgressHandler, type Props, RADIO, Radio, type RadioHandler, type RadioProps, type Row, type RowSelectCallback, SHEET, SHEET_ACTION_POSITION, SKELETON, SLIDER, SORT, SPINNER, ScrollView, type ScrollViewProps, Search, type SearchHandler, type SearchProps, type Segment, type SegmentController, type SegmentItemProps, type SegmentProps, Select, type SelectHandler, type SelectProps, Segmented as SelectTabs, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderProps, type ToastAction as SnackAction, ToastPosition as SnackPosition, ToastStyle as SnackStyle, ToastType as SnackType, Span, type SpanProps, Spinner, type SpinnerProps, Status, Switch, type CheckboxHandler as SwitchHandler, TRANSITIONS, TRANSITION_CURVES, type Tab, type TabBodyProps, type TabProps, TabView, type TabViewHandler, type TabViewProps, ForwardedTable as Table, type TableController, type TableOfContentItem, TableOfContents, type TableOfContentsProps, type TableProps, type TableSortCallback, Terminal, type TerminalCommandFn, type TerminalCommands, type TerminalHandler, type TerminalLine, type TerminalProps, Text, type TextAreaProps, TextWheel, type TextWheelHandler, type TextWheelProps, TextArea as Textarea, ThemeProvider, type ToastAction, ToastDefaultTitle, ToastPosition, type ToastProps, Toast as ToastProvider, ToastStyle, ToastType, ToolTip, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type Value, type ValueOf, Variant, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, type animationProps, animationTransition, buildClassString, buildWithStyles, cleanProps, css, type cssShortKey, type cssShortKeys, type dynamic, getAnimationCurve, getAnimationTransition, getZuzMap, isKeyCombination, type parallaxEffectProps, setZuzMap, splitAtoms, useBase, useContextMenu, useDialog, useDrawer, useFx, useMorph, usePosition, useSnack, useToast };

package/dist/index.d.ts

@@ -298,13 +298,16 @@ interface Skeleton {
 interface LayerHandler {
     inBackground?: boolean;
     forceClose?: boolean;
+    forceLoading?: boolean;
 }
 interface DialogController {
     id: number;
+    setLoading: (mod: boolean) => void;
     hide: () => void;
 }
 interface DrawerController {
     id: number;
+    setLoading: (mod: boolean) => void;
     close: () => void;
 }
 
@@ -420,11 +423,23 @@ declare const Avatar: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react
     referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
 } & react.RefAttributes<AvatarHandler>>;
 
+declare const SPINNER: {
+    readonly Simple: "SIMPLE";
+    readonly Roller: "ROLLER";
+    readonly Wave: "Wave";
+};
+type SpinnerProps = BoxProps & {
+    type?: ValueOf<typeof SPINNER>;
+    variant?: ValueOf<typeof Variant>;
+};
+
 type BadgeProps = BoxProps & {
     size?: number;
     type?: ValueOf<typeof Status>;
+    variant?: ValueOf<typeof Variant>;
     label?: string;
     loading?: boolean;
+    spinner?: ValueOf<typeof SPINNER>;
 };
 declare const Badge: react__default.FC<BadgeProps>;
 
@@ -433,16 +448,6 @@ declare const Box: {
     displayName: string;
 };
 
-declare const SPINNER: {
-    readonly Simple: "SIMPLE";
-    readonly Roller: "ROLLER";
-    readonly Wave: "Wave";
-};
-type SpinnerProps = BoxProps & {
-    type?: ValueOf<typeof SPINNER>;
-    variant?: ValueOf<typeof Variant>;
-};
-
 type ButtonProps = Props<`button`> & {
     ref?: Ref<HTMLButtonElement>;
     icon?: string | null;
@@ -1036,6 +1041,23 @@ declare enum ToastType {
     Warn = "warn",
     Promise = "promise"
 }
+declare enum ToastPosition {
+    TopLeft = "TopLeft",
+    TopCenter = "TopCenter",
+    TopRight = "TopRight",
+    BottomLeft = "BottomLeft",
+    BottomCenter = "BottomCenter",
+    BottomRight = "BottomRight"
+}
+declare enum ToastStyle {
+    Stack = "stack",
+    Individual = "individual"
+}
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+}
 declare const ToastDefaultTitle: dynamic;
 interface ToastProps {
     id?: number;
@@ -1044,11 +1066,19 @@ interface ToastProps {
     title?: string | ReactNode;
     message?: string | ReactNode;
     duration?: number;
+    sticky?: boolean;
+    position?: ToastPosition;
+    style?: ToastStyle;
+    actions?: ToastAction[];
+    variant?: ValueOf<typeof Variant>;
     inBackground?: boolean;
+    progress?: boolean;
     onClose?: (id: number) => void;
     onClick?: () => void;
 }
 
+type LayerType = "dialog" | "drawer" | "toast" | "menu";
+
 declare const LayersProvider: FC<{
     children: ReactNode;
 }>;
@@ -1250,7 +1280,7 @@ interface OptionItemProps {
 /**
  * Props for the Select component.
  */
-type SelectProps = Omit<BoxProps, "onChange"> & {
+type SelectProps = Omit<BoxProps, "onChange" | "ref"> & {
     ref?: Ref<SelectHandler>;
     /**
      * Size of the select field.
@@ -1297,6 +1327,11 @@ type SelectProps = Omit<BoxProps, "onChange"> & {
      * Placeholder text for the search input field.
      */
     searchPlaceholder?: string;
+    /**
+     * Expand width to parent 100%
+     * width:100%
+     */
+    expanded?: boolean;
     /**
      * Max Height
      */
@@ -1707,6 +1742,9 @@ declare const TextWheel: react__default.ForwardRefExoticComponent<Omit<TextWheel
 
 declare const Toast: FC<ToastProps & {
     index: number;
+    total: number;
+    isHovered: boolean;
+    forceClose?: boolean;
 }>;
 
 type ToolTipProps = BoxProps & {
@@ -1784,8 +1822,14 @@ interface ThemeConfig {
      */
     spinner?: SpinnerProps;
     toast?: {
+        variant?: ValueOf<typeof Variant>;
+        position?: ToastPosition;
+        style?: ToastStyle;
+        transition?: ValueOf<typeof TRANSITIONS>;
         curve?: ValueOf<typeof TRANSITION_CURVES>;
+        type?: ToastType;
         duration?: number;
+        progress?: boolean;
     };
 }
 type ThemeProviderProps = {
@@ -1801,16 +1845,21 @@ declare const useBase: <T extends keyof JSX.IntrinsicElements>(props: Props<T>,
     rest: ComponentPropsWithRef<T>;
 };
 
-interface PositionOptions {
-    offset?: number;
-    direction?: ValueOf<typeof POSITION>;
-    container?: HTMLElement | null;
-    triggerRef?: React.RefObject<HTMLElement>;
-}
-declare const usePosition: (ref: React.RefObject<HTMLElement>, // The element to be positioned
-options?: PositionOptions) => {
-    postion: "fixed" | "absolute" | null;
-    reposition: () => void;
+declare const useContextMenu: () => {
+    showContextMenu: (e: MouseEvent$1<Element, MouseEvent> | TouchEvent, items: ContextItem[], origin?: ValueOf<typeof ORIGIN>) => void;
+    showMenu: (ref: RefObject<HTMLElement | null>, { items, origin, offsetX, offsetY, transition, curve, arrow, duration, header, footer }: {
+        transition?: ValueOf<typeof TRANSITIONS>;
+        curve?: ValueOf<typeof TRANSITION_CURVES>;
+        arrow?: boolean;
+        duration?: number;
+        offsetX?: number;
+        offsetY?: number;
+        items: ContextItem[];
+        origin?: ValueOf<typeof ORIGIN>;
+        header?: ReactNode | FC;
+        footer?: ReactNode | FC;
+    }) => void;
+    hide: (type: LayerType) => void;
 };
 
 declare const useDialog: () => {
@@ -1819,16 +1868,6 @@ declare const useDialog: () => {
     hide: (id: number) => void;
 };
 
-declare const useToast: () => {
-    show: (title: string, message?: string, icon?: string, duration?: number) => number;
-    hide: (id: number) => void;
-    success: (title: string, message?: string, icon?: string, duration?: number) => number;
-    error: (title: string, message?: string, icon?: string, duration?: number) => number;
-    warn: (title: string, message?: string, icon?: string, duration?: number) => number;
-    promise: (title: string, message?: string, icon?: string, duration?: number) => number;
-    clearAll: () => void;
-};
-
 declare const useDrawer: () => {
     clearAll: () => void;
     open: (child?: string | ReactNode | ReactNode[]) => DrawerController;
@@ -1860,21 +1899,48 @@ declare const useMorph: (sourceRef: RefObject<HTMLElement | null>, active: boole
     sourceRect: DOMRect | null;
 };
 
-declare const useContextMenu: () => {
-    showContextMenu: (e: MouseEvent$1<Element, MouseEvent> | TouchEvent, items: ContextItem[], origin?: ValueOf<typeof ORIGIN>) => void;
-    showMenu: (ref: RefObject<HTMLElement | null>, { items, origin, offsetX, offsetY, transition, curve, arrow, duration, header, footer }: {
-        transition?: ValueOf<typeof TRANSITIONS>;
-        curve?: ValueOf<typeof TRANSITION_CURVES>;
-        arrow?: boolean;
-        duration?: number;
-        offsetX?: number;
-        offsetY?: number;
-        items: ContextItem[];
-        origin?: ValueOf<typeof ORIGIN>;
-        header?: ReactNode | FC;
-        footer?: ReactNode | FC;
-    }) => void;
-    hide: () => void;
+interface PositionOptions {
+    offset?: number;
+    direction?: ValueOf<typeof POSITION>;
+    container?: HTMLElement | null;
+    triggerRef?: React.RefObject<HTMLElement>;
+}
+declare const usePosition: (ref: React.RefObject<HTMLElement>, // The element to be positioned
+options?: PositionOptions) => {
+    postion: "fixed" | "absolute" | null;
+    reposition: () => void;
+};
+
+interface SnackProps {
+    title: string;
+    message?: string;
+    icon?: string;
+    duration?: number;
+    sticky?: boolean;
+    position?: ToastPosition;
+    style?: ToastStyle;
+    actions?: ToastAction[];
+}
+interface SnackBtn {
+    label?: string;
+    onClick?: () => void;
+}
+declare const useSnack: () => {
+    ok: (props: SnackProps, ok?: SnackBtn) => number;
+    success: (props: SnackProps, ok?: SnackBtn) => number;
+    error: (props: SnackProps, ok?: SnackBtn) => number;
+    confirm: (props: SnackProps, ok?: SnackBtn, cancel?: SnackBtn) => number;
+    warn: (props: SnackProps, ok?: SnackBtn) => number;
+};
+
+declare const useToast: () => {
+    show: (title: string, message?: string, icon?: string, duration?: number) => number;
+    hide: (id: number) => void;
+    success: (title: string, message?: string, icon?: string, duration?: number) => number;
+    error: (title: string, message?: string, icon?: string, duration?: number) => number;
+    warn: (title: string, message?: string, icon?: string, duration?: number) => number;
+    promise: (title: string, message?: string, icon?: string, duration?: number) => number;
+    clearAll: () => void;
 };
 
 declare const PACKAGE_NAME: string;
@@ -1899,4 +1965,4 @@ declare const animationTransition: (transition: ValueOf<typeof TRANSITIONS>, off
 };
 declare const getAnimationTransition: (transition: ValueOf<typeof TRANSITIONS>, to?: boolean, from?: boolean) => dynamic;
 
-export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Bubble, BubbleMediaType, type BubbleProps, BubbleStatus, Button, type ButtonHandler, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Chart, type ChartProps, CheckBox, type CheckBoxProps, type CheckboxHandler, CodeBlock, type CodeBlockProps, ColorScheme$1 as ColorScheme, type Column, type ContextItem, ContextMenu, type ContextMenuHandler, type ContextMenuProps, type CookieConsentProps, CookiesConsent, Cover, type CoverProps, type CropHandler, CropShape, Cropper, type CropperProps, Crumb, type CrumbItem, type CrumbProps, DATATYPE, DIALOG, DIALOG_ACTION_POSITION, DRAWER_SIDE, DatePicker, Dialog, type DialogActionHandler, type DialogController, type DialogHandler, type DialogProps, Drawer, type DrawerController, type DrawerHandler, type DrawerProps, FILTER, FORMVALIDATION, FORMVALIDATION_STYLE, Fab, type FabProps, type FilterProps, Filters, Form, type FormHandler, type FormInputs, type FormProps, Grid, type GridProps, Group, type GroupProps, Icon, type IconProps, Image, type ImageProps, Input, type InputProps, type KeyCombination, type KeyboardKey, type KeyboardKeyProps, KeyBoardKeys as KeyboardKeys, KeysLabelMap, KeysMap, Label, type LabelProps, type LayerHandler, LayersProvider, List, type ListItem, type ListItemObject, type ListProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, Position, ProgressBar, type ProgressBarProps, type ProgressHandler, type Props, RADIO, Radio, type RadioHandler, type RadioProps, type Row, type RowSelectCallback, SHEET, SHEET_ACTION_POSITION, SKELETON, SLIDER, SORT, SPINNER, ScrollView, type ScrollViewProps, Search, type SearchHandler, type SearchProps, type Segment, type SegmentController, type SegmentItemProps, type SegmentProps, Select, type SelectHandler, type SelectProps, Segmented as SelectTabs, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderProps, Span, type SpanProps, Spinner, type SpinnerProps, Status, Switch, type CheckboxHandler as SwitchHandler, TRANSITIONS, TRANSITION_CURVES, type Tab, type TabBodyProps, type TabProps, TabView, type TabViewHandler, type TabViewProps, ForwardedTable as Table, type TableController, type TableOfContentItem, TableOfContents, type TableOfContentsProps, type TableProps, type TableSortCallback, Terminal, type TerminalCommandFn, type TerminalCommands, type TerminalHandler, type TerminalLine, type TerminalProps, Text, type TextAreaProps, TextWheel, type TextWheelHandler, type TextWheelProps, TextArea as Textarea, ThemeProvider, ToastDefaultTitle, type ToastProps, Toast as ToastProvider, ToastType, ToolTip, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type Value, type ValueOf, Variant, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, type animationProps, animationTransition, buildClassString, buildWithStyles, cleanProps, css, type cssShortKey, type cssShortKeys, type dynamic, getAnimationCurve, getAnimationTransition, getZuzMap, isKeyCombination, type parallaxEffectProps, setZuzMap, splitAtoms, useBase, useContextMenu, useDialog, useDrawer, useFx, useMorph, usePosition, useToast };
+export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Bubble, BubbleMediaType, type BubbleProps, BubbleStatus, Button, type ButtonHandler, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Chart, type ChartProps, CheckBox, type CheckBoxProps, type CheckboxHandler, CodeBlock, type CodeBlockProps, ColorScheme$1 as ColorScheme, type Column, type ContextItem, ContextMenu, type ContextMenuHandler, type ContextMenuProps, type CookieConsentProps, CookiesConsent, Cover, type CoverProps, type CropHandler, CropShape, Cropper, type CropperProps, Crumb, type CrumbItem, type CrumbProps, DATATYPE, DIALOG, DIALOG_ACTION_POSITION, DRAWER_SIDE, DatePicker, Dialog, type DialogActionHandler, type DialogController, type DialogHandler, type DialogProps, Drawer, type DrawerController, type DrawerHandler, type DrawerProps, FILTER, FORMVALIDATION, FORMVALIDATION_STYLE, Fab, type FabProps, type FilterProps, Filters, Form, type FormHandler, type FormInputs, type FormProps, Grid, type GridProps, Group, type GroupProps, Icon, type IconProps, Image, type ImageProps, Input, type InputProps, type KeyCombination, type KeyboardKey, type KeyboardKeyProps, KeyBoardKeys as KeyboardKeys, KeysLabelMap, KeysMap, Label, type LabelProps, type LayerHandler, LayersProvider, List, type ListItem, type ListItemObject, type ListProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, Position, ProgressBar, type ProgressBarProps, type ProgressHandler, type Props, RADIO, Radio, type RadioHandler, type RadioProps, type Row, type RowSelectCallback, SHEET, SHEET_ACTION_POSITION, SKELETON, SLIDER, SORT, SPINNER, ScrollView, type ScrollViewProps, Search, type SearchHandler, type SearchProps, type Segment, type SegmentController, type SegmentItemProps, type SegmentProps, Select, type SelectHandler, type SelectProps, Segmented as SelectTabs, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderProps, type ToastAction as SnackAction, ToastPosition as SnackPosition, ToastStyle as SnackStyle, ToastType as SnackType, Span, type SpanProps, Spinner, type SpinnerProps, Status, Switch, type CheckboxHandler as SwitchHandler, TRANSITIONS, TRANSITION_CURVES, type Tab, type TabBodyProps, type TabProps, TabView, type TabViewHandler, type TabViewProps, ForwardedTable as Table, type TableController, type TableOfContentItem, TableOfContents, type TableOfContentsProps, type TableProps, type TableSortCallback, Terminal, type TerminalCommandFn, type TerminalCommands, type TerminalHandler, type TerminalLine, type TerminalProps, Text, type TextAreaProps, TextWheel, type TextWheelHandler, type TextWheelProps, TextArea as Textarea, ThemeProvider, type ToastAction, ToastDefaultTitle, ToastPosition, type ToastProps, Toast as ToastProvider, ToastStyle, ToastType, ToolTip, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type Value, type ValueOf, Variant, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, type animationProps, animationTransition, buildClassString, buildWithStyles, cleanProps, css, type cssShortKey, type cssShortKeys, type dynamic, getAnimationCurve, getAnimationTransition, getZuzMap, isKeyCombination, type parallaxEffectProps, setZuzMap, splitAtoms, useBase, useContextMenu, useDialog, useDrawer, useFx, useMorph, usePosition, useSnack, useToast };