@refraktor/dates 0.0.1

package/build/components/year-input/year-input.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useMemo } from "react";
+import { createClassNamesConfig, createComponentConfig, factory, Input, Transition, useClassNames, useProps, useTheme } from "@refraktor/core";
+import { autoUpdate, flip, FloatingFocusManager, FloatingPortal, inline, offset, shift, useDismiss, useFloating, useFocus, useInteractions, useRole } from "@floating-ui/react";
+import { useDates } from "../dates-provider";
+import { YearPicker } from "../year-picker";
+const DEFAULT_YEARS_PER_PAGE = 9;
+const DEFAULT_COLUMNS = 3;
+const DEFAULT_VALUE_FORMAT = "YYYY";
+const defaultProps = {
+    yearsPerPage: DEFAULT_YEARS_PER_PAGE,
+    columns: DEFAULT_COLUMNS,
+    valueFormat: DEFAULT_VALUE_FORMAT,
+    disabled: false,
+    size: "md",
+    radius: "default",
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: {
+        flip: true,
+        shift: true
+    },
+    withinPortal: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true
+};
+const toSafeInteger = (value) => {
+    if (!Number.isFinite(value)) {
+        return undefined;
+    }
+    return Math.trunc(value);
+};
+const YearInput = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { createDate } = useDates();
+    const { id, value, defaultValue, onChange, opened, defaultOpened, onOpenedChange, minYear, maxYear, yearsPerPage, columns, valueFormat, disabled, size, radius, positioning, middlewares, withinPortal, closeOnClickOutside, closeOnEscape, transitionProps, inputClassNames, className, classNames, onFocus, onBlur, onClick, onKeyDown, ...inputProps } = useProps("YearInput", defaultProps, _props);
+    const classes = useClassNames("YearInput", classNames);
+    const _id = useId(id);
+    const dropdownId = `${_id}-dropdown`;
+    const [selectedYearState, setSelectedYear] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: undefined,
+        onChange: (nextYear) => {
+            if (nextYear !== undefined) {
+                onChange?.(nextYear);
+            }
+        }
+    });
+    const [isOpenState, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const isOpen = isOpenState && !disabled;
+    const middleware = useMemo(() => {
+        const middlewareList = [];
+        middlewareList.push(offset(positioning?.offset ?? 4));
+        if (middlewares?.flip ?? true) {
+            middlewareList.push(flip(typeof middlewares?.flip === "boolean"
+                ? undefined
+                : middlewares.flip));
+        }
+        if (middlewares?.shift ?? true) {
+            middlewareList.push(shift(typeof middlewares?.shift === "boolean"
+                ? undefined
+                : middlewares.shift));
+        }
+        if (middlewares?.inline) {
+            middlewareList.push(inline(typeof middlewares.inline === "boolean"
+                ? undefined
+                : middlewares.inline));
+        }
+        return middlewareList;
+    }, [middlewares, positioning?.offset]);
+    const handleOpenChange = useCallback((nextOpen) => {
+        if (disabled && nextOpen) {
+            return;
+        }
+        setIsOpen(nextOpen);
+    }, [disabled, setIsOpen]);
+    const floating = useFloating({
+        placement: positioning?.placement ?? "bottom-start",
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        middleware,
+        whileElementsMounted: autoUpdate
+    });
+    const focus = useFocus(floating.context, {
+        enabled: !disabled
+    });
+    const dismiss = useDismiss(floating.context, {
+        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape
+    });
+    const role = useRole(floating.context, {
+        role: "dialog"
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        focus,
+        dismiss,
+        role
+    ]);
+    const setInputRef = useCallback((node) => {
+        floating.refs.setReference(node);
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [floating.refs, ref]);
+    const handleInputKeyDown = useCallback((event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        if (event.key === "ArrowDown" ||
+            event.key === "Enter" ||
+            event.key === " ") {
+            event.preventDefault();
+            setIsOpen(true);
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setIsOpen(false);
+        }
+    }, [disabled, onKeyDown, setIsOpen]);
+    const handleYearChange = useCallback((nextYear) => {
+        setSelectedYear(nextYear);
+        setIsOpen(false);
+    }, [setIsOpen, setSelectedYear]);
+    const selectedYear = toSafeInteger(selectedYearState);
+    const inputValue = selectedYear === undefined
+        ? ""
+        : createDate(new Date(selectedYear, 0, 1)).format(valueFormat);
+    const mergedReferenceProps = getReferenceProps({
+        onFocus,
+        onBlur,
+        onClick,
+        onKeyDown: handleInputKeyDown
+    });
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: isOpen, ...transitionProps, children: _jsx("div", { ref: floating.refs.setFloating, id: dropdownId, style: {
+                ...floating.floatingStyles
+            }, className: cx("w-60 z-50 border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] p-2 text-[var(--refraktor-text)] shadow-md", getRadius(radius), classes.dropdown), ...getFloatingProps(), children: _jsx(YearPicker, { value: selectedYear, onChange: handleYearChange, minYear: minYear, maxYear: maxYear, yearsPerPage: yearsPerPage, columns: columns, disabled: disabled, size: size, radius: radius, className: cx("bg-transparent p-0", classes.yearPicker) }) }) }));
+    const wrappedContent = isOpen ? (_jsx(FloatingFocusManager, { context: floating.context, modal: false, initialFocus: -1, returnFocus: false, children: dropdownContent })) : (dropdownContent);
+    return (_jsxs(_Fragment, { children: [_jsx(Input, { ref: setInputRef, id: _id, readOnly: true, value: inputValue, disabled: disabled, size: size, radius: radius, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": isOpen ? dropdownId : undefined, className: cx(classes.input, className), classNames: inputClassNames, ...inputProps, ...mergedReferenceProps }), withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent)] }));
+});
+YearInput.displayName = "@refraktor/dates/YearInput";
+YearInput.configure = createComponentConfig();
+YearInput.classNames = createClassNamesConfig();
+export default YearInput;

package/build/components/year-input/year-input.types.d.ts

@@ -0,0 +1,74 @@
+import type { FlipOptions, InlineOptions, Placement, ShiftOptions } from "@floating-ui/react";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload, InputFieldClassNames, InputProps, RefraktorRadius, RefraktorSize, TransitionProps } from "@refraktor/core";
+export type YearInputValue = number;
+export type YearInputSize = RefraktorSize;
+export type YearInputRadius = RefraktorRadius;
+export type YearInputOnChange = (value: YearInputValue) => void;
+export type YearInputValueFormat = string;
+export type YearInputPositioning = {
+    /** The placement of the dropdown relative to the input @default `bottom-start` */
+    placement?: Placement;
+    /** Offset distance from the input in pixels @default `4` */
+    offset?: number;
+};
+export type YearInputMiddlewares = {
+    shift?: boolean | ShiftOptions;
+    flip?: boolean | FlipOptions;
+    inline?: boolean | InlineOptions;
+};
+export type YearInputClassNames = {
+    input?: string;
+    dropdown?: string;
+    yearPicker?: string;
+};
+interface _YearInputProps {
+    /** Selected year (controlled). */
+    value?: YearInputValue;
+    /** Initial selected year (uncontrolled). */
+    defaultValue?: YearInputValue;
+    /** Callback called when selected year changes. */
+    onChange?: YearInputOnChange;
+    /** Dropdown open state (controlled). */
+    opened?: boolean;
+    /** Initial dropdown open state (uncontrolled). */
+    defaultOpened?: boolean;
+    /** Callback called when dropdown open state changes. */
+    onOpenedChange?: (opened: boolean) => void;
+    /** Minimum selectable year. */
+    minYear?: number;
+    /** Maximum selectable year. */
+    maxYear?: number;
+    /** Years rendered in one page @default `9` */
+    yearsPerPage?: number;
+    /** Grid columns used by the year list @default `3` */
+    columns?: number;
+    /** Dayjs format used to render selected year in the input @default `YYYY` */
+    valueFormat?: YearInputValueFormat;
+    /** Positioning settings for the dropdown. */
+    positioning?: YearInputPositioning;
+    /** Floating middleware settings. */
+    middlewares?: YearInputMiddlewares;
+    /** Whether to render dropdown in a portal @default `true` */
+    withinPortal?: boolean;
+    /** Whether to close on click outside @default `true` */
+    closeOnClickOutside?: boolean;
+    /** Whether to close on Escape key @default `true` */
+    closeOnEscape?: boolean;
+    /** Transition props for dropdown, uses Transition internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    /** Used for styling the core Input field parts. */
+    inputClassNames?: InputFieldClassNames;
+    /** Used for styling YearInput parts. */
+    classNames?: YearInputClassNames;
+}
+export type YearInputProps = _YearInputProps & Omit<InputProps, "value" | "defaultValue" | "onChange" | "readOnly" | "classNames">;
+export interface YearInputFactoryPayload extends FactoryPayload {
+    props: YearInputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<YearInputProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<YearInputClassNames>>;
+    };
+}
+export {};
+//# sourceMappingURL=year-input.types.d.ts.map

package/build/components/year-input/year-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"year-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/year-input/year-input.types.ts"],"names":[],"mappings":"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"}

