@zvk/ui 0.1.3 → 0.1.6

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 export { Accordion } from "./accordion/index.js";
 export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, AccordionType, AccordionValue } from "./accordion/index.js";
 export { Alert } from "./alert/index.js";
-export type { AlertDescriptionProps, AlertProps, AlertRoot, AlertTitleProps, AlertTone } from "./alert/index.js";
+export type { AlertActionProps, AlertDescriptionProps, AlertProps, AlertRoot, AlertTitleProps, AlertTone } from "./alert/index.js";
 export { Avatar } from "./avatar/index.js";
 export type { AvatarProps, AvatarShape, AvatarSize } from "./avatar/index.js";
 export { Badge } from "./badge/index.js";
@@ -11,9 +11,9 @@ export type { BreadcrumbsItemProps, BreadcrumbsProps } from "./breadcrumbs/index
 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 type { CardActionProps, CardDescriptionProps, CardPadding, CardProps, CardSlotProps, CardTitleProps, CardVariant } from "./card/index.js";
 export { Calendar } from "./calendar/index.js";
-export type { CalendarProps } 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";
@@ -29,7 +29,7 @@ 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";
@@ -37,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";
@@ -91,15 +91,15 @@ export type { StatProps, StatSize, StatTone } from "./stat/index.js";
 export { Switch } from "./switch/index.js";
 export type { SwitchProps, SwitchSize } from "./switch/index.js";
 export { Table } from "./table/index.js";
-export type { TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./table/index.js";
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps } from "./table/index.js";
 export { Tabs } from "./tabs/index.js";
 export type { TabsActivationMode, TabsContentProps, TabsListProps, TabsOrientation, TabsProps, TabsTriggerProps } from "./tabs/index.js";
 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 { createToastController, Toast, ToastProvider, ToastViewport, useToast } from "./toast/index.js";
-export type { ToastActionProps, ToastCloseProps, ToastController, ToastInput, ToastOptions, ToastPlacement, ToastProviderProps, 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

@@ -48,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 { createToastController, Toast, ToastProvider, ToastViewport, useToast } 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/input/input.js

@@ -19,7 +19,7 @@ export function Input({ "aria-describedby": ariaDescribedBy, className, descript
     const descriptionId = hasDescription ? `${inputId}-description` : undefined;
     const errorId = hasError ? `${inputId}-error` : undefined;
     const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
-    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("liano-input", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, disabled: disabled, id: inputId, required: required }));
+    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("zvk-ui-input", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, disabled: disabled, id: inputId, required: required }));
     if (!hasLabel && !hasDescription && !hasError) {
         return input;
     }

package/dist/components/label/label.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
 export function Label({ children, className, disabled, ref, required, size = "md", ...props }) {
-    return (_jsx("label", { ...props, ref: ref, className: cn("liano-label", className), "data-disabled": disabled ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, children: children }));
+    return (_jsx("label", { ...props, ref: ref, className: cn("zvk-ui-label", className), "data-disabled": disabled ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, children: children }));
 }

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;

package/dist/components/menubar/menubar.js

@@ -1,12 +1,14 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
 import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
 import { createCollection } from "../../internal/collection/index.js";
 import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { placementFromSideAlign, placementParts } from "../../internal/floating/placement-aliases.js";
 import { Portal } from "../../internal/portal/index.js";
