@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-NTCVAVYZ.mjs

@@ -0,0 +1,182 @@
+// src/components/VirtualList.tsx
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import {
+  virtualListContainerClasses,
+  virtualListInnerClasses,
+  fixedSizeStrategy,
+  variableSizeStrategy,
+  dynamicSizeStrategy,
+  classNames
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var VirtualList = forwardRef(function VirtualList2({
+  itemCount = 0,
+  itemHeight = 40,
+  estimatedItemHeight,
+  getItemHeight,
+  sizeStrategy: customStrategy,
+  height = 400,
+  overscan = 5,
+  getItemKey,
+  ariaLabel,
+  className,
+  renderItem,
+  onScroll,
+  style,
+  role,
+  ...rest
+}, ref) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const [, bumpMeasuredLayout] = useReducer((count) => count + 1, 0);
+  const containerRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const dynamicStrategyRef = useRef(null);
+  const lastEstimatedRef = useRef(void 0);
+  const strategy = useMemo(() => {
+    if (customStrategy) {
+      dynamicStrategyRef.current = null;
+      return customStrategy;
+    }
+    if (getItemHeight) {
+      dynamicStrategyRef.current = null;
+      return variableSizeStrategy(getItemHeight, itemCount);
+    }
+    if (estimatedItemHeight !== void 0) {
+      if (!dynamicStrategyRef.current || lastEstimatedRef.current !== estimatedItemHeight) {
+        dynamicStrategyRef.current = dynamicSizeStrategy(estimatedItemHeight, itemCount);
+        lastEstimatedRef.current = estimatedItemHeight;
+      }
+      return dynamicStrategyRef.current;
+    }
+    dynamicStrategyRef.current = null;
+    return fixedSizeStrategy(itemHeight);
+  }, [customStrategy, getItemHeight, estimatedItemHeight, itemHeight, itemCount]);
+  const canMeasure = typeof strategy.updateItemHeight === "function";
+  const range = strategy.getRange(scrollTop, height, itemCount, overscan);
+  useLayoutEffect(() => {
+    if (!canMeasure || !strategy.updateItemHeight) return;
+    let changed = false;
+    itemRefs.current.forEach((el, i) => {
+      if (!el) return;
+      const measured = el.offsetHeight;
+      if (measured > 0 && measured !== strategy.getItemHeight(i)) {
+        strategy.updateItemHeight(i, measured);
+        changed = true;
+      }
+    });
+    if (changed) bumpMeasuredLayout();
+  }, [canMeasure, strategy, range.startIndex, range.endIndex, itemCount]);
+  const applyScrollTop = useCallback(
+    (next) => {
+      const el = containerRef.current;
+      const offset = Math.max(0, next);
+      if (el && el.scrollTop !== offset) el.scrollTop = offset;
+      setScrollTop(offset);
+      onScroll?.(offset);
+    },
+    [onScroll]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToIndex(index) {
+        const safe = Number.isFinite(index) ? Math.floor(index) : 0;
+        const clamped = Math.max(0, Math.min(Math.max(itemCount - 1, 0), safe));
+        applyScrollTop(strategy.getItemOffset(clamped));
+      },
+      scrollToOffset(offset) {
+        applyScrollTop(Number.isFinite(offset) ? offset : 0);
+      },
+      getScrollElement() {
+        return containerRef.current;
+      }
+    }),
+    [applyScrollTop, itemCount, strategy]
+  );
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) return;
+    const st = containerRef.current.scrollTop;
+    setScrollTop(st);
+    onScroll?.(st);
+  }, [onScroll]);
+  const { startIndex, endIndex, totalHeight, offsetTop } = range;
+  const resolvedRole = role ?? "list";
+  const asList = resolvedRole === "list";
+  const items = [];
+  for (let i = startIndex; i <= endIndex; i++) {
+    const itemH = strategy.getItemHeight(i);
+    const key = getItemKey ? getItemKey(i) : i;
+    const itemA11y = asList ? { role: "listitem", "aria-setsize": itemCount, "aria-posinset": i + 1 } : {};
+    if (canMeasure) {
+      const index = i;
+      items.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              if (el) itemRefs.current.set(index, el);
+              else itemRefs.current.delete(index);
+            },
+            ...itemA11y,
+            style: { width: "100%" },
+            children: renderItem({ index })
+          },
+          key
+        )
+      );
+    } else {
+      items.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...itemA11y,
+            style: { height: `${itemH}px`, width: "100%", overflow: "hidden" },
+            children: renderItem({ index: i })
+          },
+          key
+        )
+      );
+    }
+  }
+  const namedAriaLabel = ariaLabel ?? (typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      role: resolvedRole,
+      tabIndex: 0,
+      "aria-label": namedAriaLabel,
+      className: classNames(virtualListContainerClasses, className),
+      style: { ...style, height: `${height}px` },
+      onScroll: handleScroll,
+      children: /* @__PURE__ */ jsx("div", { className: virtualListInnerClasses, style: { height: `${totalHeight}px` }, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            transform: `translateY(${offsetTop}px)`,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%"
+          },
+          children: items
+        }
+      ) })
+    }
+  );
+});
+VirtualList.displayName = "VirtualList";
+
+export {
+  VirtualList
+};

