@refraktor/core 0.0.1

package/build/components/modal/use-modal.js

@@ -0,0 +1,61 @@
+import { useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect } from "react";
+export function useModal(options) {
+    const { opened, defaultOpened, onOpenedChange, closeOnClickOutside = true, closeOnEscape = true, contentRef } = options;
+    const [isOpen, setIsOpen] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange
+    });
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen, setIsOpen]);
+    useEffect(() => {
+        if (!isOpen || !closeOnEscape) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [closeOnEscape, isOpen, setIsOpen]);
+    useEffect(() => {
+        if (!isOpen || !closeOnClickOutside) {
+            return;
+        }
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Node)) {
+                return;
+            }
+            if (contentRef.current?.contains(target)) {
+                return;
+            }
+            setIsOpen(false);
+        };
+        document.addEventListener("mousedown", handlePointerDown);
+        document.addEventListener("touchstart", handlePointerDown);
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown);
+            document.removeEventListener("touchstart", handlePointerDown);
+        };
+    }, [closeOnClickOutside, contentRef, isOpen, setIsOpen]);
+    return {
+        opened: isOpen,
+        open,
+        close,
+        toggle
+    };
+}

package/build/components/number-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NumberInput } from "./number-input";
+export * from "./number-input.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/number-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,cAAc,sBAAsB,CAAC"}

package/build/components/number-input/index.js

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

package/build/components/number-input/number-input.d.ts

@@ -0,0 +1,4 @@
+import { NumberInputFactoryPayload } from "./number-input.types";
+declare const NumberInput: import("../..").RefraktorComponent<NumberInputFactoryPayload>;
+export default NumberInput;
+//# sourceMappingURL=number-input.d.ts.map

package/build/components/number-input/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,yBAAyB,EAE5B,MAAM,sBAAsB,CAAC;AAsD9B,QAAA,MAAM,WAAW,+DAuRf,CAAC;AAMH,eAAe,WAAW,CAAC"}

package/build/components/number-input/number-input.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clamp, useId, useUncontrolled } from "@refraktor/utils";
+import { useTheme } from "../../theme";
+import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
+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) => value === "" ||
+    value === "." ||
+    value === "-" ||
+    value === "-." ||
+    /^-?\d+\.?$/.test(value);
+const toNumber = (value) => {
+    const num = parseFloat(value);
+    return Number.isNaN(num) ? undefined : num;
+};
+const formatValue = (num, precision) => {
+    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) {
+    const str = num.toString();
+    const decimalIndex = str.indexOf(".");
+    return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1;
+}
+function addWithPrecision(value, step, precision) {
+    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
+};
+const NumberInput = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, 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(null);
+    const repeatTimer = useRef(null);
+    const changeValue = useCallback((direction) => {
+        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) => {
+        if (disabled)
+            return;
+        changeValue(direction);
+        holdTimer.current = setInterval(() => {
+            repeatTimer.current = setTimeout(() => {
+                changeValue(direction);
+            }, 100);
+        }, 400);
+    };
+    const stopHold = () => {
+        if (holdTimer.current)
+            clearTimeout(holdTimer.current);
+        if (repeatTimer.current)
+            clearInterval(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) => {
+        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) => {
+        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) => {
+        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 (_jsxs("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), children: [_jsx("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, children: _jsx(ChevronIcon, { direction: "up", size: controlSizing.iconSize, className: cx("block", !canIncrement && "opacity-50") }) }), _jsx("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, children: _jsx(ChevronIcon, { direction: "down", size: controlSizing.iconSize, className: cx("block", !canDecrement && "opacity-50") }) })] }));
+    }, [controlsPosition, canIncrement, canDecrement, classes, controlSizing]);
+    return (_jsx(InputWrapper, { children: _jsx(InputField, { ref: ref, type: "number", 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
+            }, "aria-disabled": disabled, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Number(_value), ...props }) }));
+});
+NumberInput.displayName = "@refraktor/core/NumberInput";
+NumberInput.configure = createComponentConfig();
+NumberInput.classNames = createClassNamesConfig();
+export default NumberInput;

