@refraktor/dates 0.0.3 → 0.0.5

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

@@ -1,135 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import {
-    RefraktorRadius,
-    RefraktorSize,
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "@refraktor/core";
-
-export type TimePickerValue = string;
-export type TimePickerMode = "12h" | "24h";
-export type TimePickerPeriod = "am" | "pm";
-export type TimePickerSize = RefraktorSize;
-export type TimePickerRadius = RefraktorRadius;
-
-export type TimePickerOnChange = (value: TimePickerValue) => void;
-
-export type TimePickerGetHourLabel = (
-    hour: number,
-    mode: TimePickerMode
-) => ReactNode;
-
-export type TimePickerGetMinuteLabel = (minute: number) => ReactNode;
-
-export type TimePickerGetSecondLabel = (second: number) => ReactNode;
-
-export type TimePickerGetPeriodLabel = (period: TimePickerPeriod) => ReactNode;
-
-export type TimePickerGetHourAriaLabel = (
-    hour: number,
-    mode: TimePickerMode,
-    selected: boolean
-) => string;
-
-export type TimePickerGetMinuteAriaLabel = (
-    minute: number,
-    selected: boolean
-) => string;
-
-export type TimePickerGetSecondAriaLabel = (
-    second: number,
-    selected: boolean
-) => string;
-
-export type TimePickerGetPeriodAriaLabel = (
-    period: TimePickerPeriod,
-    selected: boolean
-) => string;
-
-export type TimePickerClassNames = {
-    root?: string;
-    grid?: string;
-    section?: string;
-    sectionLabel?: string;
-    list?: string;
-    option?: string;
-    optionActive?: string;
-    optionDisabled?: string;
-    hourSection?: string;
-    minuteSection?: string;
-    secondSection?: string;
-    periodSection?: string;
-};
-
-export interface TimePickerProps
-    extends Omit<
-        ComponentPropsWithoutRef<"div">,
-        "onChange" | "value" | "defaultValue"
-    > {
-    /** Active time (controlled), accepts `H:mm:ss` or `HH:mm:ss` (24h). */
-    value?: TimePickerValue;
-
-    /** Initial active time (uncontrolled), accepts `H:mm:ss` or `HH:mm:ss` (24h). */
-    defaultValue?: TimePickerValue;
-
-    /** Callback called when active time changes in normalized `HH:mm:ss` format (24h). */
-    onChange?: TimePickerOnChange;
-
-    /** Lower selectable bound for time-of-day, accepts `H:mm:ss` or `HH:mm:ss` (24h). */
-    minTime?: TimePickerValue;
-
-    /** Upper selectable bound for time-of-day, accepts `H:mm:ss` or `HH:mm:ss` (24h). */
-    maxTime?: TimePickerValue;
-
-    /** Time display mode @default `24h` */
-    mode?: TimePickerMode;
-
-    /** Whether all controls are disabled @default `false` */
-    disabled?: boolean;
-
-    /** Component size @default `md` */
-    size?: TimePickerSize;
-
-    /** Border radius @default `default` */
-    radius?: TimePickerRadius;
-
-    /** Custom hour label renderer. */
-    getHourLabel?: TimePickerGetHourLabel;
-
-    /** Custom minute label renderer. */
-    getMinuteLabel?: TimePickerGetMinuteLabel;
-
-    /** Custom second label renderer. */
-    getSecondLabel?: TimePickerGetSecondLabel;
-
-    /** Custom AM/PM label renderer in 12h mode. */
-    getPeriodLabel?: TimePickerGetPeriodLabel;
-
-    /** Custom aria-label generator for hour options. */
-    getHourAriaLabel?: TimePickerGetHourAriaLabel;
-
-    /** Custom aria-label generator for minute options. */
-    getMinuteAriaLabel?: TimePickerGetMinuteAriaLabel;
-
-    /** Custom aria-label generator for second options. */
-    getSecondAriaLabel?: TimePickerGetSecondAriaLabel;
-
-    /** Custom aria-label generator for period options. */
-    getPeriodAriaLabel?: TimePickerGetPeriodAriaLabel;
-
-    /** Used for editing root class name. */
-    className?: string;
-
-    /** Used for styling different parts of the component. */
-    classNames?: TimePickerClassNames;
-}
-
-export interface TimePickerFactoryPayload extends FactoryPayload {
-    props: TimePickerProps;
-    ref: HTMLDivElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<TimePickerProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<TimePickerClassNames>>;
-    };
-}

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

@@ -1,13 +0,0 @@
-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

@@ -1,350 +0,0 @@
-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,
-        strategy: "fixed"
-    });
-
-    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}
-            style={{ position: "relative", zIndex: 1000 }}
-            {...transitionProps}
-        >
-            <div
-                ref={floating.refs.setFloating}
-                id={dropdownId}
-                style={{
-                    ...floating.floatingStyles,
-                    zIndex: 1000
-                }}
-                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;

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

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

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

@@ -1,15 +0,0 @@
-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";