@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-U4M3DC2P.mjs → chunk-GOIJNJ5D.mjs}

@@ -1,4 +1,5 @@
-// src/components/LoadingBarRoot.ts
+// src/components/LoadingBarRoot.tsx
+import { isBrowser } from "@expcat/tigercat-core";
 var loadingBarModulePromise = null;
 var pendingCommands = [];
 var resolvedApi = null;
@@ -11,9 +12,18 @@ function applyCommand(api, command) {
     api.start(command.options);
     return;
   }
+  if (command.type === "set") {
+    api.set(command.percentage);
+    return;
+  }
+  if (command.type === "inc") {
+    api.inc(command.delta);
+    return;
+  }
   api[command.type]();
 }
 function enqueue(command) {
+  if (!isBrowser()) return;
   if (resolvedApi) {
     applyCommand(resolvedApi, command);
     return;
@@ -32,6 +42,12 @@ var LoadingBar = {
   start(options) {
     enqueue({ type: "start", options });
   },
+  set(percentage) {
+    enqueue({ type: "set", percentage });
+  },
+  inc(delta) {
+    enqueue({ type: "inc", delta });
+  },
   finish() {
     enqueue({ type: "finish" });
   },

package/dist/chunk-GRB667BG.mjs

@@ -0,0 +1,442 @@
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Mentions.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  classNames,
+  extractMentionQuery,
+  filterMentionOptions,
+  getEmptyLabels,
+  getInitialMentionsActiveIndex,
+  getInputErrorClasses,
+  getMentionOptionKey,
+  getMentionsKeyIntent,
+  getMentionsOptionClasses,
+  getMentionsPanelStyle,
+  getMentionsTextareaClasses,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerNavigationIndex,
+  getPickerOptionAria,
+  getPickerOptionId,
+  insertMention,
+  mentionsDropdownClasses,
+  mentionsEmptyStateClasses,
+  mentionsListboxClasses,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  resolveLocaleText,
+  runShakeAnimation,
+  shouldOpenMentions
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Mentions = forwardRef(
+  function Mentions2(props, ref) {
+    const {
+      value,
+      defaultValue = "",
+      open,
+      defaultOpen = false,
+      prefix = "@",
+      options = [],
+      placeholder,
+      disabled = false,
+      size = "md",
+      rows = 3,
+      status: statusProp,
+      errorMessage: errorMessageProp,
+      name,
+      id,
+      loading = false,
+      filterOption = true,
+      placement = "bottom-start",
+      offset = 4,
+      dropdownClassName,
+      getPopupContainer,
+      listHeight = 256,
+      locale,
+      className,
+      onChange,
+      onSelect,
+      onSearch,
+      onOpenChange,
+      onFocus,
+      onBlur,
+      style,
+      ...rest
+    } = props;
+    const inputGroup = useInputGroupContext();
+    const formItemControl = useFormItemControlContext();
+    const config = useTigerConfig();
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const emptyLabels = useMemo(() => getEmptyLabels(mergedLocale), [mergedLocale]);
+    const loadingText = mergedLocale?.common?.loadingText ?? "Loading...";
+    const resolvedEmptyText = resolveLocaleText(emptyLabels.noResults);
+    const inGroup = inputGroup != null;
+    const effectiveSize = size ?? inputGroup?.size ?? "md";
+    const status = statusProp ?? formItemControl?.status ?? "default";
+    const errorMessage = errorMessageProp;
+    const shakeTrigger = formItemControl?.shakeTrigger;
+    const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+    const effectiveId = id ?? formItemControl?.id;
+    const effectiveName = name ?? formItemControl?.name;
+    const formBoundValue = formItemControl?.value;
+    const resolvedValue = value !== void 0 ? value : typeof formBoundValue === "string" ? formBoundValue : void 0;
+    const instanceId = useId();
+    const listboxId = `tiger-mentions-listbox-${instanceId}`;
+    const errorMsgId = `tiger-mentions-error-${instanceId}`;
+    const mountedRef = useRef(false);
+    const textareaRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const mentionStartRef = useRef(-1);
+    const mentionEndRef = useRef(-1);
+    const mentionPrefixRef = useRef("@");
+    const pendingCaret = useRef(null);
+    const dismissedRef = useRef(false);
+    const liveTextRef = useRef(resolvedValue ?? defaultValue);
+    const [currentValue, setCurrentValue] = useControlledState({
+      value: resolvedValue,
+      defaultValue,
+      onChange: (next) => {
+        onChange?.(next);
+        formItemControl?.onChange?.(next);
+      }
+    });
+    const [isOpen, setOpen] = useControlledState({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    });
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const setRefs = (node) => {
+      textareaRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const filteredOptions = useMemo(
+      () => filterMentionOptions(options, query, filterOption),
+      [options, query, filterOption]
+    );
+    const expanded = isOpen && shouldOpenMentions({
+      query: mentionStartRef.current >= 0 ? { query, startPos: mentionStartRef.current, prefix: mentionPrefixRef.current } : null,
+      filteredCount: filteredOptions.length,
+      loading
+    });
+    const applyQuery = useCallback(
+      (text, cursor) => {
+        const result = extractMentionQuery(text, cursor, prefix);
+        if (result) {
+          mentionStartRef.current = result.startPos;
+          mentionEndRef.current = cursor;
+          mentionPrefixRef.current = result.prefix;
+          setQuery(result.query);
+          onSearch?.(result.query);
+          const nextFiltered = filterMentionOptions(
+            options,
+            result.query,
+            filterOption
+          );
+          setOpen(
+            shouldOpenMentions({
+              query: result,
+              filteredCount: nextFiltered.length,
+              loading
+            })
+          );
+          setActiveIndex(getInitialMentionsActiveIndex(nextFiltered));
+          return;
+        }
+        mentionStartRef.current = -1;
+        mentionEndRef.current = -1;
+        setQuery("");
+        setOpen(false);
+        setActiveIndex(-1);
+      },
+      [filterOption, loading, onSearch, options, prefix, setOpen]
+    );
+    useEffect(() => {
+      if (dismissedRef.current) return;
+      const textarea2 = textareaRef.current;
+      const text = textarea2?.value ?? currentValue;
+      const result = extractMentionQuery(text, textarea2?.selectionStart ?? text.length, prefix);
+      if (!result) return;
+      const nextFiltered = filterMentionOptions(
+        options,
+        result.query,
+        filterOption
+      );
+      setOpen(
+        shouldOpenMentions({
+          query: result,
+          filteredCount: nextFiltered.length,
+          loading
+        })
+      );
+    }, [currentValue, filterOption, loading, options, prefix, setOpen]);
+    useLayoutEffect(() => {
+      if (pendingCaret.current === null || !textareaRef.current) return;
+      const caret = pendingCaret.current;
+      textareaRef.current.setSelectionRange(caret, caret);
+      pendingCaret.current = null;
+    });
+    useEffect(() => {
+      if (!mountedRef.current) {
+        mountedRef.current = true;
+        return;
+      }
+      if (status === "error") runShakeAnimation(textareaRef.current);
+    }, [status, shakeTrigger]);
+    const closeDropdown = useCallback(() => {
+      dismissedRef.current = true;
+      setOpen(false);
+      setActiveIndex(-1);
+    }, [setOpen]);
+    const overlay = useAnchoredOverlay({
+      enabled: expanded,
+      referenceRef: textareaRef,
+      floatingRef: dropdownRef,
+      containerRef: textareaRef,
+      placement,
+      offset,
+      layout: "fullscreen-sm",
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: getPopupContainer,
+      onDismiss: closeDropdown
+    });
+    const commitValue = useCallback(
+      (next, caret) => {
+        liveTextRef.current = next;
+        if (textareaRef.current) textareaRef.current.value = next;
+        if (caret !== void 0) pendingCaret.current = caret;
+        setCurrentValue(next);
+      },
+      [setCurrentValue]
+    );
+    const selectOption = useCallback(
+      (option) => {
+        if (option.disabled || effectiveDisabled) return;
+        const textarea2 = textareaRef.current;
+        const text = liveTextRef.current || textarea2?.value || currentValue;
+        const cursor = mentionEndRef.current >= 0 ? mentionEndRef.current : textarea2?.selectionStart ?? text.length;
+        const result = insertMention({
+          text,
+          mentionStart: mentionStartRef.current,
+          cursor,
+          prefix: mentionPrefixRef.current,
+          value: option.value
+        });
+        commitValue(result.value, result.caret);
+        onSelect?.(option);
+        mentionStartRef.current = -1;
+        mentionEndRef.current = -1;
+        setQuery("");
+        closeDropdown();
+        textarea2?.focus();
+      },
+      [closeDropdown, commitValue, currentValue, effectiveDisabled, onSelect, setQuery]
+    );
+    const handleInput = (event) => {
+      if (effectiveDisabled) return;
+      dismissedRef.current = false;
+      const next = event.currentTarget.value;
+      liveTextRef.current = next;
+      setCurrentValue(next);
+      applyQuery(next, event.currentTarget.selectionStart ?? next.length);
+    };
+    const handleKeyDown = (event) => {
+      const intent = getMentionsKeyIntent(event.key, expanded);
+      switch (intent.type) {
+        case "navigate":
+          event.preventDefault();
+          setActiveIndex((prev) => getPickerNavigationIndex(filteredOptions, prev, intent.key));
+          return;
+        case "select-active": {
+          const option = filteredOptions[activeIndex];
+          if (!option || option.disabled) return;
+          event.preventDefault();
+          selectOption(option);
+          return;
+        }
+        case "close":
+          event.preventDefault();
+          closeDropdown();
+          return;
+        default:
+          return;
+      }
+    };
+    const handleFocusOut = (event) => {
+      const next = event.relatedTarget;
+      if (textareaRef.current && next && textareaRef.current.contains(next) || dropdownRef.current && next && dropdownRef.current.contains(next)) {
+        return;
+      }
+      closeDropdown();
+      formItemControl?.onBlur?.();
+      onBlur?.(event);
+    };
+    const activeError = status === "error" && !!errorMessage;
+    const hasExtras = activeError;
+    const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+    const describedBy = mergeAriaDescribedBy(
+      mergeAriaDescribedBy(
+        typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+        activeError ? errorMsgId : void 0
+      ),
+      formItemControl?.describedBy
+    );
+    const comboboxAria = {
+      ...getPickerComboboxAria({
+        expanded,
+        listboxId,
+        activeIndex: expanded ? activeIndex : -1
+      }),
+      "aria-autocomplete": "list"
+    };
+    const textarea = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...rest,
+        ...comboboxAria,
+        ref: setRefs,
+        className: classNames(
+          getMentionsTextareaClasses({
+            size: effectiveSize,
+            status,
+            inGroup: inGroup && !hasExtras
+          }),
+          !hasExtras ? className : void 0
+        ),
+        style: !hasExtras ? style : void 0,
+        value: currentValue,
+        placeholder,
+        disabled: effectiveDisabled,
+        rows,
+        name: effectiveName,
+        id: effectiveId,
+        "aria-label": typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0,
+        "aria-labelledby": labelledby,
+        "aria-invalid": status === "error" ? true : rest["aria-invalid"],
+        "aria-required": formItemControl?.required ? true : rest["aria-required"],
+        "aria-describedby": describedBy,
+        onChange: handleInput,
+        onKeyDown: handleKeyDown,
+        onFocus,
+        onBlur: handleFocusOut,
+        onAnimationEnd: () => textareaRef.current?.classList.remove(SHAKE_CLASS),
+        ...{ [TIGER_CHROME_ATTR]: "" }
+      }
+    );
+    const dropdown = renderOverlayPortal(
+      expanded ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          className: classNames(
+            mentionsDropdownClasses,
+            overlay.floatingClasses,
+            dropdownClassName
+          ),
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          onMouseDown: (event) => event.preventDefault(),
+          children: loading && filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: mentionsEmptyStateClasses, children: loadingText }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: mentionsEmptyStateClasses, children: resolvedEmptyText }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: mentionsListboxClasses,
+              style: getMentionsPanelStyle(listHeight),
+              ...getPickerListboxAria({ id: listboxId }),
+              children: filteredOptions.map((option, index) => {
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: getPickerOptionId(listboxId, index),
+                    "data-active": isActive || void 0,
+                    ...getPickerOptionAria({
+                      selected: false,
+                      disabled: !!option.disabled
+                    }),
+                    className: getMentionsOptionClasses({
+                      isActive,
+                      isDisabled: !!option.disabled,
+                      size: effectiveSize
+                    }),
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => selectOption(option),
+                    onMouseEnter: () => {
+                      if (!option.disabled) setActiveIndex(index);
+                    },
+                    children: option.label
+                  },
+                  getMentionOptionKey(option, index)
+                );
+              })
+            }
+          )
+        }
+      ) : null,
+      overlay.target
+    );
+    if (!hasExtras) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        textarea,
+        dropdown
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(
+          inGroup ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+          className
+        ),
+        style,
+        children: [
+          textarea,
+          activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), "aria-live": "polite", children: errorMessage }) : null,
+          dropdown
+        ]
+      }
+    );
+  }
+);
+Mentions.displayName = "Mentions";
+var Mentions_default = Mentions;
+
+export {
+  Mentions,
+  Mentions_default
+};

