@zentauri-ui/zentauri-components 1.7.3 → 1.7.5

package/dist/ui/otp-input.mjs

@@ -0,0 +1,299 @@
+"use client";
+import { cn } from '../chunk-4D54YOL6.mjs';
+import { useId, useState, useRef, useMemo, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/design-system/otp-input.ts
+var zuiOtpRootBase = "grid w-fit gap-2 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+var zuiOtpLabelBase = "text-sm font-medium leading-6 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))]";
+var zuiOtpHintBase = "max-w-sm text-xs leading-5 text-[color:var(--zui-otp-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-otp-hint-fg-dark,oklch(70.4%_0.04_256.788))]";
+var zuiOtpCellsBase = "flex flex-wrap items-center gap-2";
+var zuiOtpCellBase = "grid place-items-center rounded-xl border bg-[var(--zui-otp-bg,#ffffff)] text-center font-semibold tabular-nums text-[color:var(--zui-otp-fg,oklch(20.8%_0.042_265.755))] shadow-sm shadow-black/5 outline-none transition-[background-color,border-color,box-shadow,color,transform] placeholder:text-transparent focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:bg-[var(--zui-otp-bg-dark,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-otp-fg-dark,oklch(98.4%_0.003_247.858))] dark:shadow-black/20 dark:focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
+var zuiOtpSeparatorBase = "h-px w-3 shrink-0 bg-[color:var(--zui-otp-separator,#94a3b8)] opacity-70 dark:bg-[color:var(--zui-otp-separator-dark,#64748b)]";
+var zuiOtpErrorBase = "text-sm leading-6 text-[color:var(--zui-otp-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-otp-error-fg-dark,oklch(71.2%_0.194_13.428))]";
+var zuiOtpSizes = {
+  sm: "size-7 md:size-9 rounded-lg text-sm",
+  md: "size-9 md:size-11 text-base",
+  lg: "size-11 md:size-13 rounded-2xl text-lg"
+};
+var zuiOtpAppearances = {
+  default: "border-[color:var(--zui-otp-default-border,#cbd5e1)] focus-visible:border-[color:var(--zui-otp-default-border-focus,oklch(44.6%_0.043_257.281))] focus-visible:ring-[var(--zui-otp-default-ring-focus,oklch(44.6%_0.043_257.281_/_0.25))] dark:border-[color:var(--zui-otp-default-border-dark,#475569)] dark:focus-visible:border-[color:var(--zui-otp-default-border-focus-dark,oklch(86.9%_0.022_252.894))] dark:focus-visible:ring-[var(--zui-otp-default-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.25))]",
+  outline: "border-[color:var(--zui-otp-outline-border,#64748b)] bg-transparent focus-visible:border-[color:var(--zui-otp-outline-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-outline-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-outline-border-dark,#94a3b8)] dark:bg-transparent dark:focus-visible:border-[color:var(--zui-otp-outline-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-outline-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
+  glass: "border-[color:var(--zui-otp-glass-border,#ffffff66)] bg-[var(--zui-otp-glass-bg,#ffffffcc)] backdrop-blur-md focus-visible:border-[color:var(--zui-otp-glass-border-focus,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-otp-glass-ring-focus,oklch(70.7%_0.165_254.624_/_0.32))] dark:border-[color:var(--zui-otp-glass-border-dark,#ffffff26)] dark:bg-[var(--zui-otp-glass-bg-dark,#0f172acc)] dark:focus-visible:border-[color:var(--zui-otp-glass-border-focus-dark,oklch(78.9%_0.154_211.53))] dark:focus-visible:ring-[var(--zui-otp-glass-ring-focus-dark,oklch(78.9%_0.154_211.53_/_0.32))]",
+  success: "border-[color:var(--zui-otp-success-border,oklch(69.6%_0.17_162.48_/_0.6))] focus-visible:border-[color:var(--zui-otp-success-border-focus,oklch(59.6%_0.145_163.225))] focus-visible:ring-[var(--zui-otp-success-ring-focus,oklch(59.6%_0.145_163.225_/_0.28))] dark:border-[color:var(--zui-otp-success-border-dark,oklch(69.6%_0.17_162.48_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-success-border-focus-dark,oklch(77.7%_0.152_181.912))] dark:focus-visible:ring-[var(--zui-otp-success-ring-focus-dark,oklch(77.7%_0.152_181.912_/_0.28))]",
+  error: "border-[color:var(--zui-otp-error-border,oklch(58.6%_0.253_17.585_/_0.7))] focus-visible:border-[color:var(--zui-otp-error-border-focus,oklch(58.6%_0.253_17.585))] focus-visible:ring-[var(--zui-otp-error-ring-focus,oklch(58.6%_0.253_17.585_/_0.28))] dark:border-[color:var(--zui-otp-error-border-dark,oklch(71.2%_0.194_13.428_/_0.65))] dark:focus-visible:border-[color:var(--zui-otp-error-border-focus-dark,oklch(71.2%_0.194_13.428))] dark:focus-visible:ring-[var(--zui-otp-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.28))]",
+  warning: "border-[color:var(--zui-otp-warning-border,oklch(79.5%_0.184_86.047_/_0.7))] focus-visible:border-[color:var(--zui-otp-warning-border-focus,oklch(68.1%_0.162_75.834))] focus-visible:ring-[var(--zui-otp-warning-ring-focus,oklch(68.1%_0.162_75.834_/_0.28))] dark:border-[color:var(--zui-otp-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] dark:focus-visible:ring-[var(--zui-otp-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.28))]",
+  info: "border-[color:var(--zui-otp-info-border,oklch(62.3%_0.214_259.815_/_0.7))] focus-visible:border-[color:var(--zui-otp-info-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-info-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-info-border-dark,oklch(62.3%_0.214_259.815_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-info-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]",
+  violet: "border-[color:var(--zui-otp-violet-border,oklch(60.6%_0.25_292.717_/_0.7))] focus-visible:border-[color:var(--zui-otp-violet-border-focus,oklch(54.1%_0.281_293.009))] focus-visible:ring-[var(--zui-otp-violet-ring-focus,oklch(54.1%_0.281_293.009_/_0.28))] dark:border-[color:var(--zui-otp-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] dark:focus-visible:ring-[var(--zui-otp-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.28))]",
+  amber: "border-[color:var(--zui-otp-amber-border,oklch(76.9%_0.188_70.08_/_0.7))] focus-visible:border-[color:var(--zui-otp-amber-border-focus,oklch(66.6%_0.179_58.318))] focus-visible:ring-[var(--zui-otp-amber-ring-focus,oklch(66.6%_0.179_58.318_/_0.28))] dark:border-[color:var(--zui-otp-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] dark:focus-visible:ring-[var(--zui-otp-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.28))]",
+  pink: "border-[color:var(--zui-otp-pink-border,oklch(65.6%_0.241_354.308_/_0.7))] focus-visible:border-[color:var(--zui-otp-pink-border-focus,oklch(59.2%_0.249_0.584))] focus-visible:ring-[var(--zui-otp-pink-ring-focus,oklch(59.2%_0.249_0.584_/_0.28))] dark:border-[color:var(--zui-otp-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] dark:focus-visible:ring-[var(--zui-otp-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.28))]",
+  indigo: "border-[color:var(--zui-otp-indigo-border,oklch(58.5%_0.233_277.117_/_0.7))] focus-visible:border-[color:var(--zui-otp-indigo-border-focus,oklch(51.1%_0.262_276.966))] focus-visible:ring-[var(--zui-otp-indigo-ring-focus,oklch(51.1%_0.262_276.966_/_0.28))] dark:border-[color:var(--zui-otp-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] dark:focus-visible:ring-[var(--zui-otp-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.28))]",
+  orange: "border-[color:var(--zui-otp-orange-border,oklch(70.5%_0.213_47.604_/_0.7))] focus-visible:border-[color:var(--zui-otp-orange-border-focus,oklch(64.6%_0.222_41.116))] focus-visible:ring-[var(--zui-otp-orange-ring-focus,oklch(64.6%_0.222_41.116_/_0.28))] dark:border-[color:var(--zui-otp-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-orange-border-focus-dark,oklch(75%_0.183_55.934))] dark:focus-visible:ring-[var(--zui-otp-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.28))]"
+};
+var otpInputCellVariants = cva(zuiOtpCellBase, {
+  variants: {
+    appearance: zuiOtpAppearances,
+    size: zuiOtpSizes
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md"
+  }
+});
+function clampLength(length) {
+  return Number.isFinite(length) ? Math.max(1, Math.min(12, length)) : 6;
+}
+function sanitizeValue(value, allowedCharacters, maxLength) {
+  const pattern = allowedCharacters === "numeric" ? /[0-9]/g : /[a-zA-Z0-9]/g;
+  return (value.match(pattern) ?? []).join("").slice(0, maxLength);
+}
+function valueToCells(value, length) {
+  return Array.from({ length }, (_, index) => {
+    const c = value[index] ?? "\0";
+    return c === "\0" ? "" : c;
+  });
+}
+function cellsToInternal(cells, length) {
+  return Array.from({ length }, (_, i) => cells[i] || "\0").join("");
+}
+function OTPInput(props) {
+  const {
+    allowedCharacters = "numeric",
+    appearance,
+    autoFocus,
+    cellClassName,
+    className,
+    defaultValue = "",
+    disabled,
+    errorMessage,
+    hint,
+    id,
+    label,
+    length = 6,
+    mask,
+    name,
+    onComplete,
+    onValueChange,
+    ref,
+    separatorEvery,
+    size,
+    value,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const rootId = id ?? generatedId;
+  const resolvedLength = clampLength(length);
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState(() => {
+    const clean = sanitizeValue(
+      defaultValue,
+      allowedCharacters,
+      resolvedLength
+    );
+    return clean.padEnd(resolvedLength, "\0");
+  });
+  const inputRefs = useRef([]);
+  const cells = useMemo(
+    () => isControlled ? valueToCells(
+      sanitizeValue(
+        value ?? "",
+        allowedCharacters,
+        resolvedLength
+      ).padEnd(resolvedLength, "\0"),
+      resolvedLength
+    ) : Array.from({ length: resolvedLength }, (_, index) => {
+      const c = uncontrolledValue[index] ?? "\0";
+      return c === "\0" ? "" : sanitizeValue(c, allowedCharacters, 1);
+    }),
+    [allowedCharacters, isControlled, resolvedLength, uncontrolledValue, value]
+  );
+  const sanitizedValue = cells.filter(Boolean).join("");
+  const labelId = `${rootId}-label`;
+  const hintId = `${rootId}-hint`;
+  const errorId = `${rootId}-error`;
+  const describedBy = [
+    hint !== void 0 ? hintId : void 0,
+    errorMessage !== void 0 ? errorId : void 0
+  ].filter(Boolean).join(" ");
+  const commitValue = useCallback(
+    (nextCells) => {
+      if (!isControlled) {
+        setUncontrolledValue(cellsToInternal(nextCells, resolvedLength));
+      }
+      const next = nextCells.filter(Boolean).join("").slice(0, resolvedLength);
+      onValueChange?.(next);
+      if (next.length === resolvedLength) {
+        onComplete?.(next);
+      }
+    },
+    [isControlled, onComplete, onValueChange, resolvedLength]
+  );
+  const focusCell = useCallback(
+    (index) => {
+      const target = inputRefs.current[Math.max(0, Math.min(index, resolvedLength - 1))];
+      target?.focus();
+      target?.select();
+    },
+    [resolvedLength]
+  );
+  const updateAtIndex = useCallback(
+    (index, nextChars, isPaste = false) => {
+      let chars = sanitizeValue(
+        nextChars,
+        allowedCharacters,
+        resolvedLength
+      );
+      if (!isPaste && chars && chars.length === 2 && chars[0] === (cells[index] ?? "")) {
+        chars = chars[1];
+      }
+      if (!chars?.length || !isPaste && chars === cells[index]) {
+        return;
+      }
+      const nextCells = [...cells];
+      chars.split("").forEach((char, offset) => {
+        const targetIndex = index + offset;
+        if (targetIndex < resolvedLength) {
+          nextCells[targetIndex] = char;
+        }
+      });
+      commitValue(nextCells);
+      focusCell(
+        Math.min(index + Math.max(chars.length, 1), resolvedLength - 1)
+      );
+    },
+    [allowedCharacters, cells, commitValue, focusCell, resolvedLength]
+  );
+  const clearAtIndex = useCallback(
+    (index) => {
+      const nextCells = [...cells];
+      nextCells[index] = "";
+      commitValue(nextCells);
+    },
+    [cells, commitValue]
+  );
+  const handlePaste = useCallback(
+    (event, index) => {
+      event.preventDefault();
+      updateAtIndex(index, event.clipboardData.getData("text"), true);
+    },
+    [updateAtIndex]
+  );
+  const handleKeyDown = useCallback(
+    (event, index) => {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        if (cells[index]) {
+          clearAtIndex(index);
+          return;
+        }
+        clearAtIndex(Math.max(index - 1, 0));
+        focusCell(index - 1);
+        return;
+      }
+      if (event.key === "Delete") {
+        event.preventDefault();
+        clearAtIndex(index);
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        focusCell(index - 1);
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        focusCell(index + 1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusCell(0);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusCell(resolvedLength - 1);
+      }
+    },
+    [cells, clearAtIndex, focusCell, resolvedLength]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      id: rootId,
+      role: "group",
+      "aria-labelledby": label !== void 0 ? labelId : void 0,
+      "aria-describedby": describedBy || void 0,
+      "aria-invalid": errorMessage !== void 0 ? true : void 0,
+      className: cn(zuiOtpRootBase, className),
+      "data-disabled": disabled ? "true" : void 0,
+      "data-slot": "otp-input",
+      ...rest,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx("p", { id: labelId, className: zuiOtpLabelBase, children: label }),
+        hint !== void 0 && /* @__PURE__ */ jsx("p", { id: hintId, className: zuiOtpHintBase, children: hint }),
+        /* @__PURE__ */ jsx("div", { className: zuiOtpCellsBase, "data-slot": "otp-input-cells", children: cells.map((char, index) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "contents",
+            "data-slot": "otp-input-cell-wrapper",
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: (node) => {
+                    inputRefs.current[index] = node;
+                  },
+                  "aria-label": `Digit ${index + 1} of ${resolvedLength}`,
+                  autoComplete: index === 0 ? "one-time-code" : "off",
+                  autoFocus: autoFocus && index === 0,
+                  className: cn(
+                    otpInputCellVariants({ appearance, size }),
+                    cellClassName
+                  ),
+                  "data-slot": "otp-input-cell",
+                  disabled,
+                  inputMode: allowedCharacters === "numeric" ? "numeric" : "text",
+                  maxLength: resolvedLength,
+                  onChange: (event) => updateAtIndex(index, event.currentTarget.value, false),
+                  onFocus: (event) => event.currentTarget.select(),
+                  onKeyDown: (event) => handleKeyDown(event, index),
+                  onPaste: (event) => handlePaste(event, index),
+                  pattern: allowedCharacters === "numeric" ? "[0-9]*" : "[A-Za-z0-9]*",
+                  type: mask ? "password" : "text",
+                  value: char
+                }
+              ),
+              separatorEvery && separatorEvery > 0 && index < resolvedLength - 1 && (index + 1) % separatorEvery === 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: zuiOtpSeparatorBase,
+                  "data-slot": "otp-input-separator"
+                }
+              )
+            ]
+          },
+          `${rootId}-${index}`
+        )) }),
+        name !== void 0 && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "hidden",
+            name,
+            value: sanitizedValue,
+            disabled
+          }
+        ),
+        errorMessage !== void 0 && /* @__PURE__ */ jsx("p", { id: errorId, className: zuiOtpErrorBase, children: errorMessage })
+      ]
+    }
+  );
+}
+OTPInput.displayName = "OTPInput";
+
+export { OTPInput, otpInputCellVariants };
+//# sourceMappingURL=otp-input.mjs.map
+//# sourceMappingURL=otp-input.mjs.map

