@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-M6ZPTGBV.mjs → chunk-XAYOEQGB.mjs}

@@ -1,9 +1,9 @@
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/Pagination.tsx
-import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useState, useCallback, useEffect, useMemo, useRef, useId } from "react";
 import {
   classNames,
   getTotalPages,
@@ -11,6 +11,13 @@ import {
   validateCurrentPage,
   getPageNumbers,
   formatPaginationTotal,
+  formatPaginationPageIndicator,
+  normalizePaginationTotal,
+  normalizePaginationPageSize,
+  resolvePageSizeOptions,
+  getQuickJumperPrefixClasses,
+  chevronLeftSolidIcon20PathD,
+  icon20ViewBox,
   getPaginationContainerClasses,
   getPaginationButtonBaseClasses,
   getPaginationEllipsisClasses,
@@ -20,7 +27,6 @@ import {
   getSizeTextClasses,
   getPaginationLabels,
   getLocaleDirection,
-  formatPageAriaLabel,
   createPaginationIdleValidationScheduler,
   getImmediateTigerLocale,
   getPaginationJumperPage,
@@ -57,7 +63,8 @@ var Pagination = ({
   labels: labelsOverride,
   ...props
 }) => {
-  const { "aria-label": ariaLabelProp, ...navProps } = props;
+  const { "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledbyProp, ...navProps } = props;
+  const jumperId = useId();
   const config = useTigerConfig();
   const immediateLocale = useMemo(() => getImmediateTigerLocale(locale), [locale]);
   const [loadedLocale, setLoadedLocale] = useState(
@@ -102,26 +109,28 @@ var Pagination = ({
     };
   }, [quickJumperValidation]);
   const currentPage = controlledCurrent !== void 0 ? controlledCurrent : internalCurrent;
-  const currentPageSize = controlledPageSize !== void 0 ? controlledPageSize : internalPageSize;
-  const totalPages = getTotalPages(total, currentPageSize);
+  const rawPageSize = controlledPageSize !== void 0 ? controlledPageSize : internalPageSize;
+  const currentPageSize = normalizePaginationPageSize(rawPageSize);
+  const itemTotal = normalizePaginationTotal(total);
+  const totalPages = getTotalPages(itemTotal, currentPageSize);
   const validatedCurrentPage = validateCurrentPage(currentPage, totalPages);
-  const pageRange = getPageRange(validatedCurrentPage, currentPageSize, total);
+  const pageRange = getPageRange(validatedCurrentPage, currentPageSize, itemTotal);
   const handlePageChange = useCallback(
     (page) => {
       if (disabled) return;
-      if (page === validatedCurrentPage) return;
-      if (page < 1 || page > totalPages) return;
+      const next = validateCurrentPage(page, totalPages);
+      if (next === validatedCurrentPage) return;
       if (controlledCurrent === void 0) {
-        setInternalCurrent(page);
+        setInternalCurrent(next);
       }
-      onChange?.(page, currentPageSize);
+      onChange?.(next, currentPageSize);
     },
     [disabled, validatedCurrentPage, totalPages, controlledCurrent, onChange, currentPageSize]
   );
   const handlePageSizeChange = useCallback(
     (newPageSize) => {
       if (disabled) return;
-      const newTotalPages = getTotalPages(total, newPageSize);
+      const newTotalPages = getTotalPages(itemTotal, normalizePaginationPageSize(newPageSize));
       let newPage = validatedCurrentPage;
       if (newPage > newTotalPages) {
         newPage = Math.max(1, newTotalPages);
@@ -134,7 +143,14 @@ var Pagination = ({
       }
       onPageSizeChange?.(newPage, newPageSize);
     },
-    [disabled, total, validatedCurrentPage, controlledPageSize, controlledCurrent, onPageSizeChange]
+    [
+      disabled,
+      itemTotal,
+      validatedCurrentPage,
+      controlledPageSize,
+      controlledCurrent,
+      onPageSizeChange
+    ]
   );
   const handleQuickJumperSubmit = useCallback(() => {
     quickJumperValidationSchedulerRef.current?.cancel();
@@ -162,17 +178,8 @@ var Pagination = ({
     [handleQuickJumperSubmit]
   );
   const normalizedPageSizeOptions = useMemo(() => {
-    return pageSizeOptions.map((option) => {
-      if (typeof option === "number") {
-        return {
-          value: option,
-          label: `${option} ${labels.itemsPerPageText}`
-        };
-      }
-      const label = option.label ?? `${option.value} ${labels.itemsPerPageText}`;
-      return { value: option.value, label };
-    });
-  }, [pageSizeOptions, labels.itemsPerPageText]);
+    return resolvePageSizeOptions(pageSizeOptions, currentPageSize, labels.itemsPerPageText);
+  }, [pageSizeOptions, currentPageSize, labels.itemsPerPageText]);
   const containerClasses = getPaginationContainerClasses(align, className);
   const prevDisabled = validatedCurrentPage <= 1 || disabled;
   const nextDisabled = validatedCurrentPage >= totalPages || disabled;
@@ -180,7 +187,7 @@ var Pagination = ({
   if (showTotal) {
     const totalTextFn = totalText || ((value, range) => formatPaginationTotal(labels.totalText, value, range, localeCode));
     elements.push(
-      /* @__PURE__ */ jsx("span", { className: getTotalTextClasses(size), children: totalTextFn(total, pageRange) }, "total")
+      /* @__PURE__ */ jsx("span", { className: getTotalTextClasses(size), children: totalTextFn(itemTotal, pageRange) }, "total")
     );
   }
   elements.push(
@@ -192,23 +199,29 @@ var Pagination = ({
         disabled: prevDisabled,
         onClick: () => handlePageChange(validatedCurrentPage - 1),
         "aria-label": labels.prevPageAriaLabel,
-        children: isRtl ? "\u203A" : "\u2039"
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-4 w-4 rtl:-scale-x-100",
+            viewBox: icon20ViewBox,
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronLeftSolidIcon20PathD, clipRule: "evenodd" })
+          }
+        )
       },
       "prev"
     )
   );
   if (simple) {
-    const indicatorText = pageIndicatorText ? pageIndicatorText(validatedCurrentPage, totalPages) : `${validatedCurrentPage} / ${totalPages}`;
+    const indicatorText = pageIndicatorText ? pageIndicatorText(validatedCurrentPage, totalPages) : formatPaginationPageIndicator(
+      labels.pageIndicatorText,
+      validatedCurrentPage,
+      totalPages,
+      localeCode
+    );
     elements.push(
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: classNames("mx-2", getSizeTextClasses(size)),
-          "aria-label": indicatorText,
-          children: indicatorText
-        },
-        "current"
-      )
+      /* @__PURE__ */ jsx("span", { className: classNames("mx-2", getSizeTextClasses(size)), children: indicatorText }, "current")
     );
   } else {
     getPageNumbers(validatedCurrentPage, totalPages, showLessItems).forEach((pageNum, index) => {
@@ -234,8 +247,8 @@ var Pagination = ({
               className: getPaginationButtonBaseClasses(size, isActive),
               disabled,
               onClick: () => handlePageChange(pageNum),
-              "aria-label": formatPageAriaLabel(labels.pageAriaLabel, pageNum, localeCode),
               "aria-current": isActive ? "page" : void 0,
+              "aria-label": labels.pageAriaLabel.replace("{page}", String(pageNum)),
               children: String(pageNum)
             },
             `page-${pageNum}`
@@ -253,7 +266,16 @@ var Pagination = ({
         disabled: nextDisabled,
         onClick: () => handlePageChange(validatedCurrentPage + 1),
         "aria-label": labels.nextPageAriaLabel,
-        children: isRtl ? "\u2039" : "\u203A"
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-4 w-4 -scale-x-100 rtl:scale-x-100",
+            viewBox: icon20ViewBox,
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronLeftSolidIcon20PathD, clipRule: "evenodd" })
+          }
+        )
       },
       "next"
     )
@@ -267,7 +289,7 @@ var Pagination = ({
           disabled,
           value: currentPageSize,
           onChange: (e) => handlePageSizeChange(parseInt(e.target.value, 10)),
-          "aria-label": labels.itemsPerPageText,
+          "aria-label": labels.pageSizeAriaLabel,
           children: normalizedPageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsx("option", { value: sizeOption.value, children: sizeOption.label }, sizeOption.value))
         },
         "size-changer"
@@ -277,21 +299,21 @@ var Pagination = ({
   if (showQuickJumper) {
     const sizeText = getSizeTextClasses(size);
     elements.push(
-      /* @__PURE__ */ jsx("span", { className: classNames("ml-2", sizeText), children: labels.jumpToText }, "jumper-label-start")
+      /* @__PURE__ */ jsx("label", { htmlFor: jumperId, className: getQuickJumperPrefixClasses(size), children: labels.jumpToText }, "jumper-label")
     );
     elements.push(
       /* @__PURE__ */ jsx(
         "input",
         {
-          type: "number",
+          id: jumperId,
+          type: "text",
+          inputMode: "numeric",
           className: classNames(getQuickJumperInputClasses(size), "mx-2"),
           disabled,
           value: quickJumperValue,
           onChange: (e) => handleQuickJumperChange(e.target.value),
           onKeyDown: handleQuickJumperKeyPress,
-          min: 1,
-          max: totalPages,
-          "aria-label": labels.jumpToText
+          onBlur: handleQuickJumperSubmit
         },
         "jumper-input"
       )
@@ -308,8 +330,9 @@ var Pagination = ({
     {
       className: containerClasses,
       ...navProps,
-      role: "navigation",
-      "aria-label": ariaLabelProp ?? "Pagination",
+      dir: isRtl ? "rtl" : "ltr",
+      "aria-label": ariaLabelProp ?? (ariaLabelledbyProp ? void 0 : labels.paginationAriaLabel),
+      "aria-labelledby": ariaLabelledbyProp,
       style,
       children: elements
     }

package/dist/chunk-XBDLXTF7.mjs

@@ -0,0 +1,21 @@
+import {
+  PieChart
+} from "./chunk-6D2VLITE.mjs";
+
+// src/components/DonutChart.tsx
+import {
+  DEFAULT_DONUT_INNER_RADIUS_RATIO
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var DonutChart = ({
+  innerRadiusRatio = DEFAULT_DONUT_INNER_RADIUS_RATIO,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(PieChart, { innerRadiusRatio, ...props });
+};
+var DonutChart_default = DonutChart;
+
+export {
+  DonutChart,
+  DonutChart_default
+};

package/dist/chunk-XE34TOCS.mjs

@@ -0,0 +1,294 @@
+import {
+  Icon
+} from "./chunk-WPRXOO6N.mjs";
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Input.tsx
+import { useState, useEffect, useRef, useCallback, useId, forwardRef } from "react";
+import {
+  classNames,
+  mergeAriaDescribedBy,
+  getInputFieldClasses,
+  getInputWrapperClasses,
+  getInputAffixClasses,
+  getInputErrorClasses,
+  getInputClearButtonClasses,
+  getInputPasswordToggleClasses,
+  getInputCountClasses,
+  formatInputCountText,
+  parseInputValue,
+  runShakeAnimation,
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  getInputLabels,
+  resolveInputTrailingLayout,
+  resolveReadOnlyFlag
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Input = forwardRef(function Input2({
+  size,
+  type = "text",
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  prefix,
+  suffix,
+  value,
+  defaultValue,
+  placeholder = "",
+  disabled = false,
+  readonly: readonlyProp,
+  readOnly: readOnlyProp,
+  required = false,
+  maxLength,
+  minLength,
+  name,
+  id,
+  autoComplete,
+  autoFocus = false,
+  clearable = false,
+  showPassword = false,
+  showCount = false,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onClear,
+  className,
+  style,
+  ...props
+}, ref) {
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const labels = getInputLabels(config.locale);
+  const inGroup = inputGroup != null;
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp;
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+  const isReadOnly = resolveReadOnlyFlag(readonlyProp, readOnlyProp);
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const formBoundValue = formItemControl?.value;
+  const resolvedValue = value !== void 0 ? value : typeof formBoundValue === "string" || typeof formBoundValue === "number" ? formBoundValue : formBoundValue === void 0 ? void 0 : String(formBoundValue ?? "");
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const mountedRef = useRef(false);
+  const reactId = useId();
+  const errorMsgId = `tiger-input-error-${reactId}`;
+  const [inputValue, setInputValue] = useControlledState({
+    value: resolvedValue,
+    defaultValue: defaultValue ?? ""
+  });
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const setInputRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (status === "error") runShakeAnimation(wrapperRef.current);
+  }, [status, shakeTrigger]);
+  const handleAnimationEnd = useCallback(() => {
+    wrapperRef.current?.classList.remove(SHAKE_CLASS);
+  }, []);
+  const currentValStr = String(inputValue);
+  const trailing = resolveInputTrailingLayout({
+    clearable,
+    showPassword,
+    type,
+    disabled: effectiveDisabled,
+    readOnly: isReadOnly,
+    valueLength: currentValStr.length,
+    hasCustomSuffix: !!suffix
+  });
+  const handleInput = (event) => {
+    const next = parseInputValue(event.currentTarget, type);
+    setInputValue(next);
+    formItemControl?.onChange?.(next);
+    onInput?.(event);
+  };
+  const handleChange = (event) => {
+    const next = parseInputValue(event.currentTarget, type);
+    setInputValue(next);
+    formItemControl?.onChange?.(next);
+    onChange?.(event);
+  };
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const handleClear = () => {
+    setInputValue("");
+    formItemControl?.onChange?.("");
+    onClear?.();
+    focusInput();
+  };
+  const handleBlur = (event) => {
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const togglePasswordVisibility = () => {
+    setPasswordVisible((v) => !v);
+    focusInput();
+  };
+  const activeError = status === "error" && !!errorMessage;
+  const hasExtras = activeError || showCount;
+  const effectiveType = showPassword && type === "password" ? passwordVisible ? "text" : "password" : type;
+  const inputClasses = getInputFieldClasses({
+    size: effectiveSize,
+    status,
+    hasPrefix: !!prefix,
+    hasSuffix: trailing.hasSuffix,
+    hasDualSuffix: trailing.hasDualSuffix,
+    hasTripleSuffix: trailing.hasTripleSuffix
+  });
+  const chrome = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      ...{ [TIGER_CHROME_ATTR]: "" },
+      className: classNames(
+        getInputWrapperClasses(status, { inGroup: inGroup && !hasExtras }),
+        !hasExtras ? className : void 0
+      ),
+      style: !hasExtras ? style : void 0,
+      onAnimationEnd: handleAnimationEnd,
+      children: [
+        prefix ? /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("prefix", effectiveSize), children: prefix }) : null,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            ref: setInputRefs,
+            className: inputClasses,
+            type: effectiveType,
+            value: inputValue,
+            placeholder,
+            disabled: effectiveDisabled,
+            readOnly: isReadOnly,
+            required,
+            maxLength,
+            minLength,
+            name: effectiveName,
+            id: effectiveId,
+            autoComplete,
+            autoFocus,
+            "aria-invalid": status === "error" ? true : props["aria-invalid"],
+            "aria-required": formItemControl?.required || required ? true : void 0,
+            "aria-describedby": mergeAriaDescribedBy(
+              mergeAriaDescribedBy(
+                typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+                activeError ? errorMsgId : void 0
+              ),
+              formItemControl?.describedBy
+            ),
+            onInput: handleInput,
+            onChange: handleChange,
+            onFocus,
+            onBlur: handleBlur
+          }
+        ),
+        trailing.showClear ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getInputClearButtonClasses(effectiveSize, {
+              offsetSlots: trailing.clearOffsetSlots
+            }),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: handleClear,
+            "aria-label": labels.clearAriaLabel,
+            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: "sm", "aria-hidden": true })
+          }
+        ) : null,
+        trailing.showPasswordToggle ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getInputPasswordToggleClasses(effectiveSize, {
+              offsetSlots: trailing.passwordOffsetSlots
+            }),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: togglePasswordVisibility,
+            "aria-label": passwordVisible ? labels.hidePasswordAriaLabel : labels.showPasswordAriaLabel,
+            children: /* @__PURE__ */ jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: "sm", "aria-hidden": true })
+          }
+        ) : null,
+        trailing.showCustomSuffix ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getInputAffixClasses("suffix", effectiveSize, {
+              offsetSlots: trailing.suffixOffsetSlots
+            }),
+            children: suffix
+          }
+        ) : null
+      ]
+    }
+  );
+  if (!hasExtras) return chrome;
+  const extras = [];
+  if (activeError) {
+    extras.push(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: errorMsgId,
+          className: getInputErrorClasses(effectiveSize),
+          "aria-live": "polite",
+          children: errorMessage
+        },
+        "error"
+      )
+    );
+  }
+  if (showCount) {
+    const count = currentValStr.length;
+    extras.push(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: getInputCountClasses(maxLength !== void 0 && count > maxLength),
+          children: formatInputCountText(count, maxLength)
+        },
+        "count"
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        inGroup ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+        className
+      ),
+      style,
+      children: [
+        chrome,
+        extras
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+
+export {
+  Input
+};