@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-XYW6RTRB.mjs

@@ -0,0 +1,217 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Descriptions.tsx
+import React, { forwardRef, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  devWarn,
+  getDescriptionsClasses,
+  getDescriptionsContentClasses,
+  getDescriptionsHorizontalColSpan,
+  getDescriptionsLabelClasses,
+  getDescriptionsTableClasses,
+  getDescriptionsVerticalGridStyle,
+  getDescriptionsVerticalItemClasses,
+  getDescriptionsLabels,
+  groupItemsIntoRows,
+  descriptionsCaptionClasses,
+  descriptionsExtraClasses,
+  descriptionsHeaderClasses,
+  descriptionsTitleClasses,
+  isResponsiveMap,
+  mergeTigerLocale,
+  observeElementSize,
+  resolveResponsiveValue
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function renderColon(show, glyph) {
+  return show ? glyph : "";
+}
+var Descriptions = forwardRef(function Descriptions2({
+  title,
+  extra,
+  bordered = false,
+  column: columnProp = 3,
+  size = "md",
+  layout = "horizontal",
+  colon = true,
+  labelStyle,
+  contentStyle,
+  items = [],
+  className,
+  children,
+  locale,
+  ...props
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const colonGlyph = getDescriptionsLabels(mergedLocale).colon;
+  const titleId = useId();
+  const rootRef = useRef(null);
+  const isResponsive = isResponsiveMap(columnProp);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useLayoutEffect(() => {
+    if (!isResponsive) return void 0;
+    return observeElementSize(rootRef.current, ({ width }) => setContainerWidth(width));
+  }, [isResponsive]);
+  const column = useMemo(
+    () => resolveResponsiveValue(columnProp, containerWidth, 3),
+    [columnProp, containerWidth]
+  );
+  if (children && items.length === 0) {
+    devWarn(
+      "Descriptions.children",
+      "Descriptions: `items` is the data source. Default children are ignored and are not description rows."
+    );
+  }
+  const rows = groupItemsIntoRows(items, column);
+  const labelledBy = title ? titleId : void 0;
+  const rootClasses = classNames(getDescriptionsClasses(size, bordered), className);
+  const setRootRef = (node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const renderLabel = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.label,
+    renderColon(colon, colonGlyph)
+  ] });
+  const renderHorizontal = () => {
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsxs("table", { className: getDescriptionsTableClasses(bordered), "aria-labelledby": labelledBy, children: [
+      useCaption ? /* @__PURE__ */ jsx("caption", { className: descriptionsCaptionClasses, id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((rowItems, rowIndex) => /* @__PURE__ */ jsx("tr", { children: rowItems.map((item, itemIndex) => {
+        const span = item.span || 1;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "row",
+              className: classNames(
+                getDescriptionsLabelClasses(bordered, size, "horizontal"),
+                item.labelClassName
+              ),
+              style: labelStyle,
+              children: renderLabel(item)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: classNames(
+                getDescriptionsContentClasses(bordered, size, "horizontal"),
+                item.contentClassName
+              ),
+              style: contentStyle,
+              colSpan: getDescriptionsHorizontalColSpan(span),
+              children: item.content
+            }
+          )
+        ] }, `${rowIndex}-${itemIndex}`);
+      }) }, rowIndex)) })
+    ] });
+  };
+  const renderVertical = () => {
+    if (items.length === 0) return null;
+    if (bordered) {
+      return /* @__PURE__ */ jsxs("table", { className: getDescriptionsTableClasses(true), "aria-labelledby": labelledBy, children: [
+        useCaption ? /* @__PURE__ */ jsx("caption", { className: descriptionsCaptionClasses, id: titleId, children: title }) : null,
+        /* @__PURE__ */ jsx("tbody", { children: rows.map((rowItems, rowIndex) => /* @__PURE__ */ jsx("tr", { children: rowItems.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+          "td",
+          {
+            colSpan: item.span || 1,
+            className: getDescriptionsVerticalItemClasses(size, true),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(
+                    getDescriptionsLabelClasses(true, size, "vertical"),
+                    item.labelClassName
+                  ),
+                  style: labelStyle,
+                  children: renderLabel(item)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(
+                    getDescriptionsContentClasses(true, size, "vertical"),
+                    item.contentClassName
+                  ),
+                  style: contentStyle,
+                  children: item.content
+                }
+              )
+            ]
+          },
+          `${rowIndex}-${itemIndex}`
+        )) }, rowIndex)) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      "dl",
+      {
+        className: classNames("grid w-full"),
+        style: getDescriptionsVerticalGridStyle(column),
+        "aria-labelledby": labelledBy,
+        children: rows.flatMap(
+          (rowItems, rowIndex) => rowItems.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: getDescriptionsVerticalItemClasses(size, false),
+              style: { gridColumn: `span ${item.span || 1}` },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "dt",
+                  {
+                    className: classNames(
+                      getDescriptionsLabelClasses(false, size, "vertical"),
+                      item.labelClassName
+                    ),
+                    style: labelStyle,
+                    children: renderLabel(item)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "dd",
+                  {
+                    className: classNames(
+                      getDescriptionsContentClasses(false, size, "vertical"),
+                      item.contentClassName
+                    ),
+                    style: contentStyle,
+                    children: item.content
+                  }
+                )
+              ]
+            },
+            `${rowIndex}-${itemIndex}`
+          ))
+        )
+      }
+    );
+  };
+  const useCaption = Boolean(title && !extra && (layout === "horizontal" || bordered));
+  const showHeader = Boolean(extra || title && !useCaption);
+  return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: rootClasses, ...props, children: [
+    showHeader ? /* @__PURE__ */ jsxs("div", { className: descriptionsHeaderClasses, children: [
+      title ? /* @__PURE__ */ jsx("div", { className: descriptionsTitleClasses, id: titleId, children: title }) : null,
+      extra ? /* @__PURE__ */ jsx("div", { className: descriptionsExtraClasses, children: extra }) : null
+    ] }) : null,
+    layout === "horizontal" ? renderHorizontal() : renderVertical()
+  ] });
+});
+Descriptions.displayName = "Descriptions";
+var Descriptions_default = Descriptions;
+
+export {
+  Descriptions,
+  Descriptions_default
+};

