@xyd-js/components 0.0.0-build-87368f8-20251101145203 → 0.0.0-build-1760f84-20251129221538

package/dist/layouts.js.map

@@ -1 +1 @@
-{"version":3,"file":"layouts.js","sources":["../src/layouts/LayoutPrimary/LayoutPrimary.styles.tsx","../src/layouts/LayoutPrimary/LayoutPrimary.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\n// TODO: in the futre better media queries\nconst tabletBreakpoint = '1024px';\nconst mobileBreakpoint = '768px';\n\nexport const LayoutPrimaryHost = css`\n    @layer defaults {\n        width: 100%;\n        overflow-x: hidden;\n        background: var(--xyd-page-body-bgcolor);\n        display: contents;\n\n        > [part=\"header\"] {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            position: sticky;\n            top: 0;\n            right: var(--xyd-page-gutter);\n            left: var(--xyd-page-gutter);\n            height: var(--xyd-nav-height);\n            background: var(--xyd-layout-header-bgcolor);\n            z-index: 3;\n            flex-direction: column;\n\n            @media (max-width: ${mobileBreakpoint}) {\n                padding: 0;\n            }\n        }\n\n        &[data-hide-subheader=\"true\"] > [part=\"header\"] {\n            transform: translateY(calc(-1 * var(--xyd-nav-height)));\n        }\n        &[data-hide-subheader=\"true\"] > [part=\"header\"] > [part=\"header-content\"] {\n            visibility: hidden;\n        }\n\n        &[data-subheader=\"true\"] > [part=\"header\"] {\n            flex-direction: column;\n            height: var(--xyd-header-total-height);\n            transition: transform 200ms;\n        }\n\n        [part=\"header-content\"] {\n            display: flex;\n            align-items: center;\n            width: 100%;\n        }\n\n        [part=\"header-subheader\"] {\n            width: 100%;\n        }\n\n        [part=\"hamburger-button\"] {\n            display: none;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                width: 40px;\n                height: 40px;\n                border: none;\n                background: none;\n                cursor: pointer;\n                padding: 0;\n            }\n        }\n\n        [part=\"hamburger-icon\"] {\n            width: 24px;\n            height: 24px;\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        [part=\"hamburger-line\"] {\n            width: 100%;\n            height: 2px;\n            background: var(--xyd-page-body-color);\n            transition: transform 0.3s var(--xyd-cubic-bezier);\n\n            &[data-active=\"true\"] {\n                &:first-child {\n                    transform: translateY(11px) rotate(45deg);\n                }\n\n                &:nth-child(2) {\n                    opacity: 0;\n                }\n\n                &:last-child {\n                    transform: translateY(-11px) rotate(-45deg);\n                }\n            }\n        }\n\n        [part=\"main\"] {\n            position: relative;\n            display: flex;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            padding: var(--xyd-page-gutter);\n            overflow: visible;\n            min-height: calc(100vh - (var(--xyd-nav-height) + var(--xyd-banner-height)))\n        }\n\n        [part=\"sidebar\"] {\n            flex: none;\n            width: var(--xyd-sidebar-width);\n            background: var(--xyd-layout-sidebar-bgcolor);\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            height: 100%;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                display: none;\n            }\n        }\n\n        [part=\"mobile-sidebar\"] {\n            display: none;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                display: flex;\n                position: fixed;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                width: var(--xyd-sidebar-width--mobile);\n                background: var(--xyd-layout-sidebar-bgcolor);\n                flex-direction: column;\n                z-index: 50;\n                transform: translateX(-100%);\n                transition: transform .3s var(--xyd-cubic-bezier);\n                box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);\n            }\n\n            &[data-active=\"true\"] {\n                @media (max-width: ${tabletBreakpoint}) {\n                    transform: translateX(0);\n                }\n            }\n        }\n\n        [part=\"mobile-sidebar-aside\"] {\n            flex: 1;\n            overflow-y: auto;\n            -webkit-overflow-scrolling: touch;\n            height: 100%;\n        }\n\n        [part=\"mobile-sidebar-close-button\"] {\n            align-items: center;\n            background: none;\n            border: none;\n            cursor: pointer;\n            display: flex;\n            height: 32px;\n            justify-content: center;\n            padding: 0;\n            position: absolute;\n            right: -3px;\n            top: 0px;\n            width: 32px;\n            z-index: 10;\n        }\n\n        [part=\"mobile-sidebar-close-icon\"] {\n            width: 20px;\n            height: 20px;\n            position: relative;\n\n            &::before,\n            &::after {\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 0;\n                width: 100%;\n                height: 2px;\n                background: var(--xyd-page-body-color--secondary);\n                transform-origin: center;\n            }\n\n            &::before {\n                transform: rotate(45deg);\n            }\n\n            &::after {\n                transform: rotate(-45deg);\n            }\n        }\n\n        [part=\"mobile-overlay\"] {\n            display: none;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                display: block;\n                position: fixed;\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                background: rgba(0, 0, 0, 0.6);\n                transition: opacity .3s;\n                opacity: 0;\n                pointer-events: none;\n                z-index: 40;\n                height: 100vh;\n            }\n\n            &[data-active=\"true\"] {\n                opacity: 1;\n                pointer-events: auto;\n            }\n        }\n\n        [part=\"page\"] {\n            position: relative;\n            overflow: visible;\n            flex: 1;\n            background: var(--xyd-page-body-bgcolor);\n            min-width: 0;\n            height: 100%; \n        }\n\n        [part=\"page-scroll\"] {\n            overflow-y: visible;\n            height: 100%;\n            -webkit-overflow-scrolling: touch;\n            padding: 0 48px;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                padding: 0 32px;\n            }\n\n            @media (max-width: ${mobileBreakpoint}) {\n                padding: 0 24px;\n            }\n        }\n        &[data-layout=\"wide\"] [part=\"page-scroll\"] {\n            padding-top: 15px;\n        }\n\n        [part=\"page-container\"] {\n            max-width: var(--xyd-layout-width-medium);\n            margin: 0 auto;\n            padding: 0 var(--xyd-page-gutter);\n            height: 100%;\n        }\n\n        &[data-layout=\"wide\"] [part=\"page-container\"] {\n            max-width: var(--xyd-layout-width-large);\n        }\n\n        [part=\"page-article-container\"] {\n            display: flex;\n            gap: 48px;\n            padding: 48px 0;\n            min-height: 100%;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                gap: 32px;\n            }\n\n            @media (max-width: ${mobileBreakpoint}) {\n                flex-direction: column;\n                padding: 24px 0;\n                gap: 24px;\n            }\n\n        }\n\n        [part=\"page-article\"] {\n            flex: 1;\n            min-width: 0;\n        }\n\n        [part=\"page-article-content\"] {\n            width: 100%;\n        }\n\n        [part=\"page-article-nav\"] {\n            --page-article-nav-top: calc(var(--xyd-header-total-height) / 2);\n            display: flex;\n            flex: none;\n            flex-direction: column;\n            gap: 16px;\n            width: var(--xyd-layout-nav-width-medium);\n            position: sticky;\n            height: fit-content;\n            max-height: 100vh;\n            overflow-y: auto;\n            padding-right: 24px;\n            padding: var(--xyd-content-space) 0;\n            margin-top: var(--page-article-nav-top);\n            top: calc(var(--xyd-header-total-height) + var(--page-article-nav-top));\n            /* top: var(--xyd-header-total-height); */\n\n\n            @media (max-width: ${tabletBreakpoint}) {\n                width: var(--xyd-layout-nav-width-small);\n                padding-right: 16px;\n            }\n\n            @media (max-width: ${mobileBreakpoint}) {\n                display: none;\n            }\n        }\n    }\n\n    @layer defaultfix {\n        > [part=\"header\"]:has(xyd-banner) {\n            height: auto;\n        }\n    }\n`;\n\n","import * as React from 'react'\nimport { useContext, useEffect, useRef, useState } from \"react\"\n\nimport { PageLayout } from '@xyd-js/core';\n\nimport * as cn from \"./LayoutPrimary.styles\"\n\nexport interface LayoutPrimaryProps {\n    children: React.ReactNode;\n\n    subheader?: boolean;\n    className?: string;\n    layout?: PageLayout\n    scrollKey?: string\n    id?: string\n}\n\nconst LayoutPrimaryContext = React.createContext<{\n    scrollRef: React.RefObject<HTMLDivElement | Window | null>;\n    isMobileNavOpen: boolean;\n    setIsMobileNavOpen: (isOpen: boolean) => void;\n}>({\n    scrollRef: React.createRef(),\n    isMobileNavOpen: false,\n    setIsMobileNavOpen: () => { },\n})\n\n// TODO: move scroller to xyd-foo\nexport function LayoutPrimary(props: LayoutPrimaryProps) {\n    const scrollRef = useRef<HTMLDivElement | Window>(null)\n    const [isMobileNavOpen, setIsMobileNavOpen] = useState(false)\n    const { hideMainHeader } = useSubHeader(props.subheader ? scrollRef : null, props.scrollKey)\n\n    useEffect(() => {\n        scrollRef.current = window\n    }, [])\n\n    return <LayoutPrimaryContext value={{\n        scrollRef,\n        isMobileNavOpen,\n        setIsMobileNavOpen\n    }}\n    >\n        <xyd-layout-primary\n            className={`${cn.LayoutPrimaryHost} ${props.className || \"\"}`}\n            data-subheader={String(!!props.subheader)}\n            data-hide-subheader={String(hideMainHeader)}\n            data-layout={props.layout}\n            id={props.id}\n        >\n            {props.children}\n        </xyd-layout-primary>\n    </LayoutPrimaryContext>\n}\n\ninterface LayoutPrimaryHeaderProps {\n    header: React.ReactNode;\n\n    banner?: React.ReactNode;\n    subheader?: React.ReactNode;\n}\nLayoutPrimary.Header = function LayoutPrimaryHeader(props: LayoutPrimaryHeaderProps) {\n    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)\n\n    return <>\n        <header part=\"header\">\n            {props.banner}\n\n            <div part=\"header-content\">\n                {props.header}\n            </div>\n\n            {props.subheader && <div part=\"header-subheader\">\n                {props.subheader}\n            </div>}\n        </header>\n    </>\n}\n\nLayoutPrimary.Hamburger = function LayoutPrimaryHamburger() {\n    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)\n    return <button\n        part=\"hamburger-button\"\n        aria-label=\"Toggle navigation menu\"\n        onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}\n    >\n        <div part=\"hamburger-icon\">\n            <$HamburgerLine active={isMobileNavOpen} />\n            <$HamburgerLine active={isMobileNavOpen} />\n            <$HamburgerLine active={isMobileNavOpen} />\n        </div>\n    </button>\n}\n\ninterface LayoutPrimaryMobileAsideProps {\n    aside: React.ReactNode;\n}\nLayoutPrimary.MobileAside = function LayoutPrimaryAside(props: LayoutPrimaryMobileAsideProps) {\n    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)\n    return <>\n        <div\n            part=\"mobile-overlay\"\n            data-active={isMobileNavOpen}\n            onClick={() => setIsMobileNavOpen(false)}\n        />\n        <aside\n            part=\"mobile-sidebar\"\n            data-active={isMobileNavOpen}\n        >\n            <div part=\"mobile-sidebar-aside\">\n                {props.aside}\n            </div>\n            <div>\n                <button\n                    part=\"mobile-sidebar-close-button\"\n                    aria-label=\"Close navigation menu\"\n                    onClick={() => setIsMobileNavOpen(false)}\n                >\n                    <div part=\"mobile-sidebar-close-icon\" />\n                </button>\n            </div>\n        </aside>\n    </>\n}\n\ninterface LayoutPrimaryPageProps {\n    children: React.ReactNode;\n    contentNav?: React.ReactNode;\n    after?: React.ReactNode;\n}\nLayoutPrimary.Page = function LayoutPrimaryPage(props: LayoutPrimaryPageProps) {\n    return <>\n        <div part=\"page\">\n            <div part=\"page-scroll\">\n                <div part=\"page-container\">\n                    <div part=\"page-article-container\">\n\n                        <article part=\"page-article\">\n                            <section part=\"page-article-content\">\n                                {props.children}\n                            </section>\n                        </article>\n\n                        {\n                            props.contentNav && <nav part=\"page-article-nav\">\n                                {props.contentNav}\n                            </nav>\n                        }\n                    </div>\n                </div>\n            </div>\n            {props.after}\n        </div>\n    </>\n}\n\nfunction $HamburgerLine({ active }: { active: boolean }) {\n    return <span\n        part=\"hamburger-line\"\n        data-active={active}\n    />\n}\n\nconst SCROLL_DOWN_TRIGGER_THRESHOLD = 200;\nconst SCROLL_UP_TRIGGER_THRESHOLD = 100;\n\n// TODO: move to `xyd-foo` or somewhere else\n// TODO  better solution than `key`\nfunction useSubHeader(ref: React.RefObject<HTMLDivElement | Window | null> | null, key?: any) {\n    const [hideMainHeader, setHideMainHeader] = useState(false)\n    const [lastScrollTop, setLastScrollTop] = useState(0)\n    const [scrollDirection, setScrollDirection] = useState<'up' | 'down' | null>(null)\n    const [scrollThreshold, setScrollThreshold] = useState(0)\n    const [scrollStartPosition, setScrollStartPosition] = useState(0)\n    const [isScrolling, setIsScrolling] = useState(false)\n\n    function reset() {\n        setHideMainHeader(false)\n        setLastScrollTop(0)\n        setScrollDirection(null)\n        setScrollThreshold(0)\n        setScrollStartPosition(0)\n        setIsScrolling(false)\n    }\n\n    useEffect(() => {\n        reset()\n    }, [key])\n\n    function onScroll(e: Event) {\n        if (!(e.target instanceof HTMLElement)) {\n            return\n        }\n\n        const currentScrollTop = e.target.scrollTop\n\n        // Always show header when near the top of the page\n        if (currentScrollTop < SCROLL_UP_TRIGGER_THRESHOLD) {\n            setHideMainHeader(false)\n            setScrollThreshold(0)\n            setLastScrollTop(currentScrollTop)\n            setIsScrolling(false)\n            return\n        }\n\n        // Determine scroll direction\n        const direction = currentScrollTop > lastScrollTop ? 'down' : 'up'\n\n        // If direction changed, reset scroll tracking\n        if (direction !== scrollDirection) {\n            setScrollDirection(direction)\n            setScrollStartPosition(currentScrollTop)\n            setIsScrolling(true)\n        }\n\n        // Calculate total scroll distance from start position\n        const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPosition)\n\n        // Only trigger header changes if we've scrolled enough distance in the current direction\n        if (direction === 'down' && totalScrollDistance > SCROLL_DOWN_TRIGGER_THRESHOLD) {\n            // When scrolling down, hide header\n            setHideMainHeader(true)\n            setScrollThreshold(currentScrollTop)\n            // Reset scroll tracking after triggering\n            setScrollStartPosition(currentScrollTop)\n        } else if (direction === 'up' && totalScrollDistance > SCROLL_UP_TRIGGER_THRESHOLD) {\n            // When scrolling up, show header\n            setHideMainHeader(false)\n            setScrollThreshold(currentScrollTop)\n            // Reset scroll tracking after triggering\n            setScrollStartPosition(currentScrollTop)\n        }\n\n        setLastScrollTop(currentScrollTop)\n    }\n\n    useEffect(() => {\n        if (!ref?.current) {\n            return\n        }\n\n        ref.current.addEventListener(\"scroll\", onScroll)\n\n        return () => {\n            ref.current?.removeEventListener(\"scroll\", onScroll)\n        }\n    }, [ref, key, lastScrollTop, scrollDirection, scrollThreshold, scrollStartPosition]);\n\n    return {\n        hideMainHeader,\n    }\n}"],"names":["LayoutPrimaryContext","React","createContext","scrollRef","createRef","isMobileNavOpen","setIsMobileNavOpen","LayoutPrimary","props","useRef","_useState","useState","_useState2","_slicedToArray","_useSubHeader","ref","key","_useState3","_useState4","hideMainHeader","setHideMainHeader","_useState5","_useState6","lastScrollTop","setLastScrollTop","_useState7","_useState8","scrollDirection","setScrollDirection","_useState9","_useState0","scrollThreshold","setScrollThreshold","_useState1","_useState10","scrollStartPosition","setScrollStartPosition","_useState11","_useState12","setIsScrolling","reset","onScroll","e","target","HTMLElement","currentScrollTop","scrollTop","SCROLL_UP_TRIGGER_THRESHOLD","direction","totalScrollDistance","Math","abs","SCROLL_DOWN_TRIGGER_THRESHOLD","useEffect","current","addEventListener","_a","removeEventListener","useSubHeader","subheader","scrollKey","window","createElement","value","className","concat","String","layout","id","children","$HamburgerLine","_ref","active","part","Header","_useContext","useContext","Fragment","banner","header","Hamburger","_useContext2","onClick","MobileAside","_useContext3","aside","Page","contentNav","after"],"mappings":"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"}
+{"version":3,"file":"layouts.js","sources":["../src/layouts/LayoutPrimary/LayoutPrimary.styles.tsx","../src/layouts/LayoutPrimary/LayoutPrimary.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\n// TODO: in the futre better media queries\nconst tabletBreakpoint = '1024px';\nconst mobileBreakpoint = '768px';\n\nexport const LayoutPrimaryHost = css`\n    @layer defaults {\n        width: 100%;\n        overflow-x: hidden;\n        background: var(--xyd-page-body-bgcolor);\n        display: contents;\n\n        > [part=\"header\"] {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            position: sticky;\n            top: 0;\n            right: var(--xyd-page-gutter);\n            left: var(--xyd-page-gutter);\n            height: var(--xyd-nav-height);\n            background: var(--xyd-layout-header-bgcolor);\n            z-index: 3;\n            flex-direction: column;\n\n            @media (max-width: ${mobileBreakpoint}) {\n                padding: 0;\n            }\n        }\n\n        &[data-hide-subheader=\"true\"] > [part=\"header\"] {\n            transform: translateY(calc(-1 * var(--xyd-nav-height)));\n        }\n        &[data-hide-subheader=\"true\"] > [part=\"header\"] > [part=\"header-content\"] {\n            visibility: hidden;\n        }\n\n        &[data-subheader=\"true\"] > [part=\"header\"] {\n            flex-direction: column;\n            height: var(--xyd-header-total-height);\n            transition: transform 200ms;\n        }\n\n        [part=\"header-content\"] {\n            display: flex;\n            align-items: center;\n            width: 100%;\n        }\n\n        [part=\"header-subheader\"] {\n            width: 100%;\n        }\n\n        [part=\"hamburger-button\"] {\n            display: none;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                width: 40px;\n                height: 40px;\n                border: none;\n                background: none;\n                cursor: pointer;\n                padding: 0;\n            }\n        }\n\n        [part=\"hamburger-icon\"] {\n            width: 24px;\n            height: 24px;\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n\n        [part=\"hamburger-line\"] {\n            width: 100%;\n            height: 2px;\n            background: var(--xyd-page-body-color);\n            transition: transform 0.3s var(--xyd-cubic-bezier);\n\n            &[data-active=\"true\"] {\n                &:first-child {\n                    transform: translateY(11px) rotate(45deg);\n                }\n\n                &:nth-child(2) {\n                    opacity: 0;\n                }\n\n                &:last-child {\n                    transform: translateY(-11px) rotate(-45deg);\n                }\n            }\n        }\n\n        [part=\"main\"] {\n            position: relative;\n            display: flex;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            padding: var(--xyd-page-gutter);\n            overflow: visible;\n            min-height: calc(100vh - (var(--xyd-nav-height) + var(--xyd-banner-height)))\n        }\n\n        [part=\"sidebar\"] {\n            flex: none;\n            width: var(--xyd-sidebar-width);\n            background: var(--xyd-layout-sidebar-bgcolor);\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            height: 100%;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                display: none;\n            }\n        }\n\n        [part=\"mobile-sidebar\"] {\n            display: none;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                display: flex;\n                position: fixed;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                width: var(--xyd-sidebar-width--mobile);\n                background: var(--xyd-layout-sidebar-bgcolor);\n                flex-direction: column;\n                z-index: 50;\n                transform: translateX(-100%);\n                transition: transform .3s var(--xyd-cubic-bezier);\n                box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);\n            }\n\n            &[data-active=\"true\"] {\n                @media (max-width: ${tabletBreakpoint}) {\n                    transform: translateX(0);\n                }\n            }\n        }\n\n        [part=\"mobile-sidebar-aside\"] {\n            flex: 1;\n            overflow-y: auto;\n            -webkit-overflow-scrolling: touch;\n            height: 100%;\n        }\n\n        [part=\"mobile-sidebar-close-button\"] {\n            align-items: center;\n            background: none;\n            border: none;\n            cursor: pointer;\n            display: flex;\n            height: 32px;\n            justify-content: center;\n            padding: 0;\n            position: absolute;\n            right: -3px;\n            top: 0px;\n            width: 32px;\n            z-index: 10;\n        }\n\n        [part=\"mobile-sidebar-close-icon\"] {\n            width: 20px;\n            height: 20px;\n            position: relative;\n\n            &::before,\n            &::after {\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 0;\n                width: 100%;\n                height: 2px;\n                background: var(--xyd-page-body-color--secondary);\n                transform-origin: center;\n            }\n\n            &::before {\n                transform: rotate(45deg);\n            }\n\n            &::after {\n                transform: rotate(-45deg);\n            }\n        }\n\n        [part=\"mobile-overlay\"] {\n            display: none;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                display: block;\n                position: fixed;\n                top: 0;\n                right: 0;\n                bottom: 0;\n                left: 0;\n                background: rgba(0, 0, 0, 0.6);\n                transition: opacity .3s;\n                opacity: 0;\n                pointer-events: none;\n                z-index: 40;\n                height: 100vh;\n            }\n\n            &[data-active=\"true\"] {\n                opacity: 1;\n                pointer-events: auto;\n            }\n        }\n\n        [part=\"page\"] {\n            position: relative;\n            overflow: visible;\n            flex: 1;\n            background: var(--xyd-page-body-bgcolor);\n            min-width: 0;\n            height: 100%; \n        }\n\n        [part=\"page-scroll\"] {\n            overflow-y: visible;\n            height: 100%;\n            -webkit-overflow-scrolling: touch;\n            padding: 0 48px;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                padding: 0 32px;\n            }\n\n            @media (max-width: ${mobileBreakpoint}) {\n                padding: 0 24px;\n            }\n        }\n        &[data-layout=\"wide\"] [part=\"page-scroll\"] {\n            padding-top: 15px;\n        }\n\n        [part=\"page-container\"] {\n            max-width: var(--xyd-layout-width-medium);\n            margin: 0 auto;\n            padding: 0 var(--xyd-page-gutter);\n            height: 100%;\n        }\n\n        &[data-layout=\"wide\"] [part=\"page-container\"] {\n            max-width: var(--xyd-layout-width-large);\n        }\n\n        [part=\"page-article-container\"] {\n            display: flex;\n            gap: 48px;\n            padding: 48px 0;\n            min-height: 100%;\n\n            @media (max-width: ${tabletBreakpoint}) {\n                gap: 32px;\n            }\n\n            @media (max-width: ${mobileBreakpoint}) {\n                flex-direction: column;\n                padding: 24px 0;\n                gap: 24px;\n            }\n\n        }\n\n        [part=\"page-article\"] {\n            flex: 1;\n            min-width: 0;\n        }\n\n        [part=\"page-article-content\"] {\n            width: 100%;\n        }\n\n        [part=\"page-article-nav\"] {\n            --page-article-nav-top: calc(var(--xyd-header-total-height) / 2);\n            display: flex;\n            flex: none;\n            flex-direction: column;\n            gap: 16px;\n            width: var(--xyd-layout-nav-width-medium);\n            position: sticky;\n            height: fit-content;\n            max-height: 100vh;\n            overflow-y: auto;\n            padding-right: 24px;\n            padding: var(--xyd-content-space) 0;\n            margin-top: var(--page-article-nav-top);\n            top: calc(var(--xyd-header-total-height) + var(--page-article-nav-top));\n            /* top: var(--xyd-header-total-height); */\n\n\n            @media (max-width: ${tabletBreakpoint}) {\n                width: var(--xyd-layout-nav-width-small);\n                padding-right: 16px;\n            }\n\n            @media (max-width: ${mobileBreakpoint}) {\n                display: none;\n            }\n        }\n    }\n\n    @layer defaultfix {\n        > [part=\"header\"]:has(xyd-banner) {\n            height: auto;\n        }\n    }\n`;\n\n","import * as React from 'react'\nimport { useContext, useEffect, useRef, useState } from \"react\"\n\nimport { PageLayout } from '@xyd-js/core';\n\nimport * as cn from \"./LayoutPrimary.styles\"\n\nexport interface LayoutPrimaryProps {\n    children: React.ReactNode;\n\n    subheader?: boolean;\n    className?: string;\n    layout?: PageLayout\n    scrollKey?: string\n    id?: string\n}\n\nconst LayoutPrimaryContext = React.createContext<{\n    scrollRef: React.RefObject<HTMLDivElement | Window | null>;\n    isMobileNavOpen: boolean;\n    setIsMobileNavOpen: (isOpen: boolean) => void;\n}>({\n    scrollRef: React.createRef(),\n    isMobileNavOpen: false,\n    setIsMobileNavOpen: () => { },\n})\n\n// TODO: move scroller to xyd-foo\nexport function LayoutPrimary(props: LayoutPrimaryProps) {\n    const scrollRef = useRef<HTMLDivElement | Window>(null)\n    const [isMobileNavOpen, setIsMobileNavOpen] = useState(false)\n    const { hideMainHeader } = useSubHeader(props.subheader ? scrollRef : null, props.scrollKey)\n\n    useEffect(() => {\n        scrollRef.current = window\n    }, [])\n\n    return <LayoutPrimaryContext value={{\n        scrollRef,\n        isMobileNavOpen,\n        setIsMobileNavOpen\n    }}\n    >\n        <xyd-layout-primary\n            className={`${cn.LayoutPrimaryHost} ${props.className || \"\"}`}\n            data-subheader={String(!!props.subheader)}\n            data-hide-subheader={String(hideMainHeader)}\n            data-layout={props.layout}\n            id={props.id}\n        >\n            {props.children}\n        </xyd-layout-primary>\n    </LayoutPrimaryContext>\n}\n\ninterface LayoutPrimaryHeaderProps {\n    header: React.ReactNode;\n\n    banner?: React.ReactNode;\n    subheader?: React.ReactNode;\n}\nLayoutPrimary.Header = function LayoutPrimaryHeader(props: LayoutPrimaryHeaderProps) {\n    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)\n\n    return <>\n        <header part=\"header\">\n            {props.banner}\n\n            <div part=\"header-content\">\n                {props.header}\n            </div>\n\n            {props.subheader && <div part=\"header-subheader\">\n                {props.subheader}\n            </div>}\n        </header>\n    </>\n}\n\nLayoutPrimary.Hamburger = function LayoutPrimaryHamburger() {\n    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)\n    return <button\n        part=\"hamburger-button\"\n        aria-label=\"Toggle navigation menu\"\n        onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}\n    >\n        <div part=\"hamburger-icon\">\n            <$HamburgerLine active={isMobileNavOpen} />\n            <$HamburgerLine active={isMobileNavOpen} />\n            <$HamburgerLine active={isMobileNavOpen} />\n        </div>\n    </button>\n}\n\ninterface LayoutPrimaryMobileAsideProps {\n    aside: React.ReactNode;\n}\nLayoutPrimary.MobileAside = function LayoutPrimaryAside(props: LayoutPrimaryMobileAsideProps) {\n    const { isMobileNavOpen, setIsMobileNavOpen } = useContext(LayoutPrimaryContext)\n    return <>\n        <div\n            part=\"mobile-overlay\"\n            data-active={isMobileNavOpen}\n            onClick={() => setIsMobileNavOpen(false)}\n        />\n        <aside\n            part=\"mobile-sidebar\"\n            data-active={isMobileNavOpen}\n        >\n            <div part=\"mobile-sidebar-aside\">\n                {props.aside}\n            </div>\n            <div>\n                <button\n                    part=\"mobile-sidebar-close-button\"\n                    aria-label=\"Close navigation menu\"\n                    onClick={() => setIsMobileNavOpen(false)}\n                >\n                    <div part=\"mobile-sidebar-close-icon\" />\n                </button>\n            </div>\n        </aside>\n    </>\n}\n\ninterface LayoutPrimaryPageProps {\n    children: React.ReactNode;\n    contentNav?: React.ReactNode;\n    after?: React.ReactNode;\n}\nLayoutPrimary.Page = function LayoutPrimaryPage(props: LayoutPrimaryPageProps) {\n    return <>\n        <div part=\"page\">\n            <div part=\"page-scroll\">\n                <div part=\"page-container\">\n                    <div part=\"page-article-container\">\n\n                        <article part=\"page-article\">\n                            <section part=\"page-article-content\">\n                                {props.children}\n                            </section>\n                        </article>\n\n                        {\n                            props.contentNav && <nav part=\"page-article-nav\">\n                                {props.contentNav}\n                            </nav>\n                        }\n                    </div>\n                </div>\n            </div>\n            {props.after}\n        </div>\n    </>\n}\n\nfunction $HamburgerLine({ active }: { active: boolean }) {\n    return <span\n        part=\"hamburger-line\"\n        data-active={active}\n    />\n}\n\nconst SCROLL_DOWN_TRIGGER_THRESHOLD = 200;\nconst SCROLL_UP_TRIGGER_THRESHOLD = 100;\n\n// TODO: move to `xyd-foo` or somewhere else\n// TODO  better solution than `key`\nfunction useSubHeader(ref: React.RefObject<HTMLDivElement | Window | null> | null, key?: any) {\n    const [hideMainHeader, setHideMainHeader] = useState(false)\n    const [lastScrollTop, setLastScrollTop] = useState(0)\n    const [scrollDirection, setScrollDirection] = useState<'up' | 'down' | null>(null)\n    const [scrollThreshold, setScrollThreshold] = useState(0)\n    const [scrollStartPosition, setScrollStartPosition] = useState(0)\n    const [isScrolling, setIsScrolling] = useState(false)\n\n    function reset() {\n        setHideMainHeader(false)\n        setLastScrollTop(0)\n        setScrollDirection(null)\n        setScrollThreshold(0)\n        setScrollStartPosition(0)\n        setIsScrolling(false)\n    }\n\n    useEffect(() => {\n        reset()\n    }, [key])\n\n    function onScroll(e: Event) {\n        if (!(e.target instanceof HTMLElement)) {\n            return\n        }\n\n        const currentScrollTop = e.target.scrollTop\n\n        // Always show header when near the top of the page\n        if (currentScrollTop < SCROLL_UP_TRIGGER_THRESHOLD) {\n            setHideMainHeader(false)\n            setScrollThreshold(0)\n            setLastScrollTop(currentScrollTop)\n            setIsScrolling(false)\n            return\n        }\n\n        // Determine scroll direction\n        const direction = currentScrollTop > lastScrollTop ? 'down' : 'up'\n\n        // If direction changed, reset scroll tracking\n        if (direction !== scrollDirection) {\n            setScrollDirection(direction)\n            setScrollStartPosition(currentScrollTop)\n            setIsScrolling(true)\n        }\n\n        // Calculate total scroll distance from start position\n        const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPosition)\n\n        // Only trigger header changes if we've scrolled enough distance in the current direction\n        if (direction === 'down' && totalScrollDistance > SCROLL_DOWN_TRIGGER_THRESHOLD) {\n            // When scrolling down, hide header\n            setHideMainHeader(true)\n            setScrollThreshold(currentScrollTop)\n            // Reset scroll tracking after triggering\n            setScrollStartPosition(currentScrollTop)\n        } else if (direction === 'up' && totalScrollDistance > SCROLL_UP_TRIGGER_THRESHOLD) {\n            // When scrolling up, show header\n            setHideMainHeader(false)\n            setScrollThreshold(currentScrollTop)\n            // Reset scroll tracking after triggering\n            setScrollStartPosition(currentScrollTop)\n        }\n\n        setLastScrollTop(currentScrollTop)\n    }\n\n    useEffect(() => {\n        if (!ref?.current) {\n            return\n        }\n\n        ref.current.addEventListener(\"scroll\", onScroll)\n\n        return () => {\n            ref.current?.removeEventListener(\"scroll\", onScroll)\n        }\n    }, [ref, key, lastScrollTop, scrollDirection, scrollThreshold, scrollStartPosition]);\n\n    return {\n        hideMainHeader,\n    }\n}"],"names":["LayoutPrimaryContext","React","createContext","scrollRef","createRef","isMobileNavOpen","setIsMobileNavOpen","LayoutPrimary","props","useRef","useState","hideMainHeader","ref","key","setHideMainHeader","lastScrollTop","setLastScrollTop","scrollDirection","setScrollDirection","scrollThreshold","setScrollThreshold","scrollStartPosition","setScrollStartPosition","isScrolling","setIsScrolling","reset","onScroll","e","target","HTMLElement","currentScrollTop","scrollTop","SCROLL_UP_TRIGGER_THRESHOLD","direction","totalScrollDistance","Math","abs","SCROLL_DOWN_TRIGGER_THRESHOLD","useEffect","current","addEventListener","_a","removeEventListener","useSubHeader","subheader","scrollKey","window","createElement","value","className","String","layout","id","children","$HamburgerLine","active","part","Header","useContext","Fragment","banner","header","Hamburger","onClick","MobileAside","aside","Page","contentNav","after"],"mappings":"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"}