+import { Slot } from "../../internal/slot/index.js";
 const MenubarContext = React.createContext(null);
 const MenuContext = React.createContext(null);
 function useMenubarContext(calledBy) {
@@ -44,6 +46,18 @@ function activeIndex(records) {
     const enabled = records.filter((record) => record.data.disabled !== true && record.data.ref !== null);
     return enabled.findIndex((record) => record.data.ref === document.activeElement);
 }
+function setComposedRef(internalRef, externalRef, node) {
+    internalRef.current = node;
+    if (typeof externalRef === "function") {
+        externalRef(node);
+    }
+    else if (externalRef !== undefined && externalRef !== null) {
+        externalRef.current = node;
+    }
+}
+function isActivationKey(key) {
+    return key === "Enter" || key === " " || key === "Space" || key === "Spacebar";
+}
 function MenubarRoot({ children, className, defaultValue, onKeyDown, onValueChange, ref, value, ...props }) {
     const [openValue, setOpenValue] = useControllableState({
         ...(value !== undefined ? { value } : {}),
@@ -65,7 +79,7 @@ function MenubarRoot({ children, className, defaultValue, onKeyDown, onValueChan
         setOpenValue,
         unregisterTrigger
     }), [getTriggers, openValue, registerTrigger, setOpenValue, unregisterTrigger]);
-    return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx("div", { ...props, ref: ref, role: "menubar", className: cn("liano-menubar", className), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx("div", { ...props, ref: ref, role: "menubar", className: cn("zvk-ui-menubar", className), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                 const triggers = getTriggers();
                 const index = activeIndex(triggers);
                 if (event.key === "ArrowRight") {
@@ -112,7 +126,7 @@ function MenubarMenu({ children, value }) {
     }, [getItems, open]);
     return _jsx(MenuContext.Provider, { value: contextValue, children: children });
 }
-function MenubarTrigger({ children, className, disabled, onClick, onKeyDown, ref, type = "button", ...props }) {
+function MenubarTrigger({ asChild = false, children, className, disabled, onClick, onKeyDown, ref, type = "button", ...props }) {
     const menubar = useMenubarContext("Menubar.Trigger");
     const menu = useMenuContext("Menubar.Trigger");
     const triggerRef = React.useRef(null);
@@ -123,32 +137,50 @@ function MenubarTrigger({ children, className, disabled, onClick, onKeyDown, ref
         menubar.registerTrigger(itemId, { disabled, ref: triggerRef.current, value: menu.value });
         return () => menubar.unregisterTrigger(itemId);
     }, [disabled, itemId, label, menu, menubar]);
+    const handleClick = () => {
+        if (!disabled) {
+            menubar.setOpenValue(menu.open ? undefined : menu.value);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "ArrowDown" || isActivationKey(event.key)) {
+            event.preventDefault();
+            menubar.setOpenValue(menu.value);
+        }
+    };
+    const triggerProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(triggerRef, ref, node);
+        },
+        id: menu.triggerId,
+        role: "menuitem",
+        "aria-controls": menu.contentId,
+        "aria-disabled": disabled ? true : undefined,
+        "aria-expanded": menu.open,
+        "aria-haspopup": "menu",
+        className: cn("zvk-ui-menubar__trigger", className),
+        "data-disabled": disabled ? "true" : undefined,
+        "data-state": menu.open ? "open" : "closed",
+        onClick: composeEventHandlers(onClick, handleClick),
+        onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown)
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...triggerProps, children: children });
+    }
     return (_jsx("button", { ...props, ref: (node) => {
-            triggerRef.current = node;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-        }, id: menu.triggerId, type: type, role: "menuitem", disabled: disabled, "aria-controls": menu.contentId, "aria-expanded": menu.open ? "true" : "false", "aria-haspopup": "menu", className: cn("liano-menubar__trigger", className), "data-state": menu.open ? "open" : "closed", onClick: composeEventHandlers(onClick, () => {
-            if (!disabled) {
-                menubar.setOpenValue(menu.open ? undefined : menu.value);
-            }
-        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-            if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                menubar.setOpenValue(menu.value);
-            }
-        }), children: children }));
+            setComposedRef(triggerRef, ref, node);
+        }, id: menu.triggerId, type: type, role: "menuitem", disabled: disabled, "aria-controls": menu.contentId, "aria-expanded": menu.open ? "true" : "false", "aria-haspopup": "menu", className: cn("zvk-ui-menubar__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": menu.open ? "open" : "closed", onClick: triggerProps.onClick, onKeyDown: triggerProps.onKeyDown, children: children }));
 }
-function MenubarContent({ children, className, onKeyDown, ref, ...props }) {
+function MenubarContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, sideOffset: _sideOffset, ...props }) {
     const menubar = useMenubarContext("Menubar.Content");
     const menu = useMenuContext("Menubar.Content");
+    const contentPlacement = placementFromSideAlign(side, align, "bottom-start");
+    const contentPlacementParts = placementParts(contentPlacement);
     if (!menu.open) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: ref, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("liano-menubar__content", className), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: ref, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("zvk-ui-menubar__content", className), "data-align": contentPlacementParts.align, "data-side": contentPlacementParts.side, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                     const items = menu.getItems();
                     const index = activeIndex(items);
                     if (event.key === "ArrowDown") {
@@ -166,7 +198,7 @@ function MenubarContent({ children, className, onKeyDown, ref, ...props }) {
                     }
                 }), children: children }) }) }));
 }
