@zvk/ui 0.1.2 → 0.1.5

package/dist/components/collapsible/collapsible.d.ts

@@ -7,14 +7,15 @@ export interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
     forceMount?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 }
 declare function CollapsibleRoot({ children, className, defaultOpen, disabled, onOpenChange, open, ref, ...props }: CollapsibleProps): React.JSX.Element;
-declare function CollapsibleTrigger({ className, disabled, onClick, ref, type, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+declare function CollapsibleTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: CollapsibleTriggerProps): React.JSX.Element;
 declare function CollapsibleContent({ className, forceMount, ref, ...props }: CollapsibleContentProps): React.JSX.Element | null;
 export declare const Collapsible: typeof CollapsibleRoot & {
     Trigger: typeof CollapsibleTrigger;

package/dist/components/collapsible/collapsible.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
 import { useDisclosure } from "../../hooks/use-disclosure.js";
 import { cn } from "../../utils/cn.js";
+import { Slot } from "../../internal/slot/index.js";
 const CollapsibleContext = React.createContext(null);
 function useCollapsibleContext(calledBy) {
     const context = React.useContext(CollapsibleContext);
@@ -23,12 +24,15 @@ function CollapsibleRoot({ children, className, defaultOpen = false, disabled =
     });
     return (_jsx(CollapsibleContext.Provider, { value: { open: isOpen, setOpen, disabled, contentId, defaultContentId, setContentId }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-collapsible", className), "data-state": isOpen ? "open" : "closed", "data-disabled": disabled ? "true" : undefined, children: children }) }));
 }
-function CollapsibleTrigger({ className, disabled, onClick, ref, type = "button", ...props }) {
+function CollapsibleTrigger({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const context = useCollapsibleContext("Collapsible.Trigger");
     const isDisabled = disabled || context.disabled;
     const handleClick = () => {
         context.setOpen((previous) => !previous);
     };
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-controls": context.contentId, "aria-disabled": isDisabled ? true : undefined, "aria-expanded": context.open, className: cn("liano-collapsible__trigger", className), "data-disabled": isDisabled ? "true" : undefined, "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, isDisabled ? undefined : handleClick), children: props.children }));
+    }
     return (_jsx("button", { ...props, ref: ref, className: cn("liano-collapsible__trigger", className), "aria-controls": context.contentId, "aria-expanded": context.open, "data-state": context.open ? "open" : "closed", "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, isDisabled ? undefined : handleClick), type: type }));
 }
 function CollapsibleContent({ className, forceMount = false, ref, ...props }) {

package/dist/components/command/command.d.ts

@@ -5,9 +5,11 @@ export interface CommandProps extends React.HTMLAttributes<HTMLDivElement> {
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     onItemSelect?: (value: string) => void;
+    shouldFilter?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 }
-export interface CommandInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> {
+export interface CommandInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange"> {
+    onValueChange?: (value: string) => void;
     ref?: React.Ref<HTMLInputElement>;
 }
 export interface CommandListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -24,23 +26,27 @@ export interface CommandItemProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     disabled?: boolean;
     keywords?: readonly string[];
     onSelect?: (value: string) => void;
-    value: string;
+    value?: string;
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface CommandSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
+export interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+    ref?: React.Ref<HTMLSpanElement>;
+}
 export interface CommandDialogProps extends Omit<React.ComponentProps<typeof Dialog>, "defaultValue" | "onChange"> {
     closeOnSelect?: boolean;
     commandLabel?: string;
 }
-declare function CommandRoot({ children, className, defaultValue, onItemSelect, onValueChange, ref, value, ...props }: CommandProps): React.JSX.Element;
-declare function CommandInput({ className, onKeyDown, placeholder, ref, ...props }: CommandInputProps): React.JSX.Element;
+declare function CommandRoot({ children, className, defaultValue, onItemSelect, onValueChange, ref, shouldFilter, value, ...props }: CommandProps): React.JSX.Element;
+declare function CommandInput({ className, onKeyDown, onValueChange, placeholder, ref, value, ...props }: CommandInputProps): React.JSX.Element;
 declare function CommandList({ className, ref, ...props }: CommandListProps): React.JSX.Element;
 declare function CommandEmpty({ className, ref, ...props }: CommandEmptyProps): React.JSX.Element | null;
 declare function CommandGroup({ children, className, heading, ref, ...props }: CommandGroupProps): React.JSX.Element;
 declare function CommandItem({ children, className, disabled, keywords, onClick, onSelect, ref, value, ...props }: CommandItemProps): React.JSX.Element | null;
 declare function CommandSeparator({ className, ref, ...props }: CommandSeparatorProps): React.JSX.Element;
+declare function CommandShortcut({ className, ref, ...props }: CommandShortcutProps): React.JSX.Element;
 export declare function CommandDialog({ children, className, closeOnSelect, commandLabel, onOpenChange, ...props }: CommandDialogProps): React.JSX.Element;
 type CommandComponent = typeof CommandRoot & {
     Dialog: typeof CommandDialog;
@@ -50,6 +56,7 @@ type CommandComponent = typeof CommandRoot & {
     Item: typeof CommandItem;
     List: typeof CommandList;
     Separator: typeof CommandSeparator;
+    Shortcut: typeof CommandShortcut;
 };
 export declare const Command: CommandComponent;
 export {};

package/dist/components/command/command.js

@@ -24,7 +24,7 @@ function textFromNode(node) {
     }
     return "";
 }
-function CommandRoot({ children, className, defaultValue = "", onItemSelect, onValueChange, ref, value, ...props }) {
+function CommandRoot({ children, className, defaultValue = "", onItemSelect, onValueChange, ref, shouldFilter = true, value, ...props }) {
     const [query, setQuery] = useControllableState({
         ...(value !== undefined ? { value } : {}),
         defaultValue,
@@ -103,12 +103,18 @@ function CommandRoot({ children, className, defaultValue = "", onItemSelect, onV
             selectActive,
             selectItem,
             setQuery,
+            shouldFilter,
             unregisterItem
-        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-command", className), children: children }) }));
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-command", className), "cmdk-root": "", children: children }) }));
 }
-function CommandInput({ className, onKeyDown, placeholder, ref, ...props }) {
+function CommandInput({ className, onKeyDown, onValueChange, placeholder, ref, value, ...props }) {
     const { activeId, inputId, listId, moveActive, query, selectActive, setQuery } = useCommandContext("Command.Input");
-    return (_jsx("input", { ...props, ref: ref, id: props.id ?? inputId, role: "searchbox", "aria-activedescendant": activeId, "aria-controls": listId, "aria-autocomplete": "list", className: cn("liano-command__input", className), onChange: (event) => setQuery(event.currentTarget.value), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    const inputValue = value ?? query;
+    return (_jsx("input", { ...props, ref: ref, id: props.id ?? inputId, role: "searchbox", "aria-activedescendant": activeId, "aria-controls": listId, "aria-autocomplete": "list", className: cn("liano-command__input", className), "cmdk-input": "", onChange: (event) => {
+            const nextValue = event.currentTarget.value;
+            onValueChange?.(nextValue);
+            setQuery(nextValue);
+        }, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
             if (event.key === "ArrowDown") {
                 event.preventDefault();
                 moveActive("next");
@@ -133,30 +139,31 @@ function CommandInput({ className, onKeyDown, placeholder, ref, ...props }) {
                 event.preventDefault();
                 selectActive();
             }
-        }), placeholder: placeholder, value: query }));
+        }), placeholder: placeholder, value: inputValue }));
 }
 function CommandList({ className, ref, ...props }) {
     const { listId } = useCommandContext("Command.List");
-    return _jsx("div", { ...props, ref: ref, id: props.id ?? listId, role: "listbox", className: cn("liano-command__list", className) });
+    return (_jsx("div", { ...props, ref: ref, id: props.id ?? listId, role: "listbox", className: cn("liano-command__list", className), "cmdk-list": "" }));
 }
 function CommandEmpty({ className, ref, ...props }) {
     const { empty } = useCommandContext("Command.Empty");
     if (!empty) {
         return null;
     }
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-command__empty", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-command__empty", className), "cmdk-empty": "" });
 }
 function CommandGroup({ children, className, heading, ref, ...props }) {
     const headingId = React.useId();
-    return (_jsxs("div", { ...props, ref: ref, role: "group", "aria-labelledby": heading ? headingId : undefined, className: cn("liano-command__group", className), children: [heading ? _jsx("div", { id: headingId, className: "liano-command__group-heading", children: heading }) : null, children] }));
+    return (_jsxs("div", { ...props, ref: ref, role: "group", "aria-labelledby": heading ? headingId : undefined, className: cn("liano-command__group", className), "cmdk-group": "", children: [heading ? _jsx("div", { id: headingId, className: "liano-command__group-heading", "cmdk-group-heading": "", children: heading }) : null, children] }));
 }
 function CommandItem({ children, className, disabled, keywords, onClick, onSelect, ref, value, ...props }) {
     const context = useCommandContext("Command.Item");
-    const { activeId, query, registerItem, selectItem, unregisterItem } = context;
+    const { activeId, query, registerItem, selectItem, shouldFilter, unregisterItem } = context;
     const generatedId = React.useId();
     const id = props.id ?? generatedId;
-    const label = textFromNode(children) || value;
-    const visible = commandItemMatches({ label, value, keywords }, query);
+    const label = textFromNode(children) || (value ?? "");
+    const itemValue = value ?? label;
+    const visible = shouldFilter ? commandItemMatches({ label, value: itemValue, keywords }, query) : true;
     const isActive = activeId === id;
     React.useLayoutEffect(() => {
         registerItem(id, {
@@ -164,22 +171,25 @@ function CommandItem({ children, className, disabled, keywords, onClick, onSelec
             keywords,
             label,
             onSelect,
-            value,
+            value: itemValue,
             visible
         });
         return () => unregisterItem(id);
-    }, [disabled, id, keywords, label, onSelect, registerItem, unregisterItem, value, visible]);
+    }, [disabled, id, itemValue, keywords, label, onSelect, registerItem, unregisterItem, visible]);
     if (!visible) {
         return null;
     }
-    return (_jsx("div", { ...props, ref: ref, id: id, role: "option", "aria-disabled": disabled ? "true" : undefined, "aria-selected": isActive ? "true" : "false", className: cn("liano-command__item", className), "data-disabled": disabled ? "true" : undefined, "data-highlighted": isActive ? "true" : undefined, onClick: composeEventHandlers(onClick, () => {
+    return (_jsx("div", { ...props, ref: ref, id: id, role: "option", "aria-disabled": disabled ? "true" : undefined, "aria-selected": isActive ? "true" : "false", className: cn("liano-command__item", className), "cmdk-item": "", "data-disabled": disabled ? "true" : undefined, "data-highlighted": isActive ? "true" : undefined, onClick: composeEventHandlers(onClick, () => {
             if (!disabled) {
                 selectItem(id);
             }
         }), children: children }));
 }
 function CommandSeparator({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-command__separator", className) });
+    return (_jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-command__separator", className), "cmdk-separator": "" }));
+}
+function CommandShortcut({ className, ref, ...props }) {
+    return _jsx("span", { ...props, ref: ref, className: cn("liano-command__shortcut", className) });
 }
 export function CommandDialog({ children, className, closeOnSelect = false, commandLabel = "Command menu", onOpenChange, ...props }) {
     const handleItemSelect = React.useCallback(() => {
@@ -196,5 +206,6 @@ export const Command = Object.assign(CommandRoot, {
     Input: CommandInput,
     Item: CommandItem,
     List: CommandList,
-    Separator: CommandSeparator
+    Separator: CommandSeparator,
+    Shortcut: CommandShortcut
 });

package/dist/components/command/index.d.ts

@@ -1,2 +1,2 @@
 export { Command, CommandDialog } from "./command.js";
-export type { CommandDialogProps, CommandEmptyProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandProps, CommandSeparatorProps } from "./command.js";
+export type { CommandDialogProps, CommandEmptyProps, CommandGroupProps, CommandInputProps, CommandItemProps, CommandListProps, CommandProps, CommandSeparatorProps, CommandShortcutProps } from "./command.js";

package/dist/components/context-menu/context-menu.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { FloatingAlign, FloatingSide } from "../../internal/floating/placement-aliases.js";
 export interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -6,15 +7,20 @@ export interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {
-    ref?: React.Ref<HTMLSpanElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLSpanElement | HTMLElement>;
 }
 export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    alignOffset?: number;
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
     onSelect?: (event: React.SyntheticEvent<HTMLElement>) => void;
     tone?: "default" | "danger";
-    ref?: React.Ref<HTMLButtonElement>;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface ContextMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
@@ -27,18 +33,23 @@ export interface ContextMenuCheckboxItemProps extends ContextMenuItemProps {
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
 }
+export interface ContextMenuRadioItemProps extends ContextMenuItemProps {
+    checked?: boolean;
+}
 declare function ContextMenuRoot({ children, className, defaultOpen, onOpenChange, open: openProp, ref, ...props }: ContextMenuProps): React.JSX.Element;
-declare function ContextMenuTrigger({ children, className, onContextMenu, onKeyDown, ref, ...props }: ContextMenuTriggerProps): React.JSX.Element;
-declare function ContextMenuContent({ children, className, onKeyDown, ref, style, ...props }: ContextMenuContentProps): React.JSX.Element | null;
-declare function ContextMenuItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, tone, type, ...props }: ContextMenuItemProps): React.JSX.Element;
+declare function ContextMenuTrigger({ asChild, children, className, onContextMenu, onKeyDown, ref, ...props }: ContextMenuTriggerProps): React.JSX.Element;
+declare function ContextMenuContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, style, ...props }: ContextMenuContentProps): React.JSX.Element | null;
+declare function ContextMenuItem({ asChild, children, className, disabled, onClick, onKeyDown, onSelect, ref, tone, type, ...props }: ContextMenuItemProps): React.JSX.Element;
 declare function ContextMenuLabel({ className, ref, ...props }: ContextMenuLabelProps): React.JSX.Element;
-declare function ContextMenuCheckboxItem({ checked, children, className, defaultChecked, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, tone, type, ...props }: ContextMenuCheckboxItemProps): React.JSX.Element;
+declare function ContextMenuCheckboxItem({ asChild, checked, children, className, defaultChecked, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, tone, type, ...props }: ContextMenuCheckboxItemProps): React.JSX.Element;
+declare function ContextMenuRadioItem({ asChild, checked, children, className, disabled, onClick, onKeyDown, onSelect, ref, tone, type, ...props }: ContextMenuRadioItemProps): React.JSX.Element;
 declare function ContextMenuSeparator({ className, ref, ...props }: ContextMenuSeparatorProps): React.JSX.Element;
 type ContextMenuComponent = typeof ContextMenuRoot & {
     CheckboxItem: typeof ContextMenuCheckboxItem;
     Content: typeof ContextMenuContent;
     Item: typeof ContextMenuItem;
     Label: typeof ContextMenuLabel;
+    RadioItem: typeof ContextMenuRadioItem;
     Separator: typeof ContextMenuSeparator;
     Trigger: typeof ContextMenuTrigger;
 };

package/dist/components/context-menu/context-menu.js

@@ -6,7 +6,9 @@ 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 ContextMenuContext = React.createContext(null);
 function useContextMenuContext(calledBy) {
     const context = React.useContext(ContextMenuContext);
@@ -15,6 +17,18 @@ function useContextMenuContext(calledBy) {
     }
     return context;
 }
+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 ContextMenuRoot({ children, className, defaultOpen = false, onOpenChange, open: openProp, ref, ...props }) {
     const [open, setOpen] = useControllableState({
         ...(openProp !== undefined ? { value: openProp } : {}),
@@ -58,19 +72,35 @@ function ContextMenuRoot({ children, className, defaultOpen = false, onOpenChang
     }), [close, contentId, getItems, open, openAt, point, registerItem, unregisterItem]);
     return (_jsx(ContextMenuContext.Provider, { value: contextValue, children: _jsx("div", { ...props, ref: ref, className: cn("liano-context-menu", className), "data-state": open ? "open" : "closed", children: children }) }));
 }
-function ContextMenuTrigger({ children, className, onContextMenu, onKeyDown, ref, ...props }) {
+function ContextMenuTrigger({ asChild = false, children, className, onContextMenu, onKeyDown, ref, ...props }) {
     const { contentId, open, openAt } = useContextMenuContext("ContextMenu.Trigger");
-    return (_jsx("span", { ...props, ref: ref, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("liano-context-menu__trigger", className), "data-state": open ? "open" : "closed", onContextMenu: composeEventHandlers(onContextMenu, (event) => {
+    const openFromPoint = (point, restoreFocusTo) => {
+        openAt(point, restoreFocusTo);
+    };
+    const triggerProps = {
+        ...props,
+        ref: ref,
+        "aria-controls": contentId,
+        "aria-expanded": open,
+        className: cn("liano-context-menu__trigger", className),
+        "data-state": open ? "open" : "closed",
+        onContextMenu: composeEventHandlers(onContextMenu, (event) => {
             event.preventDefault();
-            openAt({ x: event.clientX, y: event.clientY }, document.activeElement instanceof HTMLElement ? document.activeElement : event.currentTarget);
-        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            openFromPoint({ x: event.clientX, y: event.clientY }, document.activeElement instanceof HTMLElement ? document.activeElement : event.currentTarget);
+        }),
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
             if ((event.shiftKey && event.key === "F10") || event.key === "ContextMenu") {
                 event.preventDefault();
                 const target = document.activeElement instanceof HTMLElement ? document.activeElement : event.currentTarget;
                 const rect = target.getBoundingClientRect();
-                openAt({ x: rect.left, y: rect.bottom }, target);
+                openFromPoint({ x: rect.left, y: rect.bottom }, target);
             }
-        }), children: children }));
+        })
+    };
+    if (asChild) {
+        return _jsx(Slot, { ...triggerProps, children: children });
+    }
+    return (_jsx("span", { ...props, ref: ref, "aria-controls": triggerProps["aria-controls"], "aria-expanded": triggerProps["aria-expanded"], className: triggerProps.className, "data-state": triggerProps["data-state"], onContextMenu: triggerProps.onContextMenu, onKeyDown: triggerProps.onKeyDown, children: children }));
 }
 function focusItem(items, index) {
     const enabled = items.filter((item) => item.data.disabled !== true && item.data.ref !== null);
@@ -84,8 +114,10 @@ function currentIndex(items) {
     const enabled = items.filter((item) => item.data.disabled !== true && item.data.ref !== null);
     return enabled.findIndex((item) => item.data.ref === document.activeElement);
 }
-function ContextMenuContent({ children, className, onKeyDown, ref, style, ...props }) {
+function ContextMenuContent({ align, alignOffset: _alignOffset, children, className, onKeyDown, ref, side, style, ...props }) {
     const { close, contentId, getItems, open, point } = useContextMenuContext("ContextMenu.Content");
+    const contentPlacement = placementFromSideAlign(side, align, "bottom-start");
+    const contentPlacementParts = placementParts(contentPlacement);
     React.useLayoutEffect(() => {
         if (!open) {
             return;
@@ -95,7 +127,7 @@ function ContextMenuContent({ children, className, onKeyDown, ref, style, ...pro
     if (!open) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: open, onDismiss: close, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "menu", className: cn("liano-context-menu__content", className), style: { ...style, left: `${point.x}px`, top: `${point.y}px` }, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: open, onDismiss: close, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "menu", className: cn("liano-context-menu__content", className), "data-align": contentPlacementParts.align, "data-side": contentPlacementParts.side, style: { ...style, left: `${point.x}px`, top: `${point.y}px` }, onKeyDown: composeEventHandlers(onKeyDown, (event) => {
                     const items = getItems();
                     const index = currentIndex(items);
                     if (event.key === "ArrowDown") {
@@ -113,7 +145,7 @@ function ContextMenuContent({ children, className, onKeyDown, ref, style, ...pro
                     }
                 }), children: children }) }) }));
 }
-function ContextMenuItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, tone = "default", type = "button", ...props }) {
+function ContextMenuItem({ asChild = false, children, className, disabled, onClick, onKeyDown, onSelect, ref, tone = "default", type = "button", ...props }) {
     const { close, registerItem, unregisterItem } = useContextMenuContext("ContextMenu.Item");
     const itemId = React.useId();
     const itemRef = React.useRef(null);
@@ -126,27 +158,39 @@ function ContextMenuItem({ children, className, disabled, onClick, onKeyDown, on
             return;
         }
         onSelect?.(event);
-        close();
+        if (!event.defaultPrevented) {
+            close();
+        }
     };
-    return (_jsx("button", { ...props, ref: (node) => {
-            itemRef.current = node;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-        }, type: type, role: "menuitem", disabled: disabled, "aria-disabled": disabled ? "true" : undefined, className: cn("liano-context-menu__item", className), "data-disabled": disabled ? "true" : undefined, "data-tone": tone, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-            if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitem",
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("liano-context-menu__item", className),
+        "data-disabled": disabled ? "true" : undefined,
+        "data-tone": tone,
+        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 (_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"], "data-tone": itemProps["data-tone"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: children }));
 }
 function ContextMenuLabel({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("liano-context-menu__label", className) });
 }
-function ContextMenuCheckboxItem({ checked, children, className, defaultChecked = false, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, tone = "default", type = "button", ...props }) {
+function ContextMenuCheckboxItem({ asChild = false, checked, children, className, defaultChecked = false, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, tone = "default", type = "button", ...props }) {
     const { close, registerItem, unregisterItem } = useContextMenuContext("ContextMenu.CheckboxItem");
     const itemId = React.useId();
     const itemRef = React.useRef(null);
@@ -163,24 +207,82 @@ function ContextMenuCheckboxItem({ checked, children, className, defaultChecked
         if (disabled) {
             return;
         }
-        setCurrentChecked((value) => !value);
         onSelect?.(event);
-        close();
+        if (!event.defaultPrevented) {
+            setCurrentChecked((value) => !value);
+            close();
+        }
     };
-    return (_jsxs("button", { ...props, ref: (node) => {
-            itemRef.current = node;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-        }, type: type, role: "menuitemcheckbox", disabled: disabled, "aria-checked": currentChecked ? "true" : "false", "aria-disabled": disabled ? "true" : undefined, className: cn("liano-context-menu__item", "liano-context-menu__checkbox-item", className), "data-checked": currentChecked ? "true" : undefined, "data-disabled": disabled ? "true" : undefined, "data-tone": tone, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
-            if (event.key === "Enter" || event.key === " ") {
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitemcheckbox",
+        "aria-checked": currentChecked,
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("liano-context-menu__item", "liano-context-menu__checkbox-item", className),
+        "data-checked": currentChecked ? "true" : undefined,
+        "data-disabled": disabled ? "true" : undefined,
+        "data-tone": tone,
+        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"], "data-tone": itemProps["data-tone"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "liano-context-menu__item-indicator", "aria-hidden": "true", children: currentChecked ? "✓" : "" }), _jsx("span", { className: "liano-context-menu__item-label", children: children })] }));
+}
+function ContextMenuRadioItem({ asChild = false, checked = false, children, className, disabled, onClick, onKeyDown, onSelect, ref, tone = "default", type = "button", ...props }) {
+    const { close, registerItem, unregisterItem } = useContextMenuContext("ContextMenu.RadioItem");
+    const itemId = React.useId();
+    const itemRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        registerItem(itemId, { disabled, ref: itemRef.current });
+        return () => unregisterItem(itemId);
+    }, [disabled, itemId, registerItem, unregisterItem]);
+    const select = (event) => {
+        if (disabled) {
+            return;
+        }
+        onSelect?.(event);
+        if (!event.defaultPrevented) {
+            close();
+        }
+    };
+    const itemProps = {
+        ...props,
+        ref: (node) => {
+            setComposedRef(itemRef, ref, node);
+        },
+        role: "menuitemradio",
+        "aria-checked": checked,
+        "aria-disabled": disabled ? true : undefined,
+        className: cn("liano-context-menu__item", "liano-context-menu__radio-item", className),
+        "data-checked": checked ? "true" : undefined,
+        "data-disabled": disabled ? "true" : undefined,
+        "data-tone": tone,
+        onClick: composeEventHandlers(onClick, select),
+        onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (isActivationKey(event.key)) {
                 select(event);
+                event.preventDefault();
             }
-        }), children: [_jsx("span", { className: "liano-context-menu__item-indicator", "aria-hidden": "true", children: currentChecked ? "✓" : "" }), _jsx("span", { className: "liano-context-menu__item-label", 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"], "data-tone": itemProps["data-tone"], onClick: itemProps.onClick, onKeyDown: itemProps.onKeyDown, children: [_jsx("span", { className: "liano-context-menu__item-indicator", "aria-hidden": "true", children: checked ? "●" : "" }), _jsx("span", { className: "liano-context-menu__item-label", children: children })] }));
 }
 function ContextMenuSeparator({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-context-menu__separator", className) });
@@ -190,6 +292,7 @@ export const ContextMenu = Object.assign(ContextMenuRoot, {
     Content: ContextMenuContent,
     Item: ContextMenuItem,
     Label: ContextMenuLabel,
+    RadioItem: ContextMenuRadioItem,
     Separator: ContextMenuSeparator,
     Trigger: ContextMenuTrigger
 });

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface DatePickerProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (date: Date | null) => void;
+    placeholder?: string;
+    formatDate?: (date: Date) => string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (date: Date) => boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export declare function DatePicker({ defaultValue, description, disabledDate, error, formatDate, label, maxDate, minDate, onValueChange, placeholder, ref, value }: DatePickerProps): React.JSX.Element;

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Calendar } from "../calendar/calendar.js";
+import { Field } from "../field/field.js";
+import { Popover } from "../popover/popover.js";
+import { cn } from "../../utils/cn.js";
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+function joinIds(...ids) {
+    const value = ids.filter(Boolean).join(" ");
+    return value.length > 0 ? value : undefined;
+}
+function defaultFormatDate(date) {
+    return new Intl.DateTimeFormat(undefined, {
+        day: "numeric",
+        month: "short",
+        year: "numeric"
+    }).format(date);
+}
+export function DatePicker({ defaultValue = null, description, disabledDate, error, formatDate = defaultFormatDate, label, maxDate, minDate, onValueChange, placeholder = "Select date", ref, value }) {
+    const generatedId = React.useId();
+    const triggerId = `${generatedId}-trigger`;
+    const descriptionId = hasRenderableNode(description) ? `${generatedId}-description` : undefined;
+    const errorId = hasRenderableNode(error) ? `${generatedId}-error` : undefined;
+    const hasLabel = hasRenderableNode(label);
+    const hasError = hasRenderableNode(error);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [open, setOpen] = React.useState(false);
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const describedBy = joinIds(descriptionId, errorId);
+    const calendarMonth = currentValue ?? minDate ?? undefined;
+    const fieldRefProps = ref !== undefined ? { ref } : {};
+    const calendarProps = {
+        ...(calendarMonth !== undefined ? { defaultMonth: calendarMonth } : {}),
+        ...(disabledDate !== undefined ? { disabledDate } : {}),
+        ...(maxDate !== undefined ? { maxDate } : {}),
+        ...(minDate !== undefined ? { minDate } : {})
+    };
+    const handleSelect = (date) => {
+        if (!isControlled) {
+            setUncontrolledValue(date);
+        }
+        onValueChange?.(date);
+        setOpen(false);
+    };
+    return (_jsxs(Field, { className: "liano-date-picker", invalid: hasError, ...fieldRefProps, children: [hasLabel ? _jsx(Field.Label, { htmlFor: triggerId, children: label }) : null, _jsxs(Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", children: [_jsx(Popover.Trigger, { "aria-describedby": describedBy, "aria-invalid": hasError ? true : undefined, "aria-label": hasLabel ? undefined : "Selected date", className: cn("liano-date-picker__trigger", !currentValue && "liano-date-picker__trigger--placeholder"), id: triggerId, children: _jsx("span", { className: "liano-date-picker__value", children: currentValue ? formatDate(currentValue) : placeholder }) }), _jsx(Popover.Content, { className: "liano-date-picker__content", matchTriggerWidth: false, sideOffset: 4, children: _jsx(Calendar, { ...calendarProps, selected: currentValue, onSelect: handleSelect }) })] }), hasRenderableNode(description) ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null] }));
+}

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from "./date-picker.js";
+export type { DatePickerProps } from "./date-picker.js";

package/dist/components/date-picker/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { DatePicker } from "./date-picker.js";