@refraktor/core 0.0.1

package/src/components/transition/transition.tsx

@@ -0,0 +1,437 @@
+import { useId } from "@refraktor/utils";
+import {
+    createComponentConfig,
+    polymorphicFactory,
+    useProps
+} from "../../utils";
+import {
+    TransitionDefinition,
+    TransitionDirection,
+    TransitionFactoryPayload,
+    TransitionProps,
+    TransitionState,
+    TransitionTimingValue
+} from "./transition.types";
+import {
+    CSSProperties,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState
+} from "react";
+import transitions from "./transitions";
+
+const defaultProps = {
+    duration: 200,
+    delay: 0,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    transition: "fade",
+    properties: "auto",
+    keepMounted: false,
+    appear: true,
+    immediate: false,
+    useGPU: true,
+    reduceMotion: "respect",
+    onEnterStart: () => {},
+    onEnterEnd: () => {},
+    onExitStart: () => {},
+    onExitEnd: () => {},
+    onStateChange: () => {}
+} satisfies Partial<TransitionProps>;
+
+const resolveTimingValue = <T,>(
+    value: TransitionTimingValue<T> | undefined,
+    direction: TransitionDirection,
+    fallback: T
+): T => {
+    if (value == null) {
+        return fallback;
+    }
+
+    if (
+        typeof value === "object" &&
+        !Array.isArray(value) &&
+        value !== null &&
+        ("enter" in value || "exit" in value)
+    ) {
+        return (
+            (value as Partial<Record<TransitionDirection, T>>)[direction] ??
+            fallback
+        );
+    }
+
+    return value as T;
+};
+
+const prefersReducedMotionQuery = "(prefers-reduced-motion: reduce)";
+
+const resolveTransitionDefinition = (
+    transition: TransitionProps["transition"]
+): TransitionDefinition => {
+    if (!transition || typeof transition === "string") {
+        return transitions[(transition ?? "fade") as keyof typeof transitions];
+    }
+
+    return transition;
+};
+
+const collectTransitionProperties = (
+    transitionDefinition: TransitionDefinition
+): string[] => {
+    if (transitionDefinition.properties?.length) {
+        return transitionDefinition.properties;
+    }
+
+    return ["opacity", "transform"];
+};
+
+const Transition = polymorphicFactory<TransitionFactoryPayload>(
+    (_props, ref) => {
+        const {
+            as,
+            id,
+            mounted,
+            children,
+            duration,
+            delay,
+            easing,
+            transition,
+            properties,
+            keepMounted,
+            appear,
+            immediate,
+            reduceMotion,
+            onEnterStart,
+            onEnterEnd,
+            onExitStart,
+            onExitEnd,
+            onStateChange,
+            useGPU,
+            className,
+            style,
+            ...props
+        } = useProps("Transition", defaultProps, _props);
+
+        const Component = as ?? "div";
+        const _id = useId(id);
+
+        const [state, setState] = useState<TransitionState>(() => {
+            if (mounted && !appear) {
+                return "entered";
+            }
+
+            return mounted ? "entering" : "exited";
+        });
+        const [isRendered, setIsRendered] = useState(mounted || keepMounted);
+        const [direction, setDirection] = useState<TransitionDirection>(
+            mounted ? "enter" : "exit"
+        );
+        const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+            if (
+                typeof window === "undefined" ||
+                typeof window.matchMedia !== "function"
+            ) {
+                return false;
+            }
+
+            return window.matchMedia(prefersReducedMotionQuery).matches;
+        });
+
+        const isInitialRender = useRef(true);
+        const timeoutRef = useRef<number | null>(null);
+        const rafRef = useRef<number | null>(null);
+        const runIdRef = useRef(0);
+
+        const clearScheduled = useCallback(() => {
+            if (timeoutRef.current !== null) {
+                window.clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+
+            if (rafRef.current !== null) {
+                window.cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        }, []);
+
+        const setTransitionState = useCallback(
+            (nextState: TransitionState) => {
+                setState((previousState) => {
+                    if (previousState !== nextState) {
+                        onStateChange?.(nextState);
+                    }
+
+                    return nextState;
+                });
+            },
+            [onStateChange]
+        );
+
+        useEffect(() => {
+            if (
+                reduceMotion !== "respect" ||
+                typeof window.matchMedia !== "function"
+            ) {
+                return;
+            }
+
+            const mediaQuery = window.matchMedia(prefersReducedMotionQuery);
+            setPrefersReducedMotion(mediaQuery.matches);
+
+            const handleChange = (event: MediaQueryListEvent) => {
+                setPrefersReducedMotion(event.matches);
+            };
+
+            mediaQuery.addEventListener("change", handleChange);
+
+            return () => {
+                mediaQuery.removeEventListener("change", handleChange);
+            };
+        }, [reduceMotion]);
+
+        const shouldReduceMotion =
+            immediate ||
+            reduceMotion === "always" ||
+            (reduceMotion === "respect" && prefersReducedMotion);
+
+        const enterDuration = resolveTimingValue(duration, "enter", 200);
+        const exitDuration = resolveTimingValue(duration, "exit", 200);
+        const enterDelay = resolveTimingValue(delay, "enter", 0);
+        const exitDelay = resolveTimingValue(delay, "exit", 0);
+
+        const enterEasing = resolveTimingValue(
+            easing,
+            "enter",
+            "cubic-bezier(0.4, 0, 0.2, 1)"
+        );
+        const exitEasing = resolveTimingValue(
+            easing,
+            "exit",
+            "cubic-bezier(0.4, 0, 0.2, 1)"
+        );
+
+        useEffect(() => {
+            runIdRef.current += 1;
+            const runId = runIdRef.current;
+            const isFirstRun = isInitialRender.current;
+            isInitialRender.current = false;
+
+            clearScheduled();
+
+            if (mounted) {
+                setDirection("enter");
+                setIsRendered(true);
+
+                if (isFirstRun && !appear) {
+                    setTransitionState("entered");
+                    return;
+                }
+
+                onEnterStart?.();
+
+                if (shouldReduceMotion) {
+                    setTransitionState("entered");
+                    onEnterEnd?.();
+                    return;
+                }
+
+                setTransitionState("entering");
+
+                rafRef.current = window.requestAnimationFrame(() => {
+                    if (runIdRef.current !== runId) {
+                        return;
+                    }
+
+                    setTransitionState("entered");
+
+                    const waitTime = enterDuration + enterDelay;
+
+                    if (waitTime <= 0) {
+                        onEnterEnd?.();
+                        return;
+                    }
+
+                    timeoutRef.current = window.setTimeout(() => {
+                        if (runIdRef.current !== runId) {
+                            return;
+                        }
+
+                        onEnterEnd?.();
+                    }, waitTime);
+                });
+
+                return;
+            }
+
+            if (isFirstRun) {
+                setTransitionState("exited");
+                setIsRendered(keepMounted);
+                return;
+            }
+
+            setDirection("exit");
+
+            if (!isRendered && !keepMounted) {
+                return;
+            }
+
+            onExitStart?.();
+
+            if (shouldReduceMotion) {
+                setTransitionState("exited");
+                onExitEnd?.();
+
+                if (!keepMounted) {
+                    setIsRendered(false);
+                }
+
+                return;
+            }
+
+            setTransitionState("exiting");
+
+            rafRef.current = window.requestAnimationFrame(() => {
+                if (runIdRef.current !== runId) {
+                    return;
+                }
+
+                setTransitionState("exited");
+
+                const waitTime = exitDuration + exitDelay;
+
+                if (waitTime <= 0) {
+                    onExitEnd?.();
+
+                    if (!keepMounted) {
+                        setIsRendered(false);
+                    }
+
+                    return;
+                }
+
+                timeoutRef.current = window.setTimeout(() => {
+                    if (runIdRef.current !== runId) {
+                        return;
+                    }
+
+                    onExitEnd?.();
+
+                    if (!keepMounted) {
+                        setIsRendered(false);
+                    }
+                }, waitTime);
+            });
+        }, [
+            appear,
+            clearScheduled,
+            enterDelay,
+            enterDuration,
+            exitDelay,
+            exitDuration,
+            isRendered,
+            keepMounted,
+            mounted,
+            onEnterEnd,
+            onEnterStart,
+            onExitEnd,
+            onExitStart,
+            setTransitionState,
+            shouldReduceMotion
+        ]);
+
+        useEffect(() => {
+            return () => {
+                runIdRef.current += 1;
+                clearScheduled();
+            };
+        }, [clearScheduled]);
+
+        const transitionDefinition = useMemo(
+            () => resolveTransitionDefinition(transition),
+            [transition]
+        );
+
+        const resolvedProperties = useMemo(() => {
+            if (properties === "auto") {
+                return collectTransitionProperties(transitionDefinition);
+            }
+
+            return properties;
+        }, [properties, transitionDefinition]);
+
+        const currentStyle =
+            state === "entering"
+                ? transitionDefinition.enterFrom
+                : state === "entered"
+                  ? transitionDefinition.enterTo
+                  : state === "exiting"
+                    ? transitionDefinition.exitFrom
+                    : transitionDefinition.exitTo;
+
+        const activeDuration =
+            direction === "enter" ? enterDuration : exitDuration;
+        const activeDelay = direction === "enter" ? enterDelay : exitDelay;
+        const activeEasing = direction === "enter" ? enterEasing : exitEasing;
+
+        const effectiveDuration = shouldReduceMotion ? 0 : activeDuration;
+        const effectiveDelay = shouldReduceMotion ? 0 : activeDelay;
+
+        const transitionCSS = resolvedProperties.length
+            ? resolvedProperties
+                  .map(
+                      (property) =>
+                          `${property} ${effectiveDuration}ms ${activeEasing} ${effectiveDelay}ms`
+                  )
+                  .join(", ")
+            : "none";
+
+        const mergedStyle: CSSProperties = {
+            ...style,
+            ...currentStyle,
+            transition: transitionCSS,
+            ...(useGPU && resolvedProperties.length > 0
+                ? { willChange: resolvedProperties.join(", ") }
+                : {})
+        };
+
+        const content =
+            typeof children === "function" ? children(state) : children;
+
+        if (!isRendered) {
+            return null;
+        }
+
+        const mergedRef = (node: HTMLDivElement | null) => {
+            if (!ref) {
+                return;
+            }
+
+            if (typeof ref === "function") {
+                ref(node);
+                return;
+            }
+
+            (ref as { current: HTMLDivElement | null }).current = node;
+        };
+
+        return (
+            <Component
+                id={_id}
+                ref={mergedRef}
+                className={className}
+                style={mergedStyle}
+                data-transition-state={state}
+                data-transition-direction={direction}
+                {...props}
+            >
+                {content}
+            </Component>
+        );
+    }
+);
+
+Transition.displayName = "@refraktor/core/Transition";
+Transition.configure = createComponentConfig<TransitionProps>();
+
+export default Transition;

