@refraktor/core 0.0.4 → 0.0.5

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

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

@@ -1,78 +0,0 @@
-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/popover/index.ts

@@ -1,12 +0,0 @@
-export { default as Popover } from "./popover";
-export { PopoverTrigger } from "./popover-trigger";
-export { PopoverDropdown } from "./popover-dropdown";
-export type {
-    PopoverProps,
-    PopoverTriggerProps,
-    PopoverDropdownProps,
-    PopoverClassNames,
-    PopoverPositioning,
-    PopoverMiddlewares,
-    PopoverTrigger as PopoverTriggerType
-} from "./popover.types";

package/src/components/popover/popover-dropdown/index.ts

@@ -1 +0,0 @@
-export { default as PopoverDropdown } from "./popover-dropdown";

package/src/components/popover/popover-dropdown/popover-dropdown.tsx

@@ -1,94 +0,0 @@
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { PopoverDropdownFactoryPayload } from "../popover.types";
-import { usePopoverContext } from "../popover.context";
-import { Transition } from "../../transition";
-import {
-    FloatingArrow,
-    FloatingFocusManager,
-    FloatingPortal
-} from "@floating-ui/react";
-
-const PopoverDropdown = factory<PopoverDropdownFactoryPayload>(
-    ({ children, className, style, ...props }, ref) => {
-        const { cx, getRadius } = useTheme();
-        const {
-            popover,
-            showArrow,
-            radius,
-            withinPortal,
-            transitionProps,
-            getStyles
-        } = usePopoverContext();
-
-        const dropdownContent = (
-            <Transition
-                transition="fade"
-                duration={200}
-                mounted={popover.opened}
-                style={{ position: "relative", zIndex: 1000 }}
-                {...transitionProps}
-            >
-                <div
-                    ref={(node) => {
-                        popover.refs.setFloating(node);
-
-                        if (typeof ref === "function") {
-                            ref(node);
-                        } else if (ref) {
-                            ref.current = node;
-                        }
-                    }}
-                    role="dialog"
-                    aria-modal="true"
-                    style={{
-                        ...popover.floatingStyles,
-                        zIndex: 1000,
-                        ...style
-                    }}
-                    className={cx(
-                        "z-50 p-2 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md text-sm border-0",
-                        getRadius(radius),
-                        getStyles("dropdown"),
-                        className
-                    )}
-                    {...popover.getFloatingProps()}
-                    {...props}
-                >
-                    {children}
-
-                    {showArrow && (
-                        <FloatingArrow
-                            ref={popover.arrowRef}
-                            context={popover.context}
-                            width={10}
-                            height={5}
-                            className={cx(
-                                "fill-[var(--refraktor-bg)]",
-                                getStyles("arrow")
-                            )}
-                        />
-                    )}
-                </div>
-            </Transition>
-        );
-
-        const wrappedContent = popover.opened ? (
-            <FloatingFocusManager context={popover.context} modal={false}>
-                {dropdownContent}
-            </FloatingFocusManager>
-        ) : (
-            dropdownContent
-        );
-
-        if (withinPortal) {
-            return <FloatingPortal>{wrappedContent}</FloatingPortal>;
-        }
-
-        return wrappedContent;
-    }
-);
-
-PopoverDropdown.displayName = "@refraktor/core/Popover.Dropdown";
-
-export default PopoverDropdown;

package/src/components/popover/popover-trigger/index.ts

@@ -1 +0,0 @@
-export { default as PopoverTrigger } from "./popover-trigger";

package/src/components/popover/popover-trigger/popover-trigger.tsx

@@ -1,49 +0,0 @@
-import { cloneElement, isValidElement, ComponentProps } from "react";
-import { useTheme } from "../../../theme";
-import { factory } from "../../../utils";
-import { PopoverTriggerFactoryPayload } from "../popover.types";
-import { usePopoverContext } from "../popover.context";
-
-const PopoverTrigger = factory<PopoverTriggerFactoryPayload>(
-    ({ children, className, ...props }, ref) => {
-        const { cx } = useTheme();
-        const { popover, getStyles } = usePopoverContext();
-
-        const triggerElement = isValidElement(children)
-            ? cloneElement(children as any, {
-                  ref: (node: HTMLElement | null) => {
-                      popover.refs.setReference(node);
-
-                      const childRef = (children as any).ref;
-                      if (typeof childRef === "function") {
-                          childRef(node);
-                      } else if (childRef) {
-                          childRef.current = node;
-                      }
-
-                      if (typeof ref === "function") {
-                          ref(node as HTMLDivElement);
-                      } else if (ref) {
-                          ref.current = node as HTMLDivElement;
-                      }
-                  },
-                  ...popover.getReferenceProps({
-                      ...(children.props as ComponentProps<any>)
-                  })
-              })
-            : children;
-
-        return (
-            <div
-                className={cx("inline-block", getStyles("trigger"), className)}
-                {...props}
-            >
-                {triggerElement}
-            </div>
-        );
-    }
-);
-
-PopoverTrigger.displayName = "@refraktor/core/Popover.Trigger";
-
-export default PopoverTrigger;