@refraktor/core 0.0.3 → 0.0.5

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

@@ -1,381 +0,0 @@
-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,
-        label,
-        description,
-        error,
-        required,
-        withAsterisk,
-        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) clearInterval(holdTimer.current);
-        if (repeatTimer.current) clearTimeout(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]);
-
-    const hasWrapper = label || description || error;
-
-    const field = (
-        <InputField
-            ref={ref}
-            id={_id}
-            type="number"
-            required={required}
-            error={!!error}
-            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-describedby={
-                error
-                    ? `${_id}-error`
-                    : description
-                      ? `${_id}-description`
-                      : undefined
-            }
-            aria-disabled={disabled}
-            aria-valuemin={min}
-            aria-valuemax={max}
-            aria-valuenow={Number(_value)}
-            {...props}
-        />
-    );
-
-    if (!hasWrapper) {
-        return field;
-    }
-
-    return (
-        <InputWrapper
-            label={label}
-            description={description}
-            error={error}
-            required={required}
-            withAsterisk={withAsterisk}
-            inputId={_id}
-        >
-            {field}
-        </InputWrapper>
-    );
-});
-
-NumberInput.displayName = "@refraktor/core/NumberInput";
-NumberInput.configure = createComponentConfig<NumberInputProps>();
-NumberInput.classNames = createClassNamesConfig<NumberInputClassNames>();
-
-export default NumberInput;

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

@@ -1,58 +0,0 @@
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-import { InputFieldClassNames, InputProps } from "../input";
-
-export type NumberInputControlsPosition = "left" | "right" | "none";
-
-export interface NumberInputClassNames extends InputFieldClassNames {
-    controls?: string;
-    increment?: string;
-    decrement?: string;
-    [key: string]: string | undefined;
-}
-
-export interface _NumberInputProps {
-    /** Value (controlled) */
-    value?: string | number;
-
-    /** Default value (uncontrolled) */
-    defaultValue?: string | number;
-
-    /** Callback called when the value changes */
-    onChange?: (value: string | number) => void;
-
-    /** Minimum value */
-    min?: number;
-
-    /** Maximum value */
-    max?: number;
-
-    /** Step value */
-    step?: number;
-
-    /** Number of decimal places for the value */
-    precision?: number;
-
-    /** Position of the controls @default `right` */
-    controlsPosition?: NumberInputControlsPosition;
-
-    /** Used for styling different parts of the component */
-    classNames?: NumberInputClassNames;
-}
-
-export type NumberInputProps = _NumberInputProps &
-    Omit<InputProps, "onChange" | "type" | keyof _NumberInputProps>;
-
-export interface NumberInputFactoryPayload extends FactoryPayload {
-    props: NumberInputProps;
-    ref: HTMLInputElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<NumberInputProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<NumberInputClassNames>
-        >;
-    };
-}

package/src/components/pagination/index.ts

@@ -1,7 +0,0 @@
-export { default as Pagination } from "./pagination";
-export type {
-    PaginationProps,
-    PaginationClassNames,
-    PaginationVariant,
-    PaginationAriaLabelType
-} from "./pagination.types";

package/src/components/pagination/pagination.styles.ts

@@ -1,84 +0,0 @@
-import { RefraktorSize } from "../../theme";
-import { PaginationVariant } from "./pagination.types";
-
-type PaginationSizeStyles = {
-    list: string;
-    item: string;
-    dots: string;
-    iconSize: number;
-};
-
-type PaginationVariantStyles = {
-    base: string;
-    active: string;
-    inactive: string;
-};
-
-const sizes: Record<RefraktorSize, PaginationSizeStyles> = {
-    xs: {
-        list: "gap-1",
-        item: "h-6 min-w-6 px-1.5 text-xs",
-        dots: "h-6 min-w-6 px-1 text-xs",
-        iconSize: 12
-    },
-    sm: {
-        list: "gap-1",
-        item: "h-7 min-w-7 px-2 text-xs",
-        dots: "h-7 min-w-7 px-1.5 text-xs",
-        iconSize: 14
-    },
-    md: {
-        list: "gap-1.5",
-        item: "h-8 min-w-8 px-2.5 text-sm",
-        dots: "h-8 min-w-8 px-2 text-sm",
-        iconSize: 16
-    },
-    lg: {
-        list: "gap-1.5",
-        item: "h-9 min-w-9 px-3 text-base",
-        dots: "h-9 min-w-9 px-2.5 text-base",
-        iconSize: 18
-    },
-    xl: {
-        list: "gap-2",
-        item: "h-10 min-w-10 px-3.5 text-lg",
-        dots: "h-10 min-w-10 px-3 text-lg",
-        iconSize: 20
-    }
-};
-
-const variants: Record<PaginationVariant, PaginationVariantStyles> = {
-    default: {
-        base: "border border-transparent",
-        active:
-            "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]",
-        inactive:
-            "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] hover:bg-[var(--refraktor-bg-hover)]"
-    },
-    filled: {
-        base: "border border-transparent",
-        active:
-            "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]",
-        inactive:
-            "bg-[var(--refraktor-bg-subtle)] text-[var(--refraktor-text-secondary)] hover:bg-[var(--refraktor-bg-hover)] hover:text-[var(--refraktor-text)]"
-    },
-    outline: {
-        base: "border border-[var(--refraktor-border)]",
-        active:
-            "border-[var(--refraktor-primary)] bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]",
-        inactive:
-            "text-[var(--refraktor-text)] hover:border-[var(--refraktor-border-hover)] hover:bg-[var(--refraktor-bg-hover)]"
-    },
-    ghost: {
-        base: "border border-transparent bg-transparent",
-        active:
-            "bg-[var(--refraktor-bg-hover)] text-[var(--refraktor-primary)]",
-        inactive:
-            "text-[var(--refraktor-text-secondary)] hover:bg-[var(--refraktor-bg-hover)] hover:text-[var(--refraktor-text)]"
-    }
-};
-
-export const getSize = (size: RefraktorSize = "md") => sizes[size];
-
-export const getVariant = (variant: PaginationVariant = "default") =>
-    variants[variant];

