@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/immersive-landing/components/PWAInstallPrompt.js

@@ -0,0 +1,178 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_573defba__ from "../../button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__ from "../../card/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__flex_index_js_42888a32__ from "../../flex/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="w-14 h-14 flex-shrink-0 rounded-xl bg-base-200 p-2"><img class="w-full h-full">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<p class="text-sm text-base-content/70">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div role=dialog aria-modal=false aria-labelledby=pwa-install-title class="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-sm z-51 animate-slide-up">');
+const DISMISS_DURATION = 604800000;
+const defaultTexts = {
+    title: "Install App",
+    description: "Add this app to your home screen for a better experience.",
+    installButton: "Install",
+    notNowButton: "Not now",
+    closeLabel: "Close"
+};
+const PWAInstallPrompt = (props)=>{
+    const STORAGE_KEY = ()=>props.storageKey ?? "app_pwa_dismissed";
+    const appName = ()=>props.appName ?? "My App";
+    const appIcon = ()=>props.appIcon ?? "/icon-192.png";
+    const texts = ()=>({
+            title: props.texts?.title ?? defaultTexts.title,
+            description: props.texts?.description ?? defaultTexts.description,
+            installButton: props.texts?.installButton ?? defaultTexts.installButton,
+            notNowButton: props.texts?.notNowButton ?? defaultTexts.notNowButton,
+            closeLabel: props.texts?.closeLabel ?? defaultTexts.closeLabel
+        });
+    const [deferredPrompt, setDeferredPrompt] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [showPrompt, setShowPrompt] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const checkDismissalStatus = ()=>{
+        const dismissed = localStorage.getItem(STORAGE_KEY());
+        if (!dismissed) return true;
+        const dismissedTime = Number.parseInt(dismissed, 10);
+        const now = Date.now();
+        if (now - dismissedTime > DISMISS_DURATION) {
+            localStorage.removeItem(STORAGE_KEY());
+            return true;
+        }
+        return false;
+    };
+    const handleBeforeInstallPrompt = (e)=>{
+        e.preventDefault();
+        setDeferredPrompt(e);
+        if (checkDismissalStatus()) setShowPrompt(true);
+    };
+    const handleInstall = async ()=>{
+        const prompt = deferredPrompt();
+        if (!prompt) return;
+        try {
+            prompt.prompt();
+            const result = await prompt.userChoice;
+            if ("accepted" === result.outcome) {
+                setShowPrompt(false);
+                setDeferredPrompt(null);
+                props.onInstall?.();
+            }
+        } catch (error) {
+            console.debug("PWA install prompt failed:", error);
+        }
+    };
+    const handleDismiss = ()=>{
+        setShowPrompt(false);
+        localStorage.setItem(STORAGE_KEY(), Date.now().toString());
+        props.onDismiss?.();
+    };
+    const handleAppInstalled = ()=>{
+        setShowPrompt(false);
+        setDeferredPrompt(null);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+        window.addEventListener("appinstalled", handleAppInstalled);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+        window.removeEventListener("appinstalled", handleAppInstalled);
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return showPrompt();
+        },
+        get children () {
+            var _el$ = _tmpl$3();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__["default"], {
+                shadow: "lg",
+                background: "base-100",
+                class: "relative border border-base-300",
+                get children () {
+                    return [
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_573defba__["default"], {
+                            size: "sm",
+                            variant: "ghost",
+                            isIconOnly: true,
+                            class: "absolute top-2 right-2",
+                            onClick: handleDismiss,
+                            get ["aria-label"] () {
+                                return texts().closeLabel;
+                            },
+                            children: "X"
+                        }),
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__["default"].Body, {
+                            get children () {
+                                return [
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_42888a32__["default"], {
+                                        align: "start",
+                                        gap: "md",
+                                        get children () {
+                                            return [
+                                                (()=>{
+                                                    var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild;
+                                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                                                        var _v$ = appIcon(), _v$2 = appName();
+                                                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "src", _p$.e = _v$);
+                                                        _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "alt", _p$.t = _v$2);
+                                                        return _p$;
+                                                    }, {
+                                                        e: void 0,
+                                                        t: void 0
+                                                    });
+                                                    return _el$2;
+                                                })(),
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_42888a32__["default"], {
+                                                    direction: "col",
+                                                    gap: "sm",
+                                                    class: "flex-1 min-w-0 pr-6",
+                                                    get children () {
+                                                        return [
+                                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__["default"].Title, {
+                                                                id: "pwa-install-title",
+                                                                tag: "h3",
+                                                                class: "text-base",
+                                                                get children () {
+                                                                    return texts().title;
+                                                                }
+                                                            }),
+                                                            (()=>{
+                                                                var _el$4 = _tmpl$2();
+                                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>texts().description);
+                                                                return _el$4;
+                                                            })()
+                                                        ];
+                                                    }
+                                                })
+                                            ];
+                                        }
+                                    }),
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__card_index_js_ff5173c9__["default"].Actions, {
+                                        class: "mt-4",
+                                        get children () {
+                                            return [
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_573defba__["default"], {
+                                                    variant: "primary",
+                                                    class: "flex-1",
+                                                    onClick: handleInstall,
+                                                    get children () {
+                                                        return texts().installButton;
+                                                    }
+                                                }),
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_573defba__["default"], {
+                                                    variant: "ghost",
+                                                    class: "flex-1",
+                                                    onClick: handleDismiss,
+                                                    get children () {
+                                                        return texts().notNowButton;
+                                                    }
+                                                })
+                                            ];
+                                        }
+                                    })
+                                ];
+                            }
+                        })
+                    ];
+                }
+            }));
+            return _el$;
+        }
+    });
+};
+export { PWAInstallPrompt };