package/dist/pages.js

@@ -1,2 +1,2 @@
-export{P as PageBlogHome,b as PageFirstSlide,a as PageHome}from"./PageFirstSlide-04ZOtm1Q.js";import*as e from"react";import"./_rollupPluginBabelHelpers-DsquMTLQ.js";import"./VideoGuide-tuJ1s9Hq.js";import"./Icon-Dw8kuLfy.js";import"./Button-BHQFhDSv.js";import"./useUXEvents-DyuVrtlr.js";import"openux-js";import"./TabsAnalytics-DFKcGPXp.js";import"radix-ui";import"lucide-react";function o(){return e.createElement("div",{className:"pqkuduk"},"Blog Post")}export{o as PageBlogPost};
+export{P as PageBlogHome,b as PageFirstSlide,a as PageHome}from"./PageFirstSlide-DaJNENNq.js";import*as e from"react";import"./VideoGuide-CjFV2soM.js";import"./Icon-DAUxBCx7.js";import"./Button-D1sRSUU2.js";import"./useUXEvents-CVHyMwm7.js";import"openux-js";import"./TabsAnalytics-CunSa7pG.js";import"radix-ui";import"lucide-react";function t(){return e.createElement("div",{className:"pqkuduk"},"Blog Post")}export{t as PageBlogPost};
 //# sourceMappingURL=pages.js.map

package/dist/pages.js.map