package/dist/chunk-O3O5GBBY.mjs

@@ -0,0 +1,181 @@
+import {
+  Link
+} from "./chunk-WQMOFDAY.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/PageHeader.tsx
+import { forwardRef, useCallback, useId, useMemo } from "react";
+import {
+  chevronLeftSolidIcon20PathD,
+  composeComponentClasses,
+  getPageHeaderBackButtonClasses,
+  getPageHeaderRootClasses,
+  hasPageHeaderHeadingContent,
+  hasPageHeaderNode,
+  resolvePageHeaderHeadingTag,
+  mergeTigerLocale,
+  getPageHeaderLabels,
+  icon20ViewBox,
+  pageHeaderActionsClasses,
+  pageHeaderBackIconClasses,
+  pageHeaderBackWrapClasses,
+  pageHeaderContentClasses,
+  pageHeaderHeadingRowClasses,
+  pageHeaderMainClasses,
+  pageHeaderStartClasses,
+  pageHeaderSubtitleClasses,
+  pageHeaderTitleClasses,
+  pageHeaderTitleRowClasses,
+  resolvePageHeaderBackAriaLabel,
+  resolvePageHeaderBackVisibility
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BackIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: pageHeaderBackIconClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronLeftSolidIcon20PathD, clipRule: "evenodd" })
+    }
+  );
+}
+var PageHeader = forwardRef(
+  ({
+    showBack,
+    backHref,
+    backAriaLabel,
+    title,
+    subTitle,
+    breadcrumb,
+    actions,
+    back,
+    onBack,
+    headingLevel,
+    className,
+    style,
+    children,
+    locale,
+    labels: labelsOverride,
+    ...rest
+  }, ref) => {
+    const config = useTigerConfig();
+    const titleId = `tiger-page-header-title-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const headerLabels = useMemo(
+      () => getPageHeaderLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    const hasBackOverride = hasPageHeaderNode(back);
+    const hasBreadcrumb = hasPageHeaderNode(breadcrumb);
+    const hasTitle = hasPageHeaderNode(title) && title !== "";
+    const hasSubtitle = hasPageHeaderNode(subTitle) && subTitle !== "";
+    const hasActions = hasPageHeaderNode(actions);
+    const hasBody = hasPageHeaderNode(children);
+    const showBackControl = resolvePageHeaderBackVisibility({
+      showBack,
+      hasHandler: typeof onBack === "function",
+      hasBackHref: Boolean(backHref),
+      hasBackOverride
+    });
+    const showHeading = hasPageHeaderHeadingContent({
+      showBack: showBackControl,
+      hasBreadcrumb,
+      hasTitle,
+      hasSubtitle,
+      hasActions
+    });
+    const resolvedBackAriaLabel = resolvePageHeaderBackAriaLabel(
+      backAriaLabel,
+      headerLabels.backAriaLabel
+    );
+    const TitleTag = resolvePageHeaderHeadingTag(headingLevel);
+    const rootClasses = useMemo(
+      () => composeComponentClasses(getPageHeaderRootClasses(className)),
+      [className]
+    );
+    const backButtonClasses = useMemo(() => getPageHeaderBackButtonClasses(), []);
+    const handleBack = useCallback(
+      (event) => {
+        onBack?.(event);
+      },
+      [onBack]
+    );
+    const defaultBackControl = backHref ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: backHref,
+        underline: false,
+        variant: "default",
+        className: backButtonClasses,
+        "aria-label": resolvedBackAriaLabel,
+        onClick: handleBack,
+        children: /* @__PURE__ */ jsx(BackIcon, {})
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: backButtonClasses,
+        "aria-label": resolvedBackAriaLabel,
+        onClick: handleBack,
+        children: /* @__PURE__ */ jsx(BackIcon, {})
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ...rest,
+        ref,
+        "data-page-header": "",
+        className: rootClasses,
+        style,
+        "aria-labelledby": hasTitle ? titleId : void 0,
+        children: [
+          showHeading ? /* @__PURE__ */ jsxs("div", { className: pageHeaderHeadingRowClasses, "data-page-header-heading": "", children: [
+            /* @__PURE__ */ jsxs("div", { className: pageHeaderStartClasses, children: [
+              showBackControl ? /* @__PURE__ */ jsx("div", { className: pageHeaderBackWrapClasses, "data-page-header-back": "", children: hasBackOverride ? back : defaultBackControl }) : null,
+              hasBreadcrumb || hasTitle || hasSubtitle ? /* @__PURE__ */ jsxs("div", { className: pageHeaderMainClasses, children: [
+                hasBreadcrumb ? breadcrumb : null,
+                hasTitle || hasSubtitle ? /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleRowClasses, children: [
+                  hasTitle ? /* @__PURE__ */ jsx(
+                    TitleTag,
+                    {
+                      id: titleId,
+                      className: pageHeaderTitleClasses,
+                      "data-page-header-title": "",
+                      children: title
+                    }
+                  ) : null,
+                  hasSubtitle ? /* @__PURE__ */ jsx("div", { className: pageHeaderSubtitleClasses, "data-page-header-subtitle": "", children: subTitle }) : null
+                ] }) : null
+              ] }) : null
+            ] }),
+            hasActions ? /* @__PURE__ */ jsx("div", { className: pageHeaderActionsClasses, "data-page-header-actions": "", children: actions }) : null
+          ] }) : null,
+          hasBody ? /* @__PURE__ */ jsx("div", { className: pageHeaderContentClasses, children }) : null
+        ]
+      }
+    );
+  }
+);
+PageHeader.displayName = "PageHeader";
+var PageHeader_default = PageHeader;
+
+export {
+  PageHeader,
+  PageHeader_default
+};

package/dist/chunk-O7DJWXII.mjs

@@ -0,0 +1,112 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+
+// src/components/Switch.tsx
+import { forwardRef, useEffect, useRef } from "react";
+import {
+  getSwitchRootClasses,
+  getSwitchThumbClasses,
+  getSwitchTrackClasses,
+  mergeAriaDescribedBy,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Switch = forwardRef(function Switch2({
+  checked: checkedProp,
+  defaultChecked,
+  disabled = false,
+  size = "md",
+  name,
+  value = "on",
+  status: statusProp,
+  onChange,
+  className,
+  onClick,
+  children,
+  id,
+  onBlur,
+  ...props
+}, ref) {
+  const formItemControl = useFormItemControlContext();
+  const [checked, setChecked] = useControlledState({
+    value: checkedProp,
+    defaultValue: defaultChecked ?? false,
+    onChange
+  });
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = formItemControl?.shakeTrigger;
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, shakeTrigger]);
+  const skipToggleRef = useRef(false);
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) skipToggleRef.current = true;
+  };
+  const handleChange = (event) => {
+    if (effectiveDisabled) return;
+    if (skipToggleRef.current) {
+      skipToggleRef.current = false;
+      return;
+    }
+    const next = event.target.checked;
+    setChecked(next);
+    formItemControl?.onChange?.(next);
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    formItemControl?.onBlur?.();
+  };
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  return /* @__PURE__ */ jsxs("label", { ref: rootRef, className: getSwitchRootClasses(effectiveDisabled, className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          ref,
+          id: effectiveId,
+          name: effectiveName,
+          type: "checkbox",
+          role: "switch",
+          className: "sr-only peer",
+          checked,
+          disabled: effectiveDisabled,
+          value,
+          "aria-checked": checked,
+          "aria-invalid": status === "error" ? true : props["aria-invalid"],
+          "aria-required": formItemControl?.required || props["aria-required"] ? true : void 0,
+          "aria-describedby": describedBy,
+          onClick: handleClick,
+          onChange: handleChange,
+          onBlur: handleBlur
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: getSwitchTrackClasses(size, checked, effectiveDisabled, status),
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("span", { className: getSwitchThumbClasses(size, checked) })
+        }
+      )
+    ] }),
+    children
+  ] });
+});
+Switch.displayName = "Switch";
+
+export {
+  Switch
+};

package/dist/{chunk-CUAXRBKO.mjs → chunk-OP77MPGN.mjs}

@@ -1,18 +1,21 @@
 // src/components/ChartCanvas.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import {
   chartCanvasBaseClasses,
+  chartCanvasHostClasses,
   classNames,
   createChartResizeObserverController,
+  DEFAULT_CHART_PADDING,
+  DEFAULT_CHART_SIZE,
   getChartInnerRect,
   resolveResponsiveChartSize
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ChartCanvas = ({
-  width = 320,
-  height = 200,
+  width = DEFAULT_CHART_SIZE.width,
+  height = DEFAULT_CHART_SIZE.height,
   responsive = false,
-  padding = 24,
+  padding = DEFAULT_CHART_PADDING,
   className,
   title,
   desc,
@@ -20,7 +23,8 @@ var ChartCanvas = ({
   onResolvedSizeChange,
   ...props
 }) => {
-  const svgRef = useRef(null);
+  const hostRef = useRef(null);
+  const labelId = useId();
   const [observedSize, setObservedSize] = useState(null);
   const lastReportedSizeRef = useRef(null);
   const resizeControllerRef = useRef(
@@ -37,6 +41,9 @@ var ChartCanvas = ({
     [resolvedSize.width, resolvedSize.height, padding]
   );
   const svgClasses = useMemo(() => classNames(chartCanvasBaseClasses, className), [className]);
+  const titleId = title ? `${labelId}-title` : void 0;
+  const descId = desc ? `${labelId}-desc` : void 0;
+  const named = Boolean(title || props["aria-label"]);
   useEffect(() => {
     const controller = resizeControllerRef.current;
     if (!responsive) {
@@ -44,7 +51,7 @@ var ChartCanvas = ({
       setObservedSize(null);
       return void 0;
     }
-    const target = svgRef.current?.parentElement;
+    const target = hostRef.current;
     if (!target) return void 0;
     controller.observe(target);
     return () => controller.disconnect();
@@ -59,22 +66,25 @@ var ChartCanvas = ({
     lastReportedSizeRef.current = nextSize;
     onResolvedSizeChange(nextSize);
   }, [resolvedSize.width, resolvedSize.height, onResolvedSizeChange]);
-  return /* @__PURE__ */ jsxs(
+  const content = typeof children === "function" ? children({ innerRect, width: resolvedSize.width, height: resolvedSize.height }) : children;
+  return /* @__PURE__ */ jsx("div", { ref: hostRef, className: chartCanvasHostClasses, "data-chart-canvas-host": "", children: /* @__PURE__ */ jsxs(
     "svg",
     {
       ...props,
-      ref: svgRef,
       width: resolvedSize.width,
       height: resolvedSize.height,
       viewBox: `0 0 ${resolvedSize.width} ${resolvedSize.height}`,
       className: svgClasses,
+      role: named ? "img" : void 0,
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
       children: [
-        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
-        desc ? /* @__PURE__ */ jsx("desc", { children: desc }) : null,
-        /* @__PURE__ */ jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children })
+        title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
+        desc ? /* @__PURE__ */ jsx("desc", { id: descId, children: desc }) : null,
+        /* @__PURE__ */ jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children: content })
       ]
     }
-  );
+  ) });
 };
 var ChartCanvas_default = ChartCanvas;
 

package/dist/chunk-OTABJT7Z.mjs

@@ -0,0 +1,61 @@
+import {
+  StatusIcon
+} from "./chunk-ED7QR6PJ.mjs";
+
+// src/components/Result.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  classNames,
+  resultBaseClasses,
+  resultIconContainerBaseClasses,
+  resultIconClasses,
+  resultHttpLabelClasses,
+  resultTitleClasses,
+  resultSubTitleClasses,
+  resultExtraClasses,
+  RESULT_ICON_SIZE_PX,
+  getResultColorScheme,
+  getResultIconPath,
+  isHttpResultStatus,
+  resultHeadingTag
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Result = forwardRef(function Result2({ status = "info", title, subTitle, headingLevel, icon, extra, className, children, ...props }, ref) {
+  const colors = useMemo(() => getResultColorScheme(status), [status]);
+  const iconPath = useMemo(() => getResultIconPath(status), [status]);
+  const httpLabel = isHttpResultStatus(status) ? status : void 0;
+  const hasTitle = title !== void 0 && title !== null && title !== false && title !== "";
+  const Heading = resultHeadingTag(headingLevel);
+  const wrapperClasses = classNames(resultBaseClasses, className);
+  const iconSvgCls = classNames(resultIconClasses, colors.iconColor);
+  const titleCls = resultTitleClasses;
+  return /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: resultIconContainerBaseClasses,
+        style: {
+          width: RESULT_ICON_SIZE_PX,
+          height: RESULT_ICON_SIZE_PX,
+          background: colors.iconBg
+        },
+        children: icon !== void 0 ? icon : httpLabel ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(resultHttpLabelClasses, colors.iconColor),
+            "aria-hidden": hasTitle ? true : void 0,
+            children: httpLabel
+          }
+        ) : /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconSvgCls, "aria-hidden": "true", focusable: "false" })
+      }
+    ),
+    hasTitle ? /* @__PURE__ */ jsx(Heading, { className: titleCls, children: title }) : null,
+    subTitle ? /* @__PURE__ */ jsx("div", { className: resultSubTitleClasses, children: subTitle }) : null,
+    extra ? /* @__PURE__ */ jsx("div", { className: resultExtraClasses, children: extra }) : null,
+    children ? /* @__PURE__ */ jsx("div", { className: "mt-6 w-full", children }) : null
+  ] });
+});
+
+export {
+  Result
+};