@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/chunk-YPHOVEVU.mjs

@@ -0,0 +1,118 @@
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { extractMentionQuery, classNames, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Mentions.tsx
+var Mentions = ({
+  value = "",
+  prefix: triggerPrefix = "@",
+  options = [],
+  placeholder,
+  disabled = false,
+  size = "md",
+  rows = 3,
+  onChange,
+  onSelect,
+  className
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [query, setQuery] = useState("");
+  const mentionStartRef = useRef(-1);
+  const textareaRef = useRef(null);
+  const containerRef = useRef(null);
+  const filteredOptions = useMemo(() => {
+    if (!query) return options;
+    const q = query.toLowerCase();
+    return options.filter((o) => !o.disabled && o.label.toLowerCase().includes(q));
+  }, [options, query]);
+  const handleInput = useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      onChange?.(newValue);
+      const cursorPos = e.target.selectionStart ?? newValue.length;
+      const result = extractMentionQuery(newValue, cursorPos, triggerPrefix);
+      if (result && options.length > 0) {
+        setQuery(result.query);
+        mentionStartRef.current = result.startPos;
+        setIsOpen(true);
+        setActiveIndex(0);
+      } else {
+        setIsOpen(false);
+      }
+    },
+    [onChange, triggerPrefix, options.length]
+  );
+  const selectOption = useCallback(
+    (option) => {
+      if (option.disabled) return;
+      const before = value.slice(0, mentionStartRef.current);
+      const cursorPos = textareaRef.current?.selectionStart ?? value.length;
+      const after = value.slice(cursorPos);
+      const newValue = `${before}${triggerPrefix}${option.value} ${after}`;
+      onChange?.(newValue);
+      onSelect?.(option);
+      setIsOpen(false);
+    },
+    [value, triggerPrefix, onChange, onSelect]
+  );
+  const handleKeydown = useCallback(
+    (e) => {
+      if (!isOpen) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => (prev + 1) % filteredOptions.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => (prev - 1 + filteredOptions.length) % filteredOptions.length);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const opt = filteredOptions[activeIndex];
+        if (opt) selectOption(opt);
+      } else if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    },
+    [isOpen, filteredOptions, activeIndex, selectOption]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen]);
+  const wrapperClass = classNames("relative", className);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: wrapperClass, children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        value,
+        className: getMentionsInputClasses(size, disabled),
+        placeholder,
+        disabled,
+        rows,
+        onChange: handleInput,
+        onKeyDown: handleKeydown
+      }
+    ),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: mentionsDropdownClasses, role: "listbox", children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: getMentionsOptionClasses(i === activeIndex, !!opt.disabled),
+        role: "option",
+        "aria-selected": i === activeIndex,
+        onClick: () => selectOption(opt),
+        children: opt.label
+      },
+      opt.value
+    )) })
+  ] });
+};
+var Mentions_default = Mentions;
+
+export { Mentions, Mentions_default };

package/dist/chunk-YXWRSEP5.mjs