@@ -1 +1 @@
-{"version":3,"file":"pages.js","sources":["../src/pages/PageBlogPost/PageBlogPost.tsx","../src/pages/PageBlogPost/PageBlogPost.styles.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as cn from \"./PageBlogPost.styles\"\n\nexport function PageBlogPost() {\n    return <div className={cn.PageBlogPost}>\n        Blog Post\n    </div>\n}","import { css } from \"@linaria/core\"\n\nexport const PageBlogPost = css`\n    `"],"names":["PageBlogPost","React","className"],"mappings":"sYAIgBA,IACZ,OAAOC,uBAAKC,UCHS,uBDMzB"}
+{"version":3,"file":"pages.js","sources":["../src/pages/PageBlogPost/PageBlogPost.tsx","../src/pages/PageBlogPost/PageBlogPost.styles.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as cn from \"./PageBlogPost.styles\"\n\nexport function PageBlogPost() {\n    return <div className={cn.PageBlogPost}>\n        Blog Post\n    </div>\n}","import { css } from \"@linaria/core\"\n\nexport const PageBlogPost = css`\n    `"],"names":["PageBlogPost","React","className"],"mappings":"sVAIgBA,IACZ,OAAOC,uBAAKC,UCHHF,uBDMb"}

package/dist/system.js