package/dist/components/immersive-landing/index.d.ts

@@ -0,0 +1,7 @@
+export { default } from "./ImmersiveLanding";
+export { useImmersiveLanding } from "./useImmersiveLanding";
+export { ImmersiveLandingContext, useImmersiveLandingContext } from "./ImmersiveLandingContext";
+export { CookieConsent } from "./components/CookieConsent";
+export { PWAInstallPrompt } from "./components/PWAInstallPrompt";
+export { FirefoxPWABanner } from "./components/FirefoxPWABanner";
+export type { ImmersiveLandingProps, ImmersiveLandingPageProps, ImmersiveLandingArrowsProps, ImmersiveLandingNavigationProps, ImmersiveLandingContextValue, UseImmersiveLandingOptions, UseImmersiveLandingReturn, CookieConsentProps, CookieConsentTexts, CookieConsentStorageKeys, PWAInstallPromptProps, PWAInstallPromptTexts, FirefoxPWABannerProps, FirefoxPWABannerTexts, } from "./types";

package/dist/components/immersive-landing/index.js

@@ -0,0 +1,14 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_js_2b17ea6a__ from "./ImmersiveLanding.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useImmersiveLanding_js_66194376__ from "./useImmersiveLanding.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__ from "./ImmersiveLandingContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__components_CookieConsent_js_dd55e062__ from "./components/CookieConsent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__components_PWAInstallPrompt_js_a5e100bf__ from "./components/PWAInstallPrompt.js";
+import * as __WEBPACK_EXTERNAL_MODULE__components_FirefoxPWABanner_js_46fc5861__ from "./components/FirefoxPWABanner.js";
+var __webpack_exports__CookieConsent = __WEBPACK_EXTERNAL_MODULE__components_CookieConsent_js_dd55e062__.CookieConsent;
+var __webpack_exports__FirefoxPWABanner = __WEBPACK_EXTERNAL_MODULE__components_FirefoxPWABanner_js_46fc5861__.FirefoxPWABanner;
+var __webpack_exports__ImmersiveLandingContext = __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__.ImmersiveLandingContext;
+var __webpack_exports__PWAInstallPrompt = __WEBPACK_EXTERNAL_MODULE__components_PWAInstallPrompt_js_a5e100bf__.PWAInstallPrompt;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_js_2b17ea6a__["default"];
+var __webpack_exports__useImmersiveLanding = __WEBPACK_EXTERNAL_MODULE__useImmersiveLanding_js_66194376__.useImmersiveLanding;
+var __webpack_exports__useImmersiveLandingContext = __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__.useImmersiveLandingContext;
+export { __webpack_exports__CookieConsent as CookieConsent, __webpack_exports__FirefoxPWABanner as FirefoxPWABanner, __webpack_exports__ImmersiveLandingContext as ImmersiveLandingContext, __webpack_exports__PWAInstallPrompt as PWAInstallPrompt, __webpack_exports__default as default, __webpack_exports__useImmersiveLanding as useImmersiveLanding, __webpack_exports__useImmersiveLandingContext as useImmersiveLandingContext };

package/dist/components/immersive-landing/types.d.ts

