@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/pagination.mjs

@@ -0,0 +1,297 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { focusRingCompactClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+const paginationButtonVariants = cva(
+  [
+    // Layout
+    "inline-flex items-center justify-center",
+    // Shape
+    "rounded-md",
+    // Typography
+    "font-medium tabular-nums",
+    // Transitions
+    "transition-colors duration-fast",
+    // Focus
+    focusRingCompactClasses,
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-40",
+    // Cursor
+    "cursor-pointer",
+    "select-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-7 min-w-7 px-1.5 text-xs gap-1",
+        md: "h-9 min-w-9 px-2 text-sm gap-1.5"
+      },
+      active: {
+        true: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        false: "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      active: false
+    }
+  }
+);
+function computePageRange(currentPage, totalPages, siblings, boundary) {
+  const pages = /* @__PURE__ */ new Set();
+  for (let i = 1; i <= Math.min(boundary, totalPages); i++) {
+    pages.add(i);
+  }
+  for (let i = Math.max(1, totalPages - boundary + 1); i <= totalPages; i++) {
+    pages.add(i);
+  }
+  for (let i = Math.max(1, currentPage - siblings); i <= Math.min(totalPages, currentPage + siblings); i++) {
+    pages.add(i);
+  }
+  const sorted = Array.from(pages).sort((a, b) => a - b);
+  const items = [];
+  for (let i = 0; i < sorted.length; i++) {
+    const page = sorted[i];
+    if (i > 0 && page - sorted[i - 1] > 1) {
+      items.push({
+        type: "ellipsis",
+        key: `ellipsis-${sorted[i - 1]}-${page}`
+      });
+    }
+    items.push({ type: "page", value: page });
+  }
+  return items;
+}
+const iconSizeMap = {
+  sm: "size-3.5",
+  md: "size-4"
+};
+const ellipsisSizeMap = {
+  sm: "h-7 min-w-7 text-xs",
+  md: "h-9 min-w-9 text-sm"
+};
+const Pagination = forwardRef(
+  function Pagination2({
+    totalPages,
+    page: controlledPage,
+    defaultPage = 1,
+    onPageChange,
+    variant = "default",
+    size = "md",
+    siblings = 1,
+    boundary = 1,
+    showPrevNext = true,
+    prevLabel = "Previous",
+    nextLabel = "Next",
+    "aria-label": ariaLabel = "Pagination",
+    className,
+    ...rest
+  }, ref) {
+    const [internalPage, setInternalPage] = useState(defaultPage);
+    const isControlled = controlledPage !== void 0;
+    const currentPage = Math.max(
+      1,
+      Math.min(isControlled ? controlledPage : internalPage, totalPages)
+    );
+    const handlePageChange = useCallback(
+      (newPage) => {
+        const clamped = Math.max(1, Math.min(newPage, totalPages));
+        if (!isControlled) {
+          setInternalPage(clamped);
+        }
+        onPageChange?.(clamped);
+      },
+      [isControlled, totalPages, onPageChange]
+    );
+    const isFirstPage = currentPage === 1;
+    const isLastPage = currentPage === totalPages;
+    const pageItems = useMemo(
+      () => variant === "default" ? computePageRange(currentPage, totalPages, siblings, boundary) : [],
+      [variant, currentPage, totalPages, siblings, boundary]
+    );
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          ref,
+          "aria-label": ariaLabel,
+          className: cn("inline-flex items-center gap-1", className),
+          "data-ds": "",
+          "data-ds-component": "pagination",
+          "data-ds-variant": "compact",
+          "data-ds-size": size,
+          ...rest,
+          children: [
+            showPrevNext && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: isFirstPage,
+                onClick: () => handlePageChange(currentPage - 1),
+                className: cn(
+                  paginationButtonVariants({
+                    size,
+                    active: false
+                  })
+                ),
+                "aria-label": prevLabel,
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: iconSizeMap[size] })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center justify-center px-3",
+                  "text-foreground font-medium tabular-nums",
+                  size === "sm" ? "text-xs" : "text-sm"
+                ),
+                children: [
+                  "Page ",
+                  currentPage,
+                  " of ",
+                  totalPages
+                ]
+              }
+            ),
+            showPrevNext && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: isLastPage,
+                onClick: () => handlePageChange(currentPage + 1),
+                className: cn(
+                  paginationButtonVariants({
+                    size,
+                    active: false
+                  })
+                ),
+                "aria-label": nextLabel,
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: iconSizeMap[size] })
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: cn("inline-flex items-center gap-1", className),
+        "data-ds": "",
+        "data-ds-component": "pagination",
+        "data-ds-variant": "default",
+        "data-ds-size": size,
+        ...rest,
+        children: [
+          showPrevNext && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: isFirstPage,
+              onClick: () => handlePageChange(currentPage - 1),
+              className: cn(paginationButtonVariants({ size, active: false })),
+              "aria-label": prevLabel,
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeftIcon, { className: iconSizeMap[size] }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only sm:not-sr-only", children: prevLabel })
+              ]
+            }
+          ),
+          pageItems.map((item) => {
+            if (item.type === "ellipsis") {
+              return /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex items-center justify-center",
+                    "text-muted-foreground select-none",
+                    ellipsisSizeMap[size]
+                  ),
+                  "aria-hidden": "true",
+                  children: "\u2026"
+                },
+                item.key
+              );
+            }
+            const isActive = item.value === currentPage;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handlePageChange(item.value),
+                className: cn(
+                  paginationButtonVariants({
+                    size,
+                    active: isActive
+                  })
+                ),
+                "aria-current": isActive ? "page" : void 0,
+                "aria-label": `Page ${item.value}`,
+                children: item.value
+              },
+              item.value
+            );
+          }),
+          showPrevNext && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: isLastPage,
+              onClick: () => handlePageChange(currentPage + 1),
+              className: cn(paginationButtonVariants({ size, active: false })),
+              "aria-label": nextLabel,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only sm:not-sr-only", children: nextLabel }),
+                /* @__PURE__ */ jsx(ChevronRightIcon, { className: iconSizeMap[size] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+export {
+  Pagination,
+  paginationButtonVariants
+};

package/dist/components/pin-input.cjs

@@ -0,0 +1,321 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pin_input_exports = {};
+__export(pin_input_exports, {
+  PinInput: () => PinInput,
+  pinCellVariants: () => pinCellVariants
+});
+module.exports = __toCommonJS(pin_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index");
+var import_cn = require("../utils/cn");
+var import_class_variance_authority = require("class-variance-authority");
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
+const pinCellVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Layout
+    "inline-flex items-center justify-center shrink-0",
+    "rounded-md border bg-background",
+    // Typography
+    "text-center font-semibold tabular-nums leading-none",
+    // Transition
+    "transition-[border-color,box-shadow,background-color] duration-fast",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Cursor
+    "cursor-text",
+    // Remove native input styling
+    "outline-none appearance-none",
+    // Selection
+    "select-none",
+    // Hide caret — we use a custom one
+    "caret-transparent"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-input",
+          "focus:border-ring focus:ring-2 focus:ring-ring/20"
+        ],
+        primary: [
+          "border-primary/40",
+          "focus:border-primary focus:ring-2 focus:ring-primary/20"
+        ]
+      },
+      size: {
+        sm: "w-8 h-10 text-base",
+        md: "w-10 h-12 text-lg",
+        lg: "w-12 h-14 text-xl"
+      },
+      state: {
+        empty: "",
+        filled: "bg-accent/30",
+        active: "",
+        error: "border-danger focus:border-danger focus:ring-danger/20",
+        success: "border-success focus:border-success focus:ring-success/20"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      state: "empty"
+    }
+  }
+);
+const allowedPatterns = {
+  numeric: /^[0-9]$/,
+  alphanumeric: /^[a-zA-Z0-9]$/,
+  alphabetic: /^[a-zA-Z]$/
+};
+const MASK_CHAR = "\u2022";
+const PinInput = (0, import_react.forwardRef)(
+  function PinInput2({
+    length = 6,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    onComplete,
+    onClear,
+    type = "numeric",
+    variant = "default",
+    size = "md",
+    mask = false,
+    error = false,
+    success = false,
+    disabled = false,
+    "aria-label": ariaLabel = "PIN Input",
+    autoFocus = false,
+    gap = "gap-2",
+    className
+  }, ref) {
+    const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+    const [internalValue, setInternalValue] = (0, import_react.useState)(() => {
+      const initial = defaultValue ?? controlledValue ?? [];
+      return Array.from({ length }, (_, i) => initial[i] ?? "");
+    });
+    const cells = controlledValue !== void 0 ? Array.from({ length }, (_, i) => controlledValue[i] ?? "") : internalValue;
+    const [animatedIndex, setAnimatedIndex] = (0, import_react.useState)(null);
+    const [shakeKey, setShakeKey] = (0, import_react.useState)(0);
+    const inputRefs = (0, import_react.useRef)([]);
+    const containerRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(ref, () => containerRef.current);
+    (0, import_react.useEffect)(() => {
+      if (autoFocus) {
+        inputRefs.current[0]?.focus();
+      }
+    }, [autoFocus]);
+    const prevErrorRef = (0, import_react.useRef)(error);
+    (0, import_react.useEffect)(() => {
+      if (error && !prevErrorRef.current) {
+        setShakeKey((k) => k + 1);
+      }
+      prevErrorRef.current = error;
+    }, [error]);
+    const commit = (0, import_react.useCallback)(
+      (newCells) => {
+        if (controlledValue === void 0) {
+          setInternalValue(newCells);
+        }
+        onChange?.(newCells);
+        const allFilled = newCells.every((c) => c.length === 1);
+        if (allFilled) {
+          onComplete?.(newCells.join(""));
+        }
+      },
+      [controlledValue, onChange, onComplete]
+    );
+    const handleKeyDown = (0, import_react.useCallback)(
+      (e, index) => {
+        const pattern = allowedPatterns[type];
+        if (e.key === "Backspace") {
+          e.preventDefault();
+          const newCells = [...cells];
+          if (newCells[index]) {
+            newCells[index] = "";
+            commit(newCells);
+          } else if (index > 0) {
+            newCells[index - 1] = "";
+            commit(newCells);
+            inputRefs.current[index - 1]?.focus();
+          } else {
+            const cleared = Array.from({ length }, () => "");
+            commit(cleared);
+            onClear?.();
+          }
+          return;
+        }
+        if (e.key === "Delete") {
+          e.preventDefault();
+          const newCells = [...cells];
+          newCells[index] = "";
+          commit(newCells);
+          return;
+        }
+        if (e.key === "ArrowLeft" && index > 0) {
+          e.preventDefault();
+          inputRefs.current[index - 1]?.focus();
+          return;
+        }
+        if (e.key === "ArrowRight" && index < length - 1) {
+          e.preventDefault();
+          inputRefs.current[index + 1]?.focus();
+          return;
+        }
+        if (e.key === "Home") {
+          e.preventDefault();
+          inputRefs.current[0]?.focus();
+          return;
+        }
+        if (e.key === "End") {
+          e.preventDefault();
+          inputRefs.current[length - 1]?.focus();
+          return;
+        }
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+          e.preventDefault();
+          const char = e.key.toUpperCase();
+          if (!pattern.test(type === "numeric" ? e.key : char)) return;
+          const newCells = [...cells];
+          newCells[index] = type === "numeric" ? e.key : char;
+          commit(newCells);
+          setAnimatedIndex(index);
+          setTimeout(() => setAnimatedIndex(null), 400);
+          if (index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+          }
+        }
+      },
+      [cells, commit, length, type, onClear]
+    );
+    const handlePaste = (0, import_react.useCallback)(
+      (e, startIndex) => {
+        e.preventDefault();
+        const raw = e.clipboardData.getData("text");
+        const pattern = allowedPatterns[type];
+        const chars = raw.split("").filter((c) => pattern.test(type === "numeric" ? c : c.toUpperCase())).map((c) => type === "numeric" ? c : c.toUpperCase());
+        if (chars.length === 0) return;
+        const newCells = [...cells];
+        let lastFilled = startIndex;
+        for (let i = 0; i < chars.length && startIndex + i < length; i++) {
+          newCells[startIndex + i] = chars[i];
+          lastFilled = startIndex + i;
+        }
+        commit(newCells);
+        const focusTarget = Math.min(lastFilled + 1, length - 1);
+        inputRefs.current[focusTarget]?.focus();
+      },
+      [cells, commit, length, type]
+    );
+    const handleClick = (0, import_react.useCallback)(
+      (index) => {
+        const firstEmpty = cells.findIndex((c) => !c);
+        if (firstEmpty !== -1 && firstEmpty < index) {
+          inputRefs.current[firstEmpty]?.focus();
+        } else {
+          inputRefs.current[index]?.focus();
+        }
+      },
+      [cells]
+    );
+    const containerState = error ? "error" : success ? "success" : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        ref: containerRef,
+        className: (0, import_cn.cn)("inline-flex", gap, className),
+        variants: import_motion.shakeX.variants,
+        initial: shakeKey === 0 ? false : "initial",
+        animate: shakeKey > 0 ? "animate" : "initial",
+        transition: import_motion.shakeX.transition,
+        "aria-label": ariaLabel,
+        "data-ds": "",
+        "data-ds-component": "pin-input",
+        "data-ds-variant": variant,
+        "data-ds-size": size,
+        "data-ds-animated": "",
+        children: Array.from({ length }, (_, index) => {
+          const cellValue = cells[index] ?? "";
+          const isFilled = cellValue.length === 1;
+          const cellState = containerState ?? (isFilled ? "filled" : "empty");
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: animatedIndex === index && isFilled && !shouldReduce && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_framer_motion.motion.div,
+              {
+                className: "absolute inset-0 rounded-md bg-primary/15 pointer-events-none",
+                variants: import_motion.pop.variants,
+                initial: "initial",
+                animate: "animate",
+                exit: "exit",
+                transition: import_motion.pop.transition,
+                "data-ds-animated": ""
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                ref: (el) => {
+                  inputRefs.current[index] = el;
+                },
+                type: mask ? "password" : "text",
+                inputMode: type === "numeric" ? "numeric" : "text",
+                pattern: type === "numeric" ? "[0-9]*" : type === "alphabetic" ? "[a-zA-Z]*" : "[a-zA-Z0-9]*",
+                maxLength: 1,
+                value: mask && isFilled ? MASK_CHAR : cellValue,
+                readOnly: true,
+                autoComplete: index === 0 ? "one-time-code" : "off",
+                autoCorrect: "off",
+                autoCapitalize: "none",
+                spellCheck: false,
+                disabled,
+                onClick: () => handleClick(index),
+                onKeyDown: (e) => handleKeyDown(e, index),
+                onPaste: (e) => handlePaste(e, index),
+                onChange: () => {
+                },
+                className: (0, import_cn.cn)(
+                  pinCellVariants({
+                    variant,
+                    size,
+                    state: cellState
+                  }),
+                  // Override focus ring with our variant-specific ring
+                  "focus:outline-none"
+                ),
+                "aria-label": `Digit ${index + 1} of ${length}`,
+                "aria-invalid": error ? "true" : void 0,
+                "data-ds-cell-index": index,
+                "data-ds-filled": isFilled ? "" : void 0
+              }
+            )
+          ] }, index);
+        })
+      },
+      shakeKey
+    );
+  }
+);
+PinInput.displayName = "PinInput";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PinInput,
+  pinCellVariants
+});