package/src/components/pagination/pagination.test.tsx

@@ -1,117 +0,0 @@
-import { useState } from "react";
-import { render as rtlRender } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, userEvent } from "../../vitest";
-import { ThemeProvider } from "../../theme";
-import Pagination from "./pagination";
-
-describe("@refraktor/core/Pagination", () => {
-    it("renders active page and controls", async () => {
-        await render(<Pagination total={7} defaultValue={3} />);
-
-        expect(
-            screen.getByRole("button", { name: "Page 3, current page" })
-        ).toHaveAttribute("aria-current", "page");
-        expect(
-            screen.getByRole("button", { name: "Go to previous page" })
-        ).toBeInTheDocument();
-        expect(
-            screen.getByRole("button", { name: "Go to next page" })
-        ).toBeInTheDocument();
-    });
-
-    it("calls onChange when next button is clicked", async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-
-        await render(<Pagination total={7} value={2} onChange={onChange} />);
-
-        await user.click(
-            screen.getByRole("button", { name: "Go to next page" })
-        );
-
-        expect(onChange).toHaveBeenCalledWith(3);
-    });
-
-    it("supports controlled mode", async () => {
-        const user = userEvent.setup();
-
-        function Demo() {
-            const [page, setPage] = useState(1);
-
-            return <Pagination total={8} value={page} onChange={setPage} />;
-        }
-
-        await render(<Demo />);
-
-        await user.click(screen.getByRole("button", { name: "Go to page 4" }));
-
-        expect(
-            screen.getByRole("button", { name: "Page 4, current page" })
-        ).toHaveAttribute("aria-current", "page");
-    });
-
-    it("renders dots when the range is large", async () => {
-        await render(<Pagination total={20} defaultValue={10} />);
-
-        expect(screen.getAllByText("...")).toHaveLength(2);
-    });
-
-    it("supports edge controls and disabled boundary states", async () => {
-        await render(<Pagination total={10} defaultValue={1} withEdges />);
-
-        expect(
-            screen.getByRole("button", { name: "Go to first page" })
-        ).toBeDisabled();
-        expect(
-            screen.getByRole("button", { name: "Go to previous page" })
-        ).toBeDisabled();
-        expect(
-            screen.getByRole("button", { name: "Go to next page" })
-        ).not.toBeDisabled();
-        expect(
-            screen.getByRole("button", { name: "Go to last page" })
-        ).not.toBeDisabled();
-    });
-
-    it("hides when total is one and hideWithOnePage is true", () => {
-        const { container } = rtlRender(
-            <ThemeProvider>
-                <Pagination total={1} hideWithOnePage />
-            </ThemeProvider>
-        );
-
-        expect(container.firstChild).toBeNull();
-    });
-
-    it("supports root and slot class names", async () => {
-        const { container } = await render(
-            <Pagination
-                total={20}
-                defaultValue={10}
-                className="custom-root"
-                classNames={{
-                    list: "custom-list",
-                    item: "custom-item",
-                    page: "custom-page",
-                    control: "custom-control",
-                    dots: "custom-dots"
-                }}
-            />
-        );
-
-        const root = container.firstElementChild as HTMLElement;
-        const list = root.querySelector("ul");
-
-        expect(root).toHaveClass("custom-root");
-        expect(list).toHaveClass("custom-list");
-        expect(root.querySelector("li")).toHaveClass("custom-item");
-        expect(root.querySelector('[data-active="true"]')).toHaveClass(
-            "custom-page"
-        );
-        expect(
-            screen.getByRole("button", { name: "Go to previous page" })
-        ).toHaveClass("custom-control");
-        expect(screen.getAllByText("...")[0]).toHaveClass("custom-dots");
-    });
-});