@expcat/tigercat-react 0.2.0 → 0.2.27

package/dist/chunk-YIF5VX7K.mjs

@@ -0,0 +1,158 @@
+import { createContext, useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { scrollToAnchor, classNames, getAnchorWrapperClasses, getAnchorInkContainerClasses, getAnchorInkActiveClasses, getAnchorLinkListClasses, findActiveAnchor } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Anchor.tsx
+var AnchorContext = createContext(null);
+function useAnchorContext() {
+  return useContext(AnchorContext);
+}
+var Anchor = ({
+  affix = true,
+  bounds = 5,
+  offsetTop = 0,
+  showInkInFixed = false,
+  targetOffset,
+  getCurrentAnchor,
+  getContainer = () => window,
+  direction = "vertical",
+  className,
+  style,
+  onClick,
+  onChange,
+  children
+}) => {
+  const [activeLink, setActiveLink] = useState("");
+  const [links, setLinks] = useState([]);
+  const anchorRef = useRef(null);
+  const inkRef = useRef(null);
+  const isScrollingRef = useRef(false);
+  const animationFrameRef = useRef(null);
+  const getContainerRef = useRef(getContainer);
+  getContainerRef.current = getContainer;
+  const scrollOffset = useMemo(() => targetOffset ?? offsetTop, [targetOffset, offsetTop]);
+  const registerLink = useCallback((href) => {
+    setLinks((prevLinks) => {
+      if (href && !prevLinks.includes(href)) {
+        return [...prevLinks, href];
+      }
+      return prevLinks;
+    });
+  }, []);
+  const unregisterLink = useCallback((href) => {
+    setLinks((prevLinks) => prevLinks.filter((l) => l !== href));
+  }, []);
+  const scrollTo = useCallback(
+    (href) => {
+      const container = getContainerRef.current();
+      scrollToAnchor(href, container, scrollOffset);
+    },
+    [scrollOffset]
+  );
+  const handleLinkClick = useCallback(
+    (href, event) => {
+      onClick?.(event, href);
+      isScrollingRef.current = true;
+      setActiveLink(href);
+      scrollTo(href);
+      setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 500);
+    },
+    [onClick, scrollTo]
+  );
+  const scrollHandlerRef = useRef(null);
+  const boundContainerRef = useRef(null);
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      const container = getContainerRef.current();
+      boundContainerRef.current = container;
+      const handleScroll = () => {
+        if (isScrollingRef.current) return;
+        if (animationFrameRef.current !== null) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(() => {
+          const currentContainer = getContainerRef.current();
+          const newActiveLink = findActiveAnchor(links, currentContainer, bounds, scrollOffset);
+          const finalActiveLink = getCurrentAnchor ? getCurrentAnchor(newActiveLink) : newActiveLink;
+          setActiveLink((prevActiveLink) => {
+            if (finalActiveLink !== prevActiveLink) {
+              onChange?.(finalActiveLink);
+              return finalActiveLink;
+            }
+            return prevActiveLink;
+          });
+        });
+      };
+      scrollHandlerRef.current = handleScroll;
+      container.addEventListener("scroll", handleScroll, { passive: true });
+      handleScroll();
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      if (boundContainerRef.current && scrollHandlerRef.current) {
+        boundContainerRef.current.removeEventListener("scroll", scrollHandlerRef.current);
+      }
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [links, bounds, scrollOffset, getCurrentAnchor, onChange]);
+  useEffect(() => {
+    if (!inkRef.current || !anchorRef.current || !activeLink) {
+      return;
+    }
+    const activeLinkElement = anchorRef.current.querySelector(
+      `[data-anchor-href="${activeLink}"]`
+    );
+    if (!activeLinkElement) {
+      return;
+    }
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const linkRect = activeLinkElement.getBoundingClientRect();
+    if (direction === "vertical") {
+      inkRef.current.style.top = `${linkRect.top - anchorRect.top}px`;
+      inkRef.current.style.height = `${linkRect.height}px`;
+    } else {
+      inkRef.current.style.left = `${linkRect.left - anchorRect.left}px`;
+      inkRef.current.style.width = `${linkRect.width}px`;
+    }
+  }, [activeLink, direction]);
+  const wrapperClasses = useMemo(
+    () => classNames(getAnchorWrapperClasses(affix, className)),
+    [affix, className]
+  );
+  const inkContainerClasses = useMemo(() => getAnchorInkContainerClasses(direction), [direction]);
+  const inkActiveClasses = useMemo(() => getAnchorInkActiveClasses(direction), [direction]);
+  const linkListClasses = useMemo(() => getAnchorLinkListClasses(direction), [direction]);
+  const showInk = useMemo(() => {
+    if (!affix) return true;
+    return showInkInFixed;
+  }, [affix, showInkInFixed]);
+  const wrapperStyle = useMemo(() => {
+    const baseStyle = {};
+    if (affix && offsetTop > 0) {
+      baseStyle.top = `${offsetTop}px`;
+    }
+    return { ...baseStyle, ...style };
+  }, [affix, offsetTop, style]);
+  const contextValue = useMemo(
+    () => ({
+      activeLink,
+      direction,
+      registerLink,
+      unregisterLink,
+      handleLinkClick,
+      scrollTo
+    }),
+    [activeLink, direction, registerLink, unregisterLink, handleLinkClick, scrollTo]
+  );
+  return /* @__PURE__ */ jsx(AnchorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: anchorRef, className: wrapperClasses, style: wrapperStyle, children: [
+    showInk && /* @__PURE__ */ jsx("div", { className: inkContainerClasses, children: /* @__PURE__ */ jsx("div", { ref: inkRef, className: inkActiveClasses }) }),
+    /* @__PURE__ */ jsx("div", { className: linkListClasses, children })
+  ] }) });
+};
+var Anchor_default = Anchor;
+
+export { Anchor, Anchor_default, useAnchorContext };