package/dist/chunk-XZFHPHV5.mjs

@@ -0,0 +1,75 @@
+// src/components/ChartAxis.tsx
+import { useMemo } from "react";
+import {
+  chartAxisLabelClasses,
+  chartAxisLineClasses,
+  chartAxisTickLineClasses,
+  chartAxisTickTextClasses,
+  classNames,
+  getChartAxisGeometry
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartAxis = ({
+  orientation = "bottom",
+  scale,
+  ticks = 5,
+  tickValues,
+  tickFormat,
+  tickSize = 6,
+  tickPadding = 4,
+  label,
+  labelOffset = 28,
+  x = 0,
+  y = 0,
+  className,
+  ...props
+}) => {
+  const geometry = useMemo(
+    () => getChartAxisGeometry(scale, {
+      orientation,
+      tickCount: ticks,
+      tickValues,
+      tickFormat,
+      tickSize,
+      tickPadding,
+      label,
+      labelOffset
+    }),
+    [scale, orientation, ticks, tickValues, tickFormat, tickSize, tickPadding, label, labelOffset]
+  );
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      ...props,
+      className: classNames(className),
+      transform: `translate(${x}, ${y})`,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("line", { ...geometry.axisLine, className: chartAxisLineClasses, "data-axis-line": "true" }),
+        geometry.ticks.map((tick) => /* @__PURE__ */ jsxs("g", { "data-axis-tick": "true", children: [
+          /* @__PURE__ */ jsx("line", { ...tick.line, className: chartAxisTickLineClasses }),
+          /* @__PURE__ */ jsx("text", { ...tick.text, className: chartAxisTickTextClasses, children: tick.label })
+        ] }, tick.key)),
+        geometry.label ? /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: chartAxisLabelClasses,
+            "data-axis-label": "true",
+            x: geometry.label.x,
+            y: geometry.label.y,
+            textAnchor: geometry.label.textAnchor,
+            dy: geometry.label.dy,
+            transform: geometry.label.transform,
+            children: geometry.label.text
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var ChartAxis_default = ChartAxis;
+
+export {
+  ChartAxis,
+  ChartAxis_default
+};

package/dist/{chunk-3HHEVMHE.mjs → chunk-YCVORYEO.mjs}

@@ -2,22 +2,23 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-RE5ZLA5D.mjs";
+} from "./chunk-CJSB5NOK.mjs";
 import {
   Button
-} from "./chunk-5TE7KLE5.mjs";
+} from "./chunk-WFLXJOFU.mjs";
 import {
-  ButtonGroup
-} from "./chunk-ZJWUBR2X.mjs";
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/SplitButton.tsx
-import React, { useMemo } from "react";
+import React, { forwardRef, useMemo } from "react";
 import {
   DROPDOWN_CHEVRON_PATH,
   getDropdownChevronClasses,
   getSplitButtonPrimaryClasses,
   getSplitButtonRootClasses,
   getSplitButtonTriggerClasses,
+  resolveLocaleText,
   resolveSplitButtonSize,
   resolveSplitButtonTriggerAriaLabel,
   resolveSplitButtonVariant
@@ -56,11 +57,11 @@ function partitionChildren(children) {
   }
   return { primary, menu };
 }
