@refraktor/core 0.0.3 → 0.0.4

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

@@ -0,0 +1,473 @@
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useMemo, useRef } from "react";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { getVariant } from "../input/input-field/input-field.styles";
+import { InputWrapper } from "../input/input-wrapper";
+import {
+    PinInputCharacterSet,
+    PinInputClassNames,
+    PinInputFactoryPayload,
+    PinInputProps,
+    PinInputTransform
+} from "./pin-input.types";
+
+const CHARACTER_SET_PATTERNS: Record<PinInputCharacterSet, RegExp> = {
+    numeric: /^[0-9]$/,
+    alphabetic: /^[A-Za-z]$/,
+    alphanumeric: /^[A-Za-z0-9]$/,
+    all: /^.$/
+};
+
+const CELL_SIZES = {
+    xs: "h-7 w-7 text-[10px]",
+    sm: "h-8 w-8 text-xs",
+    md: "h-10 w-10 text-sm",
+    lg: "h-12 w-12 text-base",
+    xl: "h-14 w-14 text-lg"
+} as const;
+
+const defaultProps = {
+    length: 6,
+    variant: "default",
+    size: "md",
+    radius: "default",
+    mask: false,
+    characterSet: "numeric",
+    transform: "none",
+    ariaLabelPrefix: "Character",
+    autoComplete: "one-time-code"
+} satisfies Partial<PinInputProps>;
+
+function normalizeLength(value: number | undefined): number {
+    const length = Number.isFinite(value) ? Math.trunc(value as number) : 6;
+    return Math.max(1, length);
+}
+
+function transformCharacter(
+    char: string,
+    transform: PinInputTransform
+): string {
+    if (transform === "uppercase") {
+        return char.toUpperCase();
+    }
+
+    if (transform === "lowercase") {
+        return char.toLowerCase();
+    }
+
+    return char;
+}
+
+function isAllowedCharacter(
+    char: string,
+    characterSet: PinInputCharacterSet,
+    characterPattern?: RegExp
+): boolean {
+    const pattern = characterPattern ?? CHARACTER_SET_PATTERNS[characterSet];
+    pattern.lastIndex = 0;
+    return pattern.test(char);
+}
+
+function toSanitizedChars(
+    value: string,
+    options: {
+        characterSet: PinInputCharacterSet;
+        characterPattern?: RegExp;
+        transform: PinInputTransform;
+    }
+): string[] {
+    const result: string[] = [];
+
+    for (const rawChar of value) {
+        const transformedChar = transformCharacter(rawChar, options.transform);
+
+        if (
+            transformedChar &&
+            isAllowedCharacter(
+                transformedChar,
+                options.characterSet,
+                options.characterPattern
+            )
+        ) {
+            result.push(transformedChar);
+        }
+    }
+
+    return result;
+}
+
+function toCellArray(
+    value: string,
+    length: number,
+    options: {
+        characterSet: PinInputCharacterSet;
+        characterPattern?: RegExp;
+        transform: PinInputTransform;
+    }
+): string[] {
+    const chars = toSanitizedChars(value, options).slice(0, length);
+
+    return Array.from({ length }, (_, index) => chars[index] ?? "");
+}
+
+function normalizeCells(cells: string[] | undefined, length: number): string[] {
+    return Array.from({ length }, (_, index) => cells?.[index] ?? "");
+}
+
+const PinInput = factory<PinInputFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
+        length,
+        value,
+        defaultValue,
+        onChange,
+        onComplete,
+        mask,
+        characterSet,
+        characterPattern,
+        transform,
+        ariaLabelPrefix,
+        name,
+        variant,
+        size,
+        radius,
+        disabled,
+        className,
+        classNames,
+        inputMode,
+        autoComplete,
+        placeholder,
+        ...props
+    } = useProps("PinInput", defaultProps, _props);
+
+    const classes = useClassNames<PinInputClassNames>("PinInput", classNames);
+    const _id = useId(id);
+
+    const resolvedLength = normalizeLength(length);
+    const sanitizingOptions = useMemo(
+        () => ({
+            characterSet,
+            characterPattern,
+            transform
+        }),
+        [characterSet, characterPattern, transform]
+    );
+
+    const emptyCells = useMemo(
+        () => Array.from({ length: resolvedLength }, () => ""),
+        [resolvedLength]
+    );
+
+    const [_valueCells, setValueCells] = useUncontrolled<string[]>({
+        value:
+            value === undefined
+                ? undefined
+                : toCellArray(String(value), resolvedLength, sanitizingOptions),
+        defaultValue:
+            defaultValue === undefined
+                ? undefined
+                : toCellArray(
+                      String(defaultValue),
+                      resolvedLength,
+                      sanitizingOptions
+                  ),
+        finalValue: emptyCells,
+        onChange: (nextCells) => onChange?.(nextCells.join(""))
+    });
+
+    const chars = useMemo(
+        () => normalizeCells(_valueCells, resolvedLength),
+        [_valueCells, resolvedLength]
+    );
+
+    const charsRef = useRef(chars);
+    charsRef.current = chars;
+
+    const completedValueRef = useRef<string | null>(null);
+    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+
+    const hasWrapper = label || description || error;
+    const describedBy = error
+        ? `${_id}-error`
+        : description
+          ? `${_id}-description`
+          : undefined;
+
+    const resolvedInputMode =
+        inputMode ?? (characterSet === "numeric" ? "numeric" : "text");
+
+    const emitValue = useCallback(
+        (nextChars: string[]) => {
+            setValueCells(nextChars);
+
+            const nextValue = nextChars.join("");
+
+            if (!nextChars.includes("")) {
+                if (completedValueRef.current !== nextValue) {
+                    onComplete?.(nextValue);
+                    completedValueRef.current = nextValue;
+                }
+            } else {
+                completedValueRef.current = null;
+            }
+        },
+        [onComplete, setValueCells]
+    );
+
+    const focusCell = useCallback(
+        (index: number) => {
+            if (index < 0 || index >= resolvedLength) {
+                return;
+            }
+
+            setTimeout(() => {
+                const input = inputRefs.current[index];
+                if (!input) {
+                    return;
+                }
+
+                input.focus();
+                input.select();
+            }, 0);
+        },
+        [resolvedLength]
+    );
+
+    const fillFromIndex = useCallback(
+        (index: number, incoming: string[]) => {
+            const next = [...charsRef.current];
+            let writeIndex = index;
+
+            for (const char of incoming) {
+                if (writeIndex >= resolvedLength) {
+                    break;
+                }
+
+                next[writeIndex] = char;
+                writeIndex += 1;
+            }
+
+            emitValue(next);
+
+            if (writeIndex < resolvedLength) {
+                focusCell(writeIndex);
+                return;
+            }
+
+            focusCell(resolvedLength - 1);
+        },
+        [emitValue, focusCell, resolvedLength]
+    );
+
+    const handleCellChange = useCallback(
+        (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+            if (disabled) {
+                return;
+            }
+
+            const incoming = toSanitizedChars(
+                event.currentTarget.value,
+                sanitizingOptions
+            );
+
+            if (incoming.length === 0) {
+                if (event.currentTarget.value !== "") {
+                    return;
+                }
+
+                const next = [...charsRef.current];
+                next[index] = "";
+                emitValue(next);
+                return;
+            }
+
+            if (incoming.length === 1) {
+                const next = [...charsRef.current];
+                next[index] = incoming[0];
+                emitValue(next);
+
+                if (index < resolvedLength - 1) {
+                    focusCell(index + 1);
+                }
+
+                return;
+            }
+
+            fillFromIndex(index, incoming);
+        },
+        [
+            disabled,
+            sanitizingOptions,
+            emitValue,
+            resolvedLength,
+            focusCell,
+            fillFromIndex
+        ]
+    );
+
+    const handlePaste = useCallback(
+        (index: number, event: React.ClipboardEvent<HTMLInputElement>) => {
+            event.preventDefault();
+
+            if (disabled) {
+                return;
+            }
+
+            const incoming = toSanitizedChars(
+                event.clipboardData.getData("text"),
+                sanitizingOptions
+            );
+
+            if (incoming.length === 0) {
+                return;
+            }
+
+            fillFromIndex(index, incoming);
+        },
+        [disabled, sanitizingOptions, fillFromIndex]
+    );
+
+    const handleKeyDown = useCallback(
+        (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {
+            if (disabled) {
+                return;
+            }
+
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                focusCell(index - 1);
+                return;
+            }
+
+            if (event.key === "ArrowRight") {
+                event.preventDefault();
+                focusCell(index + 1);
+                return;
+            }
+
+            if (event.key === "Home") {
+                event.preventDefault();
+                focusCell(0);
+                return;
+            }
+
+            if (event.key === "End") {
+                event.preventDefault();
+                focusCell(resolvedLength - 1);
+                return;
+            }
+
+            if (event.key === "Backspace") {
+                event.preventDefault();
+                const next = [...charsRef.current];
+
+                if (next[index]) {
+                    next[index] = "";
+                    emitValue(next);
+                    return;
+                }
+
+                if (index > 0) {
+                    next[index - 1] = "";
+                    emitValue(next);
+                    focusCell(index - 1);
+                }
+
+                return;
+            }
+
+            if (event.key === "Delete") {
+                event.preventDefault();
+                const next = [...charsRef.current];
+                next[index] = "";
+                emitValue(next);
+            }
+        },
+        [disabled, emitValue, focusCell, resolvedLength]
+    );
+
+    const field = (
+        <div
+            ref={ref}
+            className={cx(
+                "flex w-full items-center gap-2",
+                className,
+                classes.root
+            )}
+        >
+            {chars.map((char, index) => (
+                <input
+                    key={`${_id}-cell-${index}`}
+                    {...props}
+                    id={`${_id}-${index}`}
+                    ref={(node) => {
+                        inputRefs.current[index] = node;
+                    }}
+                    type={mask ? "password" : "text"}
+                    inputMode={resolvedInputMode}
+                    autoComplete={index === 0 ? autoComplete : "off"}
+                    maxLength={resolvedLength}
+                    value={char}
+                    disabled={disabled}
+                    required={required && index === 0}
+                    placeholder={placeholder}
+                    aria-invalid={error ? true : undefined}
+                    aria-describedby={describedBy}
+                    aria-label={`${ariaLabelPrefix} ${index + 1} of ${resolvedLength}`}
+                    className={cx(
+                        "flex-none text-center font-medium tabular-nums outline-none transition-colors",
+                        "focus:border-[var(--refraktor-primary)]",
+                        getVariant(variant),
+                        getRadius(radius),
+                        CELL_SIZES[size],
+                        error && "border-[var(--refraktor-colors-red-6)]",
+                        disabled && "cursor-not-allowed opacity-50",
+                        classes.cell
+                    )}
+                    onChange={(event) => handleCellChange(index, event)}
+                    onKeyDown={(event) => handleKeyDown(index, event)}
+                    onPaste={(event) => handlePaste(index, event)}
+                    onFocus={(event) => event.currentTarget.select()}
+                />
+            ))}
+
+            {name && <input type="hidden" name={name} value={chars.join("")} />}
+        </div>
+    );
+
+    if (!hasWrapper) {
+        return field;
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            description={description}
+            error={error}
+            required={required}
+            withAsterisk={withAsterisk}
+            inputId={`${_id}-0`}
+        >
+            {field}
+        </InputWrapper>
+    );
+});
+
+PinInput.displayName = "@refraktor/core/PinInput";
+PinInput.configure = createComponentConfig<PinInputProps>();
+PinInput.classNames = createClassNamesConfig<PinInputClassNames>();
+
+export default PinInput;

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

