@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-L2NMDYYQ.mjs

@@ -0,0 +1,571 @@
+// src/components/Menu.tsx
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef
+} from "react";
+import {
+  classNames,
+  getMenuClasses,
+  getMenuItemClasses,
+  getMenuItemIndent,
+  getSubMenuTitleClasses,
+  getSubMenuExpandIconClasses,
+  getSubmenuPopupZIndex,
+  filterMenuItems,
+  isKeySelected,
+  isKeyOpen,
+  menuItemIconClasses,
+  menuItemGroupTitleClasses,
+  menuSearchFieldClasses,
+  menuSearchEmptyClasses,
+  menuSearchInputClasses,
+  submenuContentHorizontalClasses,
+  submenuContentHorizontalNestedClasses,
+  submenuContentPopupClasses,
+  submenuContentVerticalClasses,
+  submenuContentInlineClasses,
+  submenuHeightTransitionClasses,
+  getInitialSubmenuHeightTransitionStyle,
+  createSubmenuHeightTransitionController,
+  moveFocusInMenu,
+  focusMenuEdge,
+  focusFirstChildItem,
+  replaceKeys,
+  toggleKey,
+  initRovingTabIndex
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MenuContext = createContext(null);
+function useMenuContext() {
+  return useContext(MenuContext);
+}
+var Menu = ({
+  items,
+  mode = "vertical",
+  theme = "light",
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
+  openKeys: controlledOpenKeys,
+  defaultOpenKeys = [],
+  collapsed = false,
+  multiple = true,
+  inlineIndent = 24,
+  className,
+  style,
+  onSelect,
+  onOpenChange,
+  onSearch,
+  searchable = false,
+  searchValue: controlledSearchValue,
+  defaultSearchValue = "",
+  searchPlaceholder = "Search menu",
+  emptyText = "No menu items found",
+  children
+}) => {
+  const menuRef = useRef(null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys);
+  const [internalOpenKeys, setInternalOpenKeys] = useState(defaultOpenKeys);
+  const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
+  const selectedKeys = controlledSelectedKeys !== void 0 ? controlledSelectedKeys : internalSelectedKeys;
+  const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
+  const searchValue = controlledSearchValue !== void 0 ? controlledSearchValue : internalSearchValue;
+  const handleSelect = useCallback(
+    (key) => {
+      const newSelectedKeys = replaceKeys(key, selectedKeys);
+      if (controlledSelectedKeys === void 0) {
+        setInternalSelectedKeys(newSelectedKeys);
+      }
+      onSelect?.(key, { selectedKeys: newSelectedKeys });
+    },
+    [controlledSelectedKeys, selectedKeys, onSelect]
+  );
+  const handleOpenChange = useCallback(
+    (key) => {
+      const toggled = toggleKey(key, openKeys);
+      const newOpenKeys = multiple ? toggled : toggled.includes(key) ? [key] : [];
+      if (controlledOpenKeys === void 0) {
+        setInternalOpenKeys(newOpenKeys);
+      }
+      onOpenChange?.(key, { openKeys: newOpenKeys });
+    },
+    [openKeys, multiple, controlledOpenKeys, onOpenChange]
+  );
+  const handleSearchInput = useCallback(
+    (event) => {
+      const value = event.target.value;
+      if (controlledSearchValue === void 0) {
+        setInternalSearchValue(value);
+      }
+      onSearch?.(value);
+    },
+    [controlledSearchValue, onSearch]
+  );
+  const menuClasses = useMemo(() => {
+    return classNames(getMenuClasses(mode, theme, collapsed), className);
+  }, [mode, theme, collapsed, className]);
+  const contextValue = useMemo(
+    () => ({
+      mode,
+      theme,
+      collapsed,
+      inlineIndent,
+      selectedKeys,
+      openKeys,
+      handleSelect,
+      handleOpenChange
+    }),
+    [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
+  );
+  const filteredItems = useMemo(
+    () => filterMenuItems(items ?? [], searchValue),
+    [items, searchValue]
+  );
+  function renderDataItem(item) {
+    if (item.children && item.children.length > 0) {
+      return /* @__PURE__ */ jsx(
+        SubMenu,
+        {
+          itemKey: item.key,
+          title: item.label,
+          icon: item.icon,
+          disabled: item.disabled,
+          children: item.children.map(renderDataItem)
+        },
+        item.key
+      );
+    }
+    return /* @__PURE__ */ jsx(MenuItem, { itemKey: item.key, icon: item.icon, disabled: item.disabled, children: item.label }, item.key);
+  }
+  const dataChildren = filteredItems.map(renderDataItem);
+  const hasSlotChildren = React.Children.count(children) > 0;
+  const emptyChild = items && items.length > 0 && dataChildren.length === 0 && !hasSlotChildren ? /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx("div", { className: menuSearchEmptyClasses, children: emptyText }) }) : null;
+  useEffect(() => {
+    if (menuRef.current) initRovingTabIndex(menuRef.current);
+  }, [mode, collapsed, selectedKeys, openKeys, filteredItems]);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      ref: menuRef,
+      className: menuClasses,
+      style,
+      role: "menu",
+      "data-tiger-menu-root": "true",
+      "data-tiger-menu-mode": mode,
+      children: [
+        searchable && /* @__PURE__ */ jsx("li", { role: "none", className: menuSearchFieldClasses, children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "search",
+            value: searchValue,
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            className: menuSearchInputClasses,
+            onChange: handleSearchInput
+          }
+        ) }),
+        dataChildren,
+        children,
+        emptyChild
+      ]
+    }
+  ) });
+};
+var MenuItem = ({
+  itemKey,
+  disabled = false,
+  icon,
+  className,
+  children,
+  level = 0,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = useMenuContext();
+  if (!menuContext) {
+    console.warn("MenuItem must be used within Menu component");
+  }
+  const isSelected = !!menuContext && isKeySelected(itemKey, menuContext.selectedKeys);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const itemClasses = classNames(
+    menuContext ? getMenuItemClasses(isSelected, disabled, menuContext.theme, effectiveCollapsed) : "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200",
+    className
+  );
+  const indentStyle = menuContext && menuContext.mode === "inline" && level > 0 ? getMenuItemIndent(level, menuContext.inlineIndent) : {};
+  const handleClick = useCallback(() => {
+    if (!disabled && menuContext) {
+      menuContext.handleSelect(itemKey);
+    }
+  }, [disabled, menuContext, itemKey]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!menuContext) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusMenuEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusMenuEdge(current, "end");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    },
+    [menuContext, handleClick]
+  );
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, children: icon });
+  };
+  const renderLabel = () => {
+    if (!effectiveCollapsed) return /* @__PURE__ */ jsx("span", { className: "flex-1", children });
+    if (!icon) {
+      const text = String(children || "");
+      return /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", children: text.charAt(0).toUpperCase() });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      style: indentStyle,
+      role: "menuitem",
+      "data-tiger-menuitem": "true",
+      "data-tiger-selected": isSelected ? "true" : "false",
+      "aria-current": isSelected ? "page" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      disabled,
+      tabIndex: -1,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        renderIcon(),
+        renderLabel()
+      ]
+    }
+  ) });
+};
+function isComponentNamed(elementType, name) {
+  if (typeof elementType !== "function" && typeof elementType !== "object") return false;
+  const maybeFn = elementType;
+  return maybeFn.displayName === name || maybeFn.name === name;
+}
+var MenuItemGroup = ({
+  title,
+  className,
+  children,
+  level = 0
+}) => {
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type === MenuItem || isComponentNamed(child.type, "SubMenu")) {
+      return React.cloneElement(child, {
+        level
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxs("li", { className: "list-none", children: [
+    title && /* @__PURE__ */ jsx("div", { className: menuItemGroupTitleClasses, children: title }),
+    /* @__PURE__ */ jsx("ul", { role: "group", className, children: enhancedChildren })
+  ] });
+};
+var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: getSubMenuExpandIconClasses(expanded),
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
+  }
+);
+var SubMenu = ({
+  itemKey,
+  title = "",
+  icon,
+  disabled = false,
+  className,
+  level = 0,
+  children,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = useMenuContext();
+  if (!menuContext) {
+    console.warn("SubMenu must be used within Menu component");
+  }
+  const [isHovered, setIsHovered] = useState(false);
+  const [isOpenByKeyboard, setIsOpenByKeyboard] = useState(false);
+  const submenuContentRef = useRef(null);
+  const heightTransitionRef = useRef(null);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const isPopup = !!menuContext && (menuContext.mode === "horizontal" || menuContext.mode === "vertical" && effectiveCollapsed);
+  const isOpen = !!menuContext && isKeyOpen(itemKey, menuContext.openKeys);
+  const isExpanded = isPopup ? isHovered || isOpenByKeyboard : isOpen;
+  const isInlineOrVertical = menuContext?.mode !== "horizontal" && !isPopup;
+  const [hasRenderedInline, setHasRenderedInline] = useState(
+    () => isInlineOrVertical ? isExpanded : false
+  );
+  useEffect(() => {
+    if (!isInlineOrVertical || !isExpanded || hasRenderedInline) return;
+    setHasRenderedInline(true);
+  }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const disposeHeightTransition = useCallback(() => {
+    heightTransitionRef.current?.dispose();
+    heightTransitionRef.current = null;
+  }, []);
+  useEffect(() => disposeHeightTransition, [disposeHeightTransition]);
+  useLayoutEffect(() => {
+    if (!isInlineOrVertical || !hasRenderedInline || !submenuContentRef.current) {
+      disposeHeightTransition();
+      return;
+    }
+    if (!heightTransitionRef.current) {
+      heightTransitionRef.current = createSubmenuHeightTransitionController(
+        submenuContentRef.current,
+        { expanded: isExpanded }
+      );
+      return;
+    }
+    heightTransitionRef.current.update(isExpanded);
+  }, [disposeHeightTransition, hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const titleClasses = useMemo(() => {
+    if (!menuContext) return "";
+    return classNames(getSubMenuTitleClasses(menuContext.theme, disabled), className);
+  }, [menuContext, disabled, className]);
+  const contentClasses = useMemo(() => {
+    if (!menuContext) return "";
+    if (menuContext.mode === "horizontal") {
+      return level === 0 ? submenuContentHorizontalClasses : submenuContentHorizontalNestedClasses;
+    }
+    if (isPopup) return submenuContentPopupClasses;
+    if (menuContext.mode === "inline") return submenuContentInlineClasses;
+    return submenuContentVerticalClasses;
+  }, [menuContext, isPopup, level]);
+  const handleTitleClick = useCallback(() => {
+    if (!menuContext || disabled) return;
+    if (menuContext.mode === "horizontal") return;
+    if (isPopup) {
+      setIsOpenByKeyboard((prev) => !prev);
+      setIsHovered(true);
+      return;
+    }
+    setHasRenderedInline(true);
+    menuContext.handleOpenChange(itemKey);
+  }, [disabled, menuContext, itemKey, isPopup]);
+  const handleMouseEnter = useCallback(() => {
+    if (menuContext?.mode === "horizontal" || isPopup) setIsHovered(true);
+  }, [menuContext, isPopup]);
+  const handleMouseLeave = useCallback(() => {
+    if (menuContext?.mode === "horizontal" || isPopup) {
+      setIsHovered(false);
+      setIsOpenByKeyboard(false);
+    }
+  }, [menuContext, isPopup]);
+  const openInline = useCallback(
+    (titleEl) => {
+      if (!menuContext) return;
+      setHasRenderedInline(true);
+      menuContext.handleOpenChange(itemKey);
+      setTimeout(() => focusFirstChildItem(titleEl), 0);
+    },
+    [menuContext, itemKey]
+  );
+  const handleTitleKeyDown = useCallback(
+    (event) => {
+      if (!menuContext || disabled) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusMenuEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusMenuEdge(current, "end");
+        return;
+      }
+      if (event.key === "Escape" || event.key === "ArrowLeft") {
+        if (menuContext.mode === "horizontal" || isPopup) {
+          event.preventDefault();
+          setIsOpenByKeyboard(false);
+          setIsHovered(false);
+          return;
+        }
+        if (isOpen) {
+          event.preventDefault();
+          menuContext.handleOpenChange(itemKey);
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (menuContext.mode === "horizontal" || isPopup) {
+          setIsOpenByKeyboard(true);
+          return;
+        }
+        openInline(current);
+        return;
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        if (menuContext.mode === "horizontal" || isPopup) {
+          event.preventDefault();
+          setIsOpenByKeyboard(true);
+          return;
+        }
+        if (!isOpen) {
+          event.preventDefault();
+          openInline(current);
+        }
+      }
+    },
+    [menuContext, disabled, isOpen, isPopup, itemKey, openInline]
+  );
+  const indentStyle = !menuContext || menuContext.mode === "horizontal" || level === 0 ? {} : getMenuItemIndent(level, menuContext.inlineIndent);
+  if (!menuContext) return null;
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, children: icon });
+  };
+  const renderTitle = () => {
+    if (!effectiveCollapsed) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderIcon(),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: title }),
+        menuContext.mode !== "horizontal" && !isPopup && /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded })
+      ] });
+    } else if (!icon) {
+      return /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", children: title.charAt(0).toUpperCase() });
+    } else {
+      return renderIcon();
+    }
+  };
+  const renderContent = () => {
+    const nextLevel = level + 1;
+    const enhancedChildren = React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) return child;
+      if (child.type === MenuItem || child.type === SubMenu || child.type === MenuItemGroup) {
+        return React.cloneElement(
+          child,
+          {
+            level: nextLevel
+          }
+        );
+      }
+      return child;
+    });
+    const popupZIndex = isPopup ? getSubmenuPopupZIndex(level) : {};
+    if (isPopup) {
+      return /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: contentClasses,
+          style: { display: isExpanded ? "block" : "none", ...popupZIndex },
+          role: "menu",
+          "aria-hidden": isExpanded ? void 0 : "true",
+          children: enhancedChildren
+        }
+      );
+    }
+    if (!hasRenderedInline) return null;
+    const isHidden = !isExpanded;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: submenuContentRef,
+        className: submenuHeightTransitionClasses,
+        style: heightTransitionRef.current ? void 0 : getInitialSubmenuHeightTransitionStyle(isExpanded),
+        "aria-hidden": isHidden ? "true" : void 0,
+        "data-tiger-menu-hidden": isHidden ? "true" : void 0,
+        "data-tiger-submenu-motion": "height",
+        children: /* @__PURE__ */ jsx("ul", { className: contentClasses, role: "menu", children: enhancedChildren })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: isPopup ? "relative" : "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      role: "none",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: titleClasses,
+            style: indentStyle,
+            onClick: handleTitleClick,
+            onKeyDown: handleTitleKeyDown,
+            role: "menuitem",
+            "data-tiger-menuitem": "true",
+            "aria-expanded": isExpanded ? "true" : "false",
+            "aria-haspopup": "true",
+            "aria-disabled": disabled ? "true" : void 0,
+            disabled,
+            tabIndex: -1,
+            children: renderTitle()
+          }
+        ),
+        renderContent()
+      ]
+    }
+  );
+};
+
+export {
+  useMenuContext,
+  Menu,
+  MenuItem,
+  MenuItemGroup,
+  SubMenu
+};

