@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/Menu/Menu.utils.js

@@ -0,0 +1,36 @@
+//#region src/Fundamentals/Menu/Menu.utils.ts
+var DEFAULT_MENU_ITEM_KIND = "command";
+var MenuUtils;
+(function(_MenuUtils) {
+	const getKind = _MenuUtils.getKind = (item) => item.kind ?? DEFAULT_MENU_ITEM_KIND;
+	_MenuUtils.getIsStateful = (item) => getKind(item) !== "command";
+	_MenuUtils.getRadioGroupValues = (items, index) => {
+		if (items[index] === void 0 || getKind(items[index]) !== "radio") return [];
+		let from = index;
+		let to = index;
+		while (from > 0 && getKind(items[from - 1]) === "radio") from--;
+		while (to < items.length - 1 && getKind(items[to + 1]) === "radio") to++;
+		return items.slice(from, to + 1).map((item) => item.value);
+	};
+	_MenuUtils.getRuns = (items) => {
+		const runs = [];
+		items.forEach((item, index) => {
+			const isRadio = getKind(item) === "radio";
+			const last = runs[runs.length - 1];
+			if (isRadio && last?.isRadioGroup) {
+				last.items.push(item);
+				return;
+			}
+			runs.push({
+				from: index,
+				items: [item],
+				isRadioGroup: isRadio
+			});
+		});
+		return runs;
+	};
+})(MenuUtils || (MenuUtils = {}));
+//#endregion
+export { MenuUtils };
+
+//# sourceMappingURL=Menu.utils.js.map

package/dist/Fundamentals/Menu/Menu.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.utils.js","names":[],"sources":["../../../src/Fundamentals/Menu/Menu.utils.ts"],"sourcesContent":["import type { MenuItem, MenuItemKind, MenuRun } from \"./Menu.types\";\n\nconst DEFAULT_MENU_ITEM_KIND: MenuItemKind = \"command\";\n\nexport namespace MenuUtils {\n    export const getKind = <T>(item: MenuItem<T>): MenuItemKind => item.kind ?? DEFAULT_MENU_ITEM_KIND;\n\n    export const getIsStateful = <T>(item: MenuItem<T>) => getKind(item) !== \"command\";\n\n    export const getRadioGroupValues = <T>(items: MenuItem<T>[], index: number): T[] => {\n        if (items[index] === undefined || getKind(items[index]) !== \"radio\") return [];\n\n        let from = index;\n        let to = index;\n\n        while (from > 0 && getKind(items[from - 1]) === \"radio\") from--;\n        while (to < items.length - 1 && getKind(items[to + 1]) === \"radio\") to++;\n\n        return items.slice(from, to + 1).map((item) => item.value);\n    };\n\n    export const getRuns = <T>(items: MenuItem<T>[]): MenuRun<T>[] => {\n        const runs: MenuRun<T>[] = [];\n\n        items.forEach((item, index) => {\n            const isRadio = getKind(item) === \"radio\";\n            const last = runs[runs.length - 1];\n\n            if (isRadio && last?.isRadioGroup) {\n                last.items.push(item);\n\n                return;\n            }\n\n            runs.push({ from: index, items: [item], isRadioGroup: isRadio });\n        });\n\n        return runs;\n    };\n}\n"],"mappings":";AAEA,IAAM,yBAAuC;AAEtC,IAAU;CAAV,SAAA,YAAA;CACI,MAAM,UAAA,WAAA,WAAc,SAAoC,KAAK,QAAQ;CAE/D,WAAA,iBAAoB,SAAsB,QAAQ,IAAI,MAAM;CAE5D,WAAA,uBAA0B,OAAsB,UAAuB;EAChF,IAAI,MAAM,WAAW,KAAA,KAAa,QAAQ,MAAM,MAAM,MAAM,SAAS,OAAO,CAAC;EAE7E,IAAI,OAAO;EACX,IAAI,KAAK;EAET,OAAO,OAAO,KAAK,QAAQ,MAAM,OAAO,EAAE,MAAM,SAAS;EACzD,OAAO,KAAK,MAAM,SAAS,KAAK,QAAQ,MAAM,KAAK,EAAE,MAAM,SAAS;EAEpE,OAAO,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,KAAK,KAAK;CAC7D;CAEa,WAAA,WAAc,UAAuC;EAC9D,MAAM,OAAqB,CAAC;EAE5B,MAAM,SAAS,MAAM,UAAU;GAC3B,MAAM,UAAU,QAAQ,IAAI,MAAM;GAClC,MAAM,OAAO,KAAK,KAAK,SAAS;GAEhC,IAAI,WAAW,MAAM,cAAc;IAC/B,KAAK,MAAM,KAAK,IAAI;IAEpB;GACJ;GAEA,KAAK,KAAK;IAAE,MAAM;IAAO,OAAO,CAAC,IAAI;IAAG,cAAc;GAAQ,CAAC;EACnE,CAAC;EAED,OAAO;CACX;AACH,EAAA,CAAA,cAAA,YAAA,CAAA,EAAD"}

package/dist/Fundamentals/Modal/Modal.css.js

@@ -0,0 +1,16 @@
+/* empty css                         */
+//#region src/Fundamentals/Modal/Modal.css.ts
+var modalAlignmentVariants = {
+	center: "_4xktvd0",
+	left: "_4xktvd1",
+	right: "_4xktvd2",
+	top: "_4xktvd3",
+	bottom: "_4xktvd4"
+};
+var modalRoot = "_4xktvd5";
+var modalOverlay = "_4xktvd6";
+var modalContainer = "_4xktvd7";
+//#endregion
+export { modalAlignmentVariants, modalContainer, modalOverlay, modalRoot };
+
+//# sourceMappingURL=Modal.css.js.map

