@refraktor/core 0.0.4 → 0.0.5

package/src/components/pagination/pagination.tsx

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

package/src/components/pagination/pagination.types.ts

@@ -1,95 +0,0 @@
-import { ComponentPropsWithoutRef } from "react";
-import { RefraktorRadius, RefraktorSize } from "../../theme";
-import {
-    createClassNamesConfig,
-    createComponentConfig,
-    FactoryPayload
-} from "../../utils";
-
-export type PaginationVariant = "default" | "filled" | "outline" | "ghost";
-
-export type PaginationAriaLabelType =
-    | "page"
-    | "first"
-    | "previous"
-    | "next"
-    | "last";
-
-export type PaginationClassNames = {
-    root?: string;
-    list?: string;
-    item?: string;
-    page?: string;
-    control?: string;
-    dots?: string;
-    first?: string;
-    previous?: string;
-    next?: string;
-    last?: string;
-};
-
-export interface PaginationProps
-    extends Omit<ComponentPropsWithoutRef<"nav">, "children" | "onChange"> {
-    /** Total amount of pages */
-    total: number;
-
-    /** Active page (controlled) */
-    value?: number;
-
-    /** Initial active page (uncontrolled) */
-    defaultValue?: number;
-
-    /** Callback called when page changes */
-    onChange?: (value: number) => void;
-
-    /** Number of sibling pages around active page @default `1` */
-    siblings?: number;
-
-    /** Number of always-visible pages at the edges @default `1` */
-    boundaries?: number;
-
-    /** Whether to show previous/next controls @default `true` */
-    withControls?: boolean;
-
-    /** Whether to show first/last controls @default `false` */
-    withEdges?: boolean;
-
-    /** Hide component when total is 1 @default `false` */
-    hideWithOnePage?: boolean;
-
-    /** Whether all controls are disabled @default `false` */
-    disabled?: boolean;
-
-    /** The size of the pagination @default `md` */
-    size?: RefraktorSize;
-
-    /** The radius of page buttons @default `default` */
-    radius?: RefraktorRadius;
-
-    /** Visual style variant @default `default` */
-    variant?: PaginationVariant;
-
-    /** Used for custom aria labels */
-    getItemAriaLabel?: (
-        type: PaginationAriaLabelType,
-        page: number,
-        selected: boolean
-    ) => string;
-
-    /** Used for editing root class name */
-    className?: string;
-
-    /** Used for styling different parts of the component */
-    classNames?: PaginationClassNames;
-}
-
-export interface PaginationFactoryPayload extends FactoryPayload {
-    props: PaginationProps;
-    ref: HTMLElement;
-    compound: {
-        configure: ReturnType<typeof createComponentConfig<PaginationProps>>;
-        classNames: ReturnType<
-            typeof createClassNamesConfig<PaginationClassNames>
-        >;
-    };
-}

package/src/components/pagination/pagination.utils.ts