package/dist/ui/otp-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/design-system/otp-input.ts","../../src/ui/otp-input/variants.ts","../../src/ui/otp-input/otp-input.tsx"],"names":[],"mappings":"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","file":"otp-input.mjs","sourcesContent":["export const zuiOtpRootBase =\n  \"grid w-fit gap-2 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50\";\n\nexport const zuiOtpLabelBase =\n  \"text-sm font-medium leading-6 text-[color:var(--zui-otp-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-otp-label-fg-dark,oklch(98.4%_0.003_247.858))]\";\n\nexport const zuiOtpHintBase =\n  \"max-w-sm text-xs leading-5 text-[color:var(--zui-otp-hint-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-otp-hint-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiOtpCellsBase = \"flex flex-wrap items-center gap-2\";\n\nexport const zuiOtpCellBase =\n  \"grid place-items-center rounded-xl border bg-[var(--zui-otp-bg,#ffffff)] text-center font-semibold tabular-nums text-[color:var(--zui-otp-fg,oklch(20.8%_0.042_265.755))] shadow-sm shadow-black/5 outline-none transition-[background-color,border-color,box-shadow,color,transform] placeholder:text-transparent focus-visible:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus,#ffffff)] disabled:cursor-not-allowed dark:bg-[var(--zui-otp-bg-dark,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-otp-fg-dark,oklch(98.4%_0.003_247.858))] dark:shadow-black/20 dark:focus-visible:ring-offset-[var(--zui-otp-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]\";\n\nexport const zuiOtpSeparatorBase =\n  \"h-px w-3 shrink-0 bg-[color:var(--zui-otp-separator,#94a3b8)] opacity-70 dark:bg-[color:var(--zui-otp-separator-dark,#64748b)]\";\n\nexport const zuiOtpErrorBase =\n  \"text-sm leading-6 text-[color:var(--zui-otp-error-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-otp-error-fg-dark,oklch(71.2%_0.194_13.428))]\";\n\nexport const zuiOtpSizes = {\n  sm: \"size-7 md:size-9 rounded-lg text-sm\",\n  md: \"size-9 md:size-11 text-base\",\n  lg: \"size-11 md:size-13 rounded-2xl text-lg\",\n} as const;\n\nexport const zuiOtpAppearances = {\n  default:\n    \"border-[color:var(--zui-otp-default-border,#cbd5e1)] focus-visible:border-[color:var(--zui-otp-default-border-focus,oklch(44.6%_0.043_257.281))] focus-visible:ring-[var(--zui-otp-default-ring-focus,oklch(44.6%_0.043_257.281_/_0.25))] dark:border-[color:var(--zui-otp-default-border-dark,#475569)] dark:focus-visible:border-[color:var(--zui-otp-default-border-focus-dark,oklch(86.9%_0.022_252.894))] dark:focus-visible:ring-[var(--zui-otp-default-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.25))]\",\n  outline:\n    \"border-[color:var(--zui-otp-outline-border,#64748b)] bg-transparent focus-visible:border-[color:var(--zui-otp-outline-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-outline-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-outline-border-dark,#94a3b8)] dark:bg-transparent dark:focus-visible:border-[color:var(--zui-otp-outline-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-outline-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]\",\n  glass:\n    \"border-[color:var(--zui-otp-glass-border,#ffffff66)] bg-[var(--zui-otp-glass-bg,#ffffffcc)] backdrop-blur-md focus-visible:border-[color:var(--zui-otp-glass-border-focus,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-otp-glass-ring-focus,oklch(70.7%_0.165_254.624_/_0.32))] dark:border-[color:var(--zui-otp-glass-border-dark,#ffffff26)] dark:bg-[var(--zui-otp-glass-bg-dark,#0f172acc)] dark:focus-visible:border-[color:var(--zui-otp-glass-border-focus-dark,oklch(78.9%_0.154_211.53))] dark:focus-visible:ring-[var(--zui-otp-glass-ring-focus-dark,oklch(78.9%_0.154_211.53_/_0.32))]\",\n  success:\n    \"border-[color:var(--zui-otp-success-border,oklch(69.6%_0.17_162.48_/_0.6))] focus-visible:border-[color:var(--zui-otp-success-border-focus,oklch(59.6%_0.145_163.225))] focus-visible:ring-[var(--zui-otp-success-ring-focus,oklch(59.6%_0.145_163.225_/_0.28))] dark:border-[color:var(--zui-otp-success-border-dark,oklch(69.6%_0.17_162.48_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-success-border-focus-dark,oklch(77.7%_0.152_181.912))] dark:focus-visible:ring-[var(--zui-otp-success-ring-focus-dark,oklch(77.7%_0.152_181.912_/_0.28))]\",\n  error:\n    \"border-[color:var(--zui-otp-error-border,oklch(58.6%_0.253_17.585_/_0.7))] focus-visible:border-[color:var(--zui-otp-error-border-focus,oklch(58.6%_0.253_17.585))] focus-visible:ring-[var(--zui-otp-error-ring-focus,oklch(58.6%_0.253_17.585_/_0.28))] dark:border-[color:var(--zui-otp-error-border-dark,oklch(71.2%_0.194_13.428_/_0.65))] dark:focus-visible:border-[color:var(--zui-otp-error-border-focus-dark,oklch(71.2%_0.194_13.428))] dark:focus-visible:ring-[var(--zui-otp-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.28))]\",\n  warning:\n    \"border-[color:var(--zui-otp-warning-border,oklch(79.5%_0.184_86.047_/_0.7))] focus-visible:border-[color:var(--zui-otp-warning-border-focus,oklch(68.1%_0.162_75.834))] focus-visible:ring-[var(--zui-otp-warning-ring-focus,oklch(68.1%_0.162_75.834_/_0.28))] dark:border-[color:var(--zui-otp-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] dark:focus-visible:ring-[var(--zui-otp-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.28))]\",\n  info: \"border-[color:var(--zui-otp-info-border,oklch(62.3%_0.214_259.815_/_0.7))] focus-visible:border-[color:var(--zui-otp-info-border-focus,oklch(54.6%_0.245_262.881))] focus-visible:ring-[var(--zui-otp-info-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] dark:border-[color:var(--zui-otp-info-border-dark,oklch(62.3%_0.214_259.815_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-info-border-focus-dark,oklch(70.7%_0.165_254.624))] dark:focus-visible:ring-[var(--zui-otp-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))]\",\n  violet:\n    \"border-[color:var(--zui-otp-violet-border,oklch(60.6%_0.25_292.717_/_0.7))] focus-visible:border-[color:var(--zui-otp-violet-border-focus,oklch(54.1%_0.281_293.009))] focus-visible:ring-[var(--zui-otp-violet-ring-focus,oklch(54.1%_0.281_293.009_/_0.28))] dark:border-[color:var(--zui-otp-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] dark:focus-visible:ring-[var(--zui-otp-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.28))]\",\n  amber:\n    \"border-[color:var(--zui-otp-amber-border,oklch(76.9%_0.188_70.08_/_0.7))] focus-visible:border-[color:var(--zui-otp-amber-border-focus,oklch(66.6%_0.179_58.318))] focus-visible:ring-[var(--zui-otp-amber-ring-focus,oklch(66.6%_0.179_58.318_/_0.28))] dark:border-[color:var(--zui-otp-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] dark:focus-visible:ring-[var(--zui-otp-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.28))]\",\n  pink: \"border-[color:var(--zui-otp-pink-border,oklch(65.6%_0.241_354.308_/_0.7))] focus-visible:border-[color:var(--zui-otp-pink-border-focus,oklch(59.2%_0.249_0.584))] focus-visible:ring-[var(--zui-otp-pink-ring-focus,oklch(59.2%_0.249_0.584_/_0.28))] dark:border-[color:var(--zui-otp-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] dark:focus-visible:ring-[var(--zui-otp-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.28))]\",\n  indigo:\n    \"border-[color:var(--zui-otp-indigo-border,oklch(58.5%_0.233_277.117_/_0.7))] focus-visible:border-[color:var(--zui-otp-indigo-border-focus,oklch(51.1%_0.262_276.966))] focus-visible:ring-[var(--zui-otp-indigo-ring-focus,oklch(51.1%_0.262_276.966_/_0.28))] dark:border-[color:var(--zui-otp-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] dark:focus-visible:ring-[var(--zui-otp-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.28))]\",\n  orange:\n    \"border-[color:var(--zui-otp-orange-border,oklch(70.5%_0.213_47.604_/_0.7))] focus-visible:border-[color:var(--zui-otp-orange-border-focus,oklch(64.6%_0.222_41.116))] focus-visible:ring-[var(--zui-otp-orange-ring-focus,oklch(64.6%_0.222_41.116_/_0.28))] dark:border-[color:var(--zui-otp-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.5))] dark:focus-visible:border-[color:var(--zui-otp-orange-border-focus-dark,oklch(75%_0.183_55.934))] dark:focus-visible:ring-[var(--zui-otp-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.28))]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiOtpAppearances,\n  zuiOtpCellBase,\n  zuiOtpSizes,\n} from \"../../design-system/otp-input\";\n\nexport const otpInputCellVariants = cva(zuiOtpCellBase, {\n  variants: {\n    appearance: zuiOtpAppearances,\n    size: zuiOtpSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n","\"use client\";\n\nimport {\n  type ClipboardEvent,\n  type KeyboardEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  zuiOtpCellsBase,\n  zuiOtpErrorBase,\n  zuiOtpHintBase,\n  zuiOtpLabelBase,\n  zuiOtpRootBase,\n  zuiOtpSeparatorBase,\n} from \"../../design-system/otp-input\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { OTPInputAllowedCharacters, OTPInputProps } from \"./types\";\nimport { otpInputCellVariants } from \"./variants\";\n\nfunction clampLength(length: number): number {\n  return Number.isFinite(length) ? Math.max(1, Math.min(12, length)) : 6;\n}\n\nfunction sanitizeValue(\n  value: string,\n  allowedCharacters: OTPInputAllowedCharacters,\n  maxLength: number,\n): string {\n  const pattern = allowedCharacters === \"numeric\" ? /[0-9]/g : /[a-zA-Z0-9]/g;\n  return (value.match(pattern) ?? []).join(\"\").slice(0, maxLength);\n}\n\nfunction valueToCells(value: string, length: number): string[] {\n  return Array.from({ length }, (_, index) => {\n    const c = value[index] ?? \"\\x00\";\n    return c === \"\\x00\" ? \"\" : c;\n  });\n}\n\nfunction cellsToInternal(cells: string[], length: number): string {\n  return Array.from({ length }, (_, i) => cells[i] || \"\\x00\").join(\"\");\n}\n\nexport function OTPInput(props: OTPInputProps) {\n  const {\n    allowedCharacters = \"numeric\",\n    appearance,\n    autoFocus,\n    cellClassName,\n    className,\n    defaultValue = \"\",\n    disabled,\n    errorMessage,\n    hint,\n    id,\n    label,\n    length = 6,\n    mask,\n    name,\n    onComplete,\n    onValueChange,\n    ref,\n    separatorEvery,\n    size,\n    value,\n    ...rest\n  } = props;\n  const generatedId = useId();\n  const rootId = id ?? generatedId;\n  const resolvedLength = clampLength(length);\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(() => {\n    const clean = sanitizeValue(\n      defaultValue,\n      allowedCharacters,\n      resolvedLength,\n    );\n    return clean.padEnd(resolvedLength, \"\\x00\");\n  });\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const cells = useMemo(\n    () =>\n      isControlled\n        ? valueToCells(\n            sanitizeValue(\n              value ?? \"\",\n              allowedCharacters,\n              resolvedLength,\n            ).padEnd(resolvedLength, \"\\x00\"),\n            resolvedLength,\n          )\n        : Array.from({ length: resolvedLength }, (_, index) => {\n            const c = uncontrolledValue[index] ?? \"\\x00\";\n            return c === \"\\x00\" ? \"\" : sanitizeValue(c, allowedCharacters, 1);\n          }),\n    [allowedCharacters, isControlled, resolvedLength, uncontrolledValue, value],\n  );\n  const sanitizedValue = cells.filter(Boolean).join(\"\");\n  const labelId = `${rootId}-label`;\n  const hintId = `${rootId}-hint`;\n  const errorId = `${rootId}-error`;\n  const describedBy = [\n    hint !== undefined ? hintId : undefined,\n    errorMessage !== undefined ? errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const commitValue = useCallback(\n    (nextCells: string[]) => {\n      if (!isControlled) {\n        setUncontrolledValue(cellsToInternal(nextCells, resolvedLength));\n      }\n      const next = nextCells.filter(Boolean).join(\"\").slice(0, resolvedLength);\n      onValueChange?.(next);\n      if (next.length === resolvedLength) {\n        onComplete?.(next);\n      }\n    },\n    [isControlled, onComplete, onValueChange, resolvedLength],\n  );\n\n  const focusCell = useCallback(\n    (index: number) => {\n      const target =\n        inputRefs.current[Math.max(0, Math.min(index, resolvedLength - 1))];\n      target?.focus();\n      target?.select();\n    },\n    [resolvedLength],\n  );\n\n  const updateAtIndex = useCallback(\n    (index: number, nextChars: string, isPaste = false) => {\n      let chars: string | undefined = sanitizeValue(\n        nextChars,\n        allowedCharacters,\n        resolvedLength,\n      );\n\n      // Detect single-char overwrite: browser gives \"existingChar + typedChar\"\n      if (\n        !isPaste &&\n        chars &&\n        chars.length === 2 &&\n        chars[0] === (cells[index] ?? \"\")\n      ) {\n        chars = chars[1];\n      }\n\n      if (!chars?.length || (!isPaste && chars === cells[index])) {\n        return;\n      }\n\n      const nextCells = [...cells];\n\n      chars.split(\"\").forEach((char, offset) => {\n        const targetIndex = index + offset;\n        if (targetIndex < resolvedLength) {\n          nextCells[targetIndex] = char;\n        }\n      });\n\n      commitValue(nextCells);\n      focusCell(\n        Math.min(index + Math.max(chars.length, 1), resolvedLength - 1),\n      );\n    },\n    [allowedCharacters, cells, commitValue, focusCell, resolvedLength],\n  );\n\n  const clearAtIndex = useCallback(\n    (index: number) => {\n      const nextCells = [...cells];\n      nextCells[index] = \"\";\n      commitValue(nextCells);\n    },\n    [cells, commitValue],\n  );\n\n  const handlePaste = useCallback(\n    (event: ClipboardEvent<HTMLInputElement>, index: number) => {\n      event.preventDefault();\n      updateAtIndex(index, event.clipboardData.getData(\"text\"), true);\n    },\n    [updateAtIndex],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>, index: number) => {\n      if (event.key === \"Backspace\") {\n        event.preventDefault();\n        if (cells[index]) {\n          clearAtIndex(index);\n          return;\n        }\n        clearAtIndex(Math.max(index - 1, 0));\n        focusCell(index - 1);\n        return;\n      }\n\n      if (event.key === \"Delete\") {\n        event.preventDefault();\n        clearAtIndex(index);\n        return;\n      }\n\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        focusCell(index - 1);\n        return;\n      }\n\n      if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        focusCell(index + 1);\n        return;\n      }\n\n      if (event.key === \"Home\") {\n        event.preventDefault();\n        focusCell(0);\n        return;\n      }\n\n      if (event.key === \"End\") {\n        event.preventDefault();\n        focusCell(resolvedLength - 1);\n      }\n    },\n    [cells, clearAtIndex, focusCell, resolvedLength],\n  );\n\n  return (\n    <div\n      ref={ref}\n      id={rootId}\n      role=\"group\"\n      aria-labelledby={label !== undefined ? labelId : undefined}\n      aria-describedby={describedBy || undefined}\n      aria-invalid={errorMessage !== undefined ? true : undefined}\n      className={cn(zuiOtpRootBase, className)}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-slot=\"otp-input\"\n      {...rest}\n    >\n      {label !== undefined && (\n        <p id={labelId} className={zuiOtpLabelBase}>\n          {label}\n        </p>\n      )}\n      {hint !== undefined && (\n        <p id={hintId} className={zuiOtpHintBase}>\n          {hint}\n        </p>\n      )}\n      <div className={zuiOtpCellsBase} data-slot=\"otp-input-cells\">\n        {cells.map((char, index) => (\n          <span\n            key={`${rootId}-${index}`}\n            className=\"contents\"\n            data-slot=\"otp-input-cell-wrapper\"\n          >\n            <input\n              ref={(node) => {\n                inputRefs.current[index] = node;\n              }}\n              aria-label={`Digit ${index + 1} of ${resolvedLength}`}\n              autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n              autoFocus={autoFocus && index === 0}\n              className={cn(\n                otpInputCellVariants({ appearance, size }),\n                cellClassName,\n              )}\n              data-slot=\"otp-input-cell\"\n              disabled={disabled}\n              inputMode={allowedCharacters === \"numeric\" ? \"numeric\" : \"text\"}\n              maxLength={resolvedLength}\n              onChange={(event) =>\n                updateAtIndex(index, event.currentTarget.value, false)\n              }\n              onFocus={(event) => event.currentTarget.select()}\n              onKeyDown={(event) => handleKeyDown(event, index)}\n              onPaste={(event) => handlePaste(event, index)}\n              pattern={\n                allowedCharacters === \"numeric\" ? \"[0-9]*\" : \"[A-Za-z0-9]*\"\n              }\n              type={mask ? \"password\" : \"text\"}\n              value={char}\n            />\n            {separatorEvery &&\n              separatorEvery > 0 &&\n              index < resolvedLength - 1 &&\n              (index + 1) % separatorEvery === 0 && (\n                <span\n                  aria-hidden=\"true\"\n                  className={zuiOtpSeparatorBase}\n                  data-slot=\"otp-input-separator\"\n                />\n              )}\n          </span>\n        ))}\n      </div>\n      {name !== undefined && (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={sanitizedValue}\n          disabled={disabled}\n        />\n      )}\n      {errorMessage !== undefined && (\n        <p id={errorId} className={zuiOtpErrorBase}>\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n}\n\nOTPInput.displayName = \"OTPInput\";\n"]}

