@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-7QM2ZC52.mjs

@@ -0,0 +1,256 @@
+import {
+  composeEventHandlers
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderBodyPortal,
+  useClickOutside,
+  useEscapeKey
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/FloatButton.tsx
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef
+} from "react";
+import {
+  classNames,
+  floatButtonGroupExpandClasses,
+  floatButtonIconSizeClasses,
+  floatButtonPlusIconPath,
+  getFloatButtonClasses,
+  getFloatButtonGroupClasses,
+  getFloatButtonLabels,
+  getFloatButtonOffsetStyle,
+  mergeTigerLocale,
+  resolveFloatButtonAriaLabel,
+  resolveFloatButtonShape,
+  shouldMergeOverlayTriggerChild
+} 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 })
+  }
+);
+function nodeHasVisibleText(node) {
+  if (node == null || typeof node === "boolean") return false;
+  if (typeof node === "string" || typeof node === "number") return String(node).trim().length > 0;
+  if (Array.isArray(node)) return node.some(nodeHasVisibleText);
+  if (!isValidElement(node)) return false;
+  const props = node.props;
+  if (node.type === "svg" || props["aria-hidden"] === true || props["aria-hidden"] === "true") {
+    return false;
+  }
+  return nodeHasVisibleText(props.children);
+}
+var FloatButton = forwardRef(function FloatButton2({
+  shape,
+  size = "md",
+  type = "primary",
+  tooltip,
+  disabled = false,
+  ariaLabel,
+  className,
+  floating = false,
+  placement = "bottom-right",
+  offset,
+  style,
+  children,
+  onClick,
+  locale,
+  ...props
+}, ref) {
+  const group = useContext(FloatButtonGroupContext);
+  const config = useTigerConfig();
+  const resolvedShape = resolveFloatButtonShape(shape, group?.shape);
+  const labels = getFloatButtonLabels(mergeTigerLocale(config.locale, locale));
+  const classes = useMemo(
+    () => getFloatButtonClasses({
+      shape: resolvedShape,
+      size,
+      type,
+      disabled,
+      floating,
+      inGroup: Boolean(group?.inGroup),
+      placement,
+      className
+    }),
+    [resolvedShape, size, type, disabled, floating, group?.inGroup, placement, className]
+  );
+  const buttonStyle = useMemo(
+    () => ({
+      ...getFloatButtonOffsetStyle(placement, offset, floating && !group?.inGroup),
+      ...style
+    }),
+    [floating, group?.inGroup, placement, offset, style]
+  );
+  const resolvedAriaLabel = resolveFloatButtonAriaLabel({
+    ariaLabel,
+    tooltip,
+    hasVisibleText: nodeHasVisibleText(children),
+    localeLabel: labels.ariaLabel
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      ref,
+      className: classes,
+      type: "button",
+      disabled,
+      style: buttonStyle,
+      "aria-label": resolvedAriaLabel,
+      title: tooltip,
+      onClick: disabled ? void 0 : onClick,
+      children: children ?? /* @__PURE__ */ jsx(DefaultPlusIcon, { size })
+    }
+  );
+});
+var FloatButtonGroup = forwardRef(
+  function FloatButtonGroup2({
+    shape: groupShape,
+    trigger = "click",
+    open: controlledOpen,
+    defaultOpen = false,
+    closeOnAction = true,
+    triggerNode,
+    children,
+    className,
+    onOpenChange,
+    placement = "bottom-right",
+    offset,
+    portal = true,
+    style,
+    ...props
+  }, ref) {
+    const groupContextValue = useMemo(() => ({ shape: groupShape, inGroup: true }), [groupShape]);
+    const [isOpen, setOpen] = useControlledState({
+      value: controlledOpen,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    });
+    const instanceId = useId();
+    const panelId = `tiger-float-group-${instanceId}`;
+    const groupRef = useRef(null);
+    const setGroupRef = useCallback(
+      (node) => {
+        groupRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const toggle = useCallback(() => {
+      setOpen((current) => !current);
+    }, [setOpen]);
+    const close = useCallback(() => {
+      setOpen(false);
+    }, [setOpen]);
+    const handleMouseEnter = useCallback(() => {
+      setOpen(true);
+    }, [setOpen]);
+    const handleMouseLeave = useCallback(() => {
+      setOpen(false);
+    }, [setOpen]);
+    useClickOutside({
+      enabled: isOpen,
+      refs: [groupRef],
+      onOutsideClick: close,
+      defer: true
+    });
+    useEscapeKey({ enabled: isOpen, onEscape: close, layerRef: groupRef });
+    const groupClasses = useMemo(
+      () => classNames(getFloatButtonGroupClasses({ placement, portal }), className),
+      [placement, portal, className]
+    );
+    const groupStyle = useMemo(
+      () => ({ ...getFloatButtonOffsetStyle(placement, offset, true), ...style }),
+      [placement, offset, style]
+    );
+    const triggerAria = {
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? panelId : void 0,
+      "data-state": isOpen ? "open" : "closed"
+    };
+    const handleTriggerClick = (event) => {
+      event.stopPropagation();
+      if (trigger === "hover") {
+        setOpen(true);
+        return;
+      }
+      toggle();
+    };
+    let triggerEl;
+    if (isValidElement(triggerNode) && shouldMergeOverlayTriggerChild(true, triggerNode.type)) {
+      const child = triggerNode;
+      triggerEl = cloneElement(child, {
+        ...triggerAria,
+        onClick: composeEventHandlers(child.props.onClick, handleTriggerClick)
+      });
+    } else if (triggerNode) {
+      triggerEl = /* @__PURE__ */ jsx("button", { type: "button", ...triggerAria, onClick: handleTriggerClick, children: triggerNode });
+    } else {
+      triggerEl = /* @__PURE__ */ jsx(FloatButton, { ...triggerAria, onClick: handleTriggerClick });
+    }
+    const handleActionClick = (event) => {
+      if (!closeOnAction) return;
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (target.closest('button, a, [role="button"]')) close();
+    };
+    const content = /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, { value: groupContextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: setGroupRef,
+        className: groupClasses,
+        style: groupStyle,
+        onMouseEnter: trigger === "hover" ? composeEventHandlers(props.onMouseEnter, handleMouseEnter) : props.onMouseEnter,
+        onMouseLeave: trigger === "hover" ? composeEventHandlers(props.onMouseLeave, handleMouseLeave) : props.onMouseLeave,
+        children: [
+          triggerEl,
+          isOpen ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              role: "group",
+              className: floatButtonGroupExpandClasses,
+              onClick: handleActionClick,
+              children
+            }
+          ) : null
+        ]
+      }
+    ) });
+    return portal ? renderBodyPortal(content) : content;
+  }
+);
+var FloatButton_default = FloatButton;
+
+export {
+  FloatButton,
+  FloatButtonGroup,
+  FloatButton_default
+};

