@xwadex/fesd-next 0.3.2 → 0.3.4-10

package/dist/hooks/index.js

@@ -0,0 +1,891 @@
+import * as React2 from 'react';
+import { memo, useRef, useEffectEvent, useEffect, useState, useLayoutEffect, createContext, useMemo, useCallback, use } from 'react';
+import Cookies from 'js-cookie';
+import { useAnimate, motionValue } from 'motion/react';
+import { create } from 'zustand';
+import '@radix-ui/react-accordion';
+import 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@radix-ui/react-alert-dialog';
+import { cva } from 'class-variance-authority';
+import '@radix-ui/react-aspect-ratio';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-slot';
+import 'react-day-picker';
+import useEmblaCarousel from 'embla-carousel-react';
+import 'recharts';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-collapsible';
+import 'cmdk';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dialog';
+import 'vaul';
+import '@radix-ui/react-dropdown-menu';
+import 'react-hook-form';
+import '@radix-ui/react-hover-card';
+import 'input-otp';
+import '@radix-ui/react-label';
+import '@radix-ui/react-menubar';
+import '@radix-ui/react-navigation-menu';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-progress';
+import '@radix-ui/react-radio-group';
+import 'react-resizable-panels';
+import '@radix-ui/react-scroll-area';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-slider';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toggle';
+import '@radix-ui/react-tooltip';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import Lenis from 'lenis';
+import { useLenis, ReactLenis } from 'lenis/react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import Autoplay from 'embla-carousel-autoplay';
+import AutoScroll from 'embla-carousel-auto-scroll';
+import AutoHeight from 'embla-carousel-auto-height';
+import ClassNames from 'embla-carousel-class-names';
+import Fade from 'embla-carousel-fade';
+
+// src/hooks/useDebounce.tsx
+function useDebounce({
+  callback,
+  dependency = [],
+  delay = 500,
+  active = true
+}) {
+  if (!active || !callback) return;
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(callback, delay);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [...dependency]);
+}
+function useDebounceValue(value, delay = 500) {
+  const [debounceValue, setDebounceValue] = useState(value);
+  const timerRef = useRef(void 0);
+  useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setDebounceValue(value), delay);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [value, delay]);
+  return debounceValue;
+}
+function useCookies() {
+  const setCookies = (name, value, days = 7) => {
+    Cookies.set(name, value, { expires: days, path: "/" });
+  };
+  const getCookies = (name) => {
+    return Cookies.get(name) ?? null;
+  };
+  const updateCookies = (name, value, days = 7) => {
+    if (getCookies(name) !== null) setCookies(name, value, days);
+  };
+  const deleteCookies = (name) => {
+    Cookies.remove(name, { path: "/" });
+  };
+  return { setCookies, getCookies, updateCookies, deleteCookies };
+}
+function useDragResize({
+  active = true,
+  direction = "horizontal",
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  onInit,
+  onResizeStart,
+  onResizing,
+  onResizeEnd
+}) {
+  const dragRef = useRef(null);
+  const resizeRef = useRef(null);
+  const [resize, setResize] = useState({ width: 0, height: 0 });
+  const getResizeSizeValue = () => {
+    if (!resizeRef.current) return;
+    const { width: w, height: h } = resizeRef.current.style;
+    const width = Number(w.replace("px", "")) ?? "inherit";
+    Number(h.replace("px", "")) ?? "inherit";
+    return { width };
+  };
+  const setResizeValue = (clientX, clientY) => {
+    if (!resizeRef.current) return;
+    const rect = resizeRef.current.getBoundingClientRect();
+    const resizeWidth = clientX - rect.left;
+    const resizeHeight = clientY - rect.top;
+    if (direction == "horizontal" && (minWidth && resizeWidth >= minWidth) && (maxWidth && resizeWidth <= maxWidth)) {
+      resizeRef.current.style.width = resizeWidth + "px";
+      return { width: resizeWidth, height: void 0 };
+    }
+    if (direction == "vertical" && (minHeight && resizeWidth >= minHeight) && (maxHeight && resizeWidth <= maxHeight)) {
+      resizeRef.current.style.height = resizeHeight + "px";
+      return { width: void 0, height: resizeHeight };
+    }
+  };
+  const onInitCallback = () => {
+    const resizeValue = getResizeSizeValue();
+    resizeValue && onInit?.(resizeValue);
+  };
+  const removeEventListeners = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  const onMouseMove = (e) => {
+    const resizeValue = setResizeValue(e.clientX, e.clientY);
+    if (!resizeValue) return;
+    setResize(() => ({ ...resizeValue }));
+    onResizing?.(resizeValue);
+  };
+  const onMouseUp = () => {
+    const resizeValue = getResizeSizeValue();
+    resizeValue && onResizeEnd?.(resizeValue);
+    removeEventListeners();
+  };
+  const onDragRefMouseDown = (e) => {
+    e.preventDefault();
+    const resizeValue = getResizeSizeValue();
+    resizeValue && onResizeStart?.(resizeValue);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  useEffect(() => {
+    if (active && dragRef.current && resizeRef.current) {
+      dragRef.current.onmousedown = onDragRefMouseDown;
+      onInit && onInitCallback();
+    }
+    return () => {
+      if (!dragRef?.current) return;
+      dragRef.current.onmousedown = null;
+      removeEventListeners();
+    };
+  }, [active]);
+  return { dragRef, resizeRef, resize };
+}
+function useAsyncFetcher() {
+  const [isPending, setPending] = useState(false);
+  const controllerRef = useRef(null);
+  const startFetch = useCallback(async ({ url, options }) => {
+    if (isPending || !url) return;
+    const controller = new AbortController();
+    controllerRef.current = controller;
+    setPending(true);
+    try {
+      const response = await fetch(url, {
+        signal: controller.signal,
+        ...options
+      });
+      const datas = await response.json();
+      return datas;
+    } catch (error) {
+      console.error("useAsyncFetche startFetch error:", error);
+      return { status: false, error };
+    } finally {
+      setPending(false);
+    }
+  }, [isPending]);
+  const cancelFetch = () => {
+    controllerRef.current?.abort();
+    setPending(false);
+  };
+  useEffect(() => {
+    return () => controllerRef.current?.abort();
+  }, []);
+  return {
+    pending: isPending,
+    cancel: cancelFetch,
+    fetcher: startFetch
+  };
+}
+function useMounted() {
+  const [isMounded, setMounded] = useState(false);
+  useEffect(() => {
+    setMounded(true);
+  }, []);
+  return { isMounded };
+}
+function useEffectOne(callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    callbackRef.current?.();
+    return () => {
+      callbackRef.current = null;
+    };
+  }, []);
+}
+function useEffectLeave(callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    return () => {
+      callbackRef.current?.();
+      callbackRef.current = null;
+    };
+  }, []);
+}
+cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+React2.createContext(null);
+React2.createContext(null);
+React2.createContext({});
+React2.createContext({});
+cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+);
+React2.createContext(null);
+cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+React2.createContext({
+  size: "default",
+  variant: "default"
+});
+cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function cn(...inputs) {
+  return twMerge(clsx(...inputs));
+}
+memo((props) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props?.root == true ? /* @__PURE__ */ jsx(LenisRootScroll, { ...props }) : /* @__PURE__ */ jsx(LenisContainerScroll, { ...props }),
+    "	"
+  ] });
+});
+var LenisRootScroll = memo(({
+  root,
+  options
+}) => {
+  const lenis = useLenis();
+  const lenisRef = useRef(null);
+  const registerRootLenis = useEffectEvent(() => {
+    if (!root == true || !lenis) return;
+    setRootLenis(lenis);
+  });
+  useEffect(() => {
+    registerRootLenis();
+  }, [lenis]);
+  return /* @__PURE__ */ jsx(
+    ReactLenis,
+    {
+      ref: lenisRef,
+      root,
+      options: {
+        autoRaf: true,
+        lerp: 5e-4,
+        duration: 1.5,
+        smoothWheel: true,
+        ...options
+      }
+    }
+  );
+});
+var LenisContainerScroll = memo(({
+  name,
+  className,
+  children,
+  options,
+  ...restProps
+}) => {
+  const [containerRef, setContainerRef] = useState();
+  const wrapperRef = useRef(null);
+  const contentRef = useRef(null);
+  const initLenis = useEffectEvent(() => {
+    if (!wrapperRef.current || !contentRef.current || !name) return;
+    const lenis = new Lenis({
+      wrapper: wrapperRef.current,
+      content: contentRef.current,
+      autoRaf: true,
+      ...options
+    });
+    setContainerRef(contentRef);
+    setScrollContainerStore({ name, action: "add", node: lenis });
+    return () => {
+      setScrollContainerStore({ name, action: "remove" });
+      lenis?.destroy?.();
+    };
+  });
+  useLayoutEffect(() => {
+    const effect = initLenis();
+    return effect;
+  }, [name, options]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      "data-lenis-scroll": name,
+      className: cn("group overflow-hidden", className),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: contentRef,
+          className: cn("h-full", "relative", "will-change-transform overscroll-contain"),
+          children: /* @__PURE__ */ jsx(ScrollContainerContext, { value: { containerRef }, children })
+        }
+      )
+    }
+  );
+});
+var useLenisStores = create()(() => ({
+  root: null
+}));
+var setRootLenis = (lenis) => useLenisStores.setState(() => {
+  return { root: lenis };
+});
+var getRootLenis = () => useLenisStores.getState();
+var ScrollContainerContext = createContext(null);
+var useScrollContainersStores = create()(() => ({
+  containers: /* @__PURE__ */ new Map()
+}));
+var getScrollContainerStores = () => useScrollContainersStores.getState();
+var setScrollContainerStore = (options) => {
+  const { action, name, node } = options;
+  useScrollContainersStores.setState((stores) => {
+    const containerDom = stores.containers?.get(name);
+    const isContainerNode = node instanceof Lenis || node instanceof HTMLDivElement;
+    if (action == "add" && isContainerNode) {
+      if (containerDom == node) return stores;
+      stores.containers?.set(name, node);
+    } else if (action == "remove" && containerDom) {
+      stores.containers?.delete(name);
+    }
+    return { containers: stores.containers };
+  });
+};
+memo(({
+  tag: Component = "div",
+  name,
+  className,
+  ...restProps
+}) => {
+  const componentRef = useRef(null);
+  const [containerRef, setContainerRef] = useState();
+  const nativeEffect = useEffectEvent(() => {
+    if (!componentRef.current) return;
+    setContainerRef(componentRef);
+    setScrollContainerStore({ name, action: "add", node: componentRef.current });
+    return () => {
+      setScrollContainerStore({ name, action: "remove" });
+    };
+  });
+  useEffect(() => {
+    const effect = nativeEffect();
+    return effect;
+  }, [componentRef?.current]);
+  return /* @__PURE__ */ jsx(ScrollContainerContext, { value: { containerRef }, children: /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: componentRef,
+      "data-native-scroll": name,
+      className: cn(
+        "overflow-auto",
+        "will-change-transform",
+        className
+      ),
+      ...restProps
+    }
+  ) });
+});
+function emblaCarouselsHooks({
+  options,
+  autoplay,
+  autoScroll,
+  classNames,
+  autoHeight,
+  fade,
+  wheel,
+  setApi
+}) {
+  const orientation = options?.axis ?? "x";
+  const plugins = useMemo(() => [
+    autoplay && Autoplay(typeof autoplay == "boolean" ? void 0 : autoplay),
+    autoScroll && AutoScroll(typeof autoScroll == "boolean" ? void 0 : autoScroll),
+    autoHeight && AutoHeight(typeof autoHeight == "boolean" ? void 0 : autoHeight),
+    classNames && ClassNames(typeof classNames == "boolean" ? void 0 : classNames),
+    fade && Fade(typeof fade == "boolean" ? void 0 : fade),
+    wheel && WheelGesturesPlugin(typeof wheel == "boolean" ? void 0 : wheel)
+  ].filter(
+    (plugin) => plugin
+  ), [
+    autoplay,
+    autoScroll,
+    classNames,
+    fade,
+    wheel,
+    autoHeight
+  ]);
+  const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isScrollPrev, setIsScrollPrev] = useState(false);
+  const [isScrollNext, setIsScrollNext] = useState(false);
+  const scrollPrev = useCallback(() => {
+    emblaApi?.scrollPrev();
+  }, [emblaApi]);
+  const scrollNext = useCallback(() => {
+    emblaApi?.scrollNext();
+  }, [emblaApi]);
+  const onKeyDownCapture = useCallback((event) => {
+    console.log("key...");
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      scrollPrev();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      scrollNext();
+    }
+  }, [scrollPrev, scrollNext]);
+  const onSelect = useCallback((api) => {
+    if (!api) return;
+    setCurrentIndex(api?.selectedScrollSnap());
+    setIsScrollPrev(api.canScrollPrev());
+    setIsScrollNext(api.canScrollNext());
+  }, []);
+  const initalEffect = useEffectEvent(() => {
+    if (!emblaApi || !setApi) return;
+    setApi?.(emblaApi);
+    onSelect(emblaApi);
+    emblaApi.on("reInit", onSelect);
+    emblaApi.on("select", onSelect);
+    return () => {
+      emblaApi?.off("select", onSelect);
+    };
+  });
+  useEffect(() => {
+    const events = initalEffect();
+    return () => {
+      events?.();
+    };
+  }, [emblaApi]);
+  return {
+    emblaRef,
+    emblaApi,
+    orientation,
+    currentIndex,
+    isScrollPrev,
+    isScrollNext,
+    scrollPrev,
+    scrollNext,
+    onKeyDownCapture
+  };
+}
+var CarouselsContext = createContext(null);
+var useCarouselsContext = () => {
+  const context = use(CarouselsContext);
+  if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+  return context;
+};
+memo(({
+  children,
+  className,
+  setApi,
+  options,
+  autoplay,
+  autoScroll,
+  classNames,
+  autoHeight,
+  fade,
+  wheel,
+  ...props
+}) => {
+  const {
+    emblaRef,
+    emblaApi,
+    orientation,
+    currentIndex,
+    isScrollPrev,
+    isScrollNext,
+    scrollPrev,
+    scrollNext,
+    onKeyDownCapture
+  } = emblaCarouselsHooks({
+    setApi,
+    options,
+    autoplay,
+    autoScroll,
+    classNames,
+    autoHeight,
+    fade,
+    wheel
+  });
+  const contextValue = useMemo(() => ({
+    emblaRef,
+    emblaApi,
+    orientation,
+    currentIndex,
+    isScrollPrev,
+    isScrollNext,
+    scrollPrev,
+    scrollNext
+  }), [
+    emblaRef,
+    emblaApi,
+    orientation,
+    currentIndex,
+    isScrollPrev,
+    isScrollNext,
+    scrollPrev,
+    scrollNext
+  ]);
+  return /* @__PURE__ */ jsx(CarouselsContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-component": "embla-carousels",
+      onKeyDownCapture,
+      className: cn("relative overflow-hidden", className),
+      "aria-roledescription": "embla-carousels",
+      role: "region",
+      ...props,
+      children
+    }
+  ) });
+});
+memo(({ className, ...props }) => {
+  const { emblaRef, orientation } = useCarouselsContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: emblaRef,
+      className: "overflow-hidden",
+      "data-component": "embla-carousels-contents",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex",
+            orientation === "x" ? "flex-row" : "flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+});
+memo(({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "data-component": "embla-carousels-slides",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        className
+      ),
+      ...props
+    }
+  );
+});
+createContext(null);
+var ANCHOR_ATTRIBUTE = "data-anchor";
+var OFFSETER_ATTRIBUTE = "data-anchor-offseter";
+function useAnchors() {
+  const [_, animate] = useAnimate();
+  const controllerRef = useRef(/* @__PURE__ */ new Map());
+  const scrollAnimations = useCallback(({
+    controllerKey,
+    containerDom,
+    anchorScrollValue,
+    containerScrollValue,
+    direction = "y",
+    duration = 1,
+    delay = 0,
+    ease = [0, 1, 0.5, 0.99],
+    onScroll: onPlay,
+    onScrolled,
+    onScrolling,
+    ...props
+  }) => {
+    if (direction !== "y" && direction !== "x") {
+      console.error(`Scroll Direction isn't 'x' or 'y' `);
+      return;
+    }
+    const { left: scrollLeft, top: scrollTop } = containerScrollValue;
+    const { left: anchorLeft, top: anchorTop } = anchorScrollValue;
+    const isScrollX = direction === "x";
+    const isScrollY = direction === "y";
+    const startValue = isScrollX ? scrollLeft : scrollTop;
+    const endValue = isScrollX ? anchorLeft : anchorTop;
+    if (startValue == endValue) {
+      controllerRef.current.delete(controllerKey);
+      return;
+    }
+    const motionStartValue = motionValue(startValue);
+    const onUpdate = (value) => {
+      const left = isScrollX ? value : void 0;
+      const top = isScrollY ? value : void 0;
+      containerDom.scrollTo({ left, top });
+      onScrolling?.(value);
+    };
+    const onComplete = () => {
+      controllerRef.current.delete(controllerKey);
+      onScrolled?.();
+    };
+    const options = {
+      duration,
+      ease,
+      delay,
+      onPlay,
+      onUpdate,
+      onComplete,
+      ...props
+    };
+    controllerRef.current.set(
+      controllerKey,
+      animate(motionStartValue, endValue, options)
+    );
+  }, []);
+  const scrollToAnchor = useCallback((anchorOptions) => {
+    const {
+      anchor: anchorName,
+      container: containerName,
+      offseters,
+      align,
+      offset = 0,
+      direction = "y",
+      ...options
+    } = anchorOptions;
+    const anchorsStores = getAnchorsStores();
+    const scrollContainersStores = getScrollContainerStores();
+    const isScrolltoAnchor = anchorName !== "#";
+    const isScrollContainer = containerName && containerName !== "window";
+    const controllerKey = containerName ?? "window";
+    if (controllerRef.current.has(controllerKey)) {
+      controllerRef.current.get(controllerKey)?.stop();
+      controllerRef.current.delete(controllerKey);
+    }
+    const anchorDom = isScrolltoAnchor ? anchorsStores.anchors.get(anchorName) : void 0;
+    if (isScrolltoAnchor && !(anchorDom instanceof HTMLElement)) return;
+    const containerDom = isScrollContainer ? scrollContainersStores.containers.get(containerName) : window;
+    if (!containerDom) return;
+    const getOffseterDomClient = (offseters2) => {
+      const offseterDom = anchorsStores.offseters.get(offseters2);
+      const { clientWidth, clientHeight } = offseterDom || {};
+      return { width: clientWidth ?? 0, height: clientHeight ?? 0 };
+    };
+    const offsets = Array.isArray(offseters) ? offseters.reduce((init, offseter) => {
+      const { width, height } = getOffseterDomClient(offseter);
+      return {
+        width: (init.width ?? 0) + width,
+        height: (init.height ?? 0) + height
+      };
+    }, {}) : typeof offseters == "string" ? getOffseterDomClient(offseters) : { width: 0, height: 0 };
+    const offsetValue = {
+      width: direction === "x" ? offsets.width + offset : 0,
+      height: direction === "y" ? offsets.height + offset : 0
+    };
+    const isLenisScroll = containerDom == window && window.document.documentElement.classList.contains("lenis") || containerDom instanceof Lenis;
+    if (isLenisScroll) {
+      const lenis = isScrollContainer ? containerDom : getRootLenis()?.root;
+      if (!lenis) return;
+      const directionOffset = direction === "x" ? offsetValue.width + offset : offsetValue.height + offset;
+      lenis.scrollTo(
+        anchorDom ?? 0,
+        {
+          offset: directionOffset * -1,
+          onStart: (lenis2) => options?.onScroll?.(lenis2),
+          onComplete: (lenis2) => options?.onScrolled?.(lenis2)
+        }
+      );
+      return;
+    }
+    const containerScrollValue = {
+      top: Math.round(isScrollContainer ? containerDom.scrollTop : containerDom.pageYOffset),
+      left: Math.round(isScrollContainer ? containerDom.scrollLeft : pageXOffset)
+    };
+    const containerRect = isScrollContainer ? containerDom.getBoundingClientRect() : { top: 0, left: 0 };
+    const containerOffsetValue = {
+      left: containerScrollValue.left - (isScrollContainer ? containerRect.left : 0),
+      top: containerScrollValue.top - (isScrollContainer ? containerRect.top : 0)
+    };
+    const anchorRect = anchorDom ? anchorDom.getBoundingClientRect() : { left: 0, top: 0 };
+    const anchorScrollValue = {
+      left: isScrolltoAnchor ? Math.round(anchorRect.left + containerOffsetValue.left - offsetValue.width) : offsetValue.width,
+      top: isScrolltoAnchor ? Math.round(anchorRect.top + containerOffsetValue.top - offsetValue.height) : offsetValue.height
+    };
+    scrollAnimations({
+      controllerKey,
+      containerDom,
+      containerScrollValue,
+      anchorScrollValue,
+      direction,
+      ...options
+    });
+  }, []);
+  const returnsMemo = useMemo(() => ({
+    registerAnchors,
+    registerOffseters,
+    setStores: setAnchorsStore,
+    getStores: getAnchorsStores,
+    scrollToAnchor
+  }), [scrollToAnchor]);
+  return returnsMemo;
+}
+function useRegistration({ key, name }) {
+  const ref = useRef(null);
+  const attribute = key == "anchors" ? ANCHOR_ATTRIBUTE : OFFSETER_ATTRIBUTE;
+  useLayoutEffect(() => {
+    setAnchorsStore({ key, action: "add", node: ref.current, name });
+    return () => {
+      setAnchorsStore({ key, action: "remove", node: ref.current, name });
+    };
+  }, []);
+  return { ref, [attribute]: name };
+}
+function registerAnchors(name) {
+  return useRegistration({ key: "anchors", name });
+}
+function registerOffseters(name) {
+  return useRegistration({ key: "offseters", name });
+}
+var useAnchorsStores = create()(() => ({
+  anchors: /* @__PURE__ */ new Map(),
+  offseters: /* @__PURE__ */ new Map()
+}));
+var getAnchorsStores = () => useAnchorsStores.getState();
+var setAnchorsStore = (options) => {
+  const { key, action, name, node } = options;
+  useAnchorsStores.setState((stores) => {
+    switch (key) {
+      case "anchors":
+        const anchorDom = stores.anchors?.get(name);
+        if (action == "add" && node instanceof HTMLElement) {
+          if (anchorDom == node) return stores;
+          stores.anchors?.set(name, node);
+        } else if (action == "remove" && anchorDom) {
+          stores.anchors?.delete(name);
+        }
+        return { anchors: stores.anchors };
+      case "offseters":
+        const offseterDom = stores.offseters?.get(name);
+        if (action == "add" && node instanceof HTMLElement) {
+          if (offseterDom == node) return stores;
+          stores.offseters?.set(name, node);
+        } else if (action == "remove" && offseterDom) {
+          stores.offseters?.delete(name);
+        }
+        return { offseters: stores.offseters };
+      default:
+        return stores;
+    }
+  });
+};
+function useHash() {
+  const [hash, setHash] = useState("");
+  const updateHash = () => setHash(window.location.hash);
+  const hashchangeEvent = (e) => {
+    e.preventDefault?.();
+    updateHash();
+  };
+  useEffect(() => {
+    updateHash();
+    window.addEventListener("hashchange", hashchangeEvent);
+    return () => {
+      window.removeEventListener("hashchange", hashchangeEvent);
+    };
+  }, []);
+  return hash;
+}
+
+export { getAnchorsStores, registerAnchors, registerOffseters, setAnchorsStore, useAnchors, useAnchorsStores, useAsyncFetcher, useCookies, useDebounce, useDebounceValue, useDragResize, useEffectLeave, useEffectOne, useHash, useMounted, useRegistration };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map