package/dist/chunk-Z5DDULTA.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var chunkZPWDDAFE_js = require('./chunk-ZPWDDAFE.js');
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var AnchorLink = ({
+  href,
+  title,
+  target,
+  className,
+  children,
+  ...props
+}) => {
+  const anchorContext = chunkZPWDDAFE_js.useAnchorContext();
+  React.useEffect(() => {
+    anchorContext?.registerLink(href);
+    return () => {
+      anchorContext?.unregisterLink(href);
+    };
+  }, [href, anchorContext]);
+  const handleClick = (event) => {
+    event.preventDefault();
+    anchorContext?.handleLinkClick(href, event);
+  };
+  const linkClasses = React.useMemo(() => {
+    const isActive = anchorContext?.activeLink === href;
+    return tigercatCore.classNames(tigercatCore.getAnchorLinkClasses(isActive, className));
+  }, [anchorContext?.activeLink, href, className]);
+  const hasNestedLinks = React__default.default.Children.toArray(children).some(
+    (child) => React__default.default.isValidElement(child) && child.type === AnchorLink
+  );
+  if (hasNestedLinks) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "anchor-link-wrapper", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href,
+          target,
+          className: linkClasses,
+          "data-anchor-href": href,
+          onClick: handleClick,
+          ...props,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 mt-1 space-y-1", children })
+    ] });
+  }
+  const content = children ?? title;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      target,
+      className: linkClasses,
+      "data-anchor-href": href,
+      onClick: handleClick,
+      ...props,
+      children: content
+    }
+  );
+};
+var AnchorLink_default = AnchorLink;
+
+exports.AnchorLink = AnchorLink;
+exports.AnchorLink_default = AnchorLink_default;

package/dist/chunk-Z6G4HABF.js