package/dist/chunk-7VPMOGN3.mjs

@@ -0,0 +1,205 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Breadcrumb.tsx
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  forwardRef
+} from "react";
+import {
+  classNames,
+  breadcrumbContainerClasses,
+  breadcrumbEllipsisClasses,
+  breadcrumbExtraClasses,
+  breadcrumbListClasses,
+  getBreadcrumbItemClasses,
+  getBreadcrumbLinkClasses,
+  getBreadcrumbSeparatorClasses,
+  getBreadcrumbSlots,
+  getSeparatorKind,
+  getSeparatorContent,
+  resolveBreadcrumbItemCurrent,
+  mergeTigerLocale,
+  getBreadcrumbLabels,
+  chevronLeftSolidIcon20PathD,
+  icon20ViewBox
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BreadcrumbContext = createContext(null);
+function useBreadcrumbContext() {
+  return useContext(BreadcrumbContext);
+}
+function SeparatorMark({ separator }) {
+  const kind = getSeparatorKind(separator);
+  const classes = getBreadcrumbSeparatorClasses();
+  if (kind === "arrow" || kind === "chevron") {
+    return /* @__PURE__ */ jsx("span", { className: classes, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: `h-3.5 w-3.5 ${kind === "arrow" ? "-scale-x-100 rtl:scale-x-100" : "rtl:-scale-x-100"}`,
+        viewBox: icon20ViewBox,
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronLeftSolidIcon20PathD, clipRule: "evenodd" })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: classes, "aria-hidden": "true", children: getSeparatorContent(separator) });
+}
+var BreadcrumbItem = forwardRef(
+  ({
+    href,
+    target,
+    current,
+    separator: _separator,
+    className,
+    style,
+    onClick,
+    children,
+    icon,
+    isLast = false,
+    ...props
+  }, ref) => {
+    const isCurrent = resolveBreadcrumbItemCurrent(current, isLast);
+    const itemClasses = getBreadcrumbItemClasses(className);
+    const linkClasses = getBreadcrumbLinkClasses(isCurrent);
+    const handleClick = useCallback(
+      (event) => {
+        if (isCurrent) return;
+        onClick?.(event);
+      },
+      [isCurrent, onClick]
+    );
+    const computedRel = target === "_blank" ? "noopener noreferrer" : void 0;
+    const contentElements = icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "inline-flex", children: icon }),
+      children
+    ] }) : children;
+    let control;
+    if (isCurrent) {
+      control = /* @__PURE__ */ jsx("span", { className: linkClasses, "aria-current": "page", children: contentElements });
+    } else if (href) {
+      control = /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: linkClasses,
+          href,
+          target,
+          rel: computedRel,
+          onClick: handleClick,
+          children: contentElements
+        }
+      );
+    } else if (onClick) {
+      control = /* @__PURE__ */ jsx("button", { type: "button", className: linkClasses, onClick: handleClick, children: contentElements });
+    } else {
+      control = /* @__PURE__ */ jsx("span", { className: getBreadcrumbLinkClasses(true), children: contentElements });
+    }
+    return /* @__PURE__ */ jsx("li", { ref, className: itemClasses, style, ...props, children: control });
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var Breadcrumb = forwardRef(
+  ({
+    separator = "/",
+    maxItems,
+    className,
+    style,
+    extra,
+    children,
+    locale,
+    labels: labelsOverride,
+    ...props
+  }, ref) => {
+    const { "aria-label": ariaLabelProp, ...rest } = props;
+    const config = useTigerConfig();
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getBreadcrumbLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    const items = useMemo(() => React.Children.toArray(children), [children]);
+    const itemSignature = items.map((item) => React.isValidElement(item) ? String(item.key ?? "") : "").join("|");
+    const [expanded, setExpanded] = useState(false);
+    useEffect(() => {
+      setExpanded(false);
+    }, [itemSignature, maxItems]);
+    const hasExtra = Boolean(extra);
+    const containerClasses = classNames(breadcrumbContainerClasses, hasExtra && "w-full", className);
+    const contextValue = useMemo(() => ({ separator }), [separator]);
+    const slots = getBreadcrumbSlots(items.length, maxItems, expanded);
+    const rendered = slots.map((slot, index) => {
+      const nodes = [];
+      if (slot.type === "ellipsis") {
+        nodes.push(
+          /* @__PURE__ */ jsx("li", { className: getBreadcrumbItemClasses(), children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: breadcrumbEllipsisClasses,
+              "aria-label": labels.expandAriaLabel,
+              "aria-expanded": "false",
+              onClick: () => setExpanded(true),
+              children: "..."
+            }
+          ) }, "__tiger-breadcrumb-ellipsis")
+        );
+      } else {
+        const child = items[slot.index];
+        const isLast = slot.index === items.length - 1;
+        nodes.push(
+          React.isValidElement(child) ? React.cloneElement(child, {
+            key: child.key ?? slot.index,
+            isLast
+          }) : child
+        );
+      }
+      const isLastSlot = index === slots.length - 1;
+      if (!isLastSlot) {
+        nodes.push(
+          /* @__PURE__ */ jsx("li", { className: getBreadcrumbItemClasses(), "aria-hidden": "true", children: /* @__PURE__ */ jsx(SeparatorMark, { separator }) }, `sep-${index}`)
+        );
+      }
+      return nodes;
+    });
+    const nav = /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        className: hasExtra ? void 0 : containerClasses,
+        "aria-label": ariaLabelProp ?? labels.ariaLabel,
+        style: hasExtra ? void 0 : style,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "ol",
+          {
+            className: hasExtra ? breadcrumbListClasses : classNames(breadcrumbListClasses, "w-full"),
+            children: rendered
+          }
+        )
+      }
+    );
+    if (!hasExtra) {
+      return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: nav });
+    }
+    return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: containerClasses, style, children: [
+      nav,
+      /* @__PURE__ */ jsx("div", { className: breadcrumbExtraClasses, children: extra })
+    ] }) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+export {
+  useBreadcrumbContext,
+  BreadcrumbItem,
+  Breadcrumb
+};