@expcat/tigercat-react 2.0.4 → 2.1.0

package/dist/chunk-KRDHM5KB.mjs

@@ -0,0 +1,259 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+import {
+  Tag
+} from "./chunk-7EXOY7GD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-YSIXURBW.mjs";
+
+// src/components/TagsInput.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import {
+  addTags,
+  classNames,
+  extractTagCandidates,
+  formatRemoveTagLabel,
+  getTagsInputClearButtonClasses,
+  getTagsInputContainerClasses,
+  getTagsInputErrorClasses,
+  getTagsInputHighlightClasses,
+  getTagsInputInnerInputClasses,
+  getTagsInputLabels,
+  injectShakeStyle,
+  removeTagAt,
+  SHAKE_CLASS,
+  splitTagInput
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TagsInput = ({
+  size = "md",
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  value,
+  defaultValue,
+  placeholder = "",
+  allowDuplicates = false,
+  max,
+  delimiters = [","],
+  addOnBlur = false,
+  beforeAdd,
+  clearable = false,
+  disabled = false,
+  readonly = false,
+  name,
+  id,
+  removeTagAriaLabel,
+  onChange,
+  onAdd,
+  onRemove,
+  onClear,
+  onFocus,
+  onBlur,
+  className,
+  style,
+  ...rest
+}) => {
+  injectShakeStyle();
+  const config = useTigerConfig();
+  const formItemControl = useFormItemControlContext();
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const labels = getTagsInputLabels(config.locale);
+  const reactId = useId();
+  const errorMsgId = `tiger-tags-input-error-${reactId}`;
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const [tags, setTags] = useControlledState(value, defaultValue ?? [], onChange);
+  const [inputText, setInputText] = useState("");
+  const [highlightedIndex, setHighlightedIndex] = useState(null);
+  useEffect(() => {
+    if (status === "error" && containerRef.current) {
+      const el = containerRef.current;
+      el.classList.remove(SHAKE_CLASS);
+      void el.offsetWidth;
+      el.classList.add(SHAKE_CLASS);
+    }
+  }, [status, shakeTrigger]);
+  const isInteractive = !disabled && !readonly;
+  const commitCandidates = (candidates) => {
+    const prepared = [];
+    for (const raw of candidates) {
+      if (!beforeAdd) {
+        prepared.push(raw);
+        continue;
+      }
+      const result = beforeAdd(raw.trim());
+      if (result === false) continue;
+      prepared.push(typeof result === "string" ? result : raw);
+    }
+    if (prepared.length === 0) return { added: [] };
+    const { tags: nextTags, added } = addTags(tags, prepared, { allowDuplicates, max });
+    if (added.length > 0) {
+      setTags(nextTags);
+      added.forEach((tag) => onAdd?.(tag));
+    }
+    return { added };
+  };
+  const handleInputChange = (event) => {
+    if (!isInteractive) return;
+    setHighlightedIndex(null);
+    const { candidates, pending } = extractTagCandidates(event.currentTarget.value, delimiters);
+    if (candidates.length > 0) commitCandidates(candidates);
+    setInputText(pending);
+  };
+  const removeAt = (index) => {
+    const tag = tags[index];
+    if (tag === void 0) return;
+    setTags(removeTagAt(tags, index));
+    onRemove?.(tag, index);
+  };
+  const handleKeyDown = (event) => {
+    if (!isInteractive) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (inputText.trim()) {
+        const { added } = commitCandidates([inputText]);
+        if (added.length > 0) setInputText("");
+      }
+      return;
+    }
+    if (event.key === "Backspace" && inputText === "") {
+      if (highlightedIndex !== null) {
+        removeAt(highlightedIndex);
+        setHighlightedIndex(null);
+      } else if (tags.length > 0) {
+        setHighlightedIndex(tags.length - 1);
+      }
+      return;
+    }
+    if (event.key === "ArrowLeft" && inputText === "" && tags.length > 0) {
+      setHighlightedIndex((prev) => {
+        if (prev === null) return tags.length - 1;
+        return Math.max(0, prev - 1);
+      });
+      return;
+    }
+    if (event.key === "ArrowRight" && highlightedIndex !== null) {
+      setHighlightedIndex((prev) => {
+        if (prev === null || prev >= tags.length - 1) return null;
+        return prev + 1;
+      });
+      return;
+    }
+    if (event.key === "Escape" && highlightedIndex !== null) {
+      setHighlightedIndex(null);
+      return;
+    }
+    if (highlightedIndex !== null) setHighlightedIndex(null);
+  };
+  const handlePaste = (event) => {
+    if (!isInteractive) return;
+    const text = event.clipboardData.getData("text");
+    const candidates = splitTagInput(text, delimiters);
+    if (candidates.length <= 1) return;
+    event.preventDefault();
+    commitCandidates(candidates);
+    setInputText("");
+  };
+  const handleBlur = (event) => {
+    setHighlightedIndex(null);
+    if (addOnBlur && inputText.trim() && isInteractive) {
+      const { added } = commitCandidates([inputText]);
+      if (added.length > 0) setInputText("");
+    }
+    onBlur?.(event);
+  };
+  const handleClear = () => {
+    if (!isInteractive || tags.length === 0) return;
+    setTags([]);
+    setInputText("");
+    setHighlightedIndex(null);
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const focusInput = (event) => {
+    if (event.target === containerRef.current) inputRef.current?.focus();
+  };
+  const activeError = status === "error" && !!errorMessage;
+  const isFull = max !== void 0 && tags.length >= max;
+  const removeLabelTemplate = removeTagAriaLabel ?? labels.removeTagLabel;
+  const containerNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      id,
+      className: classNames(getTagsInputContainerClasses(size, status, { disabled }), className),
+      style,
+      "data-state": isFull ? "full" : void 0,
+      onClick: focusInput,
+      children: [
+        tags.map((tag, index) => /* @__PURE__ */ jsx(
+          Tag,
+          {
+            size: size === "lg" ? "md" : "sm",
+            closable: isInteractive,
+            closeAriaLabel: formatRemoveTagLabel(removeLabelTemplate, tag),
+            className: index === highlightedIndex ? getTagsInputHighlightClasses() : void 0,
+            onClose: (event) => {
+              event.preventDefault();
+              removeAt(index);
+            },
+            children: tag
+          },
+          `${tag}-${index}`
+        )),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            className: getTagsInputInnerInputClasses(),
+            type: "text",
+            value: inputText,
+            placeholder: tags.length === 0 ? placeholder : "",
+            disabled,
+            readOnly: readonly,
+            id: id ? `${id}-input` : void 0,
+            ...status === "error" ? { "aria-invalid": true } : {},
+            ...activeError ? { "aria-describedby": errorMsgId } : {},
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            onFocus,
+            onBlur: handleBlur
+          }
+        ),
+        clearable && tags.length > 0 && isInteractive && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getTagsInputClearButtonClasses(),
+            onClick: handleClear,
+            "aria-label": labels.clearAllLabel,
+            tabIndex: -1,
+            children: "\u2715"
+          }
+        ),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tags.join(",") })
+      ]
+    }
+  );
+  if (!activeError) return containerNode;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    containerNode,
+    /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getTagsInputErrorClasses(), children: errorMessage })
+  ] });
+};
+var TagsInput_default = TagsInput;
+
+export {
+  TagsInput,
+  TagsInput_default
+};

