@solibo/solibo-ui 0.5.16 → 1.0.0

package/dist/index.d.ts

@@ -1,19 +1,10 @@
 import { AriaAttributes } from 'react';
-import { ChangeEvent } from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 import { default as default_2 } from 'react';
 import { ImgHTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-export declare const Accordion: ({ children, open, summary }: AccordionProps) => JSX.Element;
-
-declare type AccordionProps = {
-    children: React.ReactNode;
-    open?: boolean;
-    summary: React.ReactNode;
-};
-
 export declare const AppLink: ({ label, type }: AppLinkProps) => JSX.Element;
 
 declare type AppLinkProps = {
@@ -26,26 +17,36 @@ export declare const Aside: ({ children, className, sticky, variant }: AsideProp
 declare type AsideProps = {
     className?: string;
     children: React.ReactNode;
-    open?: boolean;
     sticky?: boolean;
-    variant?: keyof typeof variants_2;
+    variant?: keyof typeof variants;
 };
 
-export declare const Avatar: ({ accessibleLabel, imageUrl, link }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ accessibleLabel, color, imageUrl, link, name, role, size, }: AvatarProps) => JSX.Element;
 
-declare type AvatarProps = {
+export declare type AvatarColor = 'solibo' | 'board' | 'owner' | 'renter' | 'external' | '1' | '2' | '3' | '4' | '5';
+
+export declare type AvatarProps = {
     accessibleLabel?: string;
+    color?: AvatarColor;
     imageUrl?: string;
     link?: string;
+    name?: string;
+    role?: string;
+    size?: AvatarSize;
 };
 
-export declare const Badge: ({ children, deleteAccessibleLabel, onDelete, variant, }: BadgeProps) => JSX.Element;
+export declare type AvatarSize = 'small' | 'medium' | 'large';
+
+export declare const Badge: ({ color, children, icon, position, variant, }: BadgeProps) => JSX.Element | null;
 
-declare type BadgeProps = {
+export declare type BadgeColor = '1' | '2' | '3' | '4' | '5' | '6' | '7' | 'blue' | 'green' | 'magenta' | 'peach' | 'purple' | 'yellow';
+
+export declare type BadgeProps = {
+    color?: BadgeColor;
     children?: React.ReactNode;
-    deleteAccessibleLabel?: string;
-    onDelete?: () => void;
-    variant?: keyof typeof variants;
+    icon?: IconName;
+    position?: 'left' | 'right';
+    variant?: keyof typeof variants_2;
 };
 
 export declare const Banner: ({ button, message, onClick, onDismiss, visible }: BannerProps) => JSX.Element;
@@ -58,6 +59,15 @@ declare type BannerProps = {
     visible?: boolean;
 };
 
+declare type BaseCardProps = {
+    actions?: React.ReactNode;
+    badge?: BadgeProps;
+    checkbox?: CheckboxProps;
+    emphasis?: 'default' | 'muted';
+    icon?: IconName;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+};
+
 export declare const Branding: ({ name, size, variant }: BrandingProps) => JSX.Element;
 
 declare type BrandingProps = {
@@ -70,10 +80,11 @@ declare const brandingSVG: {
     logo: string;
 };
 
-export declare function Button({ children, className, disabled, icon, onClick, ref, variant, ...props }: ButtonProps): JSX.Element;
+export declare function Button({ badge, children, className, disabled, icon, onClick, ref, variant, ...props }: ButtonProps): JSX.Element;
 
 declare type ButtonProps = React.ComponentPropsWithRef<'button'> & {
-    children: React.ReactNode;
+    badge?: BadgeProps['children'];
+    children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     icon?: IconName;
@@ -81,20 +92,9 @@ declare type ButtonProps = React.ComponentPropsWithRef<'button'> & {
     variant?: keyof typeof variants_4;
 };
 
-export declare const Card: ({ actions, badge, checkbox, children, header, icon, image, imagePosition, onClick, variant, }: CardProps) => JSX.Element;
+export declare const Card: ({ actions, badge, checkbox, children, emphasis, header, icon, image, imagePosition, onClick, variant, }: CardProps) => JSX.Element;
 
-declare type CardProps = {
-    actions?: React.ReactNode;
-    badge?: BadgeProps;
-    checkbox?: CheckboxProps;
-    children?: React.ReactNode;
-    header?: React.ReactNode;
-    icon?: IconName;
-    image?: React.ReactNode;
-    imagePosition?: 'top' | 'left';
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    variant?: 'default' | 'minimal';
-};
+declare type CardProps = DefaultCardProps | MinimalCardProps;
 
 export declare const Checkbox: ({ checked, disabled, isLoading, label, onChange, ...props }: CheckboxProps) => JSX.Element;
 
@@ -108,18 +108,19 @@ declare type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
 
 export declare const Chip: ({ accessibleLabel, label, onClick, ...props }: ChipProps) => JSX.Element;
 
-declare type ChipProps = Omit<ComponentPropsWithoutRef<'span'>, 'onClick' | 'tabIndex'> & {
+declare type ChipProps = Omit<ComponentPropsWithoutRef<'a'>, 'onClick' | 'tabIndex'> & {
     accessibleLabel?: string;
     label: string;
     onClick: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 };
 
-export declare const Collapsible: ({ children, disabled, label }: CollapsibleProps) => JSX.Element;
+export declare const Collapsible: ({ children, disabled, open, summary }: CollapsibleProps) => JSX.Element;
 
-declare type CollapsibleProps = {
-    children: default_2.ReactNode;
+export declare type CollapsibleProps = {
+    children: ReactNode;
     disabled?: boolean;
-    label?: default_2.ReactNode;
+    open?: boolean;
+    summary: ReactNode;
 };
 
 export declare const Controls: ({ children, className, variant, ...props }: ControlsProps) => JSX.Element | null;
@@ -153,20 +154,54 @@ declare type CroppableTransform = {
     zoom: number;
 };
 
-export declare const Dialog: ({ children, setOpen, ...props }: DialogProps) => JSX.Element;
+declare type DefaultCardProps = BaseCardProps & {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    image?: React.ReactNode;
+    imagePosition?: 'top' | 'left';
+    variant?: 'default';
+};
+
+export declare const Dialog: ({ children, className, setOpen, ...props }: DialogProps) => JSX.Element;
 
 declare type DialogProps = default_2.DialogHTMLAttributes<HTMLDialogElement> & {
     children: default_2.ReactNode;
-    setOpen: default_2.Dispatch<default_2.SetStateAction<boolean>>;
+    setOpen?: default_2.Dispatch<default_2.SetStateAction<boolean>>;
 };
 
-export declare const Dropdown: ({ children: selectElement, className, emptyLabel, searchPlaceholder, variant, ...props }: DropdownProps) => JSX.Element;
+export declare const Dropdown: ({ children: selectElement, className, combobox, createOption, emptyLabel, label, renderOption, searchPlaceholder, selectedItems, variant, ...props }: DropdownProps) => JSX.Element;
+
+export declare type DropdownCreateOption = {
+    isValid: (value: string) => boolean;
+    onCreate: (value: string) => void;
+    render: (value: string) => default_2.ReactNode;
+};
+
+declare type DropdownOption = {
+    disabled: boolean;
+    groupLabel?: string;
+    hidden: boolean;
+    isPlaceholder: boolean;
+    label: default_2.ReactNode;
+    selected: boolean;
+    text: string;
+    value: string;
+};
 
 declare type DropdownProps = Omit<default_2.ComponentPropsWithoutRef<'div'>, 'children'> & {
     children: DropdownSelectElement;
+    combobox?: boolean;
+    createOption?: DropdownCreateOption;
     emptyLabel?: string;
+    label?: string;
+    renderOption?: (option: DropdownRenderOption) => default_2.ReactNode;
     searchPlaceholder?: string;
-    variant?: 'default' | 'minimal';
+    selectedItems?: default_2.ReactNode;
+    variant?: 'default' | 'inline' | 'minimal';
+};
+
+export declare type DropdownRenderOption = Pick<DropdownOption, 'groupLabel' | 'label' | 'text' | 'value'> & {
+    isSelected: boolean;
 };
 
 declare type DropdownSelectElement = NativeSelectElement | WrappedSelectElement;
@@ -183,26 +218,47 @@ declare type DropzoneProps = {
     variant?: 'default' | 'minimal';
 };
 
-export declare const Editor: ({ autofocus, autolink, content, inline, onChange, }: EditorProps) => JSX.Element;
+export declare const Editor: ({ autofocus, autolink, content, disabled, fill, files, inline, maxRows, minRows, onChange, onFilesChange, onSubmit, onUpload, placeholder, submitLabel, }: EditorProps) => JSX.Element;
 
-declare type EditorProps = {
+export declare type EditorProps = {
     autofocus?: boolean;
     autolink?: boolean;
     content?: string;
+    disabled?: boolean;
+    fill?: boolean;
+    files?: readonly File[];
     inline?: boolean;
+    maxRows?: number;
+    minRows?: number;
     onChange?: (html: string) => void;
+    onFilesChange?: (files: File[]) => void;
+    onSubmit?: () => Promise<void> | void;
+    onUpload?: (files: FileList) => Promise<void> | void;
+    placeholder?: string;
+    submitLabel?: string;
+};
+
+export declare const EmptyState: ({ button, content, header }: EmptyStateProps) => JSX.Element;
+
+export declare type EmptyStateProps = {
+    button?: React.ReactNode;
+    content: string;
+    header: string;
 };
 
-export declare const Figure: ({ accessibleLabel, children, className, offset }: FigureProps) => JSX.Element;
+export declare const Fieldset: ({ className, ...props }: FieldsetProps) => JSX.Element;
+
+export declare type FieldsetProps = React.ComponentPropsWithoutRef<'fieldset'>;
+
+export declare const Figure: ({ accessibleLabel, children, className }: FigureProps) => JSX.Element;
 
 declare type FigureProps = {
     accessibleLabel?: string;
     children?: React.ReactNode;
     className?: string;
-    offset?: 'left' | 'right';
 };
 
-declare const File_2: ({ deleteAccessibleLabel, name, onClick, onDelete, ref, url }: FileProps) => JSX.Element;
+declare const File_2: ({ deleteAccessibleLabel, name, onClick, onDelete, ref, subtitle, url, }: FileProps) => JSX.Element;
 export { File_2 as File }
 
 declare type FileProps = React.ComponentPropsWithRef<'div'> & {
@@ -210,6 +266,7 @@ declare type FileProps = React.ComponentPropsWithRef<'div'> & {
     name: string;
     onClick?: () => void;
     onDelete?: () => void;
+    subtitle?: string;
     url?: string;
 };
 
@@ -220,13 +277,13 @@ declare type FooterProps = React.ComponentPropsWithoutRef<'footer'> & {
     children?: React.ReactNode;
 };
 
-export declare const Form: ({ animation, children, className, inline, ...props }: FormProps) => JSX.Element;
+export declare const Form: ({ animation, children, className, fill, ...props }: FormProps) => JSX.Element;
 
 declare type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
     animation?: string;
     children?: React.ReactNode;
     className?: string;
-    inline?: boolean;
+    fill?: boolean;
 };
 
 export declare const Graph: ({ accessibleLabel, className, height, items, style, valueFormatter, ...props }: GraphProps) => JSX.Element;
@@ -251,14 +308,15 @@ declare type GroupProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
 };
 
-export declare const Header: ({ children, variant }: HeaderProps) => JSX.Element;
+export declare const Header: ({ capitalize, children, variant }: HeaderProps) => JSX.Element;
 
 declare type HeaderProps = {
+    capitalize?: boolean;
     children: React.ReactNode;
     variant?: keyof typeof variants_6;
 };
 
-export declare const Icon: ({ fill, gap, name, size, variant, }: IconProps) => JSX.Element;
+export declare const Icon: ({ fill, gap, name, size, variant }: IconProps) => JSX.Element;
 
 declare type IconName = keyof typeof iconPaths;
 
@@ -271,12 +329,16 @@ declare const iconPaths: {
         filled: string;
         outline: string;
     };
+    'arrow-up': string;
     bold: string;
     bookmark: {
         filled: string;
         outline: string;
     };
-    buildings: string;
+    buildings: {
+        filled: string;
+        outline: string;
+    };
     card: string;
     check: string;
     chevron: string;
@@ -284,12 +346,59 @@ declare const iconPaths: {
         filled: string;
         outline: string;
     };
-    document: string;
+    'clipboard-check': {
+        filled: string;
+    };
+    cog: {
+        filled: string;
+        outline: string;
+    };
+    conversation: {
+        filled: string;
+    };
+    details: string;
+    document: {
+        filled: string;
+        outline: string;
+    };
+    'document-doc': {
+        filled: string;
+    };
+    'document-pdf': {
+        filled: string;
+    };
+    'document-ppt': {
+        filled: string;
+    };
+    'document-xls': {
+        filled: string;
+    };
     dots: {
         filled: string;
         outline: string;
     };
+    draft: {
+        filled: string;
+    };
+    envelope: {
+        filled: string;
+    };
     error: string;
+    flag: {
+        filled: string;
+    };
+    folder: {
+        filled: string;
+    };
+    'folder-arrow': {
+        filled: string;
+    };
+    'folder-plus': {
+        filled: string;
+    };
+    funnel: {
+        filled: string;
+    };
     gear: string;
     goTo: string;
     home: string;
@@ -298,6 +407,9 @@ declare const iconPaths: {
         filled: string;
         outline: string;
     };
+    internal: {
+        filled: string;
+    };
     italic: string;
     link: string;
     list: string;
@@ -308,10 +420,6 @@ declare const iconPaths: {
     menu: string;
     mobile: string;
     pencil: string;
-    pencilSquare: {
-        filled: string;
-        outline: string;
-    };
     people: string;
     phone: string;
     plane: {
@@ -320,8 +428,16 @@ declare const iconPaths: {
     };
     plus: string;
     search: string;
+    sidebar: string;
+    sort: {
+        filled: string;
+        outline: string;
+    };
     success: string;
-    trash: string;
+    trash: {
+        filled: string;
+        outline: string;
+    };
     updown: string;
     upload: string;
     unbookmark: {
@@ -329,10 +445,20 @@ declare const iconPaths: {
         outline: string;
     };
     user: string;
+    'user-minus': {
+        filled: string;
+        outline: string;
+    };
+    'user-plus': {
+        filled: string;
+    };
+    users: {
+        filled: string;
+    };
     x: string;
 };
 
-declare type IconProps = {
+export declare type IconProps = {
     fill?: boolean;
     gap?: 'left' | 'none' | 'right';
     name: IconName;
@@ -340,6 +466,17 @@ declare type IconProps = {
     variant?: keyof typeof variants_7;
 };
 
+export declare const Iframe: ({ accessibleLabel, autoResize, className, closeFullscreenLabel, fullscreenLabel, hasFullscreenView, loading, onLoad, referrerPolicy, sandbox, srcDoc, style, ...props }: IframeProps) => JSX.Element;
+
+export declare type IframeProps = Omit<ComponentPropsWithoutRef<'iframe'>, 'src' | 'srcDoc' | 'title'> & {
+    accessibleLabel: string;
+    autoResize?: boolean;
+    closeFullscreenLabel?: string;
+    fullscreenLabel?: string;
+    hasFullscreenView?: boolean;
+    srcDoc: string;
+};
+
 declare function Image_2({ fadeDurationMs, showOnError, onLoad, onError, style, ...props }: ImageProps): JSX.Element;
 export { Image_2 as Image }
 
@@ -348,7 +485,7 @@ declare type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
     showOnError?: boolean;
 };
 
-export declare function Input({ className, defaultCountryCode, disabled, icon, label, placeholder, ref, required, type, ...props }: InputProps): JSX.Element;
+export declare function Input({ className, defaultCountryCode, disabled, icon, label, placeholder, ref, required, type, variant, ...props }: InputProps): JSX.Element;
 
 declare type InputProps = React.ComponentPropsWithRef<'input'> & {
     defaultCountryCode?: string;
@@ -357,6 +494,7 @@ declare type InputProps = React.ComponentPropsWithRef<'input'> & {
     label?: string;
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     placeholder?: string;
+    variant?: 'default' | 'inline';
     type?: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'radio' | 'search' | 'tel' | 'text';
 };
 
@@ -369,17 +507,15 @@ declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     variant?: 'danger' | 'minimal' | 'primary';
 };
 
-export declare function List({ children, className, columns, horizontal, ordered, style, ...props }: ListProps): JSX.Element;
+export declare function List({ children, className, columns, controls, horizontal, ordered, style, ...props }: ListProps): JSX.Element;
 
-declare type ListProps = React.ComponentPropsWithoutRef<'ul'> & {
+export declare type ListProps = React.ComponentPropsWithoutRef<'ul'> & {
     columns?: number;
+    controls?: React.ReactNode;
     horizontal?: boolean;
     ordered?: boolean;
 };
 
-/**
- *  Loader `size` needs to be divisible by `8` to ensure proper scaling (or by `unit` for golden ratio).
- */
 export declare const Loading: ({ variant, size, sticky, ...props }: LoadingProps) => JSX.Element;
 
 declare type LoadingProps = {
@@ -390,11 +526,12 @@ declare type LoadingProps = {
 
 export declare const Menu: ({ items, menuAccessibleLabel, onItemSelect, position, triggerAccessibleLabel, }: MenuProps) => JSX.Element;
 
-export declare type MenuItem = {
+declare type MenuItem = {
     accessibleLabel?: string;
     disabled?: boolean;
     icon?: IconName;
     id?: string;
+    isActive?: boolean;
     isDanger?: boolean;
     label: React.ReactNode;
     onSelect?: () => void;
@@ -408,30 +545,50 @@ declare type MenuProps = {
     triggerAccessibleLabel?: string;
 };
 
-export declare const Message: ({ content, iconName, id, preview, type, }: MessageOptions) => JSX.Element;
+export declare const Message: ({ appearance, attachments, author, authorColor, authorImageUrl, authorRole, content, iconName, id, preview, timestamp, type, }: MessageOptions) => JSX.Element;
 
 declare type MessageItem = MessageOptions;
 
 export declare type MessageOptions = {
+    appearance?: 'default' | 'document' | 'file';
+    attachments?: React.ReactNode;
+    author?: string;
+    authorColor?: AvatarColor;
+    authorImageUrl?: string;
+    authorRole?: string;
     content: React.ReactNode;
     iconName?: IconName;
     id: string;
     preview?: boolean;
+    timestamp?: Date | string;
     type?: 'default' | 'minimal' | 'system' | 'user';
 };
 
-export declare const Messages: ({ handleUpload, message, messages, onChange, onSubmit, placeholder, sending, }: MessagesProps) => JSX.Element;
+export declare const Messages: ({ fill, files, handleUpload, maxEditorRows, message, messages, minEditorRows, onChange, onFilesChange, onSubmit, placeholder, sending, }: MessagesProps) => JSX.Element;
 
-declare type MessagesProps = {
-    handleUpload: (files: FileList) => void;
+export declare type MessagesProps = {
+    fill?: boolean;
+    files?: readonly File[];
+    handleUpload: (files: FileList) => Promise<void> | void;
+    maxEditorRows?: number;
     message: string;
     messages: MessageItem[];
-    onSubmit: () => void;
-    onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    minEditorRows?: number;
+    onChange: (content: string) => void;
+    onFilesChange?: (files: File[]) => void;
+    onSubmit: () => Promise<void> | void;
     placeholder?: string;
     sending: boolean;
 };
 
+declare type MinimalCardProps = BaseCardProps & {
+    children?: never;
+    header: React.ReactNode;
+    image?: never;
+    imagePosition?: never;
+    variant: 'minimal';
+};
+
 declare type NativeSelectElement = default_2.ReactElement<NativeSelectProps, 'select'>;
 
 declare type NativeSelectProps = Omit<default_2.ComponentPropsWithoutRef<'select'>, 'children' | 'multiple'> & {
@@ -479,13 +636,41 @@ declare type PopoverRenderProps = {
     isOpen: boolean;
 };
 
-export declare const Portal: ({ accessibleLabel, children, portals, open, }: PortalProps) => JSX.Element;
+export declare const Portal: ({ children, portals, open, setOpen }: PortalProps) => JSX.Element;
 
 declare type PortalProps = {
     accessibleLabel?: string;
     children?: React.ReactNode;
     portals?: React.ReactNode;
-    open?: boolean;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+
+export declare const Search: ({ closeLabel, filterButtonLabel, filterDialogTitle, filterGroups, onChange, onSelectedFiltersChange, removeFilterLabel, resetLabel, searchLabel, searchPlaceholder, selectedFilters, value, }: SearchProps) => JSX.Element;
+
+declare type SearchFilter = {
+    label: string;
+    value: string;
+};
+
+declare type SearchFilterGroup = {
+    label?: string;
+    options: readonly SearchFilter[];
+};
+
+declare type SearchProps = {
+    closeLabel?: string;
+    filterButtonLabel?: string;
+    filterDialogTitle?: string;
+    filterGroups?: readonly SearchFilterGroup[];
+    onChange: (value: string) => void;
+    onSelectedFiltersChange?: (selectedFilters: string[]) => void;
+    removeFilterLabel?: (filter: SearchFilter) => string;
+    resetLabel?: string;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    selectedFilters?: readonly string[];
+    value?: string;
 };
 
 export declare const Select: ({ children, label, placeholder, ...props }: SelectProps) => JSX.Element;
@@ -507,14 +692,6 @@ declare const sizes: {
  */
 export declare function Sortable({ children, className, columns, isRearranging, onChangeOrder, ...props }: SortableProps): JSX.Element;
 
-declare type SortableItemContextValue = {
-    canMoveDown: boolean;
-    canMoveUp: boolean;
-    index: number;
-    moveDown: () => void;
-    moveUp: () => void;
-};
-
 declare type SortableProps = default_2.ComponentPropsWithoutRef<'ol'> & {
     columns?: number;
     isRearranging?: boolean;
@@ -584,17 +761,18 @@ declare type ToolbarProps = {
     variant?: 'default' | 'editor';
 };
 
-export declare function useOptionalSortableItem(): SortableItemContextValue | null;
-
 declare const variants: {
     default: string;
-    info: string;
-    primary: string;
+    sidebar: string;
 };
 
 declare const variants_2: {
     default: string;
-    meta: string;
+    highlight: string;
+    info: string;
+    primary: string;
+    success: string;
+    warning: string;
 };
 
 declare const variants_3: {
@@ -604,14 +782,15 @@ declare const variants_3: {
 
 declare const variants_4: {
     danger: string;
-    default: string;
-    minimal: string;
     primary: string;
+    secondary: string;
+    tertiary: string;
 };
 
 declare const variants_5: {
     default: string;
     fixed: string;
+    inline: string;
 };
 
 declare const variants_6: {
@@ -621,14 +800,12 @@ declare const variants_6: {
 
 declare const variants_7: {
     danger: string;
-    default: string;
-    primary: string;
-    white: string;
 };
 
 declare const variants_8: {
     default: string;
     pills: string;
+    sidebar: string;
     tabs: string;
 };