package/dist/Fundamentals/Modal/Modal.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.css.js","names":[],"sources":["../../../src/Fundamentals/Modal/Modal.css.ts"],"sourcesContent":["import { globalStyle, style, styleVariants } from \"@vanilla-extract/css\";\n\nexport const modalAlignmentVariants = styleVariants({\n    center: {\n        justifyItems: \"center\",\n        alignItems: \"center\",\n    },\n    left: {\n        justifyItems: \"start\",\n        alignItems: \"stretch\",\n    },\n    right: {\n        justifyItems: \"end\",\n        alignItems: \"stretch\",\n    },\n    top: {\n        justifyItems: \"stretch\",\n        alignItems: \"start\",\n    },\n    bottom: {\n        justifyItems: \"stretch\",\n        alignItems: \"end\",\n    },\n});\n\nexport const modalRoot = style({\n    position: \"relative\",\n\n    display: \"grid\",\n    gridTemplateColumns: \"100%\",\n    gridTemplateRows: \"100%\",\n    width: \"100%\",\n    height: \"100%\",\n});\n\nexport const modalOverlay = style({\n    position: \"absolute\",\n    inset: 0,\n    zIndex: 100,\n\n    display: \"grid\",\n    pointerEvents: \"all\",\n});\n\nexport const modalContainer = style({\n    zIndex: 100,\n\n    display: \"flex\",\n    flexDirection: \"column\",\n    pointerEvents: \"all\",\n});\n\nglobalStyle(`${modalContainer} > *`, {\n    flexGrow: 1,\n});\n"],"mappings":""}

package/dist/Fundamentals/Modal/Modal.js

