@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-PVOQUXIB.mjs → chunk-LL6B4BHF.mjs}

@@ -1,7 +1,7 @@
-import { Input } from './chunk-6ZTCBQJ7.mjs';
-import { Textarea } from './chunk-672SCJWZ.mjs';
-import { Button } from './chunk-STEIWBMF.mjs';
-import { Avatar } from './chunk-V2HVHLBY.mjs';
+import { Input } from './chunk-RPTLVIBF.mjs';
+import { Textarea } from './chunk-VCNZEQEB.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
+import { Avatar } from './chunk-FE7PEZTI.mjs';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { classNames, getChatMessageStatusInfo, formatChatTime } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/chunk-LXQOQJMU.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var chunkMWH6FCSE_js = require('./chunk-MWH6FCSE.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var createPopoverId = tigercatCore.createFloatingIdFactory("popover");
+var Popover = ({
+  visible,
+  defaultVisible = false,
+  title,
+  content,
+  trigger = "click",
+  placement = "top",
+  disabled = false,
+  width,
+  offset = 8,
+  className,
+  style,
+  children,
+  titleContent,
+  contentContent,
+  onVisibleChange,
+  ...divProps
+}) => {
+  const popoverIdRef = react.useRef(null);
+  if (!popoverIdRef.current) popoverIdRef.current = createPopoverId();
+  const popoverId = popoverIdRef.current;
+  const titleId = `${popoverId}-title`;
+  const contentId = `${popoverId}-content`;
+  const {
+    currentVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    floatingStyles,
+    triggerHandlers
+  } = chunkMWH6FCSE_js.usePopup({ visible, defaultVisible, disabled, trigger, placement, offset, onVisibleChange });
+  const containerClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getPopoverContainerClasses(), className),
+    [className]
+  );
+  const triggerClasses = react.useMemo(() => tigercatCore.getPopoverTriggerClasses(disabled), [disabled]);
+  const contentClasses = react.useMemo(() => tigercatCore.getPopoverContentClasses(width), [width]);
+  if (!children) return null;
+  const hasTitle = Boolean(title || titleContent);
+  const hasContent = Boolean(content || contentContent);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: triggerClasses,
+        "aria-haspopup": "dialog",
+        "aria-disabled": disabled ? "true" : void 0,
+        ...triggerHandlers,
+        children
+      }
+    ),
+    currentVisible && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        id: popoverId,
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-labelledby": hasTitle ? titleId : void 0,
+        "aria-describedby": hasContent ? contentId : void 0,
+        className: contentClasses,
+        children: [
+          hasTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: tigercatCore.POPOVER_TITLE_CLASSES, children: titleContent || title }),
+          hasContent && /* @__PURE__ */ jsxRuntime.jsx("div", { id: contentId, className: tigercatCore.POPOVER_TEXT_CLASSES, children: contentContent || content })
+        ]
+      }
+    ) })
+  ] });
+};
+
+exports.Popover = Popover;