package/dist/ui/pagination.js

@@ -13,32 +13,32 @@ var zuiPaginationListBase = "inline-flex flex-wrap items-center rounded-xl borde
 var zuiPaginationListAppearances = {
   default: "border-[color:var(--zui-pagination-list-default-border,#0000001a)] dark:border-[color:var(--zui-pagination-list-default-border-dark,#ffffff1a)] bg-[var(--zui-pagination-list-default-bg,#00000008)] dark:bg-[var(--zui-pagination-list-default-bg-dark,#ffffff08)]",
   secondary: "border-[color:var(--zui-pagination-list-secondary-border,#0000001a)] dark:border-[color:var(--zui-pagination-list-secondary-border-dark,#ffffff1a)] bg-[var(--zui-pagination-list-secondary-bg,oklch(96.8%_0.007_247.896_/_0.4))] dark:bg-[var(--zui-pagination-list-secondary-bg-dark,oklch(20.8%_0.042_265.755_/_0.4))]",
-  destructive: "border-[color:var(--zui-pagination-list-destructive-border,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-destructive-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-destructive-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]",
-  outline: "border-[color:var(--zui-pagination-list-outline-border,#00000026)] dark:border-[color:var(--zui-pagination-list-outline-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-outline-bg,transparent)]",
-  ghost: "border-[color:var(--zui-pagination-list-ghost-border,transparent)] bg-[var(--zui-pagination-list-ghost-bg,transparent)]",
-  link: "border-[color:var(--zui-pagination-list-link-border,transparent)] bg-[var(--zui-pagination-list-link-bg,transparent)]",
+  destructive: "border-[color:var(--zui-pagination-list-destructive-border,oklch(64.5%_0.246_16.439_/_0.25))] dark:border-[color:var(--zui-pagination-list-destructive-border-dark,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-destructive-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-destructive-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]",
+  outline: "border-[color:var(--zui-pagination-list-outline-border,#00000026)] dark:border-[color:var(--zui-pagination-list-outline-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-outline-bg,transparent)] dark:bg-[var(--zui-pagination-list-outline-bg-dark,transparent)]",
+  ghost: "border-[color:var(--zui-pagination-list-ghost-border,transparent)] dark:border-[color:var(--zui-pagination-list-ghost-border-dark,transparent)] bg-[var(--zui-pagination-list-ghost-bg,transparent)] dark:bg-[var(--zui-pagination-list-ghost-bg-dark,transparent)]",
+  link: "border-[color:var(--zui-pagination-list-link-border,transparent)] dark:border-[color:var(--zui-pagination-list-link-border-dark,transparent)] bg-[var(--zui-pagination-list-link-bg,transparent)] dark:bg-[var(--zui-pagination-list-link-bg-dark,transparent)]",
   glass: "border-[color:var(--zui-pagination-list-glass-border,#00000026)] dark:border-[color:var(--zui-pagination-list-glass-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-glass-bg,#0000000d)] dark:bg-[var(--zui-pagination-list-glass-bg-dark,#ffffff0d)] backdrop-blur-md",
-  emerald: "border-[color:var(--zui-pagination-list-emerald-border,oklch(69.6%_0.17_162.48_/_0.25))] bg-[var(--zui-pagination-list-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-pagination-list-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.2))]",
-  indigo: "border-[color:var(--zui-pagination-list-indigo-border,oklch(58.5%_0.233_277.117_/_0.25))] bg-[var(--zui-pagination-list-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-pagination-list-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.2))]",
-  purple: "border-[color:var(--zui-pagination-list-purple-border,oklch(62.7%_0.265_303.9_/_0.25))] bg-[var(--zui-pagination-list-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-pagination-list-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.2))]",
-  pink: "border-[color:var(--zui-pagination-list-pink-border,oklch(65.6%_0.241_354.308_/_0.25))] bg-[var(--zui-pagination-list-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-pagination-list-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.2))]",
-  rose: "border-[color:var(--zui-pagination-list-rose-border,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]",
-  sky: "border-[color:var(--zui-pagination-list-sky-border,oklch(68.5%_0.169_237.323_/_0.25))] bg-[var(--zui-pagination-list-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-pagination-list-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.2))]",
-  teal: "border-[color:var(--zui-pagination-list-teal-border,oklch(70.4%_0.14_182.503_/_0.25))] bg-[var(--zui-pagination-list-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-pagination-list-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.2))]",
-  yellow: "border-[color:var(--zui-pagination-list-yellow-border,oklch(79.5%_0.184_86.047_/_0.25))] bg-[var(--zui-pagination-list-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-pagination-list-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.2))]",
-  orange: "border-[color:var(--zui-pagination-list-orange-border,oklch(70.5%_0.213_47.604_/_0.25))] bg-[var(--zui-pagination-list-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-pagination-list-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.2))]",
-  gray: "border-[color:var(--zui-pagination-list-gray-border,oklch(55.1%_0.027_264.364_/_0.25))] bg-[var(--zui-pagination-list-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-pagination-list-gray-bg-dark,oklch(13%_0.028_261.692_/_0.2))]",
-  amber: "border-[color:var(--zui-pagination-list-amber-border,oklch(76.9%_0.188_70.08_/_0.25))] bg-[var(--zui-pagination-list-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-pagination-list-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.2))]",
-  violet: "border-[color:var(--zui-pagination-list-violet-border,oklch(60.6%_0.25_292.717_/_0.25))] bg-[var(--zui-pagination-list-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-pagination-list-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.2))]",
-  "gradient-blue": "border-[color:var(--zui-pagination-list-gradient-blue-border,oklch(62.3%_0.214_259.815_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-pagination-list-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.3))] to-[var(--zui-pagination-list-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]",
-  "gradient-green": "border-[color:var(--zui-pagination-list-gradient-green-border,oklch(76.8%_0.233_130.85_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-pagination-list-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.3))] to-[var(--zui-pagination-list-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-pagination-list-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.3))]",
-  "gradient-red": "border-[color:var(--zui-pagination-list-gradient-red-border,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-pagination-list-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.3))] to-[var(--zui-pagination-list-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]",
-  "gradient-yellow": "border-[color:var(--zui-pagination-list-gradient-yellow-border,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-pagination-list-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.3))] to-[var(--zui-pagination-list-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-pagination-list-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.3))]",
-  "gradient-purple": "border-[color:var(--zui-pagination-list-gradient-purple-border,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-pagination-list-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.3))] to-[var(--zui-pagination-list-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]",
-  "gradient-teal": "border-[color:var(--zui-pagination-list-gradient-teal-border,oklch(71.5%_0.143_215.221_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-pagination-list-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.3))] to-[var(--zui-pagination-list-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-pagination-list-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.3))]",
-  "gradient-indigo": "border-[color:var(--zui-pagination-list-gradient-indigo-border,oklch(62.7%_0.265_303.9_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-pagination-list-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.3))] to-[var(--zui-pagination-list-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]",
-  "gradient-pink": "border-[color:var(--zui-pagination-list-gradient-pink-border,oklch(64.5%_0.246_16.439_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-pagination-list-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.3))] to-[var(--zui-pagination-list-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-pagination-list-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.3))]",
-  "gradient-orange": "border-[color:var(--zui-pagination-list-gradient-orange-border,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-pagination-list-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.3))] to-[var(--zui-pagination-list-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-pagination-list-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.3))]"
+  emerald: "border-[color:var(--zui-pagination-list-emerald-border,oklch(69.6%_0.17_162.48_/_0.25))] dark:border-[color:var(--zui-pagination-list-emerald-border-dark,oklch(69.6%_0.17_162.48_/_0.25))] bg-[var(--zui-pagination-list-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-pagination-list-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.2))]",
+  indigo: "border-[color:var(--zui-pagination-list-indigo-border,oklch(58.5%_0.233_277.117_/_0.25))] dark:border-[color:var(--zui-pagination-list-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.25))] bg-[var(--zui-pagination-list-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-pagination-list-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.2))]",
+  purple: "border-[color:var(--zui-pagination-list-purple-border,oklch(62.7%_0.265_303.9_/_0.25))] dark:border-[color:var(--zui-pagination-list-purple-border-dark,oklch(62.7%_0.265_303.9_/_0.25))] bg-[var(--zui-pagination-list-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-pagination-list-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.2))]",
+  pink: "border-[color:var(--zui-pagination-list-pink-border,oklch(65.6%_0.241_354.308_/_0.25))] dark:border-[color:var(--zui-pagination-list-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.25))] bg-[var(--zui-pagination-list-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-pagination-list-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.2))]",
+  rose: "border-[color:var(--zui-pagination-list-rose-border,oklch(64.5%_0.246_16.439_/_0.25))] dark:border-[color:var(--zui-pagination-list-rose-border-dark,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]",
+  sky: "border-[color:var(--zui-pagination-list-sky-border,oklch(68.5%_0.169_237.323_/_0.25))] dark:border-[color:var(--zui-pagination-list-sky-border-dark,oklch(68.5%_0.169_237.323_/_0.25))] bg-[var(--zui-pagination-list-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-pagination-list-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.2))]",
+  teal: "border-[color:var(--zui-pagination-list-teal-border,oklch(70.4%_0.14_182.503_/_0.25))] dark:border-[color:var(--zui-pagination-list-teal-border-dark,oklch(70.4%_0.14_182.503_/_0.25))] bg-[var(--zui-pagination-list-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-pagination-list-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.2))]",
+  yellow: "border-[color:var(--zui-pagination-list-yellow-border,oklch(79.5%_0.184_86.047_/_0.25))] dark:border-[color:var(--zui-pagination-list-yellow-border-dark,oklch(79.5%_0.184_86.047_/_0.25))] bg-[var(--zui-pagination-list-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-pagination-list-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.2))]",
+  orange: "border-[color:var(--zui-pagination-list-orange-border,oklch(70.5%_0.213_47.604_/_0.25))] dark:border-[color:var(--zui-pagination-list-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.25))] bg-[var(--zui-pagination-list-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-pagination-list-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.2))]",
+  gray: "border-[color:var(--zui-pagination-list-gray-border,oklch(55.1%_0.027_264.364_/_0.25))] dark:border-[color:var(--zui-pagination-list-gray-border-dark,oklch(55.1%_0.027_264.364_/_0.25))] bg-[var(--zui-pagination-list-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-pagination-list-gray-bg-dark,oklch(13%_0.028_261.692_/_0.2))]",
+  amber: "border-[color:var(--zui-pagination-list-amber-border,oklch(76.9%_0.188_70.08_/_0.25))] dark:border-[color:var(--zui-pagination-list-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.25))] bg-[var(--zui-pagination-list-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-pagination-list-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.2))]",
+  violet: "border-[color:var(--zui-pagination-list-violet-border,oklch(60.6%_0.25_292.717_/_0.25))] dark:border-[color:var(--zui-pagination-list-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.25))] bg-[var(--zui-pagination-list-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-pagination-list-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.2))]",
+  "gradient-blue": "border-[color:var(--zui-pagination-list-gradient-blue-border,oklch(62.3%_0.214_259.815_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-blue-border-dark,oklch(62.3%_0.214_259.815_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-pagination-list-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.3))] to-[var(--zui-pagination-list-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]",
+  "gradient-green": "border-[color:var(--zui-pagination-list-gradient-green-border,oklch(76.8%_0.233_130.85_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-green-border-dark,oklch(76.8%_0.233_130.85_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-pagination-list-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.3))] to-[var(--zui-pagination-list-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-pagination-list-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.3))]",
+  "gradient-red": "border-[color:var(--zui-pagination-list-gradient-red-border,oklch(65.6%_0.241_354.308_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-red-border-dark,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-pagination-list-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.3))] to-[var(--zui-pagination-list-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]",
+  "gradient-yellow": "border-[color:var(--zui-pagination-list-gradient-yellow-border,oklch(70.5%_0.213_47.604_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-yellow-border-dark,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-pagination-list-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.3))] to-[var(--zui-pagination-list-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-pagination-list-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.3))]",
+  "gradient-purple": "border-[color:var(--zui-pagination-list-gradient-purple-border,oklch(65.6%_0.241_354.308_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-purple-border-dark,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-pagination-list-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.3))] to-[var(--zui-pagination-list-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]",
+  "gradient-teal": "border-[color:var(--zui-pagination-list-gradient-teal-border,oklch(71.5%_0.143_215.221_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-teal-border-dark,oklch(71.5%_0.143_215.221_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-pagination-list-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.3))] to-[var(--zui-pagination-list-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-pagination-list-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.3))]",
+  "gradient-indigo": "border-[color:var(--zui-pagination-list-gradient-indigo-border,oklch(62.7%_0.265_303.9_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-indigo-border-dark,oklch(62.7%_0.265_303.9_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-pagination-list-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.3))] to-[var(--zui-pagination-list-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]",
+  "gradient-pink": "border-[color:var(--zui-pagination-list-gradient-pink-border,oklch(64.5%_0.246_16.439_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-pink-border-dark,oklch(64.5%_0.246_16.439_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-pagination-list-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.3))] to-[var(--zui-pagination-list-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-pagination-list-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.3))]",
+  "gradient-orange": "border-[color:var(--zui-pagination-list-gradient-orange-border,oklch(70.5%_0.213_47.604_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-pagination-list-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.3))] to-[var(--zui-pagination-list-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-pagination-list-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.3))]"
 };
 var zuiPaginationListSizes = {
   sm: "gap-0.5",

package/dist/ui/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/design-system/pagination.ts","../../src/ui/pagination/variants.ts","../../src/ui/pagination/pagination.tsx"],"names":["cva","useId","usePagination","useCallback","cn","buttonVariants","jsx","clampPage","jsxs"],"mappings":"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","file":"pagination.js","sourcesContent":["export const zuiPaginationListBase =\n  \"inline-flex flex-wrap items-center rounded-xl border p-1 ring-offset-[var(--zui-pagination-list-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-pagination-list-ring-offset-dark,oklch(12.9%_0.042_264.695))]\";\n\nexport const zuiPaginationListAppearances = {\n  default:\n    \"border-[color:var(--zui-pagination-list-default-border,#0000001a)] dark:border-[color:var(--zui-pagination-list-default-border-dark,#ffffff1a)] bg-[var(--zui-pagination-list-default-bg,#00000008)] dark:bg-[var(--zui-pagination-list-default-bg-dark,#ffffff08)]\",\n  secondary:\n    \"border-[color:var(--zui-pagination-list-secondary-border,#0000001a)] dark:border-[color:var(--zui-pagination-list-secondary-border-dark,#ffffff1a)] bg-[var(--zui-pagination-list-secondary-bg,oklch(96.8%_0.007_247.896_/_0.4))] dark:bg-[var(--zui-pagination-list-secondary-bg-dark,oklch(20.8%_0.042_265.755_/_0.4))]\",\n  destructive:\n    \"border-[color:var(--zui-pagination-list-destructive-border,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-destructive-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-destructive-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]\",\n  outline:\n    \"border-[color:var(--zui-pagination-list-outline-border,#00000026)] dark:border-[color:var(--zui-pagination-list-outline-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-outline-bg,transparent)]\",\n  ghost:\n    \"border-[color:var(--zui-pagination-list-ghost-border,transparent)] bg-[var(--zui-pagination-list-ghost-bg,transparent)]\",\n  link: \"border-[color:var(--zui-pagination-list-link-border,transparent)] bg-[var(--zui-pagination-list-link-bg,transparent)]\",\n  glass:\n    \"border-[color:var(--zui-pagination-list-glass-border,#00000026)] dark:border-[color:var(--zui-pagination-list-glass-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-glass-bg,#0000000d)] dark:bg-[var(--zui-pagination-list-glass-bg-dark,#ffffff0d)] backdrop-blur-md\",\n  emerald:\n    \"border-[color:var(--zui-pagination-list-emerald-border,oklch(69.6%_0.17_162.48_/_0.25))] bg-[var(--zui-pagination-list-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-pagination-list-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.2))]\",\n  indigo:\n    \"border-[color:var(--zui-pagination-list-indigo-border,oklch(58.5%_0.233_277.117_/_0.25))] bg-[var(--zui-pagination-list-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-pagination-list-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.2))]\",\n  purple:\n    \"border-[color:var(--zui-pagination-list-purple-border,oklch(62.7%_0.265_303.9_/_0.25))] bg-[var(--zui-pagination-list-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-pagination-list-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.2))]\",\n  pink: \"border-[color:var(--zui-pagination-list-pink-border,oklch(65.6%_0.241_354.308_/_0.25))] bg-[var(--zui-pagination-list-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-pagination-list-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.2))]\",\n  rose: \"border-[color:var(--zui-pagination-list-rose-border,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]\",\n  sky: \"border-[color:var(--zui-pagination-list-sky-border,oklch(68.5%_0.169_237.323_/_0.25))] bg-[var(--zui-pagination-list-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-pagination-list-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.2))]\",\n  teal: \"border-[color:var(--zui-pagination-list-teal-border,oklch(70.4%_0.14_182.503_/_0.25))] bg-[var(--zui-pagination-list-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-pagination-list-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.2))]\",\n  yellow:\n    \"border-[color:var(--zui-pagination-list-yellow-border,oklch(79.5%_0.184_86.047_/_0.25))] bg-[var(--zui-pagination-list-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-pagination-list-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.2))]\",\n  orange:\n    \"border-[color:var(--zui-pagination-list-orange-border,oklch(70.5%_0.213_47.604_/_0.25))] bg-[var(--zui-pagination-list-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-pagination-list-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.2))]\",\n  gray: \"border-[color:var(--zui-pagination-list-gray-border,oklch(55.1%_0.027_264.364_/_0.25))] bg-[var(--zui-pagination-list-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-pagination-list-gray-bg-dark,oklch(13%_0.028_261.692_/_0.2))]\",\n  amber:\n    \"border-[color:var(--zui-pagination-list-amber-border,oklch(76.9%_0.188_70.08_/_0.25))] bg-[var(--zui-pagination-list-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-pagination-list-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.2))]\",\n  violet:\n    \"border-[color:var(--zui-pagination-list-violet-border,oklch(60.6%_0.25_292.717_/_0.25))] bg-[var(--zui-pagination-list-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-pagination-list-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.2))]\",\n  \"gradient-blue\":\n    \"border-[color:var(--zui-pagination-list-gradient-blue-border,oklch(62.3%_0.214_259.815_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-pagination-list-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.3))] to-[var(--zui-pagination-list-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]\",\n  \"gradient-green\":\n    \"border-[color:var(--zui-pagination-list-gradient-green-border,oklch(76.8%_0.233_130.85_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-pagination-list-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.3))] to-[var(--zui-pagination-list-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-pagination-list-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.3))]\",\n  \"gradient-red\":\n    \"border-[color:var(--zui-pagination-list-gradient-red-border,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-pagination-list-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.3))] to-[var(--zui-pagination-list-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]\",\n  \"gradient-yellow\":\n    \"border-[color:var(--zui-pagination-list-gradient-yellow-border,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-pagination-list-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.3))] to-[var(--zui-pagination-list-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-pagination-list-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.3))]\",\n  \"gradient-purple\":\n    \"border-[color:var(--zui-pagination-list-gradient-purple-border,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-pagination-list-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.3))] to-[var(--zui-pagination-list-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]\",\n  \"gradient-teal\":\n    \"border-[color:var(--zui-pagination-list-gradient-teal-border,oklch(71.5%_0.143_215.221_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-pagination-list-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.3))] to-[var(--zui-pagination-list-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-pagination-list-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.3))]\",\n  \"gradient-indigo\":\n    \"border-[color:var(--zui-pagination-list-gradient-indigo-border,oklch(62.7%_0.265_303.9_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-pagination-list-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.3))] to-[var(--zui-pagination-list-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]\",\n  \"gradient-pink\":\n    \"border-[color:var(--zui-pagination-list-gradient-pink-border,oklch(64.5%_0.246_16.439_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-pagination-list-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.3))] to-[var(--zui-pagination-list-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-pagination-list-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.3))]\",\n  \"gradient-orange\":\n    \"border-[color:var(--zui-pagination-list-gradient-orange-border,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-pagination-list-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.3))] to-[var(--zui-pagination-list-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-pagination-list-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.3))]\",\n} as const;\n\nexport const zuiPaginationListSizes = {\n  sm: \"gap-0.5\",\n  md: \"gap-1\",\n  lg: \"gap-1\",\n  xl: \"gap-1.5\",\n  \"2xl\": \"gap-1.5\",\n  \"3xl\": \"gap-2\",\n  \"4xl\": \"gap-2\",\n  \"5xl\": \"gap-2\",\n  \"6xl\": \"gap-2\",\n  \"7xl\": \"gap-2.5\",\n  \"8xl\": \"gap-2.5\",\n  \"9xl\": \"gap-2.5\",\n  \"10xl\": \"gap-3\",\n  icon: \"gap-1\",\n} as const;\n\nexport const zuiPaginationEllipsisBase =\n  \"inline-flex min-w-[2ch] select-none items-center justify-center px-1 font-medium text-[color:var(--zui-pagination-ellipsis-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-pagination-ellipsis-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiPaginationEllipsisSizes = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n  xl: \"text-base\",\n  \"2xl\": \"text-lg\",\n  \"3xl\": \"text-lg\",\n  \"4xl\": \"text-xl\",\n  \"5xl\": \"text-xl\",\n  \"6xl\": \"text-xl\",\n  \"7xl\": \"text-2xl\",\n  \"8xl\": \"text-2xl\",\n  \"9xl\": \"text-2xl\",\n  \"10xl\": \"text-2xl\",\n  icon: \"text-sm\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiPaginationEllipsisBase,\n  zuiPaginationEllipsisSizes,\n  zuiPaginationListAppearances,\n  zuiPaginationListBase,\n  zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n  variants: {\n    appearance: zuiPaginationListAppearances,\n    size: zuiPaginationListSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n  variants: {\n    size: zuiPaginationEllipsisSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n  className,\n  appearance = \"default\",\n  size = \"md\",\n  pageCount,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showPrevNext = true,\n  prevLabel = defaultPrevLabel,\n  nextLabel = defaultNextLabel,\n  ellipsisLabel = defaultEllipsisLabel,\n  getPageHref,\n  \"aria-label\": ariaLabel = \"Pagination\",\n  ref,\n  ...rest\n}: PaginationProps) => {\n  const id = useId();\n  const listId = `${id}-list`;\n\n  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n    usePagination({\n      pageCount,\n      page,\n      defaultPage,\n      siblingCount,\n      boundaryCount,\n      onPageChange,\n    });\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (pageCount <= 0) {\n        return;\n      }\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        event.preventDefault();\n        if (canGoNext) {\n          setPage(currentPage + 1);\n        }\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        if (canGoPrev) {\n          setPage(currentPage - 1);\n        }\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        setPage(1);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        setPage(pageCount);\n      }\n    },\n    [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n  );\n\n  if (pageCount <= 0) {\n    return null;\n  }\n\n  const inactiveTriggerClass = cn(\n    buttonVariants({ appearance: \"ghost\", size }),\n    \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n  );\n\n  const currentTriggerClass = buttonVariants({ appearance, size });\n\n  const triggerFocusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n  const renderPageControl = (pageNumber: number) => {\n    const isCurrent = pageNumber === currentPage;\n    const href = getPageHref?.(pageNumber);\n    const shared = cn(\n      isCurrent ? currentTriggerClass : inactiveTriggerClass,\n      \"min-w-[2.25ch] shrink-0\",\n      triggerFocusRing,\n    );\n\n    if (href) {\n      return (\n        <a\n          data-slot=\"pagination-trigger\"\n          href={href}\n          aria-label={`Page ${pageNumber}`}\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={shared}\n        >\n          {pageNumber}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"pagination-trigger\"\n        aria-label={`Page ${pageNumber}`}\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={shared}\n        onClick={() => {\n          if (!isCurrent) {\n            setPage(pageNumber);\n          }\n        }}\n      >\n        {pageNumber}\n      </button>\n    );\n  };\n\n  const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n  const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n  const navTriggerClass = cn(\n    buttonVariants({ appearance: \"outline\", size }),\n    \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  );\n\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"pagination\"\n      aria-label={ariaLabel}\n      className={cn(\"w-full\", className)}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {showPrevNext ? (\n          getPageHref && prevHref && canGoPrev ? (\n            <a\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              href={prevHref}\n              className={navTriggerClass}\n            >\n              Prev\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              disabled={!canGoPrev}\n              className={navTriggerClass}\n              onClick={goPrev}\n            >\n              Prev\n            </button>\n          )\n        ) : null}\n\n        <ul\n          id={listId}\n          data-slot=\"pagination-list\"\n          className={paginationListVariants({ appearance, size })}\n        >\n          {items.map((item) => (\n            <li\n              key={item.type === \"page\" ? `page-${item.value}` : item.key}\n              data-slot=\"pagination-item\"\n              className=\"inline-flex items-center\"\n            >\n              {item.type === \"ellipsis\" ? (\n                <span\n                  data-slot=\"pagination-ellipsis\"\n                  className={paginationEllipsisVariants({ size })}\n                  role=\"img\"\n                  aria-label={ellipsisLabel}\n                >\n                  …\n                </span>\n              ) : (\n                renderPageControl(item.value)\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {showPrevNext ? (\n          getPageHref && nextHref && canGoNext ? (\n            <a\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              href={nextHref}\n              className={navTriggerClass}\n            >\n              Next\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              disabled={!canGoNext}\n              className={navTriggerClass}\n              onClick={goNext}\n            >\n              Next\n            </button>\n          )\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nPagination.displayName = \"Pagination\";\n"]}
+{"version":3,"sources":["../../src/design-system/pagination.ts","../../src/ui/pagination/variants.ts","../../src/ui/pagination/pagination.tsx"],"names":["cva","useId","usePagination","useCallback","cn","buttonVariants","jsx","clampPage","jsxs"],"mappings":"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","file":"pagination.js","sourcesContent":["export const zuiPaginationListBase =\n  \"inline-flex flex-wrap items-center rounded-xl border p-1 ring-offset-[var(--zui-pagination-list-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-pagination-list-ring-offset-dark,oklch(12.9%_0.042_264.695))]\";\n\nexport const zuiPaginationListAppearances = {\n  default:\n    \"border-[color:var(--zui-pagination-list-default-border,#0000001a)] dark:border-[color:var(--zui-pagination-list-default-border-dark,#ffffff1a)] bg-[var(--zui-pagination-list-default-bg,#00000008)] dark:bg-[var(--zui-pagination-list-default-bg-dark,#ffffff08)]\",\n  secondary:\n    \"border-[color:var(--zui-pagination-list-secondary-border,#0000001a)] dark:border-[color:var(--zui-pagination-list-secondary-border-dark,#ffffff1a)] bg-[var(--zui-pagination-list-secondary-bg,oklch(96.8%_0.007_247.896_/_0.4))] dark:bg-[var(--zui-pagination-list-secondary-bg-dark,oklch(20.8%_0.042_265.755_/_0.4))]\",\n  destructive:\n    \"border-[color:var(--zui-pagination-list-destructive-border,oklch(64.5%_0.246_16.439_/_0.25))] dark:border-[color:var(--zui-pagination-list-destructive-border-dark,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-destructive-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-destructive-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]\",\n  outline:\n    \"border-[color:var(--zui-pagination-list-outline-border,#00000026)] dark:border-[color:var(--zui-pagination-list-outline-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-outline-bg,transparent)] dark:bg-[var(--zui-pagination-list-outline-bg-dark,transparent)]\",\n  ghost:\n    \"border-[color:var(--zui-pagination-list-ghost-border,transparent)] dark:border-[color:var(--zui-pagination-list-ghost-border-dark,transparent)] bg-[var(--zui-pagination-list-ghost-bg,transparent)] dark:bg-[var(--zui-pagination-list-ghost-bg-dark,transparent)]\",\n  link: \"border-[color:var(--zui-pagination-list-link-border,transparent)] dark:border-[color:var(--zui-pagination-list-link-border-dark,transparent)] bg-[var(--zui-pagination-list-link-bg,transparent)] dark:bg-[var(--zui-pagination-list-link-bg-dark,transparent)]\",\n  glass:\n    \"border-[color:var(--zui-pagination-list-glass-border,#00000026)] dark:border-[color:var(--zui-pagination-list-glass-border-dark,#ffffff26)] bg-[var(--zui-pagination-list-glass-bg,#0000000d)] dark:bg-[var(--zui-pagination-list-glass-bg-dark,#ffffff0d)] backdrop-blur-md\",\n  emerald:\n    \"border-[color:var(--zui-pagination-list-emerald-border,oklch(69.6%_0.17_162.48_/_0.25))] dark:border-[color:var(--zui-pagination-list-emerald-border-dark,oklch(69.6%_0.17_162.48_/_0.25))] bg-[var(--zui-pagination-list-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-pagination-list-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.2))]\",\n  indigo:\n    \"border-[color:var(--zui-pagination-list-indigo-border,oklch(58.5%_0.233_277.117_/_0.25))] dark:border-[color:var(--zui-pagination-list-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.25))] bg-[var(--zui-pagination-list-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-pagination-list-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.2))]\",\n  purple:\n    \"border-[color:var(--zui-pagination-list-purple-border,oklch(62.7%_0.265_303.9_/_0.25))] dark:border-[color:var(--zui-pagination-list-purple-border-dark,oklch(62.7%_0.265_303.9_/_0.25))] bg-[var(--zui-pagination-list-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-pagination-list-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.2))]\",\n  pink: \"border-[color:var(--zui-pagination-list-pink-border,oklch(65.6%_0.241_354.308_/_0.25))] dark:border-[color:var(--zui-pagination-list-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.25))] bg-[var(--zui-pagination-list-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-pagination-list-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.2))]\",\n  rose: \"border-[color:var(--zui-pagination-list-rose-border,oklch(64.5%_0.246_16.439_/_0.25))] dark:border-[color:var(--zui-pagination-list-rose-border-dark,oklch(64.5%_0.246_16.439_/_0.25))] bg-[var(--zui-pagination-list-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-pagination-list-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.2))]\",\n  sky: \"border-[color:var(--zui-pagination-list-sky-border,oklch(68.5%_0.169_237.323_/_0.25))] dark:border-[color:var(--zui-pagination-list-sky-border-dark,oklch(68.5%_0.169_237.323_/_0.25))] bg-[var(--zui-pagination-list-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-pagination-list-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.2))]\",\n  teal: \"border-[color:var(--zui-pagination-list-teal-border,oklch(70.4%_0.14_182.503_/_0.25))] dark:border-[color:var(--zui-pagination-list-teal-border-dark,oklch(70.4%_0.14_182.503_/_0.25))] bg-[var(--zui-pagination-list-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-pagination-list-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.2))]\",\n  yellow:\n    \"border-[color:var(--zui-pagination-list-yellow-border,oklch(79.5%_0.184_86.047_/_0.25))] dark:border-[color:var(--zui-pagination-list-yellow-border-dark,oklch(79.5%_0.184_86.047_/_0.25))] bg-[var(--zui-pagination-list-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-pagination-list-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.2))]\",\n  orange:\n    \"border-[color:var(--zui-pagination-list-orange-border,oklch(70.5%_0.213_47.604_/_0.25))] dark:border-[color:var(--zui-pagination-list-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.25))] bg-[var(--zui-pagination-list-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-pagination-list-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.2))]\",\n  gray: \"border-[color:var(--zui-pagination-list-gray-border,oklch(55.1%_0.027_264.364_/_0.25))] dark:border-[color:var(--zui-pagination-list-gray-border-dark,oklch(55.1%_0.027_264.364_/_0.25))] bg-[var(--zui-pagination-list-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-pagination-list-gray-bg-dark,oklch(13%_0.028_261.692_/_0.2))]\",\n  amber:\n    \"border-[color:var(--zui-pagination-list-amber-border,oklch(76.9%_0.188_70.08_/_0.25))] dark:border-[color:var(--zui-pagination-list-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.25))] bg-[var(--zui-pagination-list-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-pagination-list-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.2))]\",\n  violet:\n    \"border-[color:var(--zui-pagination-list-violet-border,oklch(60.6%_0.25_292.717_/_0.25))] dark:border-[color:var(--zui-pagination-list-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.25))] bg-[var(--zui-pagination-list-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-pagination-list-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.2))]\",\n  \"gradient-blue\":\n    \"border-[color:var(--zui-pagination-list-gradient-blue-border,oklch(62.3%_0.214_259.815_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-blue-border-dark,oklch(62.3%_0.214_259.815_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-pagination-list-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.3))] to-[var(--zui-pagination-list-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]\",\n  \"gradient-green\":\n    \"border-[color:var(--zui-pagination-list-gradient-green-border,oklch(76.8%_0.233_130.85_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-green-border-dark,oklch(76.8%_0.233_130.85_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-pagination-list-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.3))] to-[var(--zui-pagination-list-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-pagination-list-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.3))]\",\n  \"gradient-red\":\n    \"border-[color:var(--zui-pagination-list-gradient-red-border,oklch(65.6%_0.241_354.308_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-red-border-dark,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-pagination-list-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.3))] to-[var(--zui-pagination-list-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]\",\n  \"gradient-yellow\":\n    \"border-[color:var(--zui-pagination-list-gradient-yellow-border,oklch(70.5%_0.213_47.604_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-yellow-border-dark,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-pagination-list-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.3))] to-[var(--zui-pagination-list-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-pagination-list-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.3))]\",\n  \"gradient-purple\":\n    \"border-[color:var(--zui-pagination-list-gradient-purple-border,oklch(65.6%_0.241_354.308_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-purple-border-dark,oklch(65.6%_0.241_354.308_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-pagination-list-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.3))] to-[var(--zui-pagination-list-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-pagination-list-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.3))]\",\n  \"gradient-teal\":\n    \"border-[color:var(--zui-pagination-list-gradient-teal-border,oklch(71.5%_0.143_215.221_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-teal-border-dark,oklch(71.5%_0.143_215.221_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-pagination-list-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.3))] to-[var(--zui-pagination-list-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-pagination-list-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.3))]\",\n  \"gradient-indigo\":\n    \"border-[color:var(--zui-pagination-list-gradient-indigo-border,oklch(62.7%_0.265_303.9_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-indigo-border-dark,oklch(62.7%_0.265_303.9_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-pagination-list-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.3))] to-[var(--zui-pagination-list-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-pagination-list-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.3))]\",\n  \"gradient-pink\":\n    \"border-[color:var(--zui-pagination-list-gradient-pink-border,oklch(64.5%_0.246_16.439_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-pink-border-dark,oklch(64.5%_0.246_16.439_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-pagination-list-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.3))] to-[var(--zui-pagination-list-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-pagination-list-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.3))]\",\n  \"gradient-orange\":\n    \"border-[color:var(--zui-pagination-list-gradient-orange-border,oklch(70.5%_0.213_47.604_/_0.3))] dark:border-[color:var(--zui-pagination-list-gradient-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.3))] bg-linear-to-r from-[var(--zui-pagination-list-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-pagination-list-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.3))] to-[var(--zui-pagination-list-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-pagination-list-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.3))]\",\n} as const;\n\nexport const zuiPaginationListSizes = {\n  sm: \"gap-0.5\",\n  md: \"gap-1\",\n  lg: \"gap-1\",\n  xl: \"gap-1.5\",\n  \"2xl\": \"gap-1.5\",\n  \"3xl\": \"gap-2\",\n  \"4xl\": \"gap-2\",\n  \"5xl\": \"gap-2\",\n  \"6xl\": \"gap-2\",\n  \"7xl\": \"gap-2.5\",\n  \"8xl\": \"gap-2.5\",\n  \"9xl\": \"gap-2.5\",\n  \"10xl\": \"gap-3\",\n  icon: \"gap-1\",\n} as const;\n\nexport const zuiPaginationEllipsisBase =\n  \"inline-flex min-w-[2ch] select-none items-center justify-center px-1 font-medium text-[color:var(--zui-pagination-ellipsis-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-pagination-ellipsis-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiPaginationEllipsisSizes = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n  xl: \"text-base\",\n  \"2xl\": \"text-lg\",\n  \"3xl\": \"text-lg\",\n  \"4xl\": \"text-xl\",\n  \"5xl\": \"text-xl\",\n  \"6xl\": \"text-xl\",\n  \"7xl\": \"text-2xl\",\n  \"8xl\": \"text-2xl\",\n  \"9xl\": \"text-2xl\",\n  \"10xl\": \"text-2xl\",\n  icon: \"text-sm\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiPaginationEllipsisBase,\n  zuiPaginationEllipsisSizes,\n  zuiPaginationListAppearances,\n  zuiPaginationListBase,\n  zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n  variants: {\n    appearance: zuiPaginationListAppearances,\n    size: zuiPaginationListSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n  variants: {\n    size: zuiPaginationEllipsisSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n  className,\n  appearance = \"default\",\n  size = \"md\",\n  pageCount,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showPrevNext = true,\n  prevLabel = defaultPrevLabel,\n  nextLabel = defaultNextLabel,\n  ellipsisLabel = defaultEllipsisLabel,\n  getPageHref,\n  \"aria-label\": ariaLabel = \"Pagination\",\n  ref,\n  ...rest\n}: PaginationProps) => {\n  const id = useId();\n  const listId = `${id}-list`;\n\n  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n    usePagination({\n      pageCount,\n      page,\n      defaultPage,\n      siblingCount,\n      boundaryCount,\n      onPageChange,\n    });\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (pageCount <= 0) {\n        return;\n      }\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        event.preventDefault();\n        if (canGoNext) {\n          setPage(currentPage + 1);\n        }\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        if (canGoPrev) {\n          setPage(currentPage - 1);\n        }\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        setPage(1);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        setPage(pageCount);\n      }\n    },\n    [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n  );\n\n  if (pageCount <= 0) {\n    return null;\n  }\n\n  const inactiveTriggerClass = cn(\n    buttonVariants({ appearance: \"ghost\", size }),\n    \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n  );\n\n  const currentTriggerClass = buttonVariants({ appearance, size });\n\n  const triggerFocusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n  const renderPageControl = (pageNumber: number) => {\n    const isCurrent = pageNumber === currentPage;\n    const href = getPageHref?.(pageNumber);\n    const shared = cn(\n      isCurrent ? currentTriggerClass : inactiveTriggerClass,\n      \"min-w-[2.25ch] shrink-0\",\n      triggerFocusRing,\n    );\n\n    if (href) {\n      return (\n        <a\n          data-slot=\"pagination-trigger\"\n          href={href}\n          aria-label={`Page ${pageNumber}`}\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={shared}\n        >\n          {pageNumber}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"pagination-trigger\"\n        aria-label={`Page ${pageNumber}`}\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={shared}\n        onClick={() => {\n          if (!isCurrent) {\n            setPage(pageNumber);\n          }\n        }}\n      >\n        {pageNumber}\n      </button>\n    );\n  };\n\n  const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n  const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n  const navTriggerClass = cn(\n    buttonVariants({ appearance: \"outline\", size }),\n    \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  );\n\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"pagination\"\n      aria-label={ariaLabel}\n      className={cn(\"w-full\", className)}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {showPrevNext ? (\n          getPageHref && prevHref && canGoPrev ? (\n            <a\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              href={prevHref}\n              className={navTriggerClass}\n            >\n              Prev\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              disabled={!canGoPrev}\n              className={navTriggerClass}\n              onClick={goPrev}\n            >\n              Prev\n            </button>\n          )\n        ) : null}\n\n        <ul\n          id={listId}\n          data-slot=\"pagination-list\"\n          className={paginationListVariants({ appearance, size })}\n        >\n          {items.map((item) => (\n            <li\n              key={item.type === \"page\" ? `page-${item.value}` : item.key}\n              data-slot=\"pagination-item\"\n              className=\"inline-flex items-center\"\n            >\n              {item.type === \"ellipsis\" ? (\n                <span\n                  data-slot=\"pagination-ellipsis\"\n                  className={paginationEllipsisVariants({ size })}\n                  role=\"img\"\n                  aria-label={ellipsisLabel}\n                >\n                  …\n                </span>\n              ) : (\n                renderPageControl(item.value)\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {showPrevNext ? (\n          getPageHref && nextHref && canGoNext ? (\n            <a\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              href={nextHref}\n              className={navTriggerClass}\n            >\n              Next\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              disabled={!canGoNext}\n              className={navTriggerClass}\n              onClick={goNext}\n            >\n              Next\n            </button>\n          )\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nPagination.displayName = \"Pagination\";\n"]}