@refraktor/dates 0.0.1

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

@@ -0,0 +1,229 @@
+import { jsx as _jsx, Fragment as _Fragment, 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";
+import { useDates } from "../dates-provider";
+import { YearPicker } from "../year-picker";
+const DEFAULT_COLUMNS = 3;
+const DEFAULT_YEAR_PICKER_YEARS_PER_PAGE = 9;
+const DEFAULT_YEAR_PICKER_COLUMNS = 3;
+const MONTHS_IN_YEAR = 12;
+const defaultProps = {
+    columns: DEFAULT_COLUMNS,
+    yearPickerYearsPerPage: DEFAULT_YEAR_PICKER_YEARS_PER_PAGE,
+    yearPickerColumns: DEFAULT_YEAR_PICKER_COLUMNS,
+    disabled: false,
+    size: "md",
+    radius: "default"
+};
+const isValidDate = (value) => value instanceof Date && !Number.isNaN(value.getTime());
+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 createMonthValue = (baseDate, year, month) => {
+    const nextDate = new Date(baseDate);
+    nextDate.setFullYear(year, month, 1);
+    nextDate.setHours(0, 0, 0, 0);
+    return nextDate;
+};
+const isSameMonth = (first, second) => first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth();
+const MonthPicker = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { createDate } = useDates();
+    const { id, value, defaultValue, onChange, minYear, maxYear, columns, yearPickerYearsPerPage, yearPickerColumns, disabled, size, radius, getMonthLabel, getMonthAriaLabel, getHeaderLabel, getNavigationAriaLabel, className, classNames, ...props } = useProps("MonthPicker", defaultProps, _props);
+    const classes = useClassNames("MonthPicker", classNames);
+    const _id = useId(id);
+    const today = new Date();
+    const currentYear = today.getFullYear();
+    const bounds = useMemo(() => getBounds(minYear, maxYear), [minYear, maxYear]);
+    const safeColumns = clamp(toSafeInteger(columns, DEFAULT_COLUMNS), 1, Math.min(6, MONTHS_IN_YEAR));
+    const safeYearPickerYearsPerPage = Math.max(1, toSafeInteger(yearPickerYearsPerPage, DEFAULT_YEAR_PICKER_YEARS_PER_PAGE));
+    const safeYearPickerColumns = clamp(toSafeInteger(yearPickerColumns, DEFAULT_YEAR_PICKER_COLUMNS), 1, Math.min(6, safeYearPickerYearsPerPage));
+    const [selectedDateState, setSelectedDate] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: undefined,
+        onChange: (nextDate) => {
+            if (nextDate !== undefined) {
+                onChange?.(nextDate);
+            }
+        }
+    });
+    const selectedDate = isValidDate(selectedDateState)
+        ? selectedDateState
+        : undefined;
+    const selectedYear = selectedDate?.getFullYear();
+    const [displayedYear, setDisplayedYear] = useState(() => clamp(selectedYear ?? currentYear, bounds.min, bounds.max));
+    const [view, setView] = useState("month");
+    useEffect(() => {
+        setDisplayedYear((previousYear) => clamp(previousYear, bounds.min, bounds.max));
+    }, [bounds.max, bounds.min]);
+    useEffect(() => {
+        if (selectedYear === undefined) {
+            return;
+        }
+        const normalizedYear = clamp(selectedYear, bounds.min, bounds.max);
+        setDisplayedYear((previousYear) => {
+            if (previousYear === normalizedYear) {
+                return previousYear;
+            }
+            return normalizedYear;
+        });
+    }, [bounds.max, bounds.min, selectedYear]);
+    const canGoPrevious = !disabled && (!bounds.hasMin || displayedYear > bounds.min);
+    const canGoNext = !disabled && (!bounds.hasMax || displayedYear < bounds.max);
+    const sizeStyles = getPickerSizeStyles(size);
+    const resolveNavigationLabel = (direction) => {
+        if (getNavigationAriaLabel) {
+            return getNavigationAriaLabel(direction, displayedYear);
+        }
+        return direction === "previous"
+            ? `Show previous year (${displayedYear - 1})`
+            : `Show next year (${displayedYear + 1})`;
+    };
+    const monthItems = useMemo(() => Array.from({ length: MONTHS_IN_YEAR }, (_, month) => {
+        const dayjsMonth = createDate(new Date(displayedYear, month, 1));
+        return {
+            month,
+            label: getMonthLabel
+                ? getMonthLabel(month, displayedYear, dayjsMonth.toDate())
+                : dayjsMonth.format("MMM"),
+            fullLabel: dayjsMonth.format("MMMM")
+        };
+    }), [createDate, displayedYear, getMonthLabel]);
+    const selectedMonth = selectedDate !== undefined && selectedDate.getFullYear() === displayedYear
+        ? selectedDate.getMonth()
+        : undefined;
+    const resolveMonthAriaLabel = (month, isSelected) => {
+        if (getMonthAriaLabel) {
+            return getMonthAriaLabel(month, displayedYear, isSelected);
+        }
+        const fullMonthLabel = monthItems[month]?.fullLabel ?? `Month ${month + 1}`;
+        return isSelected
+            ? `${fullMonthLabel} ${displayedYear}, selected`
+            : `Choose ${fullMonthLabel} ${displayedYear}`;
+    };
+    const handleMonthSelect = (month, year = displayedYear) => {
+        if (disabled) {
+            return;
+        }
+        const normalizedMonth = clamp(month, 0, MONTHS_IN_YEAR - 1);
+        const normalizedYear = clamp(year, bounds.min, bounds.max);
+        setDisplayedYear(normalizedYear);
+        const baseDate = selectedDate ?? today;
+        const nextDate = createMonthValue(baseDate, normalizedYear, normalizedMonth);
+        if (selectedDate && isSameMonth(selectedDate, nextDate)) {
+            return;
+        }
+        setSelectedDate(nextDate);
+    };
+    const shiftYear = (direction) => {
+        setDisplayedYear((previousYear) => clamp(previousYear + direction, bounds.min, bounds.max));
+    };
+    const handlePrevious = () => {
+        if (!canGoPrevious) {
+            return;
+        }
+        shiftYear(-1);
+    };
+    const handleNext = () => {
+        if (!canGoNext) {
+            return;
+        }
+        shiftYear(1);
+    };
+    const handleGridKeyDown = (event) => {
+        if (disabled) {
+            return;
+        }
+        const keyboardBaseMonth = selectedMonth ?? 0;
+        const keyboardSteps = {
+            ArrowLeft: -1,
+            ArrowRight: 1,
+            ArrowUp: -safeColumns,
+            ArrowDown: safeColumns
+        };
+        const step = keyboardSteps[event.key];
+        if (step !== undefined) {
+            event.preventDefault();
+            handleMonthSelect(keyboardBaseMonth + step);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            handleMonthSelect(0);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            handleMonthSelect(MONTHS_IN_YEAR - 1);
+            return;
+        }
+        if (event.key === "PageUp") {
+            event.preventDefault();
+            handleMonthSelect(keyboardBaseMonth, displayedYear - 1);
+            return;
+        }
+        if (event.key === "PageDown") {
+            event.preventDefault();
+            handleMonthSelect(keyboardBaseMonth, displayedYear + 1);
+        }
+    };
+    const handleHeaderLabelClick = () => {
+        if (disabled) {
+            return;
+        }
+        setView("year");
+    };
+    const handleYearSelect = (year) => {
+        setDisplayedYear(clamp(year, bounds.min, bounds.max));
+        setView("month");
+    };
+    const hasVisibleSelection = selectedMonth !== undefined;
+    return (_jsx("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: view === "year" ? (_jsx(YearPicker, { value: displayedYear, onChange: handleYearSelect, minYear: minYear, maxYear: maxYear, yearsPerPage: safeYearPickerYearsPerPage, columns: safeYearPickerColumns, disabled: disabled, size: size, radius: radius, className: cx("bg-transparent p-0", classes.yearPicker) })) : (_jsxs(_Fragment, { children: [_jsx(PickerHeader, { label: getHeaderLabel ? getHeaderLabel(displayedYear) : displayedYear, onPrevious: handlePrevious, onNext: handleNext, onLabelClick: disabled ? undefined : handleHeaderLabelClick, 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": `Month picker, ${displayedYear}`, className: cx("grid", getGridColumns(safeColumns), sizeStyles.gridGap, classes.grid), onKeyDown: handleGridKeyDown, children: monthItems.map(({ month, label }) => {
+                        const isSelected = month === selectedMonth;
+                        const tabIndex = isSelected || (!hasVisibleSelection && month === 0)
+                            ? 0
+                            : -1;
+                        return (_jsx("button", { type: "button", role: "gridcell", "aria-selected": isSelected, "aria-label": resolveMonthAriaLabel(month, 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.month, isSelected && classes.monthActive), onClick: () => handleMonthSelect(month), children: label }, month));
+                    }) })] })) }));
+});
+MonthPicker.displayName = "@refraktor/dates/MonthPicker";
+MonthPicker.configure = createComponentConfig();
+MonthPicker.classNames = createClassNamesConfig();
+export default MonthPicker;

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

