@zvk/ui 0.1.0 → 0.1.2

package/README.md

@@ -18,6 +18,13 @@ import "@zvk/ui/styles.css";
 - Components use plain CSS classes, CSS variables, and data attributes.
 - First-slice overlays such as Dialog, Popover, Tooltip, Select, and DropdownMenu are intentionally deferred.
 
+## Release Status
+
+GitHub Actions runs `npm run preflight` before release publishing. Release Please opens
+reviewable version-bump PRs from conventional commits; merging a release PR creates the
+GitHub release and publishes `@zvk/ui` to npm through trusted publishing in the protected
+`npm-publish` environment.
+
 ## First Slice
 
 The initial build includes Button, IconButton, Badge, Card, Separator, Spinner, Skeleton, Field, Input, and the hooks/utilities named in the checked-in plans.

package/dist/components/button/button.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
-export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonSize = "sm" | "md" | "lg" | "icon";
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/components/combobox/combobox.d.ts

@@ -1,20 +1,29 @@
 import * as React from "react";
+import type { FloatingPlacement } from "../../internal/floating/index.js";
+import type { PortalProps } from "../../internal/portal/index.js";
 export interface ComboboxOption {
     value: string;
     label: string;
     disabled?: boolean;
     keywords?: readonly string[];
 }
+export type ComboboxValue = string | null;
 export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> {
     label?: React.ReactNode;
     description?: React.ReactNode;
     error?: React.ReactNode;
     options: readonly ComboboxOption[];
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
+    value?: ComboboxValue;
+    defaultValue?: ComboboxValue;
+    onValueChange?: (value: ComboboxValue) => void;
+    clearable?: boolean;
+    placement?: FloatingPlacement;
+    sideOffset?: number;
+    collisionPadding?: number;
+    matchTriggerWidth?: boolean;
+    container?: PortalProps["container"];
     placeholder?: string;
     size?: "sm" | "md" | "lg";
     ref?: React.Ref<HTMLInputElement>;
 }
-export declare function Combobox({ "aria-describedby": ariaDescribedBy, className, defaultValue, description, disabled, error, id, label, onBlur, onFocus, onKeyDown, onValueChange, options, placeholder, ref, required, size, value, ...props }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ "aria-describedby": ariaDescribedBy, className, clearable, collisionPadding, container, defaultValue, description, disabled, error, id, label, matchTriggerWidth, onBlur, onFocus, onKeyDown, onValueChange, options, placement, placeholder, ref, required, sideOffset, size, value, ...props }: ComboboxProps): React.JSX.Element;

package/dist/components/combobox/combobox.js

@@ -5,6 +5,9 @@ import { commandItemMatches } from "../command/command-filter.js";
 import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
 import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { useFloatingPosition } from "../../internal/floating/index.js";
+import { Portal } from "../../internal/portal/index.js";
 function hasRenderableNode(value) {
     return value !== undefined && value !== null && value !== false;
 }
