@choice-ui/react 1.3.10

package/dist/esm/components/numeric-input/src/utils/input-parser.js

@@ -0,0 +1,37 @@
+import { evaluate } from "./expression-evaluator.js";
+function parseInputValue(input) {
+  let values = [];
+  let isInputNumber = false;
+  let isObjectNumber = false;
+  try {
+    if (typeof input === "string" || typeof input === "number") {
+      values = String(input).split(",").map((char) => evaluate(char));
+      isInputNumber = values.length > 0;
+    } else if (Array.isArray(input)) {
+      values = input.map((item) => evaluate(String(item)));
+      isInputNumber = values.length > 0;
+    } else if (typeof input === "object" && input !== null) {
+      isObjectNumber = true;
+    }
+  } catch (_error) {
+  }
+  return { values, isInputNumber, isObjectNumber };
+}
+function extractValuesFromString(input, regex, keys) {
+  const match = input.match(regex);
+  if (!match) return null;
+  const result = {};
+  keys.forEach((key, index) => {
+    try {
+      const value = evaluate(match[index + 1] ?? match[1]);
+      result[key] = value;
+    } catch (error) {
+      result[key] = 0;
+    }
+  });
+  return result;
+}
+export {
+  extractValuesFromString,
+  parseInputValue
+};

package/dist/esm/components/numeric-input/src/utils/numeric-value-processor.js

@@ -0,0 +1,60 @@
+import { parseInputValue, extractValuesFromString } from "./input-parser.js";
+import { parsePattern, formatResult } from "./pattern-parser.js";
+import { applyTransform, applyConstraintsToValues } from "./value-processor.js";
+const dealWithNumericValueCatch = (options) => {
+  try {
+    return dealWithNumericInputValue(options);
+  } catch (_error) {
+    return void 0;
+  }
+};
+const dealWithNumericInputValue = ({
+  input,
+  pattern,
+  call,
+  max = Infinity,
+  min = -Infinity,
+  decimal = 2
+}) => {
+  const { keys, regex } = parsePattern(pattern);
+  const { values, isInputNumber, isObjectNumber } = parseInputValue(input);
+  const result = {};
+  if (typeof input === "string" && input.match(regex) && !isInputNumber && !isObjectNumber) {
+    const extractedValues = extractValuesFromString(input, regex, keys);
+    if (extractedValues) {
+      Object.assign(result, extractedValues);
+    }
+  } else if (isInputNumber) {
+    keys.forEach((key, index) => {
+      result[key] = values[index] ?? values[0];
+    });
+  } else if (isObjectNumber) {
+    const objInput = input;
+    Object.keys(objInput).forEach((key) => {
+      if (typeof objInput[key] === "number") {
+        result[key] = objInput[key];
+      }
+    });
+    keys.forEach((key) => {
+      if (result[key] === void 0) {
+        result[key] = 0;
+      }
+    });
+  } else {
+    throw new Error(`Invalid input: ${input}`);
+  }
+  if (call) {
+    applyTransform(result, call);
+  }
+  applyConstraintsToValues(result, min, max, decimal);
+  const resStr = formatResult(pattern, result);
+  return {
+    array: Object.values(result),
+    string: resStr,
+    object: result
+  };
+};
+export {
+  dealWithNumericInputValue,
+  dealWithNumericValueCatch
+};

package/dist/esm/components/numeric-input/src/utils/pattern-parser.js

@@ -0,0 +1,20 @@
+function parsePattern(pattern) {
+  const keys = [];
+  const regexPattern = pattern.replace(/[\s]*\{([\w|,]+)\}[\s]*/g, (_match, key) => {
+    const keyArr = key.split(",");
+    keys.push(keyArr[0]);
+    return "(.+)";
+  });
+  const regex = new RegExp(`^${regexPattern}$`);
+  return { keys, regexPattern, regex };
+}
+function formatResult(pattern, result) {
+  return pattern.replace(/\{([\w|,]+)\}/g, (_match, key) => {
+    const keyArr = key.split(",");
+    return keyArr[1] === "hidden" ? "" : String(result[keyArr[0]]);
+  });
+}
+export {
+  formatResult,
+  parsePattern
+};