@@ -0,0 +1,78 @@
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { InputProps } from "../input";
+
+export type PinInputCharacterSet =
+    | "numeric"
+    | "alphabetic"
+    | "alphanumeric"
+    | "all";
+
+export type PinInputTransform = "none" | "uppercase" | "lowercase";
+
+export type PinInputClassNames = {
+    root?: string;
+    cell?: string;
+};
+
+export interface _PinInputProps {
+    /** OTP length @default `6` */
+    length?: number;
+
+    /** Value (controlled) */
+    value?: string;
+
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+
+    /** Callback called whenever the code value changes */
+    onChange?: (value: string) => void;
+
+    /** Callback called when all cells are filled */
+    onComplete?: (value: string) => void;
+
+    /** Masks entered characters @default `false` */
+    mask?: boolean;
+
+    /** Character set filter @default `numeric` */
+    characterSet?: PinInputCharacterSet;
+
+    /** Optional custom character pattern (overrides characterSet) */
+    characterPattern?: RegExp;
+
+    /** Character transform @default `none` */
+    transform?: PinInputTransform;
+
+    /** Accessible label prefix for each cell @default `Character` */
+    ariaLabelPrefix?: string;
+
+    /** Hidden input name for form submission */
+    name?: string;
+
+    /** Used for styling different parts of the component */
+    classNames?: PinInputClassNames;
+}
+
+export type PinInputProps = _PinInputProps &
+    Omit<
+        InputProps,
+        | "type"
+        | "value"
+        | "defaultValue"
+        | "onChange"
+        | "leftSection"
+        | "rightSection"
+        | "maxLength"
+    >;
+
+export interface PinInputFactoryPayload extends FactoryPayload {
+    props: PinInputProps;
+    ref: HTMLDivElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<PinInputProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<PinInputClassNames>>;
+    };
+}