package/dist/chunk-HAG7TGPS.mjs

@@ -0,0 +1,157 @@
+import {
+  useCheckboxGroup
+} from "./chunk-UOF324U6.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+
+// src/components/Checkbox.tsx
+import { useEffect, useRef, forwardRef, useImperativeHandle } from "react";
+import {
+  classNames,
+  checkboxCheckPathD,
+  checkboxIconSizeClasses,
+  checkboxIconViewBox,
+  checkboxIndeterminatePathD,
+  checkboxGroupIncludes,
+  devWarn,
+  getCheckboxLabelClasses,
+  getCheckboxLabelTextClasses,
+  getCheckboxVisualClasses,
+  mergeAriaDescribedBy,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = forwardRef(function Checkbox2({
+  checked: controlledChecked,
+  defaultChecked = false,
+  value,
+  size: propSize,
+  disabled: propDisabled,
+  indeterminate = false,
+  status: statusProp,
+  onChange,
+  children,
+  className,
+  id,
+  name,
+  onBlur,
+  ...props
+}, ref) {
+  const groupContext = useCheckboxGroup();
+  const formItemControl = useFormItemControlContext();
+  const inGroup = Boolean(groupContext);
+  if (inGroup && value === void 0) {
+    devWarn(
+      "Checkbox.groupValue",
+      "Checkbox inside CheckboxGroup must set `value`. Independent `checked` is ignored while grouped."
+    );
+  }
+  const [checkedState, setChecked] = useControlledState({
+    value: inGroup ? void 0 : controlledChecked,
+    defaultValue: defaultChecked,
+    onChange
+  });
+  const effectiveSize = propSize || groupContext?.size || "md";
+  const effectiveDisabled = Boolean(
+    propDisabled || groupContext?.disabled || formItemControl?.disabled
+  );
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = formItemControl?.shakeTrigger;
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const checked = inGroup ? value !== void 0 && checkboxGroupIncludes(groupContext.value, value) : checkedState;
+  const inputRef = useRef(null);
+  const rootRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current, []);
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  useEffect(() => {
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, shakeTrigger]);
+  const handleChange = (event) => {
+    if (effectiveDisabled) return;
+    const next = event.target.checked;
+    if (inGroup && value !== void 0) {
+      groupContext.updateValue(value, next);
+      return;
+    }
+    setChecked(next, event);
+    formItemControl?.onChange?.(next);
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    formItemControl?.onBlur?.();
+  };
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const visual = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: getCheckboxVisualClasses({
+        size: effectiveSize,
+        checked,
+        indeterminate,
+        disabled: effectiveDisabled,
+        status
+      }),
+      "aria-hidden": "true",
+      children: (checked || indeterminate) && /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: checkboxIconSizeClasses[effectiveSize],
+          viewBox: checkboxIconViewBox,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: indeterminate ? checkboxIndeterminatePathD : checkboxCheckPathD })
+        }
+      )
+    }
+  );
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      ref: inputRef,
+      id: effectiveId,
+      name: effectiveName,
+      type: "checkbox",
+      className: "sr-only peer",
+      checked,
+      disabled: effectiveDisabled,
+      value: typeof value === "boolean" ? String(value) : value,
+      "aria-checked": indeterminate ? "mixed" : checked,
+      "aria-invalid": status === "error" ? true : props["aria-invalid"],
+      "aria-required": formItemControl?.required || props["aria-required"] ? true : void 0,
+      "aria-describedby": describedBy,
+      onChange: handleChange,
+      onBlur: handleBlur
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ref: rootRef,
+      className: classNames(getCheckboxLabelClasses(effectiveSize, effectiveDisabled), className),
+      children: [
+        input,
+        visual,
+        children != null && children !== false && /* @__PURE__ */ jsx("span", { className: getCheckboxLabelTextClasses(effectiveSize, effectiveDisabled), children })
+      ]
+    }
+  );
+});
+Checkbox.displayName = "Checkbox";
+
+export {
+  Checkbox
+};