package/dist/chunk-L6CL63GI.js

@@ -0,0 +1,95 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Breadcrumb.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var BreadcrumbContext = _react.createContext.call(void 0, null);
+function useBreadcrumbContext() {
+  return _react.useContext.call(void 0, BreadcrumbContext);
+}
+var BreadcrumbItem = ({
+  href,
+  target,
+  current = false,
+  separator: customSeparator,
+  className,
+  style,
+  onClick,
+  children,
+  icon,
+  ...props
+}) => {
+  const breadcrumbContext = useBreadcrumbContext();
+  const itemClasses = _react.useMemo.call(void 0, () => _tigercatcore.getBreadcrumbItemClasses.call(void 0, className), [className]);
+  const linkClasses = _react.useMemo.call(void 0, () => _tigercatcore.getBreadcrumbLinkClasses.call(void 0, current), [current]);
+  const separatorClasses = _react.useMemo.call(void 0, () => _tigercatcore.getBreadcrumbSeparatorClasses.call(void 0, ), []);
+  const separatorContent = _react.useMemo.call(void 0, () => {
+    const separator = customSeparator !== void 0 ? customSeparator : _optionalChain([breadcrumbContext, 'optionalAccess', _ => _.separator]) || "/";
+    return _tigercatcore.getSeparatorContent.call(void 0, separator);
+  }, [customSeparator, breadcrumbContext]);
+  const handleClick = _react.useCallback.call(void 0, 
+    (event) => {
+      if (!current) {
+        _optionalChain([onClick, 'optionalCall', _2 => _2(event)]);
+      }
+    },
+    [current, onClick]
+  );
+  const computedRel = _react.useMemo.call(void 0, () => {
+    if (target === "_blank") {
+      return "noopener noreferrer";
+    }
+    return void 0;
+  }, [target]);
+  const contentElements = icon ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex", children: icon }),
+    children
+  ] }) : children;
+  const linkElement = href && !current ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "a",
+    {
+      className: linkClasses,
+      href,
+      target,
+      rel: computedRel,
+      onClick: handleClick,
+      children: contentElements
+    }
+  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: linkClasses, "aria-current": current ? "page" : void 0, children: contentElements });
+  const separatorElement = !current ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: separatorClasses, "aria-hidden": "true", children: separatorContent }) : null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: itemClasses, style, ...props, children: [
+    linkElement,
+    separatorElement
+  ] });
+};
+var Breadcrumb = ({
+  separator = "/",
+  className,
+  style,
+  extra,
+  children,
+  ...props
+}) => {
+  const hasExtra = Boolean(extra);
+  const containerClasses = _react2.default.useMemo(
+    () => _tigercatcore.classNames.call(void 0, _tigercatcore.breadcrumbContainerClasses, hasExtra && "w-full", className),
+    [className, hasExtra]
+  );
+  const contextValue = _react2.default.useMemo(() => ({ separator }), [separator]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ol", { className: "flex items-center flex-wrap gap-2", children }),
+    hasExtra && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ml-auto flex items-center", children: extra })
+  ] }) });
+};
+
+
+
+
+
+exports.useBreadcrumbContext = useBreadcrumbContext; exports.BreadcrumbItem = BreadcrumbItem; exports.Breadcrumb = Breadcrumb;