@zvk/ui 0.1.2 → 0.1.5

package/dist/components/hover-card/hover-card.js

@@ -0,0 +1,271 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { useFloatingPosition } from "../../internal/floating/index.js";
+import { placementFromSideAlign } from "../../internal/floating/placement-aliases.js";
+import { Portal } from "../../internal/portal/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { cn } from "../../utils/cn.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+const defaultContentPositioning = {
+    sideOffset: 8,
+    collisionPadding: 0
+};
+const HoverCardContext = React.createContext(null);
+function useHoverCardContext(calledBy) {
+    const context = React.useContext(HoverCardContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used within a <HoverCard />`);
+    }
+    return context;
+}
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref !== undefined && ref !== null) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function joinIds(...ids) {
+    const value = ids.filter((id) => id !== undefined && id !== "").join(" ");
+    return value.length > 0 ? value : undefined;
+}
+function getPlacementParts(placement) {
+    const [side, align = "center"] = placement.split("-");
+    return { side, align };
+}
+function HoverCardRoot({ children, closeDelay = 300, defaultOpen = false, disabled = false, onOpenChange, open: openProp, openDelay = 700, placement = "bottom" }) {
+    const generatedId = React.useId();
+    const contentId = `${generatedId}-content`;
+    const [open, setOpen] = useControllableState({
+        ...(openProp !== undefined ? { value: openProp } : {}),
+        defaultValue: defaultOpen,
+        ...(onOpenChange ? { onChange: onOpenChange } : {})
+    });
+    const [contentPositioning, setContentPositioning] = React.useState(defaultContentPositioning);
+    const openTimerRef = React.useRef(null);
+    const closeTimerRef = React.useRef(null);
+    const focusCloseTimerRef = React.useRef(null);
+    const referenceElement = React.useRef(null);
+    const contentElement = React.useRef(null);
+    const { floatingRef, floatingStyle, placement: resolvedPlacement, referenceRef, updatePosition } = useFloatingPosition({
+        open,
+        placement: contentPositioning.placement ?? placement,
+        offset: contentPositioning.sideOffset,
+        collisionPadding: contentPositioning.collisionPadding,
+        flip: true,
+        shift: true
+    });
+    const clearOpenTimer = React.useCallback(() => {
+        if (openTimerRef.current === null) {
+            return;
+        }
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = null;
+    }, []);
+    const clearCloseTimer = React.useCallback(() => {
+        if (closeTimerRef.current === null) {
+            return;
+        }
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+    }, []);
+    const clearFocusCloseTimer = React.useCallback(() => {
+        if (focusCloseTimerRef.current === null) {
+            return;
+        }
+        window.clearTimeout(focusCloseTimerRef.current);
+        focusCloseTimerRef.current = null;
+    }, []);
+    const close = React.useCallback(() => {
+        clearOpenTimer();
+        clearCloseTimer();
+        clearFocusCloseTimer();
+        setOpen(false);
+    }, [clearCloseTimer, clearFocusCloseTimer, clearOpenTimer, setOpen]);
+    const openImmediately = React.useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        clearOpenTimer();
+        clearCloseTimer();
+        clearFocusCloseTimer();
+        setOpen(true);
+    }, [clearCloseTimer, clearFocusCloseTimer, clearOpenTimer, disabled, setOpen]);
+    const openWithDelay = React.useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        clearOpenTimer();
+        clearCloseTimer();
+        clearFocusCloseTimer();
+        if (openDelay > 0) {
+            openTimerRef.current = window.setTimeout(() => {
+                setOpen(true);
+            }, openDelay);
+            return;
+        }
+        setOpen(true);
+    }, [clearCloseTimer, clearFocusCloseTimer, clearOpenTimer, disabled, openDelay, setOpen]);
+    const closeWithDelay = React.useCallback(() => {
+        clearOpenTimer();
+        clearCloseTimer();
+        if (closeDelay > 0) {
+            closeTimerRef.current = window.setTimeout(() => {
+                setOpen(false);
+            }, closeDelay);
+            return;
+        }
+        setOpen(false);
+    }, [clearCloseTimer, clearOpenTimer, closeDelay, setOpen]);
+    const isInsideHoverCard = React.useCallback((node) => {
+        if (node === null) {
+            return false;
+        }
+        return Boolean(referenceElement.current?.contains(node) || contentElement.current?.contains(node));
+    }, []);
+    const closeAfterFocusLeaves = React.useCallback((nextTarget) => {
+        clearFocusCloseTimer();
+        if (isInsideHoverCard(nextTarget)) {
+            return;
+        }
+        if (nextTarget !== null) {
+            close();
+            return;
+        }
+        focusCloseTimerRef.current = window.setTimeout(() => {
+            focusCloseTimerRef.current = null;
+            if (!isInsideHoverCard(document.activeElement)) {
+                close();
+            }
+        }, 0);
+    }, [clearFocusCloseTimer, close, isInsideHoverCard]);
+    const setReferenceRef = React.useCallback((node) => {
+        referenceElement.current = node;
+        referenceRef(node);
+    }, [referenceRef]);
+    const setFloatingRef = React.useCallback((node) => {
+        contentElement.current = node;
+        floatingRef(node);
+    }, [floatingRef]);
+    React.useEffect(() => {
+        if (open) {
+            updatePosition();
+        }
+    }, [open, updatePosition]);
+    React.useEffect(() => {
+        if (disabled) {
+            close();
+        }
+    }, [close, disabled]);
+    React.useEffect(() => () => {
+        clearOpenTimer();
+        clearCloseTimer();
+        clearFocusCloseTimer();
+    }, [clearCloseTimer, clearFocusCloseTimer, clearOpenTimer]);
+    const contextValue = React.useMemo(() => ({
+        cancelClose: clearCloseTimer,
+        close,
+        closeWithDelay,
+        closeAfterFocusLeaves,
+        contentElement,
+        contentId,
+        disabled,
+        floatingRef: setFloatingRef,
+        floatingStyle,
+        isInsideHoverCard,
+        open,
+        openImmediately,
+        openWithDelay,
+        referenceElement,
+        referenceRef: setReferenceRef,
+        resolvedPlacement,
+        setContentPositioning
+    }), [
+        clearCloseTimer,
+        close,
+        closeWithDelay,
+        closeAfterFocusLeaves,
+        contentId,
+        disabled,
+        floatingStyle,
+        isInsideHoverCard,
+        open,
+        openImmediately,
+        openWithDelay,
+        resolvedPlacement,
+        setFloatingRef,
+        setReferenceRef
+    ]);
+    return (_jsx(HoverCardContext.Provider, { value: contextValue, children: children }));
+}
+function HoverCardTrigger({ children, asChild: _asChild = false }) {
+    const context = useHoverCardContext("HoverCard.Trigger");
+    if (!React.isValidElement(children) || context.disabled) {
+        return children;
+    }
+    const trigger = children;
+    const childProps = trigger.props;
+    const childClassName = typeof childProps.className === "string" ? childProps.className : undefined;
+    const childAriaControls = childProps["aria-controls"];
+    const childAriaDescribedBy = childProps["aria-describedby"];
+    return React.cloneElement(trigger, {
+        ...childProps,
+        ref: composeRefs(childProps.ref, context.referenceRef),
+        "aria-controls": joinIds(typeof childAriaControls === "string" ? childAriaControls : undefined, context.contentId),
+        "aria-describedby": joinIds(typeof childAriaDescribedBy === "string" ? childAriaDescribedBy : undefined, context.open ? context.contentId : undefined),
+        "aria-expanded": context.open,
+        "aria-haspopup": "dialog",
+        className: cn("liano-hover-card__trigger", childClassName),
+        "data-state": context.open ? "open" : "closed",
+        onBlur: composeEventHandlers(childProps.onBlur, (event) => {
+            context.closeAfterFocusLeaves(event.relatedTarget);
+        }),
+        onFocus: composeEventHandlers(childProps.onFocus, context.openImmediately),
+        onMouseEnter: composeEventHandlers(childProps.onMouseEnter, context.openWithDelay),
+        onMouseLeave: composeEventHandlers(childProps.onMouseLeave, context.closeWithDelay),
+        onPointerEnter: composeEventHandlers(childProps.onPointerEnter, context.openWithDelay),
+        onPointerLeave: composeEventHandlers(childProps.onPointerLeave, context.closeWithDelay)
+    });
+}
+function HoverCardContent({ align, alignOffset: _alignOffset, children, className, collisionPadding = defaultContentPositioning.collisionPadding, container, forceMount = false, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, placement, ref, side, sideOffset = defaultContentPositioning.sideOffset, style, ...props }) {
+    const context = useHoverCardContext("HoverCard.Content");
+    const contentId = id ?? context.contentId;
+    const placementParts = getPlacementParts(context.resolvedPlacement);
+    const { setContentPositioning } = context;
+    React.useEffect(() => {
+        const resolvedPlacement = side === undefined ? placement : placementFromSideAlign(side, align, placement ?? "bottom");
+        setContentPositioning({
+            ...(resolvedPlacement === undefined ? {} : { placement: resolvedPlacement }),
+            sideOffset,
+            collisionPadding
+        });
+        return () => setContentPositioning(defaultContentPositioning);
+    }, [align, collisionPadding, placement, setContentPositioning, side, sideOffset]);
+    if (!context.open && !forceMount) {
+        return null;
+    }
+    const content = (_jsx("div", { ...props, ref: composeRefs(ref, context.floatingRef), id: contentId, role: "dialog", className: cn("liano-hover-card__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, onBlur: composeEventHandlers(onBlur, (event) => {
+            context.closeAfterFocusLeaves(event.relatedTarget);
+        }), onFocus: composeEventHandlers(onFocus, context.openImmediately), onMouseEnter: composeEventHandlers(onMouseEnter, context.cancelClose), onMouseLeave: composeEventHandlers(onMouseLeave, context.closeWithDelay), onPointerEnter: composeEventHandlers(onPointerEnter, context.cancelClose), onPointerLeave: composeEventHandlers(onPointerLeave, context.closeWithDelay), style: { ...context.floatingStyle, ...style }, children: children }));
+    if (!context.open) {
+        return _jsx(Portal, { ...(container === undefined ? {} : { container }), children: content });
+    }
+    return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: true, modal: false, onDismiss: context.close, onPointerDownOutside: (event) => {
+                const pointerEvent = event.detail;
+                const target = pointerEvent?.target;
+                if (context.referenceElement.current?.contains(target)) {
+                    event.preventDefault();
+                }
+            }, children: content }) }));
+}
+export const HoverCard = Object.assign(HoverCardRoot, {
+    Trigger: HoverCardTrigger,
+    Content: HoverCardContent
+});

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,2 @@
+export { HoverCard } from "./hover-card.js";
+export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps } from "./hover-card.js";

package/dist/components/hover-card/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { HoverCard } from "./hover-card.js";

package/dist/components/index.d.ts

@@ -12,6 +12,10 @@ export { Button } from "./button/index.js";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "./button/index.js";
 export { Card } from "./card/index.js";
 export type { CardDescriptionProps, CardPadding, CardProps, CardSlotProps, CardTitleProps, CardVariant } from "./card/index.js";
+export { Calendar } from "./calendar/index.js";
+export type { CalendarClassNames, CalendarMode, CalendarNativeProps, CalendarProps, CalendarSingleProps } from "./calendar/index.js";
+export { Carousel } from "./carousel/index.js";
+export type { CarouselApi, CarouselButtonProps, CarouselOrientation, CarouselPageProps, CarouselProps, CarouselSlideProps, CarouselTrackProps, CarouselViewportProps } from "./carousel/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export type { CheckboxProps, CheckboxSize } from "./checkbox/index.js";
 export { CodeBlock } from "./code-block/index.js";
@@ -20,10 +24,12 @@ export { Collapsible } from "./collapsible/index.js";
 export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from "./collapsible/index.js";
 export { CopyButton, CopyableText } from "./copy-button/index.js";
 export type { CopyButtonProps, CopyButtonSize, CopyStatus, CopyableTextProps } from "./copy-button/index.js";
+export { DatePicker } from "./date-picker/index.js";
+export type { DatePickerProps } from "./date-picker/index.js";
 export { Dialog } from "./dialog/index.js";
 export type { DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogOverlayProps, DialogProps, DialogTitleProps, DialogTriggerProps } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
-export type { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps } from "./dropdown-menu/index.js";
+export type { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, DropdownMenuSubProps, DropdownMenuTriggerProps } from "./dropdown-menu/index.js";
 export { AlertDialog } from "./alert-dialog/index.js";
 export type { AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps } from "./alert-dialog/index.js";
 export { Sheet } from "./sheet/index.js";
@@ -31,13 +37,13 @@ export type { SheetCloseProps, SheetContentProps, SheetDescriptionProps, SheetFo
 export { ScrollArea } from "./scroll-area/index.js";
 export type { ScrollAreaOrientation, ScrollAreaProps, ScrollAreaType, ScrollBarProps } from "./scroll-area/index.js";
 export { Command, CommandDialog } from "./command/index.js";
-export type { CommandDialogProps, CommandEmptyProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandProps, CommandSeparatorProps } from "./command/index.js";
+export type { CommandDialogProps, CommandEmptyProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandProps, CommandSeparatorProps, CommandShortcutProps } from "./command/index.js";
 export { Combobox } from "./combobox/index.js";
 export type { ComboboxOption, ComboboxProps } from "./combobox/index.js";
 export { ContextMenu } from "./context-menu/index.js";
-export type { ContextMenuContentProps, ContextMenuItemProps, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu/index.js";
+export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuLabelProps, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu/index.js";
 export { Menubar } from "./menubar/index.js";
-export type { MenubarContentProps, MenubarItemProps, MenubarMenuProps, MenubarProps, MenubarSeparatorProps, MenubarTriggerProps } from "./menubar/index.js";
+export type { MenubarContentProps, MenubarItemProps, MenubarLabelProps, MenubarMenuProps, MenubarProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarTriggerProps } from "./menubar/index.js";
 export { EmptyState } from "./empty-state/index.js";
 export type { EmptyStateAlign, EmptyStateProps, EmptyStateSize } from "./empty-state/index.js";
 export { ErrorBoundary, ErrorFallback } from "./error-boundary/index.js";
@@ -48,6 +54,8 @@ export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, For
 export type { FormControlProps, FormFieldProps, FormItemProps, FormLabelProps, FormProps, FormTextProps } from "./form/index.js";
 export { FileUploadInput } from "./file-upload-input/index.js";
 export type { FileUploadInputProps, FileUploadInputSize } from "./file-upload-input/index.js";
+export { HoverCard } from "./hover-card/index.js";
+export type { HoverCardContentProps, HoverCardProps, HoverCardTriggerProps } from "./hover-card/index.js";
 export { IconButton } from "./icon-button/index.js";
 export type { IconButtonProps } from "./icon-button/index.js";
 export { Input } from "./input/index.js";
@@ -90,8 +98,8 @@ export { TabsWithSidebar } from "./tabs-with-sidebar/index.js";
 export type { TabsWithSidebarPanelProps, TabsWithSidebarProps, TabsWithSidebarSidebarProps, TabsWithSidebarWidth } from "./tabs-with-sidebar/index.js";
 export { Textarea } from "./textarea/index.js";
 export type { TextareaProps, TextareaSize } from "./textarea/index.js";
-export { Toast, ToastViewport } from "./toast/index.js";
-export type { ToastActionProps, ToastCloseProps, ToastPlacement, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast/index.js";
+export { createToastController, toast, Toast, Toaster, ToastProvider, ToastViewport, useToast } from "./toast/index.js";
+export type { ToasterPosition, ToasterProps, ToastActionInput, ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastProviderProps, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast/index.js";
 export { Tooltip } from "./tooltip/index.js";
 export type { TooltipProps } from "./tooltip/index.js";
 export { Toggle } from "./toggle/index.js";

package/dist/components/index.js

@@ -5,10 +5,13 @@ export { Badge } from "./badge/index.js";
 export { Breadcrumbs } from "./breadcrumbs/index.js";
 export { Button } from "./button/index.js";
 export { Card } from "./card/index.js";
+export { Calendar } from "./calendar/index.js";
+export { Carousel } from "./carousel/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export { CodeBlock } from "./code-block/index.js";
 export { Collapsible } from "./collapsible/index.js";
 export { CopyButton, CopyableText } from "./copy-button/index.js";
+export { DatePicker } from "./date-picker/index.js";
 export { Dialog } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
 export { AlertDialog } from "./alert-dialog/index.js";
@@ -23,6 +26,7 @@ export { ErrorBoundary, ErrorFallback } from "./error-boundary/index.js";
 export { Field } from "./field/index.js";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./form/index.js";
 export { FileUploadInput } from "./file-upload-input/index.js";
+export { HoverCard } from "./hover-card/index.js";
 export { IconButton } from "./icon-button/index.js";
 export { Input } from "./input/index.js";
 export { Label } from "./label/index.js";
@@ -44,7 +48,7 @@ export { Table } from "./table/index.js";
 export { Tabs } from "./tabs/index.js";
 export { TabsWithSidebar } from "./tabs-with-sidebar/index.js";
 export { Textarea } from "./textarea/index.js";
-export { Toast, ToastViewport } from "./toast/index.js";
+export { createToastController, toast, Toast, Toaster, ToastProvider, ToastViewport, useToast } from "./toast/index.js";
 export { Tooltip } from "./tooltip/index.js";
 export { Toggle } from "./toggle/index.js";
 export { ToggleGroup } from "./toggle-group/index.js";

package/dist/components/menubar/menubar.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { FloatingAlign, FloatingSide } from "../../internal/floating/placement-aliases.js";
 export interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {
     defaultValue?: string;
     onValueChange?: (value: string | undefined) => void;
@@ -10,14 +11,28 @@ export interface MenubarMenuProps {
     value: string;
 }
 export interface MenubarTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface MenubarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    alignOffset?: number;
+    sideOffset?: number;
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface MenubarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
     onSelect?: (event: React.SyntheticEvent<HTMLElement>) => void;
-    ref?: React.Ref<HTMLButtonElement>;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
+}
+export interface MenubarCheckboxItemProps extends MenubarItemProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export interface MenubarRadioItemProps extends MenubarItemProps {
+    checked?: boolean;
 }
 export interface MenubarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
@@ -30,17 +45,21 @@ export interface MenubarShortcutProps extends React.HTMLAttributes<HTMLSpanEleme
 }
 declare function MenubarRoot({ children, className, defaultValue, onKeyDown, onValueChange, ref, value, ...props }: MenubarProps): React.JSX.Element;
 declare function MenubarMenu({ children, value }: MenubarMenuProps): React.JSX.Element;
-declare function MenubarTrigger({ children, className, disabled, onClick, onKeyDown, ref, type, ...props }: MenubarTriggerProps): React.JSX.Element;
-declare function MenubarContent({ children, className, onKeyDown, ref, ...props }: MenubarContentProps): React.JSX.Element | null;
-declare function MenubarItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, type, ...props }: MenubarItemProps): React.JSX.Element;
+declare function MenubarTrigger({ asChild, children, className, disabled, onClick, onKeyDown, ref, type, ...props }: MenubarTriggerProps): React.JSX.Element;
+declare function MenubarContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, sideOffset: _sideOffset, ...props }: MenubarContentProps): React.JSX.Element | null;
+declare function MenubarItem({ asChild, children, className, disabled, onClick, onKeyDown, onSelect, ref, type, ...props }: MenubarItemProps): React.JSX.Element;
+declare function MenubarCheckboxItem({ asChild, checked, children, className, defaultChecked, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, type, ...props }: MenubarCheckboxItemProps): React.JSX.Element;
+declare function MenubarRadioItem({ asChild, checked, children, className, disabled, onClick, onKeyDown, onSelect, ref, type, ...props }: MenubarRadioItemProps): React.JSX.Element;
 declare function MenubarSeparator({ className, ref, ...props }: MenubarSeparatorProps): React.JSX.Element;
 declare function MenubarLabel({ className, ref, ...props }: MenubarLabelProps): React.JSX.Element;
 declare function MenubarShortcut({ className, ref, ...props }: MenubarShortcutProps): React.JSX.Element;
 type MenubarComponent = typeof MenubarRoot & {
+    CheckboxItem: typeof MenubarCheckboxItem;
     Content: typeof MenubarContent;
     Item: typeof MenubarItem;
     Label: typeof MenubarLabel;
     Menu: typeof MenubarMenu;
+    RadioItem: typeof MenubarRadioItem;
     Separator: typeof MenubarSeparator;
     Shortcut: typeof MenubarShortcut;
     Trigger: typeof MenubarTrigger;