@zvk/ui 0.1.3 → 0.1.6

package/dist/components/carousel/carousel.js

@@ -157,15 +157,15 @@ function CarouselRoot({ children, className, defaultIndex = 0, index, onApiChang
         slideCount,
         unregisterSlide
     ]);
-    return (_jsx(CarouselContext.Provider, { value: context, children: _jsx("div", { ...props, ref: ref, "aria-roledescription": "carousel", className: cn("liano-carousel", className), "data-orientation": orientation, onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown), role: props.role ?? "region", tabIndex: tabIndex ?? 0, children: children }) }));
+    return (_jsx(CarouselContext.Provider, { value: context, children: _jsx("div", { ...props, ref: ref, "aria-roledescription": "carousel", className: cn("zvk-ui-carousel", className), "data-orientation": orientation, onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown), role: props.role ?? "region", tabIndex: tabIndex ?? 0, children: children }) }));
 }
 function CarouselViewport({ className, ref, ...props }) {
     const context = useCarouselContext("Carousel.Viewport");
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-carousel__viewport", className), "data-orientation": context.orientation }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-carousel__viewport", className), "data-orientation": context.orientation }));
 }
 function CarouselTrack({ className, ref, ...props }) {
     const context = useCarouselContext("Carousel.Track");
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-carousel__track", className), "data-orientation": context.orientation }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-carousel__track", className), "data-orientation": context.orientation }));
 }
 function CarouselSlide({ className, ref, ...props }) {
     const context = useCarouselContext("Carousel.Slide");
@@ -183,22 +183,22 @@ function CarouselSlide({ className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: (node) => {
             slideRef.current = node;
             setRef(ref, node);
-        }, "aria-label": props["aria-label"] ?? `${safeIndex + 1} of ${context.slideCount}`, "aria-roledescription": "slide", className: cn("liano-carousel__slide", className), "data-orientation": context.orientation, "data-selected": isSelected ? "true" : undefined, role: props.role ?? "group" }));
+        }, "aria-label": props["aria-label"] ?? `${safeIndex + 1} of ${context.slideCount}`, "aria-roledescription": "slide", className: cn("zvk-ui-carousel__slide", className), "data-orientation": context.orientation, "data-selected": isSelected ? "true" : undefined, role: props.role ?? "group" }));
 }
 function CarouselPrevious({ className, disabled, onClick, ref, type = "button", ...props }) {
     const context = useCarouselContext("Carousel.Previous");
     const isDisabled = disabled === true || !context.canScrollPrev;
-    return (_jsx("button", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Previous slide", className: cn("liano-carousel__button liano-carousel__button--previous", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => context.scrollPrev()), type: type }));
+    return (_jsx("button", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Previous slide", className: cn("zvk-ui-carousel__button zvk-ui-carousel__button--previous", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => context.scrollPrev()), type: type }));
 }
 function CarouselNext({ className, disabled, onClick, ref, type = "button", ...props }) {
     const context = useCarouselContext("Carousel.Next");
     const isDisabled = disabled === true || !context.canScrollNext;
-    return (_jsx("button", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Next slide", className: cn("liano-carousel__button liano-carousel__button--next", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => context.scrollNext()), type: type }));
+    return (_jsx("button", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Next slide", className: cn("zvk-ui-carousel__button zvk-ui-carousel__button--next", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => context.scrollNext()), type: type }));
 }
 function CarouselPage({ children, className, ref, ...props }) {
     const context = useCarouselContext("Carousel.Page");
     const label = context.slideCount === 0 ? "0 / 0" : `${context.selectedIndex + 1} / ${context.slideCount}`;
-    return (_jsx("output", { ...props, ref: ref, "aria-live": props["aria-live"] ?? "polite", className: cn("liano-carousel__page", className), children: children ?? label }));
+    return (_jsx("output", { ...props, ref: ref, "aria-live": props["aria-live"] ?? "polite", className: cn("zvk-ui-carousel__page", className), children: children ?? label }));
 }
 export const Carousel = Object.assign(CarouselRoot, {
     Next: CarouselNext,

package/dist/components/checkbox/checkbox.js

@@ -21,10 +21,10 @@ export function Checkbox({ "aria-describedby": ariaDescribedBy, className, descr
     const descriptionId = hasDescription ? `${checkboxId}-description` : undefined;
     const errorId = hasError ? `${checkboxId}-error` : undefined;
     const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
-    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: "liano-checkbox__input", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, disabled: disabled, id: checkboxId, required: required, type: "checkbox" }));
-    const content = (_jsxs(_Fragment, { children: [input, _jsx("span", { className: "liano-checkbox__control", "aria-hidden": "true", children: _jsx("span", { className: "liano-checkbox__indicator" }) }), hasLabel ? _jsx("span", { className: "liano-checkbox__label", children: label }) : null] }));
+    const input = (_jsx("input", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: "zvk-ui-checkbox__input", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, disabled: disabled, id: checkboxId, required: required, type: "checkbox" }));
+    const content = (_jsxs(_Fragment, { children: [input, _jsx("span", { className: "zvk-ui-checkbox__control", "aria-hidden": "true", children: _jsx("span", { className: "zvk-ui-checkbox__indicator" }) }), hasLabel ? _jsx("span", { className: "zvk-ui-checkbox__label", children: label }) : null] }));
     if (!hasLabel && !hasDescription && !hasError) {
-        return (_jsx("span", { className: cn("liano-checkbox", className), "data-size": size, "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, children: content }));
+        return (_jsx("span", { className: cn("zvk-ui-checkbox", className), "data-size": size, "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, children: content }));
     }
-    return (_jsxs(Field, { disabled: Boolean(disabled), invalid: invalidState, required: Boolean(required), children: [_jsx("label", { className: cn("liano-checkbox", className), "data-size": size, "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, children: content }), hasDescription ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null] }));
+    return (_jsxs(Field, { disabled: Boolean(disabled), invalid: invalidState, required: Boolean(required), children: [_jsx("label", { className: cn("zvk-ui-checkbox", className), "data-size": size, "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, children: content }), hasDescription ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null] }));
 }

package/dist/components/code-block/code-block.js

@@ -11,6 +11,6 @@ function toLanguageClass(value) {
 export function CodeBlock({ className, code, filename, language, ref, size = "md", ...props }) {
     const hasMetadata = (filename !== undefined && filename !== null) ||
         (language !== undefined && language !== null && language.trim().length > 0);
-    const codeClassName = cn("liano-code-block__code", toLanguageClass(language));
-    return (_jsxs("pre", { ...props, ref: ref, className: cn("liano-code-block", className), "data-size": size, children: [hasMetadata ? (_jsxs("span", { className: "liano-code-block__header", children: [filename !== undefined && filename !== null ? _jsx("span", { className: "liano-code-block__filename", children: filename }) : null, language ? _jsx("span", { className: "liano-code-block__language", children: language }) : null] })) : null, _jsx("code", { className: codeClassName, children: code })] }));
+    const codeClassName = cn("zvk-ui-code-block__code", toLanguageClass(language));
+    return (_jsxs("pre", { ...props, ref: ref, className: cn("zvk-ui-code-block", className), "data-size": size, children: [hasMetadata ? (_jsxs("span", { className: "zvk-ui-code-block__header", children: [filename !== undefined && filename !== null ? _jsx("span", { className: "zvk-ui-code-block__filename", children: filename }) : null, language ? _jsx("span", { className: "zvk-ui-code-block__language", children: language }) : null] })) : null, _jsx("code", { className: codeClassName, children: code })] }));
 }

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);
@@ -21,15 +22,18 @@ function CollapsibleRoot({ children, className, defaultOpen = false, disabled =
         defaultOpen,
         ...(onOpenChange ? { onOpenChange } : {})
     });
-    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 }) }));
+    return (_jsx(CollapsibleContext.Provider, { value: { open: isOpen, setOpen, disabled, contentId, defaultContentId, setContentId }, children: _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-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);
     };
-    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 }));
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-controls": context.contentId, "aria-disabled": isDisabled ? true : undefined, "aria-expanded": context.open, className: cn("zvk-ui-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("zvk-ui-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 }) {
     const context = useCollapsibleContext("Collapsible.Content");
@@ -44,7 +48,7 @@ function CollapsibleContent({ className, forceMount = false, ref, ...props }) {
     if (!forceMount && !open) {
         return null;
     }
-    return (_jsx("div", { ...props, id: resolvedId, ref: ref, className: cn("liano-collapsible__content", className), "data-state": open ? "open" : "closed", hidden: open ? undefined : true }));
+    return (_jsx("div", { ...props, id: resolvedId, ref: ref, className: cn("zvk-ui-collapsible__content", className), "data-state": open ? "open" : "closed", hidden: open ? undefined : true }));
 }
 export const Collapsible = Object.assign(CollapsibleRoot, {
     Trigger: CollapsibleTrigger,

package/dist/components/combobox/combobox.js

@@ -15,8 +15,8 @@ function joinIds(...ids) {
     const value = ids.filter(Boolean).join(" ");
     return value.length > 0 ? value : undefined;
 }
-function optionId(baseId, value) {
-    return `${baseId}-option-${value.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+function optionId(baseId, index) {
+    return `${baseId}-option-${index}`;
 }
 function composeRefs(...refs) {
     return (node) => {
@@ -75,6 +75,7 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, clear
     const filteredOptions = options.filter((option) => commandItemMatches(option, query));
     const activeOption = filteredOptions.find((option) => option.value === activeValue && option.disabled !== true) ??
         firstEnabled(filteredOptions);
+    const activeOptionIndex = activeOption === undefined ? -1 : filteredOptions.findIndex((option) => option.value === activeOption.value);
     React.useEffect(() => {
         if (!open) {
             setQuery(selectedOption?.label ?? "");
@@ -106,7 +107,7 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, clear
         const next = nextEnabled(filteredOptions, activeOption?.value, direction);
         setActiveValue(next?.value);
     }, [activeOption?.value, filteredOptions]);
-    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) => {
+    const input = (_jsx("input", { ...props, ref: composeRefs(ref, inputRef, floating.referenceRef), id: inputId, role: "combobox", "aria-activedescendant": open && activeOptionIndex >= 0 ? optionId(inputId, activeOptionIndex) : undefined, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-describedby": describedBy, "aria-expanded": open ? "true" : "false", "aria-invalid": invalid ? "true" : undefined, className: cn("zvk-ui-combobox__input", className), "data-invalid": invalid ? "true" : undefined, "data-size": size, disabled: disabled, onBlur: onBlur, onChange: (event) => {
             if (!open) {
                 setOpen(true);
             }
@@ -144,9 +145,9 @@ export function Combobox({ "aria-describedby": ariaDescribedBy, className, clear
                 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, _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) => {
+    return (_jsxs("div", { className: "zvk-ui-combobox", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, children: [hasLabel ? _jsx("label", { className: "zvk-ui-combobox__label", htmlFor: inputId, children: label }) : null, _jsxs("div", { className: "zvk-ui-combobox__control", children: [input, clearable && selectedValue !== null ? (_jsx("button", { type: "button", className: "zvk-ui-combobox__clear", "aria-label": "Clear selection", disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: clearSelection, children: "Clear" })) : null] }), hasDescription ? _jsx("div", { className: "zvk-ui-combobox__description", id: descriptionId, children: description }) : null, hasError ? _jsx("div", { className: "zvk-ui-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: "zvk-ui-combobox__popup", ref: floating.floatingRef, style: floating.floatingStyle, children: filteredOptions.map((option, index) => {
                             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));
+                            return (_jsx("div", { id: optionId(inputId, index), role: "option", "aria-disabled": option.disabled ? "true" : undefined, "aria-selected": isSelected ? "true" : "false", className: "zvk-ui-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/command/command-filter.d.ts

@@ -4,4 +4,3 @@ export interface CommandFilterItem {
     keywords?: readonly string[] | undefined;
 }
 export declare function commandItemMatches(item: CommandFilterItem, query: string): boolean;
-export declare function filterCommandItems<Item extends CommandFilterItem>(items: readonly Item[], query: string): Item[];

package/dist/components/command/command-filter.js

@@ -9,6 +9,3 @@ export function commandItemMatches(item, query) {
     const haystacks = [item.value, item.label, ...(item.keywords ?? [])];
     return haystacks.some((value) => normalized(value).includes(needle));
 }
-export function filterCommandItems(items, query) {
-    return items.filter((item) => commandItemMatches(item, query));
-}

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("zvk-ui-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("zvk-ui-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("zvk-ui-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("zvk-ui-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("zvk-ui-command__group", className), "cmdk-group": "", children: [heading ? _jsx("div", { id: headingId, className: "zvk-ui-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("zvk-ui-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("zvk-ui-command__separator", className), "cmdk-separator": "" }));
+}
+function CommandShortcut({ className, ref, ...props }) {
+    return _jsx("span", { ...props, ref: ref, className: cn("zvk-ui-command__shortcut", className) });
 }
 export function CommandDialog({ children, className, closeOnSelect = false, commandLabel = "Command menu", onOpenChange, ...props }) {
     const handleItemSelect = React.useCallback(() => {
@@ -187,7 +197,7 @@ export function CommandDialog({ children, className, closeOnSelect = false, comm
             onOpenChange?.(false);
         }
     }, [closeOnSelect, onOpenChange]);
-    return (_jsx(Dialog, { ...props, ...(onOpenChange ? { onOpenChange } : {}), children: _jsxs(Dialog.Content, { className: cn("liano-command-dialog", className), children: [_jsx(Dialog.Title, { className: "liano-command-dialog__title", children: commandLabel }), _jsx(Command, { onItemSelect: handleItemSelect, children: children })] }) }));
+    return (_jsx(Dialog, { ...props, ...(onOpenChange ? { onOpenChange } : {}), children: _jsxs(Dialog.Content, { className: cn("zvk-ui-command-dialog", className), children: [_jsx(Dialog.Title, { className: "zvk-ui-command-dialog__title", children: commandLabel }), _jsx(Command, { onItemSelect: handleItemSelect, children: children })] }) }));
 }
 export const Command = Object.assign(CommandRoot, {
     Dialog: CommandDialog,
@@ -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;
 };