-function Chevron({ open }) {
+function Chevron({ open, size }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      className: getDropdownChevronClasses(open),
+      className: getDropdownChevronClasses(open, { tone: "current", size }),
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -73,7 +74,7 @@ function Chevron({ open }) {
     }
   );
 }
-var SplitButton = ({
+var SplitButton = forwardRef(function SplitButton2({
   variant = "primary",
   size = "md",
   disabled = false,
@@ -86,6 +87,7 @@ var SplitButton = ({
   loadingIcon,
   trigger,
   triggerAriaLabel,
+  primaryAriaLabel,
   open,
   defaultOpen = false,
   closeOnClick = true,
@@ -99,79 +101,82 @@ var SplitButton = ({
   style,
   children,
   ...rest
-}) => {
+}, forwardedRef) {
+  const { locale } = useTigerConfig();
   const resolvedVariant = resolveSplitButtonVariant(variant);
   const resolvedSize = resolveSplitButtonSize(size);
-  const isDisabled = disabled || loading;
-  const triggerLabel = resolveSplitButtonTriggerAriaLabel(triggerAriaLabel);
+  const triggerLabel = resolveSplitButtonTriggerAriaLabel(
+    triggerAriaLabel,
+    resolveLocaleText("More options", locale?.common?.moreOptionsText)
+  );
   const partitioned = useMemo(() => partitionChildren(children), [children]);
   const menuNode = menu != null ? wrapMenu(menu) : partitioned.menu;
+  const hasMenu = menuNode != null;
   const rootClasses = getSplitButtonRootClasses({ block, className });
   const primaryClasses = getSplitButtonPrimaryClasses({ block });
   const triggerClasses = getSplitButtonTriggerClasses({ size: resolvedSize });
-  return /* @__PURE__ */ jsxs(
-    ButtonGroup,
-    {
-      size: resolvedSize,
-      className: rootClasses,
-      style,
-      "data-split-button": "",
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: rootClasses, style, role: "group", "data-split-button": "", ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: forwardedRef,
+        variant: resolvedVariant,
+        size: resolvedSize,
+        disabled,
+        loading,
+        danger,
+        htmlType,
+        iconPosition,
+        icon,
+        loadingIcon,
+        className: primaryClasses,
+        "aria-label": primaryAriaLabel,
+        "data-split-button-primary": "",
+        onClick,
+        children: partitioned.primary
+      }
+    ),
+    hasMenu ? /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        trigger: "click",
+        showArrow: false,
+        asChild: true,
+        disabled,
+        open,
+        defaultOpen,
+        closeOnClick,
+        portal,
+        placement,
+        offset,
+        onOpenChange: (next) => {
+          if (loading) return;
+          onOpenChange?.(next);
+        },
+        renderTrigger: ({ open: menuOpen }) => /* @__PURE__ */ jsx(
           Button,
           {
             variant: resolvedVariant,
             size: resolvedSize,
             disabled,
-            loading,
             danger,
-            htmlType,
-            iconPosition,
-            icon,
-            loadingIcon,
-            className: primaryClasses,
-            "data-split-button-primary": "",
-            onClick,
-            children: partitioned.primary
+            htmlType: "button",
+            className: triggerClasses,
+            "aria-label": triggerLabel,
+            "aria-disabled": loading || void 0,
+            "data-split-button-trigger": "",
+            onClick: (event) => {
+              if (loading) event.preventDefault();
+            },
+            children: trigger ?? /* @__PURE__ */ jsx(Chevron, { open: menuOpen, size: resolvedSize })
           }
         ),
-        /* @__PURE__ */ jsx(
-          Dropdown,
-          {
-            trigger: "click",
-            showArrow: false,
-            disabled: isDisabled,
-            open,
-            defaultOpen,
-            closeOnClick,
-            portal,
-            placement,
-            offset,
-            onOpenChange,
-            renderTrigger: ({ open: menuOpen }) => /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: resolvedVariant,
-                size: resolvedSize,
-                disabled: isDisabled,
-                danger,
-                htmlType: "button",
-                className: triggerClasses,
-                "aria-label": triggerLabel,
-                "aria-haspopup": "menu",
-                "aria-expanded": menuOpen,
-                "data-split-button-trigger": "",
-                children: trigger ?? /* @__PURE__ */ jsx(Chevron, { open: menuOpen })
-              }
-            ),
-            children: menuNode
-          }
-        )
-      ]
-    }
-  );
-};
+        children: menuNode
+      }
+    ) : null
+  ] });
+});
+SplitButton.displayName = "SplitButton";
 var SplitButton_default = SplitButton;
 
 export {

package/dist/chunk-YDO3V3SK.mjs

@@ -0,0 +1,70 @@
+// src/components/Badge.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  getBadgeVariantClasses,
+  badgeBaseClasses,
+  badgeSizeClasses,
+  dotSizeClasses,
+  badgeTypeClasses,
+  badgeWrapperClasses,
+  badgePositionClasses,
+  resolveBadgeContent,
+  warnStandaloneBadgeChildren
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Badge = forwardRef(function Badge2({
+  locale: _locale,
+  variant = "danger",
+  size = "md",
+  type = "number",
+  content,
+  max = 99,
+  showZero = false,
+  position = "top-right",
+  standalone = true,
+  className,
+  children,
+  ["aria-label"]: ariaLabelProp,
+  ["aria-labelledby"]: ariaLabelledbyProp,
+  ["aria-hidden"]: ariaHiddenProp,
+  ...props
+}, ref) {
+  warnStandaloneBadgeChildren(children != null && children !== false, standalone);
+  const resolved = resolveBadgeContent({ type, content, max, showZero });
+  const isDot = resolved.kind === "dot";
+  const isHidden = resolved.kind === "hidden";
+  const badgeClasses = classNames(
+    badgeBaseClasses,
+    getBadgeVariantClasses(variant),
+    isDot ? dotSizeClasses[size] : badgeSizeClasses[size],
+    badgeTypeClasses[type],
+    !standalone && badgePositionClasses[position]
+  );
+  const userNamed = Boolean(ariaLabelProp || ariaLabelledbyProp);
+  const hideFromAT = ariaHiddenProp ?? (!userNamed && (isDot || !standalone));
+  const badgeElement = !isHidden ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...standalone ? props : void 0,
+      ref: standalone ? ref : void 0,
+      className: classNames(badgeClasses, standalone && className),
+      "aria-hidden": hideFromAT ? true : ariaHiddenProp,
+      "aria-label": hideFromAT ? void 0 : ariaLabelProp,
+      "aria-labelledby": hideFromAT ? void 0 : ariaLabelledbyProp,
+      children: resolved.kind === "text" ? resolved.value : null
+    }
+  ) : null;
+  if (standalone) {
+    return badgeElement;
+  }
+  return /* @__PURE__ */ jsxs("span", { ref, className: classNames(badgeWrapperClasses, className), ...props, children: [
+    children,
+    badgeElement
+  ] });
+});
+Badge.displayName = "Badge";
+
+export {
+  Badge
+};