package/src/components/transition/transition.types.ts

@@ -0,0 +1,97 @@
+import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from "react";
+import { createComponentConfig, PolymorphicFactoryPayload } from "../../utils";
+
+export type TransitionState = "entering" | "entered" | "exiting" | "exited";
+export type TransitionDirection = "enter" | "exit";
+
+export type TransitionPreset =
+    | "fade"
+    | "scale"
+    | "slide-up"
+    | "slide-down"
+    | "slide-left"
+    | "slide-right"
+    | "zoom"
+    | "collapse"
+    | "blur"
+    | "rotate";
+
+export type TransitionDefinition = {
+    enterFrom?: CSSProperties;
+    enterTo?: CSSProperties;
+    exitFrom?: CSSProperties;
+    exitTo?: CSSProperties;
+    properties?: string[];
+};
+
+export type TransitionTimingValue<T> =
+    | T
+    | Partial<Record<TransitionDirection, T>>;
+
+export type TransitionMotionPreference = "respect" | "always" | "never";
+
+export interface TransitionProps
+    extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Controls whether the component is mounted */
+    mounted: boolean;
+
+    /** Child element or render function */
+    children: ReactNode | ((state: TransitionState) => ReactNode);
+
+    /** Preset name or custom transition definition @default `fade` */
+    transition?: TransitionPreset | TransitionDefinition;
+
+    /** Enter/exit duration in milliseconds @default `200` */
+    duration?: TransitionTimingValue<number>;
+
+    /** Enter/exit delay in milliseconds @default `0` */
+    delay?: TransitionTimingValue<number>;
+
+    /** Enter/exit easing function @default `cubic-bezier(0.4, 0, 0.2, 1)` */
+    easing?: TransitionTimingValue<string>;
+
+    /** Transitioned CSS properties (`auto` uses transition definition metadata) @default `auto` */
+    properties?: "auto" | string[];
+
+    /** Keep element mounted after exit @default `false` */
+    keepMounted?: boolean;
+
+    /** Animate on initial mount @default `true` */
+    appear?: boolean;
+
+    /** Skip animations and jump to end states @default `false` */
+    immediate?: boolean;
+
+    /** Motion preference behavior @default `respect` */
+    reduceMotion?: TransitionMotionPreference;
+
+    /** Callback when entering starts */
+    onEnterStart?: () => void;
+
+    /** Callback when entering completes */
+    onEnterEnd?: () => void;
+
+    /** Callback when exiting starts */
+    onExitStart?: () => void;
+
+    /** Callback when exiting completes */
+    onExitEnd?: () => void;
+
+    /** Callback when transition state changes */
+    onStateChange?: (state: TransitionState) => void;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Whether to use GPU acceleration for the transition @default `true` */
+    useGPU?: boolean;
+}
+
+export interface TransitionFactoryPayload extends PolymorphicFactoryPayload {
+    props: TransitionProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: "div";
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<TransitionProps>>;
+    };
+}