package/src/components/scroll-area/index.ts

@@ -0,0 +1,6 @@
+export { default as ScrollArea } from "./scroll-area";
+export type {
+    ScrollAreaProps,
+    ScrollAreaClassNames,
+    ScrollAreaOrientation
+} from "./scroll-area.types";

package/src/components/scroll-area/scroll-area.test.tsx

@@ -0,0 +1,72 @@
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "../../vitest";
+import ScrollArea from "./scroll-area";
+
+describe("@refraktor/core/ScrollArea", () => {
+    it("renders children with default vertical scroll behavior", async () => {
+        await render(
+            <ScrollArea data-testid="scroll-area">
+                <div>Content</div>
+            </ScrollArea>
+        );
+
+        const scrollArea = screen.getByTestId("scroll-area");
+
+        expect(scrollArea).toHaveClass("refraktor-scrollbar");
+        expect(scrollArea).toHaveClass("overflow-y-auto");
+        expect(scrollArea).toHaveClass("overflow-x-hidden");
+        expect(scrollArea).toHaveTextContent("Content");
+    });
+
+    it("supports horizontal and bidirectional orientation", async () => {
+        const { rerender } = await render(
+            <ScrollArea data-testid="scroll-area" orientation="horizontal" />
+        );
+
+        expect(screen.getByTestId("scroll-area")).toHaveClass(
+            "overflow-x-auto"
+        );
+        expect(screen.getByTestId("scroll-area")).toHaveClass(
+            "overflow-y-hidden"
+        );
+
+        rerender(<ScrollArea data-testid="scroll-area" orientation="both" />);
+
+        expect(screen.getByTestId("scroll-area")).toHaveClass("overflow-auto");
+    });
+
+    it("applies scrollbar size css variable", async () => {
+        await render(<ScrollArea data-testid="scroll-area" scrollbarSize={10} />);
+
+        const scrollArea = screen.getByTestId("scroll-area");
+
+        expect(scrollArea.style.getPropertyValue("--refraktor-scrollbar-size")).toBe(
+            "10px"
+        );
+    });
+
+    it("supports root and slot class names", async () => {
+        await render(
+            <ScrollArea
+                data-testid="scroll-area"
+                className="custom-root"
+                classNames={{ root: "slot-root" }}
+            />
+        );
+
+        const scrollArea = screen.getByTestId("scroll-area");
+
+        expect(scrollArea).toHaveClass("custom-root");
+        expect(scrollArea).toHaveClass("slot-root");
+    });
+
+    it("forwards ref to root element", async () => {
+        const ref = createRef<HTMLDivElement>();
+
+        await render(<ScrollArea ref={ref} />);
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current?.tagName).toBe("DIV");
+    });
+});