@@ -0,0 +1,144 @@
+import { useViewportContext } from "../../Exotics/Viewport/Viewport.context.js";
+import { access } from "../../Utils/propUtils.js";
+import { DismisserStack } from "../../Abstracts/Dismisser/DismisserStack.js";
+import { ElementFader } from "../../Abstracts/ElementFader/ElementFader.js";
+import { FocusManager } from "../../Abstracts/FocusManager/FocusManager.js";
+import { InteractionTracker } from "../../Abstracts/InteractionTracker/InteractionTracker.js";
+import { modalAlignmentVariants, modalContainer, modalOverlay, modalRoot } from "./Modal.css.js";
+import { Show, createEffect, createMemo, createSignal } from "solid-js";
+import { CSSUtils, GestureUtils, StringUtils } from "@thewaver/ss-utils";
+import { Portal, className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+//#region src/Fundamentals/Modal/Modal.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><div></div><div aria-modal=true style=transition-property:transform>`);
+var DEFAULT_MODAL_TRANSITION_DURATION_MS = 200;
+var DEFAULT_MODAL_ROLE = "dialog";
+var DEFAULT_MODAL_ALIGNMENT = "center";
+var MODAL_SWIPE_COMMIT_RATIO = .35;
+var MODAL_SWIPE_FALLBACK_AXIS = "horizontal";
+var MODAL_SWIPE_DIRECTIONS = {
+	left: "left",
+	right: "right",
+	top: "up",
+	bottom: "down"
+};
+var PERCENT = 100;
+var Modal = (props) => {
+	const viewportContext = useViewportContext();
+	const [getContainerRef, setContainerRef] = createSignal();
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_MODAL_TRANSITION_DURATION_MS);
+	const getAlignment = createMemo(() => access(props.alignment) ?? DEFAULT_MODAL_ALIGNMENT);
+	const getSwipeDirection = createMemo(() => MODAL_SWIPE_DIRECTIONS[getAlignment()]);
+	const getSwipeAxis = createMemo(() => {
+		const direction = getSwipeDirection();
+		return direction ? GestureUtils.computeSwipeAxis(direction) : MODAL_SWIPE_FALLBACK_AXIS;
+	});
+	const getMargins = createMemo(() => {
+		return access(props.margins) ?? CSSUtils.spreadMargin(0);
+	});
+	const { getIsVisible, getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(() => props.visibilitySignal[0](), {
+		getTransitionDurationMs,
+		onShow: props.onShow,
+		onHide: props.onHide
+	});
+	FocusManager.autoFocus(getContainerRef, getIsVisible, { getInitialRef: () => access(props.initialFocusRef) });
+	const handleDismiss = () => {
+		props.visibilitySignal[1](false);
+	};
+	const handleOverlayClick = () => {
+		if (access(props.isDismissableOnOverlayClick) === false) return;
+		handleDismiss();
+	};
+	const [getSwipeOffsetRatio, setSwipeOffsetRatio] = createSignal(0);
+	const { getIsSwiping } = InteractionTracker.trackSwipe(getContainerRef, () => getSwipeDirection() === void 0 || access(props.isDismissableOnOverlayClick) === false, {
+		getAxis: getSwipeAxis,
+		getCommitRatio: () => MODAL_SWIPE_COMMIT_RATIO,
+		onSwipe: (progressRatio) => {
+			const direction = getSwipeDirection();
+			if (!direction) return;
+			setSwipeOffsetRatio(GestureUtils.computeSwipeOffset(progressRatio, direction));
+		},
+		onSwipeEnd: (direction) => {
+			if (direction !== void 0 && direction === getSwipeDirection()) {
+				handleDismiss();
+				return;
+			}
+			setSwipeOffsetRatio(0);
+		}
+	});
+	const getSwipeTransform = () => {
+		const direction = getSwipeDirection();
+		const offsetRatio = getSwipeOffsetRatio();
+		if (direction === void 0 || offsetRatio === 0) return void 0;
+		const distance = offsetRatio * PERCENT * (direction === "left" || direction === "up" ? -1 : 1);
+		return getSwipeAxis() === "horizontal" ? `translateX(${distance}%)` : `translateY(${distance}%)`;
+	};
+	createEffect(() => {
+		if (getIsVisible()) return;
+		setSwipeOffsetRatio(0);
+	});
+	DismisserStack.createLayer(getIsVisible, {
+		getRoots: () => [getContainerRef()],
+		onDismiss: (reason) => {
+			if (reason !== "escape") return;
+			handleDismiss();
+		}
+	});
+	createEffect(() => {
+		const hasTransitionFinished = getHasTransitionFinished();
+		props.onTransitionStatusChange?.(hasTransitionFinished);
+	});
+	return createComponent(Show, {
+		get when() {
+			return getIsVisible();
+		},
+		get children() {
+			return createComponent(Portal, {
+				get mount() {
+					return viewportContext.getPortalRef();
+				},
+				ref: (el) => {
+					el.style.display = "contents";
+				},
+				get children() {
+					var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+					_el$.$$keydown = (e) => FocusManager.focusTrapKeyDown(e, getContainerRef());
+					_el$2.$$click = handleOverlayClick;
+					className(_el$2, modalOverlay);
+					insert(_el$2, () => props.renderOverlay(getTransitionTarget, getTransitionDurationMs));
+					use(setContainerRef, _el$3);
+					className(_el$3, modalContainer);
+					insert(_el$3, () => props.renderContent(getTransitionTarget, getTransitionDurationMs));
+					effect((_p$) => {
+						var _v$ = [modalRoot, modalAlignmentVariants[getAlignment()]].join(" "), _v$2 = {
+							...CSSUtils.spreadableToStyle(getMargins(), (key) => StringUtils.camelToKebabCase(key)),
+							"max-width": `calc(100% - ${getMargins().marginLeft + getMargins().marginRight}px)`,
+							"max-height": `calc(100% - ${getMargins().marginTop + getMargins().marginBottom}px)`,
+							"transform": getSwipeTransform(),
+							"transition-duration": `${getIsSwiping() ? 0 : getTransitionDurationMs()}ms`
+						}, _v$3 = access(props.role) ?? DEFAULT_MODAL_ROLE, _v$4 = access(props.ariaLabel), _v$5 = access(props.ariaLabelledBy), _v$6 = access(props.ariaDescribedBy);
+						_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+						_p$.t = style(_el$3, _v$2, _p$.t);
+						_v$3 !== _p$.a && setAttribute(_el$3, "role", _p$.a = _v$3);
+						_v$4 !== _p$.o && setAttribute(_el$3, "aria-label", _p$.o = _v$4);
+						_v$5 !== _p$.i && setAttribute(_el$3, "aria-labelledby", _p$.i = _v$5);
+						_v$6 !== _p$.n && setAttribute(_el$3, "aria-describedby", _p$.n = _v$6);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0
+					});
+					return _el$;
+				}
+			});
+		}
+	});
+};
+delegateEvents(["keydown", "click"]);
+//#endregion
+export { Modal };
+
+//# sourceMappingURL=Modal.js.map

package/dist/Fundamentals/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","names":["Show","createEffect","createMemo","createSignal","Portal","CSSUtils","GestureUtils","StringUtils","SwipeAxis","SwipeDirection","DismisserStack","ElementFader","FocusManager","InteractionTracker","useViewportContext","access","ModalAlignment","ModalProps","ModalRole","styles","DEFAULT_MODAL_TRANSITION_DURATION_MS","DEFAULT_MODAL_ROLE","DEFAULT_MODAL_ALIGNMENT","MODAL_SWIPE_COMMIT_RATIO","MODAL_SWIPE_FALLBACK_AXIS","MODAL_SWIPE_DIRECTIONS","Partial","Record","left","right","top","bottom","PERCENT","Modal","props","viewportContext","getContainerRef","setContainerRef","HTMLElement","getTransitionDurationMs","transitionDurationMs","getAlignment","alignment","getSwipeDirection","getSwipeAxis","direction","computeSwipeAxis","getMargins","margins","spreadMargin","getIsVisible","getTransitionTarget","getHasTransitionFinished","createFader","visibilitySignal","onShow","onHide","autoFocus","getInitialRef","initialFocusRef","handleDismiss","handleOverlayClick","isDismissableOnOverlayClick","getSwipeOffsetRatio","setSwipeOffsetRatio","getIsSwiping","trackSwipe","undefined","getAxis","getCommitRatio","onSwipe","progressRatio","computeSwipeOffset","onSwipeEnd","getSwipeTransform","offsetRatio","distance","createLayer","getRoots","onDismiss","reason","hasTransitionFinished","onTransitionStatusChange","_$createComponent","when","children","mount","getPortalRef","ref","el","style","display","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","$$keydown","e","focusTrapKeyDown","$$click","_$className","modalOverlay","_$insert","renderOverlay","_$use","modalContainer","renderContent","_$effect","_p$","_v$","modalRoot","modalAlignmentVariants","join","_v$2","spreadableToStyle","key","camelToKebabCase","marginLeft","marginRight","marginTop","marginBottom","_v$3","role","_v$4","ariaLabel","_v$5","ariaLabelledBy","_v$6","ariaDescribedBy","t","_$style","a","_$setAttribute","o","i","n","_$delegateEvents"],"sources":["../../../src/Fundamentals/Modal/Modal.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\n\nimport { CSSUtils, GestureUtils, StringUtils } from \"@thewaver/ss-utils\";\nimport type { SwipeAxis, SwipeDirection } from \"@thewaver/ss-utils\";\n\nimport { DismisserStack } from \"../../Abstracts/Dismisser/DismisserStack\";\nimport { ElementFader } from \"../../Abstracts/ElementFader/ElementFader\";\nimport { FocusManager } from \"../../Abstracts/FocusManager/FocusManager\";\nimport { InteractionTracker } from \"../../Abstracts/InteractionTracker/InteractionTracker\";\nimport { useViewportContext } from \"../../Exotics/Viewport/Viewport.context\";\nimport { access } from \"../../Utils/propUtils\";\nimport type { ModalAlignment, ModalProps, ModalRole } from \"./Modal.types\";\n\nimport * as styles from \"./Modal.css\";\n\nconst DEFAULT_MODAL_TRANSITION_DURATION_MS = 200;\nconst DEFAULT_MODAL_ROLE: ModalRole = \"dialog\";\nconst DEFAULT_MODAL_ALIGNMENT: ModalAlignment = \"center\";\n\nconst MODAL_SWIPE_COMMIT_RATIO = 0.35;\nconst MODAL_SWIPE_FALLBACK_AXIS: SwipeAxis = \"horizontal\";\nconst MODAL_SWIPE_DIRECTIONS: Partial<Record<ModalAlignment, SwipeDirection>> = {\n    left: \"left\",\n    right: \"right\",\n    top: \"up\",\n    bottom: \"down\",\n};\nconst PERCENT = 100;\n\nexport const Modal = (props: ModalProps) => {\n    const viewportContext = useViewportContext();\n\n    const [getContainerRef, setContainerRef] = createSignal<HTMLElement>();\n\n    const getTransitionDurationMs = createMemo(\n        () => access(props.transitionDurationMs) ?? DEFAULT_MODAL_TRANSITION_DURATION_MS,\n    );\n\n    const getAlignment = createMemo(() => access(props.alignment) ?? DEFAULT_MODAL_ALIGNMENT);\n\n    const getSwipeDirection = createMemo(() => MODAL_SWIPE_DIRECTIONS[getAlignment()]);\n\n    const getSwipeAxis = createMemo(() => {\n        const direction = getSwipeDirection();\n\n        return direction ? GestureUtils.computeSwipeAxis(direction) : MODAL_SWIPE_FALLBACK_AXIS;\n    });\n\n    const getMargins = createMemo(() => {\n        return access(props.margins) ?? CSSUtils.spreadMargin(0);\n    });\n\n    const { getIsVisible, getTransitionTarget, getHasTransitionFinished } = ElementFader.createFader(\n        () => props.visibilitySignal[0](),\n        { getTransitionDurationMs, onShow: props.onShow, onHide: props.onHide },\n    );\n\n    FocusManager.autoFocus(getContainerRef, getIsVisible, { getInitialRef: () => access(props.initialFocusRef) });\n\n    const handleDismiss = () => {\n        props.visibilitySignal[1](false);\n    };\n\n    const handleOverlayClick = () => {\n        if (access(props.isDismissableOnOverlayClick) === false) return;\n\n        handleDismiss();\n    };\n\n    const [getSwipeOffsetRatio, setSwipeOffsetRatio] = createSignal(0);\n\n    const { getIsSwiping } = InteractionTracker.trackSwipe(\n        getContainerRef,\n        () => getSwipeDirection() === undefined || access(props.isDismissableOnOverlayClick) === false,\n        {\n            getAxis: getSwipeAxis,\n            getCommitRatio: () => MODAL_SWIPE_COMMIT_RATIO,\n            onSwipe: (progressRatio) => {\n                const direction = getSwipeDirection();\n\n                if (!direction) return;\n\n                setSwipeOffsetRatio(GestureUtils.computeSwipeOffset(progressRatio, direction));\n            },\n            onSwipeEnd: (direction) => {\n                if (direction !== undefined && direction === getSwipeDirection()) {\n                    handleDismiss();\n\n                    return;\n                }\n\n                setSwipeOffsetRatio(0);\n            },\n        },\n    );\n\n    const getSwipeTransform = () => {\n        const direction = getSwipeDirection();\n        const offsetRatio = getSwipeOffsetRatio();\n\n        if (direction === undefined || offsetRatio === 0) return undefined;\n\n        const distance = offsetRatio * PERCENT * (direction === \"left\" || direction === \"up\" ? -1 : 1);\n\n        return getSwipeAxis() === \"horizontal\" ? `translateX(${distance}%)` : `translateY(${distance}%)`;\n    };\n\n    createEffect(() => {\n        if (getIsVisible()) return;\n\n        setSwipeOffsetRatio(0);\n    });\n\n    DismisserStack.createLayer(getIsVisible, {\n        getRoots: () => [getContainerRef()],\n        onDismiss: (reason) => {\n            if (reason !== \"escape\") return;\n\n            handleDismiss();\n        },\n    });\n\n    createEffect(() => {\n        const hasTransitionFinished = getHasTransitionFinished();\n\n        props.onTransitionStatusChange?.(hasTransitionFinished);\n    });\n\n    return (\n        <Show when={getIsVisible()}>\n            <Portal\n                mount={viewportContext.getPortalRef()}\n                ref={(el) => {\n                    el.style.display = \"contents\";\n                }}\n            >\n                <div\n                    class={[styles.modalRoot, styles.modalAlignmentVariants[getAlignment()]].join(\" \")}\n                    onKeyDown={(e) => FocusManager.focusTrapKeyDown(e, getContainerRef())}\n                >\n                    <div class={styles.modalOverlay} onClick={handleOverlayClick}>\n                        {props.renderOverlay(getTransitionTarget, getTransitionDurationMs)}\n                    </div>\n                    <div\n                        ref={setContainerRef}\n                        class={styles.modalContainer}\n                        style={{\n                            ...CSSUtils.spreadableToStyle(getMargins(), (key) => StringUtils.camelToKebabCase(key)),\n                            \"max-width\": `calc(100% - ${getMargins().marginLeft + getMargins().marginRight}px)`,\n                            \"max-height\": `calc(100% - ${getMargins().marginTop + getMargins().marginBottom}px)`,\n                            \"transform\": getSwipeTransform(),\n                            \"transition-property\": \"transform\",\n                            \"transition-duration\": `${getIsSwiping() ? 0 : getTransitionDurationMs()}ms`,\n                        }}\n                        role={access(props.role) ?? DEFAULT_MODAL_ROLE}\n                        aria-modal=\"true\"\n                        aria-label={access(props.ariaLabel)}\n                        aria-labelledby={access(props.ariaLabelledBy)}\n                        aria-describedby={access(props.ariaDescribedBy)}\n                    >\n                        {props.renderContent(getTransitionTarget, getTransitionDurationMs)}\n                    </div>\n                </div>\n            </Portal>\n        </Show>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Paginator/Paginator.css.js

@@ -0,0 +1,10 @@
+/* empty css                                  */
+/* empty css                             */
+//#region src/Fundamentals/Paginator/Paginator.css.ts
+var paginatorRoot = "_2txh6g0";
+var paginatorItem = "_2txh6g1 _1lgjca40";
+var paginatorGap = "_2txh6g2";
+//#endregion
+export { paginatorGap, paginatorItem, paginatorRoot };
+
+//# sourceMappingURL=Paginator.css.js.map

package/dist/Fundamentals/Paginator/Paginator.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paginator.css.js","names":[],"sources":["../../../src/Fundamentals/Paginator/Paginator.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nimport { buttonElement } from \"../Button/Button.css\";\n\nexport const paginatorRoot = style({\n    display: \"flex\",\n    alignItems: \"center\",\n});\n\nexport const paginatorItem = style([buttonElement, {}]);\n\nexport const paginatorGap = style({\n    display: \"grid\",\n});\n"],"mappings":""}

