@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-VW6RNQK4.mjs

@@ -0,0 +1,152 @@
+import {
+  renderBodyPortal,
+  useBackgroundInert,
+  useBodyScrollLock
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Loading.tsx
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  getLoadingIndicator,
+  getLoadingLabel,
+  getLoadingTextClasses,
+  mergeTigerLocale,
+  DEFAULT_LOADING_BACKGROUND,
+  loadingContainerBaseClasses,
+  loadingFullscreenBaseClasses,
+  loadingRegionBaseClasses,
+  loadingRegionOverlayClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function renderIndicator(node) {
+  if (node.kind === "items") {
+    return /* @__PURE__ */ jsx("div", { className: node.className, "aria-hidden": "true", children: node.items.map((item, index) => /* @__PURE__ */ jsx("div", { className: item.className }, index)) });
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: node.className,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: node.viewBox,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: node.elements.map((el, index) => React.createElement(el.type, { key: index, ...el.attrs }))
+    }
+  );
+}
+var Loading = ({
+  variant = "spinner",
+  size = "md",
+  color = "primary",
+  text,
+  spinning = true,
+  fullscreen = false,
+  delay = 0,
+  background = DEFAULT_LOADING_BACKGROUND,
+  customColor,
+  lockScroll = true,
+  className,
+  style,
+  locale,
+  children,
+  ...props
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const [visible, setVisible] = useState(delay <= 0);
+  const containerRef = useRef(null);
+  const hasRegion = children != null && children !== false;
+  const showIndicator = visible && spinning;
+  const showFullscreen = fullscreen && showIndicator && !hasRegion;
+  useBodyScrollLock({ enabled: showFullscreen && lockScroll });
+  useBackgroundInert({ enabled: showFullscreen, containerRef });
+  useEffect(() => {
+    if (delay <= 0) {
+      setVisible(true);
+      return;
+    }
+    setVisible(false);
+    const timer = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+  const indicator = useMemo(
+    () => getLoadingIndicator({ variant, size, color, customColor }),
+    [variant, size, color, customColor]
+  );
+  const inlineStyle = useMemo(
+    () => ({
+      ...customColor ? { color: customColor } : null,
+      ...fullscreen ? { backgroundColor: background } : null,
+      ...style
+    }),
+    [customColor, fullscreen, background, style]
+  );
+  const overlayStyle = useMemo(
+    () => ({
+      ...customColor ? { color: customColor } : null,
+      backgroundColor: background,
+      ...style
+    }),
+    [customColor, background, style]
+  );
+  const label = getLoadingLabel(mergedLocale, text);
+  const indicatorNode = renderIndicator(indicator);
+  const textNode = text ? /* @__PURE__ */ jsx("div", { className: getLoadingTextClasses(size, color, customColor), children: text }) : null;
+  const decorative = props["aria-hidden"] === true || props["aria-hidden"] === "true" || props.role === "presentation";
+  const statusProps = decorative ? { role: "presentation", "aria-hidden": true } : { role: "status", "aria-label": label, "aria-busy": true };
+  if (hasRegion) {
+    return /* @__PURE__ */ jsxs("div", { className: classNames(loadingRegionBaseClasses, className), children: [
+      /* @__PURE__ */ jsx("div", { inert: showIndicator || void 0, children }),
+      showIndicator ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          ref: containerRef,
+          className: loadingRegionOverlayClasses,
+          style: overlayStyle,
+          ...statusProps,
+          children: [
+            indicatorNode,
+            textNode
+          ]
+        }
+      ) : null
+    ] });
+  }
+  if (!showIndicator) {
+    return null;
+  }
+  const loadingNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: containerRef,
+      className: classNames(
+        fullscreen ? loadingFullscreenBaseClasses : loadingContainerBaseClasses,
+        className
+      ),
+      style: inlineStyle,
+      ...statusProps,
+      children: [
+        indicatorNode,
+        textNode
+      ]
+    }
+  );
+  if (fullscreen) {
+    return renderBodyPortal(loadingNode);
+  }
+  return loadingNode;
+};
+
+export {
+  Loading
+};

package/dist/chunk-WBESWSTS.mjs

