@zvk/ui 0.1.3 → 0.1.6

package/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Changelog
+
+## [0.1.6](https://github.com/brandon-schabel/zvk/compare/v0.1.5...v0.1.6) (2026-06-12)
+
+
+### Features
+
+* improve consumer migration support ([10b9e8a](https://github.com/brandon-schabel/zvk/commit/10b9e8ac106774eeba0be19db8522abbda02a422))
+
+## [0.1.5](https://github.com/brandon-schabel/zvk-ui/compare/v0.1.4...v0.1.5) (2026-06-04)
+
+
+### Features
+
+* add promptliano adoption primitives ([9a33d57](https://github.com/brandon-schabel/zvk-ui/commit/9a33d57d6a70c73a28810226d72b5e9afc5be203))
+* add promptliano migration component APIs ([43844a4](https://github.com/brandon-schabel/zvk-ui/commit/43844a4bb4dd9b5ab6b30bca83a26da268f5f7a1))
+* harmonize overlay api edges ([be2ab74](https://github.com/brandon-schabel/zvk-ui/commit/be2ab7450c47f5e56802b15b4e350776ea7cf2f6))
+
+
+### Bug Fixes
+
+* **ci:** release please 0.1.4 ([47bc3c5](https://github.com/brandon-schabel/zvk-ui/commit/47bc3c5cb6c7acab9bed45ef7c286de6f9320364))
+
+## [0.1.3](https://github.com/brandon-schabel/zvk-ui/compare/v0.1.2...v0.1.3) (2026-06-03)
+
+
+### Features
+
+* add ZvkUi adoption primitives ([9a33d57](https://github.com/brandon-schabel/zvk-ui/commit/9a33d57d6a70c73a28810226d72b5e9afc5be203))
+
+## [0.1.2](https://github.com/brandon-schabel/zvk-ui/compare/v0.1.1...v0.1.2) (2026-06-03)
+
+
+### Features
+
+* add ZvkUi migration component APIs ([43844a4](https://github.com/brandon-schabel/zvk-ui/commit/43844a4bb4dd9b5ab6b30bca83a26da268f5f7a1))
+* harmonize overlay api edges ([be2ab74](https://github.com/brandon-schabel/zvk-ui/commit/be2ab7450c47f5e56802b15b4e350776ea7cf2f6))
+
+## 0.1.0
+
+- Planned initial package scaffold and first component slice.

package/README.md

@@ -1,7 +1,7 @@
 # @zvk/ui
 
 @zvk/ui is an internal React 19 component library for polished application interfaces. It is styled by default, TypeScript-first, dependency-conscious, and built around explicit subpath imports.
-  
+
 `ZVK` is short for **Zero Vendor Kit**.
 
 ```tsx
@@ -16,18 +16,18 @@ import "@zvk/ui/styles.css";
 - Peer dependencies are limited to `react` and `react-dom` with React 19 compatibility.
 - Styling ships through one public stylesheet: `@zvk/ui/styles.css`.
 - Components use plain CSS classes, CSS variables, and data attributes.
-- First-slice overlays such as Dialog, Popover, Tooltip, Select, and DropdownMenu are intentionally deferred.
+- Runtime package imports remain SSR-safe; browser-only behavior runs after hydration.
 
 ## Release Status
 
-GitHub Actions runs `npm run preflight` before release publishing. Release Please opens
+GitHub Actions runs `bun run preflight` before release publishing. Release Please opens
 reviewable version-bump PRs from conventional commits; merging a release PR creates the
 GitHub release and publishes `@zvk/ui` to npm through trusted publishing in the protected
 `npm-publish` environment.
 
-## First Slice
+## Component Surface
 
-The initial build includes Button, IconButton, Badge, Card, Separator, Spinner, Skeleton, Field, Input, and the hooks/utilities named in the checked-in plans.
+The package ships dependency-free form controls, layout and display primitives, popup foundation internals, Dialog, Sheet, AlertDialog, Popover, HoverCard, Tooltip, Select, Combobox, DropdownMenu, ContextMenu, Menubar, Calendar, DatePicker, Carousel, Toast, and Conversation primitives.
 
 ## License
 

package/dist/components/accordion/accordion.js

@@ -105,7 +105,7 @@ function AccordionRoot({ children, className, collapsible = false, defaultValue,
             registerTrigger,
             unregisterTrigger,
             getOrderedTriggers
-        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-accordion", className), "data-state": type, "data-disabled": disabled ? "true" : undefined, children: children }) }));
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-accordion", className), "data-state": type, "data-disabled": disabled ? "true" : undefined, children: children }) }));
 }
 function AccordionItem({ className, children, disabled = false, ref, value, ...props }) {
     const generatedId = React.useId();
@@ -120,7 +120,7 @@ function AccordionItem({ className, children, disabled = false, ref, value, ...p
             contentId,
             defaultContentId,
             setContentId
-        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-accordion__item", className), "data-state": getValueIsOpen(rootContext.type, rootContext.value, value) ? "open" : "closed", "data-disabled": disabled || rootContext.disabled ? "true" : undefined, children: children }) }));
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-accordion__item", className), "data-state": getValueIsOpen(rootContext.type, rootContext.value, value) ? "open" : "closed", "data-disabled": disabled || rootContext.disabled ? "true" : undefined, children: children }) }));
 }
 function AccordionTrigger({ className, onClick, onKeyDown, ref, type = "button", ...props }) {
     const rootContext = useAccordionRootContext("Accordion.Trigger");
@@ -172,7 +172,7 @@ function AccordionTrigger({ className, onClick, onKeyDown, ref, type = "button",
             else if (ref) {
                 ref.current = node;
             }
-        }, id: itemContext.triggerId, "aria-controls": itemContext.contentId, "aria-expanded": isItemOpen, className: cn("liano-accordion__trigger", className), "data-state": isItemOpen ? "open" : "closed", "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => {
+        }, id: itemContext.triggerId, "aria-controls": itemContext.contentId, "aria-expanded": isItemOpen, className: cn("zvk-ui-accordion__trigger", className), "data-state": isItemOpen ? "open" : "closed", "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => {
             if (!isDisabled && !rootContext.disabled) {
                 rootContext.setValue(toggleValue({
                     type: rootContext.type,
@@ -198,7 +198,7 @@ function AccordionContent({ className, forceMount = false, ref, ...props }) {
     if (!forceMount && !isItemOpen) {
         return null;
     }
-    return (_jsx("div", { ...props, id: resolvedId, ref: ref, "aria-labelledby": itemContext.triggerId, className: cn("liano-accordion__content", className), "data-state": isItemOpen ? "open" : "closed", hidden: isItemOpen ? undefined : true }));
+    return (_jsx("div", { ...props, id: resolvedId, ref: ref, "aria-labelledby": itemContext.triggerId, className: cn("zvk-ui-accordion__content", className), "data-state": isItemOpen ? "open" : "closed", hidden: isItemOpen ? undefined : true }));
 }
 export const Accordion = Object.assign(AccordionRoot, {
     Item: AccordionItem,

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

@@ -13,12 +13,17 @@ export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement
 export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
 }
+export interface AlertActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
 export type AlertRoot = (props: AlertProps) => React.ReactElement;
 declare function AlertRoot({ children, className, icon, ref, role, title, tone, ...props }: AlertProps): React.JSX.Element;
 declare function AlertTitle({ className, ref, ...props }: AlertTitleProps): React.JSX.Element;
 declare function AlertDescription({ className, ref, ...props }: AlertDescriptionProps): React.JSX.Element;
+declare function AlertAction({ className, ref, ...props }: AlertActionProps): React.JSX.Element;
 export declare const Alert: typeof AlertRoot & {
     Title: typeof AlertTitle;
     Description: typeof AlertDescription;
+    Action: typeof AlertAction;
 };
 export {};

package/dist/components/alert/alert.js

@@ -3,15 +3,19 @@ import * as React from "react";
 import { cn } from "../../utils/cn.js";
 function AlertRoot({ children, className, icon, ref, role, title, tone = "info", ...props }) {
     const resolvedRole = role ?? (tone === "destructive" ? "alert" : "status");
-    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-alert", className), "data-tone": tone, role: resolvedRole, children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "liano-alert__icon", children: icon })) : null, _jsxs("div", { className: "liano-alert__content", children: [title ? _jsx(AlertTitle, { children: title }) : null, children] })] }));
+    return (_jsxs("div", { ...props, ref: ref, className: cn("zvk-ui-alert", className), "data-tone": tone, role: resolvedRole, children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "zvk-ui-alert__icon", children: icon })) : null, _jsxs("div", { className: "zvk-ui-alert__content", children: [title ? _jsx(AlertTitle, { children: title }) : null, children] })] }));
 }
 function AlertTitle({ className, ref, ...props }) {
-    return _jsx("h3", { ...props, ref: ref, className: cn("liano-alert__title", className) });
+    return _jsx("h3", { ...props, ref: ref, className: cn("zvk-ui-alert__title", className) });
 }
 function AlertDescription({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-alert__description", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-alert__description", className) });
+}
+function AlertAction({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-alert__action", className) });
 }
 export const Alert = Object.assign(AlertRoot, {
     Title: AlertTitle,
-    Description: AlertDescription
+    Description: AlertDescription,
+    Action: AlertAction
 });

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

@@ -1,2 +1,2 @@
 export { Alert } from "./alert.js";
-export type { AlertDescriptionProps, AlertProps, AlertRoot, AlertTitleProps, AlertTone } from "./alert.js";
+export type { AlertActionProps, AlertDescriptionProps, AlertProps, AlertRoot, AlertTitleProps, AlertTone } from "./alert.js";

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);
@@ -65,41 +66,53 @@ function AlertDialogRoot({ children, className, defaultOpen = false, onOpenChang
             setOpen,
             titleId: `${instanceId}-title`,
             triggerRef
-        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-alert-dialog", className), "data-state": open ? "open" : "closed", children: children }) }));
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-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("zvk-ui-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("zvk-ui-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");
     if (!open) {
         return null;
     }
-    return (_jsxs(Portal, { children: [_jsx("div", { "aria-hidden": "true", className: "liano-alert-dialog__overlay" }), _jsx(DismissableLayer, { open: open, onDismiss: close, children: _jsx(FocusScope, { active: open, trapped: true, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "alertdialog", "aria-modal": "true", "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("liano-alert-dialog__content", className), "data-state": open ? "open" : "closed", children: children }) }) })] }));
+    return (_jsxs(Portal, { children: [_jsx("div", { "aria-hidden": "true", className: "zvk-ui-alert-dialog__overlay" }), _jsx(DismissableLayer, { open: open, onDismiss: close, disableEscapeKeyDown: true, disableOutsidePointerDown: true, children: _jsx(FocusScope, { active: open, trapped: true, children: _jsx("div", { ...props, ref: ref, id: contentId, role: "alertdialog", "aria-modal": "true", "aria-describedby": describedBy, "aria-labelledby": labelledBy, className: cn("zvk-ui-alert-dialog__content", className), "data-state": open ? "open" : "closed", children: children }) }) })] }));
 }
 function AlertDialogTitle({ className, ref, ...props }) {
     const { registerTitle, titleId } = useAlertDialogContext("AlertDialog.Title");
     const id = props.id ?? titleId;
     React.useLayoutEffect(() => registerTitle(id), [id, registerTitle]);
-    return _jsx("h2", { ...props, ref: ref, id: id, className: cn("liano-alert-dialog__title", className) });
+    return _jsx("h2", { ...props, ref: ref, id: id, className: cn("zvk-ui-alert-dialog__title", className) });
 }
 function AlertDialogDescription({ className, ref, ...props }) {
     const { descriptionId, registerDescription } = useAlertDialogContext("AlertDialog.Description");
     const id = props.id ?? descriptionId;
     React.useLayoutEffect(() => registerDescription(id), [id, registerDescription]);
-    return _jsx("p", { ...props, ref: ref, id: id, className: cn("liano-alert-dialog__description", className) });
+    return _jsx("p", { ...props, ref: ref, id: id, className: cn("zvk-ui-alert-dialog__description", className) });
 }
 function AlertDialogFooter({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-alert-dialog__footer", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-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("zvk-ui-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("zvk-ui-alert-dialog__button", className), onClick: composeEventHandlers(onClick, handleClick) }));
 }
 export const AlertDialog = Object.assign(AlertDialogRoot, {
     Action: AlertDialogCloseButton,

package/dist/components/avatar/avatar.js

@@ -18,5 +18,5 @@ export function Avatar({ alt, className, fallback, name, ref, shape = "circle",
     React.useEffect(() => {
         setImageFailed(false);
     }, [src]);
-    return (_jsx("span", { ...props, ref: ref, className: cn("liano-avatar", className), "data-shape": shape, "data-size": size, children: showImage ? (_jsx("img", { alt: alt ?? name ?? "", className: "liano-avatar__image", onError: () => setImageFailed(true), src: src })) : (_jsx("span", { "aria-hidden": fallbackContent ? undefined : "true", className: "liano-avatar__fallback", children: fallbackContent })) }));
+    return (_jsx("span", { ...props, ref: ref, className: cn("zvk-ui-avatar", className), "data-shape": shape, "data-size": size, children: showImage ? (_jsx("img", { alt: alt ?? name ?? "", className: "zvk-ui-avatar__image", onError: () => setImageFailed(true), src: src })) : (_jsx("span", { "aria-hidden": fallbackContent ? undefined : "true", className: "zvk-ui-avatar__fallback", children: fallbackContent })) }));
 }

package/dist/components/badge/badge.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
 export function Badge({ className, ref, size = "sm", tone = "neutral", variant = "soft", ...props }) {
-    return (_jsx("span", { ...props, ref: ref, className: cn("liano-badge", className), "data-size": size, "data-tone": tone, "data-variant": variant }));
+    return (_jsx("span", { ...props, ref: ref, className: cn("zvk-ui-badge", className), "data-size": size, "data-tone": tone, "data-variant": variant }));
 }

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "../../utils/cn.js";
 function BreadcrumbsRoot({ className, children, label = "Breadcrumb", separator = "/", ref, ...props }) {
     const items = React.Children.toArray(children).filter(React.isValidElement);
-    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("liano-breadcrumbs", className), children: _jsx("ol", { className: "liano-breadcrumbs__list", children: items.map((item, index) => (_jsx(Breadcrumbs.Item, { ...item.props, hasSeparator: index < items.length - 1, separator: separator }, item.key))) }) }));
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("zvk-ui-breadcrumbs", className), children: _jsx("ol", { className: "zvk-ui-breadcrumbs__list", children: items.map((item, index) => (_jsx(Breadcrumbs.Item, { ...item.props, hasSeparator: index < items.length - 1, separator: separator }, item.key))) }) }));
 }
 function BreadcrumbsItem({ children, className, current, href, hasSeparator = false, linkProps = {}, ref, separator = "/", ...props }) {
     const renderedSeparator = React.isValidElement(separator)
@@ -12,7 +12,7 @@ function BreadcrumbsItem({ children, className, current, href, hasSeparator = fa
             "aria-hidden": true
         })
         : React.createElement("span", null, separator);
-    const content = current || !href ? (_jsx("span", { className: "liano-breadcrumbs__text", children: children })) : (_jsx("a", { href: href, ...linkProps, className: cn("liano-breadcrumbs__link", linkProps.className), children: children }));
-    return (_jsxs("li", { ...props, ref: ref, "aria-current": current ? "page" : undefined, className: cn("liano-breadcrumbs__item", className), children: [content, hasSeparator ? (_jsx("span", { "aria-hidden": "true", className: "liano-breadcrumbs__separator", children: renderedSeparator })) : null] }));
+    const content = current || !href ? (_jsx("span", { className: "zvk-ui-breadcrumbs__text", children: children })) : (_jsx("a", { href: href, ...linkProps, className: cn("zvk-ui-breadcrumbs__link", linkProps.className), children: children }));
+    return (_jsxs("li", { ...props, ref: ref, "aria-current": current ? "page" : undefined, className: cn("zvk-ui-breadcrumbs__item", className), children: [content, hasSeparator ? (_jsx("span", { "aria-hidden": "true", className: "zvk-ui-breadcrumbs__separator", children: renderedSeparator })) : null] }));
 }
 export const Breadcrumbs = Object.assign(BreadcrumbsRoot, { Item: BreadcrumbsItem });

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,56 @@
 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 }) {
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref !== undefined && ref !== null) {
+                ref.current = node;
+            }
+        }
+    };
+}
+export function Button({ asChild = false, children, className, disabled, leadingIcon, loading = false, ref, size = "md", trailingIcon, type = "button", variant = "primary", ...props }) {
     const isDisabled = disabled || loading;
-    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] }));
+    const suppressDisabledActivation = React.useCallback((event) => {
+        if (!isDisabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }, [isDisabled]);
+    if (asChild && isDisabled) {
+        if (!React.isValidElement(children)) {
+            throw new Error("Button asChild requires a single valid React element child.");
+        }
+        const child = children;
+        const childProps = child.props;
+        const disabledChildProps = {
+            ...childProps,
+            ...props,
+            ref: composeRefs(childProps.ref, ref),
+            "aria-busy": loading ? true : undefined,
+            "aria-disabled": true,
+            className: cn("zvk-ui-button", className, childProps.className),
+            "data-disabled": "true",
+            "data-loading": loading ? "true" : undefined,
+            "data-size": size,
+            "data-variant": variant,
+            onClick: suppressDisabledActivation,
+            onClickCapture: suppressDisabledActivation,
+            onKeyDown: suppressDisabledActivation,
+            onKeyDownCapture: suppressDisabledActivation,
+            tabIndex: -1
+        };
+        return React.cloneElement(child, disabledChildProps);
+    }
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-busy": loading ? true : undefined, "aria-disabled": isDisabled ? true : undefined, className: cn("zvk-ui-button", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, "data-size": size, "data-variant": variant, onClickCapture: suppressDisabledActivation, onKeyDownCapture: suppressDisabledActivation, tabIndex: isDisabled ? -1 : undefined, children: children }));
+    }
+    return (_jsxs("button", { ...props, ref: ref, "aria-busy": loading ? true : undefined, className: cn("zvk-ui-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: "zvk-ui-button__spinner", children: _jsx(Spinner, { size: "sm" }) })) : null, leadingIcon ? (_jsx("span", { "aria-hidden": "true", className: "zvk-ui-button__icon", children: leadingIcon })) : null, _jsx("span", { className: "zvk-ui-button__content", children: children }), trailingIcon ? (_jsx("span", { "aria-hidden": "true", className: "zvk-ui-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("zvk-ui-calendar", classNames?.months, classNames?.month, className), onKeyDown: handleKeyDown, children: [_jsxs("div", { className: cn("zvk-ui-calendar__header", classNames?.caption, classNames?.nav), children: [_jsx("button", { "aria-label": "Previous month", className: cn("zvk-ui-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("zvk-ui-calendar__heading", classNames?.caption_label), id: headingId, children: monthLabel }), _jsx("button", { "aria-label": "Next month", className: cn("zvk-ui-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("zvk-ui-calendar__grid", classNames?.table), role: "grid", children: [_jsx("div", { className: cn("zvk-ui-calendar__weekdays", classNames?.head_row), role: "row", children: weekdays.map((weekday) => (_jsx("span", { className: cn("zvk-ui-calendar__weekday", classNames?.head_cell), role: "columnheader", children: weekday }, weekday))) }), Array.from({ length: 6 }, (_, rowIndex) => (_jsx("div", { className: cn("zvk-ui-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("zvk-ui-calendar__cell", classNames?.cell), role: "gridcell", children: _jsx("span", { "aria-hidden": "true", className: cn("zvk-ui-calendar__day", classNames?.day, classNames?.day_outside), "data-outside-month": "true" }) }, dateKey));
+                            }
+                            return (_jsx("span", { className: cn("zvk-ui-calendar__cell", classNames?.cell), role: "gridcell", children: _jsx("button", { "aria-label": getDayLabel(date, locale), "aria-pressed": selectedDay, className: cn("zvk-ui-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/card/card.d.ts

@@ -15,17 +15,22 @@ export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement>
 export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
     ref?: React.Ref<HTMLParagraphElement>;
 }
+export interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
 declare function CardRoot({ className, padding, ref, variant, ...props }: CardProps): React.JSX.Element;
 declare function CardHeader({ className, ref, ...props }: CardSlotProps): React.JSX.Element;
 declare function CardTitle({ className, ref, ...props }: CardTitleProps): React.JSX.Element;
 declare function CardDescription({ className, ref, ...props }: CardDescriptionProps): React.JSX.Element;
 declare function CardContent({ className, ref, ...props }: CardSlotProps): React.JSX.Element;
 declare function CardFooter({ className, ref, ...props }: CardSlotProps): React.JSX.Element;
+declare function CardAction({ className, ref, ...props }: CardActionProps): React.JSX.Element;
 export declare const Card: typeof CardRoot & {
     Header: typeof CardHeader;
     Title: typeof CardTitle;
     Description: typeof CardDescription;
     Content: typeof CardContent;
     Footer: typeof CardFooter;
+    Action: typeof CardAction;
 };
 export {};

package/dist/components/card/card.js

@@ -2,27 +2,31 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.js";
 function CardRoot({ className, padding = "md", ref, variant = "elevated", ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-card", className), "data-padding": padding, "data-variant": variant });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-card", className), "data-padding": padding, "data-variant": variant });
 }
 function CardHeader({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-card__header", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-card__header", className) });
 }
 function CardTitle({ className, ref, ...props }) {
-    return _jsx("h3", { ...props, ref: ref, className: cn("liano-card__title", className) });
+    return _jsx("h3", { ...props, ref: ref, className: cn("zvk-ui-card__title", className) });
 }
 function CardDescription({ className, ref, ...props }) {
-    return _jsx("p", { ...props, ref: ref, className: cn("liano-card__description", className) });
+    return _jsx("p", { ...props, ref: ref, className: cn("zvk-ui-card__description", className) });
 }
 function CardContent({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-card__content", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-card__content", className) });
 }
 function CardFooter({ className, ref, ...props }) {
-    return _jsx("div", { ...props, ref: ref, className: cn("liano-card__footer", className) });
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-card__footer", className) });
+}
+function CardAction({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("zvk-ui-card__action", className) });
 }
 export const Card = Object.assign(CardRoot, {
     Header: CardHeader,
     Title: CardTitle,
     Description: CardDescription,
     Content: CardContent,
-    Footer: CardFooter
+    Footer: CardFooter,
+    Action: CardAction
 });

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

@@ -1,2 +1,2 @@
 export { Card } from "./card.js";
-export type { CardDescriptionProps, CardPadding, CardProps, CardSlotProps, CardTitleProps, CardVariant } from "./card.js";
+export type { CardActionProps, CardDescriptionProps, CardPadding, CardProps, CardSlotProps, CardTitleProps, CardVariant } from "./card.js";