@refraktor/dates 0.0.1

package/src/components/picker-shared/picker-header.tsx

@@ -0,0 +1,178 @@
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useTheme,
+    useClassNames,
+    useProps
+} from "@refraktor/core";
+import { getPickerSizeStyles } from "./picker.styles";
+import {
+    PickerHeaderClassNames,
+    PickerHeaderFactoryPayload,
+    PickerHeaderProps
+} from "./picker-header.types";
+
+const defaultProps = {
+    previousDisabled: false,
+    nextDisabled: false,
+    previousLabel: "Show previous period",
+    nextLabel: "Show next period",
+    size: "md",
+    radius: "default"
+} satisfies Partial<PickerHeaderProps>;
+
+const ChevronIcon = ({
+    direction,
+    size
+}: {
+    direction: "left" | "right";
+    size: number;
+}) => (
+    <svg
+        aria-hidden="true"
+        viewBox="0 0 16 16"
+        fill="none"
+        width={size}
+        height={size}
+        className={direction === "right" ? "rotate-180" : undefined}
+    >
+        <path
+            d="M9.5 3.5L5 8l4.5 4.5"
+            stroke="currentColor"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+const PickerHeader = factory<PickerHeaderFactoryPayload>((_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: keyof PickerHeaderClassNames) => classes[part];
+
+    return (
+        <div
+            ref={ref}
+            className={cx(
+                "flex items-center justify-between gap-2",
+                getStyles("root"),
+                className
+            )}
+            {...props}
+        >
+            <div
+                className={cx(
+                    "inline-flex shrink-0 items-center gap-1",
+                    getStyles("controls")
+                )}
+            >
+                <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")
+                    )}
+                >
+                    <ChevronIcon direction="left" size={sizeStyles.iconSize} />
+                </button>
+            </div>
+
+            <div
+                className={cx(
+                    "min-w-0 flex-1 truncate text-center font-medium text-[var(--refraktor-text)]",
+                    sizeStyles.label,
+                    getStyles("label")
+                )}
+            >
+                {onLabelClick ? (
+                    <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")
+                        )}
+                    >
+                        <span
+                            className={cx("truncate", getStyles("labelText"))}
+                        >
+                            {label}
+                        </span>
+                    </button>
+                ) : (
+                    <span className={cx("truncate", getStyles("labelText"))}>
+                        {label}
+                    </span>
+                )}
+            </div>
+
+            <div
+                className={cx(
+                    "inline-flex shrink-0 items-center gap-1",
+                    getStyles("controls")
+                )}
+            >
+                <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")
+                    )}
+                >
+                    <ChevronIcon direction="right" size={sizeStyles.iconSize} />
+                </button>
+            </div>
+        </div>
+    );
+});
+
+PickerHeader.displayName = "@refraktor/dates/PickerHeader";
+PickerHeader.configure = createComponentConfig<PickerHeaderProps>();
+PickerHeader.classNames = createClassNamesConfig<PickerHeaderClassNames>();
+
+export default PickerHeader;

package/src/components/picker-shared/picker-header.types.ts

@@ -0,0 +1,49 @@
+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>
+        >;
+    };
+}

package/src/components/picker-shared/picker.styles.ts

@@ -0,0 +1,69 @@
+import { PickerSize } from "./picker.types";
+
+export type PickerSizeStyles = {
+    control: string;
+    label: string;
+    labelButton: string;
+    cell: string;
+    gridGap: string;
+    iconSize: number;
+};
+
+const pickerSizes: Record<PickerSize, PickerSizeStyles> = {
+    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: Record<number, string> = {
+    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: PickerSize = "md") =>
+    pickerSizes[size] ?? pickerSizes.md;
+
+export const getGridColumns = (columns: number) =>
+    gridColumns[columns] ?? gridColumns[4];

package/src/components/picker-shared/picker.types.ts

@@ -0,0 +1,4 @@
+import type { RefraktorRadius, RefraktorSize } from "@refraktor/core";
+
+export type PickerRadius = RefraktorRadius;
+export type PickerSize = RefraktorSize;

package/src/components/year-input/index.ts

@@ -0,0 +1,13 @@
+export { default as YearInput } from "./year-input";
+export type {
+    YearInputClassNames,
+    YearInputFactoryPayload,
+    YearInputMiddlewares,
+    YearInputOnChange,
+    YearInputPositioning,
+    YearInputProps,
+    YearInputRadius,
+    YearInputSize,
+    YearInputValue,
+    YearInputValueFormat
+} from "./year-input.types";

package/src/components/year-input/year-input.tsx

@@ -0,0 +1,347 @@
+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,
+    Middleware,
+    offset,
+    shift,
+    useDismiss,
+    useFloating,
+    useFocus,
+    useInteractions,
+    useRole
+} from "@floating-ui/react";
+import { useDates } from "../dates-provider";
+import { YearPicker } from "../year-picker";
+import {
+    YearInputClassNames,
+    YearInputFactoryPayload,
+    YearInputProps
+} from "./year-input.types";
+
+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
+} satisfies Partial<YearInputProps>;
+
+const toSafeInteger = (value: number | undefined) => {
+    if (!Number.isFinite(value)) {
+        return undefined;
+    }
+
+    return Math.trunc(value as number);
+};
+
+const YearInput = factory<YearInputFactoryPayload>((_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<
+        number | undefined
+    >({
+        value,
+        defaultValue,
+        finalValue: undefined,
+        onChange: (nextYear) => {
+            if (nextYear !== undefined) {
+                onChange?.(nextYear);
+            }
+        }
+    });
+
+    const [isOpenState, setIsOpen] = useUncontrolled<boolean>({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+
+    const isOpen = isOpenState && !disabled;
+
+    const middleware = useMemo(() => {
+        const middlewareList: Middleware[] = [];
+
+        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: boolean) => {
+            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: HTMLInputElement | null) => {
+            floating.refs.setReference(node);
+
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        },
+        [floating.refs, ref]
+    );
+
+    const handleInputKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLInputElement>) => {
+            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: number) => {
+            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 = (
+        <Transition
+            transition="fade"
+            duration={150}
+            mounted={isOpen}
+            {...transitionProps}
+        >
+            <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()}
+            >
+                <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)}
+                />
+            </div>
+        </Transition>
+    );
+
+    const wrappedContent = isOpen ? (
+        <FloatingFocusManager
+            context={floating.context}
+            modal={false}
+            initialFocus={-1}
+            returnFocus={false}
+        >
+            {dropdownContent}
+        </FloatingFocusManager>
+    ) : (
+        dropdownContent
+    );
+
+    return (
+        <>
+            <Input
+                ref={setInputRef}
+                id={_id}
+                readOnly
+                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 as any)}
+            />
+
+            {withinPortal ? (
+                <FloatingPortal>{wrappedContent}</FloatingPortal>
+            ) : (
+                wrappedContent
+            )}
+        </>
+    );
+});
+
+YearInput.displayName = "@refraktor/dates/YearInput";
+YearInput.configure = createComponentConfig<YearInputProps>();
+YearInput.classNames = createClassNamesConfig<YearInputClassNames>();
+
+export default YearInput;