package/src/components/transition/transitions.ts

@@ -0,0 +1,140 @@
+import { CSSProperties } from "react";
+import {
+    TransitionDefinition,
+    TransitionPreset
+} from "./transition.types";
+
+const NON_ANIMATABLE_PROPERTIES = new Set([
+    "display",
+    "position",
+    "overflow",
+    "overflow-x",
+    "overflow-y",
+    "pointer-events",
+    "z-index"
+]);
+
+const toKebabCase = (value: string): string =>
+    value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+const collectProperties = (...styles: Array<CSSProperties | undefined>) => {
+    const unique = new Set<string>();
+
+    styles.forEach((style) => {
+        if (!style) {
+            return;
+        }
+
+        Object.keys(style).forEach((key) => {
+            const property = toKebabCase(key);
+
+            if (!NON_ANIMATABLE_PROPERTIES.has(property)) {
+                unique.add(property);
+            }
+        });
+    });
+
+    return [...unique];
+};
+
+export type DefineTransitionInput = {
+    enterFrom?: CSSProperties;
+    enterTo?: CSSProperties;
+    exitFrom?: CSSProperties;
+    exitTo?: CSSProperties;
+    properties?: "auto" | string[];
+};
+
+export function defineTransition({
+    enterFrom = {},
+    enterTo = {},
+    exitFrom,
+    exitTo,
+    properties = "auto"
+}: DefineTransitionInput): TransitionDefinition {
+    const resolvedExitFrom = exitFrom ?? enterTo;
+    const resolvedExitTo = exitTo ?? enterFrom;
+
+    return {
+        enterFrom,
+        enterTo,
+        exitFrom: resolvedExitFrom,
+        exitTo: resolvedExitTo,
+        properties:
+            properties === "auto"
+                ? collectProperties(
+                      enterFrom,
+                      enterTo,
+                      resolvedExitFrom,
+                      resolvedExitTo
+                  )
+                : properties
+    };
+}
+
+const transitions: Record<TransitionPreset, TransitionDefinition> = {
+    fade: defineTransition({
+        enterFrom: { opacity: 0 },
+        enterTo: { opacity: 1 },
+        properties: ["opacity"]
+    }),
+    scale: defineTransition({
+        enterFrom: { opacity: 0, transform: "scale(0.95)" },
+        enterTo: { opacity: 1, transform: "scale(1)" },
+        properties: ["opacity", "transform"]
+    }),
+    "slide-up": defineTransition({
+        enterFrom: { opacity: 0, transform: "translateY(10px)" },
+        enterTo: { opacity: 1, transform: "translateY(0)" },
+        properties: ["opacity", "transform"]
+    }),
+    "slide-down": defineTransition({
+        enterFrom: { opacity: 0, transform: "translateY(-10px)" },
+        enterTo: { opacity: 1, transform: "translateY(0)" },
+        properties: ["opacity", "transform"]
+    }),
+    "slide-left": defineTransition({
+        enterFrom: { opacity: 0, transform: "translateX(10px)" },
+        enterTo: { opacity: 1, transform: "translateX(0)" },
+        properties: ["opacity", "transform"]
+    }),
+    "slide-right": defineTransition({
+        enterFrom: { opacity: 0, transform: "translateX(-10px)" },
+        enterTo: { opacity: 1, transform: "translateX(0)" },
+        properties: ["opacity", "transform"]
+    }),
+    zoom: defineTransition({
+        enterFrom: { opacity: 0, transform: "scale(0.8)" },
+        enterTo: { opacity: 1, transform: "scale(1)" },
+        properties: ["opacity", "transform"]
+    }),
+    collapse: defineTransition({
+        enterFrom: {
+            opacity: 0,
+            transform: "scaleY(0)",
+            transformOrigin: "top",
+            maxHeight: "0px",
+            overflow: "hidden"
+        },
+        enterTo: {
+            opacity: 1,
+            transform: "scaleY(1)",
+            transformOrigin: "top",
+            maxHeight: "1000px",
+            overflow: "hidden"
+        },
+        properties: ["opacity", "transform", "max-height"]
+    }),
+    blur: defineTransition({
+        enterFrom: { opacity: 0, filter: "blur(8px)" },
+        enterTo: { opacity: 1, filter: "blur(0px)" },
+        properties: ["opacity", "filter"]
+    }),
+    rotate: defineTransition({
+        enterFrom: { opacity: 0, transform: "rotate(-10deg) scale(0.95)" },
+        enterTo: { opacity: 1, transform: "rotate(0deg) scale(1)" },
+        properties: ["opacity", "transform"]
+    })
+};
+
+export default transitions;

package/src/icons/check.tsx

@@ -0,0 +1,25 @@
+import { IconProps } from "./types";
+
+const CheckIcon = ({ size = 20, className, ...props }: IconProps) => {
+    return (
+        <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            width={size}
+            height={size}
+            className={className}
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <path
+                d="M5 12.5L9.5 17L19 7.5"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export default CheckIcon;