package/dist/{chunk-OTBXERJD.mjs → chunk-YLXEMZVI.mjs}

@@ -1,16 +1,23 @@
 import {
   StatusIcon,
   StatusIconWithLoading
-} from "./chunk-FLYJVZED.mjs";
+} from "./chunk-ED7QR6PJ.mjs";
+import {
+  renderBodyPortal
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/MessageContainer.tsx
-import { useCallback, useEffect, useState } from "react";
 import {
-  ANIMATION_DURATION_MS,
   classNames,
   defaultMessageThemeColors,
+  getMessageCloseAriaLabel,
   getMessageIconPath,
   getMessageTypeClasses,
+  getToastItemRole,
   messageBaseClasses,
   messageCloseButtonClasses,
   messageCloseIconPath,
@@ -21,38 +28,24 @@ import {
   messagePositionClasses
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var MESSAGE_CONTAINER_ID = "tiger-message-container";
-var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
-var MessageItem = ({ message, onClose }) => {
-  const [isVisible, setIsVisible] = useState(false);
-  useEffect(() => {
-    const timer = setTimeout(() => setIsVisible(true), 10);
-    return () => clearTimeout(timer);
-  }, []);
+var MessageItem = ({ message, locale, onClose }) => {
   const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
   const messageClasses = classNames(
     messageBaseClasses,
     colorScheme.bg,
     colorScheme.border,
     colorScheme.text,
-    message.className,
-    isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"
+    message.className
   );
   const iconPath = message.icon || getMessageIconPath(message.type);
   const iconClass = classNames(messageIconClasses, colorScheme.icon);
-  const handleClose = useCallback(() => {
-    setIsVisible(false);
-    setTimeout(() => onClose?.(message.id), ANIMATION_DURATION_MS);
-  }, [message.id, onClose]);
-  const a11yRole = message.type === "error" ? "alert" : "status";
-  const ariaLive = message.type === "error" ? "assertive" : "polite";
+  const a11yRole = getToastItemRole(message.type);
+  const closeLabel = getMessageCloseAriaLabel(locale, message.closeAriaLabel);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: messageClasses,
       role: a11yRole,
-      "aria-live": ariaLive,
-      "aria-atomic": "true",
       "aria-busy": message.type === "loading" || void 0,
       "data-tiger-message": true,
       "data-tiger-message-type": message.type,
@@ -64,7 +57,9 @@ var MessageItem = ({ message, onClose }) => {
             path: iconPath,
             className: iconClass,
             isLoading: message.type === "loading",
-            spinnerClass: messageLoadingSpinnerClasses
+            spinnerClass: messageLoadingSpinnerClasses,
+            "aria-hidden": "true",
+            focusable: "false"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: messageContentClasses, children: message.content }),
@@ -72,10 +67,18 @@ var MessageItem = ({ message, onClose }) => {
           "button",
           {
             className: messageCloseButtonClasses,
-            onClick: handleClose,
-            "aria-label": message.closeAriaLabel ?? MESSAGE_CLOSE_ARIA_LABEL,
+            onClick: () => onClose?.(message.id),
+            "aria-label": closeLabel,
             type: "button",
-            children: /* @__PURE__ */ jsx(StatusIcon, { path: messageCloseIconPath, className: "w-4 h-4" })
+            children: /* @__PURE__ */ jsx(
+              StatusIcon,
+              {
+                path: messageCloseIconPath,
+                className: "w-4 h-4",
+                "aria-hidden": "true",
+                focusable: "false"
+              }
+            )
           }
         )
       ]
@@ -85,22 +88,22 @@ var MessageItem = ({ message, onClose }) => {
 var MessageContainer = ({
   position = "top",
   messages = [],
-  onClose
+  onClose,
+  portal = true
 }) => {
+  const config = useTigerConfig();
+  const locale = config.locale ?? getGlobalTigerLocale();
   const containerClasses = classNames(messageContainerBaseClasses, messagePositionClasses[position]);
-  const containerId = position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${position}`;
-  return /* @__PURE__ */ jsx(
+  const node = /* @__PURE__ */ jsx(
     "div",
     {
       className: containerClasses,
-      id: containerId,
-      "aria-live": "polite",
-      "aria-relevant": "additions",
       "data-tiger-message-position": position,
       "data-tiger-message-container": true,
-      children: messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message, onClose }, message.id))
+      children: messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message, locale, onClose }, message.id))
     }
   );
+  return portal ? renderBodyPortal(node) : node;
 };
 var MessageContainer_default = MessageContainer;