package/dist/chunk-M5MZWOHF.mjs

@@ -0,0 +1,180 @@
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu
+} from "./chunk-YI6YWH66.mjs";
+import {
+  Button
+} from "./chunk-5TE7KLE5.mjs";
+import {
+  ButtonGroup
+} from "./chunk-ZJWUBR2X.mjs";
+
+// src/components/SplitButton.tsx
+import React, { useMemo } from "react";
+import {
+  DROPDOWN_CHEVRON_PATH,
+  getDropdownChevronClasses,
+  getSplitButtonPrimaryClasses,
+  getSplitButtonRootClasses,
+  getSplitButtonTriggerClasses,
+  resolveSplitButtonSize,
+  resolveSplitButtonTriggerAriaLabel,
+  resolveSplitButtonVariant
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function wrapMenu(nodes) {
+  if (nodes == null || typeof nodes === "boolean") return null;
+  if (React.isValidElement(nodes) && nodes.type === DropdownMenu) return nodes;
+  const array = React.Children.toArray(nodes);
+  if (array.length === 0) return null;
+  const existing = array.find((child) => React.isValidElement(child) && child.type === DropdownMenu);
+  if (existing) return existing;
+  return /* @__PURE__ */ jsx(DropdownMenu, { children: nodes });
+}
+function partitionChildren(children) {
+  const primary = [];
+  const menuItems = [];
+  let menu = null;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      if (child != null && typeof child !== "boolean") primary.push(child);
+      return;
+    }
+    if (child.type === DropdownMenu) {
+      menu = child;
+      return;
+    }
+    if (child.type === DropdownItem) {
+      menuItems.push(child);
+      return;
+    }
+    primary.push(child);
+  });
+  if (!menu && menuItems.length > 0) {
+    menu = /* @__PURE__ */ jsx(DropdownMenu, { children: menuItems });
+  }
+  return { primary, menu };
+}
+function Chevron({ open }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getDropdownChevronClasses(open),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: DROPDOWN_CHEVRON_PATH })
+    }
+  );
+}
+var SplitButton = ({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  danger = false,
+  block = false,
+  htmlType = "button",
+  iconPosition = "left",
+  icon,
+  loadingIcon,
+  trigger,
+  triggerAriaLabel,
+  open,
+  defaultOpen = false,
+  closeOnClick = true,
+  portal = true,
+  placement = "bottom-end",
+  offset = 4,
+  menu,
+  onClick,
+  onOpenChange,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const resolvedVariant = resolveSplitButtonVariant(variant);
+  const resolvedSize = resolveSplitButtonSize(size);
+  const isDisabled = disabled || loading;
+  const triggerLabel = resolveSplitButtonTriggerAriaLabel(triggerAriaLabel);
+  const partitioned = useMemo(() => partitionChildren(children), [children]);
+  const menuNode = menu != null ? wrapMenu(menu) : partitioned.menu;
+  const rootClasses = getSplitButtonRootClasses({ block, className });
+  const primaryClasses = getSplitButtonPrimaryClasses({ block });
+  const triggerClasses = getSplitButtonTriggerClasses({ size: resolvedSize });
+  return /* @__PURE__ */ jsxs(
+    ButtonGroup,
+    {
+      size: resolvedSize,
+      className: rootClasses,
+      style,
+      "data-split-button": "",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: resolvedVariant,
+            size: resolvedSize,
+            disabled,
+            loading,
+            danger,
+            htmlType,
+            iconPosition,
+            icon,
+            loadingIcon,
+            className: primaryClasses,
+            "data-split-button-primary": "",
+            onClick,
+            children: partitioned.primary
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            trigger: "click",
+            showArrow: false,
+            disabled: isDisabled,
+            open,
+            defaultOpen,
+            closeOnClick,
+            portal,
+            placement,
+            offset,
+            onOpenChange,
+            renderTrigger: ({ open: menuOpen }) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: resolvedVariant,
+                size: resolvedSize,
+                disabled: isDisabled,
+                danger,
+                htmlType: "button",
+                className: triggerClasses,
+                "aria-label": triggerLabel,
+                "aria-haspopup": "menu",
+                "aria-expanded": menuOpen,
+                "data-split-button-trigger": "",
+                children: trigger ?? /* @__PURE__ */ jsx(Chevron, { open: menuOpen })
+              }
+            ),
+            children: menuNode
+          }
+        )
+      ]
+    }
+  );
+};
+var SplitButton_default = SplitButton;
+
+export {
+  SplitButton,
+  SplitButton_default
+};