package/build/components/number-input/number-input.styles.d.ts

@@ -0,0 +1,28 @@
+import { RefraktorSize } from "../../theme";
+export declare const getControlSize: (size?: RefraktorSize) => {
+    width: string;
+    iconSize: number;
+    leftSpacing: string;
+    rightSpacing: string;
+} | {
+    width: string;
+    iconSize: number;
+    leftSpacing: string;
+    rightSpacing: string;
+} | {
+    width: string;
+    iconSize: number;
+    leftSpacing: string;
+    rightSpacing: string;
+} | {
+    width: string;
+    iconSize: number;
+    leftSpacing: string;
+    rightSpacing: string;
+} | {
+    width: string;
+    iconSize: number;
+    leftSpacing: string;
+    rightSpacing: string;
+};
+//# sourceMappingURL=number-input.styles.d.ts.map

package/build/components/number-input/number-input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAmC5C,eAAO,MAAM,cAAc,GAAI,OAAM,aAAoB;;;;;;;;;;;;;;;;;;;;;;;;;CACnC,CAAC"}

package/build/components/number-input/number-input.styles.js

@@ -0,0 +1,33 @@
+const controlSizes = {
+    xs: {
+        width: "w-3",
+        iconSize: 8,
+        leftSpacing: "mr-0.5",
+        rightSpacing: "ml-0.5"
+    },
+    sm: {
+        width: "w-4",
+        iconSize: 10,
+        leftSpacing: "mr-0.5",
+        rightSpacing: "ml-0.5"
+    },
+    md: {
+        width: "w-5",
+        iconSize: 12,
+        leftSpacing: "mr-1",
+        rightSpacing: "ml-1"
+    },
+    lg: {
+        width: "w-6",
+        iconSize: 14,
+        leftSpacing: "mr-1",
+        rightSpacing: "ml-1"
+    },
+    xl: {
+        width: "w-7",
+        iconSize: 16,
+        leftSpacing: "mr-1.5",
+        rightSpacing: "ml-1.5"
+    }
+};
+export const getControlSize = (size = "md") => controlSizes[size];

package/build/components/number-input/number-input.types.d.ts

@@ -0,0 +1,39 @@
+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>>;
+    };
+}
+//# sourceMappingURL=number-input.types.d.ts.map

package/build/components/number-input/number-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/number-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEjE,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IAC9B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAE5C,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;IAE/C,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAED,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAC5C,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,iBAAiB,CAAC,CAAC;AAEzE,MAAM,WAAW,yBAA0B,SAAQ,cAAc;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACtE,UAAU,EAAE,UAAU,CAClB,OAAO,sBAAsB,CAAC,qBAAqB,CAAC,CACvD,CAAC;KACL,CAAC;CACL"}

package/build/components/number-input/number-input.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Pagination } from "./pagination";
+export type { PaginationProps, PaginationClassNames, PaginationVariant, PaginationAriaLabelType } from "./pagination.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EACR,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EAC1B,MAAM,oBAAoB,CAAC"}

package/build/components/pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from "./pagination";

package/build/components/pagination/pagination.d.ts

@@ -0,0 +1,4 @@
+import { PaginationFactoryPayload } from "./pagination.types";
+declare const Pagination: import("../..").RefraktorComponent<PaginationFactoryPayload>;
+export default Pagination;
+//# sourceMappingURL=pagination.d.ts.map

package/build/components/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAYA,OAAO,EAGH,wBAAwB,EAE3B,MAAM,oBAAoB,CAAC;AA+C5B,QAAA,MAAM,UAAU,8DA4Sd,CAAC;AAMH,eAAe,UAAU,CAAC"}

