@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-O7TV5OKS.mjs

@@ -1,143 +0,0 @@
-// src/components/FloatButton.tsx
-import { createContext, useContext, useState, useMemo, useCallback } from "react";
-import ReactDOM from "react-dom";
-import {
-  classNames,
-  isBrowser,
-  floatButtonBaseClasses,
-  floatButtonShapeClasses,
-  floatButtonSizeClasses,
-  floatButtonTypeClasses,
-  floatButtonDisabledClasses,
-  floatButtonIconSizeClasses,
-  floatButtonPlusIconPath,
-  getFloatButtonGroupClasses,
-  getViewportOffsetStyle,
-  viewportFloatingBaseClasses,
-  viewportPlacementClasses
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var FloatButtonGroupContext = createContext(null);
-var DefaultPlusIcon = ({ size }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    className: floatButtonIconSizeClasses[size],
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: floatButtonPlusIconPath })
-  }
-);
-var FloatButton = ({
-  shape,
-  size = "md",
-  type = "primary",
-  tooltip,
-  disabled = false,
-  ariaLabel,
-  className,
-  floating = false,
-  placement = "bottom-right",
-  offset,
-  style,
-  children,
-  onClick,
-  ...props
-}) => {
-  const group = useContext(FloatButtonGroupContext);
-  const resolvedShape = shape ?? group?.shape ?? "circle";
-  const classes = useMemo(
-    () => classNames(
-      floatButtonBaseClasses,
-      floatButtonShapeClasses[resolvedShape],
-      floatButtonSizeClasses[size],
-      floatButtonTypeClasses[type],
-      disabled && floatButtonDisabledClasses,
-      floating && viewportFloatingBaseClasses,
-      floating && viewportPlacementClasses[placement],
-      className
-    ),
-    [resolvedShape, size, type, disabled, floating, placement, className]
-  );
-  const buttonStyle = useMemo(
-    () => floating ? { ...getViewportOffsetStyle(placement, offset), ...style } : style,
-    [floating, placement, offset, style]
-  );
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: classes,
-      type: "button",
-      disabled,
-      style: buttonStyle,
-      "aria-label": children != null ? ariaLabel ?? tooltip : ariaLabel ?? tooltip ?? "Add",
-      title: tooltip,
-      onClick: disabled ? void 0 : onClick,
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx(DefaultPlusIcon, { size })
-    }
-  );
-};
-var FloatButtonGroup = ({
-  shape: groupShape,
-  trigger = "click",
-  open: controlledOpen,
-  triggerNode,
-  children,
-  className,
-  onOpenChange,
-  placement = "bottom-right",
-  offset,
-  portal = true,
-  style,
-  ...props
-}) => {
-  const groupContextValue = useMemo(() => ({ shape: groupShape }), [groupShape]);
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isOpen = controlledOpen ?? internalOpen;
-  const toggle = useCallback(() => {
-    const next = !isOpen;
-    setInternalOpen(next);
-    onOpenChange?.(next);
-  }, [isOpen, onOpenChange]);
-  const handleMouseEnter = useCallback(() => {
-    setInternalOpen(true);
-    onOpenChange?.(true);
-  }, [onOpenChange]);
-  const handleMouseLeave = useCallback(() => {
-    setInternalOpen(false);
-    onOpenChange?.(false);
-  }, [onOpenChange]);
-  const groupClasses = useMemo(
-    () => classNames(getFloatButtonGroupClasses({ placement, portal }), className),
-    [placement, portal, className]
-  );
-  const groupStyle = useMemo(
-    () => ({ ...getViewportOffsetStyle(placement, offset), ...style }),
-    [placement, offset, style]
-  );
-  if (portal && !isBrowser()) return null;
-  const content = /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, { value: groupContextValue, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: groupClasses,
-      style: groupStyle,
-      onMouseEnter: trigger === "hover" ? handleMouseEnter : void 0,
-      onMouseLeave: trigger === "hover" ? handleMouseLeave : void 0,
-      ...props,
-      children: [
-        triggerNode && /* @__PURE__ */ jsx("div", { onClick: trigger === "click" ? toggle : void 0, children: triggerNode }),
-        isOpen && children
-      ]
-    }
-  ) });
-  return portal ? ReactDOM.createPortal(content, document.body) : content;
-};
-
-export {
-  FloatButton,
-  FloatButtonGroup
-};