@@ -1,2 +1,2 @@
-import{a as e}from"./Icon-Dw8kuLfy.js";import*as t from"react";import n,{useEffect as r,useRef as a}from"react";import{B as o}from"./Button-BHQFhDSv.js";import{a as l}from"./_rollupPluginBabelHelpers-DsquMTLQ.js";function i(n){var r=n.title,a=n.toolGroups,o=e(n,["title","toolGroups"]);return t.createElement("details",Object.assign({className:"bigwo3e"},o),t.createElement("summary",null,t.createElement("span",{part:"icon"}),t.createElement("div",{part:"title"},r),t.createElement("div",{part:"compatibility"},a.map(function(e,n){return t.createElement("span",{part:"tools",key:n},e.map(function(e,n){var r;return t.createElement("span",{key:e.tool+(null!==(r=e.label)&&void 0!==r?r:"")+n,"data-tool":e.tool,"data-supported":!!e.supported||void 0},e.label?e.label:null)}))}))))}var c="f30yyk8";function d(e){var t,r,a,o;return"minimal"===e.kind?n.createElement(d.Minimal,Object.assign({},e)):n.createElement("footer",{className:c},n.createElement("div",{part:"container"},n.createElement("div",{part:"content"},e.logo&&n.createElement("div",{part:"first-column"},e.logo),(null===(t=e.links)||void 0===t?void 0:t.length)&&n.createElement("div",{part:"columns","data-cols":null===(r=e.links)||void 0===r?void 0:r.length},null===(a=e.links)||void 0===a?void 0:a.map(function(e,t){var r;return n.createElement("div",{part:"col",key:"".concat(e.header,"-").concat(t)},n.createElement("div",{part:"col-items"},n.createElement("p",null,e.header),null===(r=e.items)||void 0===r?void 0:r.map(function(e){return n.createElement("a",{key:"".concat(e.label,"-").concat(t),target:"_blank",href:e.href},e.label)})))})),n.createElement("div",{part:"social-links"},null===(o=e.socials)||void 0===o?void 0:o.map(function(e,t){return n.createElement("div",{key:"".concat(e.href,"-").concat(t)},n.createElement("a",{target:"_blank",href:e.href},e.logo))}))),e.footnote&&n.createElement("hr",null),n.createElement("div",{part:"footnote"},e.footnote)))}d.Minimal=function(e){var t,r,a,l;return n.createElement("footer",{className:c,"data-kind":"minimal"},n.createElement("div",{part:"container"},n.createElement("div",{part:"content"},(null===(t=e.links)||void 0===t?void 0:t.length)&&n.createElement("div",{part:"columns","data-cols":null===(r=e.links)||void 0===r?void 0:r.length},n.createElement("div",{part:"col"},n.createElement("div",{part:"col-items"},null===(a=e.links)||void 0===a?void 0:a.map(function(e,t){return n.createElement(o,{key:"".concat(e.label,"-").concat(t),kind:"tertiary",href:e.href},e.label)})))),n.createElement("div",{part:"social-links"},null===(l=e.socials)||void 0===l?void 0:l.map(function(e,t){return n.createElement(o,{key:"".concat(e.href,"-").concat(t),kind:"tertiary",href:e.href,icon:e.logo})})))))};function u(t){var o=t.shortcutKeys,i=void 0===o?["⌘","K"]:o,c=e(t,["shortcutKeys"]);return function(e,t){var n=a(t);r(function(){n.current=t},[t]),r(function(){if(!window.__UNSAFE_xyd_search_button_inited){var t=function(t){if(1!==e.length){if(2===e.length){var r=l(e,2),a=r[0],o=r[1],i=t.key.toLowerCase();("⌘"===a&&t.metaKey||"Ctrl"===a&&t.ctrlKey)&&i===o.toLowerCase()&&(t.preventDefault(),n.current())}}else t.key.toLowerCase()===e[0].toLowerCase()&&(t.preventDefault(),n.current())};return window.addEventListener("keydown",t,{capture:!0}),window.addEventListener("keyup",t,{capture:!0}),function(){window.removeEventListener("keydown",t,{capture:!0}),window.removeEventListener("keyup",t,{capture:!0})}}},[])}(i,function(){var e;return null===(e=c.onClick)||void 0===e?void 0:e.call(c)}),r(function(){return window.__UNSAFE_xyd_search_button_inited=!0,function(){window.__UNSAFE_xyd_search_button_inited=!1}},[]),n.createElement("xyd-search-button",{className:"s1f8k5y3","aria-label":"Search",onClick:c.onClick,"data-fullWidth":c.fullWidth},n.createElement("span",{part:"container"},n.createElement("svg",{width:20,height:20,part:"icon",viewBox:"0 0 20 20"},n.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"})),n.createElement("span",{part:"placeholder"},c.placeholder||"Search")),i.length>0&&n.createElement("span",{part:"keys"},i.map(function(e,t){return n.createElement("kbd",{key:"".concat(e,"-").concat(t),part:"key"},e)})))}export{i as Baseline,d as Footer,u as SearchButton};
+import{a as e}from"./Icon-DAUxBCx7.js";import*as t from"react";import n,{useEffect as r,useRef as a}from"react";import{B as l}from"./Button-D1sRSUU2.js";function o(n){var{title:r,toolGroups:a}=n,l=e(n,["title","toolGroups"]);return t.createElement("details",Object.assign({className:"bigwo3e"},l),t.createElement("summary",null,t.createElement("span",{part:"icon"}),t.createElement("div",{part:"title"},r),t.createElement("div",{part:"compatibility"},a.map((e,n)=>t.createElement("span",{part:"tools",key:n},e.map((e,n)=>{var r;return t.createElement("span",{key:e.tool+(null!==(r=e.label)&&void 0!==r?r:"")+n,"data-tool":e.tool,"data-supported":!!e.supported||void 0},e.label?e.label:null)}))))))}const i="f30yyk8";function c(e){var t,r,a,l;return"minimal"===e.kind?n.createElement(c.Minimal,Object.assign({},e)):n.createElement("footer",{className:i},n.createElement("div",{part:"container"},n.createElement("div",{part:"content"},e.logo&&n.createElement("div",{part:"first-column"},e.logo),(null===(t=e.links)||void 0===t?void 0:t.length)&&n.createElement("div",{part:"columns","data-cols":null===(r=e.links)||void 0===r?void 0:r.length},null===(a=e.links)||void 0===a?void 0:a.map((e,t)=>{var r;return n.createElement("div",{part:"col",key:`${e.header}-${t}`},n.createElement("div",{part:"col-items"},n.createElement("p",null,e.header),null===(r=e.items)||void 0===r?void 0:r.map(e=>n.createElement("a",{key:`${e.label}-${t}`,target:"_blank",href:e.href},e.label))))})),n.createElement("div",{part:"social-links"},null===(l=e.socials)||void 0===l?void 0:l.map((e,t)=>n.createElement("div",{key:`${e.href}-${t}`},n.createElement("a",{target:"_blank",href:e.href},e.logo))))),e.footnote&&n.createElement("hr",null),n.createElement("div",{part:"footnote"},e.footnote)))}c.Minimal=function(e){var t,r,a,o;return n.createElement("footer",{className:i,"data-kind":"minimal"},n.createElement("div",{part:"container"},n.createElement("div",{part:"content"},(null===(t=e.links)||void 0===t?void 0:t.length)&&n.createElement("div",{part:"columns","data-cols":null===(r=e.links)||void 0===r?void 0:r.length},n.createElement("div",{part:"col"},n.createElement("div",{part:"col-items"},null===(a=e.links)||void 0===a?void 0:a.map((e,t)=>n.createElement(l,{key:`${e.label}-${t}`,kind:"tertiary",href:e.href},e.label))))),n.createElement("div",{part:"social-links"},null===(o=e.socials)||void 0===o?void 0:o.map((e,t)=>n.createElement(l,{key:`${e.href}-${t}`,kind:"tertiary",href:e.href,icon:e.logo}))))))};function d(t){var{shortcutKeys:l=["⌘","K"]}=t,o=e(t,["shortcutKeys"]);return function(e,t){const n=a(t);r(()=>{n.current=t},[t]),r(()=>{if(window.__UNSAFE_xyd_search_button_inited)return;const t=t=>{if(1!==e.length){if(2===e.length){const[r,a]=e,l=t.key.toLowerCase();("⌘"===r&&t.metaKey||"Ctrl"===r&&t.ctrlKey)&&l===a.toLowerCase()&&(t.preventDefault(),n.current())}}else t.key.toLowerCase()===e[0].toLowerCase()&&(t.preventDefault(),n.current())};return window.addEventListener("keydown",t,{capture:!0}),window.addEventListener("keyup",t,{capture:!0}),()=>{window.removeEventListener("keydown",t,{capture:!0}),window.removeEventListener("keyup",t,{capture:!0})}},[])}(l,()=>{var e;return null===(e=o.onClick)||void 0===e?void 0:e.call(o)}),r(()=>(window.__UNSAFE_xyd_search_button_inited=!0,()=>{window.__UNSAFE_xyd_search_button_inited=!1}),[]),n.createElement("xyd-search-button",{className:"s1f8k5y3","aria-label":"Search",onClick:o.onClick,"data-fullWidth":o.fullWidth},n.createElement("span",{part:"container"},n.createElement("svg",{width:20,height:20,part:"icon",viewBox:"0 0 20 20"},n.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"})),n.createElement("span",{part:"placeholder"},o.placeholder||"Search")),l.length>0&&n.createElement("span",{part:"keys"},l.map((e,t)=>n.createElement("kbd",{key:`${e}-${t}`,part:"key"},e))))}export{o as Baseline,c as Footer,d as SearchButton};
 //# sourceMappingURL=system.js.map

package/dist/system.js.map

@@ -1 +1 @@
-{"version":3,"file":"system.js","sources":["../src/system/Baseline/Baseline.tsx","../src/system/Baseline/Baseline.styles.tsx","../src/system/Footer/Footer.styles.tsx","../src/system/Footer/Footer.tsx","../src/system/SearchButton/SearchButton.tsx","../src/system/SearchButton/SearchButton.styles.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as cn from './Baseline.styles';\n\nexport interface BaselineTool {\n    tool: 'bun' | 'node' | 'npm' | 'pnpm' | string\n    supported: boolean;\n    label?: React.ReactNode;\n}\n\nexport interface BaselineProps extends React.HTMLAttributes<HTMLDetailsElement> {\n    title: string;\n    toolGroups: BaselineTool[][];\n}\n\nexport function Baseline({ title, toolGroups, ...props }: BaselineProps) {\n    return (\n        <details className={cn.BaselineHost} {...props}>\n            <summary>\n                <span part=\"icon\" />\n                <div part=\"title\">{title}</div>\n                <div part=\"compatibility\">\n                    {toolGroups.map((group, i) => (\n                        <span part=\"tools\" key={i}>\n                            {group.map((tool, j) => (\n                                <span\n                                    key={tool.tool + (tool.label ?? '') + j}\n                                    data-tool={tool.tool}\n                                    data-supported={tool.supported ? true : undefined}\n                                >\n                                    {tool.label ? tool.label : null}\n                                </span>\n                            ))}\n                        </span>\n                    ))}\n                </div>\n            </summary>\n        </details>\n    );\n}","\nimport { css } from \"@linaria/core\";\n\nimport checkUrl from \"./check.svg\"\nimport bunUrl from \"./bun.svg\"\nimport logoUrl from \"./logo.svg\"\nimport pnpmUrl from \"./pnpm.svg\"\nimport nodeUrl from \"./node.svg\"\nimport npmUrl from \"./npm.svg\"\n\nexport const BaselineHost = css`\n    --baseline-logo-bun: url(${bunUrl});\n    --baseline-logo-node: url(${nodeUrl});\n    --baseline-logo-npm: url(${npmUrl});\n\n    --baseline-high-bg: #e6f4ea;\n    --baseline-high-engine-bg: #ceead6;\n    --baseline-high-img: url(${logoUrl});\n    --baseline-high-check: #099949;\n\n    --baseline-bg: var(--baseline-high-bg);\n    --baseline-engine-bg: var(--baseline-high-engine-bg);\n    --baseline-img: var(--baseline-high-img);\n    --baseline-check: var(--baseline-high-check);\n\n    --baseline-cross: var(--baseline-limited-cross);\n    --feedback-link-icon: var(--icon-primary);\n    background: var(--baseline-bg);\n    border-radius: .25rem;\n    margin: 1rem 0;\n    padding-left: 3.8125rem;\n\n    summary {\n        --chevron-size: 0.6875rem;\n        --chevron-padding-left: 0.75rem;\n        --chevron-padding-right: 1.25rem;\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        flex-wrap: wrap;\n        gap: .5rem;\n        justify-content: space-between;\n        padding: 1rem 0;\n        padding-right: calc(var(--chevron-padding-left) + var(--chevron-size) + var(--chevron-padding-right));\n        position: relative;\n    }\n\n    [part=\"icon\"] {\n        --width: 2.3125rem;\n        background-image: var(--baseline-img);\n        background-position: 50%;\n        background-repeat: no-repeat;\n        background-size: contain;\n        display: block;\n        height: 2.25rem;\n        left: calc(-.5rem - var(--width));\n        position: absolute;\n        top: 1rem;\n        width: var(--width);\n    }\n\n    [part=\"title\"] {\n        font-size: 1rem;\n        font-weight: 600;\n        letter-spacing: 0;\n        line-height: 1.5;\n        margin: 0;\n        padding: .375rem 0;\n    }\n\n    [part=\"compatibility\"] {\n        display: flex;\n        flex-wrap: wrap;\n        gap: .5rem;\n    }\n\n    [part=\"tools\"] {\n        background: var(--baseline-engine-bg);\n        border-radius: 2rem;\n        display: flex;\n        flex-wrap: wrap;\n        gap: .5rem;\n        padding: .5rem .625rem;\n\n        [data-tool] {\n            display: flex;\n            --baseline-tool-image: none;\n        }\n        [data-tool=\"bun\"] {\n            --baseline-tool-image: var(--baseline-logo-bun);\n        }\n        [data-tool=\"node\"] {\n            --baseline-tool-image: var(--baseline-logo-node);\n        }\n        [data-tool=\"npm\"] {\n            --baseline-tool-image: var(--baseline-logo-npm);\n        }\n        [data-tool=\"pnpm\"] {\n            --baseline-tool-image: url(${pnpmUrl});\n        }\n\n        [data-tool]::before {\n            background-repeat: no-repeat;\n            background-size: contain;\n            content: \"\";\n            display: block;\n            height: 1.25rem;\n            width: 1.25rem;\n            background-image: var(--baseline-tool-image);\n        }\n\n        [data-tool]::after {\n            background-color: var(--baseline-check);\n            mask-image: url(${checkUrl});\n            -webkit-mask-image: url(${checkUrl});\n\n            content: \"\";\n            display: block;\n            height: 1.25rem;\n            -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n            -webkit-mask-size: contain;\n            mask-size: contain;\n            width: 1rem;\n        }\n    }\n\n`;","import { css } from \"@linaria/core\";\n\nexport const Footer = css`\n  --footer-anchor-color: var(--dark48);\n  --footer-anchor-color--secondary: var(--dark32);\n  --footer-anchor-color--hover: var(--xyd-anchor-color--hover);\n  /* transform: translateY(-100%); */\n\n  border-top: 1px solid var(--footer-anchor-color--secondary);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n\n  p {\n    color: var(--text-primary);\n    font-weight: bold;\n  }\n  hr {\n    background: var(--footer-anchor-color--secondary);\n    width: 100%;\n    height: 1px;\n  }\n\n  a {\n    color: var(--footer-anchor-color);\n    font-weight: var(--xyd-font-weight-medium);\n\n    &:hover {\n        color: var(--footer-anchor-color--hover);\n    }\n  }\n\n  [part=\"container\"] {\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    gap: 24px;\n    justify-content: space-between;\n    max-width: 1050px;\n    width: 100%;\n\n    padding: 100px 25px\n  }\n  &[data-kind=\"minimal\"] [part=\"container\"] {\n    max-width: 100%;\n    padding: 20px;\n  }\n\n  [part=\"content\"] {\n    display: flex;\n    flex-direction: row;\n    gap: 32px;\n    justify-content: space-between;\n    width: 100%;\n\n    @media (max-width: 768px) {\n        flex-direction: column;\n        gap: 24px;\n    }\n  }\n\n  [part=\"first-column\"] {\n    display: flex;\n    height: 24px;\n\n    img, svg {\n      height: 28px;\n      width: auto;\n    }\n\n    @media (min-width: 1024px) {\n        min-width: 140px;\n    }\n\n    @media (max-width: 768px) {\n        align-self: flex-start;\n    }\n  }\n\n  [part=\"columns\"] {\n    display: grid;\n    gap: 32px;\n    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));\n    flex: 1 1 0%;\n\n    @media (max-width: 768px) {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 24px;\n        width: 100%;\n    }\n\n    @media (max-width: 680px) {\n        grid-template-columns: repeat(1, minmax(0, 1fr));\n        gap: 20px;\n    }\n\n    &[data-cols=\"1\"] {\n        grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n\n    &[data-cols=\"2\"] {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        \n        @media (max-width: 680px) {\n            grid-template-columns: repeat(1, minmax(0, 1fr));\n        }\n    }\n\n    &[data-cols=\"3\"] {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        \n        @media (max-width: 768px) {\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n        \n        @media (max-width: 680px) {\n            grid-template-columns: repeat(1, minmax(0, 1fr));\n        }\n    }\n\n    &[data-cols=\"4\"] {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        \n        @media (max-width: 768px) {\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n        \n        @media (max-width: 680px) {\n            grid-template-columns: repeat(1, minmax(0, 1fr));\n        }\n    }\n\n    &[data-cols=\"5\"] {\n        grid-template-columns: repeat(5, minmax(0, 1fr));\n        \n        @media (max-width: 768px) {\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n        \n        @media (max-width: 680px) {\n            grid-template-columns: repeat(1, minmax(0, 1fr));\n        }\n    }\n  }\n  &[data-kind=\"minimal\"] [part=\"columns\"] {\n    display: flex;\n  }\n\n  [part=\"col\"] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    white-space: nowrap;\n    gap: 16px;\n\n    @media (max-width: 768px) {\n        align-items: flex-start;\n        white-space: normal;\n    }\n  }\n\n  [part=\"col-items\"] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    align-items: flex-start;\n\n    @media (max-width: 768px) {\n        align-items: flex-start;\n    }\n  }\n  &[data-kind=\"minimal\"] [part=\"col-items\"] {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  [part=\"social-links\"] {\n    display: flex;\n    gap: 16px;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    max-width: 492px;\n    min-width: 140px;\n\n    @media (max-width: 768px) {\n        justify-content: flex-start;\n        max-width: 100%;\n        min-width: auto;\n    }\n\n    svg {\n        width: 24px;\n        height: 24px;\n\n        color: var(--footer-anchor-color);\n        fill: var(--footer-anchor-color);\n\n        &:hover {\n            color: var(--footer-anchor-color--hover);\n            fill: var(--footer-anchor-color--hover);\n        }\n    }\n  }\n\n  [part=\"footnote\"] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    @media (max-width: 768px) {\n        flex-direction: column;\n        gap: 16px;\n        align-items: flex-start;\n    }\n  }\n`;","import React from \"react\";\n\nimport { Button } from \"../../writer/Button\"\nimport * as cn from \"./Footer.styles\";\n\nexport interface FooterLinkItemsProps {\n    label: string;\n    href: string;\n}\n\nexport interface FooterProps {\n    footnote: React.ReactNode;\n\n    kind?: \"minimal\"\n\n    logo?: React.ReactNode;\n\n    socials?: {\n        logo: React.ReactNode;\n        href: string\n    }[]\n\n    links?: {\n        header: string;\n        items?: FooterLinkItemsProps[]\n    }[] | FooterLinkItemsProps[]\n}\n\nexport function Footer(props: FooterProps) {\n    if (props.kind === \"minimal\") {\n        return <Footer.Minimal {...props} />\n    }\n\n    return <footer className={cn.Footer}>\n        <div part=\"container\">\n            <div part=\"content\">\n                {\n                    props.logo && <div part=\"first-column\">\n                        {props.logo}\n                    </div>\n                }\n\n                {props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n                    {props.links?.map((link, index) => (\n                        <div part=\"col\" key={`${link.header}-${index}`}>\n                            <div part=\"col-items\">\n                                <p>{link.header}</p>\n                                {link.items?.map((item) => (\n                                    <a key={`${item.label}-${index}`} target=\"_blank\" href={item.href}>{item.label}</a>\n                                ))}\n                            </div>\n                        </div>\n                    ))}\n                </div>}\n\n\n                <div part=\"social-links\">\n                    {props.socials?.map((social, index) => (\n                        <div key={`${social.href}-${index}`}>\n                            <a target=\"_blank\" href={social.href}>{social.logo}</a>\n                        </div>\n                    ))}\n                </div>\n            </div>\n\n            {props.footnote && <hr />}\n\n            <div part=\"footnote\">\n                {props.footnote}\n            </div>\n        </div>\n    </footer>\n}\n\nFooter.Minimal = function MinimalFooter(props: FooterProps) {\n    return <footer className={cn.Footer} data-kind=\"minimal\">\n        <div part=\"container\">\n            <div part=\"content\">\n                {\n                    props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n                        <div part=\"col\">\n                            <div part=\"col-items\">\n                                {props.links?.map((item, index) => (\n                                    <Button\n                                        key={`${item.label}-${index}`} kind=\"tertiary\" href={item.href}>\n                                        {item.label}\n                                    </Button>\n                                ))}\n                            </div>\n                        </div>\n                    </div>\n                }\n\n                <div part=\"social-links\">\n                    {props.socials?.map((social, index) => (\n                        <Button\n                            key={`${social.href}-${index}`}\n                            kind=\"tertiary\"\n                            href={social.href}\n                            icon={social.logo}\n                        />\n                    ))}\n                </div>\n            </div>\n        </div>\n    </footer>\n}","import React, { useEffect, useRef } from 'react';\n\nimport * as cn from \"./SearchButton.styles\";\n\ninterface SearchButtonProps {\n  onClick?: () => void;\n  placeholder?: string;\n  shortcutKeys?: string[];\n  fullWidth?: boolean;\n}\n\nexport function SearchButton({\n  shortcutKeys = ['⌘', 'K'],\n  ...props\n}: SearchButtonProps) {\n  useShortcuts(shortcutKeys, () => props.onClick?.());\n\n  useEffect(() => {\n    // @ts-ignore - !!! FIX IN THE FUTURE !!! its a fix for loading virtual-component:Search twice? original and from plugin - check if exists on prod\n    window.__UNSAFE_xyd_search_button_inited = true\n\n    return () => {\n      // @ts-ignore\n      window.__UNSAFE_xyd_search_button_inited = false\n    }\n  }, [])\n\n  return (\n    <xyd-search-button\n      className={cn.SearchButton}\n      aria-label=\"Search\"\n      onClick={props.onClick}\n      data-fullWidth={props.fullWidth}\n    >\n      <span part=\"container\">\n        <svg\n          width={20}\n          height={20}\n          part=\"icon\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path\n            d=\"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z\"\n            stroke=\"currentColor\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        <span part=\"placeholder\">{props.placeholder || \"Search\"}</span>\n      </span>\n\n      {\n        shortcutKeys.length > 0 && (\n          <span part=\"keys\">\n            {shortcutKeys.map((key, index) => (\n              <kbd key={`${key}-${index}`} part=\"key\">{key}</kbd>\n            ))}\n          </span>\n        )\n      }\n    </xyd-search-button>\n  )\n}\n\nfunction useShortcuts(shortcutKeys: string[], onTrigger: () => void): void {\n  // Keep latest handler reference to avoid stale closures\n  const savedHandler = useRef(onTrigger);\n\n  useEffect(() => {\n    savedHandler.current = onTrigger;\n  }, [onTrigger]);\n\n  useEffect(() => {\n    // @ts-ignore\n    if (window.__UNSAFE_xyd_search_button_inited) {\n      return\n    }\n\n    const listener = (event: KeyboardEvent) => {\n      // For single key shortcuts\n      if (shortcutKeys.length === 1) {\n        if (event.key.toLowerCase() === shortcutKeys[0].toLowerCase()) {\n          event.preventDefault();\n\n          savedHandler.current();\n        }\n        return;\n      }\n\n      // For modifier combinations\n      if (shortcutKeys.length === 2) {\n        const [modifier, key] = shortcutKeys;\n        const pressedKey = event.key.toLowerCase();\n\n        const isModifierMatch =\n          (modifier === '⌘' && event.metaKey) ||\n          (modifier === 'Ctrl' && event.ctrlKey);\n\n        if (isModifierMatch && pressedKey === key.toLowerCase()) {\n          event.preventDefault();\n\n          savedHandler.current();\n        }\n      }\n    };\n\n    // Use capture phase and listen to both keydown and keyup\n    window.addEventListener('keydown', listener, { capture: true });\n    window.addEventListener('keyup', listener, { capture: true });\n\n    return () => {\n      window.removeEventListener('keydown', listener, { capture: true });\n      window.removeEventListener('keyup', listener, { capture: true });\n    };\n  }, []);\n}","import { css } from \"@linaria/core\";\n\nexport const SearchButton = css`\n    @layer defaults {\n        background-color: transparent;\n        border-radius: var(--xyd-border-radius-large);\n        border: 1px solid var(--dark32);\n        color: var(--text-primary);\n        background: var(--dark16);\n        font-size: var(--xyd-font-size-small);\n        font-weight: var(--xyd-font-weight-semibold);\n        height: 36px;\n        justify-content: space-between;\n        display: flex;\n        align-items: center;\n        flex: 1;\n\n        padding: 0 8px;\n        margin: 12px 0 0;\n        user-select: none;\n        width: 100%;\n        transition: border-color .15s ease;\n\n        max-width: var(--xyd-search-width, 300px);\n        margin: 0;\n\n        cursor: pointer;\n\n        &[data-fullWidth] {\n            max-width: 100%;\n        }\n\n        &:hover {\n            background: var(--dark16);\n            box-shadow: none;\n            color: var(--dark48);\n            outline: none;\n\n            box-shadow: none;\n            border-color: var(--dark48);\n        }\n        \n        [part=\"container\"] {\n            align-items: center;\n            display: flex;\n            gap: var(--xyd-padding-small);\n        }\n\n        [part=\"placeholder\"] {\n            display: block !important;\n            font-size: var(--xyd-font-size-small);\n            color: var(--dark48);\n            font-weight: var(--xyd-font-weight-normal);\n        }\n\n        [part=\"icon\"] {\n            stroke-width: 1.4;\n            color: var(--dark48) !important;\n            height: 15px;\n            transition: color .15s var(--cubic-enter);\n        }\n        \n\n        [part=\"keys\"] {\n            display: flex;\n            gap: 4px;\n            min-width: auto;\n        }\n\n        [part=\"key\"] {\n            align-items: center;\n            background: var(--dark16);\n            border-radius: var(--xyd-border-radius-small);\n            box-shadow: none;\n            color: var(--dark48);\n            display: flex;\n            height: 18px;\n            line-height: 18px;\n            justify-content: center;\n            font-size: 12px;\n            letter-spacing: 1px;\n            position: relative;\n            padding: 0;\n            margin: 0;\n            border: 0px;\n            top: 0;\n            width: 20px;\n        }\n    }\n`\n"],"names":["Baseline","_a","title","toolGroups","props","__rest","React","className","createElement","part","map","group","i","key","tool","j","label","supported","undefined","Footer","kind","Minimal","Object","assign","cn","logo","links","length","_b","_c","link","index","concat","header","items","item","target","href","_d","socials","social","footnote","Button","icon","SearchButton","_a$shortcutKeys","shortcutKeys","onTrigger","savedHandler","useRef","useEffect","current","window","__UNSAFE_xyd_search_button_inited","listener","event","_shortcutKeys","_slicedToArray","modifier","pressedKey","toLowerCase","metaKey","ctrlKey","preventDefault","addEventListener","capture","removeEventListener","useShortcuts","onClick","call","fullWidth","width","height","viewBox","d","stroke","fill","fillRule","strokeLinecap","strokeLinejoin","placeholder"],"mappings":"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"}
+{"version":3,"file":"system.js","sources":["../src/system/Baseline/Baseline.tsx","../src/system/Baseline/Baseline.styles.tsx","../src/system/Footer/Footer.styles.tsx","../src/system/Footer/Footer.tsx","../src/system/SearchButton/SearchButton.tsx","../src/system/SearchButton/SearchButton.styles.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as cn from './Baseline.styles';\n\nexport interface BaselineTool {\n    tool: 'bun' | 'node' | 'npm' | 'pnpm' | string\n    supported: boolean;\n    label?: React.ReactNode;\n}\n\nexport interface BaselineProps extends React.HTMLAttributes<HTMLDetailsElement> {\n    title: string;\n    toolGroups: BaselineTool[][];\n}\n\nexport function Baseline({ title, toolGroups, ...props }: BaselineProps) {\n    return (\n        <details className={cn.BaselineHost} {...props}>\n            <summary>\n                <span part=\"icon\" />\n                <div part=\"title\">{title}</div>\n                <div part=\"compatibility\">\n                    {toolGroups.map((group, i) => (\n                        <span part=\"tools\" key={i}>\n                            {group.map((tool, j) => (\n                                <span\n                                    key={tool.tool + (tool.label ?? '') + j}\n                                    data-tool={tool.tool}\n                                    data-supported={tool.supported ? true : undefined}\n                                >\n                                    {tool.label ? tool.label : null}\n                                </span>\n                            ))}\n                        </span>\n                    ))}\n                </div>\n            </summary>\n        </details>\n    );\n}","\nimport { css } from \"@linaria/core\";\n\nimport checkUrl from \"./check.svg\"\nimport bunUrl from \"./bun.svg\"\nimport logoUrl from \"./logo.svg\"\nimport pnpmUrl from \"./pnpm.svg\"\nimport nodeUrl from \"./node.svg\"\nimport npmUrl from \"./npm.svg\"\n\nexport const BaselineHost = css`\n    --baseline-logo-bun: url(${bunUrl});\n    --baseline-logo-node: url(${nodeUrl});\n    --baseline-logo-npm: url(${npmUrl});\n\n    --baseline-high-bg: #e6f4ea;\n    --baseline-high-engine-bg: #ceead6;\n    --baseline-high-img: url(${logoUrl});\n    --baseline-high-check: #099949;\n\n    --baseline-bg: var(--baseline-high-bg);\n    --baseline-engine-bg: var(--baseline-high-engine-bg);\n    --baseline-img: var(--baseline-high-img);\n    --baseline-check: var(--baseline-high-check);\n\n    --baseline-cross: var(--baseline-limited-cross);\n    --feedback-link-icon: var(--icon-primary);\n    background: var(--baseline-bg);\n    border-radius: .25rem;\n    margin: 1rem 0;\n    padding-left: 3.8125rem;\n\n    summary {\n        --chevron-size: 0.6875rem;\n        --chevron-padding-left: 0.75rem;\n        --chevron-padding-right: 1.25rem;\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        flex-wrap: wrap;\n        gap: .5rem;\n        justify-content: space-between;\n        padding: 1rem 0;\n        padding-right: calc(var(--chevron-padding-left) + var(--chevron-size) + var(--chevron-padding-right));\n        position: relative;\n    }\n\n    [part=\"icon\"] {\n        --width: 2.3125rem;\n        background-image: var(--baseline-img);\n        background-position: 50%;\n        background-repeat: no-repeat;\n        background-size: contain;\n        display: block;\n        height: 2.25rem;\n        left: calc(-.5rem - var(--width));\n        position: absolute;\n        top: 1rem;\n        width: var(--width);\n    }\n\n    [part=\"title\"] {\n        font-size: 1rem;\n        font-weight: 600;\n        letter-spacing: 0;\n        line-height: 1.5;\n        margin: 0;\n        padding: .375rem 0;\n    }\n\n    [part=\"compatibility\"] {\n        display: flex;\n        flex-wrap: wrap;\n        gap: .5rem;\n    }\n\n    [part=\"tools\"] {\n        background: var(--baseline-engine-bg);\n        border-radius: 2rem;\n        display: flex;\n        flex-wrap: wrap;\n        gap: .5rem;\n        padding: .5rem .625rem;\n\n        [data-tool] {\n            display: flex;\n            --baseline-tool-image: none;\n        }\n        [data-tool=\"bun\"] {\n            --baseline-tool-image: var(--baseline-logo-bun);\n        }\n        [data-tool=\"node\"] {\n            --baseline-tool-image: var(--baseline-logo-node);\n        }\n        [data-tool=\"npm\"] {\n            --baseline-tool-image: var(--baseline-logo-npm);\n        }\n        [data-tool=\"pnpm\"] {\n            --baseline-tool-image: url(${pnpmUrl});\n        }\n\n        [data-tool]::before {\n            background-repeat: no-repeat;\n            background-size: contain;\n            content: \"\";\n            display: block;\n            height: 1.25rem;\n            width: 1.25rem;\n            background-image: var(--baseline-tool-image);\n        }\n\n        [data-tool]::after {\n            background-color: var(--baseline-check);\n            mask-image: url(${checkUrl});\n            -webkit-mask-image: url(${checkUrl});\n\n            content: \"\";\n            display: block;\n            height: 1.25rem;\n            -webkit-mask-repeat: no-repeat;\n            mask-repeat: no-repeat;\n            -webkit-mask-size: contain;\n            mask-size: contain;\n            width: 1rem;\n        }\n    }\n\n`;","import { css } from \"@linaria/core\";\n\nexport const Footer = css`\n  --footer-anchor-color: var(--dark48);\n  --footer-anchor-color--secondary: var(--dark32);\n  --footer-anchor-color--hover: var(--xyd-anchor-color--hover);\n  /* transform: translateY(-100%); */\n\n  border-top: 1px solid var(--footer-anchor-color--secondary);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n\n  p {\n    color: var(--text-primary);\n    font-weight: bold;\n  }\n  hr {\n    background: var(--footer-anchor-color--secondary);\n    width: 100%;\n    height: 1px;\n  }\n\n  a {\n    color: var(--footer-anchor-color);\n    font-weight: var(--xyd-font-weight-medium);\n\n    &:hover {\n        color: var(--footer-anchor-color--hover);\n    }\n  }\n\n  [part=\"container\"] {\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    gap: 24px;\n    justify-content: space-between;\n    max-width: 1050px;\n    width: 100%;\n\n    padding: 100px 25px\n  }\n  &[data-kind=\"minimal\"] [part=\"container\"] {\n    max-width: 100%;\n    padding: 20px;\n  }\n\n  [part=\"content\"] {\n    display: flex;\n    flex-direction: row;\n    gap: 32px;\n    justify-content: space-between;\n    width: 100%;\n\n    @media (max-width: 768px) {\n        flex-direction: column;\n        gap: 24px;\n    }\n  }\n\n  [part=\"first-column\"] {\n    display: flex;\n    height: 24px;\n\n    img, svg {\n      height: 28px;\n      width: auto;\n    }\n\n    @media (min-width: 1024px) {\n        min-width: 140px;\n    }\n\n    @media (max-width: 768px) {\n        align-self: flex-start;\n    }\n  }\n\n  [part=\"columns\"] {\n    display: grid;\n    gap: 32px;\n    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));\n    flex: 1 1 0%;\n\n    @media (max-width: 768px) {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 24px;\n        width: 100%;\n    }\n\n    @media (max-width: 680px) {\n        grid-template-columns: repeat(1, minmax(0, 1fr));\n        gap: 20px;\n    }\n\n    &[data-cols=\"1\"] {\n        grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n\n    &[data-cols=\"2\"] {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        \n        @media (max-width: 680px) {\n            grid-template-columns: repeat(1, minmax(0, 1fr));\n        }\n    }\n\n    &[data-cols=\"3\"] {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        \n        @media (max-width: 768px) {\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n        \n        @media (max-width: 680px) {\n            grid-template-columns: repeat(1, minmax(0, 1fr));\n        }\n    }\n\n    &[data-cols=\"4\"] {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        \n        @media (max-width: 768px) {\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n        \n        @media (max-width: 680px) {\n            grid-template-columns: repeat(1, minmax(0, 1fr));\n        }\n    }\n\n    &[data-cols=\"5\"] {\n        grid-template-columns: repeat(5, minmax(0, 1fr));\n        \n        @media (max-width: 768px) {\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n        \n        @media (max-width: 680px) {\n            grid-template-columns: repeat(1, minmax(0, 1fr));\n        }\n    }\n  }\n  &[data-kind=\"minimal\"] [part=\"columns\"] {\n    display: flex;\n  }\n\n  [part=\"col\"] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    white-space: nowrap;\n    gap: 16px;\n\n    @media (max-width: 768px) {\n        align-items: flex-start;\n        white-space: normal;\n    }\n  }\n\n  [part=\"col-items\"] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    align-items: flex-start;\n\n    @media (max-width: 768px) {\n        align-items: flex-start;\n    }\n  }\n  &[data-kind=\"minimal\"] [part=\"col-items\"] {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  [part=\"social-links\"] {\n    display: flex;\n    gap: 16px;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    max-width: 492px;\n    min-width: 140px;\n\n    @media (max-width: 768px) {\n        justify-content: flex-start;\n        max-width: 100%;\n        min-width: auto;\n    }\n\n    svg {\n        width: 24px;\n        height: 24px;\n\n        color: var(--footer-anchor-color);\n        fill: var(--footer-anchor-color);\n\n        &:hover {\n            color: var(--footer-anchor-color--hover);\n            fill: var(--footer-anchor-color--hover);\n        }\n    }\n  }\n\n  [part=\"footnote\"] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    @media (max-width: 768px) {\n        flex-direction: column;\n        gap: 16px;\n        align-items: flex-start;\n    }\n  }\n`;","import React from \"react\";\n\nimport { Button } from \"../../writer/Button\"\nimport * as cn from \"./Footer.styles\";\n\nexport interface FooterLinkItemsProps {\n    label: string;\n    href: string;\n}\n\nexport interface FooterProps {\n    footnote: React.ReactNode;\n\n    kind?: \"minimal\"\n\n    logo?: React.ReactNode;\n\n    socials?: {\n        logo: React.ReactNode;\n        href: string\n    }[]\n\n    links?: {\n        header: string;\n        items?: FooterLinkItemsProps[]\n    }[] | FooterLinkItemsProps[]\n}\n\nexport function Footer(props: FooterProps) {\n    if (props.kind === \"minimal\") {\n        return <Footer.Minimal {...props} />\n    }\n\n    return <footer className={cn.Footer}>\n        <div part=\"container\">\n            <div part=\"content\">\n                {\n                    props.logo && <div part=\"first-column\">\n                        {props.logo}\n                    </div>\n                }\n\n                {props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n                    {props.links?.map((link, index) => (\n                        <div part=\"col\" key={`${link.header}-${index}`}>\n                            <div part=\"col-items\">\n                                <p>{link.header}</p>\n                                {link.items?.map((item) => (\n                                    <a key={`${item.label}-${index}`} target=\"_blank\" href={item.href}>{item.label}</a>\n                                ))}\n                            </div>\n                        </div>\n                    ))}\n                </div>}\n\n\n                <div part=\"social-links\">\n                    {props.socials?.map((social, index) => (\n                        <div key={`${social.href}-${index}`}>\n                            <a target=\"_blank\" href={social.href}>{social.logo}</a>\n                        </div>\n                    ))}\n                </div>\n            </div>\n\n            {props.footnote && <hr />}\n\n            <div part=\"footnote\">\n                {props.footnote}\n            </div>\n        </div>\n    </footer>\n}\n\nFooter.Minimal = function MinimalFooter(props: FooterProps) {\n    return <footer className={cn.Footer} data-kind=\"minimal\">\n        <div part=\"container\">\n            <div part=\"content\">\n                {\n                    props.links?.length && <div part=\"columns\" data-cols={props.links?.length}>\n                        <div part=\"col\">\n                            <div part=\"col-items\">\n                                {props.links?.map((item, index) => (\n                                    <Button\n                                        key={`${item.label}-${index}`} kind=\"tertiary\" href={item.href}>\n                                        {item.label}\n                                    </Button>\n                                ))}\n                            </div>\n                        </div>\n                    </div>\n                }\n\n                <div part=\"social-links\">\n                    {props.socials?.map((social, index) => (\n                        <Button\n                            key={`${social.href}-${index}`}\n                            kind=\"tertiary\"\n                            href={social.href}\n                            icon={social.logo}\n                        />\n                    ))}\n                </div>\n            </div>\n        </div>\n    </footer>\n}","import React, { useEffect, useRef } from 'react';\n\nimport * as cn from \"./SearchButton.styles\";\n\ninterface SearchButtonProps {\n  onClick?: () => void;\n  placeholder?: string;\n  shortcutKeys?: string[];\n  fullWidth?: boolean;\n}\n\nexport function SearchButton({\n  shortcutKeys = ['⌘', 'K'],\n  ...props\n}: SearchButtonProps) {\n  useShortcuts(shortcutKeys, () => props.onClick?.());\n\n  useEffect(() => {\n    // @ts-ignore - !!! FIX IN THE FUTURE !!! its a fix for loading virtual-component:Search twice? original and from plugin - check if exists on prod\n    window.__UNSAFE_xyd_search_button_inited = true\n\n    return () => {\n      // @ts-ignore\n      window.__UNSAFE_xyd_search_button_inited = false\n    }\n  }, [])\n\n  return (\n    <xyd-search-button\n      className={cn.SearchButton}\n      aria-label=\"Search\"\n      onClick={props.onClick}\n      data-fullWidth={props.fullWidth}\n    >\n      <span part=\"container\">\n        <svg\n          width={20}\n          height={20}\n          part=\"icon\"\n          viewBox=\"0 0 20 20\"\n        >\n          <path\n            d=\"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z\"\n            stroke=\"currentColor\"\n            fill=\"none\"\n            fillRule=\"evenodd\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        <span part=\"placeholder\">{props.placeholder || \"Search\"}</span>\n      </span>\n\n      {\n        shortcutKeys.length > 0 && (\n          <span part=\"keys\">\n            {shortcutKeys.map((key, index) => (\n              <kbd key={`${key}-${index}`} part=\"key\">{key}</kbd>\n            ))}\n          </span>\n        )\n      }\n    </xyd-search-button>\n  )\n}\n\nfunction useShortcuts(shortcutKeys: string[], onTrigger: () => void): void {\n  // Keep latest handler reference to avoid stale closures\n  const savedHandler = useRef(onTrigger);\n\n  useEffect(() => {\n    savedHandler.current = onTrigger;\n  }, [onTrigger]);\n\n  useEffect(() => {\n    // @ts-ignore\n    if (window.__UNSAFE_xyd_search_button_inited) {\n      return\n    }\n\n    const listener = (event: KeyboardEvent) => {\n      // For single key shortcuts\n      if (shortcutKeys.length === 1) {\n        if (event.key.toLowerCase() === shortcutKeys[0].toLowerCase()) {\n          event.preventDefault();\n\n          savedHandler.current();\n        }\n        return;\n      }\n\n      // For modifier combinations\n      if (shortcutKeys.length === 2) {\n        const [modifier, key] = shortcutKeys;\n        const pressedKey = event.key.toLowerCase();\n\n        const isModifierMatch =\n          (modifier === '⌘' && event.metaKey) ||\n          (modifier === 'Ctrl' && event.ctrlKey);\n\n        if (isModifierMatch && pressedKey === key.toLowerCase()) {\n          event.preventDefault();\n\n          savedHandler.current();\n        }\n      }\n    };\n\n    // Use capture phase and listen to both keydown and keyup\n    window.addEventListener('keydown', listener, { capture: true });\n    window.addEventListener('keyup', listener, { capture: true });\n\n    return () => {\n      window.removeEventListener('keydown', listener, { capture: true });\n      window.removeEventListener('keyup', listener, { capture: true });\n    };\n  }, []);\n}","import { css } from \"@linaria/core\";\n\nexport const SearchButton = css`\n    @layer defaults {\n        background-color: transparent;\n        border-radius: var(--xyd-border-radius-large);\n        border: 1px solid var(--dark32);\n        color: var(--text-primary);\n        background: var(--dark16);\n        font-size: var(--xyd-font-size-small);\n        font-weight: var(--xyd-font-weight-semibold);\n        height: 36px;\n        justify-content: space-between;\n        display: flex;\n        align-items: center;\n        flex: 1;\n\n        padding: 0 8px;\n        margin: 12px 0 0;\n        user-select: none;\n        width: 100%;\n        transition: border-color .15s ease;\n\n        max-width: var(--xyd-search-width, 300px);\n        margin: 0;\n\n        cursor: pointer;\n\n        &[data-fullWidth] {\n            max-width: 100%;\n        }\n\n        &:hover {\n            background: var(--dark16);\n            box-shadow: none;\n            color: var(--dark48);\n            outline: none;\n\n            box-shadow: none;\n            border-color: var(--dark48);\n        }\n        \n        [part=\"container\"] {\n            align-items: center;\n            display: flex;\n            gap: var(--xyd-padding-small);\n        }\n\n        [part=\"placeholder\"] {\n            display: block !important;\n            font-size: var(--xyd-font-size-small);\n            color: var(--dark48);\n            font-weight: var(--xyd-font-weight-normal);\n        }\n\n        [part=\"icon\"] {\n            stroke-width: 1.4;\n            color: var(--dark48) !important;\n            height: 15px;\n            transition: color .15s var(--cubic-enter);\n        }\n        \n\n        [part=\"keys\"] {\n            display: flex;\n            gap: 4px;\n            min-width: auto;\n        }\n\n        [part=\"key\"] {\n            align-items: center;\n            background: var(--dark16);\n            border-radius: var(--xyd-border-radius-small);\n            box-shadow: none;\n            color: var(--dark48);\n            display: flex;\n            height: 18px;\n            line-height: 18px;\n            justify-content: center;\n            font-size: 12px;\n            letter-spacing: 1px;\n            position: relative;\n            padding: 0;\n            margin: 0;\n            border: 0px;\n            top: 0;\n            width: 20px;\n        }\n    }\n`\n"],"names":["Baseline","_a","title","toolGroups","props","__rest","React","className","BaselineHost","createElement","part","map","group","i","key","tool","j","label","supported","undefined","Footer","kind","Minimal","Object","assign","cn","logo","links","length","_b","_c","link","index","header","items","item","target","href","_d","socials","social","footnote","Button","icon","SearchButton","shortcutKeys","onTrigger","savedHandler","useRef","useEffect","current","window","__UNSAFE_xyd_search_button_inited","listener","event","modifier","pressedKey","toLowerCase","metaKey","ctrlKey","preventDefault","addEventListener","capture","removeEventListener","useShortcuts","onClick","call","fullWidth","width","height","viewBox","d","stroke","fill","fillRule","strokeLinecap","strokeLinejoin","placeholder"],"mappings":"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"}

package/dist/useUXClick-w9Bk-N_Y.js

@@ -0,0 +1,2 @@
+import{useState as t}from"react";function o(o,n,r){const[c,s]=t(!1);return t=>{const e=!c;s(e);const u=r();e?o(u):n(u)}}export{o as u};
+//# sourceMappingURL=useUXClick-w9Bk-N_Y.js.map

package/dist/{useUXClick-CXf2Q9Ik.js.map → useUXClick-w9Bk-N_Y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useUXClick-CXf2Q9Ik.js","sources":["../src/uxsdk/useUXClick.ts"],"sourcesContent":["import React, {useState} from \"react\";\n\nexport function useUXClick(\n    openEvent: (data: any) => void,\n    closeEvent: (data: any) => void,\n    getData: () => any\n) {\n    const [open, setOpen] = useState(false);\n\n    return (event: React.MouseEvent) => {\n        const newOpen = !open;\n        setOpen(newOpen);\n\n        const data = getData();\n        if (newOpen) {\n            openEvent(data);\n        } else {\n            closeEvent(data);\n        }\n    };\n}\n"],"names":["useUXClick","openEvent","closeEvent","getData","_useState","useState","_useState2","_slicedToArray","open","setOpen","event","newOpen","data"],"mappings":"sGAEgBA,EACZC,EACAC,EACAC,GAEA,IAAAC,EAAwBC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAhCI,EAAIF,EAAA,GAAEG,EAAOH,EAAA,GAEpB,OAAO,SAACI,GACJ,IAAMC,GAAWH,EACjBC,EAAQE,GAER,IAAMC,EAAOT,IACTQ,EACAV,EAAUW,GAEVV,EAAWU,EAEnB,CACJ"}
+{"version":3,"file":"useUXClick-w9Bk-N_Y.js","sources":["../src/uxsdk/useUXClick.ts"],"sourcesContent":["import React, {useState} from \"react\";\n\nexport function useUXClick(\n    openEvent: (data: any) => void,\n    closeEvent: (data: any) => void,\n    getData: () => any\n) {\n    const [open, setOpen] = useState(false);\n\n    return (event: React.MouseEvent) => {\n        const newOpen = !open;\n        setOpen(newOpen);\n\n        const data = getData();\n        if (newOpen) {\n            openEvent(data);\n        } else {\n            closeEvent(data);\n        }\n    };\n}\n"],"names":["useUXClick","openEvent","closeEvent","getData","open","setOpen","useState","event","newOpen","data"],"mappings":"0CAEgBA,EACZC,EACAC,EACAC,GAEA,MAAOC,EAAMC,GAAWC,GAAS,GAEjC,OAAQC,IACJ,MAAMC,GAAWJ,EACjBC,EAAQG,GAER,MAAMC,EAAON,IACTK,EACAP,EAAUQ,GAEVP,EAAWO,GAGvB"}

package/dist/useUXEvents-CVHyMwm7.js

@@ -0,0 +1,2 @@
+import{defineEvents as e}from"openux-js";const a="components.tabs.change",s=e(({CodeSample:e,Framework:a})=>({docs:{code:{example_change:({example:e})=>Object.assign(Object.assign({},c({Framework:a})),{example:e}),tab_change:({tab:s})=>Object.assign(Object.assign({},o({CodeSample:e,Framework:a})),{tab:s}),copy:({code:s})=>Object.assign(Object.assign({},o({CodeSample:e,Framework:a})),{code:(s||"").slice(0,100)+"..."}),scroll_100:()=>Object.assign({},o({CodeSample:e,Framework:a})),scroll_depth:({depth:s})=>Object.assign(Object.assign({},o({CodeSample:e,Framework:a})),{depth:s})},details:{open:({label:e})=>Object.assign(Object.assign({},c({Framework:a})),{label:e}),close:({label:e})=>Object.assign(Object.assign({},c({Framework:a})),{label:e})},anchor:{click:({id:e})=>Object.assign(Object.assign({},c({Framework:a})),{id:e})}}}));function o({CodeSample:e,Framework:a}){return Object.assign(Object.assign({},c({Framework:a})),{tab:null==e?void 0:e.tab,example:null==e?void 0:e.example})}function c({Framework:e}){return{location:null==e?void 0:e.location}}export{a as E,s as u};
+//# sourceMappingURL=useUXEvents-CVHyMwm7.js.map

package/dist/{useUXEvents-DyuVrtlr.js.map → useUXEvents-CVHyMwm7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useUXEvents-DyuVrtlr.js","sources":["../src/uxsdk/const.ts","../src/uxsdk/useUXEvents.ts"],"sourcesContent":["export const EVENT_COMPONENT_TAB_CHANGE = \"components.tabs.change\"\n","import {defineEvents} from 'openux-js'\n\ninterface NodeCodeSample {\n    tab?: string\n    example?: string\n    code?: string\n}\n\ninterface NodeFramework {\n    location: string\n    uniformRegion?: string\n}\n\ninterface AnalyticsNodes {\n    CodeSample: NodeCodeSample\n    Framework: NodeFramework\n}\n\n// TODO: in the future + maybe better API\n// TODO: how to share nodes between packages\n// TODO: node abstraction?\n// TODO: merge abstraction?\nexport const useUXEvents = defineEvents(({CodeSample, Framework}: AnalyticsNodes) => ({\n    docs: {\n        code: {\n            example_change({example}: { example: string }) {\n                return {\n                    ...commonFrameworkProps({Framework}),\n                    example: example,\n                }\n            },\n            tab_change({tab}: { tab: string }) {\n                return {\n                    ...commonCodeSampleProps({CodeSample, Framework}),\n                    tab: tab,\n                }\n            },\n            copy({code}: { code: string }) {\n                return {\n                    ...commonCodeSampleProps({CodeSample, Framework}),\n                    code: (code || \"\").slice(0, 100) + \"...\",\n                }\n            },\n            scroll_100() {\n                return {\n                    ...commonCodeSampleProps({CodeSample, Framework}),\n                }\n            },\n            scroll_depth({depth}: { depth: number }) {\n                return {\n                    ...commonCodeSampleProps({CodeSample, Framework}),\n                    depth,\n                }\n            },\n        },\n\n        details: {\n            open({label}: { label: string }) {\n                return {\n                    ...commonFrameworkProps({Framework}),\n                    label: label,\n                }\n            },\n            close({label}: { label: string }) {\n                return {\n                    ...commonFrameworkProps({Framework}),\n                    label: label,\n                }\n            }\n        },\n\n        anchor: {\n            click({id}: { id: string }) {\n                return {\n                    ...commonFrameworkProps({Framework}),\n                    id: id,\n                }\n            }\n        }\n    }\n}))\n\nfunction commonCodeSampleProps({\n                                   CodeSample,\n                                   Framework\n                               }: {\n    CodeSample: NodeCodeSample | undefined\n    Framework: NodeFramework | undefined\n}) {\n    return {\n        ...commonFrameworkProps({Framework}),\n        tab: CodeSample?.tab!,\n        example: CodeSample?.example!,\n    }\n}\n\nfunction commonFrameworkProps({\n                                  Framework\n                              }: {\n    Framework: NodeFramework | undefined\n}) {\n    return {\n        location: Framework?.location!,\n    }\n}\n"],"names":["EVENT_COMPONENT_TAB_CHANGE","useUXEvents","defineEvents","_ref","CodeSample","Framework","docs","code","example_change","_ref2","example","Object","assign","commonFrameworkProps","tab_change","_ref3","tab","commonCodeSampleProps","copy","_ref4","slice","scroll_100","scroll_depth","_ref5","depth","details","open","_ref6","label","close","_ref7","anchor","click","_ref8","id","_ref9","_ref0","location"],"mappings":"yCAAO,IAAMA,EAA6B,yBCsB7BC,EAAcC,EAAa,SAAAC,GAAA,IAAEC,EAAUD,EAAVC,WAAYC,EAASF,EAATE,UAAS,MAAuB,CAClFC,KAAM,CACFC,KAAM,CACFC,eAAc,SAAAC,GAA+B,IAA7BC,EAAOD,EAAPC,QACZ,OAAAC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCK,QAASA,GAEjB,EACAI,WAAU,SAAAC,GAAuB,IAArBC,EAAGD,EAAHC,IACR,OAAAL,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDW,IAAKA,GAEb,EACAE,KAAI,SAAAC,GAAyB,IAAvBZ,EAAIY,EAAJZ,KACF,OAAAI,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDE,MAAOA,GAAQ,IAAIa,MAAM,EAAG,KAAO,OAE3C,EACAC,WAAU,WACN,OAAAV,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,IAE9C,EACAiB,aAAY,SAAAC,GAA2B,IAAzBC,EAAKD,EAALC,MACV,OAAAb,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOK,EAAsB,CAACb,WAAAA,EAAYC,UAAAA,KAAW,CACjDmB,MAAAA,GAER,GAGJC,QAAS,CACLC,KAAI,SAAAC,GAA2B,IAAzBC,EAAKD,EAALC,MACF,OAAAjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCuB,MAAOA,GAEf,EACAC,MAAK,SAAAC,GAA2B,IAAzBF,EAAKE,EAALF,MACH,OAAAjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCuB,MAAOA,GAEf,GAGJG,OAAQ,CACJC,MAAK,SAAAC,GAAqB,IAAnBC,EAAED,EAAFC,GACH,OAAAvB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpC6B,GAAIA,GAEZ,IAGX,GAED,SAASjB,EAAqBkB,GAM7B,IALkC/B,EAAU+B,EAAV/B,WACAC,EAAS8B,EAAT9B,UAK/B,OAAAM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACR,UAAAA,KAAW,CACpCW,IAAKZ,aAAU,EAAVA,EAAYY,IACjBN,QAASN,aAAU,EAAVA,EAAYM,SAE7B,CAEA,SAASG,EAAoBuB,GAI5B,IAHiC/B,EAAS+B,EAAT/B,UAI9B,MAAO,CACHgC,SAAUhC,aAAS,EAATA,EAAWgC,SAE7B"}
+{"version":3,"file":"useUXEvents-CVHyMwm7.js","sources":["../src/uxsdk/const.ts","../src/uxsdk/useUXEvents.ts"],"sourcesContent":["export const EVENT_COMPONENT_TAB_CHANGE = \"components.tabs.change\"\n","import {defineEvents} from 'openux-js'\n\ninterface NodeCodeSample {\n    tab?: string\n    example?: string\n    code?: string\n}\n\ninterface NodeFramework {\n    location: string\n    uniformRegion?: string\n}\n\ninterface AnalyticsNodes {\n    CodeSample: NodeCodeSample\n    Framework: NodeFramework\n}\n\n// TODO: in the future + maybe better API\n// TODO: how to share nodes between packages\n// TODO: node abstraction?\n// TODO: merge abstraction?\nexport const useUXEvents = defineEvents(({CodeSample, Framework}: AnalyticsNodes) => ({\n    docs: {\n        code: {\n            example_change({example}: { example: string }) {\n                return {\n                    ...commonFrameworkProps({Framework}),\n                    example: example,\n                }\n            },\n            tab_change({tab}: { tab: string }) {\n                return {\n                    ...commonCodeSampleProps({CodeSample, Framework}),\n                    tab: tab,\n                }\n            },\n            copy({code}: { code: string }) {\n                return {\n                    ...commonCodeSampleProps({CodeSample, Framework}),\n                    code: (code || \"\").slice(0, 100) + \"...\",\n                }\n            },\n            scroll_100() {\n                return {\n                    ...commonCodeSampleProps({CodeSample, Framework}),\n                }\n            },\n            scroll_depth({depth}: { depth: number }) {\n                return {\n                    ...commonCodeSampleProps({CodeSample, Framework}),\n                    depth,\n                }\n            },\n        },\n\n        details: {\n            open({label}: { label: string }) {\n                return {\n                    ...commonFrameworkProps({Framework}),\n                    label: label,\n                }\n            },\n            close({label}: { label: string }) {\n                return {\n                    ...commonFrameworkProps({Framework}),\n                    label: label,\n                }\n            }\n        },\n\n        anchor: {\n            click({id}: { id: string }) {\n                return {\n                    ...commonFrameworkProps({Framework}),\n                    id: id,\n                }\n            }\n        }\n    }\n}))\n\nfunction commonCodeSampleProps({\n                                   CodeSample,\n                                   Framework\n                               }: {\n    CodeSample: NodeCodeSample | undefined\n    Framework: NodeFramework | undefined\n}) {\n    return {\n        ...commonFrameworkProps({Framework}),\n        tab: CodeSample?.tab!,\n        example: CodeSample?.example!,\n    }\n}\n\nfunction commonFrameworkProps({\n                                  Framework\n                              }: {\n    Framework: NodeFramework | undefined\n}) {\n    return {\n        location: Framework?.location!,\n    }\n}\n"],"names":["EVENT_COMPONENT_TAB_CHANGE","useUXEvents","defineEvents","CodeSample","Framework","docs","code","example_change","example","Object","assign","commonFrameworkProps","tab_change","tab","commonCodeSampleProps","copy","slice","scroll_100","scroll_depth","depth","details","open","label","close","anchor","click","id","location"],"mappings":"yCAAO,MAAMA,EAA6B,yBCsB7BC,EAAcC,EAAa,EAAEC,aAAYC,gBAA0B,CAC5EC,KAAM,CACFC,KAAM,CACFC,eAAAA,EAAeC,QAACA,KACZC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACP,eAAW,CACpCI,QAASA,IAGjBI,WAAAA,EAAWC,IAACA,KACRJ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOI,EAAsB,CAACX,aAAYC,eAAW,CACjDS,IAAKA,IAGbE,KAAAA,EAAKT,KAACA,KACFG,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOI,EAAsB,CAACX,aAAYC,eAAW,CACjDE,MAAOA,GAAQ,IAAIU,MAAM,EAAG,KAAO,QAG3CC,WAAAA,IACIR,OAAAC,OAAA,CAAA,EACOI,EAAsB,CAACX,aAAYC,eAG9Cc,aAAAA,EAAaC,MAACA,KACVV,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOI,EAAsB,CAACX,aAAYC,eAAW,CACjDe,WAKZC,QAAS,CACLC,KAAAA,EAAKC,MAACA,KACFb,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACP,eAAW,CACpCkB,MAAOA,IAGfC,MAAAA,EAAMD,MAACA,KACHb,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACP,eAAW,CACpCkB,MAAOA,KAKnBE,OAAQ,CACJC,MAAAA,EAAMC,GAACA,KACHjB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACP,eAAW,CACpCsB,GAAIA,SAOxB,SAASZ,GAAsBX,WACIA,EAAUC,UACVA,IAK/B,OAAAK,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACOC,EAAqB,CAACP,eAAW,CACpCS,IAAKV,aAAU,EAAVA,EAAYU,IACjBL,QAASL,aAAU,EAAVA,EAAYK,SAE7B,CAEA,SAASG,GAAqBP,UACIA,IAI9B,MAAO,CACHuB,SAAUvB,aAAS,EAATA,EAAWuB,SAE7B"}

package/dist/useUXScrollDepth-DuzQBuHV.js

@@ -0,0 +1,2 @@
+import{useRef as r,useEffect as t}from"react";function e(e,n={}){const{thresholds:c=[25,50,75,100],onDepthReached:o}=n,s=r(new Set);t(()=>{if(!e.current)return;function r(){const r=e.current;if(!r)return;const{scrollTop:t,scrollHeight:n,clientHeight:u}=r,l=n-u;if(l<=0)return;const i=Math.round(t/l*100);c.forEach(r=>{i>=r&&!s.current.has(r)&&(s.current.add(r),null==o||o(r))})}const t=e.current;return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}},[e.current,c,o])}export{e as u};
+//# sourceMappingURL=useUXScrollDepth-DuzQBuHV.js.map

package/dist/{useUXScrollDepth-C5VYtUdO.js.map → useUXScrollDepth-DuzQBuHV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useUXScrollDepth-C5VYtUdO.js","sources":["../src/uxsdk/useUXScrollDepth.ts"],"sourcesContent":["import React, {useEffect, useRef} from \"react\";\n\nexport interface ScrollDepthOptions {\n    thresholds?: number[]; // Default: [25, 50, 75, 100]\n    onDepthReached?: (depth: number) => void;\n}\n\nexport function useUXScrollDepth(\n    ref: React.RefObject<HTMLElement | null>, \n    options: ScrollDepthOptions = {}\n) {\n    const { thresholds = [25, 50, 75, 100], onDepthReached } = options;\n    const reachedDepthsRef = useRef<Set<number>>(new Set());\n\n    useEffect(() => {\n        if (!ref.current) {\n            return\n        }\n\n        function handleScroll() {\n            const element = ref.current;\n            if (!element) return;\n\n            const { scrollTop, scrollHeight, clientHeight } = element;\n            \n            // Calculate current scroll percentage\n            const scrollableHeight = scrollHeight - clientHeight;\n            if (scrollableHeight <= 0) return;\n            \n            const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);\n            \n            // Check which thresholds have been reached\n            thresholds.forEach(threshold => {\n                if (scrollPercentage >= threshold && !reachedDepthsRef.current.has(threshold)) {\n                    reachedDepthsRef.current.add(threshold);\n                    onDepthReached?.(threshold);\n                }\n            });\n        }\n\n        const element = ref.current;\n        element.addEventListener('scroll', handleScroll);\n\n        return () => {\n            element.removeEventListener('scroll', handleScroll);\n        };\n    }, [ref.current, thresholds, onDepthReached]);\n}\n\n"],"names":["useUXScrollDepth","ref","options","_options$thresholds","thresholds","onDepthReached","reachedDepthsRef","useRef","Set","useEffect","current","element","addEventListener","handleScroll","removeEventListener","scrollTop","scrollableHeight","scrollHeight","clientHeight","scrollPercentage","Math","round","forEach","threshold","has","add"],"mappings":"uDAOgBA,EACZC,GACgC,IAAhCC,yDAA8B,CAAA,EAE9BC,EAA2DD,EAAnDE,WAAAA,OAAU,IAAAD,EAAG,CAAC,GAAI,GAAI,GAAI,KAAIA,EAAEE,EAAmBH,EAAnBG,eAClCC,EAAmBC,EAAoB,IAAIC,KAEjDC,EAAU,WACN,GAAKR,EAAIS,QAAT,CAyBA,IAAMC,EAAUV,EAAIS,QAGpB,OAFAC,EAAQC,iBAAiB,SAAUC,GAE5B,WACHF,EAAQG,oBAAoB,SAAUD,EAC1C,CA5BA,CAEA,SAASA,IACL,IAAMF,EAAUV,EAAIS,QACpB,GAAKC,EAAL,CAEA,IAAQI,EAA0CJ,EAA1CI,UAGFC,EAH4CL,EAA/BM,aAA+BN,EAAjBO,aAIjC,KAAIF,GAAoB,GAAxB,CAEA,IAAMG,EAAmBC,KAAKC,MAAON,EAAYC,EAAoB,KAGrEZ,EAAWkB,QAAQ,SAAAC,GACXJ,GAAoBI,IAAcjB,EAAiBI,QAAQc,IAAID,KAC/DjB,EAAiBI,QAAQe,IAAIF,GAC7BlB,SAAAA,EAAiBkB,GAEzB,EAV2B,CANb,CAiBlB,CAQJ,EAAG,CAACtB,EAAIS,QAASN,EAAYC,GACjC"}
+{"version":3,"file":"useUXScrollDepth-DuzQBuHV.js","sources":["../src/uxsdk/useUXScrollDepth.ts"],"sourcesContent":["import React, {useEffect, useRef} from \"react\";\n\nexport interface ScrollDepthOptions {\n    thresholds?: number[]; // Default: [25, 50, 75, 100]\n    onDepthReached?: (depth: number) => void;\n}\n\nexport function useUXScrollDepth(\n    ref: React.RefObject<HTMLElement | null>, \n    options: ScrollDepthOptions = {}\n) {\n    const { thresholds = [25, 50, 75, 100], onDepthReached } = options;\n    const reachedDepthsRef = useRef<Set<number>>(new Set());\n\n    useEffect(() => {\n        if (!ref.current) {\n            return\n        }\n\n        function handleScroll() {\n            const element = ref.current;\n            if (!element) return;\n\n            const { scrollTop, scrollHeight, clientHeight } = element;\n            \n            // Calculate current scroll percentage\n            const scrollableHeight = scrollHeight - clientHeight;\n            if (scrollableHeight <= 0) return;\n            \n            const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);\n            \n            // Check which thresholds have been reached\n            thresholds.forEach(threshold => {\n                if (scrollPercentage >= threshold && !reachedDepthsRef.current.has(threshold)) {\n                    reachedDepthsRef.current.add(threshold);\n                    onDepthReached?.(threshold);\n                }\n            });\n        }\n\n        const element = ref.current;\n        element.addEventListener('scroll', handleScroll);\n\n        return () => {\n            element.removeEventListener('scroll', handleScroll);\n        };\n    }, [ref.current, thresholds, onDepthReached]);\n}\n\n"],"names":["useUXScrollDepth","ref","options","thresholds","onDepthReached","reachedDepthsRef","useRef","Set","useEffect","current","handleScroll","element","scrollTop","scrollHeight","clientHeight","scrollableHeight","scrollPercentage","Math","round","forEach","threshold","has","add","addEventListener","removeEventListener"],"mappings":"uDAOgBA,EACZC,EACAC,EAA8B,IAE9B,MAAMC,WAAEA,EAAa,CAAC,GAAI,GAAI,GAAI,KAAIC,eAAEA,GAAmBF,EACrDG,EAAmBC,EAAoB,IAAIC,KAEjDC,EAAU,KACN,IAAKP,EAAIQ,QACL,OAGJ,SAASC,IACL,MAAMC,EAAUV,EAAIQ,QACpB,IAAKE,EAAS,OAEd,MAAMC,UAAEA,EAASC,aAAEA,EAAYC,aAAEA,GAAiBH,EAG5CI,EAAmBF,EAAeC,EACxC,GAAIC,GAAoB,EAAG,OAE3B,MAAMC,EAAmBC,KAAKC,MAAON,EAAYG,EAAoB,KAGrEZ,EAAWgB,QAAQC,IACXJ,GAAoBI,IAAcf,EAAiBI,QAAQY,IAAID,KAC/Df,EAAiBI,QAAQa,IAAIF,GAC7BhB,SAAAA,EAAiBgB,KAG7B,CAEA,MAAMT,EAAUV,EAAIQ,QAGpB,OAFAE,EAAQY,iBAAiB,SAAUb,GAE5B,KACHC,EAAQa,oBAAoB,SAAUd,KAE3C,CAACT,EAAIQ,QAASN,EAAYC,GACjC"}

package/dist/uxsdk.js

@@ -1,2 +1,2 @@
-export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-DyuVrtlr.js";export{u as useUXClick}from"./useUXClick-CXf2Q9Ik.js";export{u as useUXScrollDepth}from"./useUXScrollDepth-C5VYtUdO.js";import{useRef as e,useCallback as r,useEffect as t}from"react";import"openux-js";import"./_rollupPluginBabelHelpers-DsquMTLQ.js";function n(n,u,c){var o=e(!1),i=e(!1),s=e(null),l=e(0),a=r(function(){var e=Date.now();e-l.current>1e3&&(o.current=!0,l.current=e,u())},[u]),m=r(function(){s.current&&clearTimeout(s.current),s.current=setTimeout(function(){o.current=!1,s.current=null},50)},[]);t(function(){if(n.current)return n.current.addEventListener("mouseenter",a),n.current.addEventListener("mouseleave",m),function(){n.current&&(n.current.removeEventListener("mouseenter",a),n.current.removeEventListener("mouseleave",m)),s.current&&clearTimeout(s.current)}},[n.current,a,m]);var v=r(function(){s.current&&(clearTimeout(s.current),s.current=null),i.current=!1,o.current&&(o.current=!1,i.current=!0,c())},[c]);t(function(){return document.addEventListener("visibilitychange",v),function(){document.removeEventListener("visibilitychange",v),s.current&&clearTimeout(s.current)}},[v])}export{n as useUXUnreachableElementTracker};
+export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-CVHyMwm7.js";export{u as useUXClick}from"./useUXClick-w9Bk-N_Y.js";export{u as useUXScrollDepth}from"./useUXScrollDepth-DuzQBuHV.js";import{useRef as e,useCallback as r,useEffect as t}from"react";import"openux-js";function n(n,u,c){const o=e(!1),s=e(!1),i=e(null),l=e(0),m=r(()=>{const e=Date.now();e-l.current>1e3&&(o.current=!0,l.current=e,u())},[u]),a=r(()=>{i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{o.current=!1,i.current=null},50)},[]);t(()=>{if(n.current)return n.current.addEventListener("mouseenter",m),n.current.addEventListener("mouseleave",a),()=>{n.current&&(n.current.removeEventListener("mouseenter",m),n.current.removeEventListener("mouseleave",a)),i.current&&clearTimeout(i.current)}},[n.current,m,a]);const v=r(()=>{i.current&&(clearTimeout(i.current),i.current=null),s.current=!1,o.current&&(o.current=!1,s.current=!0,c())},[c]);t(()=>(document.addEventListener("visibilitychange",v),()=>{document.removeEventListener("visibilitychange",v),i.current&&clearTimeout(i.current)}),[v])}export{n as useUXUnreachableElementTracker};
 //# sourceMappingURL=uxsdk.js.map

package/dist/uxsdk.js.map

@@ -1 +1 @@
-{"version":3,"file":"uxsdk.js","sources":["../src/uxsdk/useUXUnreachableElementTracker.ts"],"sourcesContent":["import { useEffect, useRef, useCallback } from \"react\"\n\n/**\n * TODO: not ideal solution cuz sometimes has a bug but currently its enough\n * \n * This hook is used to track the hover and click events of an unreachable element.\n */\nexport function useUXUnreachableElementTracker(\n    element: React.RefObject<HTMLElement | null>,\n    hoverCb: () => void,\n    clickCb: () => void\n) {\n    const hover = useRef(false)\n    const click = useRef(false)\n    const mouseLeaveTimeout = useRef<number | null>(null)\n\n    const lastHoverTime = useRef(0)\n    const DEBOUNCE_DELAY = 1000 // 1 second debounce\n    const MOUSE_LEAVE_DELAY = 50 // 50ms delay to allow visibilitychange to fire first\n\n    const handleMouseEnter = useCallback(() => {\n        const now = Date.now()\n        if (now - lastHoverTime.current > DEBOUNCE_DELAY) {\n            hover.current = true\n            lastHoverTime.current = now\n            hoverCb()\n        }\n    }, [hoverCb])\n\n    const handleMouseLeave = useCallback(() => {\n        // console.log(\"mouse leave\")\n        // Clear any existing timeout\n        if (mouseLeaveTimeout.current) {\n            clearTimeout(mouseLeaveTimeout.current)\n        }\n        \n        // Delay setting hover to false to allow visibilitychange to fire first\n        mouseLeaveTimeout.current = setTimeout(() => {\n            hover.current = false\n            mouseLeaveTimeout.current = null\n        }, MOUSE_LEAVE_DELAY)\n    }, [])\n\n    useEffect(() => {\n        if (!element.current) {\n            return\n        }\n\n        element.current.addEventListener(\"mouseenter\", handleMouseEnter)\n        element.current.addEventListener(\"mouseleave\", handleMouseLeave)\n\n        return () => {\n            if (element.current) {\n                element.current.removeEventListener(\"mouseenter\", handleMouseEnter)\n                element.current.removeEventListener(\"mouseleave\", handleMouseLeave)\n            }\n            // Clean up timeout on unmount\n            if (mouseLeaveTimeout.current) {\n                clearTimeout(mouseLeaveTimeout.current)\n            }\n        }\n\n    }, [element.current, handleMouseEnter, handleMouseLeave])\n\n    // detect visibility loss (e.g. new tab opened)\n    const handleVisibilityChange = useCallback(() => {\n        // Clear the mouseleave timeout since visibility change indicates a click\n        if (mouseLeaveTimeout.current) {\n            clearTimeout(mouseLeaveTimeout.current)\n            mouseLeaveTimeout.current = null\n        }\n        \n        click.current = false\n        // console.log(hover, 7777)\n        if (hover.current) {\n            hover.current = false\n            click.current = true\n            clickCb()\n        }\n    }, [clickCb])\n\n    useEffect(() => {\n        // function handleBeforeUnload() {\n        //     console.log(hover.current)\n        //     console.log(111)\n        // }\n\n        // window.addEventListener('beforeunload', handleBeforeUnload);\n        document.addEventListener('visibilitychange', handleVisibilityChange);\n\n        return () => {\n            // window.removeEventListener('beforeunload', handleBeforeUnload)\n            document.removeEventListener('visibilitychange', handleVisibilityChange)\n            // Clean up timeout on unmount\n            if (mouseLeaveTimeout.current) {\n                clearTimeout(mouseLeaveTimeout.current)\n            }\n        }\n    }, [handleVisibilityChange]) // Add handleVisibilityChange back to dependencies since it's now memoized\n}"],"names":["useUXUnreachableElementTracker","element","hoverCb","clickCb","hover","useRef","click","mouseLeaveTimeout","lastHoverTime","handleMouseEnter","useCallback","now","Date","current","handleMouseLeave","clearTimeout","setTimeout","useEffect","addEventListener","removeEventListener","handleVisibilityChange","document"],"mappings":"0VAOgBA,EACZC,EACAC,EACAC,GAEA,IAAMC,EAAQC,GAAO,GACfC,EAAQD,GAAO,GACfE,EAAoBF,EAAsB,MAE1CG,EAAgBH,EAAO,GAIvBI,EAAmBC,EAAY,WACjC,IAAMC,EAAMC,KAAKD,MACbA,EAAMH,EAAcK,QALL,MAMfT,EAAMS,SAAU,EAChBL,EAAcK,QAAUF,EACxBT,IAER,EAAG,CAACA,IAEEY,EAAmBJ,EAAY,WAG7BH,EAAkBM,SAClBE,aAAaR,EAAkBM,SAInCN,EAAkBM,QAAUG,WAAW,WACnCZ,EAAMS,SAAU,EAChBN,EAAkBM,QAAU,IAChC,EAtBsB,GAuB1B,EAAG,IAEHI,EAAU,WACN,GAAKhB,EAAQY,QAOb,OAHAZ,EAAQY,QAAQK,iBAAiB,aAAcT,GAC/CR,EAAQY,QAAQK,iBAAiB,aAAcJ,GAExC,WACCb,EAAQY,UACRZ,EAAQY,QAAQM,oBAAoB,aAAcV,GAClDR,EAAQY,QAAQM,oBAAoB,aAAcL,IAGlDP,EAAkBM,SAClBE,aAAaR,EAAkBM,QAEvC,CAEJ,EAAG,CAACZ,EAAQY,QAASJ,EAAkBK,IAGvC,IAAMM,EAAyBV,EAAY,WAEnCH,EAAkBM,UAClBE,aAAaR,EAAkBM,SAC/BN,EAAkBM,QAAU,MAGhCP,EAAMO,SAAU,EAEZT,EAAMS,UACNT,EAAMS,SAAU,EAChBP,EAAMO,SAAU,EAChBV,IAER,EAAG,CAACA,IAEJc,EAAU,WASN,OAFAI,SAASH,iBAAiB,mBAAoBE,GAEvC,WAEHC,SAASF,oBAAoB,mBAAoBC,GAE7Cb,EAAkBM,SAClBE,aAAaR,EAAkBM,QAEvC,CACJ,EAAG,CAACO,GACR"}
+{"version":3,"file":"uxsdk.js","sources":["../src/uxsdk/useUXUnreachableElementTracker.ts"],"sourcesContent":["import { useEffect, useRef, useCallback } from \"react\"\n\n/**\n * TODO: not ideal solution cuz sometimes has a bug but currently its enough\n * \n * This hook is used to track the hover and click events of an unreachable element.\n */\nexport function useUXUnreachableElementTracker(\n    element: React.RefObject<HTMLElement | null>,\n    hoverCb: () => void,\n    clickCb: () => void\n) {\n    const hover = useRef(false)\n    const click = useRef(false)\n    const mouseLeaveTimeout = useRef<number | null>(null)\n\n    const lastHoverTime = useRef(0)\n    const DEBOUNCE_DELAY = 1000 // 1 second debounce\n    const MOUSE_LEAVE_DELAY = 50 // 50ms delay to allow visibilitychange to fire first\n\n    const handleMouseEnter = useCallback(() => {\n        const now = Date.now()\n        if (now - lastHoverTime.current > DEBOUNCE_DELAY) {\n            hover.current = true\n            lastHoverTime.current = now\n            hoverCb()\n        }\n    }, [hoverCb])\n\n    const handleMouseLeave = useCallback(() => {\n        // console.log(\"mouse leave\")\n        // Clear any existing timeout\n        if (mouseLeaveTimeout.current) {\n            clearTimeout(mouseLeaveTimeout.current)\n        }\n        \n        // Delay setting hover to false to allow visibilitychange to fire first\n        mouseLeaveTimeout.current = setTimeout(() => {\n            hover.current = false\n            mouseLeaveTimeout.current = null\n        }, MOUSE_LEAVE_DELAY)\n    }, [])\n\n    useEffect(() => {\n        if (!element.current) {\n            return\n        }\n\n        element.current.addEventListener(\"mouseenter\", handleMouseEnter)\n        element.current.addEventListener(\"mouseleave\", handleMouseLeave)\n\n        return () => {\n            if (element.current) {\n                element.current.removeEventListener(\"mouseenter\", handleMouseEnter)\n                element.current.removeEventListener(\"mouseleave\", handleMouseLeave)\n            }\n            // Clean up timeout on unmount\n            if (mouseLeaveTimeout.current) {\n                clearTimeout(mouseLeaveTimeout.current)\n            }\n        }\n\n    }, [element.current, handleMouseEnter, handleMouseLeave])\n\n    // detect visibility loss (e.g. new tab opened)\n    const handleVisibilityChange = useCallback(() => {\n        // Clear the mouseleave timeout since visibility change indicates a click\n        if (mouseLeaveTimeout.current) {\n            clearTimeout(mouseLeaveTimeout.current)\n            mouseLeaveTimeout.current = null\n        }\n        \n        click.current = false\n        // console.log(hover, 7777)\n        if (hover.current) {\n            hover.current = false\n            click.current = true\n            clickCb()\n        }\n    }, [clickCb])\n\n    useEffect(() => {\n        // function handleBeforeUnload() {\n        //     console.log(hover.current)\n        //     console.log(111)\n        // }\n\n        // window.addEventListener('beforeunload', handleBeforeUnload);\n        document.addEventListener('visibilitychange', handleVisibilityChange);\n\n        return () => {\n            // window.removeEventListener('beforeunload', handleBeforeUnload)\n            document.removeEventListener('visibilitychange', handleVisibilityChange)\n            // Clean up timeout on unmount\n            if (mouseLeaveTimeout.current) {\n                clearTimeout(mouseLeaveTimeout.current)\n            }\n        }\n    }, [handleVisibilityChange]) // Add handleVisibilityChange back to dependencies since it's now memoized\n}"],"names":["useUXUnreachableElementTracker","element","hoverCb","clickCb","hover","useRef","click","mouseLeaveTimeout","lastHoverTime","handleMouseEnter","useCallback","now","Date","current","handleMouseLeave","clearTimeout","setTimeout","useEffect","addEventListener","removeEventListener","handleVisibilityChange","document"],"mappings":"0SAOgBA,EACZC,EACAC,EACAC,GAEA,MAAMC,EAAQC,GAAO,GACfC,EAAQD,GAAO,GACfE,EAAoBF,EAAsB,MAE1CG,EAAgBH,EAAO,GAIvBI,EAAmBC,EAAY,KACjC,MAAMC,EAAMC,KAAKD,MACbA,EAAMH,EAAcK,QALL,MAMfT,EAAMS,SAAU,EAChBL,EAAcK,QAAUF,EACxBT,MAEL,CAACA,IAEEY,EAAmBJ,EAAY,KAG7BH,EAAkBM,SAClBE,aAAaR,EAAkBM,SAInCN,EAAkBM,QAAUG,WAAW,KACnCZ,EAAMS,SAAU,EAChBN,EAAkBM,QAAU,MArBV,KAuBvB,IAEHI,EAAU,KACN,GAAKhB,EAAQY,QAOb,OAHAZ,EAAQY,QAAQK,iBAAiB,aAAcT,GAC/CR,EAAQY,QAAQK,iBAAiB,aAAcJ,GAExC,KACCb,EAAQY,UACRZ,EAAQY,QAAQM,oBAAoB,aAAcV,GAClDR,EAAQY,QAAQM,oBAAoB,aAAcL,IAGlDP,EAAkBM,SAClBE,aAAaR,EAAkBM,WAIxC,CAACZ,EAAQY,QAASJ,EAAkBK,IAGvC,MAAMM,EAAyBV,EAAY,KAEnCH,EAAkBM,UAClBE,aAAaR,EAAkBM,SAC/BN,EAAkBM,QAAU,MAGhCP,EAAMO,SAAU,EAEZT,EAAMS,UACNT,EAAMS,SAAU,EAChBP,EAAMO,SAAU,EAChBV,MAEL,CAACA,IAEJc,EAAU,KAONI,SAASH,iBAAiB,mBAAoBE,GAEvC,KAEHC,SAASF,oBAAoB,mBAAoBC,GAE7Cb,EAAkBM,SAClBE,aAAaR,EAAkBM,WAGxC,CAACO,GACR"}

package/dist/views.js

@@ -1,2 +1,2 @@
-import e from"react";function n(n){var r=n.header,t=n.body,a=n.footer;return e.createElement("div",{className:"ht0uhof"},r,t,a)}n.Body=function(n){var r=n.children,t=n.kind;return e.createElement("div",{className:"\n        ".concat("hv4nn8x","\n        ").concat("secondary"===t?"hjhxqbp":"","\n    ")},e.createElement("div",{className:"h16x7upz"},r))};export{n as HomeView};
+import e from"react";function n({header:n,body:r,footer:t}){return e.createElement("div",{className:"ht0uhof"},n,r,t)}n.Body=function({children:n,kind:r}){return e.createElement("div",{className:`\n        hv4nn8x\n        ${"secondary"===r?"hjhxqbp":""}\n    `},e.createElement("div",{className:"h16x7upz"},n))};export{n as HomeView};
 //# sourceMappingURL=views.js.map

package/dist/views.js.map

@@ -1 +1 @@
-{"version":3,"file":"views.js","sources":["../src/views/HomeView/HomeView.tsx","../src/views/HomeView/HomeView.styles.tsx"],"sourcesContent":["import React from \"react\"\nimport * as cn from \"./HomeView.styles\";\n\nexport interface HomeViewProps {\n    header: React.ReactNode\n    body: React.ReactNode\n    footer: React.ReactNode\n}\n\nexport function HomeView({header, body, footer}: HomeViewProps) {\n    return <div className={cn.HomeViewHost}>\n        {header}\n        {body}\n        {footer}\n    </div>\n}\n\nexport interface HomeViewBodyProps {\n    children: React.ReactNode\n    kind?: \"secondary\"\n}\n\nHomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {\n    return <div className={`\n        ${cn.HomeViewBodyHost}\n        ${kind === \"secondary\" ? cn.HomeViewBodyHostSecondary : \"\"}\n    `}>\n        <div className={cn.HomeViewBodyContent}>\n            {children}\n        </div>\n    </div>\n}\n\n\n","import {css} from \"@linaria/core\";\n\nexport const HomeViewHost = css`\n    display: flex;\n    flex-direction: column;\n    min-height: 100vh;\n`;\n\nexport const HomeViewBodyHost = css`\n    background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);\n    backdrop-filter: sepia(10%);\n    background-size: 30px 30px;\n    padding: 60px;\n    flex: 1;\n`;\n\nexport const HomeViewBodyHostSecondary = css`\n    background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);\n`;\n\nexport const HomeViewBodyContent = css`\n    width: 1200px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    gap: 80px;\n\n    @media (max-width: 1200px) {\n        width: 100%;\n        padding: 0 20px;\n    }\n\n    @media (max-width: 768px) {\n        width: 100%;\n        padding: 0 10px;\n    }\n`; "],"names":["HomeView","_ref","header","body","footer","React","createElement","className","Body","_ref2","children","kind","concat"],"mappings":"qBASM,SAAUA,EAAQC,GAAsC,IAApCC,EAAMD,EAANC,OAAQC,EAAIF,EAAJE,KAAMC,EAAMH,EAANG,OACpC,OAAOC,EAAAC,cAAA,MAAA,CAAKC,UCRS,WDShBL,EACAC,EACAC,EAET,CAOAJ,EAASQ,KAAO,SAAqBC,GAAoC,IAAlCC,EAAQD,EAARC,SAAUC,EAAIF,EAAJE,KAC7C,OAAON,EAAAC,cAAA,MAAA,CAAKC,uBAASK,OCfI,UDgBA,cAAAA,OACV,cAATD,ECT4B,UDS0B,GAAE,WAE1DN,EAAAC,cAAA,MAAA,CAAKC,UCPmB,YDQnBG,GAGb"}
+{"version":3,"file":"views.js","sources":["../src/views/HomeView/HomeView.tsx","../src/views/HomeView/HomeView.styles.tsx"],"sourcesContent":["import React from \"react\"\nimport * as cn from \"./HomeView.styles\";\n\nexport interface HomeViewProps {\n    header: React.ReactNode\n    body: React.ReactNode\n    footer: React.ReactNode\n}\n\nexport function HomeView({header, body, footer}: HomeViewProps) {\n    return <div className={cn.HomeViewHost}>\n        {header}\n        {body}\n        {footer}\n    </div>\n}\n\nexport interface HomeViewBodyProps {\n    children: React.ReactNode\n    kind?: \"secondary\"\n}\n\nHomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {\n    return <div className={`\n        ${cn.HomeViewBodyHost}\n        ${kind === \"secondary\" ? cn.HomeViewBodyHostSecondary : \"\"}\n    `}>\n        <div className={cn.HomeViewBodyContent}>\n            {children}\n        </div>\n    </div>\n}\n\n\n","import {css} from \"@linaria/core\";\n\nexport const HomeViewHost = css`\n    display: flex;\n    flex-direction: column;\n    min-height: 100vh;\n`;\n\nexport const HomeViewBodyHost = css`\n    background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);\n    backdrop-filter: sepia(10%);\n    background-size: 30px 30px;\n    padding: 60px;\n    flex: 1;\n`;\n\nexport const HomeViewBodyHostSecondary = css`\n    background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);\n`;\n\nexport const HomeViewBodyContent = css`\n    width: 1200px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    gap: 80px;\n\n    @media (max-width: 1200px) {\n        width: 100%;\n        padding: 0 20px;\n    }\n\n    @media (max-width: 768px) {\n        width: 100%;\n        padding: 0 10px;\n    }\n`; "],"names":["HomeView","header","body","footer","React","createElement","className","HomeViewHost","Body","children","kind","HomeViewBodyHostSecondary","HomeViewBodyContent"],"mappings":"qBASM,SAAUA,GAASC,OAACA,EAAMC,KAAEA,EAAIC,OAAEA,IACpC,OAAOC,EAAAC,cAAA,MAAA,CAAKC,UCRHC,WDSJN,EACAC,EACAC,EAET,CAOAH,EAASQ,KAAO,UAAsBC,SAACA,EAAQC,KAAEA,IAC7C,OAAON,EAAAC,cAAA,MAAA,CAAKC,UAAW,8BAER,cAATI,ECTGC,UDSmD,YAExDP,EAAAC,cAAA,MAAA,CAAKC,UCPAM,YDQAH,GAGb"}

package/dist/writer.js

@@ -1,2 +1,2 @@
-export{A as Anchor,B as Badge,c as Banner,G as GuideCard,H as Heading,I as IconSocial,L as List,a as ListOl,N as NavLinks,S as Steps,T as Table,b as Tabs,V as VideoGuide}from"./VideoGuide-tuJ1s9Hq.js";export{B as Blockquote,c as Breadcrumbs,a as Callout,d as Card,b as Code,C as ColorSchemeButton,D as Details,H as Hr,I as Image,U as Update,u as useColorScheme}from"./Update-BYqk444o.js";export{B as Button}from"./Button-BHQFhDSv.js";import{I as e,a as r}from"./Icon-Dw8kuLfy.js";export{b as IconProvider}from"./Icon-Dw8kuLfy.js";import t from"react";export{T as Text}from"./TabsAnalytics-DFKcGPXp.js";import"./useUXEvents-DyuVrtlr.js";import"./_rollupPluginBabelHelpers-DsquMTLQ.js";import"radix-ui";import"lucide-react";import"./useUXClick-CXf2Q9Ik.js";import"openux-js";function s(e){return e}function o(e){var a=e.children,r=e.className;return t.createElement("pre",{className:"".concat("p1vb39qj"," ").concat(r||"")},a)}function n(e){return e}var i="TocCard-module_TocCardHost__pT0XJ";function l(a){var r=a.title,s=a.description,o=a.href,n=a.className,c=a.icon,l=a.as||m;return t.createElement("xyd-toccard",{className:"".concat(i," ").concat(n||"")},t.createElement("div",{part:"container"},t.createElement(l,{part:"link",href:o,target:"_blank",rel:"noreferrer"},t.createElement("div",{part:"title-container"},t.createElement("div",{part:"title"},r),c&&t.createElement(e,{name:c,size:16})),t.createElement("div",{part:"description"},s))))}function m(e){var a=e.children,s=e.href,o=r(e,["children","href"]);return t.createElement("a",Object.assign({href:s},o),a)}export{s as DetailsPropsProps,e as Icon,o as Pre,n as TabsProps,l as TocCard};
+export{A as Anchor,B as Badge,c as Banner,G as GuideCard,H as Heading,I as IconSocial,L as List,a as ListOl,N as NavLinks,S as Steps,T as Table,b as Tabs,V as VideoGuide}from"./VideoGuide-CjFV2soM.js";export{B as Blockquote,c as Breadcrumbs,a as Callout,d as Card,b as Code,C as ColorSchemeButton,D as Details,H as Hr,I as Image,U as Update,u as useColorScheme}from"./Update-C8Ig1-78.js";export{B as Button}from"./Button-D1sRSUU2.js";import{I as e,a as r}from"./Icon-DAUxBCx7.js";export{b as IconProvider}from"./Icon-DAUxBCx7.js";import t from"react";export{T as Text}from"./TabsAnalytics-CunSa7pG.js";import"./useUXEvents-CVHyMwm7.js";import"radix-ui";import"lucide-react";import"./useUXClick-w9Bk-N_Y.js";import"openux-js";function s(e){return e}function o({children:e,className:a}){return t.createElement("pre",{className:`p1vb39qj ${a||""}`},e)}function n(e){return e}var i="TocCard-module_TocCardHost__pT0XJ";function l({title:a,description:r,href:s,className:o,icon:n,as:c}){const l=c||m;return t.createElement("xyd-toccard",{className:`${i} ${o||""}`},t.createElement("div",{part:"container"},t.createElement(l,{part:"link",href:s,target:"_blank",rel:"noreferrer"},t.createElement("div",{part:"title-container"},t.createElement("div",{part:"title"},a),n&&t.createElement(e,{name:n,size:16})),t.createElement("div",{part:"description"},r))))}function m(e){var{children:a,href:s}=e,o=r(e,["children","href"]);return t.createElement("a",Object.assign({href:s},o),a)}export{s as DetailsPropsProps,e as Icon,o as Pre,n as TabsProps,l as TocCard};
 //# sourceMappingURL=writer.js.map

package/dist/writer.js.map

@@ -1 +1 @@
-{"version":3,"file":"writer.js","sources":["../src/writer/Details/DetailsProps.tsx","../src/writer/Pre/Pre.tsx","../src/writer/Pre/Pre.styles.tsx","../src/writer/Tabs/TabsProps.tsx","../src/writer/TocCard/TocCard.tsx"],"sourcesContent":["export interface DetailsProps {\n    /** Content to be displayed inside the details element */\n    children: React.ReactNode;\n\n    /** Label text displayed in the summary */\n    label: string;\n\n    /** Optional icon element to be displayed in the summary */\n    icon?: React.ReactElement;\n\n    /** Optional CSS class name for custom styling */\n    className?: string;\n\n    /**\n     * Which visual style to use.\n     * @default 'primary'\n     */\n    kind?: 'primary' | 'secondary' | 'tertiary';\n\n    /**\n     * Title text or element displayed in the summary.\n     * Required when `kind` is 'secondary' or 'tertiary'.\n     */\n    title?: React.ReactNode;\n}\n\n/**\n * Props for the Details component\n * \n * @category Component\n */\nexport function DetailsProps(props: DetailsProps) {\n    return props\n}","import React from \"react\"\n\nimport * as cn from \"./Pre.styles\"\n\nexport interface PreProps {\n    children: React.ReactNode\n    className?: string\n}\n\nexport function Pre({ children, className }: PreProps) {\n    return <pre className={`${cn.PreHost} ${className || \"\"}`}>\n        {children}\n    </pre>\n}","import {css} from \"@linaria/core\";\n\nexport const PreHost = css`\n    @layer defaults {\n        margin-top: 0;\n        border-radius: 6px;\n        padding: 16px;\n        border: 0;\n\n        background-color: var(--xyd-pre-bgcolor);\n        overflow: auto;\n    }\n`;","export interface TabsProps {\n    /** The kind of tabs to render. If not provided, the component will render the primary tabs. */\n    kind?: 'secondary' | null\n}\n\n/**\n * Props for the Tabs component\n * \n * @category Component\n */\nexport function TabsProps(props: TabsProps) {\n    return props\n}","import React from \"react\";\n\nimport cn from \"./TocCard.module.css\";\nimport { Icon } from \"../../../writer\";\n\ninterface TocCardProps {\n    title: string;\n    description: string;\n    href: string;\n    className?: string;\n    icon?: string;\n    as?: React.ElementType;\n}\n\nexport function TocCard({ title, description, href, className, icon, as }: TocCardProps) {\n    const Link = as || $Link;\n\n    return <xyd-toccard\n        className={`${cn.TocCardHost} ${className || \"\"}`}\n    >\n        <div part=\"container\">\n            <Link\n                part=\"link\"\n                href={href}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n            >\n                <div part=\"title-container\">\n                    <div part=\"title\">{title}</div>\n                    {icon && <Icon name={icon} size={16} />}\n                </div>\n                <div part=\"description\">\n                    {description}\n                </div>\n            </Link>\n        </div>\n    </xyd-toccard>\n}\n\nfunction $Link({ children, href, ...props }: React.ComponentProps<'a'>) {\n    return <a href={href} {...props}>{children}</a>\n}"],"names":["DetailsProps","props","Pre","_ref","children","className","React","createElement","concat","TabsProps","TocCard","title","description","href","icon","Link","as","$Link","cn","part","target","rel","Icon","name","size","_a","__rest","Object","assign"],"mappings":"qwBA+BM,SAAUA,EAAaC,GACzB,OAAOA,CACX,UCxBgBC,EAAGC,GAAkC,IAA/BC,EAAQD,EAARC,SAAUC,EAASF,EAATE,UAC5B,OAAOC,EAAAC,cAAA,MAAA,CAAKF,UAAS,GAAAG,OCRL,WDQoB,KAAAA,OAAIH,GAAa,KAChDD,EAET,CEHM,SAAUK,EAAUR,GACtB,OAAOA,CACX,2CCEM,SAAUS,EAAOP,GAAgE,IAA7DQ,EAAKR,EAALQ,MAAOC,EAAWT,EAAXS,YAAaC,EAAIV,EAAJU,KAAMR,EAASF,EAATE,UAAWS,EAAIX,EAAJW,KACrDC,EAD6DZ,EAAFa,IAC9CC,EAEnB,OAAOX,EAAAC,cAAA,cAAA,CACHF,UAAS,GAAAG,OAAKU,EAAc,KAAAV,OAAIH,GAAa,KAE7CC,EAAAC,cAAA,MAAA,CAAKY,KAAK,aACNb,EAAAC,cAACQ,EAAI,CACDI,KAAK,OACLN,KAAMA,EACNO,OAAO,SACPC,IAAI,cAEJf,EAAAC,cAAA,MAAA,CAAKY,KAAK,mBACNb,EAAAC,cAAA,MAAA,CAAKY,KAAK,SAASR,GAClBG,GAAQR,EAAAC,cAACe,EAAI,CAACC,KAAMT,EAAMU,KAAM,MAErClB,EAAAC,cAAA,MAAA,CAAKY,KAAK,eACLP,KAKrB,CAEA,SAASK,EAAMQ,OAAErB,EAAcqB,EAAdrB,SAAUS,EAAIY,EAAJZ,KAASZ,EAAKyB,EAAAD,EAA1B,qBACX,OAAOnB,EAAAC,cAAA,IAAAoB,OAAAC,OAAA,CAAGf,KAAMA,GAAUZ,GAAQG,EACtC"}
+{"version":3,"file":"writer.js","sources":["../src/writer/Details/DetailsProps.tsx","../src/writer/Pre/Pre.tsx","../src/writer/Tabs/TabsProps.tsx","../src/writer/TocCard/TocCard.tsx"],"sourcesContent":["export interface DetailsProps {\n    /** Content to be displayed inside the details element */\n    children: React.ReactNode;\n\n    /** Label text displayed in the summary */\n    label: string;\n\n    /** Optional icon element to be displayed in the summary */\n    icon?: React.ReactElement;\n\n    /** Optional CSS class name for custom styling */\n    className?: string;\n\n    /**\n     * Which visual style to use.\n     * @default 'primary'\n     */\n    kind?: 'primary' | 'secondary' | 'tertiary';\n\n    /**\n     * Title text or element displayed in the summary.\n     * Required when `kind` is 'secondary' or 'tertiary'.\n     */\n    title?: React.ReactNode;\n}\n\n/**\n * Props for the Details component\n * \n * @category Component\n */\nexport function DetailsProps(props: DetailsProps) {\n    return props\n}","import React from \"react\"\n\nimport * as cn from \"./Pre.styles\"\n\nexport interface PreProps {\n    children: React.ReactNode\n    className?: string\n}\n\nexport function Pre({ children, className }: PreProps) {\n    return <pre className={`${cn.PreHost} ${className || \"\"}`}>\n        {children}\n    </pre>\n}","export interface TabsProps {\n    /** The kind of tabs to render. If not provided, the component will render the primary tabs. */\n    kind?: 'secondary' | null\n}\n\n/**\n * Props for the Tabs component\n * \n * @category Component\n */\nexport function TabsProps(props: TabsProps) {\n    return props\n}","import React from \"react\";\n\nimport cn from \"./TocCard.module.css\";\nimport { Icon } from \"../../../writer\";\n\ninterface TocCardProps {\n    title: string;\n    description: string;\n    href: string;\n    className?: string;\n    icon?: string;\n    as?: React.ElementType;\n}\n\nexport function TocCard({ title, description, href, className, icon, as }: TocCardProps) {\n    const Link = as || $Link;\n\n    return <xyd-toccard\n        className={`${cn.TocCardHost} ${className || \"\"}`}\n    >\n        <div part=\"container\">\n            <Link\n                part=\"link\"\n                href={href}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n            >\n                <div part=\"title-container\">\n                    <div part=\"title\">{title}</div>\n                    {icon && <Icon name={icon} size={16} />}\n                </div>\n                <div part=\"description\">\n                    {description}\n                </div>\n            </Link>\n        </div>\n    </xyd-toccard>\n}\n\nfunction $Link({ children, href, ...props }: React.ComponentProps<'a'>) {\n    return <a href={href} {...props}>{children}</a>\n}"],"names":["DetailsProps","props","Pre","children","className","React","createElement","TabsProps","TocCard","title","description","href","icon","as","Link","$Link","cn","part","target","rel","Icon","name","size","_a","__rest","Object","assign"],"mappings":"qtBA+BM,SAAUA,EAAaC,GACzB,OAAOA,CACX,UCxBgBC,GAAIC,SAAEA,EAAQC,UAAEA,IAC5B,OAAOC,EAAAC,cAAA,MAAA,CAAKF,UAAW,YAAiBA,GAAa,MAChDD,EAET,CCHM,SAAUI,EAAUN,GACtB,OAAOA,CACX,2CCEM,SAAUO,GAAQC,MAAEA,EAAKC,YAAEA,EAAWC,KAAEA,EAAIP,UAAEA,EAASQ,KAAEA,EAAIC,GAAEA,IACjE,MAAMC,EAAOD,GAAME,EAEnB,OAAOV,EAAAC,cAAA,cAAA,CACHF,UAAW,GAAGY,KAAkBZ,GAAa,MAE7CC,EAAAC,cAAA,MAAA,CAAKW,KAAK,aACNZ,EAAAC,cAACQ,EAAI,CACDG,KAAK,OACLN,KAAMA,EACNO,OAAO,SACPC,IAAI,cAEJd,EAAAC,cAAA,MAAA,CAAKW,KAAK,mBACNZ,EAAAC,cAAA,MAAA,CAAKW,KAAK,SAASR,GAClBG,GAAQP,EAAAC,cAACc,EAAI,CAACC,KAAMT,EAAMU,KAAM,MAErCjB,EAAAC,cAAA,MAAA,CAAKW,KAAK,eACLP,KAKrB,CAEA,SAASK,EAAMQ,OAAApB,SAAEA,EAAQQ,KAAEA,GAAIY,EAAKtB,EAAKuB,EAAAD,EAA1B,qBACX,OAAOlB,EAAAC,cAAA,IAAAmB,OAAAC,OAAA,CAAGf,KAAMA,GAAUV,GAAQE,EACtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/components",
-  "version": "0.0.0-build-87368f8-20251101145203",
+  "version": "0.0.0-build-1760f84-20251129221538",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -49,7 +49,7 @@
     "@code-hike/lighter": "^1.0.3",
     "openux-js": "0.0.0-pre.1",
     "react": "^19.1.0",
-    "@xyd-js/core": "0.0.0-build-87368f8-20251101145203"
+    "@xyd-js/core": "0.0.0-build-1760f84-20251129221538"
   },
   "devDependencies": {
     "@linaria/core": "^6.2.0",
@@ -57,6 +57,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-swc": "^0.4.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@rollup/plugin-url": "^8.0.2",
     "@types/react": "^19.1.0",