@@ -0,0 +1,134 @@
+import type { JSX, Accessor } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export interface UseImmersiveLandingOptions {
+    pages: readonly string[];
+    initialPage?: string;
+    currentPage?: Accessor<string>;
+    transitionDuration?: number;
+    onNavigate?: (fromPage: string, toPage: string) => void;
+    onNavigationComplete?: (page: string) => void;
+    enableScrollNavigation?: boolean;
+}
+export interface UseImmersiveLandingReturn {
+    activePage: Accessor<string>;
+    isTransitioning: Accessor<boolean>;
+    navigateTo: (pageId: string) => void;
+    goNext: () => void;
+    goPrev: () => void;
+    currentIndex: Accessor<number>;
+    isFirstPage: Accessor<boolean>;
+    isLastPage: Accessor<boolean>;
+    direction: Accessor<"next" | "prev" | null>;
+    transitionDuration: number;
+}
+export interface ImmersiveLandingContextValue {
+    activePage: Accessor<string>;
+    navigateTo: (pageId: string) => void;
+    goNext: () => void;
+    goPrev: () => void;
+    currentIndex: Accessor<number>;
+    totalPages: number;
+    isFirstPage: Accessor<boolean>;
+    isLastPage: Accessor<boolean>;
+    direction: Accessor<"next" | "prev" | null>;
+    transitionDuration: number;
+    pages: readonly string[];
+    appVersion?: string;
+}
+export interface ImmersiveLandingProps extends IComponentBaseProps {
+    pages: readonly string[];
+    initialPage?: string;
+    currentPage?: Accessor<string>;
+    transitionDuration?: number;
+    onNavigate?: (fromPage: string, toPage: string) => void;
+    onNavigationComplete?: (page: string) => void;
+    enableScrollNavigation?: boolean;
+    showNavigation?: boolean;
+    showArrows?: boolean;
+    appVersion?: string;
+    overlay?: JSX.Element | ((context: ImmersiveLandingContextValue) => JSX.Element);
+    children: JSX.Element | ((context: ImmersiveLandingContextValue) => JSX.Element);
+    pwaConfig?: PWAInstallPromptProps;
+    cookieConfig?: CookieConsentProps;
+    firefoxPWAConfig?: FirefoxPWABannerProps;
+    showPWAPrompt?: boolean;
+    showCookieConsent?: boolean;
+    showFirefoxBanner?: boolean;
+}
+export interface ImmersiveLandingPageProps extends IComponentBaseProps {
+    id: string;
+    children: JSX.Element;
+}
+export interface ImmersiveLandingArrowsProps extends IComponentBaseProps {
+    onPrev: () => void;
+    onNext: () => void;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+}
+export interface ImmersiveLandingNavigationProps extends IComponentBaseProps {
+    pages: readonly string[];
+    currentPageIndex: number;
+    onPageDotClick: (pageId: string) => void;
+    onPrev: () => void;
+    onNext: () => void;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+}
+export type ConsentType = "all" | "essential" | "custom";
+export interface CookieConsentTexts {
+    message?: string;
+    acceptAll?: string;
+    decline?: string;
+    manage?: string;
+    manageTitle?: string;
+    essential?: string;
+    analytics?: string;
+    marketing: string;
+    cancel?: string;
+    save?: string;
+    closeLabel?: string;
+}
+export interface CookieConsentStorageKeys {
+    consentKey?: string;
+    analyticsKey?: string;
+    marketingKey?: string;
+}
+export interface CookieConsentProps {
+    texts?: CookieConsentTexts;
+    storageKeys?: CookieConsentStorageKeys;
+    onConsentChange?: (payload: {
+        type: ConsentType;
+        analytics: boolean;
+        marketing: boolean;
+    }) => void;
+}
+export type BrowserType = "firefox" | "safari" | "other" | "supported";
+export interface FirefoxPWABannerTexts {
+    title?: string;
+    description?: string;
+    installButton?: string;
+    dismissButton?: string;
+    closeLabel?: string;
+}
+export interface FirefoxPWABannerProps {
+    extensionUrl?: string;
+    storageKey?: string;
+    texts?: FirefoxPWABannerTexts;
+    onInstall?: () => void;
+    onDismiss?: () => void;
+}
+export interface PWAInstallPromptTexts {
+    title?: string;
+    description?: string;
+    installButton?: string;
+    notNowButton?: string;
+    closeLabel?: string;
+}
+export interface PWAInstallPromptProps {
+    appName?: string;
+    appIcon?: string;
+    storageKey?: string;
+    texts?: PWAInstallPromptTexts;
+    onInstall?: () => void;
+    onDismiss?: () => void;
+}

