@zvk/ui 0.1.0

package/LICENSE.md

@@ -0,0 +1,26 @@
+# Free Use, No Redistribution License
+Copyright (c) 2026 Brandon Schabel. All rights reserved.
+This software package is proprietary and is not open source.
+## Permission Granted
+You may install and use this package for free in your own personal,
+internal, or commercial applications.
+You may import, compile, bundle, and run this package as part of an application
+you are developing.
+## Restrictions
+You may not redistribute, republish, resell, sublicense, mirror, host, or make
+this package available as a standalone package, source code package, package
+registry entry, archive, fork, or competing component library.
+You may not claim ownership of this package or remove copyright, license,
+or attribution notices.
+You may not create or distribute modified versions of this package without
+written permission from the copyright holder.
+## Applications Built With This Package
+You may distribute applications that use this package, provided that this
+package is not distributed as a standalone reusable library or component kit.
+## No Warranty
+This software is provided "as is", without warranty of any kind, express or
+implied. The copyright holder is not liable for any claim, damages, or other
+liability arising from use of the software.
+## Future Licensing
+The copyright holder may release future versions of this package under a
+different license, including an open-source license.

package/README.md

@@ -0,0 +1,31 @@
+# @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
+import { Button } from "@zvk/ui/button";
+import { Card } from "@zvk/ui/card";
+import "@zvk/ui/styles.css";
+```
+
+## Package Policy
+
+- Runtime dependencies stay empty: `dependencies: {}`.
+- 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.
+
+## First Slice
+
+The initial build includes Button, IconButton, Badge, Card, Separator, Spinner, Skeleton, Field, Input, and the hooks/utilities named in the checked-in plans.
+
+## License
+
+This package is free to use but is not open source yet.
+You may use it in personal, internal, or commercial applications, but you may
+not redistribute, republish, resell, fork, mirror, or repackage it as a standalone
+library or competing component system.
+See [LICENSE.md](./LICENSE.md) for details.

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+export type AccordionType = "single" | "multiple";
+export type AccordionValue = string | readonly string[];
+interface AccordionBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    collapsible?: boolean;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface AccordionSingleProps extends AccordionBaseProps {
+    type?: "single";
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export interface AccordionMultipleProps extends AccordionBaseProps {
+    type: "multiple";
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: readonly string[]) => void;
+}
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    forceMount?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function AccordionRoot({ children, className, collapsible, defaultValue, onValueChange, disabled, ref, type, value, ...props }: AccordionProps): React.JSX.Element;
+declare function AccordionItem({ className, children, disabled, ref, value, ...props }: AccordionItemProps): React.JSX.Element;
+declare function AccordionTrigger({ className, onClick, onKeyDown, ref, type, ...props }: AccordionTriggerProps): React.JSX.Element;
+declare function AccordionContent({ className, forceMount, ref, ...props }: AccordionContentProps): React.JSX.Element | null;
+export declare const Accordion: typeof AccordionRoot & {
+    Item: typeof AccordionItem;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
+};
+export {};

package/dist/components/accordion/accordion.js

@@ -0,0 +1,207 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { cn } from "../../utils/cn.js";
+const AccordionRootContext = React.createContext(null);
+const AccordionItemContext = React.createContext(null);
+function useAccordionRootContext(calledBy) {
+    const context = React.useContext(AccordionRootContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within an <Accordion />`);
+    }
+    return context;
+}
+function useAccordionItemContext(calledBy) {
+    const context = React.useContext(AccordionItemContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within an <Accordion.Item />`);
+    }
+    return context;
+}
+function getValueIsOpen(type, values, value) {
+    if (type === "multiple") {
+        return Array.isArray(values) && values.includes(value);
+    }
+    return typeof values === "string" && values === value;
+}
+function toggleValue({ type, currentValue, itemValue, collapsible }) {
+    if (type === "multiple") {
+        const items = Array.isArray(currentValue) ? currentValue : [];
+        if (items.includes(itemValue)) {
+            return items.filter((item) => item !== itemValue);
+        }
+        return [...items, itemValue];
+    }
+    if (currentValue === itemValue) {
+        return collapsible ? "" : itemValue;
+    }
+    return itemValue;
+}
+function getNextEnabledTriggerIndex(currentIndex, direction, triggers) {
+    if (triggers.length === 0) {
+        return -1;
+    }
+    for (let step = 1; step <= triggers.length; step += 1) {
+        const nextIndex = (currentIndex + step * direction + triggers.length) % triggers.length;
+        if (!triggers[nextIndex]?.disabled) {
+            return nextIndex;
+        }
+    }
+    return currentIndex;
+}
+function getFirstEnabledTriggerIndex(triggers) {
+    return triggers.findIndex((trigger) => !trigger.disabled);
+}
+function getLastEnabledTriggerIndex(triggers) {
+    for (let index = triggers.length - 1; index >= 0; index -= 1) {
+        if (!triggers[index]?.disabled) {
+            return index;
+        }
+    }
+    return -1;
+}
+function AccordionRoot({ children, className, collapsible = false, defaultValue, onValueChange, disabled = false, ref, type = "single", value, ...props }) {
+    const triggerRegistry = React.useRef(new Map());
+    const triggerOrder = React.useRef([]);
+    const defaultForType = type === "multiple" && Array.isArray(defaultValue)
+        ? defaultValue
+        : type === "single" && typeof defaultValue === "string"
+            ? defaultValue
+            : type === "multiple"
+                ? []
+                : "";
+    const [currentValue, setCurrentValue] = useControllableState({
+        ...(value !== undefined ? { value: value } : {}),
+        defaultValue: defaultForType,
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const registerTrigger = React.useCallback((triggerValue, triggerRef, isDisabled) => {
+        if (!triggerRegistry.current.has(triggerValue)) {
+            triggerOrder.current.push(triggerValue);
+        }
+        triggerRegistry.current.set(triggerValue, {
+            ref: triggerRef,
+            disabled: isDisabled
+        });
+    }, []);
+    const unregisterTrigger = React.useCallback((triggerValue) => {
+        triggerRegistry.current.delete(triggerValue);
+        triggerOrder.current = triggerOrder.current.filter((registeredValue) => registeredValue !== triggerValue);
+    }, []);
+    const getOrderedTriggers = React.useCallback(() => triggerOrder.current
+        .map((registeredValue) => ({
+        value: registeredValue,
+        ...triggerRegistry.current.get(registeredValue)
+    }))
+        .filter((trigger) => Boolean(trigger.ref) && trigger.ref !== null), []);
+    return (_jsx(AccordionRootContext.Provider, { value: {
+            value: currentValue,
+            setValue: setCurrentValue,
+            type,
+            collapsible,
+            disabled,
+            registerTrigger,
+            unregisterTrigger,
+            getOrderedTriggers
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-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();
+    const rootContext = useAccordionRootContext("Accordion.Item");
+    const triggerId = `${generatedId}-trigger`;
+    const defaultContentId = `${generatedId}-content`;
+    const [contentId, setContentId] = React.useState(defaultContentId);
+    return (_jsx(AccordionItemContext.Provider, { value: {
+            value,
+            disabled: disabled || rootContext.disabled,
+            triggerId,
+            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 }) }));
+}
+function AccordionTrigger({ className, onClick, onKeyDown, ref, type = "button", ...props }) {
+    const rootContext = useAccordionRootContext("Accordion.Trigger");
+    const itemContext = useAccordionItemContext("Accordion.Trigger");
+    const isItemOpen = getValueIsOpen(rootContext.type, rootContext.value, itemContext.value);
+    const isDisabled = rootContext.disabled || itemContext.disabled;
+    const triggerRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        rootContext.registerTrigger(itemContext.value, triggerRef.current, isDisabled);
+        return () => rootContext.unregisterTrigger(itemContext.value);
+    }, [itemContext.value, isDisabled, rootContext]);
+    const moveFocusTo = (nextValue) => {
+        const triggers = rootContext.getOrderedTriggers();
+        const target = triggers.find((trigger) => trigger.value === nextValue);
+        target?.ref?.focus();
+    };
+    const handleKeyDown = (event) => {
+        if (isDisabled || rootContext.disabled) {
+            return;
+        }
+        const triggers = rootContext.getOrderedTriggers();
+        const currentIndex = triggers.findIndex((trigger) => trigger.value === itemContext.value);
+        if (currentIndex === -1) {
+            return;
+        }
+        let nextIndex = -1;
+        if (event.key === "ArrowDown") {
+            nextIndex = getNextEnabledTriggerIndex(currentIndex, 1, triggers);
+        }
+        else if (event.key === "ArrowUp") {
+            nextIndex = getNextEnabledTriggerIndex(currentIndex, -1, triggers);
+        }
+        else if (event.key === "Home") {
+            nextIndex = getFirstEnabledTriggerIndex(triggers);
+        }
+        else if (event.key === "End") {
+            nextIndex = getLastEnabledTriggerIndex(triggers);
+        }
+        if (nextIndex >= 0) {
+            event.preventDefault();
+            moveFocusTo(triggers[nextIndex]?.value);
+        }
+    };
+    return (_jsx("button", { ...props, ref: (node) => {
+            triggerRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            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, () => {
+            if (!isDisabled && !rootContext.disabled) {
+                rootContext.setValue(toggleValue({
+                    type: rootContext.type,
+                    currentValue: rootContext.value,
+                    itemValue: itemContext.value,
+                    collapsible: rootContext.collapsible
+                }));
+            }
+        }), onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown, { checkDefaultPrevented: false }), type: type }));
+}
+function AccordionContent({ className, forceMount = false, ref, ...props }) {
+    const rootContext = useAccordionRootContext("Accordion.Content");
+    const itemContext = useAccordionItemContext("Accordion.Content");
+    const { defaultContentId, setContentId } = itemContext;
+    const isItemOpen = getValueIsOpen(rootContext.type, rootContext.value, itemContext.value);
+    const resolvedId = props.id ?? defaultContentId;
+    React.useLayoutEffect(() => {
+        setContentId(resolvedId);
+        return () => {
+            setContentId(defaultContentId);
+        };
+    }, [defaultContentId, resolvedId, setContentId]);
+    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 }));
+}
+export const Accordion = Object.assign(AccordionRoot, {
+    Item: AccordionItem,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent
+});

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

@@ -0,0 +1,2 @@
+export { Accordion } from "./accordion.js";
+export type { AccordionType, AccordionValue, AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps } from "./accordion.js";

package/dist/components/accordion/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Accordion } from "./accordion.js";

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type AlertTone = "info" | "success" | "warning" | "destructive" | "neutral";
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    tone?: AlertTone;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    role?: React.AriaRole;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+export interface AlertDescriptionProps 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;
+export declare const Alert: typeof AlertRoot & {
+    Title: typeof AlertTitle;
+    Description: typeof AlertDescription;
+};
+export {};

package/dist/components/alert/alert.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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] })] }));
+}
+function AlertTitle({ className, ref, ...props }) {
+    return _jsx("h3", { ...props, ref: ref, className: cn("liano-alert__title", className) });
+}
+function AlertDescription({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-alert__description", className) });
+}
+export const Alert = Object.assign(AlertRoot, {
+    Title: AlertTitle,
+    Description: AlertDescription
+});

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

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

package/dist/components/alert/index.js

@@ -0,0 +1 @@
+export { Alert } from "./alert.js";

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+export interface AlertDialogProps extends React.HTMLAttributes<HTMLDivElement> {
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface AlertDialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface AlertDialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface AlertDialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+export interface AlertDialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+export interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface AlertDialogActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface AlertDialogCancelProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+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 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;
+type AlertDialogComponent = typeof AlertDialogRoot & {
+    Action: typeof AlertDialogCloseButton;
+    Cancel: typeof AlertDialogCloseButton;
+    Content: typeof AlertDialogContent;
+    Description: typeof AlertDialogDescription;
+    Footer: typeof AlertDialogFooter;
+    Title: typeof AlertDialogTitle;
+    Trigger: typeof AlertDialogTrigger;
+};
+export declare const AlertDialog: AlertDialogComponent;
+export {};

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

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+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";
+const AlertDialogContext = React.createContext(null);
+function useAlertDialogContext(calledBy) {
+    const context = React.useContext(AlertDialogContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used inside an <AlertDialog />`);
+    }
+    return context;
+}
+function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function AlertDialogRoot({ children, className, defaultOpen = false, onOpenChange, open: openProp, ref, ...props }) {
+    const [open, setOpen] = useControllableState({
+        ...(openProp !== undefined ? { value: openProp } : {}),
+        defaultValue: defaultOpen,
+        ...(onOpenChange ? { onChange: onOpenChange } : {})
+    });
+    const instanceId = React.useId();
+    const triggerRef = React.useRef(null);
+    const [labelledBy, setLabelledBy] = React.useState();
+    const [describedBy, setDescribedBy] = React.useState();
+    const registerTitle = React.useCallback((id) => {
+        setLabelledBy(id);
+        return () => setLabelledBy((current) => (current === id ? undefined : current));
+    }, []);
+    const registerDescription = React.useCallback((id) => {
+        setDescribedBy(id);
+        return () => setDescribedBy((current) => (current === id ? undefined : current));
+    }, []);
+    React.useLayoutEffect(() => {
+        if (!open) {
+            return;
+        }
+        lockScroll();
+        return () => unlockScroll();
+    }, [open]);
+    return (_jsx(AlertDialogContext.Provider, { value: {
+            close: () => setOpen(false),
+            contentId: `${instanceId}-content`,
+            descriptionId: `${instanceId}-description`,
+            describedBy,
+            labelledBy,
+            open,
+            registerDescription,
+            registerTitle,
+            setOpen,
+            titleId: `${instanceId}-title`,
+            triggerRef
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-alert-dialog", className), "data-state": open ? "open" : "closed", children: children }) }));
+}
+function AlertDialogTrigger({ className, disabled, onClick, ref, type = "button", ...props }) {
+    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);
+            }
+        }) }));
+}
+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 }) }) })] }));
+}
+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) });
+}
+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) });
+}
+function AlertDialogFooter({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-alert-dialog__footer", className) });
+}
+function AlertDialogCloseButton({ className, onClick, ref, type = "button", ...props }) {
+    const { close } = useAlertDialogContext("AlertDialog.Action");
+    return (_jsx("button", { ...props, ref: ref, type: type, className: cn("liano-alert-dialog__button", className), onClick: composeEventHandlers(onClick, close) }));
+}
+export const AlertDialog = Object.assign(AlertDialogRoot, {
+    Action: AlertDialogCloseButton,
+    Cancel: AlertDialogCloseButton,
+    Content: AlertDialogContent,
+    Description: AlertDialogDescription,
+    Footer: AlertDialogFooter,
+    Title: AlertDialogTitle,
+    Trigger: AlertDialogTrigger
+});

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

@@ -0,0 +1,2 @@
+export { AlertDialog } from "./alert-dialog.js";
+export type { AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogProps, AlertDialogTitleProps, AlertDialogTriggerProps } from "./alert-dialog.js";

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

@@ -0,0 +1,2 @@
+"use client";
+export { AlertDialog } from "./alert-dialog.js";

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type AvatarSize = "sm" | "md" | "lg";
+export type AvatarShape = "circle" | "square";
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    src?: string;
+    alt?: string;
+    name?: string;
+    fallback?: React.ReactNode;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    ref?: React.Ref<HTMLSpanElement>;
+}
+export declare function getAvatarInitials(name: string | undefined): string;
+export declare function Avatar({ alt, className, fallback, name, ref, shape, size, src, ...props }: AvatarProps): React.JSX.Element;

package/dist/components/avatar/avatar.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+export function getAvatarInitials(name) {
+    const words = (name ?? "").trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+        return "";
+    }
+    const first = words[0]?.[0] ?? "";
+    const last = words.length > 1 ? words[words.length - 1]?.[0] ?? "" : "";
+    return `${first}${last}`.toUpperCase();
+}
+export function Avatar({ alt, className, fallback, name, ref, shape = "circle", size = "md", src, ...props }) {
+    const [imageFailed, setImageFailed] = React.useState(false);
+    const showImage = Boolean(src) && !imageFailed;
+    const fallbackContent = fallback ?? getAvatarInitials(name);
+    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 })) }));
+}

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

@@ -0,0 +1,2 @@
+export { Avatar, getAvatarInitials } from "./avatar.js";
+export type { AvatarProps, AvatarShape, AvatarSize } from "./avatar.js";

package/dist/components/avatar/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Avatar, getAvatarInitials } from "./avatar.js";

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type BadgeTone = "neutral" | "primary" | "success" | "warning" | "destructive" | "info";
+export type BadgeVariant = "soft" | "solid" | "outline";
+export type BadgeSize = "sm" | "md";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    ref?: React.Ref<HTMLSpanElement>;
+}
+export declare function Badge({ className, ref, size, tone, variant, ...props }: BadgeProps): React.JSX.Element;

package/dist/components/badge/badge.js

@@ -0,0 +1,6 @@
+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 }));
+}

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

@@ -0,0 +1,2 @@
+export { Badge } from "./badge.js";
+export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant } from "./badge.js";

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from "./badge.js";

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    label?: string;
+    separator?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+}
+export interface BreadcrumbsItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    children?: React.ReactNode;
+    href?: string;
+    current?: boolean;
+    linkProps?: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children">;
+    ref?: React.Ref<HTMLLIElement>;
+}
+interface BreadcrumbsItemInternalProps extends BreadcrumbsItemProps {
+    hasSeparator?: boolean;
+    separator?: React.ReactNode;
+}
+declare function BreadcrumbsRoot({ className, children, label, separator, ref, ...props }: BreadcrumbsProps): React.JSX.Element;
+declare function BreadcrumbsItem({ children, className, current, href, hasSeparator, linkProps, ref, separator, ...props }: BreadcrumbsItemInternalProps): React.JSX.Element;
+export declare const Breadcrumbs: typeof BreadcrumbsRoot & {
+    Item: typeof BreadcrumbsItem;
+};
+export {};