@refraktor/core 0.0.1

package/src/components/modal/modal.tsx

@@ -0,0 +1,26 @@
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory
+} from "../../utils";
+import { ModalClose } from "./modal-close";
+import { ModalContent } from "./modal-content";
+import { ModalHeader } from "./modal-header";
+import { ModalOverlay } from "./modal-overlay";
+import { ModalRoot } from "./modal-root";
+import { ModalClassNames, ModalFactoryPayload, ModalProps } from "./modal.types";
+
+const Modal = factory<ModalFactoryPayload>((props, ref) => {
+    return <ModalRoot {...props} ref={ref} />;
+});
+
+Modal.displayName = "@refraktor/core/Modal";
+Modal.configure = createComponentConfig<ModalProps>();
+Modal.classNames = createClassNamesConfig<ModalClassNames>();
+Modal.Root = ModalRoot;
+Modal.Overlay = ModalOverlay;
+Modal.Content = ModalContent;
+Modal.Header = ModalHeader;
+Modal.Close = ModalClose;
+
+export default Modal;

package/src/components/modal/modal.types.ts

@@ -0,0 +1,142 @@
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { RefraktorRadius } from "../../theme";
+import { TransitionProps } from "../transition";
+import { ModalRoot } from "./modal-root";
+import { ModalOverlay } from "./modal-overlay";
+import { ModalContent } from "./modal-content";
+import { ModalHeader } from "./modal-header";
+import { ModalClose } from "./modal-close";
+
+export type ModalClassNames = {
+    root?: string;
+    overlay?: string;
+    content?: string;
+    header?: string;
+    close?: string;
+};
+
+export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
+    /** Children containing modal subcomponents */
+    children: ReactNode;
+
+    /** State of the modal (controlled) */
+    opened?: boolean;
+
+    /** Initial state of the modal (uncontrolled) */
+    defaultOpened?: boolean;
+
+    /** Callback called when modal state changes */
+    onOpenedChange?: (opened: boolean) => void;
+
+    /** Whether to close modal on overlay/outside click @default `true` */
+    closeOnClickOutside?: boolean;
+
+    /** Whether to close modal on Escape key @default `true` */
+    closeOnEscape?: boolean;
+
+    /** Whether to lock body scroll while opened @default `true` */
+    lockScroll?: boolean;
+
+    /** Whether to render overlay/content inside portal @default `true` */
+    withinPortal?: boolean;
+
+    /** Radius for modal content @default `md` */
+    radius?: RefraktorRadius;
+
+    /** Transition props for overlay/content, uses Transition internally */
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+
+    /** Used for editing root class name */
+    className?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: ModalClassNames;
+}
+
+export type ModalRootProps = ModalProps;
+
+export interface ModalOverlayProps extends ComponentPropsWithoutRef<"div"> {
+    /** Whether clicking the overlay closes modal @default `true` */
+    closeOnClick?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface ModalContentProps extends ComponentPropsWithoutRef<"div"> {
+    /** Modal body content */
+    children: ReactNode;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface ModalHeaderProps extends ComponentPropsWithoutRef<"div"> {
+    /** Header content */
+    children?: ReactNode;
+
+    /** Shorthand header text */
+    text?: ReactNode;
+
+    /** Whether to show close button inside header @default `true` */
+    withClose?: boolean;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface ModalCloseProps
+    extends Omit<ComponentPropsWithoutRef<"button">, "onClick"> {
+    /** Optional close content (defaults to `x`) */
+    children?: ReactNode;
+
+    /** Click callback fired before closing */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+    /** Used for editing root class name */
+    className?: string;
+}
+
+export interface ModalFactoryPayload extends FactoryPayload {
+    props: ModalProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<ModalProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<ModalClassNames>>;
+        Root: typeof ModalRoot;
+        Overlay: typeof ModalOverlay;
+        Content: typeof ModalContent;
+        Header: typeof ModalHeader;
+        Close: typeof ModalClose;
+    };
+}
+
+export interface ModalRootFactoryPayload extends FactoryPayload {
+    props: ModalRootProps;
+    ref: HTMLDivElement;
+}
+
+export interface ModalOverlayFactoryPayload extends FactoryPayload {
+    props: ModalOverlayProps;
+    ref: HTMLDivElement;
+}
+
+export interface ModalContentFactoryPayload extends FactoryPayload {
+    props: ModalContentProps;
+    ref: HTMLDivElement;
+}
+
+export interface ModalHeaderFactoryPayload extends FactoryPayload {
+    props: ModalHeaderProps;
+    ref: HTMLDivElement;
+}
+
+export interface ModalCloseFactoryPayload extends FactoryPayload {
+    props: ModalCloseProps;
+    ref: HTMLButtonElement;
+}

package/src/components/modal/use-modal.ts

@@ -0,0 +1,101 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect } from "react";
+
+interface UseModalProps {
+    opened?: boolean;
+    defaultOpened?: boolean;
+    onOpenedChange?: (opened: boolean) => void;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    contentRef: React.MutableRefObject<HTMLElement | null>;
+}
+
+export interface UseModalReturn {
+    opened: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+
+export function useModal(options: UseModalProps): UseModalReturn {
+    const {
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        closeOnClickOutside = true,
+        closeOnEscape = true,
+        contentRef
+    } = options;
+
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen, setIsOpen]);
+
+    useEffect(() => {
+        if (!isOpen || !closeOnEscape) {
+            return;
+        }
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [closeOnEscape, isOpen, setIsOpen]);
+
+    useEffect(() => {
+        if (!isOpen || !closeOnClickOutside) {
+            return;
+        }
+
+        const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+            const target = event.target;
+
+            if (!(target instanceof Node)) {
+                return;
+            }
+
+            if (contentRef.current?.contains(target)) {
+                return;
+            }
+
+            setIsOpen(false);
+        };
+
+        document.addEventListener("mousedown", handlePointerDown);
+        document.addEventListener("touchstart", handlePointerDown);
+
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown);
+            document.removeEventListener("touchstart", handlePointerDown);
+        };
+    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
+
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle
+    };
+}

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

