@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/chunk-DZGDCRBH.mjs

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { formatStatisticValue, classNames, getStatisticTitleClasses, getStatisticValueClasses, statisticPrefixClasses, statisticSuffixClasses, statisticBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Statistic.tsx
+var Statistic = ({
+  title,
+  value,
+  precision,
+  prefix,
+  suffix,
+  groupSeparator = false,
+  size = "md",
+  className
+}) => {
+  const formatted = useMemo(
+    () => formatStatisticValue(value, precision, groupSeparator),
+    [value, precision, groupSeparator]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classNames(statisticBaseClasses, className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: getStatisticTitleClasses(size), children: title }),
+    /* @__PURE__ */ jsxs("div", { className: getStatisticValueClasses(size), children: [
+      prefix && /* @__PURE__ */ jsx("span", { className: statisticPrefixClasses, children: prefix }),
+      /* @__PURE__ */ jsx("span", { children: formatted }),
+      suffix && /* @__PURE__ */ jsx("span", { className: statisticSuffixClasses, children: suffix })
+    ] })
+  ] });
+};
+
+export { Statistic };

package/dist/{chunk-S4GNTA7V.mjs → chunk-EBLAM3YP.mjs}

@@ -1,4 +1,4 @@
-import { PieChart } from './chunk-SH6O6LDJ.mjs';
+import { PieChart } from './chunk-QQDKQLHJ.mjs';
 import { useMemo } from 'react';
 import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -55,7 +55,7 @@ var DonutChart = ({
   // DonutChart-specific
   centerValue,
   centerLabel,
-  animated = false,
+  animated: _animated = false,
   // Callbacks
   onHoveredIndexChange,
   onSelectedIndexChange,

package/dist/chunk-EEF26RBA.mjs

@@ -0,0 +1,48 @@
+import React from 'react';
+import { shouldHideBadge, formatBadgeContent, classNames, badgeBaseClasses, getBadgeVariantClasses, dotSizeClasses, badgeSizeClasses, badgeTypeClasses, badgePositionClasses, badgeWrapperClasses } from '@expcat/tigercat-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/components/Badge.tsx
+var Badge = React.memo(
+  ({
+    variant = "danger",
+    size = "md",
+    type = "number",
+    content,
+    max = 99,
+    showZero = false,
+    position = "top-right",
+    standalone = true,
+    className,
+    children,
+    ["aria-label"]: ariaLabelProp,
+    ...props
+  }) => {
+    const isDot = type === "dot";
+    const isHidden = shouldHideBadge(content, type, showZero);
+    const displayContent = formatBadgeContent(content, max, showZero);
+    const badgeClasses = classNames(
+      badgeBaseClasses,
+      getBadgeVariantClasses(variant),
+      isDot ? dotSizeClasses[size] : badgeSizeClasses[size],
+      badgeTypeClasses[type],
+      !standalone && badgePositionClasses[position],
+      className
+    );
+    const computedAriaLabel = ariaLabelProp ?? (isDot ? "notification" : type === "number" ? `${displayContent} notifications` : `${displayContent ?? ""}`);
+    if (isHidden) {
+      return standalone ? null : /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    const badgeElement = /* @__PURE__ */ jsx("span", { ...props, className: badgeClasses, role: "status", "aria-label": computedAriaLabel, children: !isDot && displayContent });
+    if (standalone) {
+      return badgeElement;
+    }
+    return /* @__PURE__ */ jsxs("span", { className: badgeWrapperClasses, children: [
+      children,
+      badgeElement
+    ] });
+  }
+);
+Badge.displayName = "Badge";
+
+export { Badge };

package/dist/{chunk-PJCY45UP.mjs → chunk-EHU3J4B2.mjs}

@@ -1,4 +1,4 @@
-import { useTigerConfig } from './chunk-VEGBO77D.mjs';
+import { useTigerConfig } from './chunk-CRSMECWE.mjs';
 import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { classNames, taskBoardCardClasses, taskBoardCardDraggingClasses, isWipExceeded, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, taskBoardDropIndicatorClasses, resolveLocaleText, taskBoardEmptyClasses, taskBoardColumnHeaderClasses, taskBoardWipExceededClasses, taskBoardColumnBodyClasses, taskBoardAddCardClasses, mergeTigerLocale, getTaskBoardLabels, createTouchDragTracker, moveCard, reorderColumns, setDragData, createCardDragData, getDropIndex, parseDragData, createColumnDragData, getColumnDropIndex, findColumnFromPoint, taskBoardBaseClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-RKB2VUQO.js → chunk-EOYJLBFD.js}

@@ -30,9 +30,10 @@ var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 var Drawer = ({
-  visible = false,
+  open = false,
   placement = "right",
   size = "md",
+  width,
   title,
   header,
   closable = true,
@@ -52,11 +53,11 @@ var Drawer = ({
   style,
   ...rest
 }) => {
-  const [hasBeenOpened, setHasBeenOpened] = React__default.default.useState(visible);
+  const [hasBeenOpened, setHasBeenOpened] = React__default.default.useState(open);
   React.useEffect(() => {
-    if (visible) setHasBeenOpened(true);
-  }, [visible]);
-  const shouldRender = destroyOnClose ? visible : hasBeenOpened;
+    if (open) setHasBeenOpened(true);
+  }, [open]);
+  const shouldRender = destroyOnClose ? open : hasBeenOpened;
   const handleClose = React.useCallback(() => {
     onClose?.();
   }, [onClose]);
@@ -69,20 +70,20 @@ var Drawer = ({
     },
     [maskClosable, handleClose]
   );
-  chunkZYPEO2KY_js.useEscapeKey({ enabled: visible, onEscape: handleClose });
+  chunkZYPEO2KY_js.useEscapeKey({ enabled: open, onEscape: handleClose });
   const previousVisible = React.useRef(false);
   React.useEffect(() => {
-    if (visible === previousVisible.current) return;
-    previousVisible.current = visible;
+    if (open === previousVisible.current) return;
+    previousVisible.current = open;
     const timer = window.setTimeout(() => {
-      if (visible) {
+      if (open) {
         onAfterEnter?.();
       } else {
         onAfterLeave?.();
       }
     }, tigercatCore.ANIMATION_DURATION_MS);
     return () => window.clearTimeout(timer);
-  }, [visible, onAfterEnter, onAfterLeave]);
+  }, [open, onAfterEnter, onAfterLeave]);
   const reactId = React.useId();
   const drawerId = React.useMemo(() => `tiger-drawer-${reactId}`, [reactId]);
   const titleId = `${drawerId}-title`;
@@ -103,7 +104,7 @@ var Drawer = ({
     locale?.common?.closeText
   );
   React.useEffect(() => {
-    if (visible) {
+    if (open) {
       previousActiveElementRef.current = tigercatCore.captureActiveElement();
       const timer = window.setTimeout(() => {
         tigercatCore.focusFirst([closeButtonRef.current, dialogRef.current]);
@@ -111,7 +112,7 @@ var Drawer = ({
       return () => window.clearTimeout(timer);
     }
     tigercatCore.restoreFocus(previousActiveElementRef.current);
-  }, [visible]);
+  }, [open]);
   const handleKeyDown = React.useCallback((event) => {
     if (event.key === "Tab" && dialogRef.current) {
       const focusables = tigercatCore.getFocusableElements(dialogRef.current);
@@ -122,13 +123,10 @@ var Drawer = ({
       }
     }
   }, []);
-  const containerClasses = tigercatCore.classNames(
-    tigercatCore.getDrawerContainerClasses(),
-    !visible && "pointer-events-none"
-  );
-  const maskClasses = tigercatCore.getDrawerMaskClasses(visible);
+  const containerClasses = tigercatCore.classNames(tigercatCore.getDrawerContainerClasses(), !open && "pointer-events-none");
+  const maskClasses = tigercatCore.getDrawerMaskClasses(open);
   const panelClasses = tigercatCore.classNames(
-    tigercatCore.getDrawerPanelClasses(placement, visible, size),
+    tigercatCore.getDrawerPanelClasses(placement, open, size),
     "flex flex-col",
     className
   );
@@ -145,8 +143,8 @@ var Drawer = ({
     {
       className: containerClasses,
       style: { zIndex },
-      hidden: !visible,
-      "aria-hidden": !visible ? "true" : void 0,
+      hidden: !open,
+      "aria-hidden": !open ? "true" : void 0,
       "data-tiger-drawer-root": "",
       children: [
         mask && /* @__PURE__ */ jsxRuntime.jsx(
@@ -162,7 +160,12 @@ var Drawer = ({
           "div",
           {
             className: panelClasses,
-            style,
+            style: {
+              ...style,
+              ...width ? {
+                [placement === "left" || placement === "right" ? "width" : "height"]: typeof width === "number" ? `${width}px` : width
+              } : void 0
+            },
             ...dialogDivProps,
             role: "dialog",
             "aria-modal": "true",

package/dist/{chunk-DTQZPZSJ.mjs → chunk-EPN7QWP6.mjs}

@@ -1,4 +1,5 @@
-import { classNames, descriptionsWrapperClasses, getDescriptionsClasses, descriptionsHeaderClasses, descriptionsTitleClasses, descriptionsExtraClasses, groupItemsIntoRows, getDescriptionsTableClasses, descriptionsVerticalWrapperClasses, getDescriptionsLabelClasses, getDescriptionsContentClasses, getDescriptionsVerticalItemClasses } from '@expcat/tigercat-core';
+import { useMemo, useSyncExternalStore } from 'react';
+import { resolveResponsiveValue, classNames, descriptionsWrapperClasses, getDescriptionsClasses, descriptionsHeaderClasses, descriptionsTitleClasses, descriptionsExtraClasses, groupItemsIntoRows, getDescriptionsTableClasses, descriptionsVerticalWrapperClasses, getDescriptionsLabelClasses, getDescriptionsContentClasses, getDescriptionsVerticalItemClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Descriptions.tsx
@@ -6,7 +7,7 @@ var Descriptions = ({
   title,
   extra,
   bordered = false,
-  column = 3,
+  column: columnProp = 3,
   size = "md",
   layout = "horizontal",
   colon = true,
@@ -17,6 +18,19 @@ var Descriptions = ({
   children,
   ...props
 }) => {
+  const subscribe = useMemo(() => {
+    return (cb) => {
+      window.addEventListener("resize", cb);
+      return () => window.removeEventListener("resize", cb);
+    };
+  }, []);
+  const getSnapshot = () => window.innerWidth;
+  const getServerSnapshot = () => 1024;
+  const windowWidth = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const column = useMemo(
+    () => resolveResponsiveValue(columnProp, windowWidth, 3),
+    [columnProp, windowWidth]
+  );
   const renderHeader = () => {
     if (!title && !extra) return null;
     return /* @__PURE__ */ jsxs("div", { className: descriptionsHeaderClasses, children: [

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkVCOBBJLP_js = require('./chunk-VCOBBJLP.js');
-var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var chunkWVVXZKNI_js = require('./chunk-WVVXZKNI.js');
+var chunkBCNKTT5C_js = require('./chunk-BCNKTT5C.js');
 var chunkVCULFIZ5_js = require('./chunk-VCULFIZ5.js');
-var chunkI5TCE5E7_js = require('./chunk-I5TCE5E7.js');
+var chunkUF3DXKCI_js = require('./chunk-UF3DXKCI.js');
 var chunkCI2WHAT2_js = require('./chunk-CI2WHAT2.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -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(
-    chunkF24IF2QL_js.Button,
+    chunkBCNKTT5C_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(
-            chunkF24IF2QL_js.Button,
+            chunkBCNKTT5C_js.Button,
             {
               size: "sm",
               variant: action.variant ?? "ghost",
@@ -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(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.user?.name ? /* @__PURE__ */ jsxRuntime.jsx(chunkUF3DXKCI_js.Text, { tag: "span", size: "sm", weight: "bold", children: node.user.name }) : null,
+              node.user?.title ? /* @__PURE__ */ jsxRuntime.jsx(chunkUF3DXKCI_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
+              node.time ? /* @__PURE__ */ jsxRuntime.jsx(chunkUF3DXKCI_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(
-                chunkVCOBBJLP_js.Textarea,
+                chunkWVVXZKNI_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(
-                  chunkF24IF2QL_js.Button,
+                  chunkBCNKTT5C_js.Button,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -204,11 +204,11 @@ var CommentThread = ({
                     children: cancelReplyText
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { size: "sm", variant: "primary", onClick: () => handleReplySubmit(node), children: replyButtonText })
+                /* @__PURE__ */ jsxRuntime.jsx(chunkBCNKTT5C_js.Button, { size: "sm", variant: "primary", onClick: () => handleReplySubmit(node), children: replyButtonText })
               ] })
             ] }) : null,
             hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
-              chunkF24IF2QL_js.Button,
+              chunkBCNKTT5C_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(
-                    chunkF24IF2QL_js.Button,
+                    chunkBCNKTT5C_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(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))
+      children: resolvedNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(chunkUF3DXKCI_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-NTODO3Q3.mjs → chunk-EV6KRX6F.mjs}

@@ -1,6 +1,6 @@
 import { StatusIcon } from './chunk-FLYJVZED.mjs';
-import { useState, useMemo, useCallback } from 'react';
-import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath } from '@expcat/tigercat-core';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertBannerClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath, alertCountdownContainerClasses, alertCountdownBarClasses, alertCountdownColorClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var Alert = ({
@@ -11,6 +11,9 @@ var Alert = ({
   showIcon = true,
   closable = false,
   closeAriaLabel = "Close alert",
+  duration,
+  banner = false,
+  showCountdown = false,
   className,
   children,
   titleSlot,
@@ -19,19 +22,18 @@ var Alert = ({
   ...props
 }) => {
   const [visible, setVisible] = useState(true);
-  const colorScheme = useMemo(
-    () => getAlertTypeClasses(type, defaultAlertThemeColors),
-    [type]
-  );
+  const [countdownProgress, setCountdownProgress] = useState(100);
+  const colorScheme = useMemo(() => getAlertTypeClasses(type, defaultAlertThemeColors), [type]);
   const alertClasses = useMemo(
     () => classNames(
       alertBaseClasses,
       alertSizeClasses[size],
       colorScheme.bg,
       colorScheme.border,
+      banner && alertBannerClasses,
       className
     ),
-    [size, colorScheme, className]
+    [size, colorScheme, banner, className]
   );
   const iconClasses = useMemo(
     () => classNames(alertIconSizeClasses[size], colorScheme.icon),
@@ -63,6 +65,27 @@ var Alert = ({
     },
     [onClose]
   );
+  useEffect(() => {
+    if (duration && duration > 0 && closable) {
+      setCountdownProgress(100);
+      const timer = setTimeout(() => {
+        setVisible(false);
+        onClose?.(new MouseEvent("click"));
+      }, duration);
+      let countdownTimer;
+      if (showCountdown) {
+        const startTime = Date.now();
+        countdownTimer = setInterval(() => {
+          const elapsed = Date.now() - startTime;
+          setCountdownProgress(Math.max(0, 100 - elapsed / duration * 100));
+        }, 50);
+      }
+      return () => {
+        clearTimeout(timer);
+        if (countdownTimer) clearInterval(countdownTimer);
+      };
+    }
+  }, [duration, closable, showCountdown, onClose]);
   if (!visible) {
     return null;
   }
@@ -87,7 +110,14 @@ var Alert = ({
         type: "button",
         children: /* @__PURE__ */ jsx(StatusIcon, { path: alertCloseIconPath, className: "h-4 w-4" })
       }
-    )
+    ),
+    showCountdown && duration && duration > 0 && closable && /* @__PURE__ */ jsx("div", { className: alertCountdownContainerClasses, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(alertCountdownBarClasses, alertCountdownColorClasses[type]),
+        style: { width: `${countdownProgress}%` }
+      }
+    ) })
   ] });
 };
 

package/dist/{chunk-GB5G2CJY.js → chunk-F2OF6XZ6.js}

@@ -13,6 +13,9 @@ var Alert = ({
   showIcon = true,
   closable = false,
   closeAriaLabel = "Close alert",
+  duration,
+  banner = false,
+  showCountdown = false,
   className,
   children,
   titleSlot,
@@ -21,19 +24,18 @@ var Alert = ({
   ...props
 }) => {
   const [visible, setVisible] = react.useState(true);
-  const colorScheme = react.useMemo(
-    () => tigercatCore.getAlertTypeClasses(type, tigercatCore.defaultAlertThemeColors),
-    [type]
-  );
+  const [countdownProgress, setCountdownProgress] = react.useState(100);
+  const colorScheme = react.useMemo(() => tigercatCore.getAlertTypeClasses(type, tigercatCore.defaultAlertThemeColors), [type]);
   const alertClasses = react.useMemo(
     () => tigercatCore.classNames(
       tigercatCore.alertBaseClasses,
       tigercatCore.alertSizeClasses[size],
       colorScheme.bg,
       colorScheme.border,
+      banner && tigercatCore.alertBannerClasses,
       className
     ),
-    [size, colorScheme, className]
+    [size, colorScheme, banner, className]
   );
   const iconClasses = react.useMemo(
     () => tigercatCore.classNames(tigercatCore.alertIconSizeClasses[size], colorScheme.icon),
@@ -65,6 +67,27 @@ var Alert = ({
     },
     [onClose]
   );
+  react.useEffect(() => {
+    if (duration && duration > 0 && closable) {
+      setCountdownProgress(100);
+      const timer = setTimeout(() => {
+        setVisible(false);
+        onClose?.(new MouseEvent("click"));
+      }, duration);
+      let countdownTimer;
+      if (showCountdown) {
+        const startTime = Date.now();
+        countdownTimer = setInterval(() => {
+          const elapsed = Date.now() - startTime;
+          setCountdownProgress(Math.max(0, 100 - elapsed / duration * 100));
+        }, 50);
+      }
+      return () => {
+        clearTimeout(timer);
+        if (countdownTimer) clearInterval(countdownTimer);
+      };
+    }
+  }, [duration, closable, showCountdown, onClose]);
   if (!visible) {
     return null;
   }
@@ -89,7 +112,14 @@ var Alert = ({
         type: "button",
         children: /* @__PURE__ */ jsxRuntime.jsx(chunkHQ3QOT7H_js.StatusIcon, { path: tigercatCore.alertCloseIconPath, className: "h-4 w-4" })
       }
-    )
+    ),
+    showCountdown && duration && duration > 0 && closable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.alertCountdownContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: tigercatCore.classNames(tigercatCore.alertCountdownBarClasses, tigercatCore.alertCountdownColorClasses[type]),
+        style: { width: `${countdownProgress}%` }
+      }
+    ) })
   ] });
 };
 

package/dist/chunk-F6KHZNRS.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Statistic.tsx
+var Statistic = ({
+  title,
+  value,
+  precision,
+  prefix,
+  suffix,
+  groupSeparator = false,
+  size = "md",
+  className
+}) => {
+  const formatted = react.useMemo(
+    () => tigercatCore.formatStatisticValue(value, precision, groupSeparator),
+    [value, precision, groupSeparator]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.classNames(tigercatCore.statisticBaseClasses, className), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getStatisticTitleClasses(size), children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.getStatisticValueClasses(size), children: [
+      prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.statisticPrefixClasses, children: prefix }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatted }),
+      suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.statisticSuffixClasses, children: suffix })
+    ] })
+  ] });
+};
+
+exports.Statistic = Statistic;

package/dist/{chunk-URM7QDHH.js → chunk-F7H4ALKN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkTJFS44SH_js = require('./chunk-TJFS44SH.js');
+var chunkJLRRXRZO_js = require('./chunk-JLRRXRZO.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -17,7 +17,7 @@ var Checkbox = ({
   className,
   ...props
 }) => {
-  const groupContext = chunkTJFS44SH_js.useCheckboxGroup();
+  const groupContext = chunkJLRRXRZO_js.useCheckboxGroup();
   const [internalChecked, setInternalChecked] = react.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0;
   const effectiveSize = propSize || groupContext?.size || "md";