@zvk/ui 0.1.3 → 0.1.5

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

@@ -6,7 +6,8 @@ export interface AlertDialogProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface AlertDialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface AlertDialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
@@ -21,18 +22,20 @@ export interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElem
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface AlertDialogActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface AlertDialogCancelProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 declare function AlertDialogRoot({ children, className, defaultOpen, onOpenChange, open: openProp, ref, ...props }: AlertDialogProps): React.JSX.Element;
-declare function AlertDialogTrigger({ className, disabled, onClick, ref, type, ...props }: AlertDialogTriggerProps): React.JSX.Element;
+declare function AlertDialogTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: AlertDialogTriggerProps): React.JSX.Element;
 declare function AlertDialogContent({ children, className, ref, ...props }: AlertDialogContentProps): React.JSX.Element | null;
 declare function AlertDialogTitle({ className, ref, ...props }: AlertDialogTitleProps): React.JSX.Element;
 declare function AlertDialogDescription({ className, ref, ...props }: AlertDialogDescriptionProps): React.JSX.Element;
 declare function AlertDialogFooter({ className, ref, ...props }: AlertDialogFooterProps): React.JSX.Element;
-declare function AlertDialogCloseButton({ className, onClick, ref, type, ...props }: AlertDialogActionProps | AlertDialogCancelProps): React.JSX.Element;
+declare function AlertDialogCloseButton({ asChild, className, disabled, onClick, ref, type, ...props }: AlertDialogActionProps | AlertDialogCancelProps): React.JSX.Element;
 type AlertDialogComponent = typeof AlertDialogRoot & {
     Action: typeof AlertDialogCloseButton;
     Cancel: typeof AlertDialogCloseButton;

package/dist/components/alert-dialog/alert-dialog.js

@@ -8,6 +8,7 @@ import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
 import { FocusScope } from "../../internal/focus/index.js";
 import { Portal } from "../../internal/portal/index.js";
 import { lockScroll, unlockScroll } from "../../internal/scroll-lock/index.js";
+import { Slot } from "../../internal/slot/index.js";
 const AlertDialogContext = React.createContext(null);
 function useAlertDialogContext(calledBy) {
     const context = React.useContext(AlertDialogContext);
@@ -67,13 +68,17 @@ function AlertDialogRoot({ children, className, defaultOpen = false, onOpenChang
             triggerRef
         }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-alert-dialog", className), "data-state": open ? "open" : "closed", children: children }) }));
 }
-function AlertDialogTrigger({ className, disabled, onClick, ref, type = "button", ...props }) {
+function AlertDialogTrigger({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { contentId, open, setOpen, triggerRef } = useAlertDialogContext("AlertDialog.Trigger");
-    return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("liano-alert-dialog__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, () => {
-            if (!disabled) {
-                setOpen(true);
-            }
-        }) }));
+    const handleClick = () => {
+        if (!disabled) {
+            setOpen(true);
+        }
+    };
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: composeRefs(ref, triggerRef), "aria-controls": contentId, "aria-disabled": disabled ? true : undefined, "aria-expanded": open ? "true" : "false", className: cn("liano-alert-dialog__trigger", className), "data-disabled": disabled ? "true" : undefined, "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+    }
+    return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", className: cn("liano-alert-dialog__trigger", className), "data-state": open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
 }
 function AlertDialogContent({ children, className, ref, ...props }) {
     const { close, contentId, describedBy, labelledBy, open } = useAlertDialogContext("AlertDialog.Content");
@@ -97,9 +102,17 @@ function AlertDialogDescription({ className, ref, ...props }) {
 function AlertDialogFooter({ className, ref, ...props }) {
     return _jsx("div", { ...props, ref: ref, className: cn("liano-alert-dialog__footer", className) });
 }
-function AlertDialogCloseButton({ className, onClick, ref, type = "button", ...props }) {
+function AlertDialogCloseButton({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { close } = useAlertDialogContext("AlertDialog.Action");
-    return (_jsx("button", { ...props, ref: ref, type: type, className: cn("liano-alert-dialog__button", className), onClick: composeEventHandlers(onClick, close) }));
+    const handleClick = () => {
+        if (!disabled) {
+            close();
+        }
+    };
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-disabled": disabled ? true : undefined, className: cn("liano-alert-dialog__button", className), "data-disabled": disabled ? "true" : undefined, onClick: composeEventHandlers(onClick, handleClick), children: props.children }));
+    }
+    return (_jsx("button", { ...props, ref: ref, type: type, disabled: disabled, className: cn("liano-alert-dialog__button", className), onClick: composeEventHandlers(onClick, handleClick) }));
 }
 export const AlertDialog = Object.assign(AlertDialogRoot, {
     Action: AlertDialogCloseButton,

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

@@ -2,12 +2,13 @@ import * as React from "react";
 export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
 export type ButtonSize = "sm" | "md" | "lg" | "icon";
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+    asChild?: boolean;
     variant?: ButtonVariant;
     size?: ButtonSize;
     loading?: boolean;
     disabled?: boolean;
     leadingIcon?: React.ReactNode;
     trailingIcon?: React.ReactNode;
-    ref?: React.Ref<HTMLButtonElement>;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
-export declare function Button({ children, className, disabled, leadingIcon, loading, ref, size, trailingIcon, type, variant, ...props }: ButtonProps): React.JSX.Element;
+export declare function Button({ asChild, children, className, disabled, leadingIcon, loading, ref, size, trailingIcon, type, variant, ...props }: ButtonProps): React.JSX.Element;

package/dist/components/button/button.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Spinner } from "../spinner/spinner.js";
+import { Slot } from "../../internal/slot/index.js";
 import { cn } from "../../utils/cn.js";
-export function Button({ children, className, disabled, leadingIcon, loading = false, ref, size = "md", trailingIcon, type = "button", variant = "primary", ...props }) {
+export function Button({ asChild = false, children, className, disabled, leadingIcon, loading = false, ref, size = "md", trailingIcon, type = "button", variant = "primary", ...props }) {
     const isDisabled = disabled || loading;
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-busy": loading ? true : undefined, "aria-disabled": isDisabled ? true : undefined, className: cn("liano-button", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, "data-size": size, "data-variant": variant, children: children }));
+    }
     return (_jsxs("button", { ...props, ref: ref, "aria-busy": loading ? true : undefined, className: cn("liano-button", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, "data-size": size, "data-variant": variant, disabled: isDisabled, type: type, children: [loading ? (_jsx("span", { "aria-hidden": "true", className: "liano-button__spinner", children: _jsx(Spinner, { size: "sm" }) })) : null, leadingIcon ? (_jsx("span", { "aria-hidden": "true", className: "liano-button__icon", children: leadingIcon })) : null, _jsx("span", { className: "liano-button__content", children: children }), trailingIcon ? (_jsx("span", { "aria-hidden": "true", className: "liano-button__icon", children: trailingIcon })) : null] }));
 }

package/dist/components/calendar/calendar.d.ts

@@ -1,16 +1,51 @@
 import * as React from "react";
-export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
-    selected?: Date | null;
-    defaultSelected?: Date | null;
-    onSelect?: (date: Date | null) => void;
+export type CalendarMode = "single";
+export type CalendarClassNames = Partial<{
+    months: string;
+    month: string;
+    caption: string;
+    caption_label: string;
+    nav: string;
+    nav_button: string;
+    nav_button_previous: string;
+    nav_button_next: string;
+    table: string;
+    head_row: string;
+    head_cell: string;
+    row: string;
+    cell: string;
+    day: string;
+    day_selected: string;
+    day_today: string;
+    day_outside: string;
+    day_disabled: string;
+}>;
+interface CalendarBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
     month?: Date;
     defaultMonth?: Date;
     onMonthChange?: (month: Date) => void;
     minDate?: Date;
     maxDate?: Date;
+    disabled?: (date: Date) => boolean;
     disabledDate?: (date: Date) => boolean;
+    showOutsideDays?: boolean;
+    classNames?: CalendarClassNames;
     weekStartsOn?: 0 | 1;
     locale?: string;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function Calendar({ className, defaultMonth, defaultSelected, disabledDate, locale, maxDate, minDate, month, onKeyDown, onMonthChange, onSelect, ref, selected, weekStartsOn, ...props }: CalendarProps): React.JSX.Element;
+export interface CalendarNativeProps extends CalendarBaseProps {
+    mode?: undefined;
+    selected?: Date | null;
+    defaultSelected?: Date | null;
+    onSelect?: (date: Date | null) => void;
+}
+export interface CalendarSingleProps extends CalendarBaseProps {
+    mode: CalendarMode;
+    selected?: Date | null | undefined;
+    defaultSelected?: Date | null;
+    onSelect?: (date: Date | undefined) => void;
+}
+export type CalendarProps = CalendarNativeProps | CalendarSingleProps;
+export declare function Calendar({ classNames, className, defaultMonth, defaultSelected, disabled, disabledDate, locale, maxDate, minDate, mode, month, onKeyDown, onMonthChange, onSelect, ref, selected, showOutsideDays, weekStartsOn, ...props }: CalendarProps): React.JSX.Element;
+export {};

package/dist/components/calendar/calendar.js

@@ -52,7 +52,11 @@ function isDisabled(date, props) {
     if (props.maxDate && isAfterDay(date, props.maxDate)) {
         return true;
     }
-    return props.disabledDate ? props.disabledDate(startOfDay(date)) : false;
+    const normalizedDate = startOfDay(date);
+    if (props.disabled?.(normalizedDate)) {
+        return true;
+    }
+    return props.disabledDate ? props.disabledDate(normalizedDate) : false;
 }
 function getMonthLabel(date, locale) {
     return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
@@ -74,7 +78,7 @@ function getNearestEnabledDate(date, visibleMonth, props) {
     const days = getCalendarDays(visibleMonth, 0);
     return days.find((day) => !isDisabled(day, props)) ?? date;
 }
-export function Calendar({ className, defaultMonth, defaultSelected = null, disabledDate, locale, maxDate, minDate, month, onKeyDown, onMonthChange, onSelect, ref, selected, weekStartsOn = 0, ...props }) {
+export function Calendar({ classNames, className, defaultMonth, defaultSelected = null, disabled, disabledDate, locale, maxDate, minDate, mode, month, onKeyDown, onMonthChange, onSelect, ref, selected, showOutsideDays = true, weekStartsOn = 0, ...props }) {
     const isSelectedControlled = selected !== undefined;
     const selectedDate = isSelectedControlled ? selected : defaultSelected;
     const [uncontrolledSelected, setUncontrolledSelected] = React.useState(defaultSelected);
@@ -84,7 +88,7 @@ export function Calendar({ className, defaultMonth, defaultSelected = null, disa
     const [focusedDate, setFocusedDate] = React.useState(() => startOfDay(currentSelected ?? visibleMonth));
     const headingId = React.useId();
     const dayButtonRefs = React.useRef(new Map());
-    const disabledProps = React.useMemo(() => ({ disabledDate, maxDate, minDate }), [disabledDate, maxDate, minDate]);
+    const disabledProps = React.useMemo(() => ({ disabled, disabledDate, maxDate, minDate }), [disabled, disabledDate, maxDate, minDate]);
     const days = React.useMemo(() => getCalendarDays(visibleMonth, weekStartsOn), [visibleMonth, weekStartsOn]);
     const weekdays = React.useMemo(() => getWeekdayLabels(weekStartsOn, locale), [locale, weekStartsOn]);
     const monthLabel = getMonthLabel(visibleMonth, locale);
@@ -119,6 +123,10 @@ export function Calendar({ className, defaultMonth, defaultSelected = null, disa
         if (!isSelectedControlled) {
             setUncontrolledSelected(nextSelected);
         }
+        if (mode === "single") {
+            onSelect?.(nextSelected ?? undefined);
+            return;
+        }
         onSelect?.(nextSelected);
     };
     const handleKeyDown = (event) => {
@@ -159,14 +167,18 @@ export function Calendar({ className, defaultMonth, defaultSelected = null, disa
         }
         moveFocus(addDays(focusedDate, offset));
     };
-    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-calendar", className), onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "liano-calendar__header", children: [_jsx("button", { "aria-label": "Previous month", className: "liano-calendar__nav", type: "button", onClick: () => setVisibleMonth(addMonths(visibleMonth, -1)), children: _jsx("span", { "aria-hidden": "true", children: "\u2039" }) }), _jsx("h2", { className: "liano-calendar__heading", id: headingId, children: monthLabel }), _jsx("button", { "aria-label": "Next month", className: "liano-calendar__nav", type: "button", onClick: () => setVisibleMonth(addMonths(visibleMonth, 1)), children: _jsx("span", { "aria-hidden": "true", children: "\u203A" }) })] }), _jsxs("div", { "aria-labelledby": headingId, className: "liano-calendar__grid", role: "grid", children: [_jsx("div", { className: "liano-calendar__weekdays", role: "row", children: weekdays.map((weekday) => (_jsx("span", { className: "liano-calendar__weekday", role: "columnheader", children: weekday }, weekday))) }), Array.from({ length: 6 }, (_, rowIndex) => (_jsx("div", { className: "liano-calendar__week", role: "row", children: days.slice(rowIndex * 7, rowIndex * 7 + 7).map((date) => {
+    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-calendar", classNames?.months, classNames?.month, className), onKeyDown: handleKeyDown, children: [_jsxs("div", { className: cn("liano-calendar__header", classNames?.caption, classNames?.nav), children: [_jsx("button", { "aria-label": "Previous month", className: cn("liano-calendar__nav", classNames?.nav_button, classNames?.nav_button_previous), type: "button", onClick: () => setVisibleMonth(addMonths(visibleMonth, -1)), children: _jsx("span", { "aria-hidden": "true", children: "\u2039" }) }), _jsx("h2", { className: cn("liano-calendar__heading", classNames?.caption_label), id: headingId, children: monthLabel }), _jsx("button", { "aria-label": "Next month", className: cn("liano-calendar__nav", classNames?.nav_button, classNames?.nav_button_next), type: "button", onClick: () => setVisibleMonth(addMonths(visibleMonth, 1)), children: _jsx("span", { "aria-hidden": "true", children: "\u203A" }) })] }), _jsxs("div", { "aria-labelledby": headingId, className: cn("liano-calendar__grid", classNames?.table), role: "grid", children: [_jsx("div", { className: cn("liano-calendar__weekdays", classNames?.head_row), role: "row", children: weekdays.map((weekday) => (_jsx("span", { className: cn("liano-calendar__weekday", classNames?.head_cell), role: "columnheader", children: weekday }, weekday))) }), Array.from({ length: 6 }, (_, rowIndex) => (_jsx("div", { className: cn("liano-calendar__week", classNames?.row), role: "row", children: days.slice(rowIndex * 7, rowIndex * 7 + 7).map((date) => {
                             const normalizedDate = startOfDay(date);
                             const dateKey = normalizedDate.getTime();
                             const outsideMonth = date.getMonth() !== visibleMonth.getMonth();
+                            const hideOutsideDay = outsideMonth && !showOutsideDays;
                             const disabled = isDisabled(date, disabledProps);
                             const selectedDay = isSameDay(currentSelected, date);
                             const focusedDay = isSameDay(focusedDate, date);
-                            return (_jsx("span", { className: "liano-calendar__cell", role: "gridcell", children: _jsx("button", { "aria-label": getDayLabel(date, locale), "aria-pressed": selectedDay, className: "liano-calendar__day", "data-disabled": disabled ? "true" : undefined, "data-outside-month": outsideMonth ? "true" : undefined, "data-selected": selectedDay ? "true" : undefined, "data-today": isSameDay(today, date) ? "true" : undefined, disabled: disabled, ref: (node) => {
+                            if (hideOutsideDay) {
+                                return (_jsx("span", { className: cn("liano-calendar__cell", classNames?.cell), role: "gridcell", children: _jsx("span", { "aria-hidden": "true", className: cn("liano-calendar__day", classNames?.day, classNames?.day_outside), "data-outside-month": "true" }) }, dateKey));
+                            }
+                            return (_jsx("span", { className: cn("liano-calendar__cell", classNames?.cell), role: "gridcell", children: _jsx("button", { "aria-label": getDayLabel(date, locale), "aria-pressed": selectedDay, className: cn("liano-calendar__day", classNames?.day, selectedDay ? classNames?.day_selected : undefined, outsideMonth ? classNames?.day_outside : undefined, disabled ? classNames?.day_disabled : undefined, isSameDay(today, date) ? classNames?.day_today : undefined), "data-disabled": disabled ? "true" : undefined, "data-outside-month": outsideMonth ? "true" : undefined, "data-selected": selectedDay ? "true" : undefined, "data-today": isSameDay(today, date) ? "true" : undefined, disabled: disabled, ref: (node) => {
                                         if (node) {
                                             dayButtonRefs.current.set(dateKey, node);
                                         }

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

@@ -1,2 +1,2 @@
 export { Calendar } from "./calendar.js";
-export type { CalendarProps } from "./calendar.js";
+export type { CalendarClassNames, CalendarMode, CalendarNativeProps, CalendarProps, CalendarSingleProps } from "./calendar.js";

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;
 };