@xwadex/fesd-next 0.3.4-7.9 → 0.3.4-8

package/dist/components/anchors/anchors.d.ts

@@ -3,14 +3,12 @@ interface PropsType extends React.ComponentProps<"div"> {
     name: string;
 }
 export declare const AnchorTarget: React.FC<PropsType>;
-export declare const AnchorContainer: React.FC<PropsType>;
 export declare const AnchorOffseter: React.FC<PropsType>;
 type TriggerProps = AnchorOptions & React.ComponentProps<"div"> & {};
 export declare const AnchorTrigger: React.FC<TriggerProps>;
 export declare const Anchors: {
     Trigger: import("react").FC<TriggerProps>;
     Target: import("react").FC<PropsType>;
-    Container: import("react").FC<PropsType>;
     Offseter: import("react").FC<PropsType>;
 };
 export {};

package/dist/components/anchors/anchors.js

@@ -1,18 +1,16 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+// update: 2025.11.12
+// version: 0.0.2.bate
+// dev: wade
 import { useAnchors } from "../../hooks/index.js";
 import { cn } from "../../shadcns/index.js";
-export const AnchorTarget = ({ children, className, name }) => {
+export const AnchorTarget = ({ name, ...props }) => {
     const { registerAnchors } = useAnchors();
-    return (_jsx("div", { className: cn(className), ...registerAnchors(name), children: children }));
+    return (_jsx("div", { ...props, ...registerAnchors(name) }));
 };
-export const AnchorContainer = ({ children, className, name }) => {
-    const { registerContainers } = useAnchors();
-    return (_jsx("div", { className: cn(className), ...registerContainers(name), children: children }));
-};
-export const AnchorOffseter = ({ children, className, name }) => {
+export const AnchorOffseter = ({ name, ...props }) => {
     const { registerOffseters } = useAnchors();
-    return (_jsx("div", { className: cn(className), ...registerOffseters(name), children: children }));
+    return (_jsx("div", { ...props, ...registerOffseters(name) }));
 };
 export const AnchorTrigger = ({ children, className, ...options }) => {
     const { scrollToAnchor } = useAnchors();
@@ -21,6 +19,5 @@ export const AnchorTrigger = ({ children, className, ...options }) => {
 export const Anchors = {
     Trigger: AnchorTrigger,
     Target: AnchorTarget,
-    Container: AnchorContainer,
     Offseter: AnchorOffseter
 };

package/dist/components/embla-carousels/embla-carousels-hooks.d.ts

@@ -0,0 +1,36 @@
+import useEmblaCarousel from "embla-carousel-react";
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import type { AutoplayOptionsType } from "embla-carousel-autoplay";
+import type { AutoScrollOptionsType } from "embla-carousel-auto-scroll";
+import type { AutoHeightOptionsType } from "embla-carousel-auto-height";
+import type { ClassNamesOptionsType } from "embla-carousel-class-names";
+import type { FadeOptionsType } from "embla-carousel-fade";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+export interface EmblaCarouselsHooksTypes {
+    options?: CarouselOptions;
+    autoplay?: AutoplayOptionsType | true;
+    autoScroll?: AutoScrollOptionsType | true;
+    classNames?: ClassNamesOptionsType | true;
+    autoHeight?: AutoHeightOptionsType | true;
+    fade?: FadeOptionsType | true;
+    wheel?: {
+        wheelDraggingClass?: string;
+        forceWheelAxis?: "x" | "y";
+        target?: Element;
+    } | true;
+    setApi?: (api: CarouselApi) => void;
+}
+export declare function emblaCarouselsHooks({ options, autoplay, autoScroll, classNames, autoHeight, fade, wheel, setApi, }: EmblaCarouselsHooksTypes): {
+    emblaRef: (node: HTMLElement | null) => void;
+    emblaApi: CarouselApi;
+    orientation: "x" | "y";
+    currentIndex: number;
+    isScrollPrev: boolean;
+    isScrollNext: boolean;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    onKeyDownCapture: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+};
+export {};

package/dist/components/embla-carousels/embla-carousels-hooks.js

@@ -0,0 +1,83 @@
+// update: 2025.11.20
+// version: 0.0.1.bate
+// dev: wade
+import { useCallback, useEffect, useEffectEvent, useMemo, useState } from "react";
+import useEmblaCarousel from "embla-carousel-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";
+export function emblaCarouselsHooks({ options, autoplay, autoScroll, classNames, autoHeight, fade, wheel, setApi, }) {
+    const orientation = options?.axis ?? "x";
+    const plugins = useMemo(() => ([
+        autoplay && Autoplay(typeof autoplay == "boolean" ? undefined : autoplay),
+        autoScroll && AutoScroll(typeof autoScroll == "boolean" ? undefined : autoScroll),
+        autoHeight && AutoHeight(typeof autoHeight == "boolean" ? undefined : autoHeight),
+        classNames && ClassNames(typeof classNames == "boolean" ? undefined : classNames),
+        fade && Fade(typeof fade == "boolean" ? undefined : fade),
+        wheel && WheelGesturesPlugin(typeof wheel == "boolean" ? undefined : 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
+    };
+}

package/dist/components/embla-carousels/embla-carousels.d.ts

@@ -0,0 +1,23 @@
+import useEmblaCarousel from "embla-carousel-react";
+import type { EmblaCarouselsHooksTypes } from "./embla-carousels-hooks";
+export type CarouselsContextProps = {
+    emblaRef: ReturnType<typeof useEmblaCarousel>[0];
+    emblaApi: ReturnType<typeof useEmblaCarousel>[1];
+    currentIndex?: number;
+    orientation: "x" | "y";
+    isScrollPrev: boolean;
+    isScrollNext: boolean;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+};
+export declare const useCarouselsContext: () => CarouselsContextProps;
+export interface PropsTypes extends EmblaCarouselsHooksTypes, React.ComponentProps<"div"> {
+}
+export declare const EmblaCarouselsRoots: React.FC<PropsTypes>;
+export declare const EmblaCarouselsContents: React.FC<React.ComponentProps<"div">>;
+export declare const EmblaCarouselsSlides: React.FC<React.ComponentProps<"div">>;
+export declare const EmblaCarousels: {
+    Roots: import("react").FC<PropsTypes>;
+    Contents: import("react").FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    Slides: import("react").FC<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+};

package/dist/components/embla-carousels/embla-carousels.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// update: 2025.11.20
+// version: 0.0.1.bate
+// dev: wade
+import { createContext, memo, use, useMemo } from "react";
+import { emblaCarouselsHooks, } from "./embla-carousels-hooks";
+import { cn } from "../../shadcns/index.js";
+const CarouselsContext = createContext(null);
+export const useCarouselsContext = () => {
+    const context = use(CarouselsContext);
+    if (!context)
+        throw new Error("useCarousel must be used within a <Carousel />");
+    return context;
+};
+export const EmblaCarouselsRoots = 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 (_jsx(CarouselsContext, { value: contextValue, children: _jsx("div", { "data-component": "embla-carousels", onKeyDownCapture: onKeyDownCapture, className: cn("relative overflow-hidden", className), "aria-roledescription": "embla-carousels", role: "region", ...props, children: children }) }));
+});
+export const EmblaCarouselsContents = memo(({ className, ...props }) => {
+    const { emblaRef, orientation } = useCarouselsContext();
+    return (_jsx("div", { ref: emblaRef, className: "overflow-hidden", "data-component": "embla-carousels-contents", children: _jsx("div", { className: cn("flex", orientation === "x" ? "flex-row" : "flex-col", className), ...props }) }));
+});
+export const EmblaCarouselsSlides = memo(({ className, ...props }) => {
+    return (_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 }));
+});
+export const EmblaCarousels = {
+    Roots: EmblaCarouselsRoots,
+    Contents: EmblaCarouselsContents,
+    Slides: EmblaCarouselsSlides,
+};

package/dist/components/embla-carousels/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./embla-carousels";
+export * from "./embla-carousels-hooks";

package/dist/components/embla-carousels/index.js

@@ -0,0 +1,2 @@
+export * from "./embla-carousels";
+export * from "./embla-carousels-hooks";

package/dist/components/emblas/embla-container.d.ts

@@ -0,0 +1,8 @@
+type PropsTypes = {
+    className?: string;
+    slide?: React.FC<any>;
+    children?: any;
+    style?: any;
+};
+declare const EmblaContainer: React.FC<PropsTypes>;
+export default EmblaContainer;

package/dist/components/emblas/embla-container.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../shadcns/index.js";
+import { useCarouselContext } from "./embla-context";
+const EmblaContainer = ({ slide: SlideComponent, className, children, style, ...props }) => {
+    const { datas, emblaApi } = useCarouselContext();
+    const cantSlide = !emblaApi?.canScrollNext() && !emblaApi?.canScrollPrev();
+    return (_jsxs("div", { "data-component": "embla-container", className: cn("flex", className, cantSlide && [
+            "transform-[unset!important]"
+        ]), style: { ...style }, children: [SlideComponent && datas?.map((item, index) => (_jsx(SlideComponent, { ...item, index: index, ...props }, item?.multipurpose?.key ?? item?.id ?? index))), children] }));
+};
+EmblaContainer.displayName = "EmblaContainer";
+export default EmblaContainer;

package/dist/components/emblas/embla-context.d.ts

@@ -0,0 +1,21 @@
+import type { EmblaViewportRefType } from "embla-carousel-react";
+import type { EmblaCarouselType } from 'embla-carousel';
+interface CarouselContextTypes {
+    datas: [];
+    emblaRef?: EmblaViewportRefType;
+    emblaApi?: EmblaCarouselType | null;
+    selectIndex: number;
+    scrollSnaps: number[];
+    nextScroll: () => void;
+    prevScroll: () => void;
+    scrollToIndex: (index: number) => void;
+    autoPlayReset: () => void;
+    autoPlayStop: () => void;
+    autoPlayPlay: () => void;
+}
+export declare const CarouselContextProvider: (props: {
+    children: React.ReactNode;
+    value: CarouselContextTypes;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useCarouselContext: () => CarouselContextTypes;
+export {};

package/dist/components/emblas/embla-context.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+const CarouselContext = createContext(null);
+export const CarouselContextProvider = (props) => {
+    return _jsx(CarouselContext, { ...props });
+};
+export const useCarouselContext = () => {
+    const context = use(CarouselContext);
+    if (!context)
+        throw new Error("useCMSData must be used inside CMSProvider");
+    return context;
+};

package/dist/components/emblas/embla.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { EmblaOptionsType } from "embla-carousel";
+import type { AutoplayOptionsType } from "embla-carousel-autoplay";
+export interface PropsTypes extends EmblaOptionsType {
+    children?: React.ReactNode;
+    className?: string;
+    options?: EmblaOptionsType;
+    datas?: any;
+    autoplayEnabled?: boolean;
+    autoplayOptions?: AutoplayOptionsType;
+    setApi?: any;
+    setMethods?: any;
+    setRef?: any;
+    style?: any;
+    controls?: any;
+    plugins?: any;
+    onScrolled?: (index: number) => void;
+}
+declare const Embla: React.FC<PropsTypes>;
+export default Embla;

package/dist/components/emblas/embla.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { cn } from "../../shadcns/index.js";
+import { CarouselContextProvider } from "./embla-context";
+import Autoplay from "embla-carousel-autoplay";
+const Embla = ({ children, className, options, datas, autoplayEnabled = true, autoplayOptions, setApi, setMethods, setRef, style, controls, onScrolled }) => {
+    const { loop, duration = 40 } = options || {};
+    const autoplaySetting = useMemo(() => {
+        if (!autoplayEnabled)
+            return;
+        return [Autoplay({ playOnInit: true, delay: 5000, stopOnInteraction: false, ...autoplayOptions })];
+    }, [autoplayEnabled, autoplayOptions]);
+    const [emblaRef, emblaApi] = useEmblaCarousel({ ...options, loop, duration }, autoplaySetting);
+    const [selectIndex, setSelectIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState([]);
+    const nextScroll = useCallback(() => {
+        if (!emblaApi)
+            return;
+        const { canScrollNext, scrollNext } = emblaApi;
+        canScrollNext() && scrollNext() && autoPlayReset();
+    }, [emblaApi]);
+    const prevScroll = useCallback(() => {
+        if (!emblaApi)
+            return;
+        const { canScrollPrev, scrollPrev } = emblaApi;
+        canScrollPrev() && scrollPrev() && autoPlayReset();
+    }, [emblaApi]);
+    const scrollToIndex = useCallback((index) => {
+        if (!emblaApi || typeof index !== "number")
+            return;
+        emblaApi.scrollTo(index);
+    }, [emblaApi]);
+    // 自動輪播啟動
+    const autoPlayReset = useCallback(() => {
+        if (!emblaApi)
+            return;
+        // console.log("autoplay.reset");
+        const autoplay = emblaApi?.plugins()?.autoplay;
+        autoplay && autoplay.reset();
+    }, [emblaApi]);
+    const autoPlayPlay = useCallback(() => {
+        if (!emblaApi)
+            return;
+        // console.log("autoplay.play");
+        if (!emblaApi.canScrollNext())
+            return; // 防呆
+        const autoplay = emblaApi?.plugins()?.autoplay;
+        autoplay && autoplay.play();
+    }, [emblaApi]);
+    // 自動輪播暫停
+    const autoPlayStop = useCallback(() => {
+        if (!emblaApi)
+            return;
+        // console.log("autoplay.stop");
+        const autoplay = emblaApi?.plugins()?.autoplay;
+        autoplay && autoplay.stop();
+    }, [emblaApi]);
+    const contextValue = useMemo(() => ({
+        datas,
+        emblaRef,
+        emblaApi,
+        selectIndex,
+        scrollSnaps,
+        nextScroll,
+        prevScroll,
+        scrollToIndex,
+        autoPlayReset,
+        autoPlayStop,
+        autoPlayPlay
+    }), [
+        datas,
+        emblaRef,
+        emblaApi,
+        selectIndex,
+        scrollSnaps,
+        nextScroll,
+        prevScroll,
+        scrollToIndex,
+        autoPlayReset,
+        autoPlayStop,
+        autoPlayPlay
+    ]);
+    const onInit = useCallback((emblaApi) => {
+        const snapList = emblaApi.scrollSnapList();
+        setScrollSnaps(snapList);
+    }, []);
+    const onSelectEvent = (emblaApi) => {
+        emblaApi.on("select", () => {
+            onScrolled?.(emblaApi.selectedScrollSnap());
+            setSelectIndex(emblaApi.selectedScrollSnap());
+        });
+    };
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        setRef?.(emblaRef);
+        setApi?.(emblaApi);
+        setMethods?.({});
+        onInit(emblaApi);
+        onSelectEvent(emblaApi);
+    }, [emblaApi]);
+    return (_jsx(CarouselContextProvider, { value: contextValue, children: _jsxs("div", { "data-component": "embla-root", className: cn("relative w-full"), children: [_jsx("div", { className: cn("overflow-hidden", "w-full", className), ref: emblaRef, style: style, children: children }), Array.isArray(controls) ? controls.map((ctrl, i) => (_jsx(React.Fragment, { children: ctrl }, i))) : controls] }) })
+    // <CarouselContextProvider
+    // 	value={contextValue}
+    // >
+    // 	<div
+    // 		data-component="embla-root"
+    // 		className={cn(
+    // 			"overflow-hidden",
+    // 			"relative",
+    // 			"w-full",
+    // 			className
+    // 		)}
+    // 		ref={emblaRef}
+    // 		style={style}
+    // 	>
+    // 		{children}
+    // 	</div>
+    // </CarouselContextProvider>
+    );
+};
+Embla.displayName = "Embla";
+export default Embla;

package/dist/components/emblas/emblas-pagination.d.ts

@@ -0,0 +1,11 @@
+type EmblaPaginationPropsTypes = {
+    color?: "black" | "white" | string;
+    align?: "start" | "center" | "end";
+    className?: string;
+    maxDots?: number;
+    dynamic?: boolean;
+    swiperNumber?: boolean;
+    style?: string;
+};
+export declare const EmblaPagination: React.FC<EmblaPaginationPropsTypes>;
+export default EmblaPagination;

package/dist/components/emblas/emblas-pagination.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../shadcns/index.js";
+import { useCarouselContext } from "./embla-context";
+import { useEffect, useState } from "react";
+export const EmblaPagination = ({ color = "black", align, className, maxDots = 5, dynamic = true, swiperNumber = true, }) => {
+    const { selectIndex, scrollToIndex, scrollSnaps, autoPlayReset, emblaApi } = useCarouselContext();
+    // 點點計算
+    const total = scrollSnaps?.length ?? 0;
+    const active = Math.max(0, Math.min(selectIndex ?? 0, Math.max(0, total - 1)));
+    // 顯示數字
+    const paginationNumber = `${Number(active + 1) < 10 ? "0" + Number(active + 1) : Number(active + 1)}`;
+    const isWhite = color === "white";
+    // 點擊事件
+    const clickEvent = (index) => {
+        scrollToIndex(index); // 移動到當澤輪播
+        autoPlayReset(); // 如果有開啟自動輪播要重置輪播時間
+    };
+    // 點點是否為當前
+    const isSelected = (index) => {
+        return index === selectIndex;
+    };
+    // -- 動態點點 Start --
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [slideCount, setSlideCount] = useState(0);
+    useEffect(() => {
+        if (!emblaApi || !dynamic)
+            return;
+        const update = () => {
+            setSelectedIndex(emblaApi.selectedScrollSnap());
+            setSlideCount(emblaApi.scrollSnapList().length);
+        };
+        emblaApi.on('select', update);
+        emblaApi.on('reInit', update); // 重新初始化時也更新
+        update();
+        return () => {
+            emblaApi.off('select', update);
+            emblaApi.off('reInit', update);
+        };
+    }, [emblaApi, dynamic]);
+    const getVisibleBullets = () => {
+        const total = slideCount ?? 0;
+        if (total === 0)
+            return [];
+        const limit = Math.max(1, Number(maxDots));
+        const windowSize = Math.min(total, limit);
+        const left = Math.floor((windowSize - 1) / 2);
+        const right = windowSize - left - 1;
+        let start = selectedIndex - left;
+        let end = selectedIndex + right;
+        if (start < 0) {
+            end = Math.min(end - start, total - 1);
+            start = 0;
+        }
+        if (end > total - 1) {
+            start = Math.max(0, start - (end - (total - 1)));
+            end = total - 1;
+        }
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    };
+    const visibleRange = getVisibleBullets();
+    // -- 動態點點 End --
+    // 是否開啟動態點點決定點點跑陣列的方式
+    const dots = dynamic ? visibleRange : scrollSnaps?.map((_, i) => i) ?? [];
+    // WE - 頁碼
+    const swiperSnap = [
+        "text-[16px]",
+        "font-semibold",
+        " leading-[1.4]",
+    ];
+    const paginationColorStyle = {
+        "black": "#000",
+        "white": "#fff",
+    }[color] || `${color}`;
+    const paginationColorStyle2 = {
+        "--pagination-color": paginationColorStyle,
+    };
+    return (_jsxs("div", { "data-compoents": "emblas-pagination", className: cn("flex", "items-center", "gap-7.25", align === "center" && [
+            "justify-center",
+        ], className), style: paginationColorStyle2, children: [swiperNumber &&
+                _jsx("div", { className: cn(swiperSnap, "relative", "after:absolute", "after:top-1/2", "after:right-[-15px]", "after:-translate-y-1/2", "after:block", 
+                    // "after:bg-black",
+                    "after:bg-(--pagination-color)", "after:w-0.5", "after:h-3.75", "after:opacity-20", isWhite && [
+                        "after:bg-white",
+                    ]), children: paginationNumber }), _jsx("div", { className: cn("flex", "flex-wrap", "justify-end", "items-center", "gap-y-0", "gap-x-2.5", "**:data-[component='emblas-pagination-dots']:bg-(--pagination-color)", isWhite && [
+                    "**:data-[component='emblas-pagination-dots']:bg-white",
+                ]), children: dots.map((index) => (_jsx("div", { "data-component": "emblas-pagination-dots", onClick: () => clickEvent(index), className: cn("w-1.5", "h-1.5", "rounded-full", "cursor-pointer", "opacity-30", isSelected(index) && ("opacity-100")) }, index))) })] }));
+};
+EmblaPagination.displayName = "EmblaPagination";
+export default EmblaPagination;

package/dist/components/emblas/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./embla-context";
+export { default as Embla } from "./embla";
+export { default as EmblaContainer } from "./embla-container";
+export { default as EmblaPagination } from "./emblas-pagination";

package/dist/components/emblas/index.js

@@ -0,0 +1,4 @@
+export * from "./embla-context";
+export { default as Embla } from "./embla";
+export { default as EmblaContainer } from "./embla-container";
+export { default as EmblaPagination } from "./emblas-pagination";

package/dist/components/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./anchors";
+export * from "./scroll-containers";
+export * from "./embla-carousels";
+export * from "./emblas";
 export * from "./tests";

package/dist/components/index.js

@@ -1,2 +1,5 @@
 export * from "./anchors";
+export * from "./scroll-containers";
+export * from "./embla-carousels";
+export * from "./emblas";
 export * from "./tests";

package/dist/components/scroll-containers/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./native-scroll";
+export * from "./lenis-scroll";
+export * from "./scroll-containers";

package/dist/components/scroll-containers/index.js

@@ -0,0 +1,3 @@
+export * from "./native-scroll";
+export * from "./lenis-scroll";
+export * from "./scroll-containers";

package/dist/components/scroll-containers/lenis-scroll.d.ts

@@ -0,0 +1,20 @@
+import Lenis from 'lenis';
+import type { LenisOptions } from "lenis";
+export interface LenisScrollProps {
+    root?: boolean | "asChild";
+    name?: string;
+    options?: LenisOptions;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const LenisScroll: React.FC<LenisScrollProps>;
+export declare const LenisRootScroll: React.FC<LenisScrollProps>;
+type LenisScrollContainerProps = Omit<LenisScrollProps, "root">;
+export declare const LenisContainerScroll: React.FC<LenisScrollContainerProps>;
+interface LenisStores {
+    root?: Lenis | null;
+}
+export declare const useLenisStores: import("zustand").UseBoundStore<import("zustand").StoreApi<LenisStores>>;
+export declare const setRootLenis: (lenis: Lenis) => void;
+export declare const getRootLenis: () => LenisStores;
+export {};