@expcat/tigercat-react 0.4.3 → 1.0.0

package/dist/chunk-YID7J6ZK.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var chunkHQ3QOT7H_js = require('./chunk-HQ3QOT7H.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Result = ({
+  status = "info",
+  title,
+  subTitle,
+  icon,
+  extra,
+  className,
+  children,
+  ...props
+}) => {
+  const colors = react.useMemo(() => tigercatCore.getResultColorScheme(status), [status]);
+  const iconPath = react.useMemo(() => tigercatCore.getResultIconPath(status), [status]);
+  const httpLabel = react.useMemo(() => tigercatCore.getResultHttpLabel(status), [status]);
+  const wrapperClasses = react.useMemo(() => tigercatCore.classNames(tigercatCore.resultBaseClasses, className), [className]);
+  const iconContainerCls = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.resultIconContainerBaseClasses, colors.iconBg),
+    [colors]
+  );
+  const iconSvgCls = react.useMemo(() => tigercatCore.classNames(tigercatCore.resultIconClasses, colors.iconColor), [colors]);
+  const titleCls = react.useMemo(() => tigercatCore.classNames(tigercatCore.resultTitleClasses, colors.titleColor), [colors]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, role: "status", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconContainerCls, children: icon !== void 0 ? icon : httpLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.classNames("text-5xl font-bold", colors.iconColor), children: httpLabel }) : /* @__PURE__ */ jsxRuntime.jsx(chunkHQ3QOT7H_js.StatusIcon, { path: iconPath, className: iconSvgCls }) }),
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleCls, children: title }),
+    subTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.resultSubTitleClasses, children: subTitle }),
+    extra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.resultExtraClasses, children: extra }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 w-full", children })
+  ] });
+};
+
+exports.Result = Result;

package/dist/chunk-YLZEOXFS.mjs

@@ -0,0 +1,116 @@
+import React, { useState, useRef, useMemo, useCallback } from 'react';
+import { countLines, generateLineNumbers, getCodeEditorContainerClasses, handleTabKey, getLineNumberClasses, classNames, codeEditorHighlightClasses, codeEditorTextareaClasses, tokenizeLine, getTokenClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/CodeEditor.tsx
+var CodeEditor = ({
+  value: controlledValue,
+  defaultValue = "",
+  language = "plain",
+  theme = "light",
+  readOnly = false,
+  lineNumbers = true,
+  tabSize = 2,
+  placeholder,
+  wordWrap = false,
+  minLines = 3,
+  maxLines = 0,
+  disabled = false,
+  className,
+  style,
+  onChange
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const textareaRef = useRef(null);
+  const code = controlledValue !== void 0 ? controlledValue : internalValue;
+  const lines = useMemo(() => code.split("\n"), [code]);
+  const lineCount = useMemo(() => countLines(code), [code]);
+  const lineNums = useMemo(() => generateLineNumbers(lineCount), [lineCount]);
+  const containerClasses = useMemo(
+    () => getCodeEditorContainerClasses(theme, disabled, className),
+    [theme, disabled, className]
+  );
+  const containerStyle = useMemo(() => {
+    const lineHeight = 1.625;
+    const s = { ...style };
+    if (minLines > 0) s.minHeight = `${minLines * lineHeight + 1.5}rem`;
+    if (maxLines > 0) s.maxHeight = `${maxLines * lineHeight + 1.5}rem`;
+    return s;
+  }, [minLines, maxLines, style]);
+  const handleInput = useCallback(
+    (e) => {
+      const val = e.target.value;
+      setInternalValue(val);
+      onChange?.(val);
+    },
+    [onChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const ta = textareaRef.current;
+        if (!ta) return;
+        const result = handleTabKey(ta.value, ta.selectionStart, ta.selectionEnd, tabSize);
+        setInternalValue(result.value);
+        onChange?.(result.value);
+        requestAnimationFrame(() => {
+          ta.selectionStart = result.selectionStart;
+          ta.selectionEnd = result.selectionStart;
+        });
+      }
+    },
+    [tabSize, onChange]
+  );
+  const wrapClass = wordWrap ? "whitespace-pre-wrap break-all" : "";
+  const renderToken = (token, idx) => {
+    const cls = getTokenClasses(token.type, theme);
+    return cls ? /* @__PURE__ */ jsx("span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ jsx(React.Fragment, { children: token.value }, idx);
+  };
+  const renderLine = (line, lineIndex) => {
+    const tokens = tokenizeLine(line, language);
+    return /* @__PURE__ */ jsxs("div", { className: "min-h-[1.625rem]", children: [
+      tokens.map(renderToken),
+      line === "" ? "\n" : null
+    ] }, lineIndex);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      style: containerStyle,
+      "data-language": language,
+      "data-theme": theme,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+        lineNumbers && /* @__PURE__ */ jsx("div", { className: getLineNumberClasses(theme), "aria-hidden": "true", children: lineNums.map((n) => /* @__PURE__ */ jsx("div", { className: "min-h-[1.625rem]", children: n }, n)) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: classNames(codeEditorTextareaClasses, wrapClass),
+              value: code,
+              onChange: handleInput,
+              onKeyDown: handleKeyDown,
+              readOnly: readOnly || disabled,
+              disabled,
+              placeholder,
+              spellCheck: false,
+              autoCapitalize: "off",
+              autoComplete: "off",
+              autoCorrect: "off",
+              "data-gramm": "false",
+              "aria-label": "Code editor",
+              role: "textbox",
+              "aria-multiline": true
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+var CodeEditor_default = CodeEditor;
+
+export { CodeEditor, CodeEditor_default };

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 };