package/dist/esm/components/numeric-input/src/utils/value-comparator.js

@@ -0,0 +1,32 @@
+function compareNumericArrays(array1, array2) {
+  if (!(array1 == null ? void 0 : array1.length) && !(array2 == null ? void 0 : array2.length)) return true;
+  if (!(array1 == null ? void 0 : array1.length) || !(array2 == null ? void 0 : array2.length)) return false;
+  if (array1.length !== array2.length) return false;
+  return array1.every(
+    (value, index) => value !== void 0 && array2[index] !== void 0 && value === array2[index]
+  );
+}
+function compareNumericObjects(object1, object2) {
+  if (!object1 && !object2) return true;
+  if (!object1 || !object2) return false;
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) return false;
+  return keys1.every((key) => object1[key] === object2[key]);
+}
+function compareNumberResults(result1, result2) {
+  if (!result1 && !result2) return true;
+  if (!result1 || !result2) return false;
+  const isSameArray = compareNumericArrays(result1.array, result2.array);
+  const isSameObject = compareNumericObjects(result1.object, result2.object);
+  return isSameArray || isSameObject;
+}
+function isExpressionInput(displayValue, processedValue) {
+  return displayValue !== processedValue.string;
+}
+export {
+  compareNumberResults,
+  compareNumericArrays,
+  compareNumericObjects,
+  isExpressionInput
+};

package/dist/esm/components/numeric-input/src/utils/value-processor.js

@@ -0,0 +1,20 @@
+function applyConstraints(value, min = -Infinity, max = Infinity, decimal = 2) {
+  const roundedValue = parseFloat(value.toFixed(decimal));
+  return Math.min(Math.max(roundedValue, min), max);
+}
+function applyConstraintsToValues(values, min = -Infinity, max = Infinity, decimal = 2) {
+  for (const key in values) {
+    values[key] = applyConstraints(values[key], min, max, decimal);
+  }
+}
+function applyTransform(values, transformFn) {
+  if (!transformFn) return;
+  for (const key in values) {
+    values[key] = transformFn(values[key]);
+  }
+}
+export {
+  applyConstraints,
+  applyConstraintsToValues,
+  applyTransform
+};

package/dist/esm/components/pagination/src/components/pagination-context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const PaginationContext = createContext(null);
+function usePaginationContext() {
+  const context = useContext(PaginationContext);
+  if (!context) {
+    throw new Error("Pagination components must be used within a Pagination.Root");
+  }
+  return context;
+}
+export {
+  PaginationContext,
+  usePaginationContext
+};

package/dist/esm/components/pagination/src/components/pagination-items-per-page.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { Segmented } from "../../../segmented/dist/index.js";
+import { forwardRef } from "react";
+import { usePaginationContext } from "./pagination-context.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const PaginationItemsPerPage = forwardRef(
+  (props, ref) => {
+    const { className, options, asChild, children, ...rest } = props;
+    const {
+      itemsPerPage,
+      handleItemsPerPageChange,
+      pageSizeOptions: contextOptions,
+      showPageSizeSelector,
+      disabled
+    } = usePaginationContext();
+    const sizeOptions = options || contextOptions;
+    if (!showPageSizeSelector) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx("flex items-center gap-2", className),
+        ...rest,
+        children: asChild ? children == null ? void 0 : children(itemsPerPage.toString(), handleItemsPerPageChange, disabled) : /* @__PURE__ */ jsx(
+          Segmented,
+          {
+            value: itemsPerPage.toString(),
+            onChange: handleItemsPerPageChange,
+            disabled,
+            children: sizeOptions.map((option) => /* @__PURE__ */ jsx(
+              Segmented.Item,
+              {
+                value: option.toString(),
+                className: "px-2",
+                children: option
+              },
+              option
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+PaginationItemsPerPage.displayName = "Pagination.ItemsPerPage";
+export {
+  PaginationItemsPerPage
+};

package/dist/esm/components/pagination/src/components/pagination-navigation.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "../../../button/dist/index.js";
+import { EllipsisSmall } from "@choiceform/icons-react";
+import { forwardRef } from "react";
+import { paginationTv } from "../tv.js";
+import { usePaginationContext } from "./pagination-context.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const PaginationNavigation = forwardRef(
+  (props, ref) => {
+    const { className, variant = (isActive) => isActive ? "solid" : "ghost", ...rest } = props;
+    const { currentPage, pageNumbers, handlePageChange, labels, disabled, loading } = usePaginationContext();
+    const styles = paginationTv();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(styles.pages(), className),
+        ...rest,
+        children: pageNumbers.map((pageNumber, index) => {
+          if (pageNumber === "ellipsis") {
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.ellipsis(),
+                children: /* @__PURE__ */ jsx(EllipsisSmall, {})
+              },
+              `ellipsis-${index}`
+            );
+          }
+          const isActive = pageNumber === currentPage;
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: variant(isActive),
+              disabled,
+              loading: currentPage === pageNumber && loading,
+              onClick: () => handlePageChange(pageNumber),
+              "aria-label": `${labels.page} ${pageNumber}`,
+              "aria-current": isActive ? "page" : void 0,
+              className: styles.pageButton({ active: isActive }),
+              children: pageNumber
+            },
+            pageNumber
+          );
+        })
+      }
+    );
+  }
+);
+PaginationNavigation.displayName = "Pagination.Navigation";
+export {
+  PaginationNavigation
+};

