@zvk/ui 0.1.0

package/dist/components/menubar/menubar.js

@@ -0,0 +1,214 @@
+"use client";
+import { jsx as _jsx } 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 { createCollection } from "../../internal/collection/index.js";
+import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { Portal } from "../../internal/portal/index.js";
+const MenubarContext = React.createContext(null);
+const MenuContext = React.createContext(null);
+function useMenubarContext(calledBy) {
+    const context = React.useContext(MenubarContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used inside a <Menubar />`);
+    }
+    return context;
+}
+function useMenuContext(calledBy) {
+    const context = React.useContext(MenuContext);
+    if (context === null) {
+        throw new Error(`"${calledBy}" must be used inside a <Menubar.Menu />`);
+    }
+    return context;
+}
+function textFromNode(node) {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(textFromNode).join("");
+    }
+    return "";
+}
+function focusRecord(records, index) {
+    const enabled = records.filter((record) => record.data.disabled !== true && record.data.ref !== null);
+    if (enabled.length === 0) {
+        return;
+    }
+    const wrapped = ((index % enabled.length) + enabled.length) % enabled.length;
+    enabled[wrapped]?.data.ref?.focus();
+}
+function activeIndex(records) {
+    const enabled = records.filter((record) => record.data.disabled !== true && record.data.ref !== null);
+    return enabled.findIndex((record) => record.data.ref === document.activeElement);
+}
+function MenubarRoot({ children, className, defaultValue, onKeyDown, onValueChange, ref, value, ...props }) {
+    const [openValue, setOpenValue] = useControllableState({
+        ...(value !== undefined ? { value } : {}),
+        defaultValue,
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const triggerCollection = React.useRef(createCollection());
+    const registerTrigger = React.useCallback((id, item) => {
+        triggerCollection.current.register(id, item);
+    }, []);
+    const unregisterTrigger = React.useCallback((id) => {
+        triggerCollection.current.unregister(id);
+    }, []);
+    const getTriggers = React.useCallback(() => triggerCollection.current.items(), []);
+    const contextValue = React.useMemo(() => ({
+        getTriggers,
+        openValue,
+        registerTrigger,
+        setOpenValue,
+        unregisterTrigger
+    }), [getTriggers, openValue, registerTrigger, setOpenValue, unregisterTrigger]);
+    return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx("div", { ...props, ref: ref, role: "menubar", className: cn("liano-menubar", className), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+                const triggers = getTriggers();
+                const index = activeIndex(triggers);
+                if (event.key === "ArrowRight") {
+                    event.preventDefault();
+                    focusRecord(triggers, index + 1);
+                }
+                if (event.key === "ArrowLeft") {
+                    event.preventDefault();
+                    focusRecord(triggers, index - 1);
+                }
+            }), children: children }) }));
+}
+function MenubarMenu({ children, value }) {
+    const menubar = useMenubarContext("Menubar.Menu");
+    const itemCollection = React.useRef(createCollection());
+    const [label, setLabel] = React.useState(value);
+    const generatedId = React.useId();
+    const triggerId = `${generatedId}-trigger`;
+    const contentId = `${generatedId}-content`;
+    const open = menubar.openValue === value;
+    const registerItem = React.useCallback((id, item) => {
+        itemCollection.current.register(id, item);
+    }, []);
+    const unregisterItem = React.useCallback((id) => {
+        itemCollection.current.unregister(id);
+    }, []);
+    const getItems = React.useCallback(() => itemCollection.current.items(), []);
+    const contextValue = React.useMemo(() => ({
+        contentId,
+        getItems,
+        label,
+        open,
+        registerItem,
+        setLabel,
+        triggerId,
+        value,
+        unregisterItem
+    }), [contentId, getItems, label, open, registerItem, triggerId, value, unregisterItem]);
+    React.useLayoutEffect(() => {
+        if (!open) {
+            return;
+        }
+        focusRecord(getItems(), 0);
+    }, [getItems, open]);
+    return _jsx(MenuContext.Provider, { value: contextValue, children: children });
+}
+function MenubarTrigger({ children, className, disabled, onClick, onKeyDown, ref, type = "button", ...props }) {
+    const menubar = useMenubarContext("Menubar.Trigger");
+    const menu = useMenuContext("Menubar.Trigger");
+    const triggerRef = React.useRef(null);
+    const itemId = React.useId();
+    const label = textFromNode(children) || menu.value;
+    React.useLayoutEffect(() => {
+        menu.setLabel(label);
+        menubar.registerTrigger(itemId, { disabled, ref: triggerRef.current, value: menu.value });
+        return () => menubar.unregisterTrigger(itemId);
+    }, [disabled, itemId, label, menu, menubar]);
+    return (_jsx("button", { ...props, ref: (node) => {
+            triggerRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, id: menu.triggerId, type: type, role: "menuitem", disabled: disabled, "aria-controls": menu.contentId, "aria-expanded": menu.open ? "true" : "false", "aria-haspopup": "menu", className: cn("liano-menubar__trigger", className), "data-state": menu.open ? "open" : "closed", onClick: composeEventHandlers(onClick, () => {
+            if (!disabled) {
+                menubar.setOpenValue(menu.open ? undefined : menu.value);
+            }
+        }), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                menubar.setOpenValue(menu.value);
+            }
+        }), children: children }));
+}
+function MenubarContent({ children, className, onKeyDown, ref, ...props }) {
+    const menubar = useMenubarContext("Menubar.Content");
+    const menu = useMenuContext("Menubar.Content");
+    if (!menu.open) {
+        return null;
+    }
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: menu.open, onDismiss: () => menubar.setOpenValue(undefined), children: _jsx("div", { ...props, ref: ref, id: menu.contentId, role: "menu", "aria-label": menu.label, "aria-labelledby": menu.triggerId, className: cn("liano-menubar__content", className), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+                    const items = menu.getItems();
+                    const index = activeIndex(items);
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        focusRecord(items, index + 1);
+                        return;
+                    }
+                    if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        focusRecord(items, index - 1);
+                        return;
+                    }
+                    if (event.key === "Escape") {
+                        menubar.setOpenValue(undefined);
+                    }
+                }), children: children }) }) }));
+}
+function MenubarItem({ children, className, disabled, onClick, onKeyDown, onSelect, ref, type = "button", ...props }) {
+    const menubar = useMenubarContext("Menubar.Item");
+    const menu = useMenuContext("Menubar.Item");
+    const { getItems, open, registerItem, unregisterItem } = menu;
+    const itemId = React.useId();
+    const itemRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        registerItem(itemId, { disabled, ref: itemRef.current });
+        const firstEnabled = getItems().find((item) => item.data.disabled !== true && item.data.ref !== null);
+        if (open && firstEnabled?.id === itemId) {
+            itemRef.current?.focus();
+        }
+        return () => unregisterItem(itemId);
+    }, [disabled, getItems, itemId, open, registerItem, unregisterItem]);
+    const select = (event) => {
+        if (disabled) {
+            return;
+        }
+        onSelect?.(event);
+        menubar.setOpenValue(undefined);
+    };
+    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-menubar__item", className), "data-disabled": disabled ? "true" : undefined, onClick: composeEventHandlers(onClick, select), onKeyDown: composeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                select(event);
+            }
+        }), children: children }));
+}
+function MenubarSeparator({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, role: "separator", "aria-hidden": "true", className: cn("liano-menubar__separator", className) });
+}
+export const Menubar = Object.assign(MenubarRoot, {
+    Content: MenubarContent,
+    Item: MenubarItem,
+    Menu: MenubarMenu,
+    Separator: MenubarSeparator,
+    Trigger: MenubarTrigger
+});

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

@@ -0,0 +1,2 @@
+export { Pagination } from "./pagination.js";
+export type { PaginationProps, PaginationRangeItem } from "./pagination.js";

package/dist/components/pagination/index.js

@@ -0,0 +1 @@
+export { Pagination } from "./pagination.js";

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+    page: number;
+    pageCount: number;
+    onPageChange?: (page: number) => void;
+    getPageHref?: (page: number) => string;
+    siblingCount?: number;
+    boundaryCount?: number;
+    label?: string;
+    previousLabel?: React.ReactNode;
+    nextLabel?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+}
+export type PaginationRangeItem = number | "ellipsis-start" | "ellipsis-end";
+export declare function getPaginationRange({ page, pageCount, siblingCount, boundaryCount }: {
+    page: number;
+    pageCount: number;
+    siblingCount?: number;
+    boundaryCount?: number;
+}): PaginationRangeItem[];
+export declare function Pagination({ className, label, onPageChange, getPageHref, page, pageCount, siblingCount, boundaryCount, previousLabel, nextLabel, ref, ...props }: PaginationProps): React.JSX.Element;

package/dist/components/pagination/pagination.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const clamp = (value) => (Number.isFinite(value) ? Math.floor(value) : 1);
+const normalizeCount = (value, fallback) => {
+    const normalized = clamp(value ?? fallback);
+    return normalized < 0 ? 0 : normalized;
+};
+function createRange(start, end) {
+    if (end < start) {
+        return [];
+    }
+    return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+export function getPaginationRange({ page, pageCount, siblingCount = 1, boundaryCount = 1 }) {
+    const safePageCount = Math.max(normalizeCount(pageCount, 0), 0);
+    if (safePageCount === 0) {
+        return [];
+    }
+    const safePage = Math.max(1, Math.min(clamp(page), safePageCount));
+    const safeSiblingCount = Math.max(0, normalizeCount(siblingCount, 1));
+    const safeBoundaryCount = Math.max(0, normalizeCount(boundaryCount, 1));
+    const leftBoundaryRange = createRange(1, Math.min(safeBoundaryCount, safePageCount));
+    const rightBoundaryStart = Math.max(safePageCount - safeBoundaryCount + 1, safeBoundaryCount + 1);
+    const rightBoundaryRange = createRange(rightBoundaryStart, safePageCount);
+    const middleStart = Math.max(safePage - safeSiblingCount, 1);
+    const middleEnd = Math.min(safePage + safeSiblingCount, safePageCount);
+    const middleRange = createRange(middleStart, middleEnd);
+    const merged = [...leftBoundaryRange, ...middleRange, ...rightBoundaryRange]
+        .filter((value, index, values) => values.indexOf(value) === index)
+        .sort((a, b) => a - b);
+    const range = [];
+    merged.forEach((value, index) => {
+        const previous = index === 0 ? undefined : merged[index - 1];
+        if (previous === undefined) {
+            range.push(value);
+            return;
+        }
+        if (value - previous === 1) {
+            range.push(value);
+            return;
+        }
+        range.push(previous < safePage ? "ellipsis-start" : "ellipsis-end");
+        range.push(value);
+    });
+    return range;
+}
+function renderPrevious({ hasHrefMode, page, label, pageCount, onPageChange, getPageHref }) {
+    const targetPage = page - 1;
+    if (hasHrefMode && targetPage >= 1) {
+        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(targetPage), children: label }));
+    }
+    if (hasHrefMode && targetPage < 1) {
+        return (_jsx("span", { className: "liano-pagination__item liano-pagination__item--disabled", "aria-hidden": "true", children: label }));
+    }
+    return (_jsx("button", { className: "liano-pagination__item", disabled: targetPage < 1, onClick: () => onPageChange?.(Math.max(1, targetPage)), type: "button", children: label }));
+}
+function renderNext({ hasHrefMode, page, label, pageCount, onPageChange, getPageHref }) {
+    const targetPage = page + 1;
+    if (hasHrefMode && targetPage <= pageCount) {
+        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(targetPage), children: label }));
+    }
+    if (hasHrefMode && targetPage > pageCount) {
+        return (_jsx("span", { className: "liano-pagination__item liano-pagination__item--disabled", "aria-hidden": "true", children: label }));
+    }
+    return (_jsx("button", { className: "liano-pagination__item", disabled: targetPage > pageCount, onClick: () => onPageChange?.(Math.min(pageCount, targetPage)), type: "button", children: label }));
+}
+function renderPageItem({ hasHrefMode, item, page, onPageChange, getPageHref }) {
+    if (item === page) {
+        if (hasHrefMode) {
+            return (_jsx("a", { "aria-current": "page", className: "liano-pagination__item liano-pagination__item--current", href: getPageHref?.(item), children: item }));
+        }
+        return (_jsx("button", { "aria-current": "page", className: "liano-pagination__item liano-pagination__item--current", disabled: true, type: "button", children: item }));
+    }
+    if (hasHrefMode) {
+        return (_jsx("a", { className: "liano-pagination__item", href: getPageHref?.(item), children: item }));
+    }
+    return (_jsx("button", { className: "liano-pagination__item", onClick: () => onPageChange?.(item), type: "button", children: item }));
+}
+export function Pagination({ className, label = "Pagination", onPageChange, getPageHref, page, pageCount, siblingCount = 1, boundaryCount = 1, previousLabel = "Previous", nextLabel = "Next", ref, ...props }) {
+    const safePageCount = Math.max(normalizeCount(pageCount, 1), 0);
+    const safePage = Math.max(1, Math.min(clamp(page), safePageCount || 1));
+    const range = getPaginationRange({ page, pageCount, siblingCount, boundaryCount });
+    const isLinkMode = typeof getPageHref === "function";
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": props["aria-label"] ?? label, className: cn("liano-pagination", className), children: _jsxs("ol", { className: "liano-pagination__list", children: [_jsx("li", { children: renderPrevious({ hasHrefMode: isLinkMode, label: previousLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) }), range.map((item) => (_jsx("li", { children: typeof item === "number" ? (renderPageItem({
+                        getPageHref,
+                        hasHrefMode: isLinkMode,
+                        item,
+                        onPageChange,
+                        page: safePage
+                    })) : (_jsx("span", { "aria-hidden": "true", className: "liano-pagination__ellipsis", children: "\u2026" })) }, `${item}-${typeof item === "number" ? item : item}`))), _jsx("li", { children: renderNext({ hasHrefMode: isLinkMode, label: nextLabel, onPageChange, page: safePage, pageCount: safePageCount, getPageHref }) })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export { Popover } from "./popover.js";
+export type { PopoverContentProps, PopoverProps, PopoverTriggerProps } from "./popover.js";

package/dist/components/popover/index.js

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

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import type { FloatingPlacement } from "../../internal/floating/floating-types.js";
+export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: FloatingPlacement;
+    modal?: false;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    sideOffset?: number;
+    collisionPadding?: number;
+    matchTriggerWidth?: boolean;
+    forceMount?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function PopoverRoot({ children, className, defaultOpen, modal, onOpenChange, open, placement, ref, ...props }: PopoverProps): React.JSX.Element;
+declare function PopoverTrigger({ className, onClick, ref, type, ...props }: PopoverTriggerProps): React.JSX.Element;
+declare function PopoverContent({ className, forceMount, id, ref, sideOffset, collisionPadding, matchTriggerWidth, style, ...props }: PopoverContentProps): React.JSX.Element | null;
+export declare const Popover: typeof PopoverRoot & {
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
+};
+export {};

package/dist/components/popover/popover.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { useDisclosure } from "../../hooks/use-disclosure.js";
+import { cn } from "../../utils/cn.js";
+import { Portal } from "../../internal/portal/index.js";
+import { DismissableLayer } from "../../internal/dismissable-layer/index.js";
+import { useFloatingPosition } from "../../internal/floating/index.js";
+const defaultPositioning = {
+    sideOffset: 0,
+    collisionPadding: 0,
+    matchTriggerWidth: false
+};
+const PopoverContext = React.createContext(null);
+function usePopoverContext(calledBy) {
+    const context = React.useContext(PopoverContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within a <Popover />`);
+    }
+    return context;
+}
+function mergeRef(ref, node) {
+    if (typeof ref === "function") {
+        ref(node);
+        return;
+    }
+    if (ref && "current" in ref) {
+        ref.current = node;
+    }
+}
+function getTransformOrigin(placement) {
+    const [side, align = "center"] = placement.split("-");
+    const anchor = side === "top" ? "bottom" : side === "bottom" ? "top" : side === "left" ? "right" : "left";
+    if (side === "top" || side === "bottom") {
+        if (align === "start") {
+            return `${anchor} left`;
+        }
+        if (align === "end") {
+            return `${anchor} right`;
+        }
+        return `${anchor} center`;
+    }
+    if (align === "start") {
+        return `${anchor} top`;
+    }
+    if (align === "end") {
+        return `${anchor} bottom`;
+    }
+    return `${anchor} center`;
+}
+function getPlacementParts(placement) {
+    const [side, align = "center"] = placement.split("-");
+    return { side, align };
+}
+function PopoverRoot({ children, className, defaultOpen = false, modal = false, onOpenChange, open, placement = "bottom", ref, ...props }) {
+    const defaultContentId = `${React.useId()}-content`;
+    const [contentId, setContentId] = React.useState(defaultContentId);
+    const [contentPositioning, setContentPositioning] = React.useState(defaultPositioning);
+    const updateContentPositioning = React.useCallback((positioning) => {
+        setContentPositioning(positioning);
+    }, []);
+    const { open: isOpen, setOpen } = useDisclosure({
+        ...(open !== undefined ? { open } : {}),
+        defaultOpen,
+        ...(onOpenChange ? { onOpenChange } : {})
+    });
+    const referenceElement = React.useRef(null);
+    const { floatingStyle, floatingRef, referenceRef, placement: resolvedPlacement, updatePosition } = useFloatingPosition({
+        open: isOpen,
+        placement,
+        offset: contentPositioning.sideOffset,
+        collisionPadding: contentPositioning.collisionPadding,
+        matchReferenceWidth: contentPositioning.matchTriggerWidth
+    });
+    const handleRef = React.useCallback((node) => {
+        mergeRef(ref, node);
+    }, [ref]);
+    const setReferenceRef = React.useCallback((node) => {
+        referenceElement.current = node;
+        referenceRef(node);
+    }, [referenceRef]);
+    return (_jsx(PopoverContext.Provider, { value: {
+            contentId,
+            defaultContentId,
+            placement: resolvedPlacement,
+            modal,
+            open: isOpen,
+            setContentId,
+            setOpen,
+            referenceRef: setReferenceRef,
+            referenceElement,
+            floatingRef,
+            floatingStyle,
+            floatingPlacement: resolvedPlacement,
+            updatePosition,
+            updateContentPositioning
+        }, children: _jsx("div", { ...props, ref: handleRef, className: cn("liano-popover", className), "data-state": isOpen ? "open" : "closed", children: children }) }));
+}
+function PopoverTrigger({ className, onClick, ref, type = "button", ...props }) {
+    const context = usePopoverContext("Popover.Trigger");
+    const handleClick = () => {
+        context.setOpen((value) => !value);
+    };
+    const handleRef = React.useCallback((node) => {
+        context.referenceRef(node);
+        mergeRef(ref, node);
+    }, [context.referenceRef, ref]);
+    return (_jsx("button", { ...props, ref: handleRef, type: type, className: cn("liano-popover__trigger", className), "aria-expanded": context.open, "aria-controls": context.contentId, "aria-haspopup": "dialog", "data-state": context.open ? "open" : "closed", onClick: composeEventHandlers(onClick, handleClick) }));
+}
+function PopoverContent({ className, forceMount = false, id, ref, sideOffset = 0, collisionPadding = 0, matchTriggerWidth = false, style, ...props }) {
+    const context = usePopoverContext("Popover.Content");
+    const { defaultContentId, setContentId } = context;
+    const transformOrigin = getTransformOrigin(context.floatingPlacement);
+    const placementParts = getPlacementParts(context.floatingPlacement);
+    const contentId = id ?? defaultContentId;
+    const handleRef = React.useCallback((node) => {
+        context.floatingRef(node);
+        mergeRef(ref, node);
+    }, [context.floatingRef, ref]);
+    const contentStyle = React.useMemo(() => ({
+        ...context.floatingStyle,
+        ...style,
+        "--liano-popover-transform-origin": transformOrigin
+    }), [context.floatingStyle, style, transformOrigin]);
+    React.useLayoutEffect(() => {
+        setContentId(contentId);
+        return () => {
+            setContentId(defaultContentId);
+        };
+    }, [contentId, defaultContentId, setContentId]);
+    const close = () => {
+        context.setOpen(false);
+    };
+    const ignoreTriggerPointerDown = React.useCallback((event) => {
+        const pointerEvent = event.detail;
+        const target = pointerEvent?.target;
+        if (target && context.referenceElement.current?.contains(target)) {
+            event.preventDefault();
+        }
+    }, [context.referenceElement]);
+    React.useEffect(() => {
+        context.updateContentPositioning({
+            sideOffset,
+            collisionPadding,
+            matchTriggerWidth
+        });
+        return () => {
+            context.updateContentPositioning(defaultPositioning);
+        };
+    }, [context.updateContentPositioning, collisionPadding, matchTriggerWidth, sideOffset]);
+    if (!forceMount && !context.open) {
+        return null;
+    }
+    const content = (_jsx("div", { ...props, ref: handleRef, id: contentId, role: "dialog", className: cn("liano-popover__content", className), "data-align": placementParts.align, "data-side": placementParts.side, "data-state": context.open ? "open" : "closed", hidden: context.open ? undefined : true, style: contentStyle }));
+    if (!context.open) {
+        return _jsx(Portal, { children: content });
+    }
+    return (_jsx(Portal, { children: _jsx(DismissableLayer, { open: true, onDismiss: close, modal: context.modal, onPointerDownOutside: ignoreTriggerPointerDown, children: content }) }));
+}
+export const Popover = Object.assign(PopoverRoot, {
+    Trigger: PopoverTrigger,
+    Content: PopoverContent
+});

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

@@ -0,0 +1,2 @@
+export { Progress, getProgressState } from "./progress.js";
+export type { ProgressProps, ProgressSize, ProgressState, ProgressStateInput, ProgressTone } from "./progress.js";

package/dist/components/progress/index.js

@@ -0,0 +1 @@
+export { Progress, getProgressState } from "./progress.js";

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type ProgressSize = "sm" | "md";
+export type ProgressTone = "primary" | "success" | "warning" | "destructive" | "neutral";
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    label?: React.ReactNode;
+    showValue?: boolean;
+    size?: ProgressSize;
+    tone?: ProgressTone;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ProgressState {
+    indeterminate: boolean;
+    max: number;
+    percentage: number | undefined;
+    value: number | undefined;
+}
+export interface ProgressStateInput {
+    max?: number | undefined;
+    value?: number | undefined;
+}
+export declare function getProgressState({ max, value }: ProgressStateInput): ProgressState;
+export declare function Progress({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, label, max, ref, showValue, size, tone, value, ...props }: ProgressProps): React.JSX.Element;

package/dist/components/progress/progress.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+export function getProgressState({ max = 100, value }) {
+    const normalizedMax = Number.isFinite(max) && max > 0 ? max : 1;
+    if (value === undefined || !Number.isFinite(value)) {
+        return {
+            indeterminate: true,
+            max: normalizedMax,
+            percentage: undefined,
+            value: undefined
+        };
+    }
+    const normalizedValue = Math.min(Math.max(value, 0), normalizedMax);
+    return {
+        indeterminate: false,
+        max: normalizedMax,
+        percentage: (normalizedValue / normalizedMax) * 100,
+        value: normalizedValue
+    };
+}
+export function Progress({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, label, max, ref, showValue, size = "md", tone = "primary", value, ...props }) {
+    const state = getProgressState({ max, value });
+    const valueText = state.percentage === undefined ? undefined : `${Math.round(state.percentage)}%`;
+    return (_jsxs("div", { className: "liano-progress-group", children: [label ? _jsx("span", { className: "liano-progress__label", children: label }) : null, _jsx("div", { ...props, ref: ref, "aria-label": ariaLabel ?? (typeof label === "string" ? label : undefined), "aria-labelledby": ariaLabelledBy, "aria-valuemax": state.indeterminate ? undefined : state.max, "aria-valuemin": state.indeterminate ? undefined : 0, "aria-valuenow": state.value, className: cn("liano-progress", className), "data-indeterminate": state.indeterminate ? "true" : undefined, "data-size": size, "data-tone": tone, role: "progressbar", style: {
+                    ...props.style,
+                    "--liano-progress-value": state.percentage === undefined ? undefined : `${state.percentage}%`
+                }, children: _jsx("span", { className: "liano-progress__track", children: _jsx("span", { className: "liano-progress__indicator" }) }) }), showValue && valueText ? _jsx("span", { className: "liano-progress__value", children: valueText }) : null] }));
+}

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroup, RadioGroupItem } from "./radio-group.js";
+export type { RadioGroupItemProps, RadioGroupOption, RadioGroupOrientation, RadioGroupProps, RadioGroupSize } from "./radio-group.js";

package/dist/components/radio-group/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { RadioGroup, RadioGroupItem } from "./radio-group.js";

package/dist/components/radio-group/radio-group.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export type RadioGroupOrientation = "vertical" | "horizontal";
+export type RadioGroupSize = "sm" | "md" | "lg";
+export interface RadioGroupOption {
+    value: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupBaseProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange"> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    invalid?: boolean;
+    orientation?: RadioGroupOrientation;
+    required?: boolean;
+    size?: RadioGroupSize;
+    ref?: React.Ref<HTMLFieldSetElement>;
+}
+export type RadioGroupProps = RadioGroupBaseProps & ({
+    options: readonly RadioGroupOption[];
+    children?: React.ReactNode;
+} | {
+    options?: undefined;
+    children: React.ReactNode;
+});
+export interface RadioGroupItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "onChange"> {
+    value: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    ref?: React.Ref<HTMLInputElement>;
+}
+export declare function RadioGroupItem({ disabled, value, ...props }: RadioGroupItemProps): React.JSX.Element;
+declare function RadioGroupRoot({ "aria-describedby": ariaDescribedBy, children, className, description, disabled, error, id, invalid, label, name, onValueChange, options, orientation, ref, required, size, value, defaultValue, ...props }: RadioGroupProps): React.JSX.Element;
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Item: typeof RadioGroupItem;
+};
+export {};