@@ -0,0 +1,286 @@
+import { useControlledState } from './chunk-UQMPEMY7.mjs';
+import React, { useRef, useMemo, useState, useCallback } from 'react';
+import { filterColumns, setDragData, createCardDragData, createColumnDragData, getDropIndex, getColumnDropIndex, parseDragData, moveCard, reorderColumns, classNames, getKanbanContainerClasses, isWipExceeded, getColumnCardCount, kanbanCardCountClasses, taskBoardWipExceededClasses, taskBoardColumnHeaderClasses, taskBoardColumnBodyClasses, taskBoardEmptyClasses, taskBoardDropIndicatorClasses, taskBoardCardClasses, taskBoardCardDraggingClasses, kanbanAddCardClasses, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, kanbanAddColumnClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var Kanban = ({
+  columns: controlledColumns,
+  defaultColumns = [],
+  draggable = true,
+  columnDraggable = true,
+  enforceWipLimit = false,
+  beforeCardMove,
+  beforeColumnMove,
+  filterText = "",
+  hiddenColumns,
+  showCardCount = true,
+  allowAddCard = true,
+  allowAddColumn = false,
+  onCardMove,
+  onColumnMove,
+  onColumnsChange,
+  onCardAdd,
+  onColumnAdd,
+  renderCard,
+  renderColumnHeader,
+  className,
+  ...restProps
+}) => {
+  const boardRef = useRef(null);
+  const [rawColumns, setInternalColumns, isControlled] = useControlledState(
+    controlledColumns,
+    defaultColumns
+  );
+  const visibleColumns = useMemo(
+    () => filterColumns(rawColumns, filterText, hiddenColumns),
+    [rawColumns, filterText, hiddenColumns]
+  );
+  const [dragState, setDragState] = useState(null);
+  const [dropTargetCol, setDropTargetCol] = useState(null);
+  const [dropTargetIdx, setDropTargetIdx] = useState(-1);
+  function updateColumns(cols) {
+    if (!isControlled) setInternalColumns(cols);
+    onColumnsChange?.(cols);
+  }
+  function resetDrag() {
+    setDragState(null);
+    setDropTargetCol(null);
+    setDropTargetIdx(-1);
+  }
+  const handleCardDragStart = useCallback(
+    (e, card, colId, idx) => {
+      if (!draggable) return;
+      setDragData(e.nativeEvent.dataTransfer, createCardDragData(card.id, colId, idx));
+      setDragState({ type: "card", id: card.id, fromColumnId: colId, fromIndex: idx });
+    },
+    [draggable]
+  );
+  const handleColumnDragStart = useCallback(
+    (e, colId, idx) => {
+      if (!columnDraggable) return;
+      setDragData(e.nativeEvent.dataTransfer, createColumnDragData(colId, idx));
+      setDragState({ type: "column", id: colId, fromIndex: idx });
+    },
+    [columnDraggable]
+  );
+  const handleDragOver = useCallback(
+    (e, colId) => {
+      e.preventDefault();
+      if (!dragState) return;
+      setDropTargetCol(colId);
+      if (dragState.type === "card") {
+        const colEl = e.currentTarget.querySelector("[data-kanban-body]");
+        if (colEl) {
+          const cards = Array.from(colEl.querySelectorAll("[data-kanban-card]"));
+          const rects = cards.map((c) => c.getBoundingClientRect());
+          setDropTargetIdx(getDropIndex(e.clientY, rects));
+        }
+      }
+    },
+    [dragState]
+  );
+  const handleColumnDragOver = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!dragState || dragState.type !== "column") return;
+      const boardEl = boardRef.current;
+      if (!boardEl) return;
+      const cols = Array.from(boardEl.querySelectorAll("[data-kanban-column]"));
+      const rects = cols.map((c) => c.getBoundingClientRect());
+      setDropTargetIdx(getColumnDropIndex(e.clientX, rects));
+    },
+    [dragState]
+  );
+  const handleDrop = useCallback(
+    async (e) => {
+      e.preventDefault();
+      const data = parseDragData(e.nativeEvent.dataTransfer);
+      if (!data || !dragState) {
+        resetDrag();
+        return;
+      }
+      if (data.type === "card" && dropTargetCol != null) {
+        if (beforeCardMove) {
+          const evt = {
+            cardId: data.cardId,
+            fromColumnId: data.columnId,
+            toColumnId: dropTargetCol,
+            fromIndex: data.index,
+            toIndex: dropTargetIdx
+          };
+          const ok = await beforeCardMove(evt);
+          if (!ok) {
+            resetDrag();
+            return;
+          }
+        }
+        const result = moveCard(
+          rawColumns,
+          data.cardId,
+          data.columnId,
+          dropTargetCol,
+          dropTargetIdx,
+          { enforceWipLimit }
+        );
+        if (result) {
+          updateColumns(result.columns);
+          onCardMove?.(result.event);
+        }
+      } else if (data.type === "column") {
+        if (beforeColumnMove) {
+          const evt = {
+            columnId: data.columnId,
+            fromIndex: data.index,
+            toIndex: dropTargetIdx
+          };
+          const ok = await beforeColumnMove(evt);
+          if (!ok) {
+            resetDrag();
+            return;
+          }
+        }
+        const result = reorderColumns(rawColumns, data.index, dropTargetIdx);
+        if (result) {
+          updateColumns(result.columns);
+          onColumnMove?.(result.event);
+        }
+      }
+      resetDrag();
+    },
+    [
+      dragState,
+      dropTargetCol,
+      dropTargetIdx,
+      rawColumns,
+      enforceWipLimit,
+      beforeCardMove,
+      beforeColumnMove,
+      onCardMove,
+      onColumnMove
+    ]
+  );
+  const containerClasses = useMemo(
+    () => classNames(getKanbanContainerClasses(className)),
+    [className]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: boardRef,
+      className: containerClasses,
+      role: "region",
+      "aria-label": "Kanban board",
+      onDragOver: handleColumnDragOver,
+      ...restProps,
+      children: [
+        visibleColumns.map((col, colIdx) => {
+          const wipExceeded = isWipExceeded(col);
+          const cardCount = getColumnCardCount(col);
+          const isDragOverCol = dropTargetCol === col.id;
+          const isColDragging = dragState?.type === "column" && dragState.id === col.id;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: classNames(
+                taskBoardColumnClasses,
+                isDragOverCol && dragState?.type === "card" && taskBoardColumnDropTargetClasses,
+                isColDragging && taskBoardColumnDraggingClasses
+              ),
+              "data-kanban-column": "",
+              draggable: columnDraggable,
+              onDragStart: (e) => handleColumnDragStart(e, col.id, colIdx),
+              onDragOver: (e) => handleDragOver(e, col.id),
+              onDrop: handleDrop,
+              onDragEnd: resetDrag,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: classNames(
+                      taskBoardColumnHeaderClasses,
+                      wipExceeded && taskBoardWipExceededClasses
+                    ),
+                    children: [
+                      renderColumnHeader ? renderColumnHeader(col) : /* @__PURE__ */ jsx("span", { children: col.title }),
+                      showCardCount && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: classNames(
+                            kanbanCardCountClasses,
+                            wipExceeded && taskBoardWipExceededClasses
+                          ),
+                          children: cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: taskBoardColumnBodyClasses, "data-kanban-body": "", children: [
+                  col.cards.length === 0 ? /* @__PURE__ */ jsx("div", { className: taskBoardEmptyClasses, children: "No cards" }) : col.cards.map((card, cardIdx) => {
+                    const isCardDragging = dragState?.type === "card" && dragState.id === card.id;
+                    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                      isDragOverCol && dragState?.type === "card" && dropTargetIdx === cardIdx && /* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: classNames(
+                            taskBoardCardClasses,
+                            isCardDragging && taskBoardCardDraggingClasses
+                          ),
+                          draggable,
+                          "data-kanban-card": "",
+                          onDragStart: (e) => handleCardDragStart(e, card, col.id, cardIdx),
+                          children: renderCard ? renderCard(card, col.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx("div", { className: "font-medium text-sm", children: card.title }),
+                            card.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--tiger-text-muted,#6b7280)] mt-1", children: card.description })
+                          ] })
+                        }
+                      )
+                    ] }, card.id);
+                  }),
+                  isDragOverCol && dragState?.type === "card" && dropTargetIdx >= col.cards.length && /* @__PURE__ */ jsx("div", { className: taskBoardDropIndicatorClasses })
+                ] }),
+                allowAddCard && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: kanbanAddCardClasses,
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: () => onCardAdd?.(col.id),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onCardAdd?.(col.id);
+                      }
+                    },
+                    children: "+ Add card"
+                  }
+                )
+              ]
+            },
+            col.id
+          );
+        }),
+        allowAddColumn && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: kanbanAddColumnClasses,
+            role: "button",
+            tabIndex: 0,
+            onClick: () => onColumnAdd?.(),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onColumnAdd?.();
+              }
+            },
+            children: "+ Add column"
+          }
+        )
+      ]
+    }
+  );
+};
+var Kanban_default = Kanban;
+
+export { Kanban, Kanban_default };