package/dist/esm/components/pagination/src/components/pagination-root.js

@@ -0,0 +1,78 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { paginationTv } from "../tv.js";
+import { PaginationContext } from "./pagination-context.js";
+import { getDefaultLabels } from "../utils/pagination-helpers.js";
+import { usePagination } from "../hooks/use-pagination.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const PaginationRoot = forwardRef((props, ref) => {
+  const {
+    className,
+    currentPage,
+    totalItems,
+    itemsPerPage = 10,
+    onPageChange,
+    onItemsPerPageChange,
+    maxPageButtons = 7,
+    showPageSizeSelector = true,
+    pageSizeOptions = [10, 20, 30, 50, 100],
+    labels = {},
+    loading = false,
+    disabled = false,
+    children,
+    ...rest
+  } = props;
+  const defaultLabels = getDefaultLabels(labels);
+  const {
+    totalPages,
+    startItem,
+    endItem,
+    pageNumbers,
+    handlePageChange,
+    handleItemsPerPageChange,
+    handlePageJump
+  } = usePagination({
+    currentPage,
+    totalItems,
+    itemsPerPage,
+    maxPageButtons,
+    onPageChange,
+    onItemsPerPageChange,
+    disabled
+  });
+  const styles = paginationTv();
+  if (totalItems === 0) {
+    return null;
+  }
+  const contextValue = {
+    currentPage,
+    totalItems,
+    itemsPerPage,
+    totalPages,
+    startItem,
+    endItem,
+    pageNumbers,
+    handlePageChange,
+    handleItemsPerPageChange,
+    handlePageJump,
+    maxPageButtons,
+    showPageSizeSelector,
+    pageSizeOptions,
+    labels: defaultLabels,
+    disabled,
+    loading
+  };
+  return /* @__PURE__ */ jsx(PaginationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: tcx(styles.root(), className),
+      ...rest,
+      children
+    }
+  ) });
+});
+PaginationRoot.displayName = "Pagination.Root";
+export {
+  PaginationRoot
+};

package/dist/esm/components/pagination/src/components/pagination-spinner.js