@@ -15,6 +18,18 @@ function joinIds(...ids) {
 function optionId(baseId, value) {
     return `${baseId}-option-${value.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
 }
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
 function firstEnabled(options) {
     return options.find((option) => option.disabled !== true);
 }
@@ -28,7 +43,7 @@ function nextEnabled(options, currentValue, direction) {
     const wrapped = ((nextIndex % enabled.length) + enabled.length) % enabled.length;
     return enabled[wrapped];
 }
-export function Combobox({ "aria-describedby": ariaDescribedBy, className, defaultValue = "", description, disabled, error, id, label, onBlur, onFocus, onKeyDown, onValueChange, options, placeholder, ref, required, size = "md", value, ...props }) {
+export function Combobox({ "aria-describedby": ariaDescribedBy, className, clearable = false, collisionPadding = 0, container, defaultValue = null, description, disabled, error, id, label, matchTriggerWidth = true, onBlur, onFocus, onKeyDown, onValueChange, options, placement = "bottom-start", placeholder, ref, required, sideOffset = 4, size = "md", value, ...props }) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
     const listboxId = `${inputId}-listbox`;
@@ -39,6 +54,7 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, defau
     const errorId = hasError ? `${inputId}-error` : undefined;
     const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
     const invalid = hasError || props["aria-invalid"] === true || props["aria-invalid"] === "true";
+    const inputRef = React.useRef(null);
     const [selectedValue, setSelectedValue] = useControllableState({
         ...(value !== undefined ? { value } : {}),
         defaultValue,
@@ -48,6 +64,14 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, defau
     const [open, setOpen] = React.useState(false);
     const [query, setQuery] = React.useState(selectedOption?.label ?? "");
     const [activeValue, setActiveValue] = React.useState(selectedOption?.value);
+    const floating = useFloatingPosition({
+        open,
+        placement,
+        strategy: "absolute",
+        offset: sideOffset,
+        collisionPadding,
+        matchReferenceWidth: matchTriggerWidth
+    });
     const filteredOptions = options.filter((option) => commandItemMatches(option, query));
     const activeOption = filteredOptions.find((option) => option.value === activeValue && option.disabled !== true) ??
         firstEnabled(filteredOptions);
@@ -71,11 +95,18 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, defau
         setActiveValue(option.value);
         setOpen(false);
     }, [setSelectedValue]);
+    const clearSelection = React.useCallback(() => {
+        setSelectedValue(null);
+        setQuery("");
+        setActiveValue(firstEnabled(options)?.value);
+        setOpen(false);
+        inputRef.current?.focus();
+    }, [options, setSelectedValue]);
     const moveActive = React.useCallback((direction) => {
         const next = nextEnabled(filteredOptions, activeOption?.value, direction);
         setActiveValue(next?.value);
     }, [activeOption?.value, filteredOptions]);
-    const input = (_jsx("input", { ...props, ref: ref, id: inputId, role: "combobox", "aria-activedescendant": open && activeOption ? optionId(inputId, activeOption.value) : undefined, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-describedby": describedBy, "aria-expanded": open ? "true" : "false", "aria-invalid": invalid ? "true" : undefined, className: cn("liano-combobox__input", className), "data-invalid": invalid ? "true" : undefined, "data-size": size, disabled: disabled, onBlur: onBlur, onChange: (event) => {
+    const input = (_jsx("input", { ...props, ref: composeRefs(ref, inputRef, floating.referenceRef), id: inputId, role: "combobox", "aria-activedescendant": open && activeOption ? optionId(inputId, activeOption.value) : undefined, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-describedby": describedBy, "aria-expanded": open ? "true" : "false", "aria-invalid": invalid ? "true" : undefined, className: cn("liano-combobox__input", className), "data-invalid": invalid ? "true" : undefined, "data-size": size, disabled: disabled, onBlur: onBlur, onChange: (event) => {
             if (!open) {
                 setOpen(true);
             }
@@ -113,9 +144,9 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, defau
                 setOpen(false);
             }
         }), placeholder: placeholder, required: required, value: open ? query : selectedOption?.label ?? query }));
-    return (_jsxs("div", { className: "liano-combobox", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, children: [hasLabel ? _jsx("label", { className: "liano-combobox__label", htmlFor: inputId, children: label }) : null, input, hasDescription ? _jsx("div", { className: "liano-combobox__description", id: descriptionId, children: description }) : null, hasError ? _jsx("div", { className: "liano-combobox__error", id: errorId, children: error }) : null, open ? (_jsx("div", { className: "liano-combobox__popup", children: _jsx("div", { id: listboxId, role: "listbox", className: "liano-combobox__list", children: filteredOptions.map((option) => {
-                        const isActive = activeOption?.value === option.value;
-                        const isSelected = selectedValue === option.value;
-                        return (_jsx("div", { id: optionId(inputId, option.value), role: "option", "aria-disabled": option.disabled ? "true" : undefined, "aria-selected": isSelected ? "true" : "false", className: "liano-combobox__option", "data-disabled": option.disabled ? "true" : undefined, "data-highlighted": isActive ? "true" : undefined, "data-selected": isSelected ? "true" : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => selectOption(option), children: option.label }, option.value));
-                    }) }) })) : null] }));
+    return (_jsxs("div", { className: "liano-combobox", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, children: [hasLabel ? _jsx("label", { className: "liano-combobox__label", htmlFor: inputId, children: label }) : null, _jsxs("div", { className: "liano-combobox__control", children: [input, clearable && selectedValue !== null ? (_jsx("button", { type: "button", className: "liano-combobox__clear", "aria-label": "Clear selection", disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: clearSelection, children: "Clear" })) : null] }), hasDescription ? _jsx("div", { className: "liano-combobox__description", id: descriptionId, children: description }) : null, hasError ? _jsx("div", { className: "liano-combobox__error", id: errorId, children: error }) : null, open ? (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: open, onDismiss: () => setOpen(false), children: _jsx("div", { id: listboxId, role: "listbox", className: "liano-combobox__popup", ref: floating.floatingRef, style: floating.floatingStyle, children: filteredOptions.map((option) => {
+                            const isActive = activeOption?.value === option.value;
+                            const isSelected = selectedValue === option.value;
+                            return (_jsx("div", { id: optionId(inputId, option.value), role: "option", "aria-disabled": option.disabled ? "true" : undefined, "aria-selected": isSelected ? "true" : "false", className: "liano-combobox__option", "data-disabled": option.disabled ? "true" : undefined, "data-highlighted": isActive ? "true" : undefined, "data-selected": isSelected ? "true" : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => selectOption(option), children: option.label }, option.value));
+                        }) }) }) })) : null] }));
 }

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

@@ -1,2 +1,2 @@
 export { Combobox } from "./combobox.js";
-export type { ComboboxOption, ComboboxProps } from "./combobox.js";
+export type { ComboboxOption, ComboboxProps, ComboboxValue } from "./combobox.js";

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

@@ -19,14 +19,26 @@ export interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLBut
 export interface ContextMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
+export interface ContextMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ContextMenuCheckboxItemProps extends ContextMenuItemProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
 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 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 ContextMenuSeparator({ className, ref, ...props }: ContextMenuSeparatorProps): React.JSX.Element;
 type ContextMenuComponent = typeof ContextMenuRoot & {
+    CheckboxItem: typeof ContextMenuCheckboxItem;
     Content: typeof ContextMenuContent;
     Item: typeof ContextMenuItem;
+    Label: typeof ContextMenuLabel;
     Separator: typeof ContextMenuSeparator;
     Trigger: typeof ContextMenuTrigger;
 };

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

@@ -1,5 +1,5 @@
 "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";
@@ -143,12 +143,53 @@ function ContextMenuItem({ children, className, disabled, onClick, onKeyDown, on
             }
         }), 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 }) {
+    const { close, registerItem, unregisterItem } = useContextMenuContext("ContextMenu.CheckboxItem");
+    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 });
+        return () => unregisterItem(itemId);
+    }, [disabled, itemId, registerItem, unregisterItem]);
+    const select = (event) => {
+        if (disabled) {
+            return;
+        }
+        setCurrentChecked((value) => !value);
+        onSelect?.(event);
+        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 === " ") {
+                event.preventDefault();
+                select(event);
+            }
+        }), 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 ContextMenuSeparator({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-context-menu__separator", className) });
 }
 export const ContextMenu = Object.assign(ContextMenuRoot, {
+    CheckboxItem: ContextMenuCheckboxItem,
     Content: ContextMenuContent,
     Item: ContextMenuItem,
+    Label: ContextMenuLabel,
     Separator: ContextMenuSeparator,
     Trigger: ContextMenuTrigger
 });

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

@@ -1,2 +1,2 @@
 export { ContextMenu } from "./context-menu.js";
-export type { ContextMenuContentProps, ContextMenuItemProps, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu.js";
+export type { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuLabelProps, ContextMenuProps, ContextMenuSeparatorProps, ContextMenuTriggerProps } from "./context-menu.js";

package/dist/components/dialog/dialog.d.ts

@@ -13,6 +13,7 @@ export interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButto
     ref?: React.Ref<HTMLButtonElement>;
 }
 export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    forceMount?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -40,7 +41,7 @@ interface DialogPortalProps {
 declare function DialogRoot({ children, className, container, defaultOpen, disableEscapeKeyDown, disableOutsidePointerDown, onOpenChange, open: openProp, ref, ...props }: DialogProps): React.JSX.Element;
 declare function DialogPortal({ container, children }: DialogPortalProps): React.JSX.Element;
 declare function DialogOverlay({ className, ref, ...props }: DialogOverlayProps): React.JSX.Element;
-declare function DialogContent({ className, children, ref, ...props }: DialogContentProps): React.JSX.Element | null;
+declare function DialogContent({ className, children, forceMount, ref, ...props }: DialogContentProps): React.JSX.Element | null;
 declare function DialogHeader({ className, ref, ...props }: DialogHeaderProps): React.JSX.Element;
 declare function DialogTitle({ className, ref, ...props }: DialogTitleProps): React.JSX.Element;
 declare function DialogDescription({ className, ref, ...props }: DialogDescriptionProps): React.JSX.Element;

package/dist/components/dialog/dialog.js

@@ -87,12 +87,16 @@ function DialogPortal({ container, children }) {
 function DialogOverlay({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("liano-dialog__overlay", className) });
 }
-function DialogContent({ className, children, ref, ...props }) {
+function DialogContent({ className, children, forceMount = false, ref, ...props }) {
     const { close, container, contentId, describedBy, disableEscapeKeyDown, disableOutsidePointerDown, labelledBy, open } = useDialogContext("Dialog.Content");
-    if (!open) {
+    if (!open && !forceMount) {
         return null;
     }
-    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, { "aria-hidden": true }), _jsx(DismissableLayer, { open: open, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, children: _jsx(FocusScope, { trapped: true, active: open, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": true, "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: cn("liano-dialog__content", className), "data-state": open ? "open" : "closed", children: children }) }) })] }));
+    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": true, "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: cn("liano-dialog__content", className), "data-state": open ? "open" : "closed", hidden: open ? undefined : true, children: children }));
+    if (!open) {
+        return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, { "aria-hidden": true, hidden: true }), content] }));
+    }
+    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, { "aria-hidden": true }), _jsx(DismissableLayer, { open: open, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, children: _jsx(FocusScope, { trapped: true, active: open, children: content }) })] }));
 }
 function DialogHeader({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("liano-dialog__header", className) });

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

@@ -28,15 +28,49 @@ export interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLBu
 export interface DropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
+export interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface DropdownMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+    ref?: React.Ref<HTMLSpanElement>;
+}
+export interface DropdownMenuCheckboxItemProps extends DropdownMenuItemProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export interface DropdownMenuRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface DropdownMenuRadioItemProps extends DropdownMenuItemProps {
+    value: string;
+}
+export interface DropdownMenuSubProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
 declare function DropdownMenuRoot({ children, className, container, defaultOpen, onOpenChange, open: openProp, placement, sideOffset, collisionPadding, matchTriggerWidth, ...props }: DropdownMenuProps): React.JSX.Element;
 declare function DropdownMenuTrigger({ className, disabled, onClick, ref, type, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
 declare function DropdownMenuContent({ children, className, forceMount, sideOffset, collisionPadding, matchTriggerWidth, ref, onKeyDown, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
 declare function DropdownMenuItem({ children, className, disabled, onClick, onSelect, onKeyDown, ref, ...props }: DropdownMenuItemProps): React.JSX.Element;
 declare function DropdownMenuSeparator({ className, ref, ...props }: DropdownMenuSeparatorProps): React.JSX.Element;
+declare function DropdownMenuLabel({ className, ref, ...props }: DropdownMenuLabelProps): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ref, ...props }: DropdownMenuShortcutProps): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ checked, children, className, defaultChecked, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, ...props }: DropdownMenuCheckboxItemProps): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ children, className, onValueChange, ref, value, ...props }: DropdownMenuRadioGroupProps): React.JSX.Element;
+declare function DropdownMenuRadioItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, value, ...props }: DropdownMenuRadioItemProps): React.JSX.Element;
+declare function DropdownMenuSub({ children, className, ref, ...props }: DropdownMenuSubProps): React.JSX.Element;
 type DropdownMenuComponent = typeof DropdownMenuRoot & {
+    CheckboxItem: typeof DropdownMenuCheckboxItem;
     Content: typeof DropdownMenuContent;
     Item: typeof DropdownMenuItem;
+    Label: typeof DropdownMenuLabel;
+    RadioGroup: typeof DropdownMenuRadioGroup;
+    RadioItem: typeof DropdownMenuRadioItem;
     Separator: typeof DropdownMenuSeparator;
+    Shortcut: typeof DropdownMenuShortcut;
+    Sub: typeof DropdownMenuSub;
     Trigger: typeof DropdownMenuTrigger;
 };
 export declare const DropdownMenu: DropdownMenuComponent;

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

@@ -1,5 +1,5 @@
 "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";
@@ -35,6 +35,7 @@ function composeRefs(...refs) {
 function filterEnabledItems(items) {
     return items.filter((item) => !item.disabled && item.ref !== null);
 }
+const DropdownMenuRadioGroupContext = React.createContext(null);
 function DropdownMenuRoot({ children, className, container, defaultOpen = false, onOpenChange, open: openProp, placement = "bottom", sideOffset = 8, collisionPadding = 0, matchTriggerWidth = false, ...props }) {
     const [open, setOpen] = useControllableState({
         ...(openProp !== undefined ? { value: openProp } : {}),
@@ -278,9 +279,112 @@ function DropdownMenuItem({ children, className, disabled, onClick, onSelect, on
 function DropdownMenuSeparator({ className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-dropdown-menu__separator", className) }));
 }
+function DropdownMenuLabel({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-dropdown-menu__label", className) }));
+}
+function DropdownMenuShortcut({ className, ref, ...props }) {
+    return (_jsx("span", { ...props, ref: ref, className: cn("liano-dropdown-menu__shortcut", className) }));
+}
+function DropdownMenuCheckboxItem({ checked, children, className, defaultChecked = false, disabled, onCheckedChange, onClick, onKeyDown, onSelect, ref, ...props }) {
+    const context = useDropdownMenuContext("DropdownMenu.CheckboxItem");
+    const itemRef = React.useRef(null);
+    const itemId = React.useId();
+    const isDisabled = disabled === true;
+    const [currentChecked, setCurrentChecked] = useControllableState({
+        ...(checked !== undefined ? { value: checked } : {}),
+        defaultValue: defaultChecked,
+        ...(onCheckedChange ? { onChange: onCheckedChange } : {})
+    });
+    React.useLayoutEffect(() => {
+        context.registerItem({
+            id: itemId,
+            ref: itemRef.current,
+            disabled: isDisabled,
+            ...(onSelect ? { onSelect } : {})
+        });
+        return () => context.unregisterItem(itemId);
+    }, [context, isDisabled, itemId, onSelect]);
+    const select = (event) => {
+        if (isDisabled) {
+            return;
+        }
+        setCurrentChecked((value) => !value);
+        onSelect?.(event);
+        context.setOpen(false);
+    };
+    return (_jsxs("button", { ...props, ref: (node) => {
+            itemRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, type: "button", role: "menuitemcheckbox", disabled: isDisabled, "aria-checked": currentChecked ? "true" : "false", "aria-disabled": isDisabled ? "true" : undefined, className: cn("liano-dropdown-menu__item", "liano-dropdown-menu__checkbox-item", className), "data-checked": currentChecked ? "true" : undefined, "data-disabled": isDisabled ? "true" : undefined, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === " " || event.key === "Space" || event.key === "Enter" || event.key === "Spacebar") {
+                event.preventDefault();
+                select(event);
+            }
+        }), children: [_jsx("span", { className: "liano-dropdown-menu__item-indicator", "aria-hidden": "true", children: currentChecked ? "✓" : "" }), _jsx("span", { className: "liano-dropdown-menu__item-label", children: children })] }));
+}
+function DropdownMenuRadioGroup({ children, className, onValueChange, ref, value, ...props }) {
+    const contextValue = React.useMemo(() => ({
+        ...(value !== undefined ? { value } : {}),
+        ...(onValueChange ? { onValueChange } : {})
+    }), [onValueChange, value]);
+    return (_jsx(DropdownMenuRadioGroupContext.Provider, { value: contextValue, children: _jsx("div", { ...props, ref: ref, className: cn("liano-dropdown-menu__radio-group", className), role: "group", children: children }) }));
+}
+function DropdownMenuRadioItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, value, ...props }) {
+    const context = useDropdownMenuContext("DropdownMenu.RadioItem");
+    const radioGroup = React.useContext(DropdownMenuRadioGroupContext);
+    const itemRef = React.useRef(null);
+    const itemId = React.useId();
+    const isDisabled = disabled === true;
+    const checked = radioGroup?.value === value;
+    React.useLayoutEffect(() => {
+        context.registerItem({
+            id: itemId,
+            ref: itemRef.current,
+            disabled: isDisabled,
+            ...(onSelect ? { onSelect } : {})
+        });
+        return () => context.unregisterItem(itemId);
+    }, [context, isDisabled, itemId, onSelect]);
+    const select = (event) => {
+        if (isDisabled) {
+            return;
+        }
+        radioGroup?.onValueChange?.(value);
+        onSelect?.(event);
+        context.setOpen(false);
+    };
+    return (_jsxs("button", { ...props, ref: (node) => {
+            itemRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, type: "button", role: "menuitemradio", disabled: isDisabled, "aria-checked": checked ? "true" : "false", "aria-disabled": isDisabled ? "true" : undefined, className: cn("liano-dropdown-menu__item", "liano-dropdown-menu__radio-item", className), "data-checked": checked ? "true" : undefined, "data-disabled": isDisabled ? "true" : undefined, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === " " || event.key === "Space" || event.key === "Enter" || event.key === "Spacebar") {
+                event.preventDefault();
+                select(event);
+            }
+        }), children: [_jsx("span", { className: "liano-dropdown-menu__item-indicator", "aria-hidden": "true", children: checked ? "●" : "" }), _jsx("span", { className: "liano-dropdown-menu__item-label", children: children })] }));
+}
+function DropdownMenuSub({ children, className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-dropdown-menu__sub", className), children: children }));
+}
 export const DropdownMenu = Object.assign(DropdownMenuRoot, {
+    CheckboxItem: DropdownMenuCheckboxItem,
     Content: DropdownMenuContent,
     Item: DropdownMenuItem,
+    Label: DropdownMenuLabel,
+    RadioGroup: DropdownMenuRadioGroup,
+    RadioItem: DropdownMenuRadioItem,
     Separator: DropdownMenuSeparator,
+    Shortcut: DropdownMenuShortcut,
+    Sub: DropdownMenuSub,
     Trigger: DropdownMenuTrigger
 });

package/dist/components/dropdown-menu/index.d.ts

@@ -1,2 +1,2 @@
 export { DropdownMenu } from "./dropdown-menu.js";
-export type { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps } from "./dropdown-menu.js";
+export type { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, DropdownMenuSubProps, DropdownMenuTriggerProps } from "./dropdown-menu.js";

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

@@ -1,2 +1,2 @@
 export { Menubar } from "./menubar.js";
-export type { MenubarContentProps, MenubarItemProps, MenubarMenuProps, MenubarProps, MenubarSeparatorProps, MenubarTriggerProps } from "./menubar.js";
+export type { MenubarContentProps, MenubarItemProps, MenubarLabelProps, MenubarMenuProps, MenubarProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarTriggerProps } from "./menubar.js";

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

@@ -22,17 +22,27 @@ export interface MenubarItemProps extends React.ButtonHTMLAttributes<HTMLButtonE
 export interface MenubarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
+export interface MenubarLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface MenubarShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+    ref?: React.Ref<HTMLSpanElement>;
+}
 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 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 & {
     Content: typeof MenubarContent;
     Item: typeof MenubarItem;
+    Label: typeof MenubarLabel;
     Menu: typeof MenubarMenu;
     Separator: typeof MenubarSeparator;
+    Shortcut: typeof MenubarShortcut;
     Trigger: typeof MenubarTrigger;
 };
 export declare const Menubar: MenubarComponent;

package/dist/components/menubar/menubar.js

@@ -205,10 +205,18 @@ function MenubarItem({ children, className, disabled, onClick, onKeyDown, onSele
 function MenubarSeparator({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-menubar__separator", className) });
 }
+function MenubarLabel({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-menubar__label", className) });
+}
+function MenubarShortcut({ className, ref, ...props }) {
+    return _jsx("span", { ...props, ref: ref, className: cn("liano-menubar__shortcut", className) });
+}
 export const Menubar = Object.assign(MenubarRoot, {
     Content: MenubarContent,
     Item: MenubarItem,
+    Label: MenubarLabel,
     Menu: MenubarMenu,
     Separator: MenubarSeparator,
+    Shortcut: MenubarShortcut,
     Trigger: MenubarTrigger
 });

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { PortalProps } from "../../internal/portal/index.js";
 import type { FloatingPlacement } from "../../internal/floating/floating-types.js";
 export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     open?: boolean;
@@ -16,11 +17,14 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
     collisionPadding?: number;
     matchTriggerWidth?: boolean;
     forceMount?: boolean;
+    container?: PortalProps["container"];
+    disableOutsidePointerDown?: boolean;
+    disableEscapeKeyDown?: boolean;
     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, forceMount, id, ref, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
+declare function PopoverContent({ className, container, forceMount, id, disableEscapeKeyDown, disableOutsidePointerDown, ref, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
 export declare const Popover: typeof PopoverRoot & {
     Trigger: typeof PopoverTrigger;
     Content: typeof PopoverContent;

package/dist/components/popover/popover.js

@@ -108,7 +108,7 @@ function PopoverTrigger({ className, onClick, ref, type = "button", ...props })
     }, [context.referenceRef, ref]);
     return (_jsx("button", { ...props, ref: handleRef, type: type, className: cn("liano-popover__trigger", className), "aria-expanded": context.open, "aria-controls": context.contentId, "aria-haspopup": "dialog", "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
 }
-function PopoverContent({ className, forceMount = false, id, ref, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
+function PopoverContent({ className, container, forceMount = false, id, disableEscapeKeyDown = false, disableOutsidePointerDown = false, ref, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
     const context = usePopoverContext("Popover.Content");
     const { defaultContentId, setContentId } = context;
     const transformOrigin = getTransformOrigin(context.floatingPlacement);
@@ -154,9 +154,9 @@ function PopoverContent({ className, forceMount = false, id, ref, sideOffset = 0
     }
     const content = (_jsx("div", { ...props, ref: handleRef, id: contentId, role: "dialog", className: cn("liano-popover__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, style: contentStyle }));
     if (!context.open) {
-        return _jsx(Portal, { children: content });
+        return _jsx(Portal, { ...(container === undefined ? {} : { container }), children: content });
     }
-    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: true, onDismiss: close, modal: context.modal, onPointerDownOutside: ignoreTriggerPointerDown, children: content }) }));
+    return (_jsx(Portal, { ...(container === undefined ? {} : { container }), children: _jsx(DismissableLayer, { open: true, disableEscapeKeyDown: disableEscapeKeyDown, disableOutsidePointerDown: disableOutsidePointerDown, onDismiss: close, modal: context.modal, onPointerDownOutside: ignoreTriggerPointerDown, children: content }) }));
 }
 export const Popover = Object.assign(PopoverRoot, {
     Trigger: PopoverTrigger,

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

@@ -1,2 +1,2 @@
 export { Select } from "./select.js";
-export type { SelectContentProps, SelectItemProps, SelectProps, SelectSize, SelectTriggerProps, SelectValueProps } from "./select.js";
+export type { SelectClearProps, SelectContentProps, SelectGroupProps, SelectItemProps, SelectLabelProps, SelectProps, SelectSeparatorProps, SelectSize, SelectTriggerProps, SelectValue, SelectValueProps } from "./select.js";