package/dist/components/immersive-landing/useImmersiveLanding.d.ts

@@ -0,0 +1,2 @@
+import type { UseImmersiveLandingOptions, UseImmersiveLandingReturn } from "./types";
+export declare function useImmersiveLanding(options: UseImmersiveLandingOptions): UseImmersiveLandingReturn;

package/dist/components/immersive-landing/useImmersiveLanding.js

@@ -0,0 +1,151 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+function useImmersiveLanding(options) {
+    const { pages, initialPage = pages[0], currentPage: controlledPage, transitionDuration = 400, onNavigate, onNavigationComplete, enableScrollNavigation = true } = options;
+    const isControlled = !!controlledPage;
+    const [internalPage, setInternalPage] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialPage);
+    const [isTransitioning, setIsTransitioning] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [direction, setDirection] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const activePage = isControlled ? controlledPage : internalPage;
+    const currentIndex = ()=>pages.indexOf(activePage());
+    const isFirstPage = ()=>0 === currentIndex();
+    const isLastPage = ()=>currentIndex() === pages.length - 1;
+    if (isControlled) {
+        let prevPage = controlledPage();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+            const next = controlledPage();
+            if (next !== prevPage && !isTransitioning()) {
+                const fromIndex = pages.indexOf(prevPage);
+                const toIndex = pages.indexOf(next);
+                if (toIndex >= 0) {
+                    setDirection(toIndex > fromIndex ? "next" : "prev");
+                    setIsTransitioning(true);
+                    setTimeout(()=>{
+                        setIsTransitioning(false);
+                        setDirection(null);
+                    }, transitionDuration);
+                }
+                prevPage = next;
+            }
+        });
+    }
+    const navigateToInternal = (pageId)=>{
+        if (isTransitioning() || !pages.includes(pageId)) return;
+        if (pageId === activePage()) return;
+        const fromPage = activePage();
+        const fromIndex = pages.indexOf(fromPage);
+        const toIndex = pages.indexOf(pageId);
+        setDirection(toIndex > fromIndex ? "next" : "prev");
+        setIsTransitioning(true);
+        if (!isControlled) setInternalPage(pageId);
+        if (onNavigate) onNavigate(fromPage, pageId);
+        setTimeout(()=>{
+            setIsTransitioning(false);
+            setDirection(null);
+            const pageElement = document.getElementById(pageId);
+            if (pageElement) pageElement.focus({
+                preventScroll: true
+            });
+            if (onNavigationComplete) onNavigationComplete(pageId);
+        }, transitionDuration);
+    };
+    const navigateTo = (pageId)=>navigateToInternal(pageId);
+    const goNext = ()=>{
+        const idx = currentIndex();
+        if (idx < pages.length - 1) navigateToInternal(pages[idx + 1]);
+    };
+    const goPrev = ()=>{
+        const idx = currentIndex();
+        if (idx > 0) navigateToInternal(pages[idx - 1]);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if ("undefined" == typeof window) return;
+        if (!enableScrollNavigation) return;
+        let scrollLocked = false;
+        const SCROLL_COOLDOWN = 1000;
+        let touchStartY = 0;
+        const handleWheel = (e)=>{
+            if (scrollLocked || isTransitioning()) return;
+            if (e.deltaY > 0) goNext();
+            else if (e.deltaY < 0) goPrev();
+            scrollLocked = true;
+            setTimeout(()=>{
+                scrollLocked = false;
+            }, SCROLL_COOLDOWN);
+        };
+        const handleTouchStart = (e)=>{
+            touchStartY = e.touches[0].clientY;
+        };
+        const handleTouchEnd = (e)=>{
+            if (scrollLocked || isTransitioning()) return;
+            const touchEndY = e.changedTouches[0].clientY;
+            const deltaY = touchStartY - touchEndY;
+            if (Math.abs(deltaY) < 50) return;
+            if (deltaY > 0) goNext();
+            else goPrev();
+            scrollLocked = true;
+            setTimeout(()=>{
+                scrollLocked = false;
+            }, SCROLL_COOLDOWN);
+        };
+        const handleKeyDown = (e)=>{
+            if (isTransitioning()) return;
+            const target = e.target;
+            if ("INPUT" === target.tagName || "TEXTAREA" === target.tagName || target.isContentEditable) return;
+            switch(e.key){
+                case "ArrowDown":
+                case "PageDown":
+                    e.preventDefault();
+                    goNext();
+                    break;
+                case "ArrowUp":
+                case "PageUp":
+                    e.preventDefault();
+                    goPrev();
+                    break;
+                case " ":
+                    if ("BUTTON" !== target.tagName && "A" !== target.tagName) {
+                        e.preventDefault();
+                        goNext();
+                    }
+                    break;
+                case "Home":
+                    e.preventDefault();
+                    navigateToInternal(pages[0]);
+                    break;
+                case "End":
+                    e.preventDefault();
+                    navigateToInternal(pages[pages.length - 1]);
+                    break;
+            }
+        };
+        window.addEventListener("wheel", handleWheel, {
+            passive: true
+        });
+        window.addEventListener("touchstart", handleTouchStart, {
+            passive: true
+        });
+        window.addEventListener("touchend", handleTouchEnd, {
+            passive: true
+        });
+        window.addEventListener("keydown", handleKeyDown);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            window.removeEventListener("wheel", handleWheel);
+            window.removeEventListener("touchstart", handleTouchStart);
+            window.removeEventListener("touchend", handleTouchEnd);
+            window.removeEventListener("keydown", handleKeyDown);
+        });
+    });
+    return {
+        activePage,
+        isTransitioning,
+        navigateTo,
+        goNext,
+        goPrev,
+        currentIndex,
+        isFirstPage,
+        isLastPage,
+        direction,
+        transitionDuration
+    };
+}
+export { useImmersiveLanding };

