@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-numbered-steps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../numbered-steps/src/numbered-steps.ts", "../../numbered-steps/src/numbered-steps.styles.ts", "../../react-numbered-steps/src/numbered-steps.tsx"],
+  "sourcesContent": ["/** A single step item in the numbered steps grid. */\nexport type NumberedStepItem = {\n  /** Step title displayed prominently below the ordinal badge. */\n  title: string\n  /** Step body copy displayed below the title. */\n  body: string\n}\n\nexport interface NumberedStepsProps {\n  /** The step items to display. */\n  items: NumberedStepItem[]\n  /**\n   * Number of grid columns. When omitted, defaults to clamping the item count\n   * to the 2–5 range via {@link stepColumns}.\n   */\n  columns?: number\n}\n\nexport interface NumberedStepsAPI {\n  /** ARIA attributes to spread on the container element (`role=\"list\"`). */\n  ariaProps: { role: 'list' }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Zero-pad a 1-indexed ordinal to at least two digits.\n *\n * @example\n * padOrdinal(1)  // '01'\n * padOrdinal(10) // '10'\n */\nexport function padOrdinal(n: number): string {\n  return String(n).padStart(2, '0')\n}\n\n/**\n * Derive the number of grid columns from the item count.\n * Clamps the count to the 2–5 range.\n *\n * @example\n * stepColumns(3) // 3\n * stepColumns(1) // 2\n * stepColumns(6) // 5\n */\nexport function stepColumns(count: number): number {\n  return Math.min(5, Math.max(2, count))\n}\n\n/**\n * Build the framework-agnostic container props for a numbered-steps grid.\n *\n * Returns `role=\"list\"` plus data attributes; adapters spread these onto their\n * container and render each step as a `role=\"listitem\"`.\n */\nexport function createNumberedSteps(): NumberedStepsAPI {\n  const ariaProps = { role: 'list' } as const\n\n  const dataAttributes: Record<string, string> = {\n    'data-component': 'numbered-steps',\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Container grid for the numbered steps. The `columns` variant maps to a\n * fixed Tailwind grid-cols class; adapters that need a dynamic column count\n * use `gridTemplateColumns` inline style via {@link stepColumns} instead and\n * omit this variant.\n */\nexport const numberedStepsVariants = cva({\n  base: 'grid gap-6',\n  variants: {\n    columns: {\n      '2': 'grid-cols-2',\n      '3': 'grid-cols-3',\n      '4': 'grid-cols-4',\n      '5': 'grid-cols-5',\n    },\n  },\n  defaultVariants: {\n    columns: '3',\n  },\n})\n\n/** Individual step card. */\nexport const numberedStepsItemClass =\n  'rounded-xl border border-border bg-card p-5'\n\n/** Zero-padded ordinal badge above each step title. */\nexport const numberedStepsOrdinalClass = 'font-mono text-sm text-primary'\n\n/** Step title. */\nexport const numberedStepsTitleClass = 'mt-2 text-sm font-bold text-foreground'\n\n/** Step body copy. */\nexport const numberedStepsBodyClass =\n  'mt-1 text-xs text-muted-foreground leading-relaxed'\n", "import * as React from 'react'\nimport {\n  createNumberedSteps,\n  padOrdinal,\n  stepColumns,\n  numberedStepsVariants,\n  numberedStepsItemClass,\n  numberedStepsOrdinalClass,\n  numberedStepsTitleClass,\n  numberedStepsBodyClass,\n  type NumberedStepItem,\n} from '@refraction-ui/numbered-steps'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { NumberedStepItem }\n\nexport interface NumberedStepsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** The step items to display (3–5 recommended). */\n  items: NumberedStepItem[]\n  /**\n   * Override the number of grid columns. Defaults to clamping item count to\n   * 2–5 via `stepColumns`.\n   */\n  columns?: number\n}\n\n/**\n * NumberedSteps — a static how-it-works step grid.\n *\n * Renders a CSS grid of step cards, each with a zero-padded ordinal badge\n * (01, 02…), a title, and body copy. Not a stateful stepper — use the `Steps`\n * component for that. Exposes `role=\"list\"` semantics with each card as\n * `role=\"listitem\"`.\n */\nexport const NumberedSteps = React.forwardRef<\n  HTMLDivElement,\n  NumberedStepsProps\n>(function NumberedSteps({ items, columns, className, ...props }, ref) {\n  const cols = columns ?? stepColumns(items.length)\n  const { ariaProps, dataAttributes } = createNumberedSteps()\n\n  return (\n    <div\n      ref={ref}\n      className={cn(numberedStepsVariants(), className)}\n      style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}\n      {...ariaProps}\n      {...dataAttributes}\n      {...props}\n    >\n      {items.map((item, index) => (\n        <div key={index} role=\"listitem\" className={numberedStepsItemClass}>\n          <span className={numberedStepsOrdinalClass}>\n            {padOrdinal(index + 1)}\n          </span>\n          <p className={numberedStepsTitleClass}>{item.title}</p>\n          <p className={numberedStepsBodyClass}>{item.body}</p>\n        </div>\n      ))}\n    </div>\n  )\n})\n"],
+  "mappings": ";;;;;;;;;AAgCO,SAAS,WAAW,GAAmB;AAC5C,SAAO,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG;AAClC;AAWO,SAAS,YAAY,OAAuB;AACjD,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AACvC;AAQO,SAAS,sBAAwC;AACtD,QAAM,YAAY,EAAE,MAAM,OAAA;AAE1B,QAAM,iBAAyC;IAC7C,kBAAkB;EAAA;AAGpB,SAAO,EAAE,WAAW,eAAA;AACtB;ACvDO,IAAM,wBAAwB,IAAI;EACvC,MAAM;EACN,UAAU;IACR,SAAS;MACP,KAAK;MACL,KAAK;MACL,KAAK;MACL,KAAK;IAAA;EACP;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,yBACX;AAGK,IAAM,4BAA4B;AAGlC,IAAM,0BAA0B;AAGhC,IAAM,yBACX;;;;ACAK,IAAM,gBAAsB,iBAGjC,SAASA,eAAc,EAAE,OAAO,SAAS,WAAW,GAAG,MAAA,GAAS,KAAK;AACrE,QAAM,OAAO,WAAW,YAAY,MAAM,MAAM;AAChD,QAAM,EAAE,WAAW,eAAA,IAAmB,oBAAA;AAEtC,SACE;IAAC;IAAA;MACC;MACA,WAAW,GAAG,sBAAA,GAAyB,SAAS;MAChD,OAAO,EAAE,qBAAqB,UAAU,IAAI,oBAAA;MAC3C,GAAG;MACH,GAAG;MACH,GAAG;MAEH,UAAA,MAAM,IAAI,CAAC,MAAM,UAAA,qBACf,OAAA,EAAgB,MAAK,YAAW,WAAW,wBAC1C,UAAA;QAAA,oBAAC,QAAA,EAAK,WAAW,2BACd,UAAA,WAAW,QAAQ,CAAC,EAAA,CACvB;QACA,oBAAC,KAAA,EAAE,WAAW,yBAA0B,UAAA,KAAK,MAAA,CAAM;QACnD,oBAAC,KAAA,EAAE,WAAW,wBAAyB,UAAA,KAAK,KAAA,CAAK;MAAA,EAAA,GALzC,KAMV,CACD;IAAA;EAAA;AAGP,CAAC;",
+  "names": ["NumberedSteps"]
+}