package/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,70 @@
+import type { CSSProperties } from "react";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import type {
+    ScrollAreaClassNames,
+    ScrollAreaFactoryPayload,
+    ScrollAreaOrientation,
+    ScrollAreaProps
+} from "./scroll-area.types";
+import { useTheme } from "../../theme";
+
+const defaultProps = {
+    orientation: "vertical",
+    scrollbarSize: 6
+} satisfies Partial<ScrollAreaProps>;
+
+function getOrientationStyles(orientation: ScrollAreaOrientation): string {
+    if (orientation === "horizontal") {
+        return "overflow-x-auto overflow-y-hidden";
+    }
+
+    if (orientation === "both") {
+        return "overflow-auto";
+    }
+
+    return "overflow-y-auto overflow-x-hidden";
+}
+
+const ScrollArea = factory<ScrollAreaFactoryPayload>((_props, ref) => {
+    const { cx } = useTheme();
+    const {
+        orientation,
+        scrollbarSize,
+        className,
+        classNames,
+        style,
+        ...props
+    } = useProps("ScrollArea", defaultProps, _props);
+    const classes = useClassNames("ScrollArea", classNames);
+
+    const resolvedStyle = {
+        ...(style ?? {}),
+        "--refraktor-scrollbar-size": `${scrollbarSize}px`
+    } as CSSProperties;
+
+    return (
+        <div
+            ref={ref}
+            className={cx(
+                "refraktor-scrollbar",
+                getOrientationStyles(orientation),
+                classes.root,
+                className
+            )}
+            style={resolvedStyle}
+            {...props}
+        />
+    );
+});
+
+ScrollArea.displayName = "@refraktor/core/ScrollArea";
+ScrollArea.configure = createComponentConfig<ScrollAreaProps>();
+ScrollArea.classNames = createClassNamesConfig<ScrollAreaClassNames>();
+
+export default ScrollArea;