@blocknote/ariakit 0.25.2 → 0.27.0

package/src/comments/Card.tsx

@@ -1,4 +1,4 @@
-import { Group as AriakitGroup } from "@ariakit/react";
+import { Button as AriakitButton, Group as AriakitGroup } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -8,14 +8,31 @@ export const Card = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Card"]
 >((props, ref) => {
-  const { className, children, ...rest } = props;
+  const {
+    className,
+    children,
+    selected,
+    headerText,
+    onFocus,
+    onBlur,
+    tabIndex,
+    ...rest
+  } = props;
 
   assertEmpty(rest, false);
 
   return (
     <AriakitGroup
-      className={mergeCSSClasses(className, "bn-ak-hovercard")}
+      className={mergeCSSClasses(
+        className,
+        "bn-ak-hovercard",
+        selected && "selected"
+      )}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={tabIndex}
       ref={ref}>
+      {headerText && <div className={"bn-header-text"}>{headerText}</div>}
       {children}
     </AriakitGroup>
   );
@@ -37,3 +54,23 @@ export const CardSection = forwardRef<
     </AriakitGroup>
   );
 });
+
+export const ExpandSectionsPrompt = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Comments"]["ExpandSectionsPrompt"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <AriakitButton
+      className={mergeCSSClasses(
+        className,
+        "bn-ak-button bn-ak-secondary bn-ak-expand-sections-prompt"
+      )}
+      ref={ref}>
+      {children}
+    </AriakitButton>
+  );
+});

package/src/comments/Comment.tsx

@@ -6,9 +6,12 @@ import { forwardRef, useState } from "react";
 
 const AuthorInfo = forwardRef<
   HTMLDivElement,
-  Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
+  Pick<
+    ComponentProps["Comments"]["Comment"],
+    "authorInfo" | "timeString" | "edited"
+  >
 >((props, _ref) => {
-  const { authorInfo, timeString, ...rest } = props;
+  const { authorInfo, timeString, edited, ...rest } = props;
 
   assertEmpty(rest, false);
 
@@ -30,7 +33,9 @@ const AuthorInfo = forwardRef<
       />
       <div className={"bn-ak-username"}>
         {authorInfo.username}
-        <span>{timeString}</span>
+        <span>
+          {timeString} {edited && "(edited)"}
+        </span>
       </div>
     </AriakitGroup>
   );
@@ -47,6 +52,7 @@ export const Comment = forwardRef<
     timeString,
     actions,
     children,
+    edited,
     ...rest
   } = props;
 

package/src/comments/Editor.tsx