package/dist/components/indicator/Indicator.d.ts

@@ -1,3 +1,4 @@
+import "./indicator.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 type ElementType = keyof JSX.IntrinsicElements;

package/dist/components/indicator/Indicator.js

@@ -0,0 +1,76 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./indicator.css";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+const Indicator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "horizontal",
+        "vertical",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "as"
+    ]);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("indicator", local.class, local.className);
+    const Tag = local.as || "div";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: Tag
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const IndicatorItem = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "horizontal",
+        "vertical",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "as"
+    ]);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("indicator-item", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "indicator-start": "start" === local.horizontal,
+            "indicator-center": "center" === local.horizontal,
+            "indicator-end": "end" === local.horizontal,
+            "indicator-top": "top" === local.vertical,
+            "indicator-middle": "middle" === local.vertical,
+            "indicator-bottom": "bottom" === local.vertical
+        }));
+    const Tag = local.as || "span";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: Tag
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const indicator_Indicator = Object.assign(Indicator, {
+    Item: IndicatorItem
+});
+export { indicator_Indicator as default };

package/dist/components/indicator/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Indicator_js_454db259__ from "./Indicator.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Indicator_js_454db259__["default"];
+export { __webpack_exports__default as default };

package/dist/components/indicator/indicator.css

@@ -0,0 +1,70 @@
+@layer components {
+  .indicator {
+      position: relative;
+      display: inline-flex;
+      width: max-content;
+    }
+
+  .indicator :where(.indicator-item) {
+      z-index: 1;
+      position: absolute;
+      white-space: nowrap;
+      top: var(--indicator-t, 0);
+      bottom: var(--indicator-b, auto);
+      left: var(--indicator-s, auto);
+      right: var(--indicator-e, 0);
+      translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
+    }
+
+  .indicator-end {
+      --indicator-s: auto;
+      --indicator-e: 0;
+      --indicator-x: 50%;
+    }
+
+  [dir="rtl"] .indicator-end {
+      --indicator-s: 0;
+      --indicator-e: auto;
+      --indicator-x: -50%;
+    }
+
+  .indicator-start {
+      --indicator-s: 0;
+      --indicator-e: auto;
+      --indicator-x: -50%;
+    }
+
+  [dir="rtl"] .indicator-start {
+      --indicator-s: auto;
+      --indicator-e: 0;
+      --indicator-x: 50%;
+    }
+
+  .indicator-center {
+      --indicator-s: 50%;
+      --indicator-e: 50%;
+      --indicator-x: -50%;
+    }
+
+  [dir="rtl"] .indicator-center {
+      --indicator-x: 50%;
+    }
+
+  .indicator-bottom {
+      --indicator-t: auto;
+      --indicator-b: 0;
+      --indicator-y: 50%;
+    }
+
+  .indicator-middle {
+      --indicator-t: 50%;
+      --indicator-b: 50%;
+      --indicator-y: -50%;
+    }
+
+  .indicator-top {
+      --indicator-t: 0;
+      --indicator-b: auto;
+      --indicator-y: -50%;
+    }
+}