@refraktor/dates 0.0.4 → 0.0.5

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

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

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

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

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

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

@@ -1,6 +0,0 @@
-export { default as TimeInput } from "./time-input";
-export type {
-    TimeInputClassNames,
-    TimeInputFactoryPayload,
-    TimeInputProps
-} from "./time-input.types";

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

@@ -1,48 +0,0 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    factory,
-    Input,
-    useClassNames,
-    useProps,
-    useTheme
-} from "@refraktor/core";
-import {
-    TimeInputClassNames,
-    TimeInputFactoryPayload,
-    TimeInputProps
-} from "./time-input.types";
-
-const defaultProps = {
-    withSeconds: false,
-    size: "md",
-    radius: "default",
-    variant: "default"
-} satisfies Partial<TimeInputProps>;
-
-const TimeInput = factory<TimeInputFactoryPayload>((_props, ref) => {
-    const { cx } = useTheme();
-    const {
-        withSeconds,
-        className,
-        classNames,
-        ...inputProps
-    } = useProps("TimeInput", defaultProps, _props);
-    const classes = useClassNames("TimeInput", classNames);
-
-    return (
-        <Input
-            ref={ref}
-            type="time"
-            step={withSeconds ? 1 : undefined}
-            className={cx(classes.input, className)}
-            {...inputProps}
-        />
-    );
-});
-
-TimeInput.displayName = "@refraktor/dates/TimeInput";
-TimeInput.configure = createComponentConfig<TimeInputProps>();
-TimeInput.classNames = createClassNamesConfig<TimeInputClassNames>();
-
-export default TimeInput;

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

@@ -1,30 +0,0 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload,
-    InputProps
-} from "@refraktor/core";
-
-export type TimeInputClassNames = {
-    input?: string;
-};
-
-interface _TimeInputProps {
-    /** Show seconds in the native time input @default `false` */
-    withSeconds?: boolean;
-
-    /** Used for styling TimeInput parts */
-    classNames?: TimeInputClassNames;
-}
-
-export type TimeInputProps = _TimeInputProps &
-    Omit<InputProps, "type" | "classNames">;
-
-export interface TimeInputFactoryPayload extends FactoryPayload {
-    props: TimeInputProps;
-    ref: HTMLInputElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<TimeInputProps>>;
-        classNames: ReturnType<typeof createClassNamesConfig<TimeInputClassNames>>;
-    };
-}

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

@@ -1,10 +0,0 @@
-export { default as TimePicker } from "./time-picker";
-export type {
-    TimePickerAmPmLabels,
-    TimePickerClassNames,
-    TimePickerFactoryPayload,
-    TimePickerFormat,
-    TimePickerPopoverProps,
-    TimePickerProps,
-    TimePickerValue
-} from "./time-picker.types";