@expcat/tigercat-react 2.1.3 → 2.2.0

package/README.md

@@ -35,25 +35,12 @@ function App() {
 
 ## Components
 
-172 public component entries across 9 categories. The authoritative list with
-import subpaths lives in
-[component-index.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/component-index.md)
-(generated); the table below is only a sampler.
-
-| Category       | Count | Examples                                                      |
-| -------------- | ----- | ------------------------------------------------------------- |
-| **Basic**      | 30    | Button, Alert, Avatar, Badge, Icon, Tag, Text, Result, QRCode |
-| **Form**       | 31    | Input, Select, DatePicker, Form, Upload, InputOTP, TagsInput  |
-| **Layout**     | 19    | Card, Row/Col, Layout, List, Descriptions, Skeleton, Space    |
-| **Navigation** | 33    | Menu, Tabs, Breadcrumb, Pagination, Steps, Dropdown, Tree     |
-| **Feedback**   | 13    | Modal, Drawer, Message, Popover, Tooltip, Progress, Tour      |
-| **Data**       | 7     | Table, Calendar, Collapse, Timeline, DataExport               |
-| **Charts**     | 20    | BarChart, LineChart, PieChart, RadarChart, GaugeChart, Gantt  |
-| **Advanced**   | 12    | VirtualTable, VirtualList, RichTextEditor, CodeEditor         |
-| **Composite**  | 7     | DataTableWithToolbar, ChatWindow, FormWizard, TaskBoard       |
-
-`Message` and `notification` are also available as imperative command APIs from
-the package root; `notification` is a command API, not a component.
+Sampler: Button, Avatar, Badge, Input, Select, DatePicker, Form, Card, Layout, Menu, Tabs, Modal, Drawer, Table, BarChart, LineChart, VirtualTable, RichTextEditor, DataTableWithToolbar, ChatWindow. The generated catalog with import subpaths is
+[component-index.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/component-index.md).
+
+`Message`, `notification`, and `LoadingBar` are root command APIs;
+[command-apis.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/command-apis.md).
+`notification` is not a component.
 
 ## Hooks
 
@@ -63,6 +50,13 @@ the package root; `notification` is a command API, not a component.
 `useBreadcrumbContext` and `useStepsContext`. Signatures are listed in
 [api-summary.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/references/shared/api-summary.md).
 
+## Next
+
+- Install, compatibility, and MCP client config:
+  [root README](https://github.com/expcat/Tigercat/blob/main/README.md)
+- Agent docs:
+  [SKILL.md](https://github.com/expcat/Tigercat/blob/main/skills/tigercat/SKILL.md)
+
 ## License
 
 [MIT](https://opensource.org/licenses/MIT)

package/dist/{chunk-65CDWNRJ.mjs → chunk-2IOF3EC7.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-7P4R3NVO.mjs";
 import {
   ChartTooltip
-} from "./chunk-IPI45RUK.mjs";
+} from "./chunk-JX2WKSVM.mjs";
 import {
   ChartCanvas
 } from "./chunk-OP77MPGN.mjs";

package/dist/{chunk-5I7FKHZO.mjs → chunk-2MKDIXBP.mjs}

@@ -11,7 +11,7 @@ import {
   renderOverlayPortal,
   useAnchoredOverlay,
   useFocusTrap
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

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-WLCRBIZO.mjs → chunk-2W4SH2IG.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ED7QR6PJ.mjs";
 import {
   renderBodyPortal
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   getGlobalTigerLocale,
   useTigerConfig

package/dist/{chunk-YLXEMZVI.mjs → chunk-3C62ULJT.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-ED7QR6PJ.mjs";
 import {
   renderBodyPortal
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   getGlobalTigerLocale,
   useTigerConfig

package/dist/{chunk-6IJFLGCN.mjs → chunk-3QXXNK5X.mjs}

@@ -9,7 +9,7 @@ import {
   useBodyScrollLock,
   useEscapeKey,
   useFocusTrap
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-KVXGNUIE.mjs → chunk-4IVRLBKW.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-OYQ6HTLQ.mjs";
+} from "./chunk-SGKPZW57.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-YCVORYEO.mjs → chunk-532OVXLV.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-CJSB5NOK.mjs";
+} from "./chunk-H3UEVWOO.mjs";
 import {
   Button
 } from "./chunk-WFLXJOFU.mjs";
@@ -19,6 +19,7 @@ import {
   getSplitButtonRootClasses,
   getSplitButtonTriggerClasses,
   resolveLocaleText,
+  splitButtonDropdownClasses,
   resolveSplitButtonSize,
   resolveSplitButtonTriggerAriaLabel,
   resolveSplitButtonVariant
@@ -139,6 +140,7 @@ var SplitButton = forwardRef(function SplitButton2({
     hasMenu ? /* @__PURE__ */ jsx(
       Dropdown,
       {
+        className: splitButtonDropdownClasses,
         trigger: "click",
         showArrow: false,
         asChild: true,

package/dist/{chunk-R7J37DKJ.mjs → chunk-5TQFSORK.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-XKB7ECPU.mjs";
+} from "./chunk-S37KEELR.mjs";
 import {
   composeRefs,
   renderOverlayTrigger
@@ -11,7 +11,7 @@ import {
 import {
   renderOverlayPortal,
   useFocusTrap
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-ZATZSMQY.mjs → chunk-6L7RWLOU.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-ST4NN6XV.mjs";
 import {
   ChartTooltip
-} from "./chunk-IPI45RUK.mjs";
+} from "./chunk-JX2WKSVM.mjs";
 import {
   ChartAxis
 } from "./chunk-XZFHPHV5.mjs";

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

@@ -6,13 +6,13 @@ import {
 } from "./chunk-WQMOFDAY.mjs";
 import {
   Loading
-} from "./chunk-BNCUJLRV.mjs";
+} from "./chunk-VW6RNQK4.mjs";
 import {
   Tag
 } 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-U7V7ZWJ6.mjs → chunk-7QM2ZC52.mjs}

@@ -8,7 +8,7 @@ import {
   renderBodyPortal,
   useClickOutside,
   useEscapeKey
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-M7TSPEXC.mjs → chunk-A2PQJEII.mjs}

@@ -10,7 +10,7 @@ import {
 import {
   renderOverlayPortal,
   useAnchoredOverlay
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-5P3OFNH3.mjs → chunk-ACHXTII7.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-7P4R3NVO.mjs";
 import {
   ChartTooltip
-} from "./chunk-IPI45RUK.mjs";
+} from "./chunk-JX2WKSVM.mjs";
 import {
   ChartCanvas
 } from "./chunk-OP77MPGN.mjs";

package/dist/{chunk-EJY3Y2XU.mjs → chunk-AHQR57Z4.mjs}

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "./chunk-IR45LOEZ.mjs";
+} from "./chunk-UGKTSPS4.mjs";
 import {
   useInputGroupContext
 } from "./chunk-2AVQQGL2.mjs";
@@ -14,7 +14,7 @@ import {
   renderOverlayPortal,
   useAnchoredOverlay,
   useFocusTrap
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-2N6WZ5Z5.mjs → chunk-BNC4MMVG.mjs}

@@ -299,7 +299,7 @@ var Slider = forwardRef(function Slider2({
     {
       ...divProps,
       ref: setRootRef,
-      className: getSliderRootClasses(effectiveDisabled, className),
+      className: getSliderRootClasses(effectiveDisabled, className, tooltip),
       "data-status": status === "default" ? void 0 : status,
       children: [
         /* @__PURE__ */ jsx("div", { className: sliderHitAreaClasses, onPointerDown: handleTrackPointerDown, children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: trackClasses, onPointerDown: handleTrackPointerDown, children: [

package/dist/{chunk-I4P4T6LL.mjs → chunk-BVSR27AF.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-7P4R3NVO.mjs";
 import {
   ChartTooltip
-} from "./chunk-IPI45RUK.mjs";
+} from "./chunk-JX2WKSVM.mjs";
 import {
   ChartCanvas
 } from "./chunk-OP77MPGN.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-N53N6H54.mjs → chunk-CQGDJU2H.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-XKB7ECPU.mjs";
+} from "./chunk-S37KEELR.mjs";
 import {
   composeRefs,
   renderOverlayTrigger
@@ -8,7 +8,7 @@ import {
 import {
   renderOverlayPortal,
   useFocusTrap
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 
 // src/components/Popover.tsx
 import { forwardRef, useEffect, useId, useMemo } from "react";

package/dist/{chunk-GRB667BG.mjs → chunk-DDSY5FPV.mjs}

@@ -10,7 +10,7 @@ import {
 import {
   renderOverlayPortal,
   useAnchoredOverlay
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-OIMP63RE.mjs → chunk-DJLVNYZD.mjs}

@@ -10,7 +10,7 @@ import {
 import {
   renderOverlayPortal,
   useAnchoredOverlay
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

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

@@ -10,7 +10,7 @@ import {
 import {
   renderOverlayPortal,
   useAnchoredOverlay
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.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-PZ4LAI6G.mjs → chunk-EK7R3MIN.mjs}

@@ -6,7 +6,7 @@ import {
   useBodyScrollLock,
   useEscapeKey,
   useFocusTrap
-} from "./chunk-NPGU6VYD.mjs";
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
 } from "./chunk-RUIFGSVN.mjs";

package/dist/{chunk-RTKPLZ5A.mjs → chunk-EVO4YVSD.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-OYQ6HTLQ.mjs";
+} from "./chunk-SGKPZW57.mjs";
 import {
   Icon
 } from "./chunk-WPRXOO6N.mjs";

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-GMHJWSQB.mjs → chunk-FTLA6FRU.mjs}

@@ -1,6 +1,6 @@
 import {
   Select
-} from "./chunk-M7TSPEXC.mjs";
+} from "./chunk-A2PQJEII.mjs";
 import {
   Radio
 } from "./chunk-4KZETZUH.mjs";
@@ -18,7 +18,7 @@ import {
 } from "./chunk-HAG7TGPS.mjs";
 import {
   Loading
-} from "./chunk-BNCUJLRV.mjs";
+} from "./chunk-VW6RNQK4.mjs";
 import {
   Button
 } from "./chunk-WFLXJOFU.mjs";