package/dist/chunk-OJ6SHHOZ.mjs

@@ -1,234 +0,0 @@
-import {
-  ImageGroupContext
-} from "./chunk-3LACOSJQ.mjs";
-import {
-  ImagePreview
-} from "./chunk-V7HJ5HLC.mjs";
-import {
-  usePopup
-} from "./chunk-WTHWLCRL.mjs";
-import {
-  renderOverlayPortal
-} from "./chunk-HKAZXG74.mjs";
-
-// src/components/Image.tsx
-import { useState, useRef, useEffect, useMemo, useContext, useCallback } from "react";
-import {
-  classNames,
-  imageBaseClasses,
-  getImageImgClasses,
-  imageErrorClasses,
-  imageLoadingClasses,
-  imagePreviewCursorClass,
-  imageErrorIconPath,
-  toCSSSize
-} from "@expcat/tigercat-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SvgIcon = ({ d, className = "w-8 h-8" }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className,
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d })
-  }
-);
-var Image = ({
-  src,
-  alt = "",
-  width,
-  height,
-  fit = "cover",
-  fallbackSrc,
-  preview = true,
-  previewTrigger = "click",
-  lazy = false,
-  className,
-  errorRender,
-  placeholderRender,
-  onPreviewOpenChange,
-  onClick,
-  onKeyDown,
-  style,
-  ...props
-}) => {
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(false);
-  const [actualSrc, setActualSrc] = useState(lazy ? "" : src);
-  const [previewVisible, setPreviewVisible] = useState(false);
-  const containerRef = useRef(null);
-  const group = useContext(ImageGroupContext);
-  const registeredIndexRef = useRef(-1);
-  const hoverPreviewEnabled = preview && previewTrigger === "hover" && !group;
-  const clickPreviewEnabled = preview && previewTrigger !== "hover";
-  const {
-    currentVisible: hoverVisible,
-    triggerRef: hoverTriggerRef,
-    floatingRef: hoverFloatingRef,
-    floatingStyles: hoverFloatingStyles,
-    floatingClasses: hoverFloatingClasses,
-    positioned: hoverPositioned,
-    overlayTarget: hoverOverlayTarget,
-    triggerHandlers: hoverTriggerHandlers
-  } = usePopup({
-    trigger: "hover",
-    placement: "right",
-    offset: 12,
-    disabled: !hoverPreviewEnabled
-  });
-  const setRootRef = useCallback(
-    (el) => {
-      containerRef.current = el;
-      hoverTriggerRef.current = el;
-    },
-    [hoverTriggerRef]
-  );
-  useEffect(() => {
-    if (group && src) {
-      registeredIndexRef.current = group.register(src);
-      return () => {
-        group.unregister(src);
-      };
-    }
-  }, [group, src]);
-  useEffect(() => {
-    if (!lazy || !containerRef.current) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting) {
-          setActualSrc(src);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.01 }
-    );
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, [lazy, src]);
-  useEffect(() => {
-    if (!lazy) {
-      setActualSrc(src);
-      setError(false);
-      setLoading(true);
-    }
-  }, [src, lazy]);
-  const handleLoad = useCallback(() => {
-    setLoading(false);
-    setError(false);
-  }, []);
-  const handleError = useCallback(() => {
-    setLoading(false);
-    setError(true);
-    if (fallbackSrc && actualSrc !== fallbackSrc) {
-      setActualSrc(fallbackSrc);
-      setError(false);
-      setLoading(true);
-    }
-  }, [fallbackSrc, actualSrc]);
-  const handleClick = useCallback(
-    (e) => {
-      onClick?.(e);
-      if (!clickPreviewEnabled) return;
-      if (group) {
-        group.openPreview(registeredIndexRef.current >= 0 ? registeredIndexRef.current : 0);
-      } else {
-        setPreviewVisible(true);
-        onPreviewOpenChange?.(true);
-      }
-    },
-    [clickPreviewEnabled, group, onClick, onPreviewOpenChange]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      onKeyDown?.(e);
-      if (clickPreviewEnabled && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault();
-        handleClick(e);
-      }
-    },
-    [clickPreviewEnabled, handleClick, onKeyDown]
-  );
-  const containerClasses = useMemo(
-    () => classNames(imageBaseClasses, preview && imagePreviewCursorClass, className),
-    [preview, className]
-  );
-  const imgClasses = useMemo(() => getImageImgClasses(fit), [fit]);
-  const containerStyle = useMemo(() => {
-    const s = { ...style };
-    const w = toCSSSize(width);
-    const h = toCSSSize(height);
-    if (w) s.width = w;
-    if (h) s.height = h;
-    return s;
-  }, [width, height, style]);
-  let content;
-  if (error && !fallbackSrc) {
-    content = errorRender || /* @__PURE__ */ jsx("div", { className: imageErrorClasses, children: /* @__PURE__ */ jsx(SvgIcon, { d: imageErrorIconPath }) });
-  } else if (loading && !actualSrc) {
-    content = placeholderRender || /* @__PURE__ */ jsx("div", { className: imageLoadingClasses, children: /* @__PURE__ */ jsx(SvgIcon, { d: imageErrorIconPath }) });
-  } else {
-    content = /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: actualSrc,
-        alt,
-        className: imgClasses,
-        onLoad: handleLoad,
-        onError: handleError
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...props,
-        ref: setRootRef,
-        className: containerClasses,
-        style: containerStyle,
-        role: clickPreviewEnabled ? "button" : void 0,
-        tabIndex: clickPreviewEnabled ? 0 : void 0,
-        "aria-label": clickPreviewEnabled ? `Preview ${alt || "image"}` : void 0,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        ...hoverPreviewEnabled ? hoverTriggerHandlers : {},
-        children: content
-      }
-    ),
-    !group && previewVisible && src && /* @__PURE__ */ jsx(
-      ImagePreview,
-      {
-        open: previewVisible,
-        images: [src],
-        currentIndex: 0,
-        onOpenChange: (val) => {
-          setPreviewVisible(val);
-          onPreviewOpenChange?.(val);
-        }
-      }
-    ),
-    hoverPreviewEnabled && hoverVisible && src && renderOverlayPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: hoverFloatingRef,
-          style: hoverFloatingStyles,
-          className: classNames(
-            hoverFloatingClasses,
-            "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
-          ),
-          "data-positioned": hoverPositioned,
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "block max-w-[16rem] max-h-[16rem] object-contain" })
-        }
-      ),
-      hoverOverlayTarget
-    )
-  ] });
-};
-
-export {
-  Image
-};