@@ -0,0 +1,121 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/PrintLayout.tsx
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+import {
+  classNames,
+  getPrintLayoutBoxStyle,
+  getPrintLayoutClasses,
+  getPrintLayoutLabels,
+  getPrintLayoutPageKey,
+  injectPrintLayoutStyles,
+  mergeTigerLocale,
+  printLayoutFooterClasses,
+  printLayoutHeaderClasses,
+  printLayoutPageBreakClasses,
+  printLayoutPageBreakLabelClasses,
+  printPrintLayoutRoot,
+  resolvePrintPageBox
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PrintLayoutContext = React.createContext({
+  showPageBreaks: true
+});
+var PrintLayout = forwardRef(function PrintLayout2({
+  pageSize = "A4",
+  orientation = "portrait",
+  showHeader = false,
+  showFooter = false,
+  headerText,
+  footerText,
+  headerRender,
+  footerRender,
+  showPageBreaks = true,
+  pageWidth,
+  pageHeight,
+  className,
+  children,
+  locale,
+  ...rest
+}, ref) {
+  const rootRef = useRef(null);
+  const box = useMemo(
+    () => resolvePrintPageBox(
+      pageSize,
+      orientation,
+      pageWidth,
+      pageHeight
+    ),
+    [pageSize, orientation, pageWidth, pageHeight]
+  );
+  const pageKey = getPrintLayoutPageKey(box);
+  useEffect(() => {
+    injectPrintLayoutStyles();
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      print: () => printPrintLayoutRoot(rootRef.current),
+      getRoot: () => rootRef.current
+    }),
+    []
+  );
+  const header = showHeader ? headerRender || headerText : null;
+  const footer = showFooter ? footerRender || footerText : null;
+  return /* @__PURE__ */ jsx(PrintLayoutContext.Provider, { value: { showPageBreaks, locale }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: rootRef,
+      className: getPrintLayoutClasses(className),
+      style: { ...getPrintLayoutBoxStyle(box), ...rest.style },
+      "data-tiger-print": pageKey,
+      children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+        header ? /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { className: printLayoutHeaderClasses, children: header }) }) }) : null,
+        /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "tiger-print-content", children }) }) }),
+        footer ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: printLayoutFooterClasses, children: footer }) }) }) : null
+      ] })
+    }
+  ) });
+});
+PrintLayout.displayName = "PrintLayout";
+var PrintPageBreak = forwardRef(
+  function PrintPageBreak2({ className, locale, children, "aria-hidden": ariaHidden, ...rest }, ref) {
+    const { showPageBreaks, locale: layoutLocale } = useContext(PrintLayoutContext);
+    const config = useTigerConfig();
+    const label = getPrintLayoutLabels(
+      mergeTigerLocale(mergeTigerLocale(config.locale, layoutLocale), locale)
+    ).pageBreak;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classNames("print:break-before-page", className),
+        "aria-hidden": ariaHidden ?? true,
+        children: showPageBreaks ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(printLayoutPageBreakClasses, printLayoutPageBreakLabelClasses),
+            children: children ?? label
+          }
+        ) : null
+      }
+    );
+  }
+);
+PrintPageBreak.displayName = "PrintPageBreak";
+
+export {
+  PrintLayout,
+  PrintPageBreak
+};

package/dist/chunk-WCIUNNIN.mjs