package/build/components/pagination/pagination.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { buildPaginationRange } from "./pagination.utils";
+const defaultProps = {
+    siblings: 1,
+    boundaries: 1,
+    withControls: true,
+    withEdges: false,
+    hideWithOnePage: false,
+    disabled: false,
+    size: "md",
+    radius: "default",
+    variant: "default"
+};
+const getSafeNumber = (value, fallback, minimum = 0) => {
+    if (!Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.max(minimum, Math.trunc(value));
+};
+const getDefaultAriaLabel = (type, page, selected) => {
+    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((_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({
+        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, page, 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) => {
+        if (disabled || totalPages === 0) {
+            return;
+        }
+        const normalizedPage = clamp(nextPage, 1, totalPages);
+        if (normalizedPage === activePage) {
+            return;
+        }
+        setCurrentPage(normalizedPage);
+    };
+    const getControlClassName = (state, className) => 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) => 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 (_jsx("nav", { ...props, ref: ref, id: _id, role: "navigation", "aria-label": "Pagination", className: cx("w-full", classes.root, className), children: _jsxs("ul", { className: cx("inline-flex items-center", sizeStyles.list, classes.list), children: [withControls && withEdges && (_jsx("li", { className: cx(classes.item), children: _jsx("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), children: _jsxs("span", { className: "inline-flex items-center -space-x-2", children: [_jsx(ChevronIcon, { direction: "left", size: sizeStyles.iconSize }), _jsx(ChevronIcon, { direction: "left", size: sizeStyles.iconSize })] }) }) })), withControls && (_jsx("li", { className: cx(classes.item), children: _jsx("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), children: _jsx(ChevronIcon, { direction: "left", size: sizeStyles.iconSize }) }) })), items.map((item, index) => {
+                    if (typeof item !== "number") {
+                        return (_jsx("li", { className: cx(classes.item), children: _jsx("span", { "aria-hidden": "true", className: cx("inline-flex items-center justify-center select-none text-[var(--refraktor-text-tertiary)]", sizeStyles.dots, classes.dots), children: "..." }) }, `${item}-${index}`));
+                    }
+                    const isActive = item === activePage;
+                    return (_jsx("li", { className: cx(classes.item), children: _jsx("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), children: item }) }, item));
+                }), withControls && (_jsx("li", { className: cx(classes.item), children: _jsx("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), children: _jsx(ChevronIcon, { direction: "right", size: sizeStyles.iconSize }) }) })), withControls && withEdges && (_jsx("li", { className: cx(classes.item), children: _jsx("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), children: _jsxs("span", { className: "inline-flex items-center -space-x-2", children: [_jsx(ChevronIcon, { direction: "right", size: sizeStyles.iconSize }), _jsx(ChevronIcon, { direction: "right", size: sizeStyles.iconSize })] }) }) }))] }) }));
+});
+Pagination.displayName = "@refraktor/core/Pagination";
+Pagination.configure = createComponentConfig();
+Pagination.classNames = createClassNamesConfig();
+export default Pagination;

package/build/components/pagination/pagination.styles.d.ts

@@ -0,0 +1,17 @@
+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;
+};
+export declare const getSize: (size?: RefraktorSize) => PaginationSizeStyles;
+export declare const getVariant: (variant?: PaginationVariant) => PaginationVariantStyles;
+export {};
+//# sourceMappingURL=pagination.styles.d.ts.map

package/build/components/pagination/pagination.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,KAAK,oBAAoB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAkEF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,yBAAgB,CAAC;AAEnE,eAAO,MAAM,UAAU,GAAI,UAAS,iBAA6B,4BAC5C,CAAC"}

package/build/components/pagination/pagination.styles.js

@@ -0,0 +1,56 @@
+const sizes = {
+    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 = {
+    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 = "md") => sizes[size];
+export const getVariant = (variant = "default") => variants[variant];

package/build/components/pagination/pagination.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=pagination.test.d.ts.map

package/build/components/pagination/pagination.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.test.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.test.tsx"],"names":[],"mappings":""}