@zvoove/unity-ui 2.26.3 → 2.28.0

package/dist/unity-ui.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler } from 'react';
+import { ComponentRef } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { Dispatch } from 'react';
@@ -292,9 +293,14 @@ export declare type ButtonsTranslations = {
     ok?: string;
 };
 
-export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+export declare const Card: {
+    <T extends React.ElementType = "div">({ children, header, headerBgColor, footer, footerBgColor, hideHeaderBorder, borderRadius, elevation, variant, padding, margin, className, overflow, bgColor, height, width, minHeight, maxHeight, minWidth, maxWidth, interactive, as, linkComponent, ...restProps }: CardProps<T> & {
+        ref?: ForwardedRef<ComponentRef<T>>;
+    }): JSX.Element;
+    displayName: string;
+};
 
-export declare interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare type CardProps<T extends React.ElementType = 'div'> = UnionAs_2 & {
     /**
      * The content of the card.
      */
@@ -386,7 +392,27 @@ export declare interface CardProps extends React.HTMLAttributes<HTMLDivElement>
      * The background color of the card.
      */
     bgColor?: BackgroundColors;
-}
+    /**
+     * When `true`, the card shows a hover background color at 80% opacity and
+     * a pointer cursor. Automatically enabled when `onClick`, `linkComponent`,
+     * or `as="a"` is set. Pass `false` to opt out.
+     */
+    interactive?: boolean;
+    /**
+     * Handle click events on the card.
+     */
+    onClick?: (event: MouseEvent_2<HTMLElement>) => void;
+    /**
+     * A custom component to render the card root as. Useful for router link
+     * components (e.g. Next.js `Link` or React Router `Link`).
+     * When provided, the `as` prop is ignored.
+     */
+    linkComponent?: T;
+    /**
+     * Ref forwarded to the root element.
+     */
+    ref?: ForwardedRef<ComponentRef<T>>;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className'>;
 
 /**
  * Event emitted when files are changed (added, removed, replaced, or cleared).
@@ -662,6 +688,7 @@ export declare const commonIconsMap: {
     readonly 'chat-slash': Icon_2;
     readonly chats: Icon_2;
     readonly check: Icon_2;
+    readonly circle: Icon_2;
     readonly 'check-circle': Icon_2;
     readonly checkbox: Icon_2;
     readonly 'checkbox-empty': Icon_2;
@@ -1302,11 +1329,11 @@ export declare type FlexResponsiveStylesKeys<Attr extends string> = GenerateSimp
 export declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
 export declare const FloatSearch: {
-    ({ open, onClose, items, onSearch, onSelect, value, placeholder, translations: translationsProp, zIndex, loading, }: FloatSearchProps): ReactPortal | null;
+    <T extends React.ElementType = "button">({ open, onClose, items, onSearch, onSelect, value, placeholder, translations: translationsProp, zIndex, loading, linkComponent: ItemComponent, }: FloatSearchProps<T>): ReactPortal | null;
     displayName: string;
 };
 
-export declare interface FloatSearchItem {
+export declare type FloatSearchItem<T extends React.ElementType = 'button'> = {
     /**
      * Unique identifier for the item.
      */
@@ -1323,9 +1350,9 @@ export declare interface FloatSearchItem {
      * Secondary metadata shown right-aligned (e.g. "Heute", "24 Chats").
      */
     meta?: string;
-}
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'id' | 'type'>;
 