@@ -0,0 +1,69 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { RefraktorRadius, RefraktorSize, createClassNamesConfig, createComponentConfig, FactoryPayload } from "@refraktor/core";
+export type MonthPickerValue = Date;
+export type MonthPickerSize = RefraktorSize;
+export type MonthPickerRadius = RefraktorRadius;
+export type MonthPickerNavigationDirection = "previous" | "next";
+export type MonthPickerOnChange = (value: MonthPickerValue) => void;
+export type MonthPickerGetMonthLabel = (month: number, year: number, value: Date) => ReactNode;
+export type MonthPickerGetMonthAriaLabel = (month: number, year: number, selected: boolean) => string;
+export type MonthPickerGetHeaderLabel = (year: number) => ReactNode;
+export type MonthPickerGetNavigationAriaLabel = (direction: MonthPickerNavigationDirection, year: number) => string;
+export type MonthPickerClassNames = {
+    root?: string;
+    header?: string;
+    headerControls?: string;
+    headerControl?: string;
+    headerPreviousControl?: string;
+    headerNextControl?: string;
+    headerLabel?: string;
+    grid?: string;
+    month?: string;
+    monthActive?: string;
+    yearPicker?: string;
+};
+export interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "value" | "defaultValue"> {
+    /** Active month (controlled). */
+    value?: MonthPickerValue;
+    /** Initial active month (uncontrolled). */
+    defaultValue?: MonthPickerValue;
+    /** Callback called when active month changes. */
+    onChange?: MonthPickerOnChange;
+    /** Minimum available year in month and year views. */
+    minYear?: number;
+    /** Maximum available year in month and year views. */
+    maxYear?: number;
+    /** Grid columns used by the month list @default `3` */
+    columns?: number;
+    /** Year picker years rendered in one page @default `9` */
+    yearPickerYearsPerPage?: number;
+    /** Year picker columns @default `3` */
+    yearPickerColumns?: number;
+    /** Whether all controls are disabled @default `false` */
+    disabled?: boolean;
+    /** Component size @default `md` */
+    size?: MonthPickerSize;
+    /** Border radius @default `default` */
+    radius?: MonthPickerRadius;
+    /** Custom month label renderer. */
+    getMonthLabel?: MonthPickerGetMonthLabel;
+    /** Custom aria-label generator for month buttons. */
+    getMonthAriaLabel?: MonthPickerGetMonthAriaLabel;
+    /** Custom header label renderer for visible year. */
+    getHeaderLabel?: MonthPickerGetHeaderLabel;
+    /** Custom aria-label generator for previous/next controls. */
+    getNavigationAriaLabel?: MonthPickerGetNavigationAriaLabel;
+    /** Used for editing root class name. */
+    className?: string;
+    /** Used for styling different parts of the component. */
+    classNames?: MonthPickerClassNames;
+}
+export interface MonthPickerFactoryPayload extends FactoryPayload {
+    props: MonthPickerProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<MonthPickerProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<MonthPickerClassNames>>;
+    };
+}
+//# sourceMappingURL=month-picker.types.d.ts.map

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

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

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

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

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