package/build/components/year-input/year-input.types.js

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

package/build/components/year-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default as YearPicker } from "./year-picker";
+export type { YearPickerClassNames, YearPickerGetHeaderLabel, YearPickerGetNavigationAriaLabel, YearPickerGetYearAriaLabel, YearPickerGetYearLabel, YearPickerNavigationDirection, YearPickerOnChange, YearPickerProps, YearPickerRadius, YearPickerRange, YearPickerSize, YearPickerValue } from "./year-picker.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/year-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/year-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EACR,oBAAoB,EACpB,wBAAwB,EACxB,gCAAgC,EAChC,0BAA0B,EAC1B,sBAAsB,EACtB,6BAA6B,EAC7B,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,eAAe,EAClB,MAAM,qBAAqB,CAAC"}

package/build/components/year-picker/index.js

@@ -0,0 +1 @@
+export { default as YearPicker } from "./year-picker";

package/build/components/year-picker/year-picker.d.ts

@@ -0,0 +1,4 @@
+import { YearPickerFactoryPayload } from "./year-picker.types";
+declare const YearPicker: import("@refraktor/core").RefraktorComponent<YearPickerFactoryPayload>;
+export default YearPicker;
+//# sourceMappingURL=year-picker.d.ts.map

package/build/components/year-picker/year-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"year-picker.d.ts","sourceRoot":"","sources":["../../../src/components/year-picker/year-picker.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEH,wBAAwB,EAI3B,MAAM,qBAAqB,CAAC;AA2H7B,QAAA,MAAM,UAAU,wEAiWd,CAAC;AAMH,eAAe,UAAU,CAAC"}

