@expcat/tigercat-react 2.1.4 → 2.3.0

package/dist/chunk-2MV3F7WP.mjs

@@ -0,0 +1,56 @@
+// src/hooks/useFullscreen.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  exitElementFullscreen,
+  getFullscreenElement,
+  isElementFullscreen,
+  isFullscreenSupported,
+  requestElementFullscreen,
+  resolveFullscreenTarget,
+  subscribeFullscreenChange
+} from "@expcat/tigercat-core";
+function useFullscreen(options = {}) {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const [supported] = useState(() => isFullscreenSupported());
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const sync = useCallback(() => {
+    const target = resolveFullscreenTarget(optionsRef.current.target);
+    const next = isElementFullscreen(target);
+    setIsFullscreen(next);
+    optionsRef.current.onChange?.(next);
+  }, []);
+  useEffect(() => {
+    sync();
+    return subscribeFullscreenChange(sync);
+  }, [sync]);
+  const enter = useCallback(async () => {
+    const target = resolveFullscreenTarget(optionsRef.current.target);
+    if (!target) return;
+    if (isElementFullscreen(target)) return;
+    try {
+      await requestElementFullscreen(target);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Fullscreen request failed");
+      optionsRef.current.onError?.(err);
+    }
+  }, []);
+  const exit = useCallback(async () => {
+    if (!getFullscreenElement()) return;
+    try {
+      await exitElementFullscreen();
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Fullscreen exit failed");
+      optionsRef.current.onError?.(err);
+    }
+  }, []);
+  const toggle = useCallback(async () => {
+    if (isFullscreen) await exit();
+    else await enter();
+  }, [enter, exit, isFullscreen]);
+  return { isFullscreen, supported, enter, exit, toggle };
+}
+
+export {
+  useFullscreen
+};

package/dist/{chunk-SUHSOVWP.mjs → chunk-6T5AEQJV.mjs}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-FVA5VKN2.mjs";
 import {
   Text
-} from "./chunk-VDBLI5Y3.mjs";
+} from "./chunk-FZQUUTWN.mjs";
 import {
   Card
 } from "./chunk-WCIUNNIN.mjs";

package/dist/{chunk-R2VBVZIH.mjs → chunk-75SQCTLC.mjs}

