@staffbase/design 19.0.1 → 20.0.0

package/dist/main.d.ts

@@ -8,6 +8,7 @@ import { AutocompleteGroupProps } from '@base-ui/react';
 import { AutocompleteInputProps } from '@base-ui/react';
 import { AutocompleteListProps } from '@base-ui/react';
 import { AutocompleteStatusProps } from '@base-ui/react';
+import { Avatar as Avatar_2 } from '@base-ui/react/avatar';
 import { ButtonHTMLAttributes } from 'react';
 import { ChangeEvent } from 'react';
 import { ClassAttributes } from 'react';
@@ -129,6 +130,11 @@ export declare const ActionMenuTrigger: default_2.ForwardRefExoticComponent<{
     children: ReactNode;
 } & default_2.RefAttributes<HTMLElement>>;
 
+declare interface ActionProps extends ComponentProps<'button'> {
+    color?: Extract<ComponentProps<typeof Button>['color'], 'primary' | 'critical'>;
+    children: ReactNode;
+}
+
 export declare const AddCircleIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const AddIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
@@ -144,7 +150,7 @@ export declare const AlertDialog: {
     Trigger: (props: TriggerProps) => JSX.Element;
     Popup: ForwardRefExoticComponent<Omit<PopupProps, "ref"> & RefAttributes<HTMLDivElement>>;
     Cancel: ForwardRefExoticComponent<Omit<Omit< ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Action: ForwardRefExoticComponent<Omit<Omit< ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Action: ForwardRefExoticComponent<Omit<ActionProps, "ref"> & RefAttributes<HTMLButtonElement>>;
     Title: ForwardRefExoticComponent<Omit< AlertDialogTitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;
     Description: ForwardRefExoticComponent<Omit< AlertDialogDescriptionProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
     Icon: ForwardRefExoticComponent<Omit< ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
@@ -170,15 +176,26 @@ export declare const ArtboardIcon: default_2.NamedExoticComponent<default_2.SVGA
 
 export declare const AttachmentIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-export declare function Avatar(props: AvatarProps): ReactElement;
+export declare const Avatar: {
+    Root: ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+    Fallback: ForwardRefExoticComponent<Omit<FallbackProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+    Group: ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+    GroupCount: ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+    Image: ForwardRefExoticComponent<Omit<ImageProps, "ref"> & RefAttributes<HTMLImageElement>>;
+};
+
+/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+declare type AvatarColor = 'cyan' | 'pink' | 'purple' | 'teal';
+
+/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+export declare function AvatarDeprecated(props: AvatarDeprecatedProps): ReactElement;
 
-export declare namespace Avatar {
+export declare namespace AvatarDeprecated {
     var displayName: string;
 }
 
-declare type AvatarColor = 'cyan' | 'pink' | 'purple' | 'teal';
-
-export declare interface AvatarProps {
+/** @deprecated Use `Avatar` from `@staffbase/design` instead */
+export declare interface AvatarDeprecatedProps {
     /**
      * The `alt` attribute for the rendered `img` element
      */
@@ -207,10 +224,15 @@ export declare interface AvatarProps {
     className?: string;
 }
 
+declare interface AvatarProps extends Avatar_2.Root.Props {
+    size?: 48 | 40 | 32 | 24 | 16;
+}
+
 declare interface AvatarProps_2 extends Omit<ComponentProps<'div'>, 'children'> {
     size?: 48 | 40 | 32 | 24 | 16;
 }
 
+/** @deprecated Use `Avatar` from `@staffbase/design` instead */
 declare type AvatarSize = '48' | '40' | '32' | '24' | '16';
 
 declare interface BackProps extends ComponentProps<'button'> {
@@ -255,7 +277,7 @@ export declare interface BadgeProps {
 declare type BadgeVariant = 'primary' | 'secondary' | 'critical' | 'gamification';
 
 export declare const Banner: ForwardRefExoticComponent<BannerProps & RefAttributes<HTMLDivElement>> & {
-    CloseButton: ForwardRefExoticComponent<CloseButtonProps & RefAttributes<HTMLButtonElement>>;
+    Close: ForwardRefExoticComponent<Omit<CloseProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 };
 
 export declare interface BannerProps extends HTMLAttributes<HTMLDivElement> {
@@ -371,7 +393,7 @@ export declare const BottomSheet: {
     Root: typeof Drawer.Root;
     Popup: ForwardRefExoticComponent<Omit<PopupProps_2, "ref"> & RefAttributes<HTMLDivElement>>;
     Trigger: (props: TriggerProps_2) => JSX.Element;
-    Close: ForwardRefExoticComponent<Omit<CloseProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Close: ForwardRefExoticComponent<Omit<CloseProps_2, "ref"> & RefAttributes<HTMLButtonElement>>;
     Back: ForwardRefExoticComponent<Omit<BackProps, "ref"> & RefAttributes<HTMLButtonElement>>;
     Description: ForwardRefExoticComponent<Omit< DrawerDescriptionProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
     Title: ForwardRefExoticComponent<Omit< DrawerTitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;
@@ -389,6 +411,8 @@ export declare const BurgerIcon: default_2.NamedExoticComponent<default_2.SVGAtt
 
 export declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 
+declare type ButtonBaseProps = Omit<ComponentProps<'button'>, 'color'>;
+
 /** @deprecated Use Button instead */
 export declare const ButtonDeprecated: ForwardRefExoticComponent<ButtonDeprecatedProps & RefAttributes<HTMLButtonElement>>;
 
@@ -410,10 +434,7 @@ export declare interface ButtonDeprecatedProps extends BaseButtonProps {
 
 declare type ButtonIconPosition = 'leading' | 'trailing';
 
-export declare interface ButtonProps extends ComponentProps<'button'> {
-    variant?: 'solid' | 'outline' | 'ghost';
-    color?: 'primary' | 'neutral' | 'critical';
-    iconOnly?: boolean;
+export declare interface ButtonProps extends ButtonBaseProps, ButtonStyleProps {
     children: ReactNode;
 }
 
@@ -430,8 +451,22 @@ export declare interface ButtonSingleSelectProps<TOption extends BaseOption> ext
     ariaLabelledBy?: string;
 }
 
+declare interface ButtonStyleProps {
+    variant?: 'solid' | 'outline' | 'ghost';
+    color?: 'primary' | 'neutral' | 'critical';
+    iconOnly?: boolean;
+    className?: string;
+}
+
 declare type ButtonVariant = 'primary' | 'secondary' | 'critical';
 
+export declare function buttonVariants({ variant, color, iconOnly, className }?: ButtonStyleProps): {
+    className: string;
+    'data-variant': "solid" | "outline" | "ghost";
+    'data-color': "critical" | "primary" | "neutral";
+    'data-icon-only': boolean | undefined;
+};
+
 export declare const CalendarIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const CameraIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
@@ -502,20 +537,19 @@ export declare const ClickIcon: default_2.NamedExoticComponent<default_2.SVGAttr
 
 export declare const ClockIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-export declare interface CloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
-    className?: string;
-    'aria-label': string;
-}
-
 export declare const CloseCircleIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const CloseIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-declare interface CloseProps extends Drawer.Close.Props {
+declare interface CloseProps extends ComponentProps<'button'> {
+    'aria-label': string;
+}
+
+declare interface CloseProps_2 extends Drawer.Close.Props {
     'aria-label': string;
 }
 
-declare interface CloseProps_2 extends Omit<Dialog_2.Close.Props, 'children'> {
+declare interface CloseProps_3 extends Omit<Dialog_2.Close.Props, 'children'> {
     children: Dialog_2.Close.Props['render'];
 }
 
@@ -547,7 +581,7 @@ export declare const Dialog: {
     Root: typeof Dialog_2.Root;
     Popup: ForwardRefExoticComponent<Omit<PopupProps_3, "ref"> & RefAttributes<HTMLDivElement>>;
     Trigger: (props: TriggerProps_3) => JSX.Element;
-    Close: ForwardRefExoticComponent<Omit<CloseProps_2, "ref"> & RefAttributes<HTMLButtonElement>>;
+    Close: ForwardRefExoticComponent<Omit<CloseProps_3, "ref"> & RefAttributes<HTMLButtonElement>>;
     Description: ForwardRefExoticComponent<Omit< AlertDialogDescriptionProps, "ref"> & RefAttributes<HTMLParagraphElement>>;
     Title: ForwardRefExoticComponent<Omit< AlertDialogTitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;
     Header: ForwardRefExoticComponent<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
@@ -597,12 +631,30 @@ export declare const EmailOpenIcon: default_2.NamedExoticComponent<default_2.SVG
 
 export declare const EmailTeamsIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
+export declare const Empty: {
+    Root: ForwardRefExoticComponent<Omit< ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
+        children: ReactNode;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    Media: ForwardRefExoticComponent<Omit<EmptyMediaProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<Omit<EmptyTitleProps, "ref"> & RefAttributes<HTMLHeadingElement>>;
+    Description: ForwardRefExoticComponent<Omit< ClassAttributes<HTMLParagraphElement> & HTMLAttributes<HTMLParagraphElement> & {
+        children: ReactNode;
+    }, "ref"> & RefAttributes<HTMLParagraphElement>>;
+};
+
+declare interface EmptyMediaProps extends ComponentProps<'div'> {
+    children: ReactNode;
+    size?: 'xs' | 'md' | 'lg';
+}
+
+/** @deprecated Use Empty instead */
 export declare function EmptyState(props: EmptyStateProps): ReactElement;
 
 export declare namespace EmptyState {
     var displayName: string;
 }
 
+/** @deprecated Use Empty instead */
 export declare interface EmptyStateProps {
     /**
      * Defines the title of the component
@@ -627,12 +679,22 @@ export declare interface EmptyStateProps {
     className?: string;
 }
 
+declare interface EmptyTitleProps extends ComponentProps<'h2'> {
+    children: ReactNode;
+    as: 'h2' | 'h3' | 'h4' | 'p';
+}
+
 export declare const ExpandHorizontalIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const ExpandIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const ExpandVerticalIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
+declare interface FallbackProps extends Avatar_2.Fallback.Props {
+    name?: string;
+    children: ReactNode;
+}
+
 export declare const FeatureAnalyticsIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const FeatureCampaignsIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
@@ -1008,6 +1070,7 @@ declare const iconList: {
     readonly 'lock-alt': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly login: NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly logout: NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
+    readonly 'long-text': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'magic-wand': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'map-pin': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'merge-left': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
@@ -1093,9 +1156,11 @@ declare const iconList: {
     readonly settings: NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'share-android': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'share-ios': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
+    readonly 'short-text': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly shrink: NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'sidebar-left': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'sidebar-right': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
+    readonly 'single-choice-question': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'slider-question': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly snowflake: NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly sort: NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
@@ -1162,6 +1227,11 @@ declare type IconSize = '40px' | '96px';
 
 export declare const ImageIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
+declare interface ImageProps extends Avatar_2.Image.Props {
+    src: string;
+    alt: string;
+}
+
 export declare const ImageUploadIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const InfoIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
@@ -1213,6 +1283,8 @@ export declare const LoginIcon: default_2.NamedExoticComponent<default_2.SVGAttr
 
 export declare const LogoutIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
+export declare const LongTextIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const MagicWandIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const MapPinIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
@@ -1808,12 +1880,16 @@ export declare const ShareAndroidIcon: default_2.NamedExoticComponent<default_2.
 
 export declare const ShareIosIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
+export declare const ShortTextIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const ShrinkIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const SidebarLeftIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const SidebarRightIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
+export declare const SingleChoiceQuestionIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
+
 /** @deprecated use Select or SearchableSingleSelect components instead */
 export declare function SingleSelect<TOption extends BaseOption>(props: SingleSelectProps<TOption>): JSX.Element;