-export declare interface FloatSearchProps {
+export declare type FloatSearchProps<T extends React.ElementType = 'button'> = {
     /**
      * Controls whether the search overlay is visible.
      */
@@ -1337,7 +1364,7 @@ export declare interface FloatSearchProps {
     /**
      * Items to display in the result list.
      */
-    items?: FloatSearchItem[];
+    items?: FloatSearchItem<T>[];
     /**
      * Called whenever the search query changes.
      */
@@ -1345,7 +1372,7 @@ export declare interface FloatSearchProps {
     /**
      * Called when the user confirms a result (Enter key or click).
      */
-    onSelect?: (item: FloatSearchItem) => void;
+    onSelect?: (item: FloatSearchItem<T>) => void;
     /**
      * Controlled search query value. When provided, the input becomes controlled.
      */
@@ -1371,7 +1398,13 @@ export declare interface FloatSearchProps {
      * @default false
      */
     loading?: boolean;
-}
+    /**
+     * The component to render each result item as. <br />
+     * This is useful if you want to use a different component like a `Link` component from **Next.js** or **React Router**.
+     * @default 'button'
+     */
+    linkComponent?: T | 'button';
+};
 
 export declare interface FloatSearchTranslations {
     /**
@@ -1597,6 +1630,7 @@ declare const iconMap: {
     readonly 'chat-slash': Icon_2;
     readonly chats: Icon_2;
     readonly check: Icon_2;
+    readonly circle: Icon_2;
     readonly 'check-circle': Icon_2;
     readonly checkbox: Icon_2;
     readonly 'checkbox-empty': Icon_2;
@@ -1984,6 +2018,22 @@ declare type LabelStates = {
     off: string;
 };
 
+export declare const List: {
+    <T extends default_2.ElementType = "div">({ items, showDividers, linkComponent: LinkComponent, }: ListProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare type ListItem<T extends default_2.ElementType = 'div'> = {
+    /**
+     * The content of the list item.
+     */
+    content: ReactNode;
+    /**
+     * The id of the list item. This will be use as the key for the list item.
+     */
+    id: string;
+} & Omit<default_2.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'content' | 'id'>;
+
 export declare const ListMenu: {
     <T extends default_2.ElementType = "a">({ items, activeItem, open, variant, linkComponent: LinkComponent, onItemClick, }: ListMenuProps<T>): JSX.Element;
     displayName: string;
@@ -2066,6 +2116,23 @@ export declare type ListMenuSection<T extends React.ElementType = 'a'> = {
 
 export declare type ListMenuVariant = 'default' | 'compact';
 
+export declare interface ListProps<T extends default_2.ElementType = 'div'> {
+    /**
+     * The items of the List.
+     */
+    items: ListItem<T>[];
+    /**
+     * Whether to show dividers between items.
+     * @default true
+     */
+    showDividers?: boolean;
+    /**
+     * The component to render for each list item.
+     * @default 'div'
+     */
+    linkComponent?: T | 'div';
+}
+
 export declare type Margin = SpacingKeys | {
     top?: SpacingKeys;
     right?: SpacingKeys;
@@ -2284,7 +2351,7 @@ declare type Panel = {
 
 export declare const PopUpMenu: ({ children, placement, disabled, trigger, density, closeOnItemClick, items, onItemClick, selectedItem, selectable, open, onClose, closeOnClickOutside, closeOnEscape, toggleOnClick, queryHighlight, showSearch, searchPlaceholder, allowClearAll, allowSelectAll, selectAllLabel, clearAllLabel, noResultsFoundMessage, onClearAllOrSelectAllClick, searchMode, onSearchChange, isLoading, wrapperWidth, onScrollEnd, isLoadingMore, height, minHeight, maxHeight, ...props }: PopUpMenuProps) => JSX.Element;
 
-export declare type PopUpMenuItem<T extends React.ElementType = 'button'> = UnionAs_2 & {
+export declare type PopUpMenuItem<T extends React.ElementType = 'button'> = UnionAs_3 & {
     /**
      * The id of the item
      * @required
@@ -3813,6 +3880,16 @@ declare type UnionAs = ({
 } & Omit<React.ComponentProps<'span'>, 'className'>);
 
 declare type UnionAs_2 = ({
+    /**
+     * Render the card root as a specific HTML element.
+     * @default 'div'
+     */
+    as?: 'a';
+} & Omit<React.ComponentProps<'a'>, 'className'>) | ({
+    as?: 'div';
+} & Omit<React.ComponentProps<'div'>, 'className'>);
+
+declare type UnionAs_3 = ({
     /**
      * The component to render the button as.
      * @default button