package/dist/chunk-Z6CRXABX.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Affix.tsx
+var Affix = ({
+  offsetTop = 0,
+  offsetBottom,
+  target,
+  zIndex = 10,
+  className,
+  children,
+  onChange,
+  ...props
+}) => {
+  const wrapperRef = react.useRef(null);
+  const placeholderRef = react.useRef(null);
+  const originalRectRef = react.useRef(null);
+  const [state, setState] = react.useState({ affixed: false, style: {} });
+  const prevAffixed = react.useRef(false);
+  const update = react.useCallback(() => {
+    const el = prevAffixed.current && placeholderRef.current ? placeholderRef.current : wrapperRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    if (!originalRectRef.current || !prevAffixed.current) {
+      originalRectRef.current = {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      };
+    }
+    const resolved = tigercatCore.resolveAffixTarget(target);
+    const containerRect = resolved.getRect();
+    const newState = tigercatCore.calculateAffixState(
+      originalRectRef.current,
+      containerRect,
+      offsetBottom !== void 0 ? void 0 : offsetTop,
+      offsetBottom,
+      zIndex
+    );
+    if (newState.affixed !== prevAffixed.current) {
+      prevAffixed.current = newState.affixed;
+      onChange?.(newState.affixed);
+    }
+    setState(newState);
+  }, [offsetTop, offsetBottom, target, zIndex, onChange]);
+  react.useEffect(() => {
+    const resolved = tigercatCore.resolveAffixTarget(target);
+    const scrollEl = resolved.element;
+    scrollEl.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update, { passive: true });
+    update();
+    return () => {
+      scrollEl.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [target, update]);
+  const wrapperClasses = react.useMemo(() => tigercatCore.classNames(className), [className]);
+  if (state.affixed) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: placeholderRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            width: originalRectRef.current?.width ?? 0,
+            height: originalRectRef.current?.height ?? 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: wrapperRef,
+          className: wrapperClasses,
+          style: state.style,
+          ...props,
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, className: wrapperClasses, ...props, children });
+};
+
+exports.Affix = Affix;