@@ -2,13 +2,13 @@
 import { forwardRef } from "react";
 import {
   classNames,
-  injectLayoutGridStyles,
-  layoutFooterClasses
+  getLayoutFooterClasses,
+  injectLayoutGridStyles
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
-var Footer = forwardRef(function Footer2({ className, height, style, as = "footer", children, ...props }, ref) {
+var Footer = forwardRef(function Footer2({ className, height, size = "default", style, as = "footer", children, ...props }, ref) {
   injectLayoutGridStyles();
-  const footerClasses = classNames(layoutFooterClasses, className);
+  const footerClasses = classNames(getLayoutFooterClasses(size), className);
   const footerStyle = height ? { ...style, height } : style;
   const Tag = as;
   return /* @__PURE__ */ jsx(Tag, { ref, className: footerClasses, style: footerStyle, ...props, children });

package/dist/{chunk-73OFTRG5.mjs → chunk-AHQR57Z4.mjs}

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-IR45LOEZ.mjs";
+} from "./chunk-UGKTSPS4.mjs";
 import {
   useInputGroupContext
 } from "./chunk-2AVQQGL2.mjs";

package/dist/{chunk-2STETY2J.mjs → chunk-CCFKRKGJ.mjs}

@@ -65,13 +65,18 @@ var ScrollSpy = forwardRef(function ScrollSpy2({
   const flatItems = useMemo(() => flattenScrollSpyItems(items), [items]);
   const activeKeyRef = useRef(currentActiveKey);
   activeKeyRef.current = currentActiveKey;
-  const resolvedContainer = resolveScrollSpyContainer(getContainer);
+  const hostRef = useRef(null);
+  const setHostRef = (node) => {
+    hostRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const resolvedContainer = resolveScrollSpyContainer(getContainer, hostRef.current);
   const containerKey = resolvedContainer === window ? "window" : resolvedContainer;
   const getContainerRef = useRef(getContainer);
   getContainerRef.current = getContainer;
-  const scrollLockRef = useRef(
-    createProgrammaticScrollLock(() => resolveScrollSpyContainer(getContainerRef.current))
-  );
+  const resolveContainer = () => resolveScrollSpyContainer(getContainerRef.current, hostRef.current);
+  const scrollLockRef = useRef(createProgrammaticScrollLock(() => resolveContainer()));
   const emitActive = useCallback(
     (item, source) => {
       const nextKeyString = getScrollSpyKeyString(item.key);
@@ -85,6 +90,7 @@ var ScrollSpy = forwardRef(function ScrollSpy2({
   useEffect(() => {
     return createScrollSpyObserver(items, {
       container: getContainerRef.current,
+      from: hostRef.current,
       offsetTop: offset,
       bounds,
       onChange: (item) => {
@@ -110,7 +116,7 @@ var ScrollSpy = forwardRef(function ScrollSpy2({
       onClick?.(item, event);
       emitActive(item, "click");
       scrollLockRef.current.lock();
-      activateScrollSpyClick(item, resolveScrollSpyContainer(getContainerRef.current), offset);
+      activateScrollSpyClick(item, resolveContainer(), offset);
     },
     [emitActive, offset, onClick]
   );
@@ -144,7 +150,7 @@ var ScrollSpy = forwardRef(function ScrollSpy2({
     "nav",
     {
       ...rest,
-      ref,
+      ref: setHostRef,
       className: classNames(getScrollSpyRootClasses(sticky, className)),
       style: getScrollSpyRootStyle(sticky, offset, style),
       "aria-label": ariaLabel ?? labels.ariaLabel,

package/dist/{chunk-UNT7WJ2M.mjs → chunk-DNRLMEKE.mjs}

@@ -50,7 +50,9 @@ import {
   reconcileSearchOpenKeys,
   resolveMenuCollapsed,
   resolveMenuMode,
+  resolveMenuSearchQuery,
   resolveSearchFilter,
+  shouldShowMenuSearch,
   warnControlledSearchOpenKeys
 } from "@expcat/tigercat-core";
 
@@ -201,9 +203,14 @@ function useMenuRootState(props) {
     },
     [setSearchValue]
   );
+  const showSearch = shouldShowMenuSearch(searchable, collapsed);
   const { filtered: filteredItems, expandKeys } = useMemo(
-    () => resolveSearchFilter({ items, query: searchValue, filterMode }),
-    [items, searchValue, filterMode]
+    () => resolveSearchFilter({
+      items,
+      query: resolveMenuSearchQuery(searchable, collapsed, searchValue),
+      filterMode
+    }),
+    [items, searchValue, filterMode, searchable, collapsed]
   );
   useEffect(() => {
     const current = openKeysRef.current;
@@ -285,7 +292,7 @@ function useMenuRootState(props) {
     resolvedMode,
     mode,
     contextValue,
-    searchable,
+    searchable: showSearch,
     searchValue,
     searchPlaceholder: searchPlaceholder ?? locale?.common?.searchPlaceholder ?? "Search",
     emptyText: emptyText ?? locale?.common?.emptyText ?? "No data",

package/dist/chunk-F4XF5CGQ.mjs

@@ -0,0 +1,72 @@
+import {
+  useDrag
+} from "./chunk-REJVXLW5.mjs";
+
+// src/components/Drag.tsx
+import React from "react";
+import {
+  classNames,
+  reorderSequence
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function Drag({
+  items = [],
+  onItemsChange,
+  config,
+  containerId,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  className,
+  children,
+  renderItem
+}) {
+  const itemsRef = React.useRef(items);
+  itemsRef.current = items;
+  const onItemsChangeRef = React.useRef(onItemsChange);
+  onItemsChangeRef.current = onItemsChange;
+  const onDropRef = React.useRef(onDrop);
+  onDropRef.current = onDrop;
+  const drag = useDrag({
+    config,
+    containerId,
+    onDragStart,
+    onDragOver,
+    onDragEnd,
+    onDrop: (event) => {
+      onDropRef.current?.(event);
+      if (event.fromIndex === event.toIndex) return;
+      const next = reorderSequence(itemsRef.current, event.fromIndex, event.toIndex).map(
+        (item, index) => ({ ...item, index })
+      );
+      onItemsChangeRef.current?.(next);
+    }
+  });
+  const render = children ?? renderItem;
+  const zoneProps = drag.getDropZoneProps();
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...zoneProps,
+      className: classNames("m-0 list-none p-0", className),
+      "data-tiger-drag": "",
+      role: "list",
+      children: items.map((item) => {
+        const itemProps = drag.getDragItemProps(item);
+        const node = render?.(item, {
+          dragItemProps: itemProps,
+          isDragging: drag.draggedItem?.id === item.id
+        });
+        return /* @__PURE__ */ jsx(React.Fragment, { children: node ?? /* @__PURE__ */ jsx("li", { ...itemProps, role: "listitem", children: String(item.id) }) }, item.id);
+      })
+    }
+  );
+}
+Drag.displayName = "Drag";
+var Drag_default = Drag;
+
+export {
+  Drag,
+  Drag_default
+};

package/dist/chunk-FZQUUTWN.mjs

@@ -0,0 +1,145 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Text.tsx
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  copyTextToClipboard,
+  createCopyStatusReset,
+  getCodeLabels,
+  getIconDefinition,
+  getTextClasses,
+  isTextCopyable,
+  mergeTigerLocale,
+  resolveLocaleText,
+  resolveTextCopyableOptions,
+  resolveTextCopyContent,
+  resolveTextTag,
+  textCopyableBodyClasses,
+  textCopyableButtonClasses,
+  textCopyableLiveClasses,
+  textCopyableRootClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var copyIcon = getIconDefinition("copy");
+function CopyGlyph() {
+  if (!copyIcon) return null;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: copyIcon.viewBox,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "h-3.5 w-3.5",
+      "aria-hidden": "true",
+      children: copyIcon.paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+    }
+  );
+}
+var Text = forwardRef(function Text2({
+  tag = "p",
+  size,
+  weight,
+  align,
+  color,
+  truncate,
+  italic,
+  underline,
+  lineThrough,
+  copyable,
+  locale,
+  children,
+  className,
+  onCopy,
+  ...props
+}, ref) {
+  const resolvedTag = resolveTextTag(tag);
+  const copyEnabled = isTextCopyable(copyable);
+  const copyOptions = resolveTextCopyableOptions(copyable);
+  const textClasses = classNames(
+    getTextClasses({
+      size,
+      weight,
+      align,
+      color,
+      truncate,
+      italic,
+      underline,
+      lineThrough,
+      copyable
+    }),
+    !copyEnabled && className
+  );
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getCodeLabels(mergedLocale), [mergedLocale]);
+  const idleLabel = resolveLocaleText(labels.copyLabel, copyOptions?.tooltip);
+  const [copyStatus, setCopyStatus] = useState("idle");
+  const resetRef = useRef(null);
+  if (resetRef.current == null) {
+    resetRef.current = createCopyStatusReset(setCopyStatus);
+  }
+  useEffect(() => {
+    const machine = resetRef.current;
+    return () => machine?.dispose();
+  }, []);
+  const bodyRef = useRef(null);
+  const buttonLabel = copyStatus === "failed" ? labels.copyFailedLabel : copyStatus === "copied" ? labels.copiedLabel : idleLabel;
+  const liveText = copyStatus === "idle" ? "" : buttonLabel;
+  const handleCopy = async () => {
+    if (!copyOptions) return;
+    const fallback = bodyRef.current?.textContent ?? "";
+    const text = resolveTextCopyContent(copyOptions, fallback);
+    const ok = await copyTextToClipboard(text);
+    if (ok) {
+      resetRef.current?.schedule("copied");
+      copyOptions.onCopy?.(text);
+      onCopy?.(text);
+    } else {
+      resetRef.current?.schedule("failed");
+    }
+  };
+  if (!copyEnabled) {
+    return React.createElement(resolvedTag, { ...props, ref, className: textClasses }, children);
+  }
+  return React.createElement(
+    resolvedTag,
+    { ...props, ref, className: classNames(textCopyableRootClasses, className) },
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: bodyRef,
+        className: classNames(textCopyableBodyClasses, truncate && "truncate", textClasses),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: textCopyableButtonClasses,
+        "aria-label": buttonLabel,
+        title: buttonLabel,
+        onClick: () => {
+          void handleCopy();
+        },
+        children: /* @__PURE__ */ jsx(CopyGlyph, {})
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: textCopyableLiveClasses, "aria-live": "polite", children: liveText })
+  );
+});
+Text.displayName = "Text";
+
+export {
+  Text
+};

package/dist/{chunk-NPXT436C.mjs → chunk-MMDVFCCL.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-VW6RNQK4.mjs";
 import {
   Text
-} from "./chunk-VDBLI5Y3.mjs";
+} from "./chunk-FZQUUTWN.mjs";
 import {
   Card
 } from "./chunk-WCIUNNIN.mjs";

package/dist/chunk-NCVZCG4W.mjs

@@ -0,0 +1,138 @@
+import {
+  Timeline
+} from "./chunk-4DFN6RZ4.mjs";
+import {
+  Tag
+} from "./chunk-FVA5VKN2.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
+
+// src/components/WorkflowTimeline.tsx
+import { useMemo } from "react";
+import {
+  classNames,
+  resolveWorkflowActionButtonProps,
+  shouldShowWorkflowActions,
+  timelineDescriptionClasses,
+  timelineLabelClasses,
+  workflowStepsToTimelineItems,
+  workflowStepStatusLabel,
+  workflowStepStatusTagVariant
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var workflowTimelineRootClasses = "flex flex-col gap-4";
+var workflowActionBarClasses = "flex flex-wrap items-center gap-2";
+var workflowStepHeaderClasses = "flex flex-wrap items-center gap-2";
+var workflowStepActorClasses = "text-sm text-[var(--tiger-text-muted,#6b7280)]";
+var workflowStepCommentClasses = "text-sm text-[var(--tiger-text-secondary,#4b5563)] mt-1";
+function isWorkflowTimelineItem(item) {
+  return typeof item === "object" && item != null && "step" in item && "status" in item && typeof item.status === "string";
+}
+function renderStepContent(item) {
+  const step = item.step;
+  const title = step.title ?? step.label;
+  const statusLabel = workflowStepStatusLabel(item.status);
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    step.time ? /* @__PURE__ */ jsx("div", { className: timelineLabelClasses, children: step.time }) : null,
+    /* @__PURE__ */ jsxs("div", { className: workflowStepHeaderClasses, children: [
+      title ? /* @__PURE__ */ jsx("div", { className: timelineDescriptionClasses, children: title }) : null,
+      /* @__PURE__ */ jsx(Tag, { variant: workflowStepStatusTagVariant(item.status), size: "sm", pill: true, children: statusLabel })
+    ] }),
+    step.actor?.name ? /* @__PURE__ */ jsx("div", { className: workflowStepActorClasses, children: step.actor.name }) : null,
+    step.comment ? /* @__PURE__ */ jsx("div", { className: workflowStepCommentClasses, children: step.comment }) : null
+  ] });
+}
+var WorkflowActionBar = ({
+  items,
+  disabled,
+  ariaLabel,
+  className,
+  style,
+  onAction,
+  "aria-label": ariaLabelAttr,
+  ...rest
+}) => {
+  const toolbarClasses = useMemo(() => classNames(workflowActionBarClasses, className), [className]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: toolbarClasses,
+      style,
+      role: "toolbar",
+      "aria-label": ariaLabel ?? ariaLabelAttr ?? "Workflow actions",
+      children: (items ?? []).map((item) => {
+        const buttonProps = resolveWorkflowActionButtonProps(item);
+        const isDisabled = Boolean(disabled || item.disabled);
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: buttonProps.variant,
+            danger: buttonProps.danger,
+            disabled: isDisabled,
+            onClick: () => {
+              if (isDisabled) return;
+              onAction?.(item);
+            },
+            children: item.label
+          },
+          item.key
+        );
+      })
+    }
+  );
+};
+var WorkflowTimeline = ({
+  steps,
+  actions,
+  showActions,
+  mode = "left",
+  pending = false,
+  pendingDot,
+  pendingContent,
+  reverse = false,
+  className,
+  style,
+  onAction,
+  renderItem,
+  renderDot,
+  renderActions,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  const timelineItems = useMemo(() => workflowStepsToTimelineItems(steps), [steps]);
+  const showActionBar = shouldShowWorkflowActions(steps, actions, showActions);
+  const rootClasses = useMemo(() => classNames(workflowTimelineRootClasses, className), [className]);
+  const handleRenderItem = (item, index) => {
+    if (renderItem) return renderItem(item, index);
+    if (isWorkflowTimelineItem(item)) return renderStepContent(item);
+    return null;
+  };
+  const actionBar = showActionBar && actions ? renderActions ? renderActions(actions) : /* @__PURE__ */ jsx(WorkflowActionBar, { items: actions, onAction }) : null;
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: rootClasses, style, children: [
+    /* @__PURE__ */ jsx(
+      Timeline,
+      {
+        items: timelineItems,
+        mode,
+        pending,
+        pendingDot,
+        pendingContent,
+        reverse,
+        renderItem: handleRenderItem,
+        renderDot,
+        "aria-label": ariaLabel ?? "Workflow timeline"
+      }
+    ),
+    actionBar
+  ] });
+};
+var WorkflowTimeline_default = WorkflowTimeline;
+
+export {
+  WorkflowActionBar,
+  WorkflowTimeline,
+  WorkflowTimeline_default
+};

package/dist/{chunk-25BKSXTX.mjs → chunk-NMRCBGFP.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-FVA5VKN2.mjs";
 import {
   Text
-} from "./chunk-VDBLI5Y3.mjs";
+} from "./chunk-FZQUUTWN.mjs";
 import {
   Avatar
 } from "./chunk-3KBFOO2E.mjs";

package/dist/chunk-REHHFHZ3.mjs

@@ -0,0 +1,67 @@
+import {
+  useFullscreen
+} from "./chunk-2MV3F7WP.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/FullscreenButton.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  fullscreenButtonClasses,
+  getFullscreenLabels,
+  getIconDefinition,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function Glyph({ name }) {
+  const definition = getIconDefinition(name);
+  if (!definition) return null;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: definition.viewBox,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "h-5 w-5",
+      "aria-hidden": "true",
+      children: definition.paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+    }
+  );
+}
+var FullscreenButton = forwardRef(
+  function FullscreenButton2({ target, locale, labels, className, onChange, onError, ...props }, ref) {
+    const config = useTigerConfig();
+    const labelSet = getFullscreenLabels(mergeTigerLocale(config.locale, locale), labels);
+    const fullscreen = useFullscreen({ target, onChange, onError });
+    const label = fullscreen.isFullscreen ? labelSet.exitAriaLabel : labelSet.enterAriaLabel;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...props,
+        ref,
+        type: "button",
+        className: classNames(fullscreenButtonClasses, className),
+        "aria-label": label,
+        "aria-pressed": fullscreen.isFullscreen,
+        disabled: !fullscreen.supported,
+        onClick: () => {
+          void fullscreen.toggle();
+        },
+        children: /* @__PURE__ */ jsx(Glyph, { name: fullscreen.isFullscreen ? "fullscreen-exit" : "fullscreen" })
+      }
+    );
+  }
+);
+FullscreenButton.displayName = "FullscreenButton";
+var FullscreenButton_default = FullscreenButton;
+
+export {
+  FullscreenButton,
+  FullscreenButton_default
+};

package/dist/{chunk-XI6KQAHW.mjs → chunk-RJ2FJXHT.mjs}

@@ -122,9 +122,8 @@ var Anchor = forwardRef(function Anchor2({
   getCurrentAnchorRef.current = getCurrentAnchor;
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
-  const scrollLockRef = useRef(
-    createProgrammaticScrollLock(() => resolveAnchorScrollContainer(getContainerRef.current))
-  );
+  const resolveContainer = () => resolveAnchorScrollContainer(getContainerRef.current, anchorRef.current);
+  const scrollLockRef = useRef(createProgrammaticScrollLock(() => resolveContainer()));
   const config = useTigerConfig();
   const mergedLocale = useMemo(
     () => mergeTigerLocale(config.locale, locale),
@@ -158,7 +157,7 @@ var Anchor = forwardRef(function Anchor2({
   }, []);
   const scrollTo = useCallback(
     (href) => {
-      const container = resolveAnchorScrollContainer(getContainerRef.current);
+      const container = resolveContainer();
       scrollToAnchor(href, container, scrollOffset);
     },
     [scrollOffset]
@@ -182,10 +181,10 @@ var Anchor = forwardRef(function Anchor2({
     },
     [applyActive, onClick, scrollTo]
   );
-  const resolved = resolveScrollRoot(getContainer);
+  const resolved = resolveScrollRoot(getContainer, { from: anchorRef.current });
   const resolvedKey = resolved.isWindow ? "window" : resolved.target;
   useEffect(() => {
-    const container = resolveAnchorScrollContainer(getContainerRef.current);
+    const container = resolveContainer();
     const root = container === window ? null : container;
     const stop = createAnchorObserver(links, {
       offsetTop: scrollOffset,