@refraktor/core 0.0.1

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

@@ -0,0 +1,58 @@
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    FactoryPayload
+} from "../../utils";
+import { InputFieldClassNames, InputFieldProps } 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<InputFieldProps, "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

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

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

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

@@ -0,0 +1,117 @@
+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");
+    });
+});

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,371 @@
+import { clamp, useId, useUncontrolled } from "@refraktor/utils";
+import { useMemo } from "react";
+import { ChevronIcon } from "../../icons";
+import { useTheme } from "../../theme";
+import {
+    createClassNamesConfig,
+    createComponentConfig,
+    factory,
+    useClassNames,
+    useProps
+} from "../../utils";
+import { getSize, getVariant } from "./pagination.styles";
+import {
+    PaginationAriaLabelType,
+    PaginationClassNames,
+    PaginationFactoryPayload,
+    PaginationProps
+} from "./pagination.types";
+import { buildPaginationRange } from "./pagination.utils";
+
+const defaultProps = {
+    siblings: 1,
+    boundaries: 1,
+    withControls: true,
+    withEdges: false,
+    hideWithOnePage: false,
+    disabled: false,
+    size: "md",
+    radius: "default",
+    variant: "default"
+} satisfies Partial<PaginationProps>;
+
+const getSafeNumber = (value: number, fallback: number, minimum = 0) => {
+    if (!Number.isFinite(value)) {
+        return fallback;
+    }
+
+    return Math.max(minimum, Math.trunc(value));
+};
+
+const getDefaultAriaLabel = (
+    type: PaginationAriaLabelType,
+    page: number,
+    selected: boolean
+) => {
+    if (type === "page") {
+        return selected ? `Page ${page}, current page` : `Go to page ${page}`;
+    }
+
+    if (type === "first") {
+        return "Go to first page";
+    }
+
+    if (type === "previous") {
+        return "Go to previous page";
+    }
+
+    if (type === "next") {
+        return "Go to next page";
+    }
+
+    return "Go to last page";
+};
+
+const Pagination = factory<PaginationFactoryPayload>((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const {
+        id,
+        total,
+        value,
+        defaultValue,
+        onChange,
+        siblings,
+        boundaries,
+        withControls,
+        withEdges,
+        hideWithOnePage,
+        disabled,
+        size,
+        radius,
+        variant,
+        getItemAriaLabel,
+        className,
+        classNames,
+        ...props
+    } = useProps("Pagination", defaultProps, _props);
+    const classes = useClassNames("Pagination", classNames);
+    const _id = useId(id);
+
+    const totalPages = getSafeNumber(total, 0, 0);
+    const safeSiblings = getSafeNumber(siblings, 1, 0);
+    const safeBoundaries = getSafeNumber(boundaries, 1, 0);
+
+    const [currentPage, setCurrentPage] = useUncontrolled<number>({
+        value,
+        defaultValue,
+        finalValue: 1,
+        onChange
+    });
+
+    const activePage =
+        totalPages > 0
+            ? clamp(getSafeNumber(currentPage, 1, 1), 1, totalPages)
+            : 1;
+
+    const items = useMemo(
+        () =>
+            buildPaginationRange({
+                total: totalPages,
+                page: activePage,
+                siblings: safeSiblings,
+                boundaries: safeBoundaries
+            }),
+        [totalPages, activePage, safeSiblings, safeBoundaries]
+    );
+
+    if (totalPages === 0) {
+        return null;
+    }
+
+    if (hideWithOnePage && totalPages === 1) {
+        return null;
+    }
+
+    const sizeStyles = getSize(size);
+    const variantStyles = getVariant(variant);
+
+    const resolveAriaLabel = (
+        type: PaginationAriaLabelType,
+        page: number,
+        selected = false
+    ) => {
+        if (getItemAriaLabel) {
+            return getItemAriaLabel(type, page, selected);
+        }
+
+        return getDefaultAriaLabel(type, page, selected);
+    };
+
+    const canGoPrevious = !disabled && activePage > 1;
+    const canGoNext = !disabled && activePage < totalPages;
+
+    const handlePageChange = (nextPage: number) => {
+        if (disabled || totalPages === 0) {
+            return;
+        }
+
+        const normalizedPage = clamp(nextPage, 1, totalPages);
+
+        if (normalizedPage === activePage) {
+            return;
+        }
+
+        setCurrentPage(normalizedPage);
+    };
+
+    const getControlClassName = (
+        state: { disabled: boolean },
+        className?: string
+    ) =>
+        cx(
+            "inline-flex items-center justify-center select-none outline-none transition-colors",
+            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
+            "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+            sizeStyles.item,
+            getRadius(radius),
+            variantStyles.base,
+            variantStyles.inactive,
+            classes.control,
+            className,
+            !state.disabled && "cursor-pointer"
+        );
+
+    const getPageClassName = (state: { active: boolean }) =>
+        cx(
+            "inline-flex items-center justify-center select-none outline-none transition-colors",
+            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--refraktor-primary)]",
+            "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+            sizeStyles.item,
+            getRadius(radius),
+            variantStyles.base,
+            state.active ? variantStyles.active : variantStyles.inactive,
+            classes.page,
+            !disabled && "cursor-pointer"
+        );
+
+    return (
+        <nav
+            {...props}
+            ref={ref}
+            id={_id}
+            role="navigation"
+            aria-label="Pagination"
+            className={cx("w-full", classes.root, className)}
+        >
+            <ul
+                className={cx(
+                    "inline-flex items-center",
+                    sizeStyles.list,
+                    classes.list
+                )}
+            >
+                {withControls && withEdges && (
+                    <li className={cx(classes.item)}>
+                        <button
+                            type="button"
+                            aria-label={resolveAriaLabel("first", 1, false)}
+                            aria-disabled={!canGoPrevious}
+                            data-disabled={!canGoPrevious}
+                            disabled={!canGoPrevious}
+                            className={getControlClassName(
+                                { disabled: !canGoPrevious },
+                                classes.first
+                            )}
+                            onClick={() => handlePageChange(1)}
+                        >
+                            <span className="inline-flex items-center -space-x-2">
+                                <ChevronIcon
+                                    direction="left"
+                                    size={sizeStyles.iconSize}
+                                />
+                                <ChevronIcon
+                                    direction="left"
+                                    size={sizeStyles.iconSize}
+                                />
+                            </span>
+                        </button>
+                    </li>
+                )}
+
+                {withControls && (
+                    <li className={cx(classes.item)}>
+                        <button
+                            type="button"
+                            aria-label={resolveAriaLabel(
+                                "previous",
+                                Math.max(1, activePage - 1),
+                                false
+                            )}
+                            aria-disabled={!canGoPrevious}
+                            data-disabled={!canGoPrevious}
+                            disabled={!canGoPrevious}
+                            className={getControlClassName(
+                                { disabled: !canGoPrevious },
+                                classes.previous
+                            )}
+                            onClick={() => handlePageChange(activePage - 1)}
+                        >
+                            <ChevronIcon
+                                direction="left"
+                                size={sizeStyles.iconSize}
+                            />
+                        </button>
+                    </li>
+                )}
+
+                {items.map((item, index) => {
+                    if (typeof item !== "number") {
+                        return (
+                            <li
+                                key={`${item}-${index}`}
+                                className={cx(classes.item)}
+                            >
+                                <span
+                                    aria-hidden="true"
+                                    className={cx(
+                                        "inline-flex items-center justify-center select-none text-[var(--refraktor-text-tertiary)]",
+                                        sizeStyles.dots,
+                                        classes.dots
+                                    )}
+                                >
+                                    ...
+                                </span>
+                            </li>
+                        );
+                    }
+
+                    const isActive = item === activePage;
+
+                    return (
+                        <li key={item} className={cx(classes.item)}>
+                            <button
+                                type="button"
+                                aria-label={resolveAriaLabel(
+                                    "page",
+                                    item,
+                                    isActive
+                                )}
+                                aria-current={isActive ? "page" : undefined}
+                                aria-disabled={disabled}
+                                data-active={isActive}
+                                data-disabled={disabled}
+                                disabled={disabled}
+                                className={getPageClassName({
+                                    active: isActive
+                                })}
+                                onClick={() => handlePageChange(item)}
+                            >
+                                {item}
+                            </button>
+                        </li>
+                    );
+                })}
+
+                {withControls && (
+                    <li className={cx(classes.item)}>
+                        <button
+                            type="button"
+                            aria-label={resolveAriaLabel(
+                                "next",
+                                Math.min(totalPages, activePage + 1),
+                                false
+                            )}
+                            aria-disabled={!canGoNext}
+                            data-disabled={!canGoNext}
+                            disabled={!canGoNext}
+                            className={getControlClassName(
+                                { disabled: !canGoNext },
+                                classes.next
+                            )}
+                            onClick={() => handlePageChange(activePage + 1)}
+                        >
+                            <ChevronIcon
+                                direction="right"
+                                size={sizeStyles.iconSize}
+                            />
+                        </button>
+                    </li>
+                )}
+
+                {withControls && withEdges && (
+                    <li className={cx(classes.item)}>
+                        <button
+                            type="button"
+                            aria-label={resolveAriaLabel(
+                                "last",
+                                totalPages,
+                                false
+                            )}
+                            aria-disabled={!canGoNext}
+                            data-disabled={!canGoNext}
+                            disabled={!canGoNext}
+                            className={getControlClassName(
+                                { disabled: !canGoNext },
+                                classes.last
+                            )}
+                            onClick={() => handlePageChange(totalPages)}
+                        >
+                            <span className="inline-flex items-center -space-x-2">
+                                <ChevronIcon
+                                    direction="right"
+                                    size={sizeStyles.iconSize}
+                                />
+                                <ChevronIcon
+                                    direction="right"
+                                    size={sizeStyles.iconSize}
+                                />
+                            </span>
+                        </button>
+                    </li>
+                )}
+            </ul>
+        </nav>
+    );
+});
+
+Pagination.displayName = "@refraktor/core/Pagination";
+Pagination.configure = createComponentConfig<PaginationProps>();
+Pagination.classNames = createClassNamesConfig<PaginationClassNames>();
+
+export default Pagination;