-function MenubarItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
+function MenubarItem({ asChild = false, children, className, disabled, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
     const menubar = useMenubarContext("Menubar.Item");
     const menu = useMenuContext("Menubar.Item");
     const { getItems, open, registerItem, unregisterItem } = menu;
@@ -185,37 +217,154 @@ function MenubarItem({ children, className, disabled, onClick, onKeyDown, onSele
             return;
         }
         onSelect?.(event);
-        menubar.setOpenValue(undefined);
+        if (!event.defaultPrevented) {
+            menubar.setOpenValue(undefined);
+        }
     };
-    return (_jsx("button", { ...props, ref: (node) => {
-            itemRef.current = node;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitem",
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("zvk-ui-menubar__item", className),
+        "data-disabled": disabled ? "true" : undefined,
+        onClick: composeEventHandlers(onClick, select),
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isActivationKey(event.key)) {
+                select(event);
+                event.preventDefault();
             }
-        }, type: type, role: "menuitem", disabled: disabled, "aria-disabled": disabled ? "true" : undefined, className: cn("liano-menubar__item", className), "data-disabled": disabled ? "true" : undefined, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-            if (event.key === "Enter" || event.key === " ") {
+        })
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...itemProps, children: children });
+    }
+    return (_jsx("button", { ...props, ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        }, type: type, role: "menuitem", disabled: disabled, "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: children }));
+}
+function MenubarCheckboxItem({ asChild = false, checked, children, className, defaultChecked = false, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
+    const menubar = useMenubarContext("Menubar.CheckboxItem");
+    const menu = useMenuContext("Menubar.CheckboxItem");
+    const { getItems, open, registerItem, unregisterItem } = menu;
+    const itemId = React.useId();
+    const itemRef = React.useRef(null);
+    const [currentChecked, setCurrentChecked] = useControllableState({
+        ...(checked !== undefined ? { value: checked } : {}),
+        defaultValue: defaultChecked,
+        ...(onCheckedChange ? { onChange: onCheckedChange } : {})
+    });
+    React.useLayoutEffect(() => {
+        registerItem(itemId, { disabled, ref: itemRef.current });
+        const firstEnabled = getItems().find((item) => item.data.disabled !== true && item.data.ref !== null);
+        if (open && firstEnabled?.id === itemId) {
+            itemRef.current?.focus();
+        }
+        return () => unregisterItem(itemId);
+    }, [disabled, getItems, itemId, open, registerItem, unregisterItem]);
+    const select = (event) => {
+        if (disabled) {
+            return;
+        }
+        onSelect?.(event);
+        if (!event.defaultPrevented) {
+            setCurrentChecked((value) => !value);
+            menubar.setOpenValue(undefined);
+        }
+    };
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitemcheckbox",
+        "aria-checked": currentChecked,
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("zvk-ui-menubar__item", "zvk-ui-menubar__checkbox-item", className),
+        "data-checked": currentChecked ? "true" : undefined,
+        "data-disabled": disabled ? "true" : undefined,
+        onClick: composeEventHandlers(onClick, select),
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isActivationKey(event.key)) {
+                select(event);
                 event.preventDefault();
+            }
+        })
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...itemProps, children: children });
+    }
+    return (_jsxs("button", { ...props, ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        }, type: type, role: "menuitemcheckbox", disabled: disabled, "aria-checked": itemProps["aria-checked"], "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-checked": itemProps["data-checked"], "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "zvk-ui-menubar__item-indicator", "aria-hidden": "true", children: currentChecked ? "✓" : "" }), _jsx("span", { className: "zvk-ui-menubar__item-label", children: children })] }));
+}
+function MenubarRadioItem({ asChild = false, checked = false, children, className, disabled, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
+    const menubar = useMenubarContext("Menubar.RadioItem");
+    const menu = useMenuContext("Menubar.RadioItem");
+    const { getItems, open, registerItem, unregisterItem } = menu;
+    const itemId = React.useId();
+    const itemRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        registerItem(itemId, { disabled, ref: itemRef.current });
+        const firstEnabled = getItems().find((item) => item.data.disabled !== true && item.data.ref !== null);
+        if (open && firstEnabled?.id === itemId) {
+            itemRef.current?.focus();
+        }
+        return () => unregisterItem(itemId);
+    }, [disabled, getItems, itemId, open, registerItem, unregisterItem]);
+    const select = (event) => {
+        if (disabled) {
+            return;
+        }
+        onSelect?.(event);
+        if (!event.defaultPrevented) {
+            menubar.setOpenValue(undefined);
+        }
+    };
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitemradio",
+        "aria-checked": checked,
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("zvk-ui-menubar__item", "zvk-ui-menubar__radio-item", className),
+        "data-checked": checked ? "true" : undefined,
+        "data-disabled": disabled ? "true" : undefined,
+        onClick: composeEventHandlers(onClick, select),
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isActivationKey(event.key)) {
                 select(event);
+                event.preventDefault();
             }