package/dist/react-otp-input.js

@@ -0,0 +1,318 @@
+import {
+  Keys,
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-otp-input/dist/index.js
+import * as React from "react";
+
+// ../otp-input/dist/index.js
+function createOtpInput(props = {}) {
+  const {
+    length = 6,
+    value = "",
+    autoFocus = false,
+    type = "number",
+    disabled = false
+  } = props;
+  const isInteractive = !disabled;
+  const values = Array.from({ length }, (_, i) => value.charAt(i) || "");
+  let focusedIndex = autoFocus ? 0 : -1;
+  const rootAriaProps = {
+    role: "group",
+    "aria-label": "One-time password input"
+  };
+  function setValue(index, char) {
+    if (index < 0 || index >= length) return [...values];
+    const filtered = type === "number" ? char.replace(/[^0-9]/g, "") : char;
+    const newValues = [...values];
+    newValues[index] = filtered.charAt(0) || "";
+    for (let i = 0; i < length; i++) {
+      values[i] = newValues[i];
+    }
+    return newValues;
+  }
+  function getValue() {
+    return values.join("");
+  }
+  function moveFocus(direction) {
+    if (direction === "left") {
+      focusedIndex = Math.max(0, focusedIndex - 1);
+    } else {
+      focusedIndex = Math.min(length - 1, focusedIndex + 1);
+    }
+    return focusedIndex;
+  }
+  function getSlotProps(index) {
+    const isFocused = index === focusedIndex;
+    const isFilled = values[index] !== "";
+    const ariaProps = {
+      "aria-label": `Digit ${index + 1} of ${length}`
+    };
+    const dataAttributes = {
+      "data-slot": "otp-slot"
+    };
+    if (isFocused) {
+      dataAttributes["data-focused"] = "";
+    }
+    if (isFilled) {
+      dataAttributes["data-filled"] = "";
+    }
+    const inputProps = {
+      maxLength: 1,
+      inputMode: type === "number" ? "numeric" : "text",
+      pattern: type === "number" ? "[0-9]*" : void 0,
+      autoComplete: index === 0 ? "one-time-code" : "off",
+      disabled
+    };
+    return { ariaProps, dataAttributes, inputProps };
+  }
+  function getKeyboardHandlers(index, callbacks) {
+    if (!isInteractive) {
+      return {
+        [Keys.Backspace]: (e) => e.preventDefault(),
+        [Keys.ArrowLeft]: (e) => e.preventDefault(),
+        [Keys.ArrowRight]: (e) => e.preventDefault()
+      };
+    }
+    return {
+      [Keys.Backspace]: (e) => {
+        e.preventDefault();
+        if (values[index]) {
+          const newValues = setValue(index, "");
+          callbacks?.onSetValue?.(index, newValues);
+        } else if (index > 0) {
+          focusedIndex = index - 1;
+          const newValues = setValue(index - 1, "");
+          callbacks?.onSetValue?.(index - 1, newValues);
+          callbacks?.onMoveFocus?.(focusedIndex);
+        }
+      },
+      [Keys.ArrowLeft]: (e) => {
+        e.preventDefault();
+        if (index > 0) {
+          focusedIndex = index - 1;
+          callbacks?.onMoveFocus?.(focusedIndex);
+        }
+      },
+      [Keys.ArrowRight]: (e) => {
+        e.preventDefault();
+        if (index < length - 1) {
+          focusedIndex = index + 1;
+          callbacks?.onMoveFocus?.(focusedIndex);
+        }
+      }
+    };
+  }
+  function parsePaste(text) {
+    const chars = type === "number" ? text.replace(/[^0-9]/g, "") : text;
+    return Array.from({ length }, (_, i) => chars.charAt(i) || "");
+  }
+  return {
+    state: {
+      values,
+      focusedIndex,
+      length,
+      disabled
+    },
+    setValue,
+    getValue,
+    moveFocus,
+    getSlotProps,
+    getKeyboardHandlers,
+    parsePaste,
+    rootAriaProps,
+    isInteractive
+  };
+}
+var otpInputTokens = {
+  name: "otp-input",
+  tokens: {
+    bg: { variable: "--rfr-otp-bg", fallback: "hsl(var(--background))" },
+    fg: { variable: "--rfr-otp-fg", fallback: "hsl(var(--foreground))" },
+    border: { variable: "--rfr-otp-border", fallback: "hsl(var(--border))" },
+    "border-filled": { variable: "--rfr-otp-border-filled", fallback: "hsl(var(--primary))" },
+    ring: { variable: "--rfr-otp-ring", fallback: "hsl(var(--ring))" }
+  }
+};
+var otpInputContainerVariants = cva({
+  base: "flex items-center gap-2",
+  variants: {
+    size: {
+      sm: "gap-1.5",
+      default: "gap-2",
+      lg: "gap-3"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var otpInputSlotVariants = cva({
+  base: "relative flex items-center justify-center rounded-md border border-input bg-background text-center font-mono shadow-sm transition-all",
+  variants: {
+    size: {
+      sm: "h-8 w-8 text-sm",
+      default: "h-10 w-10 text-base",
+      lg: "h-12 w-12 text-lg"
+    },
+    focused: {
+      true: "ring-2 ring-ring ring-offset-background",
+      false: ""
+    },
+    filled: {
+      true: "border-primary",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    focused: "false",
+    filled: "false"
+  }
+});
+
+// ../react-otp-input/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var OtpInput = React.forwardRef(
+  function OtpInput2({
+    length = 6,
+    value = "",
+    onChange,
+    autoFocus = false,
+    type = "number",
+    disabled = false,
+    size = "default",
+    className,
+    ...props
+  }, ref) {
+    const inputRefs = React.useRef([]);
+    const [focusedIndex, setFocusedIndex] = React.useState(autoFocus ? 0 : -1);
+    const [values, setValues] = React.useState(
+      () => Array.from({ length }, (_, i) => value.charAt(i) || "")
+    );
+    React.useEffect(() => {
+      setValues(Array.from({ length }, (_, i) => value.charAt(i) || ""));
+    }, [value, length]);
+    React.useEffect(() => {
+      if (autoFocus && inputRefs.current[0]) {
+        inputRefs.current[0].focus();
+      }
+    }, [autoFocus]);
+    const api = createOtpInput({ length, value, autoFocus, type, disabled });
+    const updateValue = (index, char) => {
+      const filtered = type === "number" ? char.replace(/[^0-9]/g, "") : char;
+      const newChar = filtered.charAt(0) || "";
+      const newValues = [...values];
+      newValues[index] = newChar;
+      setValues(newValues);
+      onChange?.(newValues.join(""));
+      return newChar;
+    };
+    const handleInput = (index, e) => {
+      const inputValue = e.target.value;
+      const char = inputValue.slice(-1);
+      const result = updateValue(index, char);
+      if (result && index < length - 1) {
+        setFocusedIndex(index + 1);
+        inputRefs.current[index + 1]?.focus();
+      }
+    };
+    const handleKeyDown = (index, e) => {
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        if (values[index]) {
+          updateValue(index, "");
+        } else if (index > 0) {
+          updateValue(index - 1, "");
+          setFocusedIndex(index - 1);
+          inputRefs.current[index - 1]?.focus();
+        }
+      }
+      if (e.key === "ArrowLeft" && index > 0) {
+        e.preventDefault();
+        setFocusedIndex(index - 1);
+        inputRefs.current[index - 1]?.focus();
+      }
+      if (e.key === "ArrowRight" && index < length - 1) {
+        e.preventDefault();
+        setFocusedIndex(index + 1);
+        inputRefs.current[index + 1]?.focus();
+      }
+    };
+    const handlePaste = (e) => {
+      e.preventDefault();
+      const pasteData = e.clipboardData.getData("text");
+      const parsed = api.parsePaste(pasteData);
+      setValues(parsed);
+      onChange?.(parsed.join(""));
+      let lastFilledIndex = -1;
+      for (let i = parsed.length - 1; i >= 0; i--) {
+        if (parsed[i] !== "") {
+          lastFilledIndex = i;
+          break;
+        }
+      }
+      const nextIndex = Math.min(lastFilledIndex + 1, length - 1);
+      setFocusedIndex(nextIndex);
+      inputRefs.current[nextIndex]?.focus();
+    };
+    const handleFocus = (index) => {
+      setFocusedIndex(index);
+    };
+    const handleBlur = () => {
+      setFocusedIndex(-1);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(otpInputContainerVariants({ size }), className),
+        ...api.rootAriaProps,
+        ...props,
+        children: Array.from({ length }, (_, index) => {
+          api.getSlotProps(index);
+          const isFocused = index === focusedIndex;
+          const isFilled = values[index] !== "";
+          return /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (el) => {
+                inputRefs.current[index] = el;
+              },
+              className: cn(otpInputSlotVariants({
+                size,
+                focused: isFocused ? "true" : "false",
+                filled: isFilled ? "true" : "false"
+              })),
+              value: values[index],
+              onChange: (e) => handleInput(index, e),
+              onKeyDown: (e) => handleKeyDown(index, e),
+              onPaste: handlePaste,
+              onFocus: () => handleFocus(index),
+              onBlur: handleBlur,
+              maxLength: 1,
+              inputMode: type === "number" ? "numeric" : "text",
+              pattern: type === "number" ? "[0-9]*" : void 0,
+              autoComplete: index === 0 ? "one-time-code" : "off",
+              disabled,
+              "aria-label": `Digit ${index + 1} of ${length}`,
+              "data-slot": "otp-slot",
+              "data-focused": isFocused ? "" : void 0,
+              "data-filled": isFilled ? "" : void 0
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+export {
+  OtpInput,
+  otpInputContainerVariants,
+  otpInputSlotVariants,
+  otpInputTokens
+};
+//# sourceMappingURL=react-otp-input.js.map

package/dist/react-otp-input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../otp-input/src/otp-input.ts", "../../otp-input/src/otp-input.styles.ts", "../../react-otp-input/src/otp-input.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { Keys } from '@refraction-ui/shared'\n\nexport type OtpInputType = 'number' | 'text'\n\nexport interface OtpInputProps {\n  length?: number\n  value?: string\n  autoFocus?: boolean\n  type?: OtpInputType\n  disabled?: boolean\n}\n\nexport interface OtpSlotProps {\n  ariaProps: Partial<AccessibilityProps>\n  dataAttributes: Record<string, string>\n  inputProps: {\n    maxLength: number\n    inputMode: string\n    pattern?: string\n    autoComplete: string\n    disabled: boolean\n  }\n}\n\nexport interface OtpInputAPI {\n  /** Current state */\n  state: {\n    values: string[]\n    focusedIndex: number\n    length: number\n    disabled: boolean\n  }\n  /** Set the value at a specific index */\n  setValue: (index: number, char: string) => string[]\n  /** Get the combined OTP string */\n  getValue: () => string\n  /** Move focus in a direction, returns new index */\n  moveFocus: (direction: 'left' | 'right') => number\n  /** Get aria/input props for a specific slot */\n  getSlotProps: (index: number) => OtpSlotProps\n  /** Keyboard handlers factory for a specific slot */\n  getKeyboardHandlers: (\n    index: number,\n    callbacks?: {\n      onMoveFocus?: (index: number) => void\n      onSetValue?: (index: number, values: string[]) => void\n    },\n  ) => KeyboardHandlerMap\n  /** Parse a paste string into values array */\n  parsePaste: (text: string) => string[]\n  /** Root container ARIA props */\n  rootAriaProps: Partial<AccessibilityProps>\n  /** Whether interaction should be blocked */\n  isInteractive: boolean\n}\n\nexport function createOtpInput(props: OtpInputProps = {}): OtpInputAPI {\n  const {\n    length = 6,\n    value = '',\n    autoFocus = false,\n    type = 'number',\n    disabled = false,\n  } = props\n\n  const isInteractive = !disabled\n\n  // Initialize values from the provided value string\n  const values: string[] = Array.from({ length }, (_, i) => value.charAt(i) || '')\n  let focusedIndex = autoFocus ? 0 : -1\n\n  const rootAriaProps: Partial<AccessibilityProps> = {\n    role: 'group',\n    'aria-label': 'One-time password input',\n  }\n\n  function setValue(index: number, char: string): string[] {\n    if (index < 0 || index >= length) return [...values]\n    const filtered = type === 'number' ? char.replace(/[^0-9]/g, '') : char\n    const newValues = [...values]\n    newValues[index] = filtered.charAt(0) || ''\n    // Update internal state\n    for (let i = 0; i < length; i++) {\n      values[i] = newValues[i]\n    }\n    return newValues\n  }\n\n  function getValue(): string {\n    return values.join('')\n  }\n\n  function moveFocus(direction: 'left' | 'right'): number {\n    if (direction === 'left') {\n      focusedIndex = Math.max(0, focusedIndex - 1)\n    } else {\n      focusedIndex = Math.min(length - 1, focusedIndex + 1)\n    }\n    return focusedIndex\n  }\n\n  function getSlotProps(index: number): OtpSlotProps {\n    const isFocused = index === focusedIndex\n    const isFilled = values[index] !== ''\n\n    const ariaProps: Partial<AccessibilityProps> = {\n      'aria-label': `Digit ${index + 1} of ${length}`,\n    }\n\n    const dataAttributes: Record<string, string> = {\n      'data-slot': 'otp-slot',\n    }\n    if (isFocused) {\n      dataAttributes['data-focused'] = ''\n    }\n    if (isFilled) {\n      dataAttributes['data-filled'] = ''\n    }\n\n    const inputProps = {\n      maxLength: 1,\n      inputMode: type === 'number' ? 'numeric' : 'text',\n      pattern: type === 'number' ? '[0-9]*' : undefined,\n      autoComplete: index === 0 ? 'one-time-code' : 'off',\n      disabled,\n    }\n\n    return { ariaProps, dataAttributes, inputProps }\n  }\n\n  function getKeyboardHandlers(\n    index: number,\n    callbacks?: {\n      onMoveFocus?: (index: number) => void\n      onSetValue?: (index: number, values: string[]) => void\n    },\n  ): KeyboardHandlerMap {\n    if (!isInteractive) {\n      return {\n        [Keys.Backspace]: (e) => e.preventDefault(),\n        [Keys.ArrowLeft]: (e) => e.preventDefault(),\n        [Keys.ArrowRight]: (e) => e.preventDefault(),\n      }\n    }\n\n    return {\n      [Keys.Backspace]: (e) => {\n        e.preventDefault()\n        if (values[index]) {\n          const newValues = setValue(index, '')\n          callbacks?.onSetValue?.(index, newValues)\n        } else if (index > 0) {\n          focusedIndex = index - 1\n          const newValues = setValue(index - 1, '')\n          callbacks?.onSetValue?.(index - 1, newValues)\n          callbacks?.onMoveFocus?.(focusedIndex)\n        }\n      },\n      [Keys.ArrowLeft]: (e) => {\n        e.preventDefault()\n        if (index > 0) {\n          focusedIndex = index - 1\n          callbacks?.onMoveFocus?.(focusedIndex)\n        }\n      },\n      [Keys.ArrowRight]: (e) => {\n        e.preventDefault()\n        if (index < length - 1) {\n          focusedIndex = index + 1\n          callbacks?.onMoveFocus?.(focusedIndex)\n        }\n      },\n    }\n  }\n\n  function parsePaste(text: string): string[] {\n    const chars = type === 'number' ? text.replace(/[^0-9]/g, '') : text\n    return Array.from({ length }, (_, i) => chars.charAt(i) || '')\n  }\n\n  return {\n    state: {\n      values,\n      focusedIndex,\n      length,\n      disabled,\n    },\n    setValue,\n    getValue,\n    moveFocus,\n    getSlotProps,\n    getKeyboardHandlers,\n    parsePaste,\n    rootAriaProps,\n    isInteractive,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const otpInputTokens: TokenContract = {\n  name: 'otp-input',\n  tokens: {\n    bg: { variable: '--rfr-otp-bg', fallback: 'hsl(var(--background))' },\n    fg: { variable: '--rfr-otp-fg', fallback: 'hsl(var(--foreground))' },\n    border: { variable: '--rfr-otp-border', fallback: 'hsl(var(--border))' },\n    'border-filled': { variable: '--rfr-otp-border-filled', fallback: 'hsl(var(--primary))' },\n    ring: { variable: '--rfr-otp-ring', fallback: 'hsl(var(--ring))' },\n  },\n}\n\nexport const otpInputContainerVariants = cva({\n  base: 'flex items-center gap-2',\n  variants: {\n    size: {\n      sm: 'gap-1.5',\n      default: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n  },\n})\n\nexport const otpInputSlotVariants = cva({\n  base: 'relative flex items-center justify-center rounded-md border border-input bg-background text-center font-mono shadow-sm transition-all',\n  variants: {\n    size: {\n      sm: 'h-8 w-8 text-sm',\n      default: 'h-10 w-10 text-base',\n      lg: 'h-12 w-12 text-lg',\n    },\n    focused: {\n      true: 'ring-2 ring-ring ring-offset-background',\n      false: '',\n    },\n    filled: {\n      true: 'border-primary',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    size: 'default',\n    focused: 'false',\n    filled: 'false',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createOtpInput,\n  otpInputContainerVariants,\n  otpInputSlotVariants,\n  type OtpInputType,\n} from '@refraction-ui/otp-input'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface OtpInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  length?: number\n  value?: string\n  onChange?: (value: string) => void\n  autoFocus?: boolean\n  type?: OtpInputType\n  disabled?: boolean\n  size?: 'sm' | 'default' | 'lg'\n}\n\n/**\n * OtpInput -- a row of individual input boxes for one-time password entry.\n *\n * Features: auto-advance on type, backspace navigation, paste support, numeric/text mode.\n */\nexport const OtpInput = React.forwardRef<HTMLDivElement, OtpInputProps>(\n  function OtpInput({\n    length = 6,\n    value = '',\n    onChange,\n    autoFocus = false,\n    type = 'number',\n    disabled = false,\n    size = 'default',\n    className,\n    ...props\n  }, ref) {\n    const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])\n    const [focusedIndex, setFocusedIndex] = React.useState(autoFocus ? 0 : -1)\n    const [values, setValues] = React.useState<string[]>(() =>\n      Array.from({ length }, (_, i) => value.charAt(i) || ''),\n    )\n\n    // Sync external value changes\n    React.useEffect(() => {\n      setValues(Array.from({ length }, (_, i) => value.charAt(i) || ''))\n    }, [value, length])\n\n    // Auto-focus first input\n    React.useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus()\n      }\n    }, [autoFocus])\n\n    const api = createOtpInput({ length, value, autoFocus, type, disabled })\n\n    const updateValue = (index: number, char: string) => {\n      const filtered = type === 'number' ? char.replace(/[^0-9]/g, '') : char\n      const newChar = filtered.charAt(0) || ''\n      const newValues = [...values]\n      newValues[index] = newChar\n      setValues(newValues)\n      onChange?.(newValues.join(''))\n      return newChar\n    }\n\n    const handleInput = (index: number, e: React.ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value\n      const char = inputValue.slice(-1)\n      const result = updateValue(index, char)\n\n      // Auto-advance to next input\n      if (result && index < length - 1) {\n        setFocusedIndex(index + 1)\n        inputRefs.current[index + 1]?.focus()\n      }\n    }\n\n    const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace') {\n        e.preventDefault()\n        if (values[index]) {\n          updateValue(index, '')\n        } else if (index > 0) {\n          updateValue(index - 1, '')\n          setFocusedIndex(index - 1)\n          inputRefs.current[index - 1]?.focus()\n        }\n      }\n\n      if (e.key === 'ArrowLeft' && index > 0) {\n        e.preventDefault()\n        setFocusedIndex(index - 1)\n        inputRefs.current[index - 1]?.focus()\n      }\n\n      if (e.key === 'ArrowRight' && index < length - 1) {\n        e.preventDefault()\n        setFocusedIndex(index + 1)\n        inputRefs.current[index + 1]?.focus()\n      }\n    }\n\n    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault()\n      const pasteData = e.clipboardData.getData('text')\n      const parsed = api.parsePaste(pasteData)\n      setValues(parsed)\n      onChange?.(parsed.join(''))\n\n      // Focus the last filled input or the next empty one\n      let lastFilledIndex = -1\n      for (let i = parsed.length - 1; i >= 0; i--) {\n        if (parsed[i] !== '') { lastFilledIndex = i; break }\n      }\n      const nextIndex = Math.min(lastFilledIndex + 1, length - 1)\n      setFocusedIndex(nextIndex)\n      inputRefs.current[nextIndex]?.focus()\n    }\n\n    const handleFocus = (index: number) => {\n      setFocusedIndex(index)\n    }\n\n    const handleBlur = () => {\n      setFocusedIndex(-1)\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(otpInputContainerVariants({ size }), className)}\n        {...api.rootAriaProps}\n        {...props}\n      >\n        {Array.from({ length }, (_, index) => {\n          const slotProps = api.getSlotProps(index)\n          const isFocused = index === focusedIndex\n          const isFilled = values[index] !== ''\n\n          return (\n            <input\n              key={index}\n              ref={(el) => { inputRefs.current[index] = el }}\n              className={cn(otpInputSlotVariants({\n                size,\n                focused: isFocused ? 'true' : 'false',\n                filled: isFilled ? 'true' : 'false',\n              }))}\n              value={values[index]}\n              onChange={(e) => handleInput(index, e)}\n              onKeyDown={(e) => handleKeyDown(index, e)}\n              onPaste={handlePaste}\n              onFocus={() => handleFocus(index)}\n              onBlur={handleBlur}\n              maxLength={1}\n              inputMode={type === 'number' ? 'numeric' : 'text'}\n              pattern={type === 'number' ? '[0-9]*' : undefined}\n              autoComplete={index === 0 ? 'one-time-code' : 'off'}\n              disabled={disabled}\n              aria-label={`Digit ${index + 1} of ${length}`}\n              data-slot=\"otp-slot\"\n              data-focused={isFocused ? '' : undefined}\n              data-filled={isFilled ? '' : undefined}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;AAyDO,SAAS,eAAe,QAAuB,CAAA,GAAiB;AACrE,QAAM;IACJ,SAAS;IACT,QAAQ;IACR,YAAY;IACZ,OAAO;IACP,WAAW;EAAA,IACT;AAEJ,QAAM,gBAAgB,CAAC;AAGvB,QAAM,SAAmB,MAAM,KAAK,EAAE,OAAA,GAAU,CAAC,GAAG,MAAM,MAAM,OAAO,CAAC,KAAK,EAAE;AAC/E,MAAI,eAAe,YAAY,IAAI;AAEnC,QAAM,gBAA6C;IACjD,MAAM;IACN,cAAc;EAAA;AAGhB,WAAS,SAAS,OAAe,MAAwB;AACvD,QAAI,QAAQ,KAAK,SAAS,OAAQ,QAAO,CAAC,GAAG,MAAM;AACnD,UAAM,WAAW,SAAS,WAAW,KAAK,QAAQ,WAAW,EAAE,IAAI;AACnE,UAAM,YAAY,CAAC,GAAG,MAAM;AAC5B,cAAU,KAAK,IAAI,SAAS,OAAO,CAAC,KAAK;AAEzC,aAAS,IAAI,GAAG,IAAI,QAAQ,KAAK;AAC/B,aAAO,CAAC,IAAI,UAAU,CAAC;IACzB;AACA,WAAO;EACT;AAEA,WAAS,WAAmB;AAC1B,WAAO,OAAO,KAAK,EAAE;EACvB;AAEA,WAAS,UAAU,WAAqC;AACtD,QAAI,cAAc,QAAQ;AACxB,qBAAe,KAAK,IAAI,GAAG,eAAe,CAAC;IAC7C,OAAO;AACL,qBAAe,KAAK,IAAI,SAAS,GAAG,eAAe,CAAC;IACtD;AACA,WAAO;EACT;AAEA,WAAS,aAAa,OAA6B;AACjD,UAAM,YAAY,UAAU;AAC5B,UAAM,WAAW,OAAO,KAAK,MAAM;AAEnC,UAAM,YAAyC;MAC7C,cAAc,SAAS,QAAQ,CAAC,OAAO,MAAM;IAAA;AAG/C,UAAM,iBAAyC;MAC7C,aAAa;IAAA;AAEf,QAAI,WAAW;AACb,qBAAe,cAAc,IAAI;IACnC;AACA,QAAI,UAAU;AACZ,qBAAe,aAAa,IAAI;IAClC;AAEA,UAAM,aAAa;MACjB,WAAW;MACX,WAAW,SAAS,WAAW,YAAY;MAC3C,SAAS,SAAS,WAAW,WAAW;MACxC,cAAc,UAAU,IAAI,kBAAkB;MAC9C;IAAA;AAGF,WAAO,EAAE,WAAW,gBAAgB,WAAA;EACtC;AAEA,WAAS,oBACP,OACA,WAIoB;AACpB,QAAI,CAAC,eAAe;AAClB,aAAO;QACL,CAAC,KAAK,SAAS,GAAG,CAAC,MAAM,EAAE,eAAA;QAC3B,CAAC,KAAK,SAAS,GAAG,CAAC,MAAM,EAAE,eAAA;QAC3B,CAAC,KAAK,UAAU,GAAG,CAAC,MAAM,EAAE,eAAA;MAAe;IAE/C;AAEA,WAAO;MACL,CAAC,KAAK,SAAS,GAAG,CAAC,MAAM;AACvB,UAAE,eAAA;AACF,YAAI,OAAO,KAAK,GAAG;AACjB,gBAAM,YAAY,SAAS,OAAO,EAAE;AACpC,qBAAW,aAAa,OAAO,SAAS;QAC1C,WAAW,QAAQ,GAAG;AACpB,yBAAe,QAAQ;AACvB,gBAAM,YAAY,SAAS,QAAQ,GAAG,EAAE;AACxC,qBAAW,aAAa,QAAQ,GAAG,SAAS;AAC5C,qBAAW,cAAc,YAAY;QACvC;MACF;MACA,CAAC,KAAK,SAAS,GAAG,CAAC,MAAM;AACvB,UAAE,eAAA;AACF,YAAI,QAAQ,GAAG;AACb,yBAAe,QAAQ;AACvB,qBAAW,cAAc,YAAY;QACvC;MACF;MACA,CAAC,KAAK,UAAU,GAAG,CAAC,MAAM;AACxB,UAAE,eAAA;AACF,YAAI,QAAQ,SAAS,GAAG;AACtB,yBAAe,QAAQ;AACvB,qBAAW,cAAc,YAAY;QACvC;MACF;IAAA;EAEJ;AAEA,WAAS,WAAW,MAAwB;AAC1C,UAAM,QAAQ,SAAS,WAAW,KAAK,QAAQ,WAAW,EAAE,IAAI;AAChE,WAAO,MAAM,KAAK,EAAE,OAAA,GAAU,CAAC,GAAG,MAAM,MAAM,OAAO,CAAC,KAAK,EAAE;EAC/D;AAEA,SAAO;IACL,OAAO;MACL;MACA;MACA;MACA;IAAA;IAEF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;EAAA;AAEJ;AClMO,IAAM,iBAAgC;EAC3C,MAAM;EACN,QAAQ;IACN,IAAI,EAAE,UAAU,gBAAgB,UAAU,yBAAA;IAC1C,IAAI,EAAE,UAAU,gBAAgB,UAAU,yBAAA;IAC1C,QAAQ,EAAE,UAAU,oBAAoB,UAAU,qBAAA;IAClD,iBAAiB,EAAE,UAAU,2BAA2B,UAAU,sBAAA;IAClE,MAAM,EAAE,UAAU,kBAAkB,UAAU,mBAAA;EAAmB;AAErE;AAEO,IAAM,4BAA4B,IAAI;EAC3C,MAAM;EACN,UAAU;IACR,MAAM;MACJ,IAAI;MACJ,SAAS;MACT,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAEM,IAAM,uBAAuB,IAAI;EACtC,MAAM;EACN,UAAU;IACR,MAAM;MACJ,IAAI;MACJ,SAAS;MACT,IAAI;IAAA;IAEN,SAAS;MACP,MAAM;MACN,OAAO;IAAA;IAET,QAAQ;MACN,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,MAAM;IACN,SAAS;IACT,QAAQ;EAAA;AAEZ,CAAC;;;;AC1BM,IAAM,WAAiB;EAC5B,SAASA,UAAS;IAChB,SAAS;IACT,QAAQ;IACR;IACA,YAAY;IACZ,OAAO;IACP,WAAW;IACX,OAAO;IACP;IACA,GAAG;EAAA,GACF,KAAK;AACN,UAAM,YAAkB,aAAoC,CAAA,CAAE;AAC9D,UAAM,CAAC,cAAc,eAAe,IAAU,eAAS,YAAY,IAAI,EAAE;AACzE,UAAM,CAAC,QAAQ,SAAS,IAAU;MAAmB,MACnD,MAAM,KAAK,EAAE,OAAA,GAAU,CAAC,GAAG,MAAM,MAAM,OAAO,CAAC,KAAK,EAAE;IAAA;AAIlD,IAAA,gBAAU,MAAM;AACpB,gBAAU,MAAM,KAAK,EAAE,OAAA,GAAU,CAAC,GAAG,MAAM,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;IACnE,GAAG,CAAC,OAAO,MAAM,CAAC;AAGZ,IAAA,gBAAU,MAAM;AACpB,UAAI,aAAa,UAAU,QAAQ,CAAC,GAAG;AACrC,kBAAU,QAAQ,CAAC,EAAE,MAAA;MACvB;IACF,GAAG,CAAC,SAAS,CAAC;AAEd,UAAM,MAAM,eAAe,EAAE,QAAQ,OAAO,WAAW,MAAM,SAAA,CAAU;AAEvE,UAAM,cAAc,CAAC,OAAe,SAAiB;AACnD,YAAM,WAAW,SAAS,WAAW,KAAK,QAAQ,WAAW,EAAE,IAAI;AACnE,YAAM,UAAU,SAAS,OAAO,CAAC,KAAK;AACtC,YAAM,YAAY,CAAC,GAAG,MAAM;AAC5B,gBAAU,KAAK,IAAI;AACnB,gBAAU,SAAS;AACnB,iBAAW,UAAU,KAAK,EAAE,CAAC;AAC7B,aAAO;IACT;AAEA,UAAM,cAAc,CAAC,OAAe,MAA2C;AAC7E,YAAM,aAAa,EAAE,OAAO;AAC5B,YAAM,OAAO,WAAW,MAAM,EAAE;AAChC,YAAM,SAAS,YAAY,OAAO,IAAI;AAGtC,UAAI,UAAU,QAAQ,SAAS,GAAG;AAChC,wBAAgB,QAAQ,CAAC;AACzB,kBAAU,QAAQ,QAAQ,CAAC,GAAG,MAAA;MAChC;IACF;AAEA,UAAM,gBAAgB,CAAC,OAAe,MAA6C;AACjF,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAA;AACF,YAAI,OAAO,KAAK,GAAG;AACjB,sBAAY,OAAO,EAAE;QACvB,WAAW,QAAQ,GAAG;AACpB,sBAAY,QAAQ,GAAG,EAAE;AACzB,0BAAgB,QAAQ,CAAC;AACzB,oBAAU,QAAQ,QAAQ,CAAC,GAAG,MAAA;QAChC;MACF;AAEA,UAAI,EAAE,QAAQ,eAAe,QAAQ,GAAG;AACtC,UAAE,eAAA;AACF,wBAAgB,QAAQ,CAAC;AACzB,kBAAU,QAAQ,QAAQ,CAAC,GAAG,MAAA;MAChC;AAEA,UAAI,EAAE,QAAQ,gBAAgB,QAAQ,SAAS,GAAG;AAChD,UAAE,eAAA;AACF,wBAAgB,QAAQ,CAAC;AACzB,kBAAU,QAAQ,QAAQ,CAAC,GAAG,MAAA;MAChC;IACF;AAEA,UAAM,cAAc,CAAC,MAA8C;AACjE,QAAE,eAAA;AACF,YAAM,YAAY,EAAE,cAAc,QAAQ,MAAM;AAChD,YAAM,SAAS,IAAI,WAAW,SAAS;AACvC,gBAAU,MAAM;AAChB,iBAAW,OAAO,KAAK,EAAE,CAAC;AAG1B,UAAI,kBAAkB;AACtB,eAAS,IAAI,OAAO,SAAS,GAAG,KAAK,GAAG,KAAK;AAC3C,YAAI,OAAO,CAAC,MAAM,IAAI;AAAE,4BAAkB;AAAG;QAAM;MACrD;AACA,YAAM,YAAY,KAAK,IAAI,kBAAkB,GAAG,SAAS,CAAC;AAC1D,sBAAgB,SAAS;AACzB,gBAAU,QAAQ,SAAS,GAAG,MAAA;IAChC;AAEA,UAAM,cAAc,CAAC,UAAkB;AACrC,sBAAgB,KAAK;IACvB;AAEA,UAAM,aAAa,MAAM;AACvB,sBAAgB,EAAE;IACpB;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,0BAA0B,EAAE,KAAA,CAAM,GAAG,SAAS;QAC3D,GAAG,IAAI;QACP,GAAG;QAEH,UAAA,MAAM,KAAK,EAAE,OAAA,GAAU,CAAC,GAAG,UAAU;AAClB,cAAI,aAAa,KAAK;AACxC,gBAAM,YAAY,UAAU;AAC5B,gBAAM,WAAW,OAAO,KAAK,MAAM;AAEnC,iBACE;YAAC;YAAA;cAEC,KAAK,CAAC,OAAO;AAAE,0BAAU,QAAQ,KAAK,IAAI;cAAG;cAC7C,WAAW,GAAG,qBAAqB;gBACjC;gBACA,SAAS,YAAY,SAAS;gBAC9B,QAAQ,WAAW,SAAS;cAAA,CAC7B,CAAC;cACF,OAAO,OAAO,KAAK;cACnB,UAAU,CAAC,MAAM,YAAY,OAAO,CAAC;cACrC,WAAW,CAAC,MAAM,cAAc,OAAO,CAAC;cACxC,SAAS;cACT,SAAS,MAAM,YAAY,KAAK;cAChC,QAAQ;cACR,WAAW;cACX,WAAW,SAAS,WAAW,YAAY;cAC3C,SAAS,SAAS,WAAW,WAAW;cACxC,cAAc,UAAU,IAAI,kBAAkB;cAC9C;cACA,cAAY,SAAS,QAAQ,CAAC,OAAO,MAAM;cAC3C,aAAU;cACV,gBAAc,YAAY,KAAK;cAC/B,eAAa,WAAW,KAAK;YAAA;YArBxB;UAAA;QAwBX,CAAC;MAAA;IAAA;EAGP;AACF;",
+  "names": ["OtpInput"]
+}

package/dist/react-pagination.js

@@ -0,0 +1,199 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-pagination/dist/index.js
+import * as React from "react";
+
+// ../pagination/dist/index.js
+function clampPage(page, totalPages) {
+  const total = Math.max(1, Math.floor(totalPages));
+  if (Number.isNaN(page)) return 1;
+  return Math.min(Math.max(1, Math.floor(page)), total);
+}
+function pageItem(page) {
+  return { type: "page", page };
+}
+function pageRange(start, end) {
+  const items = [];
+  for (let p = start; p <= end; p++) items.push(pageItem(p));
+  return items;
+}
+function getPaginationItems(current, totalPages, siblingCount = 1) {
+  const total = Math.max(0, Math.floor(totalPages));
+  if (total === 0) return [];
+  const maxVisibleWithoutEllipsis = siblingCount * 2 + 5;
+  if (total <= maxVisibleWithoutEllipsis) return pageRange(1, total);
+  const currentPage = clampPage(current, total);
+  const leftSibling = Math.max(currentPage - siblingCount, 1);
+  const rightSibling = Math.min(currentPage + siblingCount, total);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < total - 1;
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftCount = 3 + 2 * siblingCount;
+    return [...pageRange(1, leftCount), { type: "ellipsis", id: "end" }, pageItem(total)];
+  }
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const rightCount = 3 + 2 * siblingCount;
+    return [
+      pageItem(1),
+      { type: "ellipsis", id: "start" },
+      ...pageRange(total - rightCount + 1, total)
+    ];
+  }
+  return [
+    pageItem(1),
+    { type: "ellipsis", id: "start" },
+    ...pageRange(leftSibling, rightSibling),
+    { type: "ellipsis", id: "end" },
+    pageItem(total)
+  ];
+}
+function createPagination(config = {}) {
+  const totalPages = Math.max(1, Math.floor(config.totalPages ?? 1));
+  const page = clampPage(config.page ?? 1, totalPages);
+  const siblingCount = Math.max(0, Math.floor(config.siblingCount ?? 1));
+  const canGoPrevious = page > 1;
+  const canGoNext = page < totalPages;
+  return {
+    ariaProps: {
+      role: "navigation",
+      "aria-label": config.ariaLabel ?? "Pagination"
+    },
+    dataAttributes: {
+      "data-page": String(page),
+      "data-total-pages": String(totalPages)
+    },
+    page,
+    totalPages,
+    items: getPaginationItems(page, totalPages, siblingCount),
+    canGoPrevious,
+    canGoNext,
+    previousPage: canGoPrevious ? page - 1 : page,
+    nextPage: canGoNext ? page + 1 : page,
+    getPageAria(p) {
+      return p === page ? { "aria-current": "page" } : {};
+    },
+    getPreviousAria() {
+      return { "aria-label": "Previous page" };
+    },
+    getNextAria() {
+      return { "aria-label": "Next page" };
+    }
+  };
+}
+var paginationVariants = cva({
+  base: "flex items-center gap-1"
+});
+var paginationItemVariants = cva({
+  base: [
+    "inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-3",
+    "text-sm font-medium transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ].join(" "),
+  variants: {
+    state: {
+      current: "border-primary bg-primary text-primary-foreground",
+      default: "border-border bg-background text-foreground hover:bg-muted"
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
+});
+var paginationEllipsisClass = "inline-flex h-9 min-w-9 items-center justify-center text-sm text-muted-foreground";
+
+// ../react-pagination/dist/index.js
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var Pagination = React.forwardRef(
+  function Pagination2({
+    className,
+    page: controlledPage,
+    defaultPage,
+    totalPages = 1,
+    siblingCount = 1,
+    onPageChange,
+    disabled = false,
+    children,
+    ...props
+  }, ref) {
+    const isControlled = controlledPage !== void 0;
+    const [internalPage, setInternalPage] = React.useState(defaultPage ?? 1);
+    const api = createPagination({
+      page: isControlled ? controlledPage : internalPage,
+      totalPages,
+      siblingCount
+    });
+    const goTo = (target) => {
+      if (disabled || target === api.page) return;
+      if (!isControlled) setInternalPage(target);
+      onPageChange?.(target);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(paginationVariants(), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ...api.getPreviousAria(),
+              disabled: disabled || !api.canGoPrevious,
+              className: paginationItemVariants(),
+              onClick: () => goTo(api.previousPage),
+              children: "Previous"
+            }
+          ),
+          api.items.map(
+            (item) => item.type === "ellipsis" ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: paginationEllipsisClass,
+                children: "\u2026"
+              },
+              `ellipsis-${item.id}`
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                ...api.getPageAria(item.page),
+                disabled,
+                "data-state": item.page === api.page ? "current" : "default",
+                className: paginationItemVariants({
+                  state: item.page === api.page ? "current" : "default"
+                }),
+                onClick: () => goTo(item.page),
+                children: item.page
+              },
+              item.page
+            )
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ...api.getNextAria(),
+              disabled: disabled || !api.canGoNext,
+              className: paginationItemVariants(),
+              onClick: () => goTo(api.nextPage),
+              children: "Next"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+export {
+  Pagination
+};
+//# sourceMappingURL=react-pagination.js.map

package/dist/react-pagination.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../pagination/src/pagination.ts", "../../pagination/src/pagination.styles.ts", "../../react-pagination/src/pagination.tsx"],
+  "sourcesContent": ["/**\n * @refraction-ui/pagination — headless pagination.\n *\n * Owns the *behavior* of page navigation: the windowed page range with\n * ellipses, current-page clamping, and prev/next edge semantics. It has NO UI\n * opinion — adapters render the controls and spread the ARIA objects.\n */\n\n/** One entry of the computed page range: a page number or an ellipsis gap. */\nexport type PaginationItem =\n  | { type: 'page'; page: number }\n  | { type: 'ellipsis'; id: 'start' | 'end' }\n\n/** Options for {@link createPagination}. */\nexport interface PaginationConfig {\n  /** Current page (1-based). Clamped into `[1, totalPages]`. */\n  page?: number\n  /** Total number of pages. Values < 1 behave as 1. */\n  totalPages?: number\n  /** Pages shown on each side of the current page (default 1). */\n  siblingCount?: number\n  /** Accessible label for the nav landmark (default `'Pagination'`). */\n  ariaLabel?: string\n}\n\n/** The computed view of a pagination control. */\nexport interface PaginationAPI {\n  /** ARIA attributes for the root element (`role=\"navigation\"`). */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n  /** Current page after clamping (1-based). */\n  page: number\n  /** Total number of pages (>= 1). */\n  totalPages: number\n  /** Windowed range of pages and ellipses to render. */\n  items: PaginationItem[]\n  /** Whether \"previous\" navigation is possible. */\n  canGoPrevious: boolean\n  /** Whether \"next\" navigation is possible. */\n  canGoNext: boolean\n  /** Target page for the previous control (clamped). */\n  previousPage: number\n  /** Target page for the next control (clamped). */\n  nextPage: number\n  /** ARIA attributes for a numbered page button (`aria-current` on the current page). */\n  getPageAria(page: number): Record<string, string | number | boolean>\n  /** ARIA attributes for the previous control. */\n  getPreviousAria(): Record<string, string | number | boolean>\n  /** ARIA attributes for the next control. */\n  getNextAria(): Record<string, string | number | boolean>\n}\n\n/** Clamp a 1-based page number into `[1, max(totalPages, 1)]`. */\nexport function clampPage(page: number, totalPages: number): number {\n  const total = Math.max(1, Math.floor(totalPages))\n  if (Number.isNaN(page)) return 1\n  return Math.min(Math.max(1, Math.floor(page)), total)\n}\n\nfunction pageItem(page: number): PaginationItem {\n  return { type: 'page', page }\n}\n\nfunction pageRange(start: number, end: number): PaginationItem[] {\n  const items: PaginationItem[] = []\n  for (let p = start; p <= end; p++) items.push(pageItem(p))\n  return items\n}\n\n/**\n * Compute the windowed page range with ellipses.\n *\n * Always shows the first and last page plus `siblingCount` pages on each side\n * of the current page; gaps of more than one page collapse into an ellipsis.\n * Small totals render every page (no ellipses).\n */\nexport function getPaginationItems(\n  current: number,\n  totalPages: number,\n  siblingCount = 1,\n): PaginationItem[] {\n  const total = Math.max(0, Math.floor(totalPages))\n  if (total === 0) return []\n\n  // first + last + current + 2 siblings + 2 ellipses\n  const maxVisibleWithoutEllipsis = siblingCount * 2 + 5\n  if (total <= maxVisibleWithoutEllipsis) return pageRange(1, total)\n\n  const currentPage = clampPage(current, total)\n  const leftSibling = Math.max(currentPage - siblingCount, 1)\n  const rightSibling = Math.min(currentPage + siblingCount, total)\n\n  const showLeftEllipsis = leftSibling > 2\n  const showRightEllipsis = rightSibling < total - 1\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftCount = 3 + 2 * siblingCount\n    return [...pageRange(1, leftCount), { type: 'ellipsis', id: 'end' }, pageItem(total)]\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightCount = 3 + 2 * siblingCount\n    return [\n      pageItem(1),\n      { type: 'ellipsis', id: 'start' },\n      ...pageRange(total - rightCount + 1, total),\n    ]\n  }\n\n  return [\n    pageItem(1),\n    { type: 'ellipsis', id: 'start' },\n    ...pageRange(leftSibling, rightSibling),\n    { type: 'ellipsis', id: 'end' },\n    pageItem(total),\n  ]\n}\n\n/**\n * createPagination — the framework-agnostic view of a pagination control:\n * ARIA objects for the nav landmark and controls, plus the clamped\n * current/total and prev/next edge semantics. Adapters own the page state\n * (controlled/uncontrolled) and call this per render.\n */\nexport function createPagination(config: PaginationConfig = {}): PaginationAPI {\n  const totalPages = Math.max(1, Math.floor(config.totalPages ?? 1))\n  const page = clampPage(config.page ?? 1, totalPages)\n  const siblingCount = Math.max(0, Math.floor(config.siblingCount ?? 1))\n\n  const canGoPrevious = page > 1\n  const canGoNext = page < totalPages\n\n  return {\n    ariaProps: {\n      role: 'navigation',\n      'aria-label': config.ariaLabel ?? 'Pagination',\n    },\n    dataAttributes: {\n      'data-page': String(page),\n      'data-total-pages': String(totalPages),\n    },\n    page,\n    totalPages,\n    items: getPaginationItems(page, totalPages, siblingCount),\n    canGoPrevious,\n    canGoNext,\n    previousPage: canGoPrevious ? page - 1 : page,\n    nextPage: canGoNext ? page + 1 : page,\n    getPageAria(p): Record<string, string | number | boolean> {\n      return p === page ? { 'aria-current': 'page' } : {}\n    },\n    getPreviousAria(): Record<string, string | number | boolean> {\n      return { 'aria-label': 'Previous page' }\n    },\n    getNextAria(): Record<string, string | number | boolean> {\n      return { 'aria-label': 'Next page' }\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Row of pagination controls. */\nexport const paginationVariants = cva({\n  base: 'flex items-center gap-1',\n})\n\n/**\n * A pagination button (prev / next / numbered page). The `state` variant\n * carries the current-page treatment so adapters never inline these classes.\n */\nexport const paginationItemVariants = cva({\n  base: [\n    'inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-3',\n    'text-sm font-medium transition-colors',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n    'focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  variants: {\n    state: {\n      current: 'border-primary bg-primary text-primary-foreground',\n      default: 'border-border bg-background text-foreground hover:bg-muted',\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n})\n\n/** Ellipsis gap between page numbers (not interactive). */\nexport const paginationEllipsisClass =\n  'inline-flex h-9 min-w-9 items-center justify-center text-sm text-muted-foreground'\n", "import * as React from 'react'\nimport { cn } from '@refraction-ui/shared'\nimport {\n  createPagination,\n  paginationVariants,\n  paginationItemVariants,\n  paginationEllipsisClass,\n} from '@refraction-ui/pagination'\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current page, 1-based (controlled). Pair with `onPageChange`. */\n  page?: number\n  /** Initial page for uncontrolled usage (default 1). */\n  defaultPage?: number\n  /** Total number of pages (default 1). */\n  totalPages?: number\n  /** Pages shown on each side of the current page (default 1). */\n  siblingCount?: number\n  /** Called with the target page when a control is activated. */\n  onPageChange?: (page: number) => void\n  /** Disables every control. */\n  disabled?: boolean\n}\n\n/**\n * Pagination — page navigation with a windowed page range and ellipses.\n *\n * Renders `role=\"navigation\"` with previous/next controls and numbered page\n * buttons (`aria-current=\"page\"` on the current page). Range computation,\n * clamping, edge semantics, and ARIA come from the headless\n * `@refraction-ui/pagination` core. Pass `children` to render fully custom\n * controls instead of the generated ones.\n */\nexport const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(\n  function Pagination(\n    {\n      className,\n      page: controlledPage,\n      defaultPage,\n      totalPages = 1,\n      siblingCount = 1,\n      onPageChange,\n      disabled = false,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = controlledPage !== undefined\n    const [internalPage, setInternalPage] = React.useState(defaultPage ?? 1)\n\n    const api = createPagination({\n      page: isControlled ? controlledPage : internalPage,\n      totalPages,\n      siblingCount,\n    })\n\n    const goTo = (target: number) => {\n      if (disabled || target === api.page) return\n      if (!isControlled) setInternalPage(target)\n      onPageChange?.(target)\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(paginationVariants(), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <button\n              type=\"button\"\n              {...api.getPreviousAria()}\n              disabled={disabled || !api.canGoPrevious}\n              className={paginationItemVariants()}\n              onClick={() => goTo(api.previousPage)}\n            >\n              Previous\n            </button>\n            {api.items.map((item) =>\n              item.type === 'ellipsis' ? (\n                <span\n                  key={`ellipsis-${item.id}`}\n                  aria-hidden=\"true\"\n                  className={paginationEllipsisClass}\n                >\n                  …\n                </span>\n              ) : (\n                <button\n                  key={item.page}\n                  type=\"button\"\n                  {...api.getPageAria(item.page)}\n                  disabled={disabled}\n                  data-state={item.page === api.page ? 'current' : 'default'}\n                  className={paginationItemVariants({\n                    state: item.page === api.page ? 'current' : 'default',\n                  })}\n                  onClick={() => goTo(item.page)}\n                >\n                  {item.page}\n                </button>\n              ),\n            )}\n            <button\n              type=\"button\"\n              {...api.getNextAria()}\n              disabled={disabled || !api.canGoNext}\n              className={paginationItemVariants()}\n              onClick={() => goTo(api.nextPage)}\n            >\n              Next\n            </button>\n          </>\n        )}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["Pagination"]
+}