@@ -1,88 +0,0 @@
-import { clamp } from "@refraktor/utils";
-
-export type PaginationRangeItem = number | "dots-left" | "dots-right";
-
-export type PaginationRangeOptions = {
-    total: number;
-    page: number;
-    siblings: number;
-    boundaries: number;
-};
-
-function range(start: number, end: number) {
-    if (end < start) {
-        return [];
-    }
-
-    const length = end - start + 1;
-
-    return Array.from({ length }, (_, index) => start + index);
-}
-
-function toSafeInteger(value: number, fallback: number, minimum = 0) {
-    if (!Number.isFinite(value)) {
-        return fallback;
-    }
-
-    return Math.max(minimum, Math.trunc(value));
-}
-
-export function buildPaginationRange(
-    options: PaginationRangeOptions
-): PaginationRangeItem[] {
-    const total = toSafeInteger(options.total, 0, 0);
-
-    if (total <= 0) {
-        return [];
-    }
-
-    const page = clamp(toSafeInteger(options.page, 1, 1), 1, total);
-    const siblings = toSafeInteger(options.siblings, 1, 0);
-    const boundaries = Math.min(
-        toSafeInteger(options.boundaries, 1, 0),
-        Math.floor(total / 2)
-    );
-
-    const totalVisibleNumbers = boundaries * 2 + siblings * 2 + 3;
-
-    if (totalVisibleNumbers >= total) {
-        return range(1, total);
-    }
-
-    const leftSiblingIndex = Math.max(page - siblings, boundaries + 2);
-    const rightSiblingIndex = Math.min(page + siblings, total - boundaries - 1);
-
-    const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;
-    const shouldShowRightDots = rightSiblingIndex < total - boundaries - 1;
-
-    const leftBoundary = range(1, boundaries);
-    const rightBoundary = range(total - boundaries + 1, total);
-
-    if (!shouldShowLeftDots && shouldShowRightDots) {
-        const leftItemsCount = boundaries + siblings * 2 + 2;
-        const leftRange = range(1, leftItemsCount);
-
-        return [...leftRange, "dots-right", ...rightBoundary];
-    }
-
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-        const rightItemsCount = boundaries + siblings * 2 + 2;
-        const rightRange = range(total - rightItemsCount + 1, total);
-
-        return [...leftBoundary, "dots-left", ...rightRange];
-    }
-
-    if (shouldShowLeftDots && shouldShowRightDots) {
-        const middleRange = range(leftSiblingIndex, rightSiblingIndex);
-
-        return [
-            ...leftBoundary,
-            "dots-left",
-            ...middleRange,
-            "dots-right",
-            ...rightBoundary
-        ];
-    }
-
-    return range(1, total);
-}

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

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

package/src/components/password-input/password-input.test.tsx

@@ -1,72 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render, screen, userEvent } from "../../vitest";
-import PasswordInput from "./password-input";
-
-describe("@refraktor/core/PasswordInput", () => {
-    it("supports input wrapper props", async () => {
-        await render(
-            <PasswordInput
-                label="Password"
-                description="Use at least 8 characters"
-                error="Password is required"
-            />
-        );
-
-        const input = screen.getByLabelText("Password");
-
-        expect(input).toHaveAttribute("type", "password");
-        expect(input).toHaveAttribute("aria-invalid", "true");
-        expect(screen.getByText("Use at least 8 characters")).toBeInTheDocument();
-        expect(screen.getByText("Password is required")).toBeInTheDocument();
-    });
-
-    it("toggles password visibility", async () => {
-        const user = userEvent.setup();
-
-        await render(<PasswordInput label="Password" />);
-
-        const input = screen.getByLabelText("Password");
-        const showButton = screen.getByRole("button", {
-            name: "Show password"
-        });
-
-        expect(input).toHaveAttribute("type", "password");
-        await user.click(showButton);
-        expect(input).toHaveAttribute("type", "text");
-
-        const hideButton = screen.getByRole("button", {
-            name: "Hide password"
-        });
-
-        await user.click(hideButton);
-        expect(input).toHaveAttribute("type", "password");
-    });
-
-    it("respects disabled state", async () => {
-        const user = userEvent.setup();
-
-        await render(<PasswordInput label="Password" disabled />);
-
-        const input = screen.getByLabelText("Password");
-        const toggle = screen.getByRole("button", {
-            name: "Show password"
-        });
-
-        expect(toggle).toBeDisabled();
-        await user.click(toggle);
-        expect(input).toHaveAttribute("type", "password");
-    });
-
-    it("allows disabling visibility toggle", async () => {
-        await render(
-            <PasswordInput label="Password" withVisibilityToggle={false} />
-        );
-
-        const input = screen.getByLabelText("Password");
-
-        expect(input).toHaveAttribute("type", "password");
-        expect(
-            screen.queryByRole("button", { name: "Show password" })
-        ).not.toBeInTheDocument();
-    });
-});