-        }), children: children }));
+        })
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...itemProps, children: children });
+    }
+    return (_jsxs("button", { ...props, ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        }, type: type, role: "menuitemradio", disabled: disabled, "aria-checked": itemProps["aria-checked"], "aria-disabled": itemProps["aria-disabled"], className: itemProps.className, "data-checked": itemProps["data-checked"], "data-disabled": itemProps["data-disabled"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "zvk-ui-menubar__item-indicator", "aria-hidden": "true", children: checked ? "●" : "" }), _jsx("span", { className: "zvk-ui-menubar__item-label", children: children })] }));
 }
 function MenubarSeparator({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-menubar__separator", className) });
+    return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("zvk-ui-menubar__separator", className) });
 }
 function MenubarLabel({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-menubar__label", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-menubar__label", className) });
 }
 function MenubarShortcut({ className, ref, ...props }) {
-    return _jsx("span", { ...props, ref: ref, className: cn("liano-menubar__shortcut", className) });
+    return _jsx("span", { ...props, ref: ref, className: cn("zvk-ui-menubar__shortcut", className) });
 }
 export const Menubar = Object.assign(MenubarRoot, {
+    CheckboxItem: MenubarCheckboxItem,
     Content: MenubarContent,
     Item: MenubarItem,
     Label: MenubarLabel,
     Menu: MenubarMenu,
+    RadioItem: MenubarRadioItem,
     Separator: MenubarSeparator,
     Shortcut: MenubarShortcut,
     Trigger: MenubarTrigger

package/dist/components/pagination/pagination.js

@@ -48,45 +48,45 @@ export function getPaginationRange({ page, pageCount, siblingCount = 1, boundary
 function renderPrevious({ hasHrefMode, page, label, pageCount, onPageChange, getPageHref }) {
     const targetPage = page - 1;
     if (hasHrefMode && targetPage >= 1) {
-        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(targetPage), children: label }));
+        return (_jsx("a", { className: "zvk-ui-pagination__item", href: getPageHref?.(targetPage), children: label }));
     }
     if (hasHrefMode && targetPage < 1) {
-        return (_jsx("span", { className: "liano-pagination__item liano-pagination__item--disabled", "aria-hidden": "true", children: label }));
+        return (_jsx("span", { className: "zvk-ui-pagination__item zvk-ui-pagination__item--disabled", "aria-hidden": "true", children: label }));
     }
-    return (_jsx("button", { className: "liano-pagination__item", disabled: targetPage < 1, onClick: () => onPageChange?.(Math.max(1, targetPage)), type: "button", children: label }));
+    return (_jsx("button", { className: "zvk-ui-pagination__item", disabled: targetPage < 1, onClick: () => onPageChange?.(Math.max(1, targetPage)), type: "button", children: label }));
 }
 function renderNext({ hasHrefMode, page, label, pageCount, onPageChange, getPageHref }) {
     const targetPage = page + 1;
     if (hasHrefMode && targetPage <= pageCount) {
-        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(targetPage), children: label }));
+        return (_jsx("a", { className: "zvk-ui-pagination__item", href: getPageHref?.(targetPage), children: label }));
     }
     if (hasHrefMode && targetPage > pageCount) {
-        return (_jsx("span", { className: "liano-pagination__item liano-pagination__item--disabled", "aria-hidden": "true", children: label }));
+        return (_jsx("span", { className: "zvk-ui-pagination__item zvk-ui-pagination__item--disabled", "aria-hidden": "true", children: label }));
     }