@@ -0,0 +1,272 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Carousel.tsx
+var Carousel = React.forwardRef(
+  ({
+    autoplay = false,
+    autoplaySpeed = 3e3,
+    dots = true,
+    dotPosition = "bottom",
+    effect = "scroll",
+    arrows = false,
+    infinite = true,
+    speed = 500,
+    initialSlide = 0,
+    pauseOnHover = true,
+    pauseOnFocus = true,
+    className,
+    style,
+    onChange,
+    onBeforeChange,
+    children
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = React.useState(initialSlide);
+    const [isPaused, setIsPaused] = React.useState(false);
+    const autoplayTimerRef = React.useRef(null);
+    const slides = React.useMemo(() => {
+      return React__default.default.Children.toArray(children).filter((child) => React__default.default.isValidElement(child));
+    }, [children]);
+    const slideCount = slides.length;
+    const containerClasses = React.useMemo(
+      () => tigercatCore.classNames(tigercatCore.getCarouselContainerClasses(className)),
+      [className]
+    );
+    const trackClasses = React.useMemo(() => {
+      if (effect === "fade") {
+        return tigercatCore.carouselTrackFadeClasses;
+      }
+      return tigercatCore.carouselTrackScrollClasses;
+    }, [effect]);
+    const trackStyle = React.useMemo(() => {
+      if (effect === "scroll") {
+        return {
+          transform: tigercatCore.getScrollTransform(currentIndex),
+          transitionDuration: `${speed}ms`
+        };
+      }
+      return {};
+    }, [effect, currentIndex, speed]);
+    const getSlideClasses = React.useCallback(
+      (index) => {
+        const isActive = index === currentIndex;
+        if (effect === "fade") {
+          const positionClass = index === 0 ? "relative" : "absolute inset-0";
+          return tigercatCore.classNames(
+            positionClass,
+            "w-full transition-opacity ease-in-out",
+            isActive ? "opacity-100 z-10" : "opacity-0 z-0"
+          );
+        }
+        return tigercatCore.carouselSlideBaseClasses;
+      },
+      [effect, currentIndex]
+    );
+    const getSlideStyle = React.useCallback(() => {
+      return {
+        transitionDuration: `${speed}ms`
+      };
+    }, [speed]);
+    const dotsClasses = React.useMemo(() => {
+      return tigercatCore.getCarouselDotsClasses(dotPosition);
+    }, [dotPosition]);
+    const goTo = React.useCallback(
+      (index) => {
+        const clampedIndex = tigercatCore.clampSlideIndex(index, slideCount);
+        if (clampedIndex === currentIndex) return;
+        onBeforeChange?.(currentIndex, clampedIndex);
+        const prevIndex = currentIndex;
+        setCurrentIndex(clampedIndex);
+        onChange?.(clampedIndex, prevIndex);
+      },
+      [currentIndex, slideCount, onBeforeChange, onChange]
+    );
+    const next = React.useCallback(() => {
+      const nextIdx = tigercatCore.getNextSlideIndex(currentIndex, slideCount, infinite);
+      if (nextIdx !== currentIndex) {
+        goTo(nextIdx);
+      }
+    }, [currentIndex, slideCount, infinite, goTo]);
+    const prev = React.useCallback(() => {
+      const prevIdx = tigercatCore.getPrevSlideIndex(currentIndex, slideCount, infinite);
+      if (prevIdx !== currentIndex) {
+        goTo(prevIdx);
+      }
+    }, [currentIndex, slideCount, infinite, goTo]);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        next,
+        prev,
+        goTo
+      }),
+      [next, prev, goTo]
+    );
+    React.useEffect(() => {
+      if (autoplay && !isPaused) {
+        if (autoplayTimerRef.current) {
+          clearInterval(autoplayTimerRef.current);
+        }
+        autoplayTimerRef.current = setInterval(() => {
+          setCurrentIndex((prevIndex) => {
+            const nextIdx = tigercatCore.getNextSlideIndex(prevIndex, slideCount, infinite);
+            if (nextIdx !== prevIndex) {
+              onBeforeChange?.(prevIndex, nextIdx);
+              onChange?.(nextIdx, prevIndex);
+            }
+            return nextIdx;
+          });
+        }, autoplaySpeed);
+      }
+      return () => {
+        if (autoplayTimerRef.current) {
+          clearInterval(autoplayTimerRef.current);
+          autoplayTimerRef.current = null;
+        }
+      };
+    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite, onChange, onBeforeChange]);
+    const handleMouseEnter = React.useCallback(() => {
+      if (pauseOnHover && autoplay) {
+        setIsPaused(true);
+      }
+    }, [pauseOnHover, autoplay]);
+    const handleMouseLeave = React.useCallback(() => {
+      if (pauseOnHover && autoplay) {
+        setIsPaused(false);
+      }
+    }, [pauseOnHover, autoplay]);
+    const handleFocus = React.useCallback(() => {
+      if (pauseOnFocus && autoplay) {
+        setIsPaused(true);
+      }
+    }, [pauseOnFocus, autoplay]);
+    const handleBlur = React.useCallback(() => {
+      if (pauseOnFocus && autoplay) {
+        setIsPaused(false);
+      }
+    }, [pauseOnFocus, autoplay]);
+    const isPrevArrowDisabled = React.useMemo(
+      () => tigercatCore.isPrevDisabled(currentIndex, slideCount, infinite),
+      [currentIndex, slideCount, infinite]
+    );
+    const isNextArrowDisabled = React.useMemo(
+      () => tigercatCore.isNextDisabled(currentIndex, slideCount, infinite),
+      [currentIndex, slideCount, infinite]
+    );
+    const renderArrows = () => {
+      if (!arrows) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: tigercatCore.getCarouselArrowClasses("prev", isPrevArrowDisabled),
+            onClick: prev,
+            disabled: isPrevArrowDisabled,
+            "aria-label": "Previous slide",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "w-6 h-6",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.carouselPrevArrowPath })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: tigercatCore.getCarouselArrowClasses("next", isNextArrowDisabled),
+            onClick: next,
+            disabled: isNextArrowDisabled,
+            "aria-label": "Next slide",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "w-6 h-6",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.carouselNextArrowPath })
+              }
+            )
+          }
+        )
+      ] });
+    };
+    const renderDots = () => {
+      if (!dots || slideCount <= 1) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: dotsClasses, role: "tablist", "aria-label": "Carousel navigation", children: slides.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: tigercatCore.getCarouselDotClasses(index === currentIndex),
+          onClick: () => goTo(index),
+          "aria-label": `Go to slide ${index + 1}`,
+          "aria-current": index === currentIndex ? "true" : "false"
+        },
+        index
+      )) });
+    };
+    const renderSlides = () => {
+      const slideElements = slides.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: getSlideClasses(index),
+          style: effect === "fade" ? getSlideStyle() : void 0,
+          role: "group",
+          "aria-roledescription": "slide",
+          "aria-label": `Slide ${index + 1} of ${slideCount}`,
+          "aria-hidden": index !== currentIndex,
+          children: slide
+        },
+        index
+      ));
+      if (effect === "fade") {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(trackClasses, "h-full"), children: slideElements });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: trackClasses, style: trackStyle, children: slideElements });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: containerClasses,
+        style,
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": "Image carousel",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          renderSlides(),
+          renderArrows(),
+          renderDots()
+        ]
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+exports.Carousel = Carousel;

