@zuzjs/ui 1.0.69 → 1.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -4,7 +4,7 @@ import { DragOptions, LineChartProps, MediaItem, useMediaPlayer, ScrollBreakpoin
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { dynamic as dynamic$1, PubSub } from '@zuzjs/core';
6
6
 
7
- declare const VERSION = "1.0.68";
7
+ declare const VERSION = "1.0.70";
8
8
 
9
9
  declare const AVATAR: {
10
10
  readonly Circle: "CIRCLE";
@@ -788,45 +788,100 @@ declare enum BubbleMediaType {
788
788
  Event = "event",
789
789
  Poll = "poll"
790
790
  }
791
+ declare enum BubbleAttachmentType {
792
+ File = "file",
793
+ Image = "image",
794
+ Video = "video",
795
+ Audio = "audio",
796
+ Link = "link"
797
+ }
798
+ type BubbleStylePreset = "default" | "ios" | "android" | "blocks" | "glass" | "minimal";
799
+ type BubbleAttachment = {
800
+ id?: string | number;
801
+ type?: BubbleAttachmentType;
802
+ name: string;
803
+ url: string;
804
+ size?: string;
805
+ preview?: string;
806
+ };
791
807
  type BubbleProps = BoxProps & {
792
808
  id?: string | number;
809
+ sender?: {
810
+ id: string;
811
+ name: string;
812
+ picture?: string;
813
+ color?: string;
814
+ };
793
815
  text?: string;
794
816
  media?: {
795
817
  type: BubbleMediaType;
796
818
  source: string;
797
819
  duration?: string;
820
+ thumbnail?: string;
821
+ title?: string;
798
822
  };
799
823
  side?: "me" | "you";
824
+ stylePreset?: BubbleStylePreset;
800
825
  status?: BubbleStatus;
801
826
  timeStamp?: number;
802
827
  arrow?: boolean;
828
+ attachments?: BubbleAttachment[];
829
+ /** Auto-fetch and display link previews from URLs in text */
830
+ autoFetchLinkPreview?: boolean;
831
+ /** Optional custom preview fetcher for links found in text */
832
+ linkPreviewFetcher?: (url: string) => Promise<{
833
+ title?: string;
834
+ description?: string;
835
+ image?: string;
836
+ url?: string;
837
+ } | null>;
838
+ /** Message this bubble is replying to */
839
+ replyTo?: {
840
+ author: string;
841
+ text: string;
842
+ id?: string | number;
843
+ };
844
+ /** Array of emoji reactions */
845
+ reactions?: string[];
846
+ /** Whether this message is forwarded */
847
+ forwarded?: boolean;
848
+ /** Complex nested content support */
849
+ children?: ReactNode;
803
850
  };
804
851
 
805
- /**
806
- * ChatBubble component.
807
- *
808
- * @example
809
- * // Basic usage
810
- * ```tsx
811
- * <ChatBubble message="Hello! How can I help?" sender="assistant" />
812
- * ```
813
- *
814
- * @example
815
- * // Advanced usage with additional props
816
- * ```tsx
817
- * <ChatBubble message="I need help with my order" sender="user" timestamp={new Date()} avatar="user-icon" />
818
- * ```
819
- * @param message - Message text or element
820
- * @param sender - sender prop
821
- * @param timestamp - timestamp prop
822
- * @param avatar - avatar prop
823
- */
824
- declare const Bubble: react.ForwardRefExoticComponent<Omit<BubbleProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
852
+ declare const Bubble: react.MemoExoticComponent<({ ref, ...props }: BubbleProps & {
853
+ ref?: Ref<HTMLDivElement>;
854
+ }) => react_jsx_runtime.JSX.Element>;
825
855
 
826
856
  type ChatMessage = BubbleProps;
827
- declare const ChatList: React.FC<{
857
+ type ChatDateLabels = {
858
+ today?: ReactNode;
859
+ yesterday?: ReactNode;
860
+ };
861
+ type ChatDateLabelFormatter = (timeStamp: number, context: {
862
+ date: Date;
863
+ dayDiff: number;
864
+ locale?: string;
865
+ labels: Required<ChatDateLabels>;
866
+ }) => ReactNode;
867
+ interface ChatListProps {
828
868
  messages: ChatMessage[];
829
- }>;
869
+ autoScroll?: boolean;
870
+ onScrollTop?: () => void;
871
+ typing?: boolean | string;
872
+ dateLabels?: ChatDateLabels;
873
+ locale?: string;
874
+ formatDateLabel?: ChatDateLabelFormatter;
875
+ }
876
+
877
+ /**
878
+ * ChatList component optimized for performance with auto-scroll and unread indicator.
879
+ * - Auto scrolls to bottom when new messages arrive
880
+ * - Allows manual scroll without disruption
881
+ * - Shows unread message count when scrolled up
882
+ * - Memoizes child components for optimal rendering
883
+ */
884
+ declare const ChatList: react.MemoExoticComponent<({ messages, autoScroll, onScrollTop, typing, dateLabels, locale, formatDateLabel, }: ChatListProps) => react_jsx_runtime.JSX.Element>;
830
885
 
831
886
  /**
832
887
  * Props for the CheckBox component.
@@ -1422,6 +1477,7 @@ type DrawerProps = Omit<BoxProps, `id`> & {
1422
1477
  prerender?: boolean;
1423
1478
  margin?: number;
1424
1479
  animation?: ValueOf<typeof TRANSITION_CURVES>;
1480
+ closeBtn?: Extract<Placement, "left" | "right">;
1425
1481
  onClose?: (id: number) => void;
1426
1482
  } & LayerHandler;
1427
1483
  interface DrawerHandler {
@@ -1907,16 +1963,27 @@ type ListItemObject = {
1907
1963
  onClick?: (event: any) => void;
1908
1964
  };
1909
1965
  type ListItem = Props<`li`> & (ReactNode | ListItemObject);
1966
+ type VirtualScrollOptions = {
1967
+ /** Height of each item in pixels */
1968
+ itemHeight?: number;
1969
+ /** Container height in pixels (auto-detected if not provided) */
1970
+ height?: number;
1971
+ /** Number of items to render outside visible area */
1972
+ overscan?: number;
1973
+ };
1910
1974
  type ListProps = Props<`ul` | `ol`> & {
1911
1975
  variant?: ValueOf<typeof Variant>;
1912
1976
  items: ListItem[];
1913
1977
  direction?: "cols" | "rows";
1914
1978
  seperator?: ReactNode;
1915
1979
  ol?: boolean;
1980
+ /** Virtual scrolling config for large lists */
1981
+ virtual?: VirtualScrollOptions;
1916
1982
  };
1917
1983
 
1918
1984
  /**
1919
- * List component.
1985
+ * List component with virtualization support.
1986
+ * Optimized for large lists with efficient rendering and fast scrolling.
1920
1987
  *
1921
1988
  * @example
1922
1989
  * // Basic usage
@@ -1925,13 +1992,14 @@ type ListProps = Props<`ul` | `ol`> & {
1925
1992
  * ```
1926
1993
  *
1927
1994
  * @example
1928
- * // Advanced usage with additional props
1995
+ * // Large list with virtual scrolling
1929
1996
  * ```tsx
1930
- * <List items={[{ label: "Tasks", count: 5 }, { label: "Done", count: 2 }]} onSelect={(item) => {}} divider />
1997
+ * <List items={items} virtual={{ itemHeight: 50 }} onSelect={(item) => {}} />
1931
1998
  * ```
1999
+ *
1932
2000
  * @param items - Array of items
1933
- * @param onSelect - Callback function triggered on selection
1934
- * @param divider - divider prop
2001
+ * @param virtual - Virtual scrolling options (itemHeight, overscan)
2002
+ * @param seperator - Separator between items
1935
2003
  */
1936
2004
  declare const List: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> | Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, keyof ZuzProps> & {
1937
2005
  variant?: ValueOf<typeof Variant>;
@@ -1939,6 +2007,7 @@ declare const List: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react.D
1939
2007
  direction?: "cols" | "rows";
1940
2008
  seperator?: react.ReactNode;
1941
2009
  ol?: boolean;
2010
+ virtual?: VirtualScrollOptions;
1942
2011
  } & react.RefAttributes<HTMLOListElement | HTMLUListElement>>;
1943
2012
 
1944
2013
  interface MediaPlayerController {
@@ -3484,4 +3553,4 @@ declare const useToast: () => {
3484
3553
  clearAll: () => void;
3485
3554
  };
3486
3555
 
3487
- export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, type AnimationTransition, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, BubbleMediaType, type BubbleProps, BubbleStatus, Button, type ButtonHandler, type ButtonKind, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Carousel, type CarouselEffect, type CarouselProps, Chart, type ChartProps, Bubble as ChatBubble, ChatList, 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, Fieldset, type FieldsetProps, type FilterProps, Filters, Flex, type FlexProps, Form, type FormHandler, type FormInputs, type FormProps, type FormValidation, 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 LoopMode, MediaPlayer, type MediaPlayerContextType, type MediaPlayerController, type MediaPlayerIcons, type MediaPlayerProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, PLACEMENTS, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationController, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, type Placement, 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 SelectEditableChange, type SelectEditableProps, type SelectHandler, type SelectInternalProps, type SelectMultipleChange, type SelectMultipleProps, type SelectPrimitive, type SelectProps, type SelectSingleChange, type SelectSingleProps, type SelectSingleValue, Segmented as SelectTabs, type SelectTokenizerProps, type SelectValue, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderController, type SliderProps, type ToastAction as SnackAction, type SnackController, 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 ToolTipController, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type ValidationResult, type ValidationSchema, type Value, type ValueOf, Variant, type WithFormValidation, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, VERSION as __ZUZJS_UI_VERSION, 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 };
3556
+ export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, type AnimationTransition, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, type BubbleAttachment, BubbleAttachmentType, BubbleMediaType, type BubbleProps, BubbleStatus, type BubbleStylePreset, Button, type ButtonHandler, type ButtonKind, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Carousel, type CarouselEffect, type CarouselProps, Chart, type ChartProps, Bubble as ChatBubble, type ChatDateLabelFormatter, type ChatDateLabels, ChatList, type ChatListProps, type ChatMessage, 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, Fieldset, type FieldsetProps, type FilterProps, Filters, Flex, type FlexProps, Form, type FormHandler, type FormInputs, type FormProps, type FormValidation, 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 LoopMode, MediaPlayer, type MediaPlayerContextType, type MediaPlayerController, type MediaPlayerIcons, type MediaPlayerProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, PLACEMENTS, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationController, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, type Placement, 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 SelectEditableChange, type SelectEditableProps, type SelectHandler, type SelectInternalProps, type SelectMultipleChange, type SelectMultipleProps, type SelectPrimitive, type SelectProps, type SelectSingleChange, type SelectSingleProps, type SelectSingleValue, Segmented as SelectTabs, type SelectTokenizerProps, type SelectValue, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderController, type SliderProps, type ToastAction as SnackAction, type SnackController, 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 ToolTipController, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type ValidationResult, type ValidationSchema, type Value, type ValueOf, Variant, type VirtualScrollOptions, type WithFormValidation, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, VERSION as __ZUZJS_UI_VERSION, 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 CHANGED
@@ -4,7 +4,7 @@ import { DragOptions, LineChartProps, MediaItem, useMediaPlayer, ScrollBreakpoin
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { dynamic as dynamic$1, PubSub } from '@zuzjs/core';
6
6
 
7
- declare const VERSION = "1.0.68";
7
+ declare const VERSION = "1.0.70";
8
8
 
9
9
  declare const AVATAR: {
10
10
  readonly Circle: "CIRCLE";
@@ -788,45 +788,100 @@ declare enum BubbleMediaType {
788
788
  Event = "event",
789
789
  Poll = "poll"
790
790
  }
791
+ declare enum BubbleAttachmentType {
792
+ File = "file",
793
+ Image = "image",
794
+ Video = "video",
795
+ Audio = "audio",
796
+ Link = "link"
797
+ }
798
+ type BubbleStylePreset = "default" | "ios" | "android" | "blocks" | "glass" | "minimal";
799
+ type BubbleAttachment = {
800
+ id?: string | number;
801
+ type?: BubbleAttachmentType;
802
+ name: string;
803
+ url: string;
804
+ size?: string;
805
+ preview?: string;
806
+ };
791
807
  type BubbleProps = BoxProps & {
792
808
  id?: string | number;
809
+ sender?: {
810
+ id: string;
811
+ name: string;
812
+ picture?: string;
813
+ color?: string;
814
+ };
793
815
  text?: string;
794
816
  media?: {
795
817
  type: BubbleMediaType;
796
818
  source: string;
797
819
  duration?: string;
820
+ thumbnail?: string;
821
+ title?: string;
798
822
  };
799
823
  side?: "me" | "you";
824
+ stylePreset?: BubbleStylePreset;
800
825
  status?: BubbleStatus;
801
826
  timeStamp?: number;
802
827
  arrow?: boolean;
828
+ attachments?: BubbleAttachment[];
829
+ /** Auto-fetch and display link previews from URLs in text */
830
+ autoFetchLinkPreview?: boolean;
831
+ /** Optional custom preview fetcher for links found in text */
832
+ linkPreviewFetcher?: (url: string) => Promise<{
833
+ title?: string;
834
+ description?: string;
835
+ image?: string;
836
+ url?: string;
837
+ } | null>;
838
+ /** Message this bubble is replying to */
839
+ replyTo?: {
840
+ author: string;
841
+ text: string;
842
+ id?: string | number;
843
+ };
844
+ /** Array of emoji reactions */
845
+ reactions?: string[];
846
+ /** Whether this message is forwarded */
847
+ forwarded?: boolean;
848
+ /** Complex nested content support */
849
+ children?: ReactNode;
803
850
  };
804
851
 
805
- /**
806
- * ChatBubble component.
807
- *
808
- * @example
809
- * // Basic usage
810
- * ```tsx
811
- * <ChatBubble message="Hello! How can I help?" sender="assistant" />
812
- * ```
813
- *
814
- * @example
815
- * // Advanced usage with additional props
816
- * ```tsx
817
- * <ChatBubble message="I need help with my order" sender="user" timestamp={new Date()} avatar="user-icon" />
818
- * ```
819
- * @param message - Message text or element
820
- * @param sender - sender prop
821
- * @param timestamp - timestamp prop
822
- * @param avatar - avatar prop
823
- */
824
- declare const Bubble: react.ForwardRefExoticComponent<Omit<BubbleProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
852
+ declare const Bubble: react.MemoExoticComponent<({ ref, ...props }: BubbleProps & {
853
+ ref?: Ref<HTMLDivElement>;
854
+ }) => react_jsx_runtime.JSX.Element>;
825
855
 
826
856
  type ChatMessage = BubbleProps;
827
- declare const ChatList: React.FC<{
857
+ type ChatDateLabels = {
858
+ today?: ReactNode;
859
+ yesterday?: ReactNode;
860
+ };
861
+ type ChatDateLabelFormatter = (timeStamp: number, context: {
862
+ date: Date;
863
+ dayDiff: number;
864
+ locale?: string;
865
+ labels: Required<ChatDateLabels>;
866
+ }) => ReactNode;
867
+ interface ChatListProps {
828
868
  messages: ChatMessage[];
829
- }>;
869
+ autoScroll?: boolean;
870
+ onScrollTop?: () => void;
871
+ typing?: boolean | string;
872
+ dateLabels?: ChatDateLabels;
873
+ locale?: string;
874
+ formatDateLabel?: ChatDateLabelFormatter;
875
+ }
876
+
877
+ /**
878
+ * ChatList component optimized for performance with auto-scroll and unread indicator.
879
+ * - Auto scrolls to bottom when new messages arrive
880
+ * - Allows manual scroll without disruption
881
+ * - Shows unread message count when scrolled up
882
+ * - Memoizes child components for optimal rendering
883
+ */
884
+ declare const ChatList: react.MemoExoticComponent<({ messages, autoScroll, onScrollTop, typing, dateLabels, locale, formatDateLabel, }: ChatListProps) => react_jsx_runtime.JSX.Element>;
830
885
 
831
886
  /**
832
887
  * Props for the CheckBox component.
@@ -1422,6 +1477,7 @@ type DrawerProps = Omit<BoxProps, `id`> & {
1422
1477
  prerender?: boolean;
1423
1478
  margin?: number;
1424
1479
  animation?: ValueOf<typeof TRANSITION_CURVES>;
1480
+ closeBtn?: Extract<Placement, "left" | "right">;
1425
1481
  onClose?: (id: number) => void;
1426
1482
  } & LayerHandler;
1427
1483
  interface DrawerHandler {
@@ -1907,16 +1963,27 @@ type ListItemObject = {
1907
1963
  onClick?: (event: any) => void;
1908
1964
  };
1909
1965
  type ListItem = Props<`li`> & (ReactNode | ListItemObject);
1966
+ type VirtualScrollOptions = {
1967
+ /** Height of each item in pixels */
1968
+ itemHeight?: number;
1969
+ /** Container height in pixels (auto-detected if not provided) */
1970
+ height?: number;
1971
+ /** Number of items to render outside visible area */
1972
+ overscan?: number;
1973
+ };
1910
1974
  type ListProps = Props<`ul` | `ol`> & {
1911
1975
  variant?: ValueOf<typeof Variant>;
1912
1976
  items: ListItem[];
1913
1977
  direction?: "cols" | "rows";
1914
1978
  seperator?: ReactNode;
1915
1979
  ol?: boolean;
1980
+ /** Virtual scrolling config for large lists */
1981
+ virtual?: VirtualScrollOptions;
1916
1982
  };
1917
1983
 
1918
1984
  /**
1919
- * List component.
1985
+ * List component with virtualization support.
1986
+ * Optimized for large lists with efficient rendering and fast scrolling.
1920
1987
  *
1921
1988
  * @example
1922
1989
  * // Basic usage
@@ -1925,13 +1992,14 @@ type ListProps = Props<`ul` | `ol`> & {
1925
1992
  * ```
1926
1993
  *
1927
1994
  * @example
1928
- * // Advanced usage with additional props
1995
+ * // Large list with virtual scrolling
1929
1996
  * ```tsx
1930
- * <List items={[{ label: "Tasks", count: 5 }, { label: "Done", count: 2 }]} onSelect={(item) => {}} divider />
1997
+ * <List items={items} virtual={{ itemHeight: 50 }} onSelect={(item) => {}} />
1931
1998
  * ```
1999
+ *
1932
2000
  * @param items - Array of items
1933
- * @param onSelect - Callback function triggered on selection
1934
- * @param divider - divider prop
2001
+ * @param virtual - Virtual scrolling options (itemHeight, overscan)
2002
+ * @param seperator - Separator between items
1935
2003
  */
1936
2004
  declare const List: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> | Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, keyof ZuzProps> & {
1937
2005
  variant?: ValueOf<typeof Variant>;
@@ -1939,6 +2007,7 @@ declare const List: react.ForwardRefExoticComponent<ZuzProps & Omit<Omit<react.D
1939
2007
  direction?: "cols" | "rows";
1940
2008
  seperator?: react.ReactNode;
1941
2009
  ol?: boolean;
2010
+ virtual?: VirtualScrollOptions;
1942
2011
  } & react.RefAttributes<HTMLOListElement | HTMLUListElement>>;
1943
2012
 
1944
2013
  interface MediaPlayerController {
@@ -3484,4 +3553,4 @@ declare const useToast: () => {
3484
3553
  clearAll: () => void;
3485
3554
  };
3486
3555
 
3487
- export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, type AnimationTransition, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, BubbleMediaType, type BubbleProps, BubbleStatus, Button, type ButtonHandler, type ButtonKind, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Carousel, type CarouselEffect, type CarouselProps, Chart, type ChartProps, Bubble as ChatBubble, ChatList, 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, Fieldset, type FieldsetProps, type FilterProps, Filters, Flex, type FlexProps, Form, type FormHandler, type FormInputs, type FormProps, type FormValidation, 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 LoopMode, MediaPlayer, type MediaPlayerContextType, type MediaPlayerController, type MediaPlayerIcons, type MediaPlayerProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, PLACEMENTS, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationController, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, type Placement, 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 SelectEditableChange, type SelectEditableProps, type SelectHandler, type SelectInternalProps, type SelectMultipleChange, type SelectMultipleProps, type SelectPrimitive, type SelectProps, type SelectSingleChange, type SelectSingleProps, type SelectSingleValue, Segmented as SelectTabs, type SelectTokenizerProps, type SelectValue, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderController, type SliderProps, type ToastAction as SnackAction, type SnackController, 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 ToolTipController, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type ValidationResult, type ValidationSchema, type Value, type ValueOf, Variant, type WithFormValidation, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, VERSION as __ZUZJS_UI_VERSION, 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 };
3556
+ export { ALERT, AVATAR, Accordion, type AccordionHandler, type AccordionProps, ActionBar, type ActionBarHandler, type ActionBarItem, type ActionBarProps, Alert, type AlertHandler, type AlertProps, type AnimationTransition, AutoComplete, type AutoCompleteProps, Avatar, type AvatarHandler, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, type BubbleAttachment, BubbleAttachmentType, BubbleMediaType, type BubbleProps, BubbleStatus, type BubbleStylePreset, Button, type ButtonHandler, type ButtonKind, type ButtonProps, ButtonState, CHART, CHECKBOX, COLORTHEME, Calendar, type CalendarProps, Carousel, type CarouselEffect, type CarouselProps, Chart, type ChartProps, Bubble as ChatBubble, type ChatDateLabelFormatter, type ChatDateLabels, ChatList, type ChatListProps, type ChatMessage, 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, Fieldset, type FieldsetProps, type FilterProps, Filters, Flex, type FlexProps, Form, type FormHandler, type FormInputs, type FormProps, type FormValidation, 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 LoopMode, MediaPlayer, type MediaPlayerContextType, type MediaPlayerController, type MediaPlayerIcons, type MediaPlayerProps, type MenuItemProps, type MorphOptions, type NetworkManagerprops, NetworkManager as NetworkStatus, ORIGIN, type Option, type OptionItemProps, OriginType, Overlay, type OverlayProps, PACKAGE_NAME, PLACEMENTS, POSITION, PROGRESS, Pagination, type PaginationCallback, type PaginationController, type PaginationPage, type PaginationPageItem, type PaginationProps, PaginationStyle, Password, type PasswordProps, PinInput, type PinInputProps, type Placement, 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 SelectEditableChange, type SelectEditableProps, type SelectHandler, type SelectInternalProps, type SelectMultipleChange, type SelectMultipleProps, type SelectPrimitive, type SelectProps, type SelectSingleChange, type SelectSingleProps, type SelectSingleValue, Segmented as SelectTabs, type SelectTokenizerProps, type SelectValue, Sheet, type SheetHandler, type SheetProps, type Skeleton, Slider, type SliderController, type SliderProps, type ToastAction as SnackAction, type SnackController, 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 ToolTipController, type ToolTipProps, type TreeItemHandler, type TreeItemProps, type TreeNode, type TreeNodeIcons, TreeView, type TreeViewHandler, type TreeViewProps, type ValidationResult, type ValidationSchema, type Value, type ValueOf, Variant, type VirtualScrollOptions, type WithFormValidation, type ZuzCommonValues, type ZuzProps, type ZuzStyleString, VERSION as __ZUZJS_UI_VERSION, 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 };