@@ -12,13 +12,14 @@ export const Editor = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Editor"]
 >((props, ref) => {
-  const { className, onFocus, onBlur, editor, editable, ...rest } = props;
+  const { className, onFocus, onBlur, autoFocus, editor, editable, ...rest } =
+    props;
 
   assertEmpty(rest, false);
 
   return (
     <BlockNoteView
-      autoFocus={true}
+      autoFocus={autoFocus}
       className={className}
       editor={props.editor}
       sideMenu={false}

package/src/components.ts

@@ -33,7 +33,7 @@ import { TableHandle } from "./tableHandle/TableHandle.js";
 import { Toolbar } from "./toolbar/Toolbar.js";
 import { ToolbarButton } from "./toolbar/ToolbarButton.js";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect.js";
-import { Card, CardSection } from "./comments/Card.js";
+import { Card, CardSection, ExpandSectionsPrompt } from "./comments/Card.js";
 import { Comment } from "./comments/Comment.js";
 import { Editor } from "./comments/Editor.js";
 import { Badge, BadgeGroup } from "./badge/Badge.js";
@@ -60,6 +60,7 @@ export const components: Components = {
   LinkToolbar: {
     Root: Toolbar,
     Button: ToolbarButton,
+    Select: ToolbarSelect,
   },
   SideMenu: {
     Root: SideMenu,
@@ -81,6 +82,7 @@ export const components: Components = {
     Editor: Editor,
     Card: Card,
     CardSection: CardSection,
+    ExpandSectionsPrompt: ExpandSectionsPrompt,
   },
   Generic: {
     Badge: {
@@ -90,6 +92,7 @@ export const components: Components = {
     Toolbar: {
       Root: Toolbar,
       Button: ToolbarButton,
+      Select: ToolbarSelect,
     },
     Form: {
       Root: Form,

package/src/style.css

@@ -90,7 +90,7 @@
   --highlight: rgb(255 255 255/20%);
   --shadow: rgb(0 0 0/10%);
   box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--highlight),
-    inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
+  inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
   font-size: 0.7rem;
   border-radius: 4px;
   padding-inline: 4px;
@@ -221,14 +221,14 @@
 }
 
 .bn-ariakit .bn-thread-comments {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .bn-ak-avatar {
-    height: 24px;
-    width: 24px;
+  height: 24px;
+  width: 24px;
 }
 
 .bn-ak-username {
@@ -244,9 +244,9 @@
 }
 
 .bn-ak-author-info {
-    align-items: center;
-    display: flex;
-    gap: 16px
+  align-items: center;
+  display: flex;
+  gap: 16px
 }
 
 .bn-ariakit .bn-comment-editor .bn-editor {
@@ -271,9 +271,9 @@
 }
 
 .bn-ak-badge-group {
-    align-items: center;
-    display: flex;
-    gap: 4px;
+  align-items: center;
+  display: flex;
+  gap: 4px;
   flex-wrap: wrap;
   width: 100%;
 }
@@ -309,11 +309,33 @@
 }
 
 .bn-ak-skeleton {
-    background-color: rgb(255 255 255/25%);
+  background-color: rgb(255 255 255/25%);
 }
 
 .bn-ak-username.bn-ak-skeleton {
   border-radius: 8px;
   height: 16px;
   width: 100px;
+}
+
+.bn-ak-expand-sections-prompt {
+  padding: 0;
+  width: fit-content;
+}
+
+.bn-ak-expand-sections-prompt:hover {
+  background-color: transparent;
+}
+
+.bn-ariakit .bn-thread .bn-header-text,
+.bn-ariakit .bn-thread .bn-resolved-text {
+  font-size: 0.8rem;
+  font-style: italic;
+}
+
+.bn-ariakit .bn-thread.selected .bn-header-text,
+.bn-ariakit .bn-thread.selected .bn-resolved-text,
+.bn-ariakit .bn-thread.selected .bn-ak-author-info,
+.bn-ariakit .bn-thread.selected .bn-ak-expand-sections-prompt {
+  color: var(--bn-colors-selected-text);
 }

package/types/src/BlockNoteView.d.ts

@@ -1,3 +1,3 @@
-import { InlineContentSchema, StyleSchema } from "@blocknote/core";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
 import { BlockNoteViewProps } from "@blocknote/react";
-export declare const BlockNoteView: <BSchema extends Record<string, import("@blocknote/core").BlockConfig>, ISchema extends InlineContentSchema, SSchema extends StyleSchema>(props: BlockNoteViewProps<BSchema, ISchema, SSchema>) => import("react/jsx-runtime").JSX.Element;
+export declare const BlockNoteView: <BSchema extends BlockSchema, ISchema extends InlineContentSchema, SSchema extends StyleSchema>(props: BlockNoteViewProps<BSchema, ISchema, SSchema>) => import("react/jsx-runtime.js").JSX.Element;

package/types/src/badge/Badge.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
 export declare const Badge: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     text: string;
     icon?: import("react").ReactNode;
-    isSelected?: boolean | undefined;
-    mainTooltip?: string | undefined;
-    secondaryTooltip?: string | undefined;
-    onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    onMouseEnter?: (() => void) | undefined;
+    isSelected?: boolean;
+    mainTooltip?: string;
+    secondaryTooltip?: string;
+    onClick?: (event: React.MouseEvent) => void;
+    onMouseEnter?: () => void;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const BadgeGroup: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/comments/Card.d.ts

@@ -1,9 +1,17 @@
-/// <reference types="react" />
 export declare const Card: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
+    headerText?: string;
+    selected?: boolean;
+    onFocus?: (event: React.FocusEvent) => void;
+    onBlur?: (event: React.FocusEvent) => void;
+    tabIndex?: number;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CardSection: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ExpandSectionsPrompt: import("react").ForwardRefExoticComponent<{
+    className?: string;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/comments/Comment.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 export declare const Comment: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
     authorInfo: "loading" | import("@blocknote/core/types/src/comments").User;
     timeString: string;
+    edited: boolean;
     actions?: import("react").ReactNode;
-    showActions?: boolean | "hover" | undefined;
+    showActions?: boolean | "hover";
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/comments/Editor.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 export declare const Editor: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
+    autoFocus?: boolean;
     editable: boolean;
     editor: import("@blocknote/core").BlockNoteEditor<any, any, any>;
-    onFocus?: (() => void) | undefined;
-    onBlur?: (() => void) | undefined;
+    onFocus?: () => void;
+    onBlur?: () => void;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/input/TextInput.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="react" />
 export declare const TextInput: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     name: string;
-    label?: string | undefined;
+    label?: string;
     icon: import("react").ReactNode;
-    autoFocus?: boolean | undefined;
+    autoFocus?: boolean;
     placeholder: string;
     value: string;
     onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
     onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
-    onSubmit?: (() => void) | undefined;
+    onSubmit?: () => void;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/menu/Button.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 export declare const MenuButton: import("react").ForwardRefExoticComponent<({
-    className?: string | undefined;
-    onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    className?: string;
+    onClick?: (e: import("react").MouseEvent) => void;
     icon?: import("react").ReactNode;
-    onDragStart?: ((e: import("react").DragEvent<Element>) => void) | undefined;
-    onDragEnd?: ((e: import("react").DragEvent<Element>) => void) | undefined;
-    draggable?: boolean | undefined;
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: (e: React.DragEvent) => void;
+    draggable?: boolean;
 } & ({
     children: import("react").ReactNode;
-    label?: string | undefined;
+    label?: string;
 } | {
     children?: undefined;
     label: string;

package/types/src/menu/Menu.d.ts

@@ -1,24 +1,23 @@
-/// <reference types="react" />
 import { ComponentProps } from "@blocknote/react";
 export declare const Menu: (props: ComponentProps["Generic"]["Menu"]["Root"]) => import("react/jsx-runtime").JSX.Element;
 export declare const MenuDropdown: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
-    sub?: boolean | undefined;
+    sub?: boolean;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuItem: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
-    subTrigger?: boolean | undefined;
+    subTrigger?: boolean;
     icon?: import("react").ReactNode;
-    checked?: boolean | undefined;
-    onClick?: (() => void) | undefined;
+    checked?: boolean;
+    onClick?: () => void;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuLabel: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const MenuTrigger: (props: ComponentProps["Generic"]["Menu"]["Trigger"]) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
 export declare const MenuDivider: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
 } & import("react").RefAttributes<HTMLHRElement>>;

package/types/src/panel/Panel.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const Panel: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     tabs: {
         name: string;
         tabPanel: import("react").ReactNode;

package/types/src/panel/PanelButton.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 export declare const PanelButton: import("react").ForwardRefExoticComponent<({
-    className?: string | undefined;
+    className?: string;
     onClick: () => void;
 } & ({
     children: import("react").ReactNode;
-    label?: string | undefined;
+    label?: string;
 } | {
     children?: undefined;
     label: string;

package/types/src/panel/PanelFileInput.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const PanelFileInput: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     accept: string;
     value: File | null;
     placeholder: string;

package/types/src/panel/PanelTab.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const PanelTab: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/panel/PanelTextInput.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 export declare const PanelTextInput: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     value: string;
     placeholder: string;
     onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
-    onKeyDown: (event: import("react").KeyboardEvent<Element>) => void;
+    onKeyDown: (event: import("react").KeyboardEvent) => void;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/popover/Popover.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { ComponentProps } from "@blocknote/react";
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const PopoverContent: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     variant: "form-popover" | "panel-popover";
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/sideMenu/SideMenu.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const SideMenu: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/sideMenu/SideMenuButton.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 export declare const SideMenuButton: import("react").ForwardRefExoticComponent<({
-    className?: string | undefined;
-    onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    className?: string;
+    onClick?: (e: import("react").MouseEvent) => void;
     icon?: import("react").ReactNode;
-    onDragStart?: ((e: import("react").DragEvent<Element>) => void) | undefined;
-    onDragEnd?: ((e: import("react").DragEvent<Element>) => void) | undefined;
-    draggable?: boolean | undefined;
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: (e: React.DragEvent) => void;
+    draggable?: boolean;
 } & ({
     children: import("react").ReactNode;
-    label?: string | undefined;
+    label?: string;
 } | {
     children?: undefined;
     label: string;

package/types/src/suggestionMenu/SuggestionMenu.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const SuggestionMenu: import("react").ForwardRefExoticComponent<{
     id: string;
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuEmptyItem.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const SuggestionMenuEmptyItem: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuItem.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const SuggestionMenuItem: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     id: string;
     isSelected: boolean;
     onClick: () => void;

package/types/src/suggestionMenu/SuggestionMenuLabel.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const SuggestionMenuLabel: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuLoader.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const SuggestionMenuLoader: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export declare const GridSuggestionMenu: import("react").ForwardRefExoticComponent<{
     id: string;
     columns: number;
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const GridSuggestionMenuEmptyItem: import("react").ForwardRefExoticComponent<{
     columns: number;
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const GridSuggestionMenuItem: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     id: string;
     isSelected: boolean;
     onClick: () => void;

package/types/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare const GridSuggestionMenuLoader: import("react").ForwardRefExoticComponent<{
     columns: number;
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/tableHandle/ExtendButton.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export declare const ExtendButton: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
-    onClick: (e: import("react").MouseEvent<Element, MouseEvent>) => void;
-    onMouseDown: (e: import("react").MouseEvent<Element, MouseEvent>) => void;
+    className?: string;
+    onClick: (e: React.MouseEvent) => void;
+    onMouseDown: (e: React.MouseEvent) => void;
     children: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/tableHandle/TableHandle.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="react" />
 export declare const TableHandle: import("react").ForwardRefExoticComponent<({
-    className?: string | undefined;
+    className?: string;
     draggable: boolean;
-    onDragStart: (e: import("react").DragEvent<Element>) => void;
+    onDragStart: (e: React.DragEvent) => void;
     onDragEnd: () => void;
-    style?: import("react").CSSProperties | undefined;
+    style?: import("react").CSSProperties;
 } & ({
     children: import("react").ReactNode;
-    label?: string | undefined;
+    label?: string;
 } | {
     children?: undefined;
     label: string;

package/types/src/toolbar/Toolbar.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 export declare const Toolbar: import("react").ForwardRefExoticComponent<{
-    className?: string | undefined;
+    className?: string;
     children?: import("react").ReactNode;
-    onMouseEnter?: (() => void) | undefined;
-    onMouseLeave?: (() => void) | undefined;
-    variant?: "default" | "action-toolbar" | undefined;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    variant?: "default" | "action-toolbar";
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/toolbar/ToolbarButton.d.ts

@@ -1,19 +1,18 @@
-/// <reference types="react" />
 /**
  * Helper for basic buttons that show in the formatting toolbar.
  */
 export declare const ToolbarButton: import("react").ForwardRefExoticComponent<({
-    className?: string | undefined;
-    mainTooltip?: string | undefined;
-    secondaryTooltip?: string | undefined;
+    className?: string;
+    mainTooltip?: string;
+    secondaryTooltip?: string;
     icon?: import("react").ReactNode;
-    onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
-    isSelected?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    variant?: "default" | "compact" | undefined;
+    onClick?: (e: import("react").MouseEvent) => void;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    variant?: "default" | "compact";
 } & ({
     children: import("react").ReactNode;
-    label?: string | undefined;
+    label?: string;
 } | {
     children?: undefined;
     label: string;