@@ -0,0 +1,5 @@
+export { default as PickerHeader } from "./picker-header";
+export type { PickerHeaderClassNames, PickerHeaderProps } from "./picker-header.types";
+export { getGridColumns, getPickerSizeStyles } from "./picker.styles";
+export type { PickerRadius, PickerSize } from "./picker.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/picker-shared/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EACR,sBAAsB,EACtB,iBAAiB,EACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as PickerHeader } from "./picker-header";
+export { getGridColumns, getPickerSizeStyles } from "./picker.styles";

package/build/components/picker-shared/picker-header.d.ts

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

package/build/components/picker-shared/picker-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker-header.d.ts","sourceRoot":"","sources":["../../../src/components/picker-shared/picker-header.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,0BAA0B,EAE7B,MAAM,uBAAuB,CAAC;AAoC/B,QAAA,MAAM,YAAY,0EA0HhB,CAAC;AAMH,eAAe,YAAY,CAAC"}

package/build/components/picker-shared/picker-header.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createClassNamesConfig, createComponentConfig, factory, useTheme, useClassNames, useProps } from "@refraktor/core";
+import { getPickerSizeStyles } from "./picker.styles";
+const defaultProps = {
+    previousDisabled: false,
+    nextDisabled: false,
+    previousLabel: "Show previous period",
+    nextLabel: "Show next period",
+    size: "md",
+    radius: "default"
+};
+const ChevronIcon = ({ direction, size }) => (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "none", width: size, height: size, className: direction === "right" ? "rotate-180" : undefined, children: _jsx("path", { d: "M9.5 3.5L5 8l4.5 4.5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const PickerHeader = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { label, onPrevious, onNext, onLabelClick, previousDisabled, nextDisabled, previousLabel, nextLabel, size, radius, className, classNames, ...props } = useProps("PickerHeader", defaultProps, _props);
+    const classes = useClassNames("PickerHeader", classNames);
+    const sizeStyles = getPickerSizeStyles(size);
+    const radiusStyles = getRadius(radius);
+    const isPreviousDisabled = previousDisabled || !onPrevious;
+    const isNextDisabled = nextDisabled || !onNext;
+    const getStyles = (part) => classes[part];
+    return (_jsxs("div", { ref: ref, className: cx("flex items-center justify-between gap-2", getStyles("root"), className), ...props, children: [_jsx("div", { className: cx("inline-flex shrink-0 items-center gap-1", getStyles("controls")), children: _jsx("button", { type: "button", "aria-label": previousLabel, "aria-disabled": isPreviousDisabled, "data-disabled": isPreviousDisabled, disabled: isPreviousDisabled, onClick: onPrevious, className: cx("inline-flex items-center justify-center cursor-pointer", "text-[var(--refraktor-text)] transition-colors hover:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", sizeStyles.control, radiusStyles, getStyles("control"), getStyles("previousControl")), children: _jsx(ChevronIcon, { direction: "left", size: sizeStyles.iconSize }) }) }), _jsx("div", { className: cx("min-w-0 flex-1 truncate text-center font-medium text-[var(--refraktor-text)]", sizeStyles.label, getStyles("label")), children: onLabelClick ? (_jsx("button", { type: "button", onClick: onLabelClick, className: cx("inline-flex w-full cursor-pointer items-center justify-center text-center transition-colors hover:bg-[var(--refraktor-bg-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]", sizeStyles.labelButton, radiusStyles, getStyles("labelButton")), children: _jsx("span", { className: cx("truncate", getStyles("labelText")), children: label }) })) : (_jsx("span", { className: cx("truncate", getStyles("labelText")), children: label })) }), _jsx("div", { className: cx("inline-flex shrink-0 items-center gap-1", getStyles("controls")), children: _jsx("button", { type: "button", "aria-label": nextLabel, "aria-disabled": isNextDisabled, "data-disabled": isNextDisabled, disabled: isNextDisabled, onClick: onNext, className: cx("inline-flex items-center justify-center cursor-pointer", "text-[var(--refraktor-text)] transition-colors hover:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", sizeStyles.control, radiusStyles, getStyles("control"), getStyles("nextControl")), children: _jsx(ChevronIcon, { direction: "right", size: sizeStyles.iconSize }) }) })] }));
+});
+PickerHeader.displayName = "@refraktor/dates/PickerHeader";
+PickerHeader.configure = createComponentConfig();
+PickerHeader.classNames = createClassNamesConfig();
+export default PickerHeader;

package/build/components/picker-shared/picker-header.types.d.ts

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from "react";
+import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "@refraktor/core";
+import { PickerRadius, PickerSize } from "./picker.types";
+export type PickerHeaderClassNames = {
+    root?: string;
+    controls?: string;
+    control?: string;
+    previousControl?: string;
+    nextControl?: string;
+    label?: string;
+    labelButton?: string;
+    labelText?: string;
+};
+export interface PickerHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    label: ReactNode;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    onLabelClick?: MouseEventHandler<HTMLButtonElement>;
+    previousDisabled?: boolean;
+    nextDisabled?: boolean;
+    previousLabel?: string;
+    nextLabel?: string;
+    size?: PickerSize;
+    radius?: PickerRadius;
+    className?: string;
+    classNames?: PickerHeaderClassNames;
+}
+export interface PickerHeaderFactoryPayload extends FactoryPayload {
+    props: PickerHeaderProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<PickerHeaderProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<PickerHeaderClassNames>>;
+    };
+}
+//# sourceMappingURL=picker-header.types.d.ts.map