package/dist/chunk-OL3RXYMG.mjs

@@ -1,46 +0,0 @@
-import {
-  useControlledState
-} from "./chunk-MEFARVQI.mjs";
-
-// src/components/CheckboxGroup.tsx
-import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-var CheckboxGroupContextProvider = createContext(null);
-var useCheckboxGroup = () => {
-  return useContext(CheckboxGroupContextProvider);
-};
-var CheckboxGroup = ({
-  value: controlledValue,
-  defaultValue = [],
-  disabled = false,
-  size = "md",
-  onChange,
-  children,
-  className,
-  ...props
-}) => {
-  const [value, setValue] = useControlledState(controlledValue, defaultValue, onChange);
-  const updateValue = (val, checked) => {
-    if (disabled) return;
-    const currentValue = [...value];
-    const index = currentValue.indexOf(val);
-    if (checked && index === -1) {
-      currentValue.push(val);
-    } else if (!checked && index !== -1) {
-      currentValue.splice(index, 1);
-    }
-    setValue(currentValue);
-  };
-  const context = {
-    value,
-    disabled,
-    size,
-    updateValue
-  };
-  return /* @__PURE__ */ jsx(CheckboxGroupContextProvider.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ...props, className, children }) });
-};
-
-export {
-  useCheckboxGroup,
-  CheckboxGroup
-};

package/dist/chunk-OO562MFD.mjs