@@ -0,0 +1,108 @@
+// src/components/Card.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  getCardClasses,
+  getCardCoverWrapperClasses,
+  resolveCardPadding,
+  resolveCardRoot,
+  handleCardActivation,
+  cardHeaderClasses,
+  cardFooterClasses,
+  cardCoverClasses,
+  cardActionsClasses,
+  cardDirectionClasses,
+  cardHorizontalBodyClasses
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function renderCover(cover, coverAlt, horizontal) {
+  if (cover == null || cover === false) return null;
+  const wrapperClass = getCardCoverWrapperClasses(horizontal);
+  if (typeof cover === "string") {
+    return /* @__PURE__ */ jsx("div", { className: wrapperClass, "data-tiger-card-cover": "", children: /* @__PURE__ */ jsx("img", { src: cover, alt: coverAlt, className: cardCoverClasses }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: wrapperClass, "data-tiger-card-cover": "", children: cover });
+}
+var Card = forwardRef(function Card2({
+  variant = "default",
+  size = "md",
+  direction = "vertical",
+  hoverable = false,
+  cover,
+  coverAlt = "",
+  href,
+  padding,
+  header,
+  footer,
+  actions,
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ...props
+}, ref) {
+  const isHorizontal = direction === "horizontal";
+  const hasCover = cover != null && cover !== false;
+  const nestedInteractive = actions != null;
+  const clickable = Boolean(onClick) || Boolean(href?.trim());
+  const root = resolveCardRoot({ href, clickable, nestedInteractive });
+  const paddingClass = resolveCardPadding(size, padding);
+  const cardClasses = classNames(
+    getCardClasses(variant, hoverable, clickable),
+    cardDirectionClasses[direction],
+    !hasCover && paddingClass,
+    className
+  );
+  const bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    header != null && /* @__PURE__ */ jsx("div", { className: cardHeaderClasses, children: header }),
+    children != null && /* @__PURE__ */ jsx("div", { children }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: cardFooterClasses, children: footer }),
+    actions != null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(cardActionsClasses, cardFooterClasses),
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => event.stopPropagation(),
+        children: actions
+      }
+    )
+  ] });
+  const content = hasCover ? /* @__PURE__ */ jsx("div", { className: classNames(cardHorizontalBodyClasses, paddingClass), "data-tiger-card-body": "", children: bodyContent }) : isHorizontal ? /* @__PURE__ */ jsx("div", { className: cardHorizontalBodyClasses, "data-tiger-card-body": "", children: bodyContent }) : bodyContent;
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || root.tag === "a") return;
+    if (root.role) {
+      handleCardActivation(event, () => {
+        if (href) {
+          window.location.assign(href);
+          return;
+        }
+        onClick?.(event);
+      });
+    }
+  };
+  const shared = {
+    ...props,
+    className: cardClasses,
+    onClick,
+    onKeyDown: handleKeyDown,
+    role: root.role,
+    tabIndex: root.tabIndex,
+    "data-tiger-card": ""
+  };
+  if (root.tag === "a") {
+    return /* @__PURE__ */ jsxs("a", { ...shared, ref, href, children: [
+      renderCover(cover, coverAlt, isHorizontal),
+      content
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...shared, ref, children: [
+    renderCover(cover, coverAlt, isHorizontal),
+    content
+  ] });
+});
+Card.displayName = "Card";
+
+export {
+  Card
+};

package/dist/chunk-WFLXJOFU.mjs

@@ -0,0 +1,124 @@
+import {
+  useButtonGroupContext
+} from "./chunk-G5NPND2T.mjs";
+
+// src/components/Button.tsx
+import React, { forwardRef, useMemo } from "react";
+import {
+  resolveButtonClasses,
+  resolveButtonHtmlType,
+  resolveButtonIconPlacement,
+  getButtonIconSlotClasses,
+  getButtonSpinnerClasses,
+  getSpinnerSVG,
+  omitUnsupportedColorProp,
+  warnMissingAccessibleName,
+  TIGER_CHROME_ATTR
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var createDefaultSpinner = (size) => {
+  const spinnerSvg = getSpinnerSVG("spinner");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getButtonSpinnerClasses(size),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: spinnerSvg.elements.map(
+        (el, index) => React.createElement(el.type, { key: index, ...el.attrs })
+      )
+    }
+  );
+};
+function hasLabelContent(children) {
+  if (children == null || children === false) return false;
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children).trim().length > 0;
+  }
+  return React.Children.count(children) > 0;
+}
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size,
+  disabled = false,
+  loading = false,
+  loadingIcon,
+  icon,
+  block = false,
+  iconPosition = "start",
+  htmlType,
+  type,
+  danger = false,
+  onClick,
+  children,
+  className,
+  "aria-busy": ariaBusyProp,
+  "aria-disabled": ariaDisabledProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...rest
+}, ref) {
+  const domRest = omitUnsupportedColorProp("Button", rest);
+  const group = useButtonGroupContext();
+  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedType = resolveButtonHtmlType(htmlType, type);
+  const hasLabel = hasLabelContent(children);
+  warnMissingAccessibleName("Button", {
+    text: hasLabel ? "named" : "",
+    ariaLabel,
+    ariaLabelledby
+  });
+  const buttonClasses = useMemo(
+    () => resolveButtonClasses({
+      variant,
+      danger,
+      size: resolvedSize,
+      disabled,
+      loading,
+      block,
+      className
+    }),
+    [variant, danger, resolvedSize, disabled, loading, block, className]
+  );
+  const placement = resolveButtonIconPlacement(iconPosition);
+  const slotClass = getButtonIconSlotClasses(placement, hasLabel);
+  const chrome = loading ? /* @__PURE__ */ jsx("span", { className: slotClass || void 0, "aria-hidden": "true", children: loadingIcon ?? createDefaultSpinner(resolvedSize) }) : icon ? /* @__PURE__ */ jsx("span", { className: slotClass || void 0, "aria-hidden": "true", children: icon }) : null;
+  const handleClick = (event) => {
+    if (disabled || loading) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...domRest,
+      ref,
+      ...{ [TIGER_CHROME_ATTR]: "" },
+      className: buttonClasses,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-busy": ariaBusyProp ?? (loading ? true : void 0),
+      "aria-disabled": ariaDisabledProp ?? (disabled ? true : void 0),
+      disabled: disabled || void 0,
+      onClick: handleClick,
+      type: resolvedType,
+      children: placement === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        chrome
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        chrome,
+        children
+      ] })
+    }
+  );
+});
+Button.displayName = "Button";
+
+export {
+  Button
+};