package/build/components/picker-shared/picker-header.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker-header.types.d.ts","sourceRoot":"","sources":["../../../src/components/picker-shared/picker-header.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,wBAAwB,EACxB,iBAAiB,EACjB,SAAS,EACZ,MAAM,OAAO,CAAC;AACf,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,iBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACvC;AAED,MAAM,WAAW,0BAA2B,SAAQ,cAAc;IAC9D,KAAK,EAAE,iBAAiB,CAAC;IACzB,GAAG,EAAE,cAAc,CAAC;IACpB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,CAAC;QACvE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,sBAAsB,CAAC,CACxD,CAAC;KACL,CAAC;CACL"}

package/build/components/picker-shared/picker-header.types.js

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

package/build/components/picker-shared/picker.styles.d.ts

@@ -0,0 +1,12 @@
+import { PickerSize } from "./picker.types";
+export type PickerSizeStyles = {
+    control: string;
+    label: string;
+    labelButton: string;
+    cell: string;
+    gridGap: string;
+    iconSize: number;
+};
+export declare const getPickerSizeStyles: (size?: PickerSize) => PickerSizeStyles;
+export declare const getGridColumns: (columns: number) => string;
+//# sourceMappingURL=picker.styles.d.ts.map

package/build/components/picker-shared/picker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/picker-shared/picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAuDF,eAAO,MAAM,mBAAmB,GAAI,OAAM,UAAiB,qBACpB,CAAC;AAExC,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,WACJ,CAAC"}

