@zvk/ui 0.1.1 → 0.1.3

package/README.md

@@ -20,9 +20,10 @@ import "@zvk/ui/styles.css";
 
 ## Release Status
 
-GitHub Actions currently builds, verifies, and packs `@zvk/ui` for inspection.
-Registry publishing is intentionally disabled until package distribution policy
-is approved.
+GitHub Actions runs `npm run preflight` before release publishing. Release Please opens
+reviewable version-bump PRs from conventional commits; merging a release PR creates the
+GitHub release and publishes `@zvk/ui` to npm through trusted publishing in the protected
+`npm-publish` environment.
 
 ## First Slice
 

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    selected?: Date | null;
+    defaultSelected?: Date | null;
+    onSelect?: (date: Date | null) => void;
+    month?: Date;
+    defaultMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (date: Date) => boolean;
+    weekStartsOn?: 0 | 1;
+    locale?: string;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export declare function Calendar({ className, defaultMonth, defaultSelected, disabledDate, locale, maxDate, minDate, month, onKeyDown, onMonthChange, onSelect, ref, selected, weekStartsOn, ...props }: CalendarProps): React.JSX.Element;

package/dist/components/calendar/calendar.js

@@ -0,0 +1,178 @@
+"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;
+    }
+    return props.disabledDate ? props.disabledDate(startOfDay(date)) : 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({ className, defaultMonth, defaultSelected = null, disabledDate, locale, maxDate, minDate, month, onKeyDown, onMonthChange, onSelect, ref, selected, 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(() => ({ disabledDate, maxDate, minDate }), [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);
+        }
+        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", className), onKeyDown: handleKeyDown, children: [_jsxs("div", { className: "liano-calendar__header", children: [_jsx("button", { "aria-label": "Previous month", className: "liano-calendar__nav", type: "button", onClick: () => setVisibleMonth(addMonths(visibleMonth, -1)), children: _jsx("span", { "aria-hidden": "true", children: "\u2039" }) }), _jsx("h2", { className: "liano-calendar__heading", id: headingId, children: monthLabel }), _jsx("button", { "aria-label": "Next month", className: "liano-calendar__nav", type: "button", onClick: () => setVisibleMonth(addMonths(visibleMonth, 1)), children: _jsx("span", { "aria-hidden": "true", children: "\u203A" }) })] }), _jsxs("div", { "aria-labelledby": headingId, className: "liano-calendar__grid", role: "grid", children: [_jsx("div", { className: "liano-calendar__weekdays", role: "row", children: weekdays.map((weekday) => (_jsx("span", { className: "liano-calendar__weekday", role: "columnheader", children: weekday }, weekday))) }), Array.from({ length: 6 }, (_, rowIndex) => (_jsx("div", { className: "liano-calendar__week", role: "row", children: days.slice(rowIndex * 7, rowIndex * 7 + 7).map((date) => {
+                            const normalizedDate = startOfDay(date);
+                            const dateKey = normalizedDate.getTime();
+                            const outsideMonth = date.getMonth() !== visibleMonth.getMonth();
+                            const disabled = isDisabled(date, disabledProps);
+                            const selectedDay = isSameDay(currentSelected, date);
+                            const focusedDay = isSameDay(focusedDate, date);
+                            return (_jsx("span", { className: "liano-calendar__cell", role: "gridcell", children: _jsx("button", { "aria-label": getDayLabel(date, locale), "aria-pressed": selectedDay, className: "liano-calendar__day", "data-disabled": disabled ? "true" : undefined, "data-outside-month": outsideMonth ? "true" : undefined, "data-selected": selectedDay ? "true" : undefined, "data-today": isSameDay(today, date) ? "true" : undefined, disabled: disabled, ref: (node) => {
+                                        if (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 { CalendarProps } 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";

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface DatePickerProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (date: Date | null) => void;
+    placeholder?: string;
+    formatDate?: (date: Date) => string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (date: Date) => boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export declare function DatePicker({ defaultValue, description, disabledDate, error, formatDate, label, maxDate, minDate, onValueChange, placeholder, ref, value }: DatePickerProps): React.JSX.Element;

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Calendar } from "../calendar/calendar.js";
+import { Field } from "../field/field.js";
+import { Popover } from "../popover/popover.js";
+import { cn } from "../../utils/cn.js";
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+function joinIds(...ids) {
+    const value = ids.filter(Boolean).join(" ");
+    return value.length > 0 ? value : undefined;
+}
+function defaultFormatDate(date) {
+    return new Intl.DateTimeFormat(undefined, {
+        day: "numeric",
+        month: "short",
+        year: "numeric"
+    }).format(date);
+}
+export function DatePicker({ defaultValue = null, description, disabledDate, error, formatDate = defaultFormatDate, label, maxDate, minDate, onValueChange, placeholder = "Select date", ref, value }) {
+    const generatedId = React.useId();
+    const triggerId = `${generatedId}-trigger`;
+    const descriptionId = hasRenderableNode(description) ? `${generatedId}-description` : undefined;
+    const errorId = hasRenderableNode(error) ? `${generatedId}-error` : undefined;
+    const hasLabel = hasRenderableNode(label);
+    const hasError = hasRenderableNode(error);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [open, setOpen] = React.useState(false);
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const describedBy = joinIds(descriptionId, errorId);
+    const calendarMonth = currentValue ?? minDate ?? undefined;
+    const fieldRefProps = ref !== undefined ? { ref } : {};
+    const calendarProps = {
+        ...(calendarMonth !== undefined ? { defaultMonth: calendarMonth } : {}),
+        ...(disabledDate !== undefined ? { disabledDate } : {}),
+        ...(maxDate !== undefined ? { maxDate } : {}),
+        ...(minDate !== undefined ? { minDate } : {})
+    };
+    const handleSelect = (date) => {
+        if (!isControlled) {
+            setUncontrolledValue(date);
+        }
+        onValueChange?.(date);
+        setOpen(false);
+    };
+    return (_jsxs(Field, { className: "liano-date-picker", invalid: hasError, ...fieldRefProps, children: [hasLabel ? _jsx(Field.Label, { htmlFor: triggerId, children: label }) : null, _jsxs(Popover, { open: open, onOpenChange: setOpen, placement: "bottom-start", children: [_jsx(Popover.Trigger, { "aria-describedby": describedBy, "aria-invalid": hasError ? true : undefined, "aria-label": hasLabel ? undefined : "Selected date", className: cn("liano-date-picker__trigger", !currentValue && "liano-date-picker__trigger--placeholder"), id: triggerId, children: _jsx("span", { className: "liano-date-picker__value", children: currentValue ? formatDate(currentValue) : placeholder }) }), _jsx(Popover.Content, { className: "liano-date-picker__content", matchTriggerWidth: false, sideOffset: 4, children: _jsx(Calendar, { ...calendarProps, selected: currentValue, onSelect: handleSelect }) })] }), hasRenderableNode(description) ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null] }));
+}

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from "./date-picker.js";
+export type { DatePickerProps } from "./date-picker.js";

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

@@ -0,0 +1,2 @@
+"use client";
+export { DatePicker } from "./date-picker.js";

package/dist/components/hover-card/hover-card.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { FloatingPlacement } from "../../internal/floating/index.js";
+import type { PortalProps } from "../../internal/portal/index.js";
+export interface HoverCardProps {
+    children?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    openDelay?: number;
+    closeDelay?: number;
+    placement?: FloatingPlacement;
+    disabled?: boolean;
+}
+export interface HoverCardTriggerProps {
+    children: React.ReactElement;
+}
+export interface HoverCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    sideOffset?: number;
+    collisionPadding?: number;
+    forceMount?: boolean;
+    container?: PortalProps["container"];
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function HoverCardRoot({ children, closeDelay, defaultOpen, disabled, onOpenChange, open: openProp, openDelay, placement }: HoverCardProps): React.JSX.Element;
+declare function HoverCardTrigger({ children }: HoverCardTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function HoverCardContent({ children, className, collisionPadding, container, forceMount, id, onBlur, onFocus, onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, ref, sideOffset, style, ...props }: HoverCardContentProps): React.JSX.Element | null;
+export declare const HoverCard: typeof HoverCardRoot & {
+    Trigger: typeof HoverCardTrigger;
+    Content: typeof HoverCardContent;
+};
+export {};