package/dist/{chunk-L5KAXWQI.mjs → chunk-HHRU7TK3.mjs}

@@ -1,10 +1,21 @@
-// src/components/NotificationRoot.ts
+// src/components/NotificationRoot.tsx
+import {
+  isBrowser
+} from "@expcat/tigercat-core";
 var notificationModulePromise = null;
+var resolvedNotification = null;
 function loadNotificationModule() {
-  notificationModulePromise ??= import("./components/Notification.mjs");
+  notificationModulePromise ??= import("./components/Notification.mjs").then((module) => {
+    resolvedNotification = module.notification;
+    return module;
+  });
   return notificationModulePromise;
 }
 function forwardNotification(method, options) {
+  if (!isBrowser()) return () => void 0;
+  if (resolvedNotification) {
+    return resolvedNotification[method](options);
+  }
   let closeNotification = null;
   let requestedClose = false;
   void loadNotificationModule().then(({ notification: notification2 }) => {
@@ -38,6 +49,11 @@ var notification = {
     return forwardNotification("info", options);
   },
   clear(position) {
+    if (!isBrowser()) return;
+    if (resolvedNotification) {
+      resolvedNotification.clear(position);
+      return;
+    }
     void loadNotificationModule().then(({ notification: notification2 }) => {
       notification2.clear(position);
     });