package/build/components/picker-shared/picker.styles.js

@@ -0,0 +1,53 @@
+const pickerSizes = {
+    xs: {
+        control: "size-6 text-xs",
+        label: "text-xs",
+        labelButton: "py-0.5 px-1",
+        cell: "h-7 px-1 text-xs",
+        gridGap: "gap-1",
+        iconSize: 12
+    },
+    sm: {
+        control: "size-7 text-xs",
+        label: "text-xs",
+        labelButton: "py-0.5 px-1",
+        cell: "h-8 px-1.5 text-xs",
+        gridGap: "gap-1",
+        iconSize: 14
+    },
+    md: {
+        control: "size-8 text-sm",
+        label: "text-sm",
+        labelButton: "py-1 px-1.5",
+        cell: "h-9 px-2 text-sm",
+        gridGap: "gap-1.5",
+        iconSize: 16
+    },
+    lg: {
+        control: "size-9 text-base",
+        label: "text-base",
+        labelButton: "py-1 px-2",
+        cell: "h-10 px-2.5 text-base",
+        gridGap: "gap-2",
+        iconSize: 18
+    },
+    xl: {
+        control: "size-10 text-lg",
+        label: "text-lg",
+        labelButton: "py-1.5 px-2.5",
+        cell: "h-11 px-3 text-lg",
+        gridGap: "gap-2",
+        iconSize: 20
+    }
+};
+const gridColumns = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7"
+};
+export const getPickerSizeStyles = (size = "md") => pickerSizes[size] ?? pickerSizes.md;
+export const getGridColumns = (columns) => gridColumns[columns] ?? gridColumns[4];

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

@@ -0,0 +1,4 @@
+import type { RefraktorRadius, RefraktorSize } from "@refraktor/core";
+export type PickerRadius = RefraktorRadius;
+export type PickerSize = RefraktorSize;
+//# sourceMappingURL=picker.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/picker-shared/picker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEtE,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC"}

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

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

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

@@ -0,0 +1,3 @@
+export { default as YearInput } from "./year-input";
+export type { YearInputClassNames, YearInputFactoryPayload, YearInputMiddlewares, YearInputOnChange, YearInputPositioning, YearInputProps, YearInputRadius, YearInputSize, YearInputValue, YearInputValueFormat } from "./year-input.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/year-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EACR,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,aAAa,EACb,cAAc,EACd,oBAAoB,EACvB,MAAM,oBAAoB,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"year-input.d.ts","sourceRoot":"","sources":["../../../src/components/year-input/year-input.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,oBAAoB,CAAC;AAkC5B,QAAA,MAAM,SAAS,uEAiRb,CAAC;AAMH,eAAe,SAAS,CAAC"}