package/build/components/year-picker/year-picker.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useEffect, useMemo, useState } from "react";
+import { createClassNamesConfig, createComponentConfig, factory, useTheme, useClassNames, useProps } from "@refraktor/core";
+import { getGridColumns, getPickerSizeStyles, PickerHeader } from "../picker-shared";
+const DEFAULT_YEARS_PER_PAGE = 9;
+const DEFAULT_COLUMNS = 3;
+const defaultProps = {
+    yearsPerPage: DEFAULT_YEARS_PER_PAGE,
+    columns: DEFAULT_COLUMNS,
+    disabled: false,
+    size: "md",
+    radius: "default"
+};
+const toSafeInteger = (value, fallback) => {
+    if (!Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.trunc(value);
+};
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const getBounds = (minYear, maxYear) => {
+    const hasMin = Number.isFinite(minYear);
+    const hasMax = Number.isFinite(maxYear);
+    const min = hasMin
+        ? Math.trunc(minYear)
+        : Number.MIN_SAFE_INTEGER;
+    const max = hasMax
+        ? Math.trunc(maxYear)
+        : Number.MAX_SAFE_INTEGER;
+    if (min <= max) {
+        return { min, max, hasMin, hasMax };
+    }
+    return {
+        min: max,
+        max: min,
+        hasMin,
+        hasMax
+    };
+};
+const getCenteredRangeStart = (year, yearsPerPage) => year - Math.floor(yearsPerPage / 2);
+const clampRangeStart = (rangeStart, bounds, yearsPerPage) => {
+    const totalVisibleYears = bounds.max - bounds.min + 1;
+    if (totalVisibleYears <= yearsPerPage) {
+        return bounds.min;
+    }
+    const maxStart = bounds.max - yearsPerPage + 1;
+    return clamp(rangeStart, bounds.min, maxStart);
+};
+const getRangeEnd = (rangeStart, yearsPerPage, bounds) => Math.min(rangeStart + yearsPerPage - 1, bounds.max);
+const ensureRangeContainsYear = (year, rangeStart, bounds, yearsPerPage) => {
+    const normalizedRangeStart = clampRangeStart(rangeStart, bounds, yearsPerPage);
+    const rangeEnd = getRangeEnd(normalizedRangeStart, yearsPerPage, bounds);
+    if (year >= normalizedRangeStart && year <= rangeEnd) {
+        return normalizedRangeStart;
+    }
+    return clampRangeStart(getCenteredRangeStart(year, yearsPerPage), bounds, yearsPerPage);
+};
+const getVisibleYears = (rangeStart, bounds, yearsPerPage) => {
+    const years = [];
+    for (let index = 0; index < yearsPerPage; index += 1) {
+        const year = rangeStart + index;
+        if (year < bounds.min || year > bounds.max) {
+            continue;
+        }
+        years.push(year);
+    }
+    return years;
+};
+const YearPicker = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, value, defaultValue, onChange, minYear, maxYear, yearsPerPage, columns, disabled, size, radius, getYearLabel, getYearAriaLabel, getHeaderLabel, getNavigationAriaLabel, className, classNames, ...props } = useProps("YearPicker", defaultProps, _props);
+    const classes = useClassNames("YearPicker", classNames);
+    const _id = useId(id);
+    const currentYear = new Date().getFullYear();
+    const bounds = useMemo(() => getBounds(minYear, maxYear), [minYear, maxYear]);
+    const safeYearsPerPage = Math.max(1, toSafeInteger(yearsPerPage, DEFAULT_YEARS_PER_PAGE));
+    const safeColumns = clamp(toSafeInteger(columns, DEFAULT_COLUMNS), 1, Math.min(6, safeYearsPerPage));
+    const [selectedYearState, setSelectedYear, isControlled] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: undefined,
+        onChange: (nextYear) => {
+            if (nextYear !== undefined) {
+                onChange?.(nextYear);
+            }
+        }
+    });
+    const initialSelectedYear = clamp(toSafeInteger(selectedYearState, currentYear), bounds.min, bounds.max);
+    const [rangeStart, setRangeStart] = useState(() => clampRangeStart(getCenteredRangeStart(initialSelectedYear, safeYearsPerPage), bounds, safeYearsPerPage));
+    const selectedYear = selectedYearState === undefined
+        ? undefined
+        : clamp(toSafeInteger(selectedYearState, currentYear), bounds.min, bounds.max);
+    const rangeAnchorYear = selectedYear ?? clamp(currentYear, bounds.min, bounds.max);
+    useEffect(() => {
+        if (isControlled) {
+            return;
+        }
+        if (selectedYearState === undefined || selectedYear === undefined) {
+            return;
+        }
+        if (selectedYearState !== selectedYear) {
+            setSelectedYear(selectedYear);
+        }
+    }, [
+        bounds.max,
+        bounds.min,
+        isControlled,
+        selectedYear,
+        selectedYearState,
+        setSelectedYear
+    ]);
+    useEffect(() => {
+        setRangeStart((previousRangeStart) => ensureRangeContainsYear(rangeAnchorYear, previousRangeStart, bounds, safeYearsPerPage));
+    }, [bounds, rangeAnchorYear, safeYearsPerPage]);
+    const visibleYears = useMemo(() => getVisibleYears(rangeStart, bounds, safeYearsPerPage), [bounds, rangeStart, safeYearsPerPage]);
+    const visibleRange = {
+        start: visibleYears[0] ?? rangeStart,
+        end: visibleYears[visibleYears.length - 1] ??
+            getRangeEnd(rangeStart, safeYearsPerPage, bounds)
+    };
+    const sizeStyles = getPickerSizeStyles(size);
+    const canGoPrevious = !disabled && (!bounds.hasMin || rangeStart > bounds.min);
+    const canGoNext = !disabled &&
+        (!bounds.hasMax ||
+            getRangeEnd(rangeStart, safeYearsPerPage, bounds) < bounds.max);
+    const resolveNavigationLabel = (direction) => {
+        if (getNavigationAriaLabel) {
+            return getNavigationAriaLabel(direction, visibleRange);
+        }
+        return direction === "previous"
+            ? "Show previous years"
+            : "Show next years";
+    };
+    const resolveYearAriaLabel = (year, isSelected) => {
+        if (getYearAriaLabel) {
+            return getYearAriaLabel(year, isSelected);
+        }
+        return isSelected ? `Year ${year}, selected` : `Choose year ${year}`;
+    };
+    const setYear = (nextYear) => {
+        if (disabled) {
+            return;
+        }
+        const normalizedYear = clamp(nextYear, bounds.min, bounds.max);
+        if (normalizedYear === selectedYear) {
+            return;
+        }
+        setSelectedYear(normalizedYear);
+    };
+    const shiftRange = (direction) => {
+        setRangeStart((previousRangeStart) => clampRangeStart(previousRangeStart + direction * safeYearsPerPage, bounds, safeYearsPerPage));
+    };
+    const handlePrevious = () => {
+        if (!canGoPrevious) {
+            return;
+        }
+        shiftRange(-1);
+    };
+    const handleNext = () => {
+        if (!canGoNext) {
+            return;
+        }
+        shiftRange(1);
+    };
+    const handleYearSelect = (year) => {
+        setRangeStart((previousRangeStart) => ensureRangeContainsYear(year, previousRangeStart, bounds, safeYearsPerPage));
+        setYear(year);
+    };
+    const handleGridKeyDown = (event) => {
+        if (disabled) {
+            return;
+        }
+        const keyboardBaseYear = selectedYear ?? visibleYears[0] ?? rangeAnchorYear;
+        const keyboardSteps = {
+            ArrowLeft: -1,
+            ArrowRight: 1,
+            ArrowUp: -safeColumns,
+            ArrowDown: safeColumns
+        };
+        const step = keyboardSteps[event.key];
+        if (step !== undefined) {
+            event.preventDefault();
+            const nextYear = clamp(keyboardBaseYear + step, bounds.min, bounds.max);
+            handleYearSelect(nextYear);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            if (visibleYears.length > 0) {
+                handleYearSelect(visibleYears[0]);
+            }
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            if (visibleYears.length > 0) {
+                handleYearSelect(visibleYears[visibleYears.length - 1]);
+            }
+            return;
+        }
+        if (event.key === "PageUp") {
+            event.preventDefault();
+            handleYearSelect(keyboardBaseYear - safeYearsPerPage);
+            return;
+        }
+        if (event.key === "PageDown") {
+            event.preventDefault();
+            handleYearSelect(keyboardBaseYear + safeYearsPerPage);
+        }
+    };
+    const hasVisibleSelection = selectedYear !== undefined && visibleYears.includes(selectedYear);
+    return (_jsxs("div", { ref: ref, id: _id, className: cx("inline-flex w-full flex-col gap-2 bg-[var(--refraktor-bg)] p-2", getRadius(radius), classes.root, className), ...props, children: [_jsx(PickerHeader, { label: getHeaderLabel
+                    ? getHeaderLabel(visibleRange)
+                    : `${visibleRange.start} - ${visibleRange.end}`, onPrevious: handlePrevious, onNext: handleNext, previousDisabled: !canGoPrevious, nextDisabled: !canGoNext, previousLabel: resolveNavigationLabel("previous"), nextLabel: resolveNavigationLabel("next"), size: size, radius: radius, classNames: {
+                    root: classes.header,
+                    controls: classes.headerControls,
+                    control: classes.headerControl,
+                    previousControl: classes.headerPreviousControl,
+                    nextControl: classes.headerNextControl,
+                    label: classes.headerLabel
+                } }), _jsx("div", { role: "grid", "aria-label": "Year picker", className: cx("grid", getGridColumns(safeColumns), sizeStyles.gridGap, classes.grid), onKeyDown: handleGridKeyDown, children: visibleYears.map((year, index) => {
+                    const isSelected = year === selectedYear;
+                    const tabIndex = isSelected || (!hasVisibleSelection && index === 0)
+                        ? 0
+                        : -1;
+                    return (_jsx("button", { type: "button", role: "gridcell", "aria-selected": isSelected, "aria-label": resolveYearAriaLabel(year, isSelected), tabIndex: tabIndex, "data-active": isSelected, "data-disabled": disabled, disabled: disabled, className: cx("inline-flex items-center justify-center font-medium text-[var(--refraktor-text)] transition-colors", isSelected
+                            ? "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]"
+                            : "hover:bg-[var(--refraktor-bg-hover)]", disabled &&
+                            "pointer-events-none cursor-not-allowed opacity-50 data-[disabled=true]:pointer-events-none", sizeStyles.cell, getRadius(radius), classes.year), onClick: () => handleYearSelect(year), children: getYearLabel ? getYearLabel(year) : year }, year));
+                }) })] }));
+});
+YearPicker.displayName = "@refraktor/dates/YearPicker";
+YearPicker.configure = createComponentConfig();
+YearPicker.classNames = createClassNamesConfig();
+export default YearPicker;