package/dist/chunk-WN6ZHQTI.mjs

@@ -0,0 +1,129 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/BackTop.tsx
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  createBackTopVisibilityController,
+  getBackTopLabels,
+  getBackTopOffsetStyle,
+  getBackTopPositionClasses,
+  getBackTopVisibilityClasses,
+  getScrollRootEventTarget,
+  mergeTigerLocale,
+  resolveScrollRoot,
+  scrollToTop,
+  backTopIconPath
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var DefaultIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: "h-5 w-5",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: backTopIconPath })
+  }
+);
+var BackTop = forwardRef(function BackTop2({
+  visibilityHeight = 400,
+  target,
+  duration,
+  position = "auto",
+  placement = "bottom-right",
+  offset,
+  onClick,
+  children,
+  className,
+  style,
+  locale,
+  labels,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  const [visible, setVisible] = useState(false);
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labelSet = getBackTopLabels(mergedLocale, labels);
+  const resolved = resolveScrollRoot(target);
+  const resolvedKey = resolved.isWindow ? "window" : resolved.target;
+  const visibilityHeightRef = useRef(visibilityHeight);
+  visibilityHeightRef.current = visibilityHeight;
+  const controllerRef = useRef(
+    void 0
+  );
+  useEffect(() => {
+    const root = resolveScrollRoot(target);
+    const eventTarget = getScrollRootEventTarget(root);
+    const scrollNode = root.target;
+    if (!eventTarget || !scrollNode) return void 0;
+    const visibilityController = createBackTopVisibilityController({
+      target: scrollNode,
+      getVisibilityHeight: () => visibilityHeightRef.current,
+      onChange: setVisible
+    });
+    controllerRef.current = visibilityController;
+    eventTarget.addEventListener("scroll", visibilityController.schedule, { passive: true });
+    visibilityController.update();
+    return () => {
+      eventTarget.removeEventListener("scroll", visibilityController.schedule);
+      visibilityController.cancel();
+      controllerRef.current = void 0;
+    };
+  }, [resolvedKey, target]);
+  useEffect(() => {
+    controllerRef.current?.update();
+  }, [visibilityHeight]);
+  const handleClick = useCallback(
+    (event) => {
+      const root = resolveScrollRoot(target);
+      if (root.target) scrollToTop(root.target, duration);
+      onClick?.(event);
+    },
+    [target, duration, onClick]
+  );
+  const buttonClasses = useMemo(
+    () => classNames(
+      getBackTopPositionClasses({ position, placement }),
+      getBackTopVisibilityClasses(visible),
+      className
+    ),
+    [position, placement, visible, className]
+  );
+  const buttonStyle = useMemo(() => {
+    const offsetStyle = getBackTopOffsetStyle(position, placement, offset);
+    return offsetStyle ? { ...offsetStyle, ...style } : style;
+  }, [position, placement, offset, style]);
+  const resolvedAriaLabel = typeof ariaLabel === "string" && ariaLabel.trim() ? ariaLabel : children ? void 0 : labelSet.ariaLabel;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      ref,
+      type: "button",
+      className: buttonClasses,
+      style: buttonStyle,
+      "aria-label": resolvedAriaLabel,
+      "aria-hidden": visible ? void 0 : true,
+      tabIndex: visible ? 0 : -1,
+      onClick: handleClick,
+      children: children || /* @__PURE__ */ jsx(DefaultIcon, {})
+    }
+  );
+});
+BackTop.displayName = "BackTop";
+var BackTop_default = BackTop;
+
+export {
+  BackTop,
+  BackTop_default
+};