-    return (_jsx("button", { className: "liano-pagination__item", disabled: targetPage > pageCount, onClick: () => onPageChange?.(Math.min(pageCount, targetPage)), type: "button", children: label }));
+    return (_jsx("button", { className: "zvk-ui-pagination__item", disabled: targetPage > pageCount, onClick: () => onPageChange?.(Math.min(pageCount, targetPage)), type: "button", children: label }));
 }
 function renderPageItem({ hasHrefMode, item, page, onPageChange, getPageHref }) {
     if (item === page) {
         if (hasHrefMode) {
-            return (_jsx("a", { "aria-current": "page", className: "liano-pagination__item liano-pagination__item--current", href: getPageHref?.(item), children: item }));
+            return (_jsx("a", { "aria-current": "page", className: "zvk-ui-pagination__item zvk-ui-pagination__item--current", href: getPageHref?.(item), children: item }));
         }
-        return (_jsx("button", { "aria-current": "page", className: "liano-pagination__item liano-pagination__item--current", disabled: true, type: "button", children: item }));
+        return (_jsx("button", { "aria-current": "page", className: "zvk-ui-pagination__item zvk-ui-pagination__item--current", disabled: true, type: "button", children: item }));
     }
     if (hasHrefMode) {
-        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(item), children: item }));
+        return (_jsx("a", { className: "zvk-ui-pagination__item", href: getPageHref?.(item), children: item }));
     }
-    return (_jsx("button", { className: "liano-pagination__item", onClick: () => onPageChange?.(item), type: "button", children: item }));
+    return (_jsx("button", { className: "zvk-ui-pagination__item", onClick: () => onPageChange?.(item), type: "button", children: item }));
 }
 export function Pagination({ className, label = "Pagination", onPageChange, getPageHref, page, pageCount, siblingCount = 1, boundaryCount = 1, previousLabel = "Previous", nextLabel = "Next", ref, ...props }) {
     const safePageCount = Math.max(normalizeCount(pageCount, 1), 0);
     const safePage = Math.max(1, Math.min(clamp(page), safePageCount || 1));
     const range = getPaginationRange({ page, pageCount, siblingCount, boundaryCount });
     const isLinkMode = typeof getPageHref === "function";
-    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("liano-pagination", className), children: _jsxs("ol", { className: "liano-pagination__list", children: [_jsx("li", { children: renderPrevious({ hasHrefMode: isLinkMode, label: previousLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) }), range.map((item) => (_jsx("li", { children: typeof item === "number" ? (renderPageItem({
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("zvk-ui-pagination", className), children: _jsxs("ol", { className: "zvk-ui-pagination__list", children: [_jsx("li", { children: renderPrevious({ hasHrefMode: isLinkMode, label: previousLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) }), range.map((item) => (_jsx("li", { children: typeof item === "number" ? (renderPageItem({
                         getPageHref,
                         hasHrefMode: isLinkMode,
                         item,
                         onPageChange,
                         page: safePage
-                    })) : (_jsx("span", { "aria-hidden": "true", className: "liano-pagination__ellipsis", children: "\u2026" })) }, `${item}-${typeof item === "number" ? item : item}`))), _jsx("li", { children: renderNext({ hasHrefMode: isLinkMode, label: nextLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) })] }) }));
+                    })) : (_jsx("span", { "aria-hidden": "true", className: "zvk-ui-pagination__ellipsis", children: "\u2026" })) }, `${item}-${typeof item === "number" ? item : item}`))), _jsx("li", { children: renderNext({ hasHrefMode: isLinkMode, label: nextLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) })] }) }));
 }

package/dist/components/popover/popover.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { PortalProps } from "../../internal/portal/index.js";
 import type { FloatingPlacement } from "../../internal/floating/floating-types.js";
+import type { FloatingAlign, FloatingSide } from "../../internal/floating/placement-aliases.js";
 export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     defaultOpen?: boolean;
@@ -10,10 +11,14 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
     placement?: FloatingPlacement;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    alignOffset?: number;
     sideOffset?: number;
     collisionPadding?: number;
     matchTriggerWidth?: boolean;
@@ -24,8 +29,8 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
     ref?: React.Ref<HTMLDivElement>;
 }
 declare function PopoverRoot({ children, className, defaultOpen, modal, onOpenChange, open, placement, ref, ...props }: PopoverProps): React.JSX.Element;
-declare function PopoverTrigger({ className, onClick, ref, type, ...props }: PopoverTriggerProps): React.JSX.Element;
-declare function PopoverContent({ className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, placement, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
+declare function PopoverTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: PopoverTriggerProps): React.JSX.Element;
+declare function PopoverContent({ align, alignOffset, className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, placement, side, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
 export declare const Popover: typeof PopoverRoot & {
     Trigger: typeof PopoverTrigger;
     Content: typeof PopoverContent;