@refraktor/core 0.0.4 → 0.0.5

package/src/components/transition/transition.tsx

@@ -1,441 +0,0 @@
-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(() => {
-                    // Second rAF ensures the browser has painted the enterFrom
-                    // styles before we move to entered, so the CSS transition fires.
-                    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

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

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

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