@@ -0,0 +1,148 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "../../../button/dist/index.js";
+import { ChevronLeftMedium, ChevronRightMedium } from "@choiceform/icons-react";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { useOnClickOutside, useEventCallback } from "usehooks-ts";
+import { paginationSpinnerTv } from "../tv.js";
+import { usePaginationContext } from "./pagination-context.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const PaginationSpinner = forwardRef(
+  (props, ref) => {
+    const { className, ...rest } = props;
+    const [inputValue, setInputValue] = useState("");
+    const [isEditing, setIsEditing] = useState(false);
+    const inputWrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    useOnClickOutside(inputWrapperRef, () => {
+      var _a;
+      if (isEditing) {
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      }
+    });
+    const { currentPage, totalPages, handlePageChange, disabled } = usePaginationContext();
+    const styles = paginationSpinnerTv();
+    useEffect(() => {
+      if (isEditing) {
+        setInputValue(currentPage.toString());
+      }
+    }, [isEditing, currentPage]);
+    useEffect(() => {
+      if (isEditing && inputRef.current) {
+        inputRef.current.focus();
+        try {
+          const timer = setTimeout(() => {
+            if (inputRef.current && inputRef.current.setSelectionRange) {
+              inputRef.current.setSelectionRange(0, inputRef.current.value.length);
+            }
+          }, 0);
+          return () => clearTimeout(timer);
+        } catch (e) {
+        }
+      }
+    }, [isEditing]);
+    const handleInputChange = useEventCallback((e) => {
+      setInputValue(e.target.value);
+    });
+    const submitPageChange = useEventCallback(() => {
+      const page = parseInt(inputValue, 10);
+      if (!isNaN(page) && page >= 1 && page <= totalPages && page !== currentPage) {
+        handlePageChange(page);
+      }
+      setIsEditing(false);
+      setInputValue("");
+    });
+    const handleInputKeyDown = useEventCallback((e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        submitPageChange();
+      } else if (e.key === "Escape") {
+        setIsEditing(false);
+        setInputValue("");
+      }
+    });
+    const handleInputBlur = useEventCallback(() => {
+      submitPageChange();
+    });
+    const handlePrevious = useEventCallback(() => {
+      if (currentPage > 1) {
+        handlePageChange(currentPage - 1);
+      }
+    });
+    const handleNext = useEventCallback(() => {
+      if (currentPage < totalPages) {
+        handlePageChange(currentPage + 1);
+      }
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: tcx(styles.spinner(), className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "solid",
+              disabled: currentPage === 1 || disabled,
+              onClick: handlePrevious,
+              "aria-label": "Previous page",
+              className: styles.button({ position: "left" }),
+              children: /* @__PURE__ */ jsx(ChevronLeftMedium, {})
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: inputWrapperRef,
+              className: styles.inputWrapper(),
+              onClick: () => {
+                if (!isEditing) {
+                  setIsEditing(true);
+                }
+              },
+              children: [
+                isEditing ? /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    value: inputValue,
+                    onChange: handleInputChange,
+                    onBlur: handleInputBlur,
+                    onKeyDown: handleInputKeyDown,
+                    onFocus: (e) => e.target.select(),
+                    type: "number",
+                    min: 1,
+                    max: totalPages,
+                    disabled,
+                    className: styles.input(),
+                    autoFocus: true
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: tcx(styles.currentPage()), children: currentPage }),
+                /* @__PURE__ */ jsxs("span", { className: styles.label(), children: [
+                  "/ ",
+                  totalPages
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "solid",
+              disabled: currentPage === totalPages || disabled,
+              onClick: handleNext,
+              "aria-label": "Next page",
+              className: styles.button({ position: "right" }),
+              children: /* @__PURE__ */ jsx(ChevronRightMedium, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PaginationSpinner.displayName = "Pagination.Spinner";
+export {
+  PaginationSpinner
+};

package/dist/esm/components/pagination/src/hooks/use-pagination.js

@@ -0,0 +1,86 @@
+import { useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+function usePagination({
+  currentPage,
+  totalItems,
+  itemsPerPage,
+  maxPageButtons,
+  onPageChange,
+  onItemsPerPageChange,
+  disabled
+}) {
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+  const pageNumbers = useMemo(() => {
+    const pages = [];
+    if (totalPages <= maxPageButtons) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      const leftSiblingIndex = Math.max(currentPage - 1, 1);
+      const rightSiblingIndex = Math.min(currentPage + 1, totalPages);
+      const shouldShowLeftDots = leftSiblingIndex > 2;
+      const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+      const firstPageIndex = 1;
+      const lastPageIndex = totalPages;
+      if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftItemCount = 3 + 2;
+        const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+        pages.push(...leftRange, "ellipsis", lastPageIndex);
+      } else if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightItemCount = 3 + 2;
+        const rightRange = Array.from(
+          { length: rightItemCount },
+          (_, i) => totalPages - rightItemCount + i + 1
+        );
+        pages.push(firstPageIndex, "ellipsis", ...rightRange);
+      } else if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = [leftSiblingIndex, currentPage, rightSiblingIndex];
+        pages.push(firstPageIndex, "ellipsis", ...middleRange, "ellipsis", lastPageIndex);
+      } else {
+        for (let i = 1; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      }
+    }
+    return pages;
+  }, [currentPage, totalPages, maxPageButtons]);
+  const handlePageChange = useEventCallback((page) => {
+    if (page < 1 || page > totalPages || page === currentPage || disabled) return;
+    onPageChange == null ? void 0 : onPageChange(page);
+  });
+  const handleItemsPerPageChange = useEventCallback((value) => {
+    const newItemsPerPage = parseInt(value, 10);
+    if (isNaN(newItemsPerPage) || disabled) return;
+    const currentFirstItem = (currentPage - 1) * itemsPerPage + 1;
+    const newPage = Math.ceil(currentFirstItem / newItemsPerPage);
+    onItemsPerPageChange == null ? void 0 : onItemsPerPageChange(newItemsPerPage);
+    if (newPage !== currentPage) {
+      onPageChange == null ? void 0 : onPageChange(newPage);
+    }
+  });
+  const handlePageJump = useEventCallback((e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const pageValue = formData.get("page");
+    const page = parseInt(pageValue, 10);
+    if (!isNaN(page) && page >= 1 && page <= totalPages) {
+      handlePageChange(page);
+      e.currentTarget.reset();
+    }
+  });
+  return {
+    totalPages,
+    startItem,
+    endItem,
+    pageNumbers,
+    handlePageChange,
+    handleItemsPerPageChange,
+    handlePageJump
+  };
+}
+export {
+  usePagination
+};

package/dist/esm/components/pagination/src/pagination.js

@@ -0,0 +1,13 @@
+import { PaginationRoot } from "./components/pagination-root.js";
+import { PaginationItemsPerPage } from "./components/pagination-items-per-page.js";
+import { PaginationNavigation } from "./components/pagination-navigation.js";
+import { PaginationSpinner } from "./components/pagination-spinner.js";
+const Pagination = Object.assign(PaginationRoot, {
+  Root: PaginationRoot,
+  Spinner: PaginationSpinner,
+  Navigation: PaginationNavigation,
+  ItemsPerPage: PaginationItemsPerPage
+});
+export {
+  Pagination
+};

package/dist/esm/components/pagination/src/tv.js

@@ -0,0 +1,47 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const paginationTv = tcv({
+  slots: {
+    root: ["flex items-center gap-3 select-none", "text-secondary-foreground"],
+    navigation: ["flex items-center gap-1"],
+    pages: ["flex items-center gap-1"],
+    button: ["transition-colors"],
+    pageButton: "min-w-6 px-0",
+    ellipsis: ["flex items-center justify-center", "px-2 text-secondary-foreground"]
+  },
+  variants: {
+    active: {
+      true: {}
+    }
+  }
+});
+const paginationSpinnerTv = tcv({
+  slots: {
+    spinner: ["flex items-center gap-0.5 text-body-medium"],
+    button: ["p-1 disabled:bg-secondary-background"],
+    inputWrapper: [
+      "flex items-center justify-center gap-1",
+      "bg-secondary-background h-6 px-2 relative cursor-text min-w-14",
+      "border border-transparent focus-within:border-selected-boundary"
+    ],
+    input: [
+      "absolute inset-0 appearance-none",
+      "w-full bg-secondary-background text-default-foreground text-center outline-none"
+    ],
+    currentPage: ["text-default-foreground"],
+    label: ["text-secondary-foreground"]
+  },
+  variants: {
+    position: {
+      left: {
+        button: "rounded-r-none"
+      },
+      right: {
+        button: "rounded-l-none"
+      }
+    }
+  }
+});
+export {
+  paginationSpinnerTv,
+  paginationTv
+};

package/dist/esm/components/pagination/src/utils/pagination-helpers.js

@@ -0,0 +1,9 @@
+function getDefaultLabels(customLabels) {
+  return {
+    page: "Page",
+    ...customLabels
+  };
+}
+export {
+  getDefaultLabels
+};