package/dist/chunk-ZPWDDAFE.js

@@ -0,0 +1,162 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Anchor.tsx
+var AnchorContext = react.createContext(null);
+function useAnchorContext() {
+  return react.useContext(AnchorContext);
+}
+var Anchor = ({
+  affix = true,
+  bounds = 5,
+  offsetTop = 0,
+  showInkInFixed = false,
+  targetOffset,
+  getCurrentAnchor,
+  getContainer = () => window,
+  direction = "vertical",
+  className,
+  style,
+  onClick,
+  onChange,
+  children
+}) => {
+  const [activeLink, setActiveLink] = react.useState("");
+  const [links, setLinks] = react.useState([]);
+  const anchorRef = react.useRef(null);
+  const inkRef = react.useRef(null);
+  const isScrollingRef = react.useRef(false);
+  const animationFrameRef = react.useRef(null);
+  const getContainerRef = react.useRef(getContainer);
+  getContainerRef.current = getContainer;
+  const scrollOffset = react.useMemo(() => targetOffset ?? offsetTop, [targetOffset, offsetTop]);
+  const registerLink = react.useCallback((href) => {
+    setLinks((prevLinks) => {
+      if (href && !prevLinks.includes(href)) {
+        return [...prevLinks, href];
+      }
+      return prevLinks;
+    });
+  }, []);
+  const unregisterLink = react.useCallback((href) => {
+    setLinks((prevLinks) => prevLinks.filter((l) => l !== href));
+  }, []);
+  const scrollTo = react.useCallback(
+    (href) => {
+      const container = getContainerRef.current();
+      tigercatCore.scrollToAnchor(href, container, scrollOffset);
+    },
+    [scrollOffset]
+  );
+  const handleLinkClick = react.useCallback(
+    (href, event) => {
+      onClick?.(event, href);
+      isScrollingRef.current = true;
+      setActiveLink(href);
+      scrollTo(href);
+      setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 500);
+    },
+    [onClick, scrollTo]
+  );
+  const scrollHandlerRef = react.useRef(null);
+  const boundContainerRef = react.useRef(null);
+  react.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      const container = getContainerRef.current();
+      boundContainerRef.current = container;
+      const handleScroll = () => {
+        if (isScrollingRef.current) return;
+        if (animationFrameRef.current !== null) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(() => {
+          const currentContainer = getContainerRef.current();
+          const newActiveLink = tigercatCore.findActiveAnchor(links, currentContainer, bounds, scrollOffset);
+          const finalActiveLink = getCurrentAnchor ? getCurrentAnchor(newActiveLink) : newActiveLink;
+          setActiveLink((prevActiveLink) => {
+            if (finalActiveLink !== prevActiveLink) {
+              onChange?.(finalActiveLink);
+              return finalActiveLink;
+            }
+            return prevActiveLink;
+          });
+        });
+      };
+      scrollHandlerRef.current = handleScroll;
+      container.addEventListener("scroll", handleScroll, { passive: true });
+      handleScroll();
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      if (boundContainerRef.current && scrollHandlerRef.current) {
+        boundContainerRef.current.removeEventListener("scroll", scrollHandlerRef.current);
+      }
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [links, bounds, scrollOffset, getCurrentAnchor, onChange]);
+  react.useEffect(() => {
+    if (!inkRef.current || !anchorRef.current || !activeLink) {
+      return;
+    }
+    const activeLinkElement = anchorRef.current.querySelector(
+      `[data-anchor-href="${activeLink}"]`
+    );
+    if (!activeLinkElement) {
+      return;
+    }
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const linkRect = activeLinkElement.getBoundingClientRect();
+    if (direction === "vertical") {
+      inkRef.current.style.top = `${linkRect.top - anchorRect.top}px`;
+      inkRef.current.style.height = `${linkRect.height}px`;
+    } else {
+      inkRef.current.style.left = `${linkRect.left - anchorRect.left}px`;
+      inkRef.current.style.width = `${linkRect.width}px`;
+    }
+  }, [activeLink, direction]);
+  const wrapperClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getAnchorWrapperClasses(affix, className)),
+    [affix, className]
+  );
+  const inkContainerClasses = react.useMemo(() => tigercatCore.getAnchorInkContainerClasses(direction), [direction]);
+  const inkActiveClasses = react.useMemo(() => tigercatCore.getAnchorInkActiveClasses(direction), [direction]);
+  const linkListClasses = react.useMemo(() => tigercatCore.getAnchorLinkListClasses(direction), [direction]);
+  const showInk = react.useMemo(() => {
+    if (!affix) return true;
+    return showInkInFixed;
+  }, [affix, showInkInFixed]);
+  const wrapperStyle = react.useMemo(() => {
+    const baseStyle = {};
+    if (affix && offsetTop > 0) {
+      baseStyle.top = `${offsetTop}px`;
+    }
+    return { ...baseStyle, ...style };
+  }, [affix, offsetTop, style]);
+  const contextValue = react.useMemo(
+    () => ({
+      activeLink,
+      direction,
+      registerLink,
+      unregisterLink,
+      handleLinkClick,
+      scrollTo
+    }),
+    [activeLink, direction, registerLink, unregisterLink, handleLinkClick, scrollTo]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AnchorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: anchorRef, className: wrapperClasses, style: wrapperStyle, children: [
+    showInk && /* @__PURE__ */ jsxRuntime.jsx("div", { className: inkContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: inkRef, className: inkActiveClasses }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: linkListClasses, children })
+  ] }) });
+};
+var Anchor_default = Anchor;
+
+exports.Anchor = Anchor;
+exports.Anchor_default = Anchor_default;
+exports.useAnchorContext = useAnchorContext;

package/dist/components/Anchor.d.mts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { AnchorProps as AnchorProps$1, AnchorDirection } from '@expcat/tigercat-core';
+
+interface AnchorContextValue {
+    activeLink: string;
+    direction: AnchorDirection;
+    registerLink: (href: string) => void;
+    unregisterLink: (href: string) => void;
+    handleLinkClick: (href: string, event: React.MouseEvent) => void;
+    scrollTo: (href: string) => void;
+}
+declare function useAnchorContext(): AnchorContextValue | null;
+interface AnchorProps extends Omit<AnchorProps$1, 'style'> {
+    /**
+     * Target element to listen for scroll events
+     * @default () => window
+     */
+    getContainer?: () => HTMLElement | Window;
+    /**
+     * Click event handler
+     */
+    onClick?: (event: React.MouseEvent, href: string) => void;
+    /**
+     * Change event handler when active anchor changes
+     */
+    onChange?: (currentActiveLink: string) => void;
+    /**
+     * Children (AnchorLink components)
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+}
+declare const Anchor: React.FC<AnchorProps>;
+
+export { Anchor, type AnchorContextValue, type AnchorProps, Anchor as default, useAnchorContext };