@@ -0,0 +1,2 @@
+export { default as NumberInput } from "./number-input";
+export * from "./number-input.types";

package/src/components/number-input/number-input.styles.ts

@@ -0,0 +1,37 @@
+import { RefraktorSize } from "../../theme";
+
+const controlSizes = {
+    xs: {
+        width: "w-3",
+        iconSize: 8,
+        leftSpacing: "mr-0.5",
+        rightSpacing: "ml-0.5"
+    },
+    sm: {
+        width: "w-4",
+        iconSize: 10,
+        leftSpacing: "mr-0.5",
+        rightSpacing: "ml-0.5"
+    },
+    md: {
+        width: "w-5",
+        iconSize: 12,
+        leftSpacing: "mr-1",
+        rightSpacing: "ml-1"
+    },
+    lg: {
+        width: "w-6",
+        iconSize: 14,
+        leftSpacing: "mr-1",
+        rightSpacing: "ml-1"
+    },
+    xl: {
+        width: "w-7",
+        iconSize: 16,
+        leftSpacing: "mr-1.5",
+        rightSpacing: "ml-1.5"
+    }
+};
+
+export const getControlSize = (size: RefraktorSize = "md") =>
+    controlSizes[size];

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

@@ -0,0 +1,353 @@
+import { clamp, useId, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import {
+    NumberInputClassNames,
+    NumberInputFactoryPayload,
+    NumberInputProps
+} from "./number-input.types";
+import { useCallback, useMemo, useRef } from "react";
+import { ChevronIcon } from "../../icons";
+import { InputWrapper } from "../input/input-wrapper";
+import { InputField } from "../input/input-field";
+import { getControlSize } from "./number-input.styles";
+
+const isInterim = (value: string) =>
+    value === "" ||
+    value === "." ||
+    value === "-" ||
+    value === "-." ||
+    /^-?\d+\.?$/.test(value);
+
+const toNumber = (value: string) => {
+    const num = parseFloat(value);
+    return Number.isNaN(num) ? undefined : num;
+};
+
+const formatValue = (num: number, precision?: number) => {
+    if (typeof precision === "number") {
+        const factor = Math.pow(10, precision);
+        const rounded = Math.round(num * factor) / factor;
+        return rounded.toFixed(precision);
+    }
+    return String(num);
+};
+
+function decimalsCount(num: number): number {
+    const str = num.toString();
+    const decimalIndex = str.indexOf(".");
+    return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1;
+}
+
+function addWithPrecision(
+    value: number,
+    step: number,
+    precision?: number
+): number {
+    const decimals =
+        precision ?? Math.max(decimalsCount(value), decimalsCount(step));
+    const factor = Math.pow(10, decimals);
+    return Math.round(value * factor + step * factor) / factor;
+}
+
+const defaultProps = {
+    size: "md",
+    variant: "default",
+    radius: "default",
+    controlsPosition: "right",
+    step: 1,
+    defaultValue: 0
+} satisfies Partial<NumberInputProps>;
+
+const NumberInput = factory<NumberInputFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        id,
+        value,
+        defaultValue,
+        size,
+        onChange,
+        min,
+        max,
+        step,
+        precision,
+        controlsPosition,
+        disabled,
+        className,
+        classNames,
+        ...props
+    } = useProps("NumberInput", defaultProps, _props);
+    const classes = useClassNames("NumberInput", classNames);
+    const _id = useId(id);
+
+    const [_value, setValue] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: "",
+        onChange
+    });
+    const controlSizing = getControlSize(size);
+
+    const valueRef = useRef(_value);
+    valueRef.current = _value;
+    const holdTimer = useRef<any>(null);
+    const repeatTimer = useRef<any>(null);
+
+    const changeValue = useCallback(
+        (direction: "increment" | "decrement") => {
+            if (disabled) return;
+
+            const currentStr = String(valueRef.current ?? "");
+            const current = toNumber(currentStr);
+            const delta = direction === "increment" ? step : -step;
+
+            let next =
+                current === undefined
+                    ? addWithPrecision(0, delta, precision)
+                    : addWithPrecision(current, delta, precision);
+
+            next = clamp(next, min, max);
+
+            const formatted = formatValue(next, precision);
+            setValue(formatted);
+            onChange?.(next);
+        },
+        [disabled, step, min, max, precision, onChange, setValue]
+    );
+
+    const startHold = (direction: "increment" | "decrement") => {
+        if (disabled) return;
+
+        changeValue(direction);
+
+        holdTimer.current = setInterval(() => {
+            repeatTimer.current = setTimeout(() => {
+                changeValue(direction);
+            }, 100);
+        }, 400);
+    };
+
+    const stopHold = () => {
+        if (holdTimer.current) clearTimeout(holdTimer.current);
+        if (repeatTimer.current) clearInterval(repeatTimer.current);
+        holdTimer.current = null;
+        repeatTimer.current = null;
+    };
+
+    const { canIncrement, canDecrement } = useMemo(() => {
+        if (disabled) return { canIncrement: false, canDecrement: false };
+
+        const current = toNumber(String(_value));
+        if (current === undefined)
+            return { canIncrement: true, canDecrement: true };
+
+        const canIncrement = max === undefined ? true : current < max;
+        const canDecrement = min === undefined ? true : current > min;
+
+        return { canIncrement, canDecrement };
+    }, [_value, min, max, disabled]);
+
+    const handleChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            if (disabled) return;
+
+            const value = event.target.value;
+
+            if (isInterim(value)) {
+                setValue(value);
+                return;
+            }
+
+            const num = toNumber(value);
+            if (num === undefined) return;
+
+            setValue(value);
+        },
+        [disabled, setValue]
+    );
+
+    const handleBlur = useCallback(() => {
+        if (disabled) return;
+
+        const value = String(_value ?? "");
+        const num = toNumber(value);
+
+        if (num === undefined) {
+            if (min !== undefined) setValue(String(min));
+            else setValue("");
+            onChange?.("");
+            return;
+        }
+
+        const clamped = clamp(num, min, max);
+        const formatted = formatValue(clamped, precision);
+        setValue(formatted);
+        onChange?.(clamped);
+    }, [disabled, _value, min, max, precision, setValue, onChange]);
+
+    const handleKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLInputElement>) => {
+            if (disabled) return;
+
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                changeValue("increment");
+            } else if (event.key === "ArrowDown") {
+                event.preventDefault();
+                changeValue("decrement");
+            }
+        },
+        [disabled, changeValue]
+    );
+
+    const handleWheel = useCallback(
+        (e: React.WheelEvent<HTMLInputElement>) => {
+            if (disabled) return;
+            if (document.activeElement !== e.currentTarget) return;
+
+            e.preventDefault();
+            if (e.deltaY < 0) changeValue("increment");
+            else if (e.deltaY > 0) changeValue("decrement");
+        },
+        [disabled, changeValue]
+    );
+
+    const controls = useMemo(() => {
+        if (controlsPosition === "none") return null;
+
+        return (
+            <div
+                className={cx(
+                    "inline-flex h-full flex-col overflow-hidden border-[var(--refraktor-border)] text-[var(--refraktor-text)]",
+                    controlsPosition === "left" ? "border-r" : "border-l",
+                    classes.controls
+                )}
+            >
+                <button
+                    type="button"
+                    disabled={!canIncrement}
+                    aria-disabled={!canIncrement}
+                    data-disabled={!canIncrement}
+                    className={cx(
+                        "m-0 flex flex-1 items-center justify-center border-0 bg-transparent p-0 leading-none transition-colors",
+                        controlSizing.width,
+                        !canIncrement
+                            ? "opacity-50 cursor-not-allowed"
+                            : "cursor-pointer hover:bg-[var(--refraktor-bg-hover)]",
+                        classes.increment
+                    )}
+                    tabIndex={-1}
+                    onMouseDown={(e) => {
+                        if (!canIncrement) return;
+                        e.preventDefault();
+                        startHold("increment");
+                    }}
+                    onMouseUp={stopHold}
+                    onMouseLeave={stopHold}
+                    onTouchEnd={stopHold}
+                >
+                    <ChevronIcon
+                        direction="up"
+                        size={controlSizing.iconSize}
+                        className={cx("block", !canIncrement && "opacity-50")}
+                    />
+                </button>
+
+                <button
+                    type="button"
+                    disabled={!canDecrement}
+                    aria-disabled={!canDecrement}
+                    data-disabled={!canDecrement}
+                    className={cx(
+                        "m-0 flex flex-1 items-center justify-center border-0 bg-transparent p-0 leading-none transition-colors",
+                        controlSizing.width,
+                        !canDecrement
+                            ? "opacity-50 cursor-not-allowed"
+                            : "cursor-pointer hover:bg-[var(--refraktor-bg-hover)]",
+                        classes.decrement
+                    )}
+                    tabIndex={-1}
+                    onMouseDown={(e) => {
+                        if (!canDecrement) return;
+                        e.preventDefault();
+                        startHold("decrement");
+                    }}
+                    onMouseUp={stopHold}
+                    onMouseLeave={stopHold}
+                    onTouchEnd={stopHold}
+                >
+                    <ChevronIcon
+                        direction="down"
+                        size={controlSizing.iconSize}
+                        className={cx("block", !canDecrement && "opacity-50")}
+                    />
+                </button>
+            </div>
+        );
+    }, [controlsPosition, canIncrement, canDecrement, classes, controlSizing]);
+
+    return (
+        <InputWrapper>
+            <InputField
+                ref={ref}
+                type="number"
+                disabled={disabled}
+                size={size}
+                min={min}
+                max={max}
+                step={step}
+                value={_value}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                onKeyDown={handleKeyDown}
+                onWheel={handleWheel}
+                leftSection={controlsPosition === "left" ? controls : undefined}
+                rightSection={
+                    controlsPosition === "right" ? controls : undefined
+                }
+                className={className}
+                classNames={{
+                    root: cx(
+                        "px-0 gap-0 items-stretch overflow-hidden",
+                        controlsPosition === "none"
+                            ? "px-2"
+                            : controlsPosition === "left"
+                              ? "pr-2"
+                              : "pl-2",
+                        classes.root
+                    ),
+                    leftSection: cx(
+                        "h-full self-stretch",
+                        controlsPosition === "left" &&
+                            controlSizing.leftSpacing,
+                        classes.leftSection
+                    ),
+                    rightSection: cx(
+                        "h-full self-stretch",
+                        controlsPosition === "right" &&
+                            controlSizing.rightSpacing,
+                        classes.rightSection
+                    ),
+                    ...(classes as any)
+                }}
+                aria-disabled={disabled}
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={Number(_value)}
+                {...props}
+            />
+        </InputWrapper>
+    );
+});
+
+NumberInput.displayName = "@refraktor/core/NumberInput";
+NumberInput.configure = createComponentConfig<NumberInputProps>();
+NumberInput.classNames = createClassNamesConfig<NumberInputClassNames>();
+
+export default NumberInput;