package/dist/chunk-MFPVVGNA.mjs

@@ -0,0 +1,248 @@
+// src/components/ScrollArea.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  classNames,
+  computeScrollAreaState,
+  computeScrollFromThumbOffset,
+  computeScrollFromTrackPoint,
+  createDocumentDragSession,
+  createEmptyScrollAreaState,
+  getScrollAreaBoxStyle,
+  getScrollAreaContentClasses,
+  getScrollAreaScrollbarClasses,
+  getScrollAreaShadowClasses,
+  getScrollAreaShadowSides,
+  getScrollAreaThumbClasses,
+  getScrollAreaThumbStyle,
+  getScrollAreaViewportClasses,
+  observeScrollAreaSize,
+  readScrollAreaMetrics,
+  scrollAreaRootClasses,
+  shouldRenderScrollAreaScrollbar,
+  SCROLL_AREA_MIN_THUMB_SIZE
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ScrollArea = forwardRef(
+  ({
+    direction = "vertical",
+    scrollbar = "auto",
+    scrollbarSize = "md",
+    shadow = false,
+    minThumbSize = SCROLL_AREA_MIN_THUMB_SIZE,
+    height,
+    maxHeight,
+    width,
+    maxWidth,
+    ariaLabel,
+    className,
+    viewportClassName,
+    children,
+    onScroll,
+    ...rest
+  }, ref) => {
+    const viewportRef = useRef(null);
+    const contentRef = useRef(null);
+    const dragSessionRef = useRef(null);
+    const stateRef = useRef(createEmptyScrollAreaState());
+    const [state, setState] = useState(stateRef.current);
+    const [draggingAxis, setDraggingAxis] = useState(null);
+    const onScrollRef = useRef(onScroll);
+    onScrollRef.current = onScroll;
+    const syncState = useCallback(() => {
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      const next = computeScrollAreaState(readScrollAreaMetrics(viewport), minThumbSize);
+      stateRef.current = next;
+      setState(next);
+    }, [minThumbSize]);
+    const handleScroll = useCallback(() => {
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      syncState();
+      onScrollRef.current?.({
+        scrollTop: viewport.scrollTop,
+        scrollLeft: viewport.scrollLeft,
+        state: stateRef.current
+      });
+    }, [syncState]);
+    const applyScroll = useCallback(
+      (axis, position) => {
+        const viewport = viewportRef.current;
+        if (!viewport) return;
+        if (axis === "y") viewport.scrollTop = position;
+        else viewport.scrollLeft = position;
+        handleScroll();
+      },
+      [handleScroll]
+    );
+    const startThumbDrag = useCallback(
+      (axis, event) => {
+        const viewport = viewportRef.current;
+        if (!viewport) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const axisState = axis === "y" ? stateRef.current.y : stateRef.current.x;
+        const startOffset = axisState.thumbOffset;
+        const startPoint = axis === "y" ? event.clientY : event.clientX;
+        dragSessionRef.current?.dispose();
+        setDraggingAxis(axis);
+        dragSessionRef.current = createDocumentDragSession({
+          startX: event.clientX,
+          startY: event.clientY,
+          ownerDocument: viewport.ownerDocument,
+          onMove: ({ currentX, currentY }) => {
+            const current = axis === "y" ? currentY : currentX;
+            const trackSize = axis === "y" ? viewport.clientHeight : viewport.clientWidth;
+            applyScroll(
+              axis,
+              computeScrollFromThumbOffset(
+                startOffset + (current - startPoint),
+                trackSize,
+                axisState.thumbSize,
+                axis === "y" ? viewport.scrollHeight : viewport.scrollWidth,
+                trackSize
+              )
+            );
+          },
+          onEnd: () => {
+            setDraggingAxis(null);
+            dragSessionRef.current = null;
+          }
+        });
+      },
+      [applyScroll]
+    );
+    const handleTrackMouseDown = useCallback(
+      (axis, event) => {
+        const target = event.target;
+        if (target?.dataset.scrollAreaThumb) {
+          startThumbDrag(axis, event);
+          return;
+        }
+        const viewport = viewportRef.current;
+        if (!viewport) return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const point = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+        const axisState = axis === "y" ? stateRef.current.y : stateRef.current.x;
+        const trackSize = axis === "y" ? viewport.clientHeight : viewport.clientWidth;
+        applyScroll(
+          axis,
+          computeScrollFromTrackPoint(
+            point,
+            trackSize,
+            axisState.thumbSize,
+            axis === "y" ? viewport.scrollHeight : viewport.scrollWidth,
+            trackSize
+          )
+        );
+      },
+      [applyScroll, startThumbDrag]
+    );
+    const scrollTo = useCallback(
+      (options) => {
+        const viewport = viewportRef.current;
+        if (!viewport) return;
+        const behavior = options.behavior ?? "auto";
+        if (typeof viewport.scrollTo === "function") {
+          viewport.scrollTo({ top: options.top, left: options.left, behavior });
+        } else {
+          if (options.top !== void 0) viewport.scrollTop = options.top;
+          if (options.left !== void 0) viewport.scrollLeft = options.left;
+        }
+        handleScroll();
+      },
+      [handleScroll]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        scrollTo,
+        scrollToTop: (behavior) => scrollTo({ top: 0, behavior }),
+        scrollToBottom: (behavior) => scrollTo({ top: viewportRef.current?.scrollHeight ?? 0, behavior }),
+        getViewport: () => viewportRef.current,
+        getState: () => stateRef.current
+      }),
+      [scrollTo]
+    );
+    useEffect(() => {
+      syncState();
+      return observeScrollAreaSize([viewportRef.current, contentRef.current], syncState);
+    }, [syncState, direction]);
+    useEffect(() => () => dragSessionRef.current?.dispose(), []);
+    const shadowSides = useMemo(
+      () => shadow ? getScrollAreaShadowSides(state, direction) : [],
+      [shadow, state, direction]
+    );
+    const renderScrollbar = (axis) => {
+      const axisState = axis === "y" ? state.y : state.x;
+      if (!shouldRenderScrollAreaScrollbar(scrollbar, direction, axis, axisState)) return null;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: getScrollAreaScrollbarClasses(axis, scrollbarSize, scrollbar),
+          "data-scroll-area-scrollbar": axis,
+          "aria-hidden": "true",
+          onMouseDown: (event) => handleTrackMouseDown(axis, event),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getScrollAreaThumbClasses(axis, draggingAxis === axis),
+              style: getScrollAreaThumbStyle(axis, axisState),
+              "data-scroll-area-thumb": axis
+            }
+          )
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxs("div", { ...rest, className: classNames(scrollAreaRootClasses, className), "data-scroll-area": "", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: viewportRef,
+          className: getScrollAreaViewportClasses(direction, viewportClassName),
+          style: getScrollAreaBoxStyle({ height, maxHeight, width, maxWidth }),
+          tabIndex: 0,
+          role: ariaLabel ? "region" : void 0,
+          "aria-label": ariaLabel,
+          "data-scroll-area-viewport": "",
+          onScroll: handleScroll,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: contentRef,
+              className: getScrollAreaContentClasses(direction),
+              "data-scroll-area-content": "",
+              children
+            }
+          )
+        }
+      ),
+      shadowSides.map((side) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: getScrollAreaShadowClasses(side),
+          "data-scroll-area-shadow": side,
+          "aria-hidden": "true"
+        },
+        side
+      )),
+      renderScrollbar("y"),
+      renderScrollbar("x")
+    ] });
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+var ScrollArea_default = ScrollArea;
+
+export {
+  ScrollArea,
+  ScrollArea_default
+};