@@ -1,80 +0,0 @@
-import {
-  AvatarGroupContext
-} from "./chunk-FPQMJFFM.mjs";
-
-// src/components/Avatar.tsx
-import { useState, useMemo, useContext } from "react";
-import {
-  classNames,
-  avatarBaseClasses,
-  avatarSizeClasses,
-  avatarShapeClasses,
-  avatarDefaultBgColor,
-  avatarDefaultTextColor,
-  avatarImageClasses,
-  getInitials
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var Avatar = ({
-  size,
-  shape = "circle",
-  src,
-  alt = "",
-  text,
-  bgColor = avatarDefaultBgColor,
-  textColor = avatarDefaultTextColor,
-  className,
-  children,
-  ...props
-}) => {
-  const [imageError, setImageError] = useState(false);
-  const group = useContext(AvatarGroupContext);
-  const hasImage = Boolean(src) && !imageError;
-  const displayText = text ? getInitials(text) : "";
-  const resolvedSize = size ?? group?.size ?? "md";
-  const ariaLabelProp = props["aria-label"];
-  const ariaLabelledbyProp = props["aria-labelledby"];
-  const ariaHiddenProp = props["aria-hidden"];
-  const computedLabel = ariaLabelProp ?? (alt.trim() ? alt : void 0) ?? (text?.trim() || void 0);
-  const isDecorative = ariaHiddenProp === true || !computedLabel && !ariaLabelledbyProp;
-  const avatarClasses = useMemo(
-    () => classNames(
-      avatarBaseClasses,
-      avatarSizeClasses[resolvedSize],
-      avatarShapeClasses[shape],
-      group?.itemClass,
-      !hasImage && bgColor,
-      !hasImage && textColor,
-      className
-    ),
-    [resolvedSize, shape, group?.itemClass, hasImage, bgColor, textColor, className]
-  );
-  if (hasImage) {
-    return /* @__PURE__ */ jsx("span", { ...props, className: avatarClasses, "aria-hidden": isDecorative ? true : ariaHiddenProp, children: /* @__PURE__ */ jsx(
-      "img",
-      {
-        src,
-        alt,
-        className: avatarImageClasses,
-        onError: () => setImageError(true)
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...props,
-      className: avatarClasses,
-      ...isDecorative ? { "aria-hidden": true } : {
-        role: "img",
-        "aria-label": computedLabel,
-        "aria-labelledby": ariaLabelledbyProp
-      },
-      children: displayText || children
-    }
-  );
-};
-
-export {
-  Avatar
-};

package/dist/chunk-OPHYFC5W.mjs

@@ -1,52 +0,0 @@
-import {
-  RowContext
-} from "./chunk-TULQETJ5.mjs";
-
-// src/components/Col.tsx
-import { useContext, useMemo } from "react";
-import {
-  classNames,
-  getColMergedStyleVars,
-  getSpanClasses,
-  getOffsetClasses,
-  getOrderClasses,
-  getFlexClasses,
-  getColGutterClasses
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var Col = ({
-  span = 24,
-  offset = 0,
-  order,
-  flex,
-  children,
-  className,
-  style,
-  ...divProps
-}) => {
-  const { gutter } = useContext(RowContext);
-  const isFlexSpanMode = flex !== void 0 && span === 0;
-  const colClasses = useMemo(
-    () => classNames(
-      isFlexSpanMode ? "" : getSpanClasses(span),
-      getOffsetClasses(offset),
-      getOrderClasses(order),
-      getFlexClasses(flex),
-      getColGutterClasses(gutter || 0),
-      className
-    ),
-    [gutter, isFlexSpanMode, span, offset, order, flex, className]
-  );
-  const mergedStyle = useMemo(
-    () => ({
-      ...getColMergedStyleVars(isFlexSpanMode ? void 0 : span, offset, order, flex),
-      ...style
-    }),
-    [isFlexSpanMode, span, offset, order, flex, style]
-  );
-  return /* @__PURE__ */ jsx("div", { className: colClasses, style: mergedStyle, ...divProps, children });
-};
-
-export {
-  Col
-};

package/dist/chunk-OQ6Z6U7R.mjs

@@ -1,135 +0,0 @@
-// src/components/Breadcrumb.tsx
-import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
-import {
-  classNames,
-  breadcrumbContainerClasses,
-  breadcrumbEllipsisClasses,
-  getBreadcrumbItemClasses,
-  getBreadcrumbLinkClasses,
-  getBreadcrumbSeparatorClasses,
-  getSeparatorContent,
-  getBreadcrumbCollapsedItems
-} from "@expcat/tigercat-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var BreadcrumbContext = createContext(null);
-function useBreadcrumbContext() {
-  return useContext(BreadcrumbContext);
-}
-var BreadcrumbItem = ({
-  href,
-  target,
-  current = false,
-  separator: customSeparator,
-  className,
-  style,
-  onClick,
-  children,
-  icon,
-  ...props
-}) => {
-  const breadcrumbContext = useBreadcrumbContext();
-  const itemClasses = useMemo(() => getBreadcrumbItemClasses(className), [className]);
-  const linkClasses = useMemo(() => getBreadcrumbLinkClasses(current), [current]);
-  const separatorClasses = useMemo(() => getBreadcrumbSeparatorClasses(), []);
-  const separatorContent = useMemo(() => {
-    const separator = customSeparator !== void 0 ? customSeparator : breadcrumbContext?.separator || "/";
-    return getSeparatorContent(separator);
-  }, [customSeparator, breadcrumbContext]);
-  const handleClick = useCallback(
-    (event) => {
-      if (!current) {
-        onClick?.(event);
-      }
-    },
-    [current, onClick]
-  );
-  const computedRel = useMemo(() => {
-    if (target === "_blank") {
-      return "noopener noreferrer";
-    }
-    return void 0;
-  }, [target]);
-  const contentElements = icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "inline-flex", children: icon }),
-    children
-  ] }) : children;
-  const linkElement = href && !current ? /* @__PURE__ */ jsx(
-    "a",
-    {
-      className: linkClasses,
-      href,
-      target,
-      rel: computedRel,
-      onClick: handleClick,
-      children: contentElements
-    }
-  ) : /* @__PURE__ */ jsx("span", { className: linkClasses, "aria-current": current ? "page" : void 0, children: contentElements });
-  const separatorElement = !current ? /* @__PURE__ */ jsx("span", { className: separatorClasses, "aria-hidden": "true", children: separatorContent }) : null;
-  return /* @__PURE__ */ jsxs("li", { className: itemClasses, style, ...props, children: [
-    linkElement,
-    separatorElement
-  ] });
-};
-var Breadcrumb = ({
-  separator = "/",
-  maxItems,
-  className,
-  style,
-  extra,
-  children,
-  ...props
-}) => {
-  const hasExtra = Boolean(extra);
-  const [expanded, setExpanded] = useState(false);
-  const containerClasses = React.useMemo(
-    () => classNames(breadcrumbContainerClasses, hasExtra && "w-full", className),
-    [className, hasExtra]
-  );
-  const contextValue = React.useMemo(() => ({ separator }), [separator]);
-  const renderedItems = useMemo(() => {
-    const items = React.Children.toArray(children);
-    if (expanded || maxItems === void 0 || maxItems <= 0 || maxItems >= items.length) {
-      return items;
-    }
-    const { collapsed } = getBreadcrumbCollapsedItems(items.length, maxItems);
-    if (collapsed.length === 0) return items;
-    const collapsedSet = new Set(collapsed);
-    const result = [];
-    let ellipsisInserted = false;
-    items.forEach((item, index) => {
-      if (collapsedSet.has(index)) {
-        if (!ellipsisInserted) {
-          ellipsisInserted = true;
-          result.push(
-            /* @__PURE__ */ jsxs("li", { className: getBreadcrumbItemClasses(), children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: breadcrumbEllipsisClasses,
-                  "aria-label": "Show collapsed breadcrumb items",
-                  onClick: () => setExpanded(true),
-                  children: "..."
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: getBreadcrumbSeparatorClasses(), "aria-hidden": "true", children: getSeparatorContent(separator) })
-            ] }, "__tiger-breadcrumb-ellipsis")
-          );
-        }
-        return;
-      }
-      result.push(item);
-    });
-    return result;
-  }, [children, expanded, maxItems, separator]);
-  return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: [
-    /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap gap-2", children: renderedItems }),
-    hasExtra && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: extra })
-  ] }) });
-};
-
-export {
-  useBreadcrumbContext,
-  BreadcrumbItem,
-  Breadcrumb
-};