@g4rcez/components 3.0.0 → 3.0.1

package/dist/components/form/select.jsx

@@ -1,42 +0,0 @@
-"use client";
-import { ChevronDownIcon } from "lucide-react";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import { useTranslations } from "../../hooks/use-translations";
-import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
-import { InputField } from "./input-field";
-export const Select = forwardRef(({ required = true, options, info, selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, hiddenLabel, loading, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
-    const translation = useTranslations();
-    const inputRef = useRef(null);
-    const id = props.id ?? props.name;
-    useImperativeHandle(ref, () => inputRef.current);
-    useEffect(() => {
-        if (inputRef.current === null)
-            return;
-        const controller = new AbortController();
-        const input = inputRef.current;
-        const focus = initializeInputDataset(inputRef.current);
-        input.addEventListener("change", () => input.setAttribute("data-selected", "true"), {
-            once: true,
-            signal: controller.signal,
-        });
-        return () => {
-            focus();
-            controller.abort();
-        };
-    }, []);
-    const onClickLabel = () => inputRef.current?.focus();
-    return (<InputField info={info} left={left} error={error} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} componentName="select" rightLabel={rightLabel} hiddenLabel={hiddenLabel} interactive={interactive} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} right={<label htmlFor={id}>
-                        {right}
-                        <button onClick={onClickLabel} type="button" className="mt-2 transition-colors hover:text-primary">
-                            <ChevronDownIcon size={20}/>
-                            <span className="sr-only">{translation.inputCaretDown}</span>
-                        </button>
-                    </label>}>
-                <select {...props} id={id} name={id} required={required} ref={mergeRefs(ref, inputRef)} data-selected={!!props.value || false} title={typeof props.title === "string" ? props.title : undefined} className={css("input select group h-10 w-full flex-1 appearance-none rounded-md text-base", "bg-transparent px-2 py-1 text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className)}>
-                    <option value="" disabled hidden>
-                        {props.placeholder}
-                    </option>
-                    {options.map((option) => (<option {...option} value={option.value} children={option.label ?? option.value} key={`${id}-select-option-${option.value}`}/>))}
-                </select>
-            </InputField>);
-});

package/dist/components/form/slider.jsx

@@ -1,45 +0,0 @@
-"use client";
-import { Slider as Base } from "@base-ui/react/slider";
-import { Is } from "sidekicker";
-import { css } from "../../lib/dom";
-import { Tooltip } from "../floating/tooltip";
-import { useEffect, useRef, useState } from "react";
-import { uuid } from "../../lib/fns";
-import { useLocale } from "../../hooks/use-locale";
-const Thumb = (props) => {
-    const [float, setFloat] = useState(null);
-    const ref = useRef(null);
-    useEffect(() => {
-        const html = ref.current;
-        if (html === null)
-            return;
-        const initialValue = Number(html.getAttribute("aria-valuenow"));
-        if (Is.number(initialValue)) {
-            setFloat(initialValue);
-        }
-        const observer = new MutationObserver((changes) => {
-            const span = changes[0].target;
-            const value = Number(span.getAttribute("aria-valuenow"));
-            setFloat(Is.number(value) ? value : null);
-        });
-        observer.observe(html, { attributeFilter: ["aria-valuenow"] });
-        return () => observer.disconnect();
-    }, []);
-    return (<Tooltip title="" ref={ref} as={Base.Thumb} enabled={props.tooltip} className="focus-within::scale-105 block size-5 cursor-grab rounded-full border-2 border-input-border bg-input-switch shadow-shadow-floating focus-within:border-primary focus-within:outline active:cursor-grabbing">
-            {float}
-        </Tooltip>);
-};
-export const Slider = (props) => {
-    const { tooltip, className, defaultValue, value, ...restProps } = props;
-    const id = useRef(uuid());
-    const array = defaultValue || value || [];
-    const locale = useLocale();
-    return (<Base.Root {...restProps} value={value} locale={locale} defaultValue={defaultValue}>
-            <Base.Control className={css("relative flex h-5 w-full touch-none select-none items-center", className)}>
-                <Base.Track className="relative h-2 grow rounded-full bg-background">
-                    <Base.Indicator className="absolute h-full rounded-full bg-primary"/>
-                </Base.Track>
-                {Array.isArray(array) ? array.map((_, i) => <Thumb tooltip={tooltip ?? false} key={`${id.current}-${i}`}/>) : null}
-            </Base.Control>
-        </Base.Root>);
-};

package/dist/components/form/switch.jsx

@@ -1,46 +0,0 @@
-"use client";
-import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
-import { useStableRef } from "../../hooks/use-stable-ref";
-import { css } from "../../lib/dom";
-export const Switch = forwardRef(({ children, loading, container, error, ...props }, ref) => {
-    const id = useId();
-    const [innerChecked, setInnerChecked] = useState(props.checked ?? false);
-    const checked = innerChecked;
-    const innerRef = useRef(null);
-    const stableOnChange = useStableRef(props.onChange);
-    useImperativeHandle(ref, () => innerRef.current);
-    useEffect(() => {
-        if (innerRef.current !== null) {
-            if (stableOnChange.current) {
-                const onChange = (e) => {
-                    if (stableOnChange.current)
-                        stableOnChange.current(e);
-                };
-                const ref = innerRef.current;
-                ref.addEventListener("change", onChange);
-                return () => ref?.removeEventListener("change", onChange);
-            }
-        }
-    }, []);
-    const onCheck = () => {
-        const checked = !innerRef.current?.checked;
-        setInnerChecked(checked);
-        props?.onCheck?.(checked);
-        if (innerRef.current !== null) {
-            innerRef.current.checked = checked;
-            innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
-        }
-    };
-    return (<fieldset className={css("flex flex-col flex-wrap justify-center", container)} data-component="switch" disabled={props.disabled || loading}>
-            <span className="flex flex-row flex-wrap items-center">
-                <input {...props} hidden ref={innerRef} type="checkbox" checked={checked} id={props.id || id} data-trigger="change" data-checked={checked} disabled={props.disabled || loading} onChange={(e) => setInnerChecked(e.target.checked)}/>
-                <button type="button" role="switch" onClick={onCheck} aria-checked={checked} data-checked={checked} aria-labelledby={`${id}-label`} disabled={props.disabled || loading} className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary">
-                    <span aria-hidden="true" data-checked={checked} className="inline-block aspect-square size-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch"/>
-                </button>
-                <label htmlFor={props.id || id} className="ml-3 inline-block text-sm" id={`${id}-label`}>
-                    <span className="font-medium text-foreground">{children}</span>
-                </label>
-            </span>
-            <span className="mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden">{error}</span>
-        </fieldset>);
-});

package/dist/components/form/task-list.jsx

@@ -1,26 +0,0 @@
-"use client";
-import { stagger, useAnimate } from "motion/react";
-import { useEffect } from "react";
-export const TaskList = (props) => {
-    const [ref, animate] = useAnimate();
-    useEffect(() => {
-        const container = ref.current;
-        if (!container)
-            return;
-        const handler = (e) => {
-            const input = e.target;
-            const items = Array.from(container.querySelectorAll("input[data-task=true]"));
-            const allTaskChecked = items.every((el) => el.checked);
-            const index = items.indexOf(input);
-            if (allTaskChecked && index !== -1) {
-                animate("input", { scale: [1, 1.35, 1], rotate: [0, 20, -20, 0] }, {
-                    duration: 0.5,
-                    delay: stagger(0.075, { from: index }),
-                });
-            }
-        };
-        container.addEventListener("change", handler);
-        return () => container.removeEventListener("change", handler);
-    }, []);
-    return <fieldset {...props} data-component="task-list" ref={ref}/>;
-};

package/dist/components/form/textarea.jsx

@@ -1,12 +0,0 @@
-"use client";
-import { createFreeText } from "./free-text";
-export const Textarea = createFreeText("textarea", "textarea", { container: "w-full" }, (textarea) => {
-    const adjustHeight = () => {
-        const lineBreakers = textarea.value.split("\n");
-        textarea.style.height = "auto";
-        if (lineBreakers.length > 1)
-            return void (textarea.style.height = `${textarea.scrollHeight}px`);
-    };
-    textarea.addEventListener("input", adjustHeight);
-    return () => textarea.removeEventListener("input", adjustHeight);
-});

package/dist/components/form/transfer-list.jsx

@@ -1,39 +0,0 @@
-"use client";
-import { ChevronRightIcon } from "lucide-react";
-import React, { forwardRef, Fragment, useRef } from "react";
-import { Virtuoso } from "react-virtuoso";
-import { useParentHeight } from "../../hooks/use-parent";
-import { Button } from "../core/button";
-import { Checkbox } from "../form/checkbox";
-import { Input } from "./input";
-const components = {
-    Item: forwardRef(function InnerList(props, ref) {
-        return <li {...props} ref={ref} className="flex items-center justify-between gap-1"/>;
-    }),
-    List: forwardRef(function InnerList(props, ref) {
-        return <ul {...props} ref={ref} className="space-y-3"/>;
-    }),
-};
-export const TransferList = (props) => {
-    const ref = useRef(null);
-    const h = useParentHeight(ref);
-    return (<div className="flex flex-row gap-4" ref={ref}>
-            <div className="flex w-fit min-w-64 flex-col space-y-4 whitespace-nowrap rounded-lg border border-card-border py-8">
-                <header className="border-b border-card-border pb-2"></header>
-                <div className="space-y-2 px-8">
-                    <Input rightLabel="" title="Search" placeholder="Looking for..."/>
-                    <Virtuoso height={h} useWindowScroll data={props.source} components={components} itemContent={(_, row) => (<Fragment>
-                                <Checkbox>
-                                    <props.Item data={row}/>
-                                </Checkbox>
-                            </Fragment>)}/>
-                </div>
-            </div>
-            <div>
-                <Button>
-                    <ChevronRightIcon />
-                </Button>
-            </div>
-            <div></div>
-        </div>);
-};

package/dist/components/index.js

@@ -1,45 +0,0 @@
-export * from "./core/tag";
-export * from "./form/form";
-export * from "./form/input";
-export * from "./core/button";
-export * from "./form/select";
-export * from "./form/slider";
-export * from "./form/switch";
-export * from "./table/index";
-export * from "./display/card";
-export * from "./display/list";
-export * from "./display/step";
-export * from "./display/tabs";
-export * from "./display/alert";
-export * from "./display/empty";
-export * from "./display/stats";
-export * from "./floating/menu";
-export * from "./form/checkbox";
-export * from "./form/radiobox";
-export * from "./form/textarea";
-export * from "./core/polymorph";
-export * from "./floating/modal";
-export * from "./form/task-list";
-export * from "./core/typography";
-export * from "./display/spinner";
-export * from "./floating/expand";
-export * from "./floating/wizard";
-export * from "./display/calendar";
-export * from "./display/progress";
-export * from "./display/timeline";
-export * from "./floating/toolbar";
-export * from "./floating/tooltip";
-export * from "./form/date-picker";
-export * from "./form/file-upload";
-export * from "./form/input-field";
-export * from "./floating/dropdown";
-export * from "./form/autocomplete";
-export * from "./form/multi-select";
-export * from "./form/transfer-list";
-export * from "./core/render-on-view";
-export * from "./display/notifications";
-export * from "./floating/command-palette";
-export { CommandPalette as Commander } from "./floating/command-palette";
-export * from "./page-calendar";
-export { formReset } from "./form/formReset";
-export { createColumns, createOptionCols, useTablePreferences } from "./table/table-lib";

package/dist/components/page-calendar/calendar-header.jsx

@@ -1,81 +0,0 @@
-import { Button } from "../core/button";
-import { Tag } from "../core/tag";
-import { useLocale } from "../../hooks/use-locale";
-import { useTranslations } from "../../hooks/use-translations";
-import { ChevronLeft, ChevronRight, PlusCircle, Calendar } from "lucide-react";
-import { addDays, addMonths, addWeeks, isToday, subDays, subMonths, subWeeks } from "date-fns";
-import { formatDay, formatMonthShort, formatMonthYear, getWeekNumber } from "./page-calendar.utils";
-import { useMemo } from "react";
-export function CalendarHeader({ currentDate, currentView, filters, filterArea, setCurrentDate, setCurrentView, onToggleFilter, onAddEvent, }) {
-    const locale = useLocale();
-    const t = useTranslations();
-    const isDateToday = isToday(currentDate);
-    const VIEWS = useMemo(() => [
-        { value: "month", label: t.pageCalendarMonthView },
-        { value: "week", label: t.pageCalendarWeekView },
-        { value: "day", label: t.pageCalendarDayView },
-    ], [t]);
-    const handlePrev = () => {
-        setCurrentDate((currentDate) => {
-            if (currentView === "month")
-                return subMonths(currentDate, 1);
-            if (currentView === "week")
-                return subWeeks(currentDate, 1);
-            return subDays(currentDate, 1);
-        });
-    };
-    const handleNext = () => {
-        setCurrentDate((currentDate) => {
-            if (currentView === "month")
-                return addMonths(currentDate, 1);
-            if (currentView === "week")
-                return addWeeks(currentDate, 1);
-            return addDays(currentDate, 1);
-        });
-    };
-    const weekNum = getWeekNumber(currentDate);
-    return (<header className="flex flex-col gap-4">
-            <div className="flex items-center justify-between gap-4">
-                <div className="flex items-center gap-3">
-                    <div aria-hidden="true" className={`flex size-12 flex-col items-center justify-center overflow-hidden rounded-lg text-xs ${isDateToday ? "bg-primary text-primary-foreground" : "bg-card text-foreground"}`}>
-                        <span className="font-light uppercase leading-none">{formatMonthShort(currentDate, locale)}</span>
-                        <span className="text-xl font-medium leading-none">{formatDay(currentDate, locale)}</span>
-                    </div>
-                    <div>
-                        <h1 aria-live="polite" aria-atomic="true" className="text-xl font-bold leading-tight">{formatMonthYear(currentDate, locale)}</h1>
-                        <span className="text-xs text-muted-foreground">{t.pageCalendarWeekLabel(weekNum)}</span>
-                    </div>
-                </div>
-                <nav aria-label={t.pageCalendarNavigation} className="flex items-center gap-2">
-                    <div className="flex items-center gap-1">
-                        <Button size="small" title={t.pageCalendarPrevious} aria-label={t.pageCalendarPrevious} theme="ghost-muted" onClick={handlePrev}>
-                            <ChevronLeft size={16}/>
-                        </Button>
-                        <button type="button" aria-label={t.pageCalendarToday} onClick={() => setCurrentDate(new Date())} className="rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-muted/50">
-                            {t.pageCalendarToday}
-                        </button>
-                        <Button size="small" title={t.pageCalendarNext} aria-label={t.pageCalendarNext} theme="ghost-muted" onClick={handleNext}>
-                            <ChevronRight size={16}/>
-                        </Button>
-                    </div>
-                    <div className="flex rounded-md">
-                        {VIEWS.map((v) => (<Button size="small" key={v.value} onClick={() => setCurrentView(v.value)} theme={currentView === v.value ? "primary" : "muted"} aria-pressed={currentView === v.value} className="rounded-none first:rounded-l-button last:rounded-r-button">
-                                {v.label}
-                            </Button>))}
-                    </div>
-                    {onAddEvent && (<Button theme="primary" size="small" onClick={onAddEvent}>
-                            <PlusCircle size={14}/>
-                            {t.pageCalendarAddEvent}
-                        </Button>)}
-                </nav>
-            </div>
-            {filterArea ??
-            (filters.length > 0 && (<div role="group" aria-label={t.pageCalendarFilter} className="flex flex-wrap items-center gap-1.5">
-                        <Calendar size={14} className="text-muted-foreground" aria-hidden="true"/>
-                        <span className="mr-1 text-xs text-muted-foreground">{t.pageCalendarFilter}</span>
-                        {filters.map((filter) => (<Tag as="button" size="small" type="button" key={filter.id} theme={filter.theme} indicator={filter.enabled ? filter.theme : undefined} aria-pressed={filter.enabled} aria-label={`${filter.label}, ${filter.enabled ? t.pageCalendarFilterEnabled : t.pageCalendarFilterDisabled}`} onClick={() => onToggleFilter(filter.id)}>
-                                {filter.label}
-                            </Tag>))}
-                    </div>))}
-        </header>);
-}

package/dist/components/page-calendar/day-view.jsx

@@ -1,87 +0,0 @@
-import { isToday } from "date-fns";
-import { useEffect, useRef, useState } from "react";
-import { Tag } from "../core/tag";
-import { useLocale } from "../../hooks/use-locale";
-import { EventPill } from "./event-pill";
-import { Calendar } from "../display/calendar";
-import { getHourSlots, toDateKey, formatDay, formatWeekdayLong, formatMonthYear, formatHourLabel, formatFullDate, formatTime, } from "./page-calendar.utils";
-const HOUR_HEIGHT = 48;
-function getTopOffset(event) {
-    const hour = event.date.getHours();
-    const minutes = event.date.getMinutes();
-    return hour * HOUR_HEIGHT + (minutes / 60) * HOUR_HEIGHT;
-}
-export function DayView({ currentDate, onSlotClick, renderEvent, eventsByDate, onDateChange, onEventClick, }) {
-    const locale = useLocale();
-    const currentHourRef = useRef(null);
-    const scrollBodyRef = useRef(null);
-    const hours = getHourSlots();
-    const [selectedEvent, setSelectedEvent] = useState(null);
-    useEffect(() => {
-        if (scrollBodyRef.current && currentHourRef.current) {
-            const top = currentHourRef.current.offsetTop;
-            scrollBodyRef.current.scrollTop = top - scrollBodyRef.current.clientHeight / 2;
-        }
-    }, []);
-    const dayKey = toDateKey(currentDate);
-    const events = eventsByDate.get(dayKey) || [];
-    const RenderOnDay = ({ date }) => {
-        const key = toDateKey(date);
-        const hasEvents = (eventsByDate.get(key) || []).length > 0;
-        const isSelected = toDateKey(date) === toDateKey(currentDate);
-        if (!hasEvents || isSelected)
-            return null;
-        return <span className="absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-primary"/>;
-    };
-    const handleEventClick = (event) => {
-        setSelectedEvent(event);
-        onEventClick(event);
-    };
-    return (<div className="flex flex-1 overflow-hidden">
-            <div className="flex flex-1 flex-col overflow-hidden">
-                <div aria-label={formatFullDate(currentDate, locale)} className="flex flex-shrink-0 items-center gap-3 border-b border-border px-4 py-2">
-                    <span className={`inline-flex h-8 w-8 items-center justify-center rounded-full font-bold ${isToday(currentDate) ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
-                        {formatDay(currentDate, locale)}
-                    </span>
-                    <div>
-                        <div className="font-semibold">{formatWeekdayLong(currentDate, locale)}</div>
-                        <div className="text-xs text-muted-foreground">{formatMonthYear(currentDate, locale)}</div>
-                    </div>
-                </div>
-                <div ref={scrollBodyRef} className="flex flex-1 items-start overflow-y-auto">
-                    <div className="w-[60px] flex-shrink-0">
-                        {hours.map((hour) => (<div key={hour} className="relative" style={{ height: HOUR_HEIGHT }}>
-                                <span className="absolute -top-2.5 right-2 text-[10px] text-muted-foreground">
-                                    {hour === 0 ? "" : formatHourLabel(hour, locale)}
-                                </span>
-                                {hour === new Date().getHours() && <div ref={currentHourRef}/>}
-                            </div>))}
-                    </div>
-                    <div className="relative flex-1 border-l border-card-border">
-                        {hours.map((hour) => {
-            const slotDate = new Date(currentDate);
-            slotDate.setHours(hour, 0, 0, 0);
-            return (<div key={hour} role="button" tabIndex={0} aria-label={formatHourLabel(hour, locale)} className="cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                onSlotClick?.(slotDate);
-            } }}/>);
-        })}
-                        {events.map((event) => (<div key={event.id} className="absolute left-1 right-1" style={{ top: getTopOffset(event), height: HOUR_HEIGHT }} onClick={(e) => e.stopPropagation()}>
-                                <EventPill event={event} onClick={() => handleEventClick(event)}/>
-                            </div>))}
-                    </div>
-                </div>
-            </div>
-            <div className="flex flex-col overflow-y-auto border-l border-card-border px-4">
-                <Calendar date={currentDate} markToday changeOnlyOnClick RenderOnDay={RenderOnDay} onChange={(d) => d && onDateChange(d)}/>
-                {selectedEvent && (<div className="flex flex-col gap-2 border-t p-3">
-                        {renderEvent ? (renderEvent(selectedEvent)) : (<>
-                                <div className="truncate text-sm font-semibold">{selectedEvent.title}</div>
-                                <div className="text-xs text-muted-foreground">{formatFullDate(selectedEvent.date, locale)}</div>
-                                <div className="text-xs text-muted-foreground">{formatTime(selectedEvent.date, locale)}</div>
-                                <Tag theme={selectedEvent.className ? "custom" : "primary"} size="small" className={`self-start${selectedEvent.className ? ` ${selectedEvent.className}` : ""}`}/>
-                            </>)}
-                    </div>)}
-            </div>
-        </div>);
-}

package/dist/components/page-calendar/event-pill.jsx

@@ -1,25 +0,0 @@
-import { Button } from "../core/button";
-import { css } from "../../lib/dom";
-import { useTranslations } from "../../hooks/use-translations";
-import { formatEventTime } from "./page-calendar.utils";
-export function EventPill({ event, onClick, compact = false }) {
-    const t = useTranslations();
-    const props = {
-        style: {
-            border: "0",
-            padding: "0 0.5rem",
-            height: "1.25rem",
-            borderRadius: "0.25rem",
-        },
-        className: css("w-full border-0 justify-start rounded text-xs truncate text-ellipsis overflow-hidden border leading-tight", event.className),
-    };
-    if (compact) {
-        return (<Button {...props} size="small" onClick={onClick} title={event.title} aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))} theme={event.className ? "raw" : "primary"}>
-                {event.title}
-            </Button>);
-    }
-    return (<Button {...props} size="small" onClick={onClick} title={event.title} aria-label={t.pageCalendarEventAt(event.title, formatEventTime(event.date))} theme={event.className ? "raw" : "primary"}>
-            <div className="truncate font-medium">{event.title}</div>
-            <div className="text-xs opacity-60">{formatEventTime(event.date)}</div>
-        </Button>);
-}

package/dist/components/page-calendar/index.js

@@ -1,2 +0,0 @@
-export { PageCalendar } from "./page-calendar";
-export { toDateKey, groupEventsByDate, getMonthDays, getWeekDays, getHourSlots, formatEventTime, formatDay, formatWeekdayLong, formatWeekdayShort, formatMonthYear, formatMonthShort, formatHourLabel, formatFullDate, formatTime, getWeekNumber, } from "./page-calendar.utils";

package/dist/components/page-calendar/month-view.jsx

@@ -1,47 +0,0 @@
-import { isSameMonth, isToday } from "date-fns";
-import { useLocale } from "../../hooks/use-locale";
-import { useTranslations } from "../../hooks/use-translations";
-import { EventPill } from "./event-pill";
-import { toDateKey, formatDay, getWeekDays, formatWeekDay, formatFullDate } from "./page-calendar.utils";
-import { useMemo } from "react";
-export function MonthView({ days, eventsByDate, currentDate, onEventClick, onDayClick }) {
-    const locale = useLocale();
-    const t = useTranslations();
-    const WEEKDAY_LABELS = useMemo(() => getWeekDays(new Date()), []);
-    return (<div className="flex h-full flex-1 flex-col">
-            <ul role="row" aria-hidden="true" className="grid grid-cols-7 border-b border-border">
-                {WEEKDAY_LABELS.map((date) => {
-            const day = formatWeekDay(date, locale);
-            return (<li key={day} className="py-2 text-center text-xs font-medium text-muted-foreground">
-                            {day}
-                        </li>);
-        })}
-            </ul>
-            <div role="grid" aria-label={t.pageCalendarMonthGrid} className="grid flex-1 auto-rows-fr grid-cols-7">
-                {days.map((day, idx) => {
-            const key = toDateKey(day);
-            const events = eventsByDate.get(key) || [];
-            const isCurrentMonth = isSameMonth(day, currentDate);
-            const isCurrentDay = isToday(day);
-            const visible = events.slice(0, 2);
-            const overflow = events.length - 2;
-            return (<button key={idx} type="button" onClick={() => onDayClick(day)} aria-label={`${formatFullDate(day, locale)}${events.length > 0 ? `, ${t.pageCalendarEventCount(events.length)}` : ""}`} className={`group flex min-h-32 cursor-pointer flex-col gap-1 border-b border-r border-border p-2 transition-colors hover:bg-muted hover:bg-opacity-20 ${!isCurrentMonth ? "opacity-50" : ""}`}>
-                            <div className="flex items-center justify-between">
-                                <span className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
-                                    {formatDay(day, locale)}
-                                </span>
-                                <span aria-hidden="true" className="text-lg leading-none text-muted-foreground opacity-0 transition-opacity group-hover:opacity-40">
-                                    +
-                                </span>
-                            </div>
-                            <div className="flex flex-col gap-0.5">
-                                {visible.map((event) => (<div key={event.id} onClick={(e) => e.stopPropagation()}>
-                                        <EventPill compact event={event} onClick={() => onEventClick(event)}/>
-                                    </div>))}
-                                {overflow > 0 && <span className="pl-1 text-xs text-muted-foreground">{t.pageCalendarMoreEvents(overflow)}</span>}
-                            </div>
-                        </button>);
-        })}
-            </div>
-        </div>);
-}

package/dist/components/page-calendar/page-calendar.jsx

@@ -1,41 +0,0 @@
-import { useMemo, useState } from "react";
-import { useTranslations } from "../../hooks/use-translations";
-import { groupEventsByDate, getMonthDays, getWeekDays } from "./page-calendar.utils";
-import { CalendarHeader } from "./calendar-header";
-import { MonthView } from "./month-view";
-import { WeekView } from "./week-view";
-import { DayView } from "./day-view";
-const noop = [];
-export function PageCalendar({ events, filterArea, onAddEvent, defaultDate, onSlotClick, getFilterId, renderEvent, onEventClick, filters = noop, defaultView = "month", onChangeFilters: onActiveFiltersChange, }) {
-    const t = useTranslations();
-    const [currentView, setCurrentView] = useState(defaultView);
-    const [currentDate, setCurrentDate] = useState(() => defaultDate ?? new Date());
-    const [internalFilters, setInternalFilters] = useState(filters);
-    const toggleFilter = (id) => {
-        setInternalFilters((prev) => {
-            const next = prev.map((f) => (f.id === id ? { ...f, enabled: !f.enabled } : f));
-            onActiveFiltersChange?.(next);
-            return next;
-        });
-    };
-    const filteredEvents = useMemo(() => {
-        if (filters.length === 0)
-            return events;
-        const get = getFilterId ?? ((e) => e?.filterId);
-        return events.filter((e) => internalFilters.find((f) => f.id === get(e))?.enabled ?? true);
-    }, [events, internalFilters, filters]);
-    const eventsByDate = useMemo(() => groupEventsByDate(filteredEvents), [filteredEvents]);
-    const monthDays = useMemo(() => getMonthDays(currentDate), [currentDate]);
-    const weekDays = useMemo(() => getWeekDays(currentDate), [currentDate]);
-    const handleEventClick = (event) => onEventClick?.(event);
-    const handleDayClick = (date) => {
-        setCurrentDate(date);
-        setCurrentView("day");
-    };
-    return (<div role="application" aria-label={t.pageCalendarLabel} className="flex h-full flex-grow flex-col gap-4">
-            <CalendarHeader filters={internalFilters} filterArea={filterArea} onAddEvent={onAddEvent} currentDate={currentDate} currentView={currentView} setCurrentDate={setCurrentDate} setCurrentView={setCurrentView} onToggleFilter={toggleFilter}/>
-            {currentView === "month" && (<MonthView days={monthDays} currentDate={currentDate} eventsByDate={eventsByDate} onDayClick={handleDayClick} onEventClick={handleEventClick}/>)}
-            {currentView === "week" && (<WeekView days={weekDays} currentDate={currentDate} onSlotClick={onSlotClick} eventsByDate={eventsByDate} onEventClick={handleEventClick}/>)}
-            {currentView === "day" && (<DayView currentDate={currentDate} onSlotClick={onSlotClick} renderEvent={renderEvent} eventsByDate={eventsByDate} onDateChange={setCurrentDate} onEventClick={handleEventClick}/>)}
-        </div>);
-}

package/dist/components/page-calendar/page-calendar.types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/page-calendar/page-calendar.utils.js

@@ -1,71 +0,0 @@
-import { addDays, startOfMonth, startOfWeek, getISOWeek } from "date-fns";
-export function toDateKey(d) {
-    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-}
-export function groupEventsByDate(events) {
-    const map = new Map();
-    for (const event of events) {
-        const key = toDateKey(event.date);
-        const existing = map.get(key);
-        if (existing) {
-            existing.push(event);
-        }
-        else {
-            map.set(key, [event]);
-        }
-    }
-    return map;
-}
-export function getMonthDays(date) {
-    const monthStart = startOfMonth(date);
-    const gridStart = startOfWeek(monthStart, { weekStartsOn: 1 });
-    const days = [];
-    for (let i = 0; i < 42; i++) {
-        days.push(addDays(gridStart, i));
-    }
-    return days;
-}
-export function getWeekDays(date) {
-    const weekStart = startOfWeek(date, { weekStartsOn: 1 });
-    const days = [];
-    for (let i = 0; i < 7; i++) {
-        days.push(addDays(weekStart, i));
-    }
-    return days;
-}
-export function getHourSlots() {
-    return Array.from({ length: 24 }, (_, i) => i);
-}
-export function formatEventTime(date, locale) {
-    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date(date));
-}
-export function formatDay(date, locale) {
-    return new Intl.DateTimeFormat(locale, { day: "numeric" }).format(date);
-}
-export function formatWeekDay(date, locale) {
-    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
-}
-export function formatWeekdayLong(date, locale) {
-    return new Intl.DateTimeFormat(locale, { weekday: "long" }).format(date);
-}
-export function formatWeekdayShort(date, locale) {
-    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
-}
-export function formatMonthYear(date, locale) {
-    return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
-}
-export function formatMonthShort(date, locale) {
-    return new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
-}
-export function formatHourLabel(hour, locale) {
-    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date(0, 0, 0, hour));
-}
-export function formatFullDate(date, locale) {
-    return new Intl.DateTimeFormat(locale, { weekday: "long", month: "short", day: "numeric", year: "numeric" }).format(date);
-}
-export function formatTime(date, locale) {
-    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
-}
-export function getWeekNumber(date) {
-    return getISOWeek(date);
-}