package/dist/Fundamentals/Paginator/Paginator.js

@@ -0,0 +1,192 @@
+import { access } from "../../Utils/propUtils.js";
+import { InteractionWrapper } from "../InteractionWrapper/InteractionWrapper.js";
+import { PaginatorUtils } from "./Paginator.utils.js";
+import { paginatorGap, paginatorItem, paginatorRoot } from "./Paginator.css.js";
+import { Index, Show, createMemo } from "solid-js";
+import { Dynamic, className, createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, template, use } from "solid-js/web";
+//#region src/Fundamentals/Paginator/Paginator.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button type=button>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<nav>`);
+var DEFAULT_PAGINATOR_STEPS = ["previous", "next"];
+var DEFAULT_PAGINATOR_SIBLING_COUNT = 1;
+var DEFAULT_PAGINATOR_BOUNDARY_COUNT = 1;
+var DEFAULT_PAGINATOR_GAP = 0;
+var DEFAULT_PAGINATOR_LABEL = "Pagination";
+var LEADING_STEPS = ["first", "previous"];
+var TRAILING_STEPS = ["next", "last"];
+var STEP_LABELS = {
+	first: "First page",
+	previous: "Previous page",
+	next: "Next page",
+	last: "Last page"
+};
+var PaginatorItem = (props) => {
+	const getIsDisabled = () => access(props.flags).isDisabled ?? false;
+	const handleClick = (e) => {
+		if (getIsDisabled()) {
+			e.preventDefault();
+			return;
+		}
+		props.onActivate();
+	};
+	const commonProps = {
+		"class": paginatorItem,
+		get "id"() {
+			return access(props.id);
+		},
+		get "aria-label"() {
+			return access(props.ariaLabel);
+		},
+		get "aria-disabled"() {
+			return getIsDisabled() || void 0;
+		},
+		get "aria-current"() {
+			return access(props.isCurrent) ? "page" : void 0;
+		}
+	};
+	return createComponent(Show, {
+		get when() {
+			return access(props.href);
+		},
+		get fallback() {
+			return (() => {
+				var _el$ = _tmpl$();
+				use((element) => props.ref?.(element), _el$);
+				spread(_el$, mergeProps(commonProps, { "onClick": handleClick }), false, true);
+				insert(_el$, () => props.renderContent(() => access(props.flags)));
+				return _el$;
+			})();
+		},
+		get children() {
+			return createComponent(Dynamic, mergeProps({
+				get component() {
+					return props.linkComponent ?? "a";
+				},
+				ref: (element) => props.ref?.(element),
+				get href() {
+					return access(props.href);
+				}
+			}, commonProps, {
+				onClick: handleClick,
+				get children() {
+					return props.renderContent(() => access(props.flags));
+				}
+			}));
+		}
+	});
+};
+var Paginator = (props) => {
+	const getPageCount = createMemo(() => Math.max(Math.trunc(access(props.pageCount)), 0));
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getSteps = createMemo(() => access(props.steps) ?? DEFAULT_PAGINATOR_STEPS);
+	const getEntries = createMemo(() => PaginatorUtils.getEntries(access(props.page), {
+		pageCount: getPageCount(),
+		siblingCount: access(props.siblingCount) ?? DEFAULT_PAGINATOR_SIBLING_COUNT,
+		boundaryCount: access(props.boundaryCount) ?? DEFAULT_PAGINATOR_BOUNDARY_COUNT
+	}));
+	const getLeadingSteps = createMemo(() => LEADING_STEPS.filter((step) => getSteps().includes(step)));
+	const getTrailingSteps = createMemo(() => TRAILING_STEPS.filter((step) => getSteps().includes(step)));
+	const goTo = (page) => {
+		if (page === access(props.page)) return;
+		props.onPageChange?.(page);
+	};
+	const renderStepControl = (getStep) => {
+		const getTargetPage = () => PaginatorUtils.getStepTarget(getStep(), access(props.page), getPageCount());
+		const getIsStepDisabled = () => getIsDisabled() || getTargetPage() === access(props.page);
+		return createComponent(InteractionWrapper, {
+			isDisabled: getIsStepDisabled,
+			extraFlags: () => ({
+				step: getStep(),
+				targetPage: getTargetPage()
+			}),
+			renderControl: (setElementRef, getRenderProps) => createComponent(PaginatorItem, {
+				ref(r$) {
+					var _ref$ = setElementRef;
+					typeof _ref$ === "function" ? _ref$(r$) : setElementRef = r$;
+				},
+				href: () => getIsStepDisabled() ? void 0 : props.computeHref?.(getTargetPage()),
+				isCurrent: false,
+				ariaLabel: () => props.computeStepLabel?.(getStep(), getTargetPage()) ?? STEP_LABELS[getStep()],
+				flags: getRenderProps,
+				get linkComponent() {
+					return props.linkComponent;
+				},
+				renderContent: () => props.renderStep(getStep, getRenderProps),
+				onActivate: () => goTo(getTargetPage())
+			})
+		});
+	};
+	const renderPageControl = (getEntry) => createComponent(InteractionWrapper, {
+		isDisabled: getIsDisabled,
+		extraFlags: () => ({
+			page: getEntry().page,
+			isCurrent: getEntry().page === access(props.page)
+		}),
+		renderControl: (setElementRef, getRenderProps) => createComponent(PaginatorItem, {
+			ref(r$) {
+				var _ref$2 = setElementRef;
+				typeof _ref$2 === "function" ? _ref$2(r$) : setElementRef = r$;
+			},
+			href: () => props.computeHref?.(getEntry().page),
+			isCurrent: () => getRenderProps().isCurrent,
+			ariaLabel: () => props.computePageLabel?.(getEntry().page, getPageCount()) ?? `Page ${getEntry().page}`,
+			flags: getRenderProps,
+			get linkComponent() {
+				return props.linkComponent;
+			},
+			renderContent: () => props.renderPage(getEntry, getRenderProps),
+			onActivate: () => goTo(getEntry().page)
+		})
+	});
+	const renderGapControl = (getEntry) => (() => {
+		var _el$2 = _tmpl$2();
+		className(_el$2, paginatorGap);
+		insert(_el$2, () => props.renderGap(getEntry));
+		return _el$2;
+	})();
+	return (() => {
+		var _el$3 = _tmpl$3();
+		className(_el$3, paginatorRoot);
+		insert(_el$3, createComponent(Index, {
+			get each() {
+				return getLeadingSteps();
+			},
+			children: renderStepControl
+		}), null);
+		insert(_el$3, createComponent(Index, {
+			get each() {
+				return getEntries();
+			},
+			children: (getEntry) => createComponent(Show, {
+				get when() {
+					return memo(() => getEntry().kind === "page")() ? getEntry() : void 0;
+				},
+				get fallback() {
+					return renderGapControl(() => getEntry());
+				},
+				children: renderPageControl
+			})
+		}), null);
+		insert(_el$3, createComponent(Index, {
+			get each() {
+				return getTrailingSteps();
+			},
+			children: renderStepControl
+		}), null);
+		effect((_p$) => {
+			var _v$ = `${access(props.gap) ?? DEFAULT_PAGINATOR_GAP}px`, _v$2 = access(props.ariaLabel) ?? DEFAULT_PAGINATOR_LABEL;
+			_v$ !== _p$.e && setStyleProperty(_el$3, "gap", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$3, "aria-label", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$3;
+	})();
+};
+//#endregion
+export { Paginator };
+
+//# sourceMappingURL=Paginator.js.map

package/dist/Fundamentals/Paginator/Paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paginator.js","names":["Accessor","JSX","Index","Show","createMemo","Dynamic","access","InteractionWrapper","PaginatorGapEntry","PaginatorItemProps","PaginatorPageEntry","PaginatorPageRenderProps","PaginatorProps","PaginatorStep","PaginatorStepRenderProps","PaginatorUtils","styles","DEFAULT_PAGINATOR_STEPS","DEFAULT_PAGINATOR_SIBLING_COUNT","DEFAULT_PAGINATOR_BOUNDARY_COUNT","DEFAULT_PAGINATOR_GAP","DEFAULT_PAGINATOR_LABEL","LEADING_STEPS","TRAILING_STEPS","STEP_LABELS","Record","first","previous","next","last","PaginatorItem","props","getIsDisabled","flags","isDisabled","handleClick","e","MouseEvent","preventDefault","onActivate","commonProps","Omit","HTMLAttributes","HTMLElement","paginatorItem","id","aria-label","ariaLabel","aria-disabled","undefined","aria-current","isCurrent","_$createComponent","when","href","fallback","_el$","_tmpl$","_$use","element","ref","_$spread","_$mergeProps","_$insert","renderContent","children","component","linkComponent","onClick","Paginator","getPageCount","Math","max","trunc","pageCount","getSteps","steps","getEntries","page","siblingCount","boundaryCount","getLeadingSteps","filter","step","includes","getTrailingSteps","goTo","onPageChange","renderStepControl","getStep","getTargetPage","getStepTarget","getIsStepDisabled","extraFlags","targetPage","renderControl","setElementRef","getRenderProps","r$","_ref$","computeHref","computeStepLabel","renderStep","renderPageControl","getEntry","_ref$2","computePageLabel","renderPage","renderGapControl","_el$2","_tmpl$2","_$className","paginatorGap","renderGap","_el$3","_tmpl$3","paginatorRoot","each","_$memo","kind","_$effect","_p$","_v$","gap","_v$2","_$setStyleProperty","t","_$setAttribute"],"sources":["../../../src/Fundamentals/Paginator/Paginator.tsx"],"sourcesContent":["import type { Accessor, JSX } from \"solid-js\";\nimport { Index, Show, createMemo } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\n\nimport { access } from \"../../Utils/propUtils\";\nimport { InteractionWrapper } from \"../InteractionWrapper/InteractionWrapper\";\nimport type {\n    PaginatorGapEntry,\n    PaginatorItemProps,\n    PaginatorPageEntry,\n    PaginatorPageRenderProps,\n    PaginatorProps,\n    PaginatorStep,\n    PaginatorStepRenderProps,\n} from \"./Paginator.types\";\nimport { PaginatorUtils } from \"./Paginator.utils\";\n\nimport * as styles from \"./Paginator.css\";\n\nconst DEFAULT_PAGINATOR_STEPS: PaginatorStep[] = [\"previous\", \"next\"];\nconst DEFAULT_PAGINATOR_SIBLING_COUNT = 1;\nconst DEFAULT_PAGINATOR_BOUNDARY_COUNT = 1;\nconst DEFAULT_PAGINATOR_GAP = 0;\nconst DEFAULT_PAGINATOR_LABEL = \"Pagination\";\n\nconst LEADING_STEPS: PaginatorStep[] = [\"first\", \"previous\"];\nconst TRAILING_STEPS: PaginatorStep[] = [\"next\", \"last\"];\n\nconst STEP_LABELS: Record<PaginatorStep, string> = {\n    first: \"First page\",\n    previous: \"Previous page\",\n    next: \"Next page\",\n    last: \"Last page\",\n};\n\nconst PaginatorItem = (props: PaginatorItemProps) => {\n    const getIsDisabled = () => access(props.flags).isDisabled ?? false;\n\n    const handleClick = (e: MouseEvent) => {\n        if (getIsDisabled()) {\n            e.preventDefault();\n            return;\n        }\n\n        props.onActivate();\n    };\n\n    const commonProps: Omit<JSX.HTMLAttributes<HTMLElement>, \"ref\"> = {\n        \"class\": styles.paginatorItem,\n        get \"id\"() {\n            return access(props.id);\n        },\n        get \"aria-label\"() {\n            return access(props.ariaLabel);\n        },\n        get \"aria-disabled\"() {\n            return getIsDisabled() || undefined;\n        },\n        get \"aria-current\"() {\n            return access(props.isCurrent) ? \"page\" : undefined;\n        },\n    };\n\n    return (\n        <Show\n            when={access(props.href)}\n            fallback={\n                <button type=\"button\" ref={(element) => props.ref?.(element)} {...commonProps} onClick={handleClick}>\n                    {props.renderContent(() => access(props.flags))}\n                </button>\n            }\n        >\n            <Dynamic\n                component={props.linkComponent ?? \"a\"}\n                ref={(element: HTMLElement) => props.ref?.(element)}\n                href={access(props.href)!}\n                {...commonProps}\n                onClick={handleClick}\n            >\n                {props.renderContent(() => access(props.flags))}\n            </Dynamic>\n        </Show>\n    );\n};\n\nexport const Paginator = (props: PaginatorProps) => {\n    const getPageCount = createMemo(() => Math.max(Math.trunc(access(props.pageCount)), 0));\n\n    const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);\n\n    const getSteps = createMemo(() => access(props.steps) ?? DEFAULT_PAGINATOR_STEPS);\n\n    const getEntries = createMemo(() =>\n        PaginatorUtils.getEntries(access(props.page), {\n            pageCount: getPageCount(),\n            siblingCount: access(props.siblingCount) ?? DEFAULT_PAGINATOR_SIBLING_COUNT,\n            boundaryCount: access(props.boundaryCount) ?? DEFAULT_PAGINATOR_BOUNDARY_COUNT,\n        }),\n    );\n\n    const getLeadingSteps = createMemo(() => LEADING_STEPS.filter((step) => getSteps().includes(step)));\n\n    const getTrailingSteps = createMemo(() => TRAILING_STEPS.filter((step) => getSteps().includes(step)));\n\n    const goTo = (page: number) => {\n        if (page === access(props.page)) return;\n\n        void props.onPageChange?.(page);\n    };\n\n    const renderStepControl = (getStep: Accessor<PaginatorStep>) => {\n        const getTargetPage = () => PaginatorUtils.getStepTarget(getStep(), access(props.page), getPageCount());\n\n        const getIsStepDisabled = () => getIsDisabled() || getTargetPage() === access(props.page);\n\n        return (\n            <InteractionWrapper<PaginatorStepRenderProps>\n                isDisabled={getIsStepDisabled}\n                extraFlags={() => ({ step: getStep(), targetPage: getTargetPage() })}\n                renderControl={(setElementRef, getRenderProps) => (\n                    <PaginatorItem\n                        ref={setElementRef}\n                        href={() => (getIsStepDisabled() ? undefined : props.computeHref?.(getTargetPage()))}\n                        isCurrent={false}\n                        ariaLabel={() => props.computeStepLabel?.(getStep(), getTargetPage()) ?? STEP_LABELS[getStep()]}\n                        flags={getRenderProps}\n                        linkComponent={props.linkComponent}\n                        renderContent={() => props.renderStep(getStep, getRenderProps)}\n                        onActivate={() => goTo(getTargetPage())}\n                    />\n                )}\n            />\n        );\n    };\n\n    const renderPageControl = (getEntry: Accessor<PaginatorPageEntry>) => (\n        <InteractionWrapper<PaginatorPageRenderProps>\n            isDisabled={getIsDisabled}\n            extraFlags={() => ({\n                page: getEntry().page,\n                isCurrent: getEntry().page === access(props.page),\n            })}\n            renderControl={(setElementRef, getRenderProps) => (\n                <PaginatorItem\n                    ref={setElementRef}\n                    href={() => props.computeHref?.(getEntry().page)}\n                    isCurrent={() => getRenderProps().isCurrent}\n                    ariaLabel={() =>\n                        props.computePageLabel?.(getEntry().page, getPageCount()) ?? `Page ${getEntry().page}`\n                    }\n                    flags={getRenderProps}\n                    linkComponent={props.linkComponent}\n                    renderContent={() => props.renderPage(getEntry, getRenderProps)}\n                    onActivate={() => goTo(getEntry().page)}\n                />\n            )}\n        />\n    );\n\n    const renderGapControl = (getEntry: Accessor<PaginatorGapEntry>) => (\n        <span class={styles.paginatorGap} aria-hidden=\"true\">\n            {props.renderGap(getEntry)}\n        </span>\n    );\n\n    return (\n        <nav\n            class={styles.paginatorRoot}\n            style={{ gap: `${access(props.gap) ?? DEFAULT_PAGINATOR_GAP}px` }}\n            aria-label={access(props.ariaLabel) ?? DEFAULT_PAGINATOR_LABEL}\n        >\n            <Index each={getLeadingSteps()}>{renderStepControl}</Index>\n\n            <Index each={getEntries()}>\n                {(getEntry) => (\n                    <Show\n                        when={getEntry().kind === \"page\" ? (getEntry() as PaginatorPageEntry) : undefined}\n                        fallback={renderGapControl(() => getEntry() as PaginatorGapEntry)}\n                    >\n                        {renderPageControl}\n                    </Show>\n                )}\n            </Index>\n\n            <Index each={getTrailingSteps()}>{renderStepControl}</Index>\n        </nav>\n    );\n};\n"],"mappings":"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"}

package/dist/Fundamentals/Paginator/Paginator.utils.js

@@ -0,0 +1,56 @@
+import { MathUtils } from "@thewaver/ss-utils";
+//#region src/Fundamentals/Paginator/Paginator.utils.ts
+var FIRST_PAGE = 1;
+var getRange = (from, to) => from > to ? [] : Array.from({ length: to - from + 1 }, (_, index) => from + index);
+var toPages = (pages) => pages.map((page) => ({
+	kind: "page",
+	page
+}));
+var bridge = (from, to) => {
+	if (to < from) return [];
+	if (to === from) return [{
+		kind: "page",
+		page: from
+	}];
+	return [{
+		kind: "gap",
+		from,
+		to
+	}];
+};
+var PaginatorUtils;
+(function(_PaginatorUtils) {
+	_PaginatorUtils.getEntries = (page, range) => {
+		const pageCount = Math.max(Math.trunc(range.pageCount), 0);
+		if (pageCount < FIRST_PAGE) return [];
+		const siblingCount = Math.max(Math.trunc(range.siblingCount), 0);
+		const boundaryCount = Math.max(Math.trunc(range.boundaryCount), 0);
+		const current = MathUtils.clamp(Math.trunc(page), FIRST_PAGE, pageCount);
+		const startPages = getRange(FIRST_PAGE, Math.min(boundaryCount, pageCount));
+		const endPages = getRange(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount);
+		const firstFree = boundaryCount + 1;
+		const lastFree = pageCount - boundaryCount;
+		if (lastFree < firstFree) return toPages(getRange(FIRST_PAGE, pageCount));
+		const width = siblingCount * 2 + 1;
+		const siblingsStart = MathUtils.clamp(current - siblingCount, firstFree, Math.max(lastFree - width + 1, firstFree));
+		const siblingsEnd = Math.min(siblingsStart + width - 1, lastFree);
+		return [
+			...toPages(startPages),
+			...bridge(firstFree, siblingsStart - 1),
+			...toPages(getRange(siblingsStart, siblingsEnd)),
+			...bridge(siblingsEnd + 1, lastFree),
+			...toPages(endPages)
+		];
+	};
+	_PaginatorUtils.getStepTarget = (step, page, pageCount) => {
+		const last = Math.max(Math.trunc(pageCount), FIRST_PAGE);
+		const current = MathUtils.clamp(Math.trunc(page), FIRST_PAGE, last);
+		if (step === "first") return FIRST_PAGE;
+		if (step === "last") return last;
+		return MathUtils.clamp(step === "previous" ? current - 1 : current + 1, FIRST_PAGE, last);
+	};
+})(PaginatorUtils || (PaginatorUtils = {}));
+//#endregion
+export { PaginatorUtils };
+
+//# sourceMappingURL=Paginator.utils.js.map

package/dist/Fundamentals/Paginator/Paginator.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paginator.utils.js","names":[],"sources":["../../../src/Fundamentals/Paginator/Paginator.utils.ts"],"sourcesContent":["import { MathUtils } from \"@thewaver/ss-utils\";\n\nimport type { PaginatorEntry, PaginatorRange, PaginatorStep } from \"./Paginator.types\";\n\nconst FIRST_PAGE = 1;\n\nconst getRange = (from: number, to: number) =>\n    from > to ? [] : Array.from({ length: to - from + 1 }, (_, index) => from + index);\n\nconst toPages = (pages: number[]): PaginatorEntry[] => pages.map((page) => ({ kind: \"page\", page }));\n\nconst bridge = (from: number, to: number): PaginatorEntry[] => {\n    if (to < from) return [];\n    if (to === from) return [{ kind: \"page\", page: from }];\n\n    return [{ kind: \"gap\", from, to }];\n};\n\nexport namespace PaginatorUtils {\n    export const getEntries = (page: number, range: PaginatorRange): PaginatorEntry[] => {\n        const pageCount = Math.max(Math.trunc(range.pageCount), 0);\n\n        if (pageCount < FIRST_PAGE) return [];\n\n        const siblingCount = Math.max(Math.trunc(range.siblingCount), 0);\n        const boundaryCount = Math.max(Math.trunc(range.boundaryCount), 0);\n        const current = MathUtils.clamp(Math.trunc(page), FIRST_PAGE, pageCount);\n\n        const startPages = getRange(FIRST_PAGE, Math.min(boundaryCount, pageCount));\n        const endPages = getRange(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount);\n\n        const firstFree = boundaryCount + 1;\n        const lastFree = pageCount - boundaryCount;\n\n        if (lastFree < firstFree) return toPages(getRange(FIRST_PAGE, pageCount));\n\n        const width = siblingCount * 2 + 1;\n        const siblingsStart = MathUtils.clamp(\n            current - siblingCount,\n            firstFree,\n            Math.max(lastFree - width + 1, firstFree),\n        );\n        const siblingsEnd = Math.min(siblingsStart + width - 1, lastFree);\n\n        return [\n            ...toPages(startPages),\n            ...bridge(firstFree, siblingsStart - 1),\n            ...toPages(getRange(siblingsStart, siblingsEnd)),\n            ...bridge(siblingsEnd + 1, lastFree),\n            ...toPages(endPages),\n        ];\n    };\n\n    export const getStepTarget = (step: PaginatorStep, page: number, pageCount: number) => {\n        const last = Math.max(Math.trunc(pageCount), FIRST_PAGE);\n        const current = MathUtils.clamp(Math.trunc(page), FIRST_PAGE, last);\n\n        if (step === \"first\") return FIRST_PAGE;\n        if (step === \"last\") return last;\n\n        return MathUtils.clamp(step === \"previous\" ? current - 1 : current + 1, FIRST_PAGE, last);\n    };\n}\n"],"mappings":";;AAIA,IAAM,aAAa;AAEnB,IAAM,YAAY,MAAc,OAC5B,OAAO,KAAK,CAAC,IAAI,MAAM,KAAK,EAAE,QAAQ,KAAK,OAAO,EAAE,IAAI,GAAG,UAAU,OAAO,KAAK;AAErF,IAAM,WAAW,UAAsC,MAAM,KAAK,UAAU;CAAE,MAAM;CAAQ;AAAK,EAAE;AAEnG,IAAM,UAAU,MAAc,OAAiC;CAC3D,IAAI,KAAK,MAAM,OAAO,CAAC;CACvB,IAAI,OAAO,MAAM,OAAO,CAAC;EAAE,MAAM;EAAQ,MAAM;CAAK,CAAC;CAErD,OAAO,CAAC;EAAE,MAAM;EAAO;EAAM;CAAG,CAAC;AACrC;AAEO,IAAU;CAAV,SAAA,iBAAA;CACU,gBAAA,cAAc,MAAc,UAA4C;EACjF,MAAM,YAAY,KAAK,IAAI,KAAK,MAAM,MAAM,SAAS,GAAG,CAAC;EAEzD,IAAI,YAAY,YAAY,OAAO,CAAC;EAEpC,MAAM,eAAe,KAAK,IAAI,KAAK,MAAM,MAAM,YAAY,GAAG,CAAC;EAC/D,MAAM,gBAAgB,KAAK,IAAI,KAAK,MAAM,MAAM,aAAa,GAAG,CAAC;EACjE,MAAM,UAAU,UAAU,MAAM,KAAK,MAAM,IAAI,GAAG,YAAY,SAAS;EAEvE,MAAM,aAAa,SAAS,YAAY,KAAK,IAAI,eAAe,SAAS,CAAC;EAC1E,MAAM,WAAW,SAAS,KAAK,IAAI,YAAY,gBAAgB,GAAG,gBAAgB,CAAC,GAAG,SAAS;EAE/F,MAAM,YAAY,gBAAgB;EAClC,MAAM,WAAW,YAAY;EAE7B,IAAI,WAAW,WAAW,OAAO,QAAQ,SAAS,YAAY,SAAS,CAAC;EAExE,MAAM,QAAQ,eAAe,IAAI;EACjC,MAAM,gBAAgB,UAAU,MAC5B,UAAU,cACV,WACA,KAAK,IAAI,WAAW,QAAQ,GAAG,SAAS,CAC5C;EACA,MAAM,cAAc,KAAK,IAAI,gBAAgB,QAAQ,GAAG,QAAQ;EAEhE,OAAO;GACH,GAAG,QAAQ,UAAU;GACrB,GAAG,OAAO,WAAW,gBAAgB,CAAC;GACtC,GAAG,QAAQ,SAAS,eAAe,WAAW,CAAC;GAC/C,GAAG,OAAO,cAAc,GAAG,QAAQ;GACnC,GAAG,QAAQ,QAAQ;EACvB;CACJ;CAEa,gBAAA,iBAAiB,MAAqB,MAAc,cAAsB;EACnF,MAAM,OAAO,KAAK,IAAI,KAAK,MAAM,SAAS,GAAG,UAAU;EACvD,MAAM,UAAU,UAAU,MAAM,KAAK,MAAM,IAAI,GAAG,YAAY,IAAI;EAElE,IAAI,SAAS,SAAS,OAAO;EAC7B,IAAI,SAAS,QAAQ,OAAO;EAE5B,OAAO,UAAU,MAAM,SAAS,aAAa,UAAU,IAAI,UAAU,GAAG,YAAY,IAAI;CAC5F;AACH,EAAA,CAAA,mBAAA,iBAAA,CAAA,EAAD"}

package/dist/Fundamentals/Popover/Popover.css.js

@@ -0,0 +1,7 @@
+/* empty css                           */
+//#region src/Fundamentals/Popover/Popover.css.ts
+var popoverRoot = "_1eyq8gl0";
+//#endregion
+export { popoverRoot };
+
+//# sourceMappingURL=Popover.css.js.map

package/dist/Fundamentals/Popover/Popover.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.css.js","names":[],"sources":["../../../src/Fundamentals/Popover/Popover.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\n\nexport const popoverRoot = style({\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    pointerEvents: \"all\",\n    outline: \"none\",\n\n    selectors: {\n        \"&:focus, &:focus-visible\": {\n            outline: \"none\",\n        },\n    },\n});\n"],"mappings":""}