package/dist/chunk-ZCBKAOAX.mjs

@@ -0,0 +1,40 @@
+import { createContext, useContext, useMemo } from 'react';
+import { classNames, getInputGroupClasses, getInputGroupAddonClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/InputGroup.tsx
+var InputGroupContext = createContext(null);
+function useInputGroupContext() {
+  return useContext(InputGroupContext);
+}
+var InputGroup = ({
+  size = "md",
+  compact = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const contextValue = useMemo(() => ({ size, compact }), [size, compact]);
+  const groupClasses = useMemo(
+    () => classNames(getInputGroupClasses(compact, className)),
+    [compact, className]
+  );
+  return /* @__PURE__ */ jsx(InputGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+};
+var InputGroupAddon = ({
+  addonType = "text",
+  className,
+  children,
+  ...rest
+}) => {
+  const ctx = useInputGroupContext();
+  const size = ctx?.size ?? "md";
+  const compact = ctx?.compact ?? true;
+  const addonClasses = useMemo(
+    () => classNames(getInputGroupAddonClasses(size, compact, className)),
+    [size, compact, className]
+  );
+  return /* @__PURE__ */ jsx("span", { ...rest, className: addonClasses, children });
+};
+
+export { InputGroup, InputGroupAddon, InputGroupContext, useInputGroupContext };

package/dist/{chunk-24U2DQRP.mjs → chunk-ZD4BVRYG.mjs}

@@ -1,4 +1,4 @@
-import { DropdownContext } from './chunk-WGRYO5HX.mjs';
+import { DropdownContext } from './chunk-2UQC3WOI.mjs';
 import { useContext } from 'react';
 import { classNames, getDropdownItemClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
@@ -29,6 +29,7 @@ var DropdownItem = ({
       type: "button",
       className: itemClasses,
       role: "menuitem",
+      tabIndex: -1,
       "aria-disabled": disabled,
       disabled,
       onClick: handleClick,

package/dist/chunk-ZRHDNGWO.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Empty.tsx
+var Empty = ({
+  preset = "default",
+  description,
+  showImage = true,
+  image,
+  extra,
+  className,
+  children,
+  ...props
+}) => {
+  const descText = react.useMemo(() => description ?? tigercatCore.getEmptyDescription(preset), [description, preset]);
+  const wrapperClasses = react.useMemo(() => tigercatCore.classNames(tigercatCore.emptyBaseClasses, className), [className]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, ...props, children: [
+    showImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.emptyImageClasses, children: image !== void 0 ? image : /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: tigercatCore.emptyIllustrationViewBox,
+        className: "mx-auto h-24 w-24",
+        children: tigercatCore.emptyIllustrationPaths.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: p.d,
+            fill: p.fill ?? "none",
+            stroke: p.stroke,
+            strokeWidth: p.strokeWidth,
+            opacity: p.opacity
+          },
+          i
+        ))
+      }
+    ) }),
+    descText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.emptyDescriptionClasses, children: descText }),
+    extra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.emptyActionsClasses, children: extra }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+  ] });
+};
+
+exports.Empty = Empty;