package/dist/{chunk-HT2BXCEM.js → chunk-M46L73HR.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkR7MS42PL_js = require('./chunk-R7MS42PL.js');
-var chunkA3DJSVTE_js = require('./chunk-A3DJSVTE.js');
-var chunk2TS6X5RA_js = require('./chunk-2TS6X5RA.js');
-var chunkYYGTJKP5_js = require('./chunk-YYGTJKP5.js');
-var chunkTZ26HQAW_js = require('./chunk-TZ26HQAW.js');
+var chunkVCOBBJLP_js = require('./chunk-VCOBBJLP.js');
+var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var chunkVCULFIZ5_js = require('./chunk-VCULFIZ5.js');
+var chunkI5TCE5E7_js = require('./chunk-I5TCE5E7.js');
+var chunkCI2WHAT2_js = require('./chunk-CI2WHAT2.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -85,7 +85,7 @@ var CommentThread = ({
   const ACTION_BTN = `${BTN_BASE} text-gray-400 hover:text-gray-600 font-normal hover:bg-gray-50`;
   const PRIMARY_BTN = `${BTN_BASE} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-medium hover:bg-[var(--tiger-primary,#2563eb)]/5`;
   const renderActionButton = (label, key, onClick, active) => /* @__PURE__ */ jsxRuntime.jsx(
-    chunkA3DJSVTE_js.Button,
+    chunkF24IF2QL_js.Button,
     {
       size: "sm",
       variant: "ghost",
@@ -135,7 +135,7 @@ var CommentThread = ({
         const actionKey = action.key ?? `${node.id}-action-${index}`;
         actions.push(
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkA3DJSVTE_js.Button,
+            chunkF24IF2QL_js.Button,
             {
               size: "sm",
               variant: action.variant ?? "ghost",
@@ -162,7 +162,7 @@ var CommentThread = ({
         ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
           showAvatar && node.user ? /* @__PURE__ */ jsxRuntime.jsx(
-            chunkTZ26HQAW_js.Avatar,
+            chunkCI2WHAT2_js.Avatar,
             {
               size: depth === 1 ? "md" : "sm",
               src: node.user.avatar,
@@ -172,17 +172,17 @@ var CommentThread = ({
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-              node.user?.name ? /* @__PURE__ */ jsxRuntime.jsx(chunkYYGTJKP5_js.Text, { tag: "span", size: "sm", weight: "bold", children: node.user.name }) : null,
-              node.user?.title ? /* @__PURE__ */ jsxRuntime.jsx(chunkYYGTJKP5_js.Text, { tag: "span", size: "xs", color: "muted", children: node.user.title }) : null,
-              node.tag ? /* @__PURE__ */ jsxRuntime.jsx(chunk2TS6X5RA_js.Tag, { size: "sm", variant: node.tag.variant ?? "default", children: node.tag.label }) : null,
-              node.tags?.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(chunk2TS6X5RA_js.Tag, { size: "sm", variant: tag.variant ?? "default", children: tag.label }, `${node.id}-tag-${index}`)),
-              node.time ? /* @__PURE__ */ jsxRuntime.jsx(chunkYYGTJKP5_js.Text, { tag: "span", size: "xs", color: "muted", className: "ml-auto", children: tigercatCore.formatCommentTime(node.time) }) : null
+              node.user?.name ? /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_js.Text, { tag: "span", size: "sm", weight: "bold", children: node.user.name }) : null,
+              node.user?.title ? /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_js.Text, { tag: "span", size: "xs", color: "muted", children: node.user.title }) : null,
+              node.tag ? /* @__PURE__ */ jsxRuntime.jsx(chunkVCULFIZ5_js.Tag, { size: "sm", variant: node.tag.variant ?? "default", children: node.tag.label }) : null,
+              node.tags?.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(chunkVCULFIZ5_js.Tag, { size: "sm", variant: tag.variant ?? "default", children: tag.label }, `${node.id}-tag-${index}`)),
+              node.time ? /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_js.Text, { tag: "span", size: "xs", color: "muted", className: "ml-auto", children: tigercatCore.formatCommentTime(node.time) }) : null
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed break-words mt-1.5 mb-2", children: node.content }),
             actions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1", children: actions }) : null,
             replyingTo === node.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-lg", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkR7MS42PL_js.Textarea,
+                chunkVCOBBJLP_js.Textarea,
                 {
                   rows: 2,
                   value: replyValue,
@@ -193,7 +193,7 @@ var CommentThread = ({
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 justify-end", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkA3DJSVTE_js.Button,
+                  chunkF24IF2QL_js.Button,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -204,11 +204,11 @@ var CommentThread = ({
                     children: cancelReplyText
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(chunkA3DJSVTE_js.Button, { size: "sm", variant: "primary", onClick: () => handleReplySubmit(node), children: replyButtonText })
+                /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { size: "sm", variant: "primary", onClick: () => handleReplySubmit(node), children: replyButtonText })
               ] })
             ] }) : null,
             hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
-              chunkA3DJSVTE_js.Button,
+              chunkF24IF2QL_js.Button,
               {
                 size: "sm",
                 variant: "ghost",
@@ -229,7 +229,7 @@ var CommentThread = ({
                     (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
                   ),
                   showLoadMoreBtn ? /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkA3DJSVTE_js.Button,
+                    chunkF24IF2QL_js.Button,
                     {
                       size: "sm",
                       variant: "ghost",
@@ -254,7 +254,7 @@ var CommentThread = ({
       "data-tiger-comment-thread": true,
       "aria-label": divProps["aria-label"] ?? (divProps["aria-labelledby"] ? void 0 : "\u8BC4\u8BBA\u7EBF\u7A0B"),
       ...divProps,
-      children: resolvedNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(chunkYYGTJKP5_js.Text, { tag: "div", size: "sm", color: "muted", className: "text-center py-8", children: emptyText }) : resolvedNodes.map((node, index) => renderNode(node, 1, index === resolvedNodes.length - 1))
+      children: resolvedNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_js.Text, { tag: "div", size: "sm", color: "muted", className: "text-center py-8", children: emptyText }) : resolvedNodes.map((node, index) => renderNode(node, 1, index === resolvedNodes.length - 1))
     }
   );
 };

package/dist/{chunk-NMDNLB3C.mjs → chunk-MDZDPGRK.mjs}

@@ -1,19 +1,8 @@
 import { useId, useState, useRef, useMemo, useEffect } from 'react';
-import { filterOptions, getSelectTriggerClasses, classNames, selectBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, selectDropdownBaseClasses, selectSearchInputClasses, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, checkSolidIcon20PathD } from '@expcat/tigercat-core';
+import { filterOptions, flattenSelectOptions, getSelectTriggerClasses, classNames, selectBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, selectDropdownBaseClasses, selectSearchInputClasses, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, checkSolidIcon20PathD } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Select.tsx
-var flattenSelectOptions = (options) => {
-  const all = [];
-  for (const item of options) {
-    if (isOptionGroup(item)) {
-      all.push(...item.options);
-    } else {
-      all.push(item);
-    }
-  }
-  return all;
-};
 var isMultipleSelect = (props) => props.multiple === true;
 var Select = (props) => {
   const {
@@ -28,9 +17,25 @@ var Select = (props) => {
     onSearch,
     className
   } = props;
-  const divProps = (({ value: _value, onChange: _onChange, multiple: _multiple, ...rest }) => rest)(
-    props
-  );
+  const SELECT_KEYS = /* @__PURE__ */ new Set([
+    "options",
+    "size",
+    "disabled",
+    "placeholder",
+    "searchable",
+    "clearable",
+    "noOptionsText",
+    "noDataText",
+    "onSearch",
+    "className",
+    "value",
+    "onChange",
+    "multiple"
+  ]);
+  const divProps = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (!SELECT_KEYS.has(k)) divProps[k] = v;
+  }
   const instanceId = useId();
   const listboxId = `tiger-select-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = useState(false);
@@ -48,22 +53,20 @@ var Select = (props) => {
     [filteredOptions]
   );
   const allOptions = useMemo(() => flattenSelectOptions(options), [options]);
-  const displayText = (() => {
+  const displayText = useMemo(() => {
     if (isMultipleSelect(props)) {
       const value2 = props.value ?? [];
-      if (value2.length === 0) {
-        return placeholder;
-      }
-      const selectedOptions = allOptions.filter((opt) => value2.includes(opt.value));
-      return selectedOptions.map((opt) => opt.label).join(", ");
+      if (value2.length === 0) return placeholder;
+      return allOptions.filter((opt) => value2.includes(opt.value)).map((opt) => opt.label).join(", ");
     }
     const value = props.value;
-    if (value === void 0 || value === null || value === "") {
-      return placeholder;
-    }
+    if (value === void 0 || value === null || value === "") return placeholder;
     return allOptions.find((opt) => opt.value === value)?.label ?? placeholder;
-  })();
-  const showClearButton = clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0);
+  }, [props.multiple, props.value, allOptions, placeholder]);
+  const showClearButton = useMemo(
+    () => clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0),
+    [clearable, disabled, props.value]
+  );
   const isSelected = (option) => {
     if (isMultipleSelect(props)) {
       return (props.value ?? []).includes(option.value);
@@ -395,7 +398,7 @@ var Select = (props) => {
     });
   };
   const containerClasses = classNames(selectBaseClasses, className);
-  return /* @__PURE__ */ jsxs("div", { className: containerClasses, ...divProps, children: [
+  return /* @__PURE__ */ jsxs("div", { ...divProps, className: containerClasses, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {

package/dist/chunk-MWH6FCSE.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+
+function usePopup(options) {
+  const {
+    visible,
+    defaultVisible = false,
+    disabled = false,
+    trigger = "click",
+    placement = "top",
+    offset = 8,
+    multiTrigger = true,
+    onVisibleChange
+  } = options;
+  const isControlled = visible !== void 0;
+  const [internalVisible, setInternalVisible] = react.useState(defaultVisible);
+  const currentVisible = isControlled ? visible : internalVisible;
+  const containerRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const floatingRef = react.useRef(null);
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = chunkZYPEO2KY_js.useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement,
+    offset
+  });
+  const setVisible = react.useCallback(
+    (next) => {
+      if (disabled && next) return;
+      if (!isControlled) setInternalVisible(next);
+      onVisibleChange?.(next);
+    },
+    [disabled, isControlled, onVisibleChange]
+  );
+  const handleToggle = react.useCallback(() => {
+    if (!disabled) setVisible(!currentVisible);
+  }, [disabled, currentVisible, setVisible]);
+  const handleShow = react.useCallback(() => {
+    if (!disabled) setVisible(true);
+  }, [disabled, setVisible]);
+  const handleHide = react.useCallback(() => {
+    if (!disabled) setVisible(false);
+  }, [disabled, setVisible]);
+  const effectiveTrigger = multiTrigger ? trigger : "click";
+  chunkZYPEO2KY_js.useClickOutside({
+    enabled: currentVisible && effectiveTrigger === "click",
+    refs: [containerRef],
+    onOutsideClick: () => setVisible(false),
+    defer: true
+  });
+  chunkZYPEO2KY_js.useEscapeKey({
+    enabled: currentVisible && effectiveTrigger !== "manual",
+    onEscape: () => setVisible(false)
+  });
+  const floatingStyles = react.useMemo(
+    () => ({
+      position: "absolute",
+      left: x,
+      top: y,
+      transformOrigin: tigercatCore.getTransformOrigin(actualPlacement),
+      zIndex: 1e3
+    }),
+    [x, y, actualPlacement]
+  );
+  const triggerHandlers = react.useMemo(() => {
+    if (!multiTrigger) {
+      return { onClick: handleToggle };
+    }
+    return tigercatCore.buildTriggerHandlerMap(
+      effectiveTrigger,
+      { toggle: handleToggle, show: handleShow, hide: handleHide },
+      "react"
+    );
+  }, [multiTrigger, effectiveTrigger, handleToggle, handleShow, handleHide]);
+  return {
+    currentVisible,
+    setVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    x,
+    y,
+    actualPlacement,
+    floatingStyles,
+    triggerHandlers
+  };
+}
+
+exports.usePopup = usePopup;