@pyreon/elements 0.0.2

package/lib/index.js

@@ -0,0 +1,1147 @@
+import { Provider, alignContent, extendCss, makeItResponsive, value } from "@pyreon/unistyle";
+import { Fragment, Portal, createContext, onMount, onUnmount, popContext, pushContext, useContext } from "@pyreon/core";
+import { config, isEmpty, omit, pick, render, throttle } from "@pyreon/ui-core";
+import { Fragment as Fragment$1, jsx, jsxs } from "@pyreon/core/jsx-runtime";
+import { signal } from "@pyreon/reactivity";
+
+//#region src/constants.ts
+const PKG_NAME = "@pyreon/elements";
+
+//#endregion
+//#region src/utils.ts
+const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
+
+//#endregion
+//#region src/helpers/Content/styled.ts
+/**
+* Styled component for content areas (before/content/after). Applies
+* responsive flex alignment, gap spacing between slots based on parent
+* direction (margin-right for inline, margin-bottom for rows), and
+* equalCols flex distribution. The "content" slot gets `flex: 1` to
+* fill remaining space between before and after.
+*/
+const { styled: styled$2, css: css$2, component: component$1 } = config;
+const equalColsCSS = `
+  flex: 1;
+`;
+const typeContentCSS = `
+  flex: 1;
+`;
+const gapDimensions = {
+	inline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	reverseInline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	rows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	},
+	reverseRows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	}
+};
+const calculateGap = ({ direction, type, value: gapValue }) => {
+	if (!direction || !type || type === "content") return void 0;
+	return `${gapDimensions[direction][type]}: ${gapValue};`;
+};
+const styles$2 = ({ css: cssFn, theme: t, rootSize }) => cssFn`
+  ${alignContent({
+	direction: t.direction,
+	alignX: t.alignX,
+	alignY: t.alignY
+})};
+
+  ${t.equalCols && equalColsCSS};
+
+  ${t.gap && t.contentType && calculateGap({
+	direction: t.parentDirection,
+	type: t.contentType,
+	value: value(t.gap, rootSize)
+})};
+
+  ${t.extraStyles && extendCss(t.extraStyles)};
+`;
+const StyledComponent = styled$2(component$1)`
+  ${`box-sizing: border-box;`};
+
+  display: flex;
+  align-self: stretch;
+  flex-wrap: wrap;
+
+  ${(({ $contentType }) => $contentType === "content" && typeContentCSS)};
+
+  ${makeItResponsive({
+	key: "$element",
+	styles: styles$2,
+	css: css$2,
+	normalize: true
+})};
+`;
+
+//#endregion
+//#region src/helpers/Content/component.tsx
+/**
+* Content area used inside Element to render one of the three
+* layout slots (before, content, after). Passes alignment, direction,
+* gap, and equalCols styling props to the underlying styled component.
+* Adds a `data-pyr-element` attribute in development for debugging.
+*
+* Children are rendered via core `render()`.
+*/
+const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, children, ...props }) => {
+	return /* @__PURE__ */ jsx(StyledComponent, {
+		as: tag,
+		$contentType: contentType,
+		$element: {
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extraStyles: extendCss
+		},
+		...IS_DEVELOPMENT ? { "data-pyr-element": contentType } : {},
+		...props,
+		children: render(children)
+	});
+};
+
+//#endregion
+//#region src/helpers/Content/index.ts
+var Content_default = Component$9;
+
+//#endregion
+//#region src/helpers/Wrapper/styled.ts
+/**
+* Styled component for the Element wrapper layer. Handles responsive
+* block/inline-flex display, direction, alignment, and custom CSS injection.
+* Includes special handling for the `parentFix` / `childFix` flags that
+* split flex behavior across two DOM nodes for button/fieldset/legend
+* elements where a single flex container is insufficient.
+*/
+const { styled: styled$1, css: css$1, component } = config;
+const childFixCSS = `
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+`;
+const parentFixCSS = `
+  flex-direction: column;
+`;
+const fullHeightCSS = `
+  height: 100%;
+`;
+const blockCSS = `
+  align-self: stretch;
+  width: 100%;
+`;
+const childFixPosition = (isBlock) => `display: ${isBlock ? "flex" : "inline-flex"};`;
+const styles$1 = ({ theme: t, css: cssFn }) => cssFn`
+  ${t.alignY === "block" && fullHeightCSS};
+
+  ${alignContent({
+	direction: t.direction,
+	alignX: t.alignX,
+	alignY: t.alignY
+})};
+
+  ${t.block && blockCSS};
+  ${t.alignY === "block" && t.block && fullHeightCSS};
+
+  ${!t.childFix && childFixPosition(t.block)};
+  ${t.parentFix && parentFixCSS};
+
+  ${t.extraStyles && extendCss(t.extraStyles)};
+`;
+const platformCSS = `box-sizing: border-box;`;
+var styled_default$1 = styled$1(component)`
+  position: relative;
+  ${platformCSS};
+
+  ${(({ $childFix }) => $childFix && childFixCSS)};
+
+  ${makeItResponsive({
+	key: "$element",
+	styles: styles$1,
+	css: css$1,
+	normalize: true
+})};
+`;
+
+//#endregion
+//#region src/helpers/Wrapper/constants.ts
+/**
+* HTML elements that need a two-layer DOM workaround because browsers do not
+* fully support flexbox layout on button, fieldset, and legend elements.
+* @see https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-or-fieldset-elements
+*/
+const INLINE_ELEMENTS_FLEX_FIX = {
+	button: true,
+	fieldset: true,
+	legend: true
+};
+
+//#endregion
+//#region src/helpers/Wrapper/utils.ts
+const isWebFixNeeded = (tag) => {
+	if (tag && tag in INLINE_ELEMENTS_FLEX_FIX) return true;
+	return false;
+};
+
+//#endregion
+//#region src/helpers/Wrapper/component.tsx
+/**
+* Wrapper component that serves as the outermost styled container for Element.
+* On web, it detects button/fieldset/legend tags and applies a two-layer flex
+* fix (parent + child Styled) because these HTML elements do not natively
+* support `display: flex` consistently across browsers.
+*/
+const DEV_PROPS = IS_DEVELOPMENT ? { "data-pyr-element": "Element" } : {};
+const Component$8 = ({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ref, ...props }) => {
+	const COMMON_PROPS = {
+		...props,
+		...DEV_PROPS,
+		ref,
+		as: tag
+	};
+	const needsFix = !props.dangerouslySetInnerHTML && isWebFixNeeded(tag);
+	const normalElement = {
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extraStyles: extendCss
+	};
+	const parentFixElement = {
+		parentFix: true,
+		block,
+		extraStyles: extendCss
+	};
+	const childFixElement = {
+		childFix: true,
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	};
+	if (!needsFix) return /* @__PURE__ */ jsx(styled_default$1, {
+		...COMMON_PROPS,
+		$element: normalElement,
+		children
+	});
+	const asTag = isInline ? "span" : "div";
+	return /* @__PURE__ */ jsx(styled_default$1, {
+		...COMMON_PROPS,
+		$element: parentFixElement,
+		children: /* @__PURE__ */ jsx(styled_default$1, {
+			as: asTag,
+			$childFix: true,
+			$element: childFixElement,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/helpers/Wrapper/index.ts
+var Wrapper_default = Component$8;
+
+//#endregion
+//#region src/Element/constants.ts
+/**
+* HTML tags that are inline-level by default. When Element renders one of
+* these tags, child Content wrappers use `span` instead of `div` to
+* preserve valid HTML nesting.
+*/
+const INLINE_ELEMENTS = {
+	span: true,
+	a: true,
+	button: true,
+	input: true,
+	label: true,
+	select: true,
+	textarea: true,
+	br: true,
+	img: true,
+	strong: true,
+	small: true,
+	code: true,
+	b: true,
+	big: true,
+	i: true,
+	tt: true,
+	abbr: true,
+	acronym: true,
+	cite: true,
+	dfn: true,
+	em: true,
+	kbd: true,
+	samp: true,
+	var: true,
+	bdo: true,
+	map: true,
+	object: true,
+	q: true,
+	script: true,
+	sub: true,
+	sup: true
+};
+/**
+* HTML void/self-closing elements that cannot have children. When Element
+* detects one of these tags, it skips rendering beforeContent/content/afterContent
+* and returns the Wrapper alone.
+*/
+const EMPTY_ELEMENTS = {
+	area: true,
+	base: true,
+	br: true,
+	col: true,
+	embed: true,
+	hr: true,
+	img: true,
+	input: true,
+	keygen: true,
+	link: true,
+	textarea: true,
+	source: true,
+	track: true,
+	wbr: true
+};
+
+//#endregion
+//#region src/Element/utils.ts
+/** Checks whether the given HTML tag is an inline-level element, used to determine sub-tag nesting. */
+const isInlineElement = (tag) => {
+	if (tag && tag in INLINE_ELEMENTS) return true;
+	return false;
+};
+/** Checks whether the given HTML tag is a void element that cannot have children. */
+const getShouldBeEmpty = (tag) => {
+	if (tag && tag in EMPTY_ELEMENTS) return true;
+	return false;
+};
+
+//#endregion
+//#region src/Element/component.tsx
+/**
+* Core building block of the elements package. Renders a three-section layout
+* (beforeContent / content / afterContent) inside a flex Wrapper. When only
+* content is present, the Wrapper inherits content-level alignment directly
+* to avoid an unnecessary nesting layer. Handles HTML-specific edge cases
+* like void elements (input, img) and inline elements (span, a) by
+* skipping children or switching sub-tags accordingly.
+*/
+const equalize = (el, direction) => {
+	const beforeEl = el.firstElementChild;
+	const afterEl = el.lastElementChild;
+	if (beforeEl && afterEl && beforeEl !== afterEl) {
+		const type = direction === "rows" ? "height" : "width";
+		const prop = type === "height" ? "offsetHeight" : "offsetWidth";
+		const beforeSize = beforeEl[prop];
+		const afterSize = afterEl[prop];
+		if (Number.isInteger(beforeSize) && Number.isInteger(afterSize)) {
+			const maxSize = `${Math.max(beforeSize, afterSize)}px`;
+			beforeEl.style[type] = maxSize;
+			afterEl.style[type] = maxSize;
+		}
+	}
+};
+const defaultDirection = "inline";
+const defaultContentDirection = "rows";
+const defaultAlignX = "left";
+const defaultAlignY = "center";
+const Component = ({ innerRef, tag, label, content, children, beforeContent, afterContent, equalBeforeAfter, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ref, ...props }) => {
+	const shouldBeEmpty = !!props.dangerouslySetInnerHTML || getShouldBeEmpty(tag);
+	const isSimpleElement = !beforeContent && !afterContent;
+	const CHILDREN = children ?? content ?? label;
+	const isInline = isInlineElement(tag);
+	const SUB_TAG = isInline ? "span" : void 0;
+	let wrapperDirection = direction;
+	let wrapperAlignX = alignX;
+	let wrapperAlignY = alignY;
+	if (isSimpleElement) {
+		if (contentDirection) wrapperDirection = contentDirection;
+		if (contentAlignX) wrapperAlignX = contentAlignX;
+		if (contentAlignY) wrapperAlignY = contentAlignY;
+	} else if (direction) wrapperDirection = direction;
+	else wrapperDirection = defaultDirection;
+	let equalizeRef = null;
+	const externalRef = ref ?? innerRef;
+	const mergedRef = (node) => {
+		equalizeRef = node;
+		if (typeof externalRef === "function") externalRef(node);
+		else if (externalRef != null) externalRef.current = node;
+	};
+	if (equalBeforeAfter && beforeContent && afterContent) onMount(() => {
+		if (equalizeRef) equalize(equalizeRef, direction);
+	});
+	const WRAPPER_PROPS = {
+		ref: mergedRef,
+		extendCss: css,
+		tag,
+		block,
+		direction: wrapperDirection,
+		alignX: wrapperAlignX,
+		alignY: wrapperAlignY,
+		as: void 0
+	};
+	if (shouldBeEmpty) return /* @__PURE__ */ jsx(Wrapper_default, {
+		...props,
+		...WRAPPER_PROPS
+	});
+	return /* @__PURE__ */ jsxs(Wrapper_default, {
+		...props,
+		...WRAPPER_PROPS,
+		isInline,
+		children: [
+			beforeContent && /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "before",
+				parentDirection: wrapperDirection,
+				extendCss: beforeContentCss,
+				direction: beforeContentDirection,
+				alignX: beforeContentAlignX,
+				alignY: beforeContentAlignY,
+				equalCols,
+				gap,
+				children: beforeContent
+			}),
+			isSimpleElement ? render(CHILDREN) : /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "content",
+				parentDirection: wrapperDirection,
+				extendCss: contentCss,
+				direction: contentDirection,
+				alignX: contentAlignX,
+				alignY: contentAlignY,
+				equalCols,
+				children: CHILDREN
+			}),
+			afterContent && /* @__PURE__ */ jsx(Content_default, {
+				tag: SUB_TAG,
+				contentType: "after",
+				parentDirection: wrapperDirection,
+				extendCss: afterContentCss,
+				direction: afterContentDirection,
+				alignX: afterContentAlignX,
+				alignY: afterContentAlignY,
+				equalCols,
+				gap,
+				children: afterContent
+			})
+		]
+	});
+};
+const name$5 = `${PKG_NAME}/Element`;
+Component.displayName = name$5;
+Component.pkgName = PKG_NAME;
+Component.PYREON__COMPONENT = name$5;
+
+//#endregion
+//#region src/helpers/Iterator/component.tsx
+const classifyData = (data) => {
+	const items = data.filter((item) => item != null && !(typeof item === "object" && isEmpty(item)));
+	if (items.length === 0) return null;
+	let isSimple = true;
+	let isComplex = true;
+	for (const item of items) if (typeof item === "string" || typeof item === "number") isComplex = false;
+	else if (typeof item === "object") isSimple = false;
+	else {
+		isSimple = false;
+		isComplex = false;
+	}
+	if (isSimple) return {
+		type: "simple",
+		data: items
+	};
+	if (isComplex) return {
+		type: "complex",
+		data: items
+	};
+	return null;
+};
+const RESERVED_PROPS = [
+	"children",
+	"component",
+	"wrapComponent",
+	"data",
+	"itemKey",
+	"valueName",
+	"itemProps",
+	"wrapProps"
+];
+const attachItemProps = ({ i, length }) => {
+	const position = i + 1;
+	return {
+		index: i,
+		first: position === 1,
+		last: position === length,
+		odd: position % 2 === 1,
+		even: position % 2 === 0,
+		position
+	};
+};
+const Component$7 = (props) => {
+	const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps } = props;
+	const injectItemProps = typeof itemProps === "function" ? itemProps : () => itemProps;
+	const injectWrapItemProps = typeof wrapProps === "function" ? wrapProps : () => wrapProps;
+	const getKey = (item, index) => {
+		if (typeof itemKey === "function") return itemKey(item, index);
+		return index;
+	};
+	const renderChild = (child, total = 1, i = 0) => {
+		if (!itemProps && !Wrapper) return child;
+		const extendedProps = attachItemProps({
+			i,
+			length: total
+		});
+		const finalItemProps = itemProps ? injectItemProps({}, extendedProps) : {};
+		if (Wrapper) return /* @__PURE__ */ jsx(Wrapper, {
+			...wrapProps ? injectWrapItemProps({}, extendedProps) : {},
+			children: render(child, finalItemProps)
+		}, i);
+		return render(child, {
+			key: i,
+			...finalItemProps
+		});
+	};
+	const renderChildren = () => {
+		if (!children) return null;
+		if (Array.isArray(children)) return children.map((item, i) => renderChild(item, children.length, i));
+		if (children && typeof children === "object" && "type" in children && children.type === Fragment) {
+			const fragmentChildren = children.children;
+			const childrenLength = fragmentChildren.length;
+			return fragmentChildren.map((item, i) => renderChild(item, childrenLength, i));
+		}
+		return renderChild(children);
+	};
+	const renderSimpleArray = (simpleData) => {
+		const { length } = simpleData;
+		if (length === 0) return null;
+		return simpleData.map((item, i) => {
+			const key = getKey(item, i);
+			const keyName = valueName ?? "children";
+			const extendedProps = attachItemProps({
+				i,
+				length
+			});
+			const finalItemProps = {
+				...itemProps ? injectItemProps({ [keyName]: item }, extendedProps) : {},
+				[keyName]: item
+			};
+			if (Wrapper) return /* @__PURE__ */ jsx(Wrapper, {
+				...wrapProps ? injectWrapItemProps({ [keyName]: item }, extendedProps) : {},
+				children: render(component, finalItemProps)
+			}, key);
+			return render(component, {
+				key,
+				...finalItemProps
+			});
+		});
+	};
+	const getObjectKey = (item, index) => {
+		if (!itemKey) return item.key ?? item.id ?? item.itemId ?? index;
+		if (typeof itemKey === "function") return itemKey(item, index);
+		if (typeof itemKey === "string") return item[itemKey];
+		return index;
+	};
+	const renderComplexArray = (complexData) => {
+		const { length } = complexData;
+		if (length === 0) return null;
+		return complexData.map((item, i) => {
+			const { component: itemComponent, ...restItem } = item;
+			const renderItem = itemComponent ?? component;
+			const key = getObjectKey(restItem, i);
+			const extendedProps = attachItemProps({
+				i,
+				length
+			});
+			const finalItemProps = {
+				...itemProps ? injectItemProps(item, extendedProps) : {},
+				...restItem
+			};
+			if (Wrapper && !itemComponent) return /* @__PURE__ */ jsx(Wrapper, {
+				...wrapProps ? injectWrapItemProps(item, extendedProps) : {},
+				children: render(renderItem, finalItemProps)
+			}, key);
+			return render(renderItem, {
+				key,
+				...finalItemProps
+			});
+		});
+	};
+	const renderItems = () => {
+		if (children) return renderChildren();
+		if (component && Array.isArray(data)) {
+			const classified = classifyData(data);
+			if (!classified) return null;
+			if (classified.type === "simple") return renderSimpleArray(classified.data);
+			return renderComplexArray(classified.data);
+		}
+		return null;
+	};
+	return renderItems();
+};
+var component_default = Object.assign(Component$7, {
+	isIterator: true,
+	RESERVED_PROPS
+});
+
+//#endregion
+//#region src/helpers/Iterator/index.ts
+var Iterator_default = component_default;
+
+//#endregion
+//#region src/List/component.tsx
+/**
+* List component that combines Iterator (data-driven rendering) with an
+* optional Element root wrapper. When `rootElement` is false (default),
+* it renders a bare Iterator as a fragment. When true, the Iterator output
+* is wrapped in an Element that receives all non-iterator props (e.g.,
+* layout, alignment, css), allowing the list to be styled as a single block.
+*/
+const Component$1 = (({ rootElement = false, ref, ...props }) => {
+	const renderedList = /* @__PURE__ */ jsx(Iterator_default, { ...pick(props, Iterator_default.RESERVED_PROPS) });
+	if (!rootElement) return renderedList;
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		...omit(props, Iterator_default.RESERVED_PROPS),
+		children: renderedList
+	});
+});
+const name$4 = `${PKG_NAME}/List`;
+Component$1.displayName = name$4;
+Component$1.pkgName = PKG_NAME;
+Component$1.PYREON__COMPONENT = name$4;
+
+//#endregion
+//#region src/Overlay/context.tsx
+const context = createContext({});
+const useOverlayContext = () => useContext(context);
+const Component$3 = ({ children, blocked, setBlocked, setUnblocked }) => {
+	const ctx = {
+		blocked,
+		setBlocked,
+		setUnblocked
+	};
+	pushContext(new Map([[context.id, ctx]]));
+	onUnmount(() => popContext());
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+};
+
+//#endregion
+//#region src/Overlay/useOverlay.tsx
+/**
+* Core hook powering the Overlay component. Manages open/close state, DOM
+* event listeners (click, hover, scroll, resize, ESC key), and dynamic
+* positioning of overlay content relative to its trigger. Supports dropdown,
+* tooltip, popover, and modal types with automatic edge-of-viewport flipping.
+* Event handlers are throttled for performance, and nested overlay blocking
+* is coordinated through the overlay context.
+*/
+let modalOverflowCount = 0;
+const sel = (cond, a, b) => cond ? a : b;
+const devWarn = (msg) => {
+	if (!IS_DEVELOPMENT) return;
+	console.warn(msg);
+};
+const calcDropdownVertical = (c, t, align, alignX, offsetX, offsetY) => {
+	const pos = {};
+	const topPos = t.top - offsetY - c.height;
+	const bottomPos = t.bottom + offsetY;
+	const leftPos = t.left + offsetX;
+	const rightPos = t.right - offsetX - c.width;
+	const fitsTop = topPos >= 0;
+	const fitsBottom = bottomPos + c.height <= window.innerHeight;
+	const fitsLeft = leftPos + c.width <= window.innerWidth;
+	const fitsRight = rightPos >= 0;
+	const useTop = sel(align === "top", fitsTop, !fitsBottom);
+	pos.top = sel(useTop, topPos, bottomPos);
+	const resolvedAlignY = sel(useTop, "top", "bottom");
+	let resolvedAlignX = alignX;
+	if (alignX === "left") {
+		pos.left = sel(fitsLeft, leftPos, rightPos);
+		resolvedAlignX = sel(fitsLeft, "left", "right");
+	} else if (alignX === "right") {
+		pos.left = sel(fitsRight, rightPos, leftPos);
+		resolvedAlignX = sel(fitsRight, "right", "left");
+	} else {
+		const center = t.left + (t.right - t.left) / 2 - c.width / 2;
+		const fitsCL = center >= 0;
+		const fitsCR = center + c.width <= window.innerWidth;
+		if (fitsCL && fitsCR) {
+			resolvedAlignX = "center";
+			pos.left = center;
+		} else if (fitsCL) {
+			resolvedAlignX = "left";
+			pos.left = leftPos;
+		} else if (fitsCR) {
+			resolvedAlignX = "right";
+			pos.left = rightPos;
+		}
+	}
+	return {
+		pos,
+		resolvedAlignX,
+		resolvedAlignY
+	};
+};
+const calcDropdownHorizontal = (c, t, align, alignY, offsetX, offsetY) => {
+	const pos = {};
+	const leftPos = t.left - offsetX - c.width;
+	const rightPos = t.right + offsetX;
+	const topPos = t.top + offsetY;
+	const bottomPos = t.bottom - offsetY - c.height;
+	const fitsLeft = leftPos >= 0;
+	const fitsRight = rightPos + c.width <= window.innerWidth;
+	const fitsTop = topPos + c.height <= window.innerHeight;
+	const fitsBottom = bottomPos >= 0;
+	const useLeft = sel(align === "left", fitsLeft, !fitsRight);
+	pos.left = sel(useLeft, leftPos, rightPos);
+	const resolvedAlignX = sel(useLeft, "left", "right");
+	let resolvedAlignY = alignY;
+	if (alignY === "top") {
+		pos.top = sel(fitsTop, topPos, bottomPos);
+		resolvedAlignY = sel(fitsTop, "top", "bottom");
+	} else if (alignY === "bottom") {
+		pos.top = sel(fitsBottom, bottomPos, topPos);
+		resolvedAlignY = sel(fitsBottom, "bottom", "top");
+	} else {
+		const center = t.top + (t.bottom - t.top) / 2 - c.height / 2;
+		const fitsCT = center >= 0;
+		const fitsCB = center + c.height <= window.innerHeight;
+		if (fitsCT && fitsCB) {
+			resolvedAlignY = "center";
+			pos.top = center;
+		} else if (fitsCT) {
+			resolvedAlignY = "top";
+			pos.top = topPos;
+		} else if (fitsCB) {
+			resolvedAlignY = "bottom";
+			pos.top = bottomPos;
+		}
+	}
+	return {
+		pos,
+		resolvedAlignX,
+		resolvedAlignY
+	};
+};
+const calcModalPos = (c, alignX, alignY, offsetX, offsetY) => {
+	const pos = {};
+	switch (alignX) {
+		case "right":
+			pos.right = offsetX;
+			break;
+		case "left":
+			pos.left = offsetX;
+			break;
+		case "center":
+			pos.left = window.innerWidth / 2 - c.width / 2;
+			break;
+		default: pos.right = offsetX;
+	}
+	switch (alignY) {
+		case "top":
+			pos.top = offsetY;
+			break;
+		case "center":
+			pos.top = window.innerHeight / 2 - c.height / 2;
+			break;
+		case "bottom":
+			pos.bottom = offsetY;
+			break;
+		default: pos.top = offsetY;
+	}
+	return pos;
+};
+const adjustForAncestor = (pos, ancestor) => {
+	if (ancestor.top === 0 && ancestor.left === 0) return pos;
+	const result = { ...pos };
+	if (typeof result.top === "number") result.top -= ancestor.top;
+	if (typeof result.bottom === "number") result.bottom += ancestor.top;
+	if (typeof result.left === "number") result.left -= ancestor.left;
+	if (typeof result.right === "number") result.right += ancestor.left;
+	return result;
+};
+const computePosition = (type, align, alignX, alignY, offsetX, offsetY, triggerEl, contentEl, ancestorOffset) => {
+	const isDropdown = [
+		"dropdown",
+		"tooltip",
+		"popover"
+	].includes(type);
+	if (isDropdown && (!triggerEl || !contentEl)) {
+		devWarn(`[@pyreon/elements] Overlay (${type}): ${triggerEl ? "contentRef" : "triggerRef"} is not attached. Position cannot be calculated without both refs.`);
+		return { pos: {} };
+	}
+	if (isDropdown && triggerEl && contentEl) {
+		const c = contentEl.getBoundingClientRect();
+		const t = triggerEl.getBoundingClientRect();
+		const result = align === "top" || align === "bottom" ? calcDropdownVertical(c, t, align, alignX, offsetX, offsetY) : calcDropdownHorizontal(c, t, align, alignY, offsetX, offsetY);
+		return {
+			pos: adjustForAncestor(result.pos, ancestorOffset),
+			resolvedAlignX: result.resolvedAlignX,
+			resolvedAlignY: result.resolvedAlignY
+		};
+	}
+	if (type === "modal") {
+		if (!contentEl) {
+			devWarn("[@pyreon/elements] Overlay (modal): contentRef is not attached. Modal position cannot be calculated without a content element.");
+			return { pos: {} };
+		}
+		return { pos: adjustForAncestor(calcModalPos(contentEl.getBoundingClientRect(), alignX, alignY, offsetX, offsetY), ancestorOffset) };
+	}
+	return { pos: {} };
+};
+const processVisibilityEvent = (e, active, openOn, closeOn, isTrigger, isContent, showContent, hideContent) => {
+	if (!active && openOn === "click" && e.type === "click" && isTrigger(e)) {
+		showContent();
+		return;
+	}
+	if (!active) return;
+	if (closeOn === "hover" && e.type === "scroll") {
+		hideContent();
+		return;
+	}
+	if (e.type !== "click") return;
+	if (closeOn === "click") hideContent();
+	else if (closeOn === "clickOnTrigger" && isTrigger(e)) hideContent();
+	else if (closeOn === "clickOutsideContent" && !isContent(e)) hideContent();
+};
+const useOverlay = ({ isOpen = false, openOn = "click", closeOn = "click", type = "dropdown", position = "fixed", align = "bottom", alignX: propAlignX = "left", alignY: propAlignY = "bottom", offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = true, hoverDelay = 100, disabled, onOpen, onClose } = {}) => {
+	const ctx = useOverlayContext();
+	const active = signal(isOpen);
+	const isContentLoaded = signal(false);
+	const innerAlignX = signal(propAlignX);
+	const innerAlignY = signal(propAlignY);
+	const blockedCount = signal(0);
+	const blocked = () => blockedCount() > 0;
+	let triggerEl = null;
+	let contentEl = null;
+	let hoverTimeout = null;
+	const triggerRef = (node) => {
+		triggerEl = node;
+	};
+	const contentRefCallback = (node) => {
+		contentEl = node;
+		isContentLoaded.set(!!node);
+	};
+	const setBlocked = () => blockedCount.update((c) => c + 1);
+	const setUnblocked = () => blockedCount.update((c) => Math.max(0, c - 1));
+	const showContent = () => {
+		active.set(true);
+		onOpen?.();
+		ctx.setBlocked?.();
+	};
+	const hideContent = () => {
+		active.set(false);
+		isContentLoaded.set(false);
+		onClose?.();
+		ctx.setUnblocked?.();
+	};
+	const getAncestorOffset = () => {
+		if (position !== "absolute" || !contentEl) return {
+			top: 0,
+			left: 0
+		};
+		const offsetParent = contentEl.offsetParent;
+		if (!offsetParent || offsetParent === document.body) return {
+			top: 0,
+			left: 0
+		};
+		const rect = offsetParent.getBoundingClientRect();
+		return {
+			top: rect.top,
+			left: rect.left
+		};
+	};
+	const calculateContentPosition = () => {
+		if (!active() || !isContentLoaded()) return {};
+		const result = computePosition(type, align, propAlignX, propAlignY, offsetX, offsetY, triggerEl, contentEl, getAncestorOffset());
+		if (result.resolvedAlignX) innerAlignX.set(result.resolvedAlignX);
+		if (result.resolvedAlignY) innerAlignY.set(result.resolvedAlignY);
+		return result.pos;
+	};
+	const assignContentPosition = (values = {}) => {
+		if (!contentEl) return;
+		const el = contentEl;
+		const setValue = (param) => value(param, 16);
+		el.style.position = position;
+		el.style.top = values.top != null ? setValue(values.top) : "";
+		el.style.bottom = values.bottom != null ? setValue(values.bottom) : "";
+		el.style.left = values.left != null ? setValue(values.left) : "";
+		el.style.right = values.right != null ? setValue(values.right) : "";
+	};
+	const setContentPosition = () => {
+		assignContentPosition(calculateContentPosition());
+	};
+	const isNodeOrChild = (getRef) => (e) => {
+		const ref = getRef();
+		if (e?.target && ref) return ref.contains(e.target) || e.target === ref;
+		return false;
+	};
+	const handleVisibilityByEventType = (e) => {
+		if (blocked() || disabled) return;
+		processVisibilityEvent(e, active(), openOn, closeOn, isNodeOrChild(() => triggerEl), isNodeOrChild(() => contentEl), showContent, hideContent);
+	};
+	const handleContentPosition = throttle(() => setContentPosition(), throttleDelay);
+	const handleClick = (e) => handleVisibilityByEventType(e);
+	const handleVisibility = throttle((e) => handleVisibilityByEventType(e), throttleDelay);
+	const setupListeners = () => {
+		const cleanups = [];
+		if (openOn === "click" || [
+			"click",
+			"clickOnTrigger",
+			"clickOutsideContent"
+		].includes(closeOn)) {
+			window.addEventListener("click", handleClick);
+			cleanups.push(() => window.removeEventListener("click", handleClick));
+		}
+		if (closeOnEsc) {
+			const handleEscKey = (e) => {
+				if (e.key === "Escape" && active() && !blocked()) hideContent();
+			};
+			window.addEventListener("keydown", handleEscKey);
+			cleanups.push(() => window.removeEventListener("keydown", handleEscKey));
+		}
+		if (openOn === "hover" || closeOn === "hover") {
+			const clearHoverTimeout = () => {
+				if (hoverTimeout != null) {
+					clearTimeout(hoverTimeout);
+					hoverTimeout = null;
+				}
+			};
+			const scheduleHide = () => {
+				clearHoverTimeout();
+				hoverTimeout = setTimeout(hideContent, hoverDelay);
+			};
+			const onTriggerEnter = () => {
+				clearHoverTimeout();
+				if (openOn === "hover" && !active()) showContent();
+			};
+			const onTriggerLeave = () => {
+				if (closeOn === "hover" && active()) scheduleHide();
+			};
+			const onContentEnter = () => {
+				clearHoverTimeout();
+			};
+			const onContentLeave = () => {
+				if (closeOn === "hover" && active()) scheduleHide();
+			};
+			const attachHoverListeners = () => {
+				if (triggerEl) {
+					triggerEl.addEventListener("mouseenter", onTriggerEnter);
+					triggerEl.addEventListener("mouseleave", onTriggerLeave);
+				}
+				if (contentEl) {
+					contentEl.addEventListener("mouseenter", onContentEnter);
+					contentEl.addEventListener("mouseleave", onContentLeave);
+				}
+			};
+			attachHoverListeners();
+			cleanups.push(() => {
+				clearHoverTimeout();
+				if (triggerEl) {
+					triggerEl.removeEventListener("mouseenter", onTriggerEnter);
+					triggerEl.removeEventListener("mouseleave", onTriggerLeave);
+				}
+				if (contentEl) {
+					contentEl.removeEventListener("mouseenter", onContentEnter);
+					contentEl.removeEventListener("mouseleave", onContentLeave);
+				}
+			});
+		}
+		const shouldSetOverflow = type === "modal";
+		const onScroll = (e) => {
+			handleContentPosition();
+			handleVisibility(e);
+		};
+		if (shouldSetOverflow) {
+			modalOverflowCount++;
+			if (modalOverflowCount === 1) document.body.style.overflow = "hidden";
+		}
+		window.addEventListener("resize", handleContentPosition);
+		window.addEventListener("scroll", onScroll, { passive: true });
+		cleanups.push(() => {
+			handleContentPosition.cancel();
+			handleVisibility.cancel();
+			if (shouldSetOverflow) {
+				modalOverflowCount--;
+				if (modalOverflowCount === 0) document.body.style.overflow = "";
+			}
+			window.removeEventListener("resize", handleContentPosition);
+			window.removeEventListener("scroll", onScroll);
+		});
+		if (parentContainer) {
+			if (closeOn !== "hover") parentContainer.style.overflow = "hidden";
+			const onParentScroll = (e) => {
+				handleContentPosition();
+				handleVisibility(e);
+			};
+			parentContainer.addEventListener("scroll", onParentScroll, { passive: true });
+			cleanups.push(() => {
+				parentContainer.style.overflow = "";
+				parentContainer.removeEventListener("scroll", onParentScroll);
+			});
+		}
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+		};
+	};
+	if (disabled) active.set(false);
+	return {
+		triggerRef,
+		contentRef: contentRefCallback,
+		active,
+		align,
+		alignX: innerAlignX,
+		alignY: innerAlignY,
+		showContent,
+		hideContent,
+		blocked,
+		setBlocked,
+		setUnblocked,
+		setupListeners,
+		Provider: Component$3
+	};
+};
+
+//#endregion
+//#region src/Overlay/component.tsx
+const IS_BROWSER = typeof window !== "undefined";
+const Component$2 = ({ children, trigger, DOMLocation, triggerRefName = "ref", contentRefName = "ref", ...props }) => {
+	const { active, triggerRef, contentRef, showContent, hideContent, align, alignX, alignY, setupListeners, Provider, ...ctx } = useOverlay(props);
+	const { openOn, closeOn, type } = props;
+	const passHandlers = openOn === "manual" || closeOn === "manual" || closeOn === "clickOutsideContent";
+	const ariaHasPopup = (() => {
+		switch (type) {
+			case "modal": return "dialog";
+			case "tooltip": return "true";
+			default: return "menu";
+		}
+	})();
+	onMount(() => {
+		return setupListeners();
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [render(trigger, {
+		[triggerRefName]: triggerRef,
+		active: active(),
+		"aria-expanded": active(),
+		"aria-haspopup": ariaHasPopup,
+		...passHandlers ? {
+			showContent,
+			hideContent
+		} : {}
+	}), () => IS_BROWSER && active() ? /* @__PURE__ */ jsx(Portal, {
+		target: DOMLocation ?? document.body,
+		children: /* @__PURE__ */ jsx(Provider, {
+			...ctx,
+			children: render(children, {
+				[contentRefName]: contentRef,
+				role: type === "modal" ? "dialog" : void 0,
+				"aria-modal": type === "modal" ? true : void 0,
+				active: active(),
+				align,
+				alignX: alignX(),
+				alignY: alignY(),
+				...passHandlers ? {
+					showContent,
+					hideContent
+				} : {}
+			})
+		})
+	}) : null] });
+};
+const name$3 = `${PKG_NAME}/Overlay`;
+Component$2.displayName = name$3;
+Component$2.pkgName = PKG_NAME;
+Component$2.PYREON__COMPONENT = name$3;
+
+//#endregion
+//#region src/Portal/component.tsx
+const Component$4 = ({ DOMLocation, tag: _tag = "div", children }) => {
+	const target = DOMLocation ?? (typeof document !== "undefined" ? document.body : void 0);
+	if (!target) return null;
+	return /* @__PURE__ */ jsx(Portal, {
+		target,
+		children
+	});
+};
+const name$2 = `${PKG_NAME}/Portal`;
+Component$4.displayName = name$2;
+Component$4.pkgName = PKG_NAME;
+Component$4.PYREON__COMPONENT = name$2;
+
+//#endregion
+//#region src/Text/styled.ts
+/**
+* Styled text primitive that inherits color, font-weight, and line-height
+* from its parent so it blends seamlessly into any context. Additional
+* styles can be injected via the responsive `extraStyles` prop processed
+* through makeItResponsive.
+*/
+const { styled, css, textComponent } = config;
+const styles = ({ css: cssFn, theme: t }) => cssFn`
+  ${t.extraStyles && extendCss(t.extraStyles)};
+`;
+var styled_default = styled(textComponent)`
+  ${css`
+    color: inherit;
+    font-weight: inherit;
+    line-height: 1;
+  `};
+
+  ${makeItResponsive({
+	key: "$text",
+	styles,
+	css,
+	normalize: false
+})};
+`;
+
+//#endregion
+//#region src/Text/component.tsx
+const Component$5 = ({ paragraph, label, children, tag, css, ref, ...props }) => {
+	let finalTag;
+	if (paragraph) finalTag = "p";
+	else finalTag = tag;
+	return /* @__PURE__ */ jsx(styled_default, {
+		ref,
+		as: finalTag,
+		$text: { extraStyles: css },
+		...props,
+		children: children ?? label
+	});
+};
+const name$1 = `${PKG_NAME}/Text`;
+Component$5.displayName = name$1;
+Component$5.pkgName = PKG_NAME;
+Component$5.PYREON__COMPONENT = name$1;
+Component$5.isText = true;
+
+//#endregion
+//#region src/Util/component.tsx
+const Component$6 = (({ children, className, style }) => {
+	const mergedClasses = Array.isArray(className) ? className.join(" ") : className;
+	const finalProps = {};
+	if (style) finalProps.style = style;
+	if (mergedClasses) finalProps.className = mergedClasses;
+	return render(children, finalProps);
+});
+const name = `${PKG_NAME}/Util`;
+Component$6.displayName = name;
+Component$6.pkgName = PKG_NAME;
+Component$6.PYREON__COMPONENT = name;
+
+//#endregion
+export { Component as Element, Iterator_default as Iterator, Component$1 as List, Component$2 as Overlay, Component$3 as OverlayProvider, Component$4 as Portal, Provider, Component$5 as Text, Component$6 as Util, useOverlay };
+//# sourceMappingURL=index.js.map