@staffbase/design 20.4.0 → 21.0.0

package/dist/main.d.ts

@@ -16,7 +16,6 @@ import { Combobox } from '@base-ui/react/combobox';
 import { ComboboxChipProps } from '@base-ui/react';
 import { ComboboxItemProps } from '@base-ui/react';
 import { ComponentProps } from 'react';
-import { ComponentPropsWithoutRef } from 'react';
 import { ContextMenuGroupLabelProps } from '@base-ui/react';
 import { ContextMenuGroupProps } from '@base-ui/react';
 import { ContextMenuRadioGroupProps } from '@base-ui/react';
@@ -28,7 +27,6 @@ import { Drawer } from '@base-ui/react/drawer';
 import { DrawerDescriptionProps } from '@base-ui/react';
 import { DrawerTitleProps } from '@base-ui/react';
 import { DropzoneOptions } from 'react-dropzone';
-import { FC } from 'react';
 import { FieldDescriptionProps } from '@base-ui/react';
 import { FieldErrorProps } from '@base-ui/react';
 import { FieldLabelProps } from '@base-ui/react';
@@ -50,9 +48,10 @@ import { NumberFieldIncrementProps } from '@base-ui/react';
 import { NumberFieldInputProps } from '@base-ui/react';
 import { NumberFieldRootProps } from '@base-ui/react';
 import { Placement } from '@floating-ui/react';
+import { Popover as Popover_2 } from '@base-ui/react';
+import { PopoverCloseProps } from '@base-ui/react';
 import { Radio as Radio_2 } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroup_2 } from '@base-ui/react/radio-group';
-import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -70,6 +69,8 @@ import { SeparatorProps } from '@base-ui/react';
 import { SVGAttributes } from 'react';
 import { SwitchRootProps } from '@base-ui/react';
 import { TextareaHTMLAttributes } from 'react';
+import { Toggle as Toggle_2 } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup_2 } from '@base-ui/react/toggle-group';
 import { Tooltip as Tooltip_2 } from '@base-ui/react/tooltip';
 import { UseFloatingReturn } from '@floating-ui/react';
 import { UseInteractionsReturn } from '@floating-ui/react';
@@ -357,17 +358,6 @@ declare interface BaseFilterProps extends Pick<FilterOptions, 'placement'> {
     triggerClassname?: string;
 }
 
-declare interface BaseGhostButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The colors of the component
-     */
-    variant?: GhostButtonVariant;
-    /**
-     * "leading" refers to the start position, whereas "trailing" refers to the end position of the icon
-     */
-    iconPosition?: GhostButtonIconPosition;
-}
-
 declare interface BaseOption {
     id: string;
 }
@@ -562,10 +552,6 @@ export declare const CommentIcon: default_2.NamedExoticComponent<default_2.SVGAt
 
 export declare const ConnectionOffIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-declare interface ContentProps extends ComponentPropsWithoutRef<typeof RadixPopover.Content> {
-    container?: ComponentProps<typeof RadixPopover.Portal>['container'];
-}
-
 export declare const CopyIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const CropIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
@@ -836,29 +822,6 @@ export declare const FootballIcon: default_2.NamedExoticComponent<default_2.SVGA
 
 export declare const GalleryIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-/** @deprecated Use Button with variant="ghost" instead */
-export declare const GhostButton: ForwardRefExoticComponent<GhostButtonProps & RefAttributes<HTMLButtonElement>>;
-
-declare type GhostButtonIconPosition = 'leading' | 'trailing';
-
-/** @deprecated Use Button with variant="ghost" instead */
-export declare interface GhostButtonProps extends BaseGhostButtonProps {
-    /**
-     * Refers to the child element of the ghost button
-     */
-    children?: string;
-    /**
-     * Disabled state of the ghost button
-     */
-    disabled?: boolean;
-    /**
-     * The icon of the button
-     */
-    icon?: ReactElement<SVGAttributes<SVGElement>>;
-}
-
-declare type GhostButtonVariant = 'primary' | 'secondary' | 'critical';
-
 export declare const GlobeIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const GridIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
@@ -928,22 +891,6 @@ export declare const HouseIcon: default_2.NamedExoticComponent<default_2.SVGAttr
 
 export declare const Icon: ({ name, ...props }: IconProps) => ReactElement | null;
 
-/** @deprecated Use Button component with iconOnly instead */
-export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
-
-/** @deprecated Use Button component with iconOnly instead */
-export declare interface IconButtonProps extends Omit<BaseButtonProps, 'children'> {
-    icon: ReactElement<SVGAttributes<SVGElement>>;
-}
-
-/** @deprecated Use Button with variant="ghost" and iconOnly instead */
-export declare const IconGhostButton: ForwardRefExoticComponent<IconGhostButtonProps & RefAttributes<HTMLButtonElement>>;
-
-/** @deprecated Use Button with variant="ghost" and iconOnly instead */
-export declare interface IconGhostButtonProps extends Omit<BaseGhostButtonProps, 'children'> {
-    icon: ReactElement<SVGAttributes<SVGElement>>;
-}
-
 declare const iconList: {
     readonly add: NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
     readonly 'add-circle': NamedExoticComponent< SVGAttributes<SVGSVGElement> & RefAttributes<SVGSVGElement>>;
@@ -1612,15 +1559,18 @@ export declare const PluginThirdPartyIcon: default_2.NamedExoticComponent<defaul
 export declare const PollIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const Popover: {
-    Root: FC<RadixPopover.PopoverProps>;
-    Content: ForwardRefExoticComponent<ContentProps & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<RadixPopover.PopoverTriggerProps & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Close: ForwardRefExoticComponent<PopoverCloseProps & RefAttributes<HTMLButtonElement>>;
-    Anchor: ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & RefAttributes<HTMLDivElement>>;
+    Root: typeof Popover_2.Root;
+    Content: ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    Trigger: (props: PopoverTriggerProps) => JSX.Element;
+    Close: ForwardRefExoticComponent<Omit< PopoverCloseProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 };
 
-export declare interface PopoverCloseProps extends Omit<RadixPopover.PopoverCloseProps, 'children' | 'asChild'> {
-    title: string;
+declare interface PopoverContentProps extends Popover_2.Positioner.Props {
+    container?: Popover_2.Portal.Props['container'];
+}
+
+declare interface PopoverTriggerProps extends Omit<Popover_2.Trigger.Props, 'children'> {
+    children: Popover_2.Trigger.Props['render'];
 }
 
 declare interface PopupProps extends AlertDialog_2.Popup.Props, Pick<AlertDialog_2.Portal.Props, 'container'> {
@@ -2025,6 +1975,52 @@ declare interface SubMenuTriggerProps extends Menu_2.SubmenuTrigger.Props {
 
 export declare const Switch: ForwardRefExoticComponent<Omit< SwitchRootProps, "ref"> & RefAttributes<HTMLElement>>;
 
+/** @deprecated Use Switch component instead */
+export declare function SwitchDeprecated(props: SwitchDeprecatedProps): ReactElement;
+
+export declare namespace SwitchDeprecated {
+    var displayName: string;
+}
+
+export declare interface SwitchDeprecatedProps {
+    /**
+     * Refers to the checked state of the toggle
+     */
+    checked?: boolean;
+    /**
+     * Disables the toggle, label and optional description
+     */
+    disabled?: boolean;
+    /**
+     * Optional description below the label
+     */
+    description?: string;
+    /**
+     * Required label of the toggle
+     */
+    label: string;
+    /**
+     * Sets or returns the value of the name attribute
+     */
+    name: string;
+    /**
+     * The event when the value of the toggle has been changed
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The reference object of the toggle
+     */
+    ref?: RefObject<HTMLInputElement>;
+    /**
+     * Refers to space between the label and toggle and if true, it takes position to the end of the container
+     */
+    spaceBetween?: boolean;
+    /**
+     * Optional classname prop for styling
+     */
+    className?: string;
+}
+
 export declare const TabletIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
 export declare const Tabs: {
@@ -2144,50 +2140,12 @@ export declare const ThumbUpAltIcon: default_2.NamedExoticComponent<default_2.SV
 
 export declare const ThumbUpIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
-/** @deprecated Use Switch component instead */
-export declare function Toggle(props: ToggleProps): ReactElement;
+export declare const Toggle: ForwardRefExoticComponent<Omit<Toggle_2.Props<string>, "ref"> & RefAttributes<HTMLButtonElement>>;
 
-export declare namespace Toggle {
-    var displayName: string;
-}
+export declare const ToggleGroup: ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare interface ToggleProps {
-    /**
-     * Refers to the checked state of the toggle
-     */
-    checked?: boolean;
-    /**
-     * Disables the toggle, label and optional description
-     */
-    disabled?: boolean;
-    /**
-     * Optional description below the label
-     */
-    description?: string;
-    /**
-     * Required label of the toggle
-     */
-    label: string;
-    /**
-     * Sets or returns the value of the name attribute
-     */
-    name: string;
-    /**
-     * The event when the value of the toggle has been changed
-     */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The reference object of the toggle
-     */
-    ref?: RefObject<HTMLInputElement>;
-    /**
-     * Refers to space between the label and toggle and if true, it takes position to the end of the container
-     */
-    spaceBetween?: boolean;
-    /**
-     * Optional classname prop for styling
-     */
-    className?: string;
+declare interface ToggleGroupProps extends ToggleGroup_2.Props {
+    'aria-label': string;
 }
 
 export declare const Tooltip: {