package/build/components/year-picker/year-picker.types.d.ts

@@ -0,0 +1,70 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize, createClassNamesConfig, createComponentConfig, FactoryPayload } from "@refraktor/core";
+export type YearPickerValue = number;
+export type YearPickerSize = RefraktorSize;
+export type YearPickerRadius = RefraktorRadius;
+export type YearPickerNavigationDirection = "previous" | "next";
+export type YearPickerRange = {
+    start: number;
+    end: number;
+};
+export type YearPickerOnChange = (year: YearPickerValue) => void;
+export type YearPickerGetYearLabel = (year: YearPickerValue) => ReactNode;
+export type YearPickerGetYearAriaLabel = (year: YearPickerValue, selected: boolean) => string;
+export type YearPickerGetHeaderLabel = (range: YearPickerRange) => ReactNode;
+export type YearPickerGetNavigationAriaLabel = (direction: YearPickerNavigationDirection, range: YearPickerRange) => string;
+export type YearPickerClassNames = {
+    root?: string;
+    header?: string;
+    headerControls?: string;
+    headerControl?: string;
+    headerPreviousControl?: string;
+    headerNextControl?: string;
+    headerLabel?: string;
+    grid?: string;
+    year?: string;
+    yearActive?: string;
+};
+export interface YearPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Active year (controlled). */
+    value?: YearPickerValue;
+    /** Initial active year (uncontrolled). */
+    defaultValue?: YearPickerValue;
+    /** Callback called when active year changes. */
+    onChange?: YearPickerOnChange;
+    /** Minimum selectable year. */
+    minYear?: number;
+    /** Maximum selectable year. */
+    maxYear?: number;
+    /** Years rendered in one page @default `9` */
+    yearsPerPage?: number;
+    /** Grid columns used by the year list @default `3` */
+    columns?: number;
+    /** Whether all year controls are disabled @default `false` */
+    disabled?: boolean;
+    /** Component size @default `md` */
+    size?: YearPickerSize;
+    /** Border radius @default `default` */
+    radius?: YearPickerRadius;
+    /** Custom year label renderer. */
+    getYearLabel?: YearPickerGetYearLabel;
+    /** Custom aria-label generator for year buttons. */
+    getYearAriaLabel?: YearPickerGetYearAriaLabel;
+    /** Custom header label renderer for visible range. */
+    getHeaderLabel?: YearPickerGetHeaderLabel;
+    /** Custom aria-label generator for previous/next controls. */
+    getNavigationAriaLabel?: YearPickerGetNavigationAriaLabel;
+    /** Used for editing root class name. */
+    className?: string;
+    /** Used for styling different parts of the component. */
+    classNames?: YearPickerClassNames;
+}
+export interface YearPickerFactoryPayload extends FactoryPayload {
+    props: YearPickerProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<YearPickerProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<YearPickerClassNames>>;
+    };
+}
+//# sourceMappingURL=year-picker.types.d.ts.map

package/build/components/year-picker/year-picker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"year-picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/year-picker/year-picker.types.ts"],"names":[],"mappings":"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"}

package/build/components/year-picker/year-picker.types.js

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

package/build/index.d.ts

@@ -0,0 +1,3 @@
+import "./style.css";
+export * from "./components";
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,cAAc,cAAc,CAAC"}

package/build/index.js

@@ -0,0 +1,2 @@
+import "./style.css";
+export * from "./components";

package/build/style.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.relative{position:relative}.z-50{z-index:50}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-7{width:calc(var(--spacing)*7);height:calc(var(--spacing)*7)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.w-60{width:calc(var(--spacing)*60)}.w-72{width:calc(var(--spacing)*72)}.w-80{width:calc(var(--spacing)*80)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.rotate-180{rotate:180deg}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.border-\[var\(--refraktor-border\)\]{border-color:var(--refraktor-border)}.bg-\[var\(--refraktor-bg\)\]{background-color:var(--refraktor-bg)}.bg-\[var\(--refraktor-primary\)\]{background-color:var(--refraktor-primary)}.bg-transparent{background-color:#0000}.p-0{padding:calc(var(--spacing)*0)}.p-2{padding:calc(var(--spacing)*2)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.text-center{text-align:center}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-\[var\(--refraktor-primary-text\)\]{color:var(--refraktor-primary-text)}.text-\[var\(--refraktor-text\)\]{color:var(--refraktor-text)}.text-\[var\(--refraktor-text-secondary\)\]{color:var(--refraktor-text-secondary)}.opacity-50{opacity:.5}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-\[var\(--refraktor-primary\)\]{--tw-ring-color:var(--refraktor-primary)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:bg-\[var\(--refraktor-bg-hover\)\]:hover{background-color:var(--refraktor-bg-hover)}.hover\:bg-\[var\(--refraktor-primary\)\]:hover{background-color:var(--refraktor-primary)}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-\[var\(--refraktor-primary\)\]:focus-visible{outline-color:var(--refraktor-primary)}.data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.data-\[disabled\=true\]\:cursor-not-allowed[data-disabled=true]{cursor:not-allowed}.data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@refraktor/dates",
+    "version": "0.0.1",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./build/index.js",
+    "module": "./build/index.js",
+    "types": "./build/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./build/index.d.ts",
+            "import": "./build/index.js"
+        },
+        "./style.css": "./build/style.css"
+    },
+    "scripts": {
+        "build": "tsc && tailwindcss -i src/style.css -o build/style.css --minify",
+        "dev": "concurrently \"tsc --watch\" \"tailwindcss -i src/style.css -o build/style.css --watch\"",
+        "test": "vitest"
+    },
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "dayjs": "^1.11.19",
+        "@refraktor/core": "0.0.1",
+        "@refraktor/utils": "0.0.1"
+    },
+    "devDependencies": {
+        "typescript": "^5.9.3"
+    },
+    "dependencies": {
+        "@floating-ui/react": "^0.27.6",
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.4.0"
+    }
+}