@zvk/ui 0.1.3 → 0.1.6

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

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

package/dist/components/conversation/conversation.js

@@ -2,38 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
 function ConversationRoot({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-conversation", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-conversation", className) });
 }
 function ConversationList({ className, ref, ...props }) {
-    return (_jsx("div", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Conversation", className: cn("liano-conversation__list", className), role: "log" }));
+    return (_jsx("div", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Conversation", className: cn("zvk-ui-conversation__list", className), role: "log" }));
 }
 function ConversationMessage({ className, ref, role, ...props }) {
-    return (_jsx("div", { ...props, ref: ref, className: cn("liano-conversation__message", className), "data-role": role }));
+    return (_jsx("div", { ...props, ref: ref, className: cn("zvk-ui-conversation__message", className), "data-role": role }));
 }
 function ConversationMessageAvatar({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-conversation__message-avatar", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-conversation__message-avatar", className) });
 }
 function ConversationMessageContent({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-conversation__message-content", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-conversation__message-content", className) });
 }
 function ConversationResponse({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-conversation__response", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-conversation__response", className) });
 }
 function ConversationReasoning({ children, className, ref, title = "Reasoning", ...props }) {
-    return (_jsxs("details", { ...props, ref: ref, className: cn("liano-conversation__reasoning", className), children: [_jsx("summary", { className: "liano-conversation__reasoning-summary", children: title }), _jsx("div", { className: "liano-conversation__reasoning-content", children: children })] }));
+    return (_jsxs("details", { ...props, ref: ref, className: cn("zvk-ui-conversation__reasoning", className), children: [_jsx("summary", { className: "zvk-ui-conversation__reasoning-summary", children: title }), _jsx("div", { className: "zvk-ui-conversation__reasoning-content", children: children })] }));
 }
 function ConversationTool({ children, className, ref, status = "pending", title, ...props }) {
-    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-conversation__tool", className), "data-status": status, children: [title ? _jsx("div", { className: "liano-conversation__tool-title", children: title }) : null, children ? _jsx("div", { className: "liano-conversation__tool-content", children: children }) : null] }));
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-ui-conversation__tool", className), "data-status": status, children: [title ? _jsx("div", { className: "zvk-ui-conversation__tool-title", children: title }) : null, children ? _jsx("div", { className: "zvk-ui-conversation__tool-content", children: children }) : null] }));
 }
 function ConversationPromptInput({ className, ref, ...props }) {
-    return _jsx("form", { ...props, ref: ref, className: cn("liano-conversation__prompt-input", className) });
+    return _jsx("form", { ...props, ref: ref, className: cn("zvk-ui-conversation__prompt-input", className) });
 }
 function ConversationPromptInputTextarea({ className, ref, rows = 3, ...props }) {
-    return (_jsx("textarea", { ...props, ref: ref, className: cn("liano-conversation__prompt-textarea", className), rows: rows }));
+    return (_jsx("textarea", { ...props, ref: ref, className: cn("zvk-ui-conversation__prompt-textarea", className), rows: rows }));
 }
 function ConversationPromptInputSubmit({ className, disabled, loading = false, ref, type = "submit", ...props }) {
     const isDisabled = disabled || loading;
-    return (_jsx("button", { ...props, ref: ref, "aria-busy": loading ? true : undefined, className: cn("liano-conversation__prompt-submit", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, disabled: isDisabled, type: type }));
+    return (_jsx("button", { ...props, ref: ref, "aria-busy": loading ? true : undefined, className: cn("zvk-ui-conversation__prompt-submit", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, disabled: isDisabled, type: type }));
 }
 export const Conversation = Object.assign(ConversationRoot, {
     List: ConversationList,

package/dist/components/copy-button/copy-button.js

@@ -43,8 +43,8 @@ export function CopyButton({ className, copiedLabel = "Copied", disabled, errorL
         }
     }
     const label = status === "copied" ? copiedLabel : status === "error" ? errorLabel : idleLabel;
-    return (_jsx("button", { ...props, ref: ref, className: cn("liano-copy-button", className), "data-size": size, "data-status": status, disabled: disabled, onClick: handleClick, type: type, children: label }));
+    return (_jsx("button", { ...props, ref: ref, className: cn("zvk-ui-copy-button", className), "data-size": size, "data-status": status, disabled: disabled, onClick: handleClick, type: type, children: label }));
 }
 export function CopyableText({ className, copyLabel, label, ref, truncate, value, ...props }) {
-    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-copyable-text", className), children: [label ? _jsx("span", { className: "liano-copyable-text__label", children: label }) : null, _jsx("code", { className: "liano-copyable-text__value", "data-truncate": truncate ? "true" : undefined, children: value }), _jsx(CopyButton, { idleLabel: copyLabel ?? "Copy", value: value })] }));
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-ui-copyable-text", className), children: [label ? _jsx("span", { className: "zvk-ui-copyable-text__label", children: label }) : null, _jsx("code", { className: "zvk-ui-copyable-text__value", "data-truncate": truncate ? "true" : undefined, children: value }), _jsx(CopyButton, { idleLabel: copyLabel ?? "Copy", value: value })] }));
 }

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

@@ -46,5 +46,5 @@ export function DatePicker({ defaultValue = null, description, disabledDate, err
         onValueChange?.(date);
         setOpen(false);
     };
-    return (_jsxs(Field, { className: "liano-date-picker", invalid: hasError, ...fieldRefProps, children: [hasLabel ? _jsx(Field.Label, { htmlFor: triggerId, children: label }) : null, _jsxs(Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", children: [_jsx(Popover.Trigger, { "aria-describedby": describedBy, "aria-invalid": hasError ? true : undefined, "aria-label": hasLabel ? undefined : "Selected date", className: cn("liano-date-picker__trigger", !currentValue && "liano-date-picker__trigger--placeholder"), id: triggerId, children: _jsx("span", { className: "liano-date-picker__value", children: currentValue ? formatDate(currentValue) : placeholder }) }), _jsx(Popover.Content, { className: "liano-date-picker__content", matchTriggerWidth: false, sideOffset: 4, children: _jsx(Calendar, { ...calendarProps, selected: currentValue, onSelect: handleSelect }) })] }), hasRenderableNode(description) ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null] }));
+    return (_jsxs(Field, { className: "zvk-ui-date-picker", invalid: hasError, ...fieldRefProps, children: [hasLabel ? _jsx(Field.Label, { htmlFor: triggerId, children: label }) : null, _jsxs(Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", children: [_jsx(Popover.Trigger, { "aria-describedby": describedBy, "aria-invalid": hasError ? true : undefined, "aria-label": hasLabel ? undefined : "Selected date", className: cn("zvk-ui-date-picker__trigger", !currentValue && "zvk-ui-date-picker__trigger--placeholder"), id: triggerId, children: _jsx("span", { className: "zvk-ui-date-picker__value", children: currentValue ? formatDate(currentValue) : placeholder }) }), _jsx(Popover.Content, { className: "zvk-ui-date-picker__content", matchTriggerWidth: false, sideOffset: 4, children: _jsx(Calendar, { ...calendarProps, selected: currentValue, onSelect: handleSelect }) })] }), hasRenderableNode(description) ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null] }));
 }

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

@@ -10,7 +10,8 @@ export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
     forceMount?: boolean;
@@ -32,7 +33,8 @@ export interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement>
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 interface DialogPortalProps {
     children: React.ReactNode;
@@ -46,8 +48,8 @@ declare function DialogHeader({ className, ref, ...props }: DialogHeaderProps):
 declare function DialogTitle({ className, ref, ...props }: DialogTitleProps): React.JSX.Element;
 declare function DialogDescription({ className, ref, ...props }: DialogDescriptionProps): React.JSX.Element;
 declare function DialogFooter({ className, ref, ...props }: DialogFooterProps): React.JSX.Element;
-declare function DialogTrigger({ className, disabled, onClick, ref, type, ...props }: DialogTriggerProps): React.JSX.Element;
-declare function DialogClose({ className, onClick, ref, type, ...props }: DialogCloseProps): React.JSX.Element;
+declare function DialogTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: DialogTriggerProps): React.JSX.Element;
+declare function DialogClose({ asChild, className, disabled, onClick, ref, type, ...props }: DialogCloseProps): React.JSX.Element;
 type DialogComponent = typeof DialogRoot & {
     Close: typeof DialogClose;
     Content: typeof DialogContent;

package/dist/components/dialog/dialog.js

@@ -8,6 +8,7 @@ import { DismissableLayer } from "../../internal/dismissable-layer/dismissable-l
 import { FocusScope } from "../../internal/focus/focus-scope.js";
 import { lockScroll, unlockScroll } from "../../internal/scroll-lock/scroll-lock.js";
 import { Portal } from "../../internal/portal/index.js";
+import { Slot } from "../../internal/slot/index.js";
 const DialogContext = React.createContext(null);
 function useDialogContext(calledBy) {
     const context = React.useContext(DialogContext);
@@ -76,7 +77,7 @@ function DialogRoot({ children, className, container, defaultOpen = false, disab
             triggerRef,
             disableOutsidePointerDown,
             disableEscapeKeyDown
-        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-dialog", className), "data-state": open ? "open" : "closed", children: children }) }));
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-dialog", className), "data-state": open ? "open" : "closed", children: children }) }));
 }
 function DialogPortal({ container, children }) {
     if (container === undefined) {
@@ -85,38 +86,38 @@ function DialogPortal({ container, children }) {
     return _jsx(Portal, { container: container, children: children });
 }
 function DialogOverlay({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-dialog__overlay", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-dialog__overlay", className) });
 }
 function DialogContent({ className, children, forceMount = false, ref, ...props }) {
     const { close, container, contentId, describedBy, disableEscapeKeyDown, disableOutsidePointerDown, labelledBy, open } = useDialogContext("Dialog.Content");
     if (!open && !forceMount) {
         return null;
     }
-    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 }));
+    const content = (_jsx("div", { ...props, ref: ref, id: contentId, role: "dialog", "aria-modal": true, "aria-labelledby": labelledBy, "aria-describedby": describedBy, className: cn("zvk-ui-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) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-dialog__header", className) });
 }
 function DialogTitle({ className, ref, ...props }) {
     const { registerTitle, titleId } = useDialogContext("Dialog.Title");
     const resolvedId = props.id ?? titleId;
     React.useLayoutEffect(() => registerTitle(resolvedId), [registerTitle, resolvedId]);
-    return _jsx("h2", { ...props, ref: ref, id: resolvedId, className: cn("liano-dialog__title", className) });
+    return _jsx("h2", { ...props, ref: ref, id: resolvedId, className: cn("zvk-ui-dialog__title", className) });
 }
 function DialogDescription({ className, ref, ...props }) {
     const { descriptionId, registerDescription } = useDialogContext("Dialog.Description");
     const resolvedId = props.id ?? descriptionId;
     React.useLayoutEffect(() => registerDescription(resolvedId), [registerDescription, resolvedId]);
-    return (_jsx("p", { ...props, ref: ref, id: resolvedId, className: cn("liano-dialog__description", className) }));
+    return (_jsx("p", { ...props, ref: ref, id: resolvedId, className: cn("zvk-ui-dialog__description", className) }));
 }
 function DialogFooter({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-dialog__footer", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-dialog__footer", className) });
 }
-function DialogTrigger({ className, disabled, onClick, ref, type = "button", ...props }) {
+function DialogTrigger({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { open, setOpen, contentId, triggerRef } = useDialogContext("Dialog.Trigger");
     const handleClick = () => {
         if (disabled) {
@@ -124,13 +125,22 @@ function DialogTrigger({ className, disabled, onClick, ref, type = "button", ...
         }
         setOpen(true);
     };
-    return (_jsx("button", { ...props, ref: composeRefs(ref, triggerRef), type: type, disabled: disabled, "aria-controls": contentId, "aria-expanded": open ? "true" : "false", "data-state": open ? "open" : "closed", className: cn("liano-dialog__trigger", className), onClick: composeEventHandlers(onClick, handleClick) }));
+    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("zvk-ui-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", "data-state": open ? "open" : "closed", className: cn("zvk-ui-dialog__trigger", className), onClick: composeEventHandlers(onClick, handleClick) }));
 }
-function DialogClose({ className, onClick, ref, type = "button", ...props }) {
+function DialogClose({ asChild = false, className, disabled, onClick, ref, type = "button", ...props }) {
     const { close } = useDialogContext("Dialog.Close");
-    return (_jsx("button", { ...props, ref: ref, type: type, className: cn("liano-dialog__close", className), onClick: composeEventHandlers(onClick, () => {
+    const handleClick = () => {
+        if (!disabled) {
             close();
-        }) }));
+        }
+    };
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-disabled": disabled ? true : undefined, className: cn("zvk-ui-dialog__close", 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("zvk-ui-dialog__close", className), onClick: composeEventHandlers(onClick, handleClick) }));
 }
 export const Dialog = Object.assign(DialogRoot, {
     Close: DialogClose,

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { PortalProps } from "../../internal/portal/index.js";
 import type { FloatingPlacement } from "../../internal/floating/floating-types.js";
+import type { FloatingAlign, FloatingSide } from "../../internal/floating/placement-aliases.js";
 export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     container?: PortalProps["container"];
     open?: boolean;
@@ -12,9 +13,13 @@ export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement>
     matchTriggerWidth?: boolean;
 }
 export interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    ref?: React.Ref<HTMLButtonElement>;
+    asChild?: boolean;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    alignOffset?: number;
     sideOffset?: number;
     collisionPadding?: number;
     matchTriggerWidth?: boolean;
@@ -22,8 +27,9 @@ export interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivEl
     ref?: React.Ref<HTMLDivElement>;
 }
 export interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
     onSelect?: (event: React.SyntheticEvent<HTMLElement>) => void;
-    ref?: React.Ref<HTMLButtonElement>;
+    ref?: React.Ref<HTMLButtonElement | HTMLElement>;
 }
 export interface DropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
@@ -51,15 +57,15 @@ export interface DropdownMenuSubProps extends React.HTMLAttributes<HTMLDivElemen
     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 DropdownMenuTrigger({ asChild, className, disabled, onClick, ref, type, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, children, className, forceMount, side, sideOffset, collisionPadding, matchTriggerWidth, ref, onKeyDown, ...props }: DropdownMenuContentProps): React.JSX.Element | null;
+declare function DropdownMenuItem({ asChild, 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 DropdownMenuCheckboxItem({ asChild, 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 DropdownMenuRadioItem({ asChild, 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;