@zvk/ui 0.1.2 → 0.1.5

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);
@@ -67,13 +68,17 @@ function AlertDialogRoot({ children, className, defaultOpen = false, onOpenChang
             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 }) {
+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("liano-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("liano-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");
@@ -97,9 +102,17 @@ function AlertDialogDescription({ className, ref, ...props }) {
 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 }) {
+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("liano-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("liano-alert-dialog__button", className), onClick: composeEventHandlers(onClick, handleClick) }));
 }
 export const AlertDialog = Object.assign(AlertDialogRoot, {
     Action: AlertDialogCloseButton,

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,12 @@
 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 }) {
+export function Button({ asChild = false, children, className, disabled, leadingIcon, loading = false, ref, size = "md", trailingIcon, type = "button", variant = "primary", ...props }) {
     const isDisabled = disabled || loading;
+    if (asChild) {
+        return (_jsx(Slot, { ...props, ref: ref, "aria-busy": loading ? true : undefined, "aria-disabled": isDisabled ? true : undefined, className: cn("liano-button", className), "data-disabled": isDisabled ? "true" : undefined, "data-loading": loading ? "true" : undefined, "data-size": size, "data-variant": variant, children: children }));
+    }
     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] }));
 }

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+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 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

@@ -0,0 +1,190 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+const dayMs = 24 * 60 * 60 * 1000;
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addDays(date, amount) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+}
+function addMonths(date, amount) {
+    return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function isSameDay(left, right) {
+    if (!left || !right) {
+        return false;
+    }
+    return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+}
+function isBeforeDay(left, right) {
+    return startOfDay(left).getTime() < startOfDay(right).getTime();
+}
+function isAfterDay(left, right) {
+    return startOfDay(left).getTime() > startOfDay(right).getTime();
+}
+function getInitialMonth(month, selected) {
+    if (month) {
+        return startOfMonth(month);
+    }
+    if (selected) {
+        return startOfMonth(selected);
+    }
+    return startOfMonth(new Date());
+}
+function getCalendarStart(month, weekStartsOn) {
+    const firstDay = startOfMonth(month);
+    const offset = (firstDay.getDay() - weekStartsOn + 7) % 7;
+    return addDays(firstDay, -offset);
+}
+function getCalendarDays(month, weekStartsOn) {
+    const start = getCalendarStart(month, weekStartsOn);
+    return Array.from({ length: 42 }, (_, index) => addDays(start, index));
+}
+function isDisabled(date, props) {
+    if (props.minDate && isBeforeDay(date, props.minDate)) {
+        return true;
+    }
+    if (props.maxDate && isAfterDay(date, props.maxDate)) {
+        return true;
+    }
+    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);
+}
+function getDayLabel(date, locale) {
+    return new Intl.DateTimeFormat(locale, { day: "numeric", month: "long", year: "numeric" }).format(date);
+}
+function getWeekdayLabels(weekStartsOn, locale) {
+    const sunday = new Date(2026, 5, 7);
+    return Array.from({ length: 7 }, (_, index) => {
+        const dayIndex = (index + weekStartsOn) % 7;
+        return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(addDays(sunday, dayIndex));
+    });
+}
+function getNearestEnabledDate(date, visibleMonth, props) {
+    if (!isDisabled(date, props)) {
+        return date;
+    }
+    const days = getCalendarDays(visibleMonth, 0);
+    return days.find((day) => !isDisabled(day, props)) ?? date;
+}
+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);
+    const currentSelected = isSelectedControlled ? selected : uncontrolledSelected;
+    const [uncontrolledMonth, setUncontrolledMonth] = React.useState(() => getInitialMonth(defaultMonth, selectedDate));
+    const visibleMonth = startOfMonth(month ?? uncontrolledMonth);
+    const [focusedDate, setFocusedDate] = React.useState(() => startOfDay(currentSelected ?? visibleMonth));
+    const headingId = React.useId();
+    const dayButtonRefs = React.useRef(new Map());
+    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);
+    const today = startOfDay(new Date());
+    React.useEffect(() => {
+        if (currentSelected) {
+            setFocusedDate(startOfDay(currentSelected));
+        }
+    }, [currentSelected]);
+    const setVisibleMonth = (nextMonth) => {
+        const normalizedMonth = startOfMonth(nextMonth);
+        if (month === undefined) {
+            setUncontrolledMonth(normalizedMonth);
+        }
+        onMonthChange?.(normalizedMonth);
+    };
+    const focusDay = React.useCallback((date) => {
+        const key = startOfDay(date).getTime();
+        dayButtonRefs.current.get(key)?.focus();
+    }, []);
+    const moveFocus = (nextDate) => {
+        const normalizedDate = getNearestEnabledDate(startOfDay(nextDate), startOfMonth(nextDate), disabledProps);
+        setFocusedDate(normalizedDate);
+        if (normalizedDate.getMonth() !== visibleMonth.getMonth() || normalizedDate.getFullYear() !== visibleMonth.getFullYear()) {
+            setVisibleMonth(startOfMonth(normalizedDate));
+        }
+        window.requestAnimationFrame(() => focusDay(normalizedDate));
+    };
+    const selectDate = (date) => {
+        const normalizedDate = startOfDay(date);
+        const nextSelected = isSameDay(currentSelected, normalizedDate) ? null : normalizedDate;
+        if (!isSelectedControlled) {
+            setUncontrolledSelected(nextSelected);
+        }
+        if (mode === "single") {
+            onSelect?.(nextSelected ?? undefined);
+            return;
+        }
+        onSelect?.(nextSelected);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        const keyOffsets = {
+            ArrowDown: 7,
+            ArrowLeft: -1,
+            ArrowRight: 1,
+            ArrowUp: -7,
+            PageDown: dayMs * 31,
+            PageUp: -dayMs * 31
+        };
+        if (event.key === "Enter" || event.key === " ") {
+            const targetDate = getNearestEnabledDate(focusedDate, visibleMonth, disabledProps);
+            if (!isDisabled(targetDate, disabledProps)) {
+                event.preventDefault();
+                selectDate(targetDate);
+            }
+            return;
+        }
+        if (event.key === "Home" || event.key === "End") {
+            event.preventDefault();
+            const weekDay = (focusedDate.getDay() - weekStartsOn + 7) % 7;
+            moveFocus(addDays(focusedDate, event.key === "Home" ? -weekDay : 6 - weekDay));
+            return;
+        }
+        const offset = keyOffsets[event.key];
+        if (offset === undefined) {
+            return;
+        }
+        event.preventDefault();
+        if (event.key === "PageDown" || event.key === "PageUp") {
+            moveFocus(addMonths(focusedDate, offset > 0 ? 1 : -1));
+            return;
+        }
+        moveFocus(addDays(focusedDate, offset));
+    };
+    return (_jsxs("div", { ...props, ref: ref, className: cn("liano-calendar", classNames?.months, classNames?.month, className), onKeyDown: handleKeyDown, children: [_jsxs("div", { className: cn("liano-calendar__header", classNames?.caption, classNames?.nav), children: [_jsx("button", { "aria-label": "Previous month", className: cn("liano-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("liano-calendar__heading", classNames?.caption_label), id: headingId, children: monthLabel }), _jsx("button", { "aria-label": "Next month", className: cn("liano-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("liano-calendar__grid", classNames?.table), role: "grid", children: [_jsx("div", { className: cn("liano-calendar__weekdays", classNames?.head_row), role: "row", children: weekdays.map((weekday) => (_jsx("span", { className: cn("liano-calendar__weekday", classNames?.head_cell), role: "columnheader", children: weekday }, weekday))) }), Array.from({ length: 6 }, (_, rowIndex) => (_jsx("div", { className: cn("liano-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);
+                            if (hideOutsideDay) {
+                                return (_jsx("span", { className: cn("liano-calendar__cell", classNames?.cell), role: "gridcell", children: _jsx("span", { "aria-hidden": "true", className: cn("liano-calendar__day", classNames?.day, classNames?.day_outside), "data-outside-month": "true" }) }, dateKey));
+                            }
+                            return (_jsx("span", { className: cn("liano-calendar__cell", classNames?.cell), role: "gridcell", children: _jsx("button", { "aria-label": getDayLabel(date, locale), "aria-pressed": selectedDay, className: cn("liano-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);
+                                        }
+                                        else {
+                                            dayButtonRefs.current.delete(dateKey);
+                                        }
+                                    }, tabIndex: focusedDay ? 0 : -1, type: "button", onClick: () => selectDate(date), onFocus: () => setFocusedDate(normalizedDate), children: date.getDate() }) }, dateKey));
+                        }) }, rowIndex)))] })] }));
+}

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

@@ -0,0 +1,2 @@
+export { Calendar } from "./calendar.js";
+export type { CalendarClassNames, CalendarMode, CalendarNativeProps, CalendarProps, CalendarSingleProps } from "./calendar.js";

package/dist/components/calendar/index.js

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

package/dist/components/carousel/carousel.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export type CarouselOrientation = "horizontal" | "vertical";
+export interface CarouselApi {
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    scrollTo: (index: number) => void;
+    selectedIndex: () => number;
+    slideCount: () => number;
+    canScrollPrev: () => boolean;
+    canScrollNext: () => boolean;
+    subscribe: (listener: () => void) => () => void;
+}
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: CarouselOrientation;
+    defaultIndex?: number;
+    index?: number;
+    onIndexChange?: (index: number) => void;
+    onApiChange?: (api: CarouselApi | null) => void;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CarouselViewportProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CarouselTrackProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CarouselSlideProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface CarouselButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface CarouselPageProps extends React.OutputHTMLAttributes<HTMLOutputElement> {
+    ref?: React.Ref<HTMLOutputElement>;
+}
+declare function CarouselRoot({ children, className, defaultIndex, index, onApiChange, onIndexChange, onKeyDown, orientation, ref, tabIndex, ...props }: CarouselProps): React.JSX.Element;
+declare function CarouselViewport({ className, ref, ...props }: CarouselViewportProps): React.JSX.Element;
+declare function CarouselTrack({ className, ref, ...props }: CarouselTrackProps): React.JSX.Element;
+declare function CarouselSlide({ className, ref, ...props }: CarouselSlideProps): React.JSX.Element;
+declare function CarouselPrevious({ className, disabled, onClick, ref, type, ...props }: CarouselButtonProps): React.JSX.Element;
+declare function CarouselNext({ className, disabled, onClick, ref, type, ...props }: CarouselButtonProps): React.JSX.Element;
+declare function CarouselPage({ children, className, ref, ...props }: CarouselPageProps): React.JSX.Element;
+export declare const Carousel: typeof CarouselRoot & {
+    Next: typeof CarouselNext;
+    Page: typeof CarouselPage;
+    Previous: typeof CarouselPrevious;
+    Slide: typeof CarouselSlide;
+    Track: typeof CarouselTrack;
+    Viewport: typeof CarouselViewport;
+};
+export {};

package/dist/components/carousel/carousel.js

@@ -0,0 +1,210 @@
+"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 CarouselContext = React.createContext(null);
+function useCarouselContext(calledBy) {
+    const context = React.useContext(CarouselContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within <Carousel />`);
+    }
+    return context;
+}
+function normalizeIndex(value, fallback = 0) {
+    if (value === undefined || !Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.max(0, Math.floor(value));
+}
+function clampIndex(value, slideCount) {
+    if (slideCount <= 0) {
+        return 0;
+    }
+    return Math.max(0, Math.min(normalizeIndex(value), slideCount - 1));
+}
+function setRef(ref, value) {
+    if (typeof ref === "function") {
+        ref(value);
+        return;
+    }
+    if (ref) {
+        ref.current = value;
+    }
+}
+function CarouselRoot({ children, className, defaultIndex = 0, index, onApiChange, onIndexChange, onKeyDown, orientation = "horizontal", ref, tabIndex, ...props }) {
+    const slideRegistry = React.useRef(new Map());
+    const listeners = React.useRef(new Set());
+    const [slideIds, setSlideIds] = React.useState([]);
+    const [currentIndex, setCurrentIndex] = useControllableState({
+        ...(index !== undefined ? { value: normalizeIndex(index) } : {}),
+        defaultValue: normalizeIndex(defaultIndex),
+        ...(onIndexChange ? { onChange: onIndexChange } : {})
+    });
+    const slideCount = slideIds.length;
+    const selectedIndex = clampIndex(currentIndex, slideCount);
+    const canScrollPrev = selectedIndex > 0;
+    const canScrollNext = selectedIndex < slideCount - 1;
+    const stateRef = React.useRef({ selectedIndex, slideCount });
+    React.useLayoutEffect(() => {
+        stateRef.current = { selectedIndex, slideCount };
+    }, [selectedIndex, slideCount]);
+    const scrollTo = React.useCallback((nextIndex) => {
+        setCurrentIndex(clampIndex(nextIndex, slideIds.length));
+    }, [setCurrentIndex, slideIds.length]);
+    const scrollPrev = React.useCallback(() => {
+        scrollTo(stateRef.current.selectedIndex - 1);
+    }, [scrollTo]);
+    const scrollNext = React.useCallback(() => {
+        scrollTo(stateRef.current.selectedIndex + 1);
+    }, [scrollTo]);
+    const registerSlide = React.useCallback((id, node) => {
+        slideRegistry.current.set(id, node);
+        setSlideIds((current) => (current.includes(id) ? current : [...current, id]));
+    }, []);
+    const unregisterSlide = React.useCallback((id) => {
+        slideRegistry.current.delete(id);
+        setSlideIds((current) => current.filter((slideId) => slideId !== id));
+    }, []);
+    const getSlideIndex = React.useCallback((id) => slideIds.indexOf(id), [slideIds]);
+    React.useLayoutEffect(() => {
+        const nextIndex = clampIndex(currentIndex, slideCount);
+        if (nextIndex !== currentIndex) {
+            setCurrentIndex(nextIndex);
+        }
+    }, [currentIndex, setCurrentIndex, slideCount]);
+    React.useLayoutEffect(() => {
+        const selectedSlideId = slideIds[selectedIndex];
+        const selectedSlide = selectedSlideId ? slideRegistry.current.get(selectedSlideId) : null;
+        if (typeof selectedSlide?.scrollIntoView === "function") {
+            selectedSlide.scrollIntoView({
+                behavior: "auto",
+                block: orientation === "vertical" ? "start" : "nearest",
+                inline: orientation === "horizontal" ? "start" : "nearest"
+            });
+        }
+    }, [orientation, selectedIndex, slideIds]);
+    React.useLayoutEffect(() => {
+        listeners.current.forEach((listener) => listener());
+    }, [selectedIndex, slideCount]);
+    const api = React.useMemo(() => ({
+        canScrollNext: () => stateRef.current.selectedIndex < stateRef.current.slideCount - 1,
+        canScrollPrev: () => stateRef.current.selectedIndex > 0,
+        scrollNext,
+        scrollPrev,
+        scrollTo,
+        selectedIndex: () => stateRef.current.selectedIndex,
+        slideCount: () => stateRef.current.slideCount,
+        subscribe(listener) {
+            listeners.current.add(listener);
+            return () => {
+                listeners.current.delete(listener);
+            };
+        }
+    }), [scrollNext, scrollPrev, scrollTo]);
+    React.useLayoutEffect(() => {
+        onApiChange?.(api);
+        return () => {
+            onApiChange?.(null);
+        };
+    }, [api, onApiChange]);
+    const handleKeyDown = React.useCallback((event) => {
+        const previousKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+        if (event.key === previousKey) {
+            event.preventDefault();
+            scrollPrev();
+            return;
+        }
+        if (event.key === nextKey) {
+            event.preventDefault();
+            scrollNext();
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            scrollTo(0);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            scrollTo(slideCount - 1);
+        }
+    }, [orientation, scrollNext, scrollPrev, scrollTo, slideCount]);
+    const context = React.useMemo(() => ({
+        canScrollNext,
+        canScrollPrev,
+        getSlideIndex,
+        orientation,
+        registerSlide,
+        scrollNext,
+        scrollPrev,
+        scrollTo,
+        selectedIndex,
+        slideCount,
+        unregisterSlide
+    }), [
+        canScrollNext,
+        canScrollPrev,
+        getSlideIndex,
+        orientation,
+        registerSlide,
+        scrollNext,
+        scrollPrev,
+        scrollTo,
+        selectedIndex,
+        slideCount,
+        unregisterSlide
+    ]);
+    return (_jsx(CarouselContext.Provider, { value: context, children: _jsx("div", { ...props, ref: ref, "aria-roledescription": "carousel", className: cn("liano-carousel", className), "data-orientation": orientation, onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown), role: props.role ?? "region", tabIndex: tabIndex ?? 0, children: children }) }));
+}
+function CarouselViewport({ className, ref, ...props }) {
+    const context = useCarouselContext("Carousel.Viewport");
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-carousel__viewport", className), "data-orientation": context.orientation }));
+}
+function CarouselTrack({ className, ref, ...props }) {
+    const context = useCarouselContext("Carousel.Track");
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-carousel__track", className), "data-orientation": context.orientation }));
+}
+function CarouselSlide({ className, ref, ...props }) {
+    const context = useCarouselContext("Carousel.Slide");
+    const id = React.useId();
+    const slideRef = React.useRef(null);
+    const slideIndex = context.getSlideIndex(id);
+    const isSelected = slideIndex === context.selectedIndex;
+    const safeIndex = slideIndex === -1 ? 0 : slideIndex;
+    React.useLayoutEffect(() => {
+        context.registerSlide(id, slideRef.current);
+        return () => {
+            context.unregisterSlide(id);
+        };
+    }, [context.registerSlide, context.unregisterSlide, id]);
+    return (_jsx("div", { ...props, ref: (node) => {
+            slideRef.current = node;
+            setRef(ref, node);
+        }, "aria-label": props["aria-label"] ?? `${safeIndex + 1} of ${context.slideCount}`, "aria-roledescription": "slide", className: cn("liano-carousel__slide", className), "data-orientation": context.orientation, "data-selected": isSelected ? "true" : undefined, role: props.role ?? "group" }));
+}
+function CarouselPrevious({ className, disabled, onClick, ref, type = "button", ...props }) {
+    const context = useCarouselContext("Carousel.Previous");
+    const isDisabled = disabled === true || !context.canScrollPrev;
+    return (_jsx("button", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Previous slide", className: cn("liano-carousel__button liano-carousel__button--previous", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => context.scrollPrev()), type: type }));
+}
+function CarouselNext({ className, disabled, onClick, ref, type = "button", ...props }) {
+    const context = useCarouselContext("Carousel.Next");
+    const isDisabled = disabled === true || !context.canScrollNext;
+    return (_jsx("button", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Next slide", className: cn("liano-carousel__button liano-carousel__button--next", className), "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => context.scrollNext()), type: type }));
+}
+function CarouselPage({ children, className, ref, ...props }) {
+    const context = useCarouselContext("Carousel.Page");
+    const label = context.slideCount === 0 ? "0 / 0" : `${context.selectedIndex + 1} / ${context.slideCount}`;
+    return (_jsx("output", { ...props, ref: ref, "aria-live": props["aria-live"] ?? "polite", className: cn("liano-carousel__page", className), children: children ?? label }));
+}
+export const Carousel = Object.assign(CarouselRoot, {
+    Next: CarouselNext,
+    Page: CarouselPage,
+    Previous: CarouselPrevious,
+    Slide: CarouselSlide,
+    Track: CarouselTrack,
+    Viewport: CarouselViewport
+});

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

@@ -0,0 +1,2 @@
+export { Carousel } from "./carousel.js";
+export type { CarouselApi, CarouselButtonProps, CarouselOrientation, CarouselPageProps, CarouselProps, CarouselSlideProps, CarouselTrackProps, CarouselViewportProps } from "./carousel.js";

package/dist/components/carousel/index.js

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