@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/constants/enums/index.d.ts

@@ -0,0 +1,184 @@
+import { ValueOf } from "@lumx/core/js/types";
+
+//#region ../lumx-core/src/js/constants/enums/index.d.ts
+/**
+ * Alignments.
+ */
+declare const Alignment: {
+  readonly bottom: "bottom";
+  readonly center: "center";
+  readonly end: "end";
+  readonly left: "left";
+  readonly right: "right";
+  readonly spaceAround: "space-around";
+  readonly spaceBetween: "space-between";
+  readonly spaceEvenly: "space-evenly";
+  readonly start: "start";
+  readonly top: "top";
+};
+type Alignment = ValueOf<typeof Alignment>;
+type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+declare const Theme: {
+  readonly light: "light";
+  readonly dark: "dark";
+};
+type Theme = ValueOf<typeof Theme>;
+declare const Size: {
+  readonly xxs: "xxs";
+  readonly xs: "xs";
+  readonly s: "s";
+  readonly m: "m";
+  readonly l: "l";
+  readonly xl: "xl";
+  readonly xxl: "xxl";
+  readonly tiny: "tiny";
+  readonly regular: "regular";
+  readonly medium: "medium";
+  readonly big: "big";
+  readonly huge: "huge";
+};
+type Size = ValueOf<typeof Size>;
+type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+declare const Orientation: {
+  readonly horizontal: "horizontal";
+  readonly vertical: "vertical";
+};
+type Orientation = ValueOf<typeof Orientation>;
+declare const Emphasis: {
+  readonly low: "low";
+  readonly medium: "medium";
+  readonly high: "high";
+};
+type Emphasis = ValueOf<typeof Emphasis>;
+/**
+ * List of typographies that can't be customized.
+ */
+declare const TypographyInterface: {
+  readonly overline: "overline";
+  readonly caption: "caption";
+  readonly body1: "body1";
+  readonly body2: "body2";
+  readonly subtitle1: "subtitle1";
+  readonly subtitle2: "subtitle2";
+  readonly title: "title";
+  readonly headline: "headline";
+  readonly display1: "display1";
+};
+type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+declare const TypographyCustom: {
+  readonly intro: "custom-intro";
+  readonly 'body-large': "custom-body-large";
+  readonly body: "custom-body";
+  readonly quote: "custom-quote";
+  readonly 'publish-info': "custom-publish-info";
+  readonly button: "custom-button";
+  readonly title1: "custom-title1";
+  readonly title2: "custom-title2";
+  readonly title3: "custom-title3";
+  readonly title4: "custom-title4";
+  readonly title5: "custom-title5";
+  readonly title6: "custom-title6";
+};
+type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
+ */
+declare const Typography: {
+  readonly custom: {
+    readonly intro: "custom-intro";
+    readonly 'body-large': "custom-body-large";
+    readonly body: "custom-body";
+    readonly quote: "custom-quote";
+    readonly 'publish-info': "custom-publish-info";
+    readonly button: "custom-button";
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+  };
+  readonly overline: "overline";
+  readonly caption: "caption";
+  readonly body1: "body1";
+  readonly body2: "body2";
+  readonly subtitle1: "subtitle1";
+  readonly subtitle2: "subtitle2";
+  readonly title: "title";
+  readonly headline: "headline";
+  readonly display1: "display1";
+};
+type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+declare const AspectRatio: {
+  /** Intrinsic content ratio. */readonly original: "original"; /** Ratio 3:1 */
+  readonly panoramic: "panoramic"; /** Ratio 16:9 */
+  readonly wide: "wide"; /** Ratio 3:2 */
+  readonly horizontal: "horizontal"; /** Ratio 3:2 */
+  readonly vertical: "vertical"; /** Ratio 1:1 */
+  readonly square: "square"; /** Ratio constrained by the parent. */
+  readonly free: "free";
+};
+type AspectRatio = ValueOf<typeof AspectRatio>;
+/**
+ * Semantic info about the purpose of the component
+ */
+declare const Kind: {
+  readonly info: "info";
+  readonly success: "success";
+  readonly warning: "warning";
+  readonly error: "error";
+};
+type Kind = ValueOf<typeof Kind>;
+/**
+ * All available white-space values
+ * */
+declare const WhiteSpace: {
+  normal: string;
+  nowrap: string;
+  pre: string;
+  'pre-wrap': string;
+  'pre-line': string;
+  'break-spaces': string;
+};
+type WhiteSpace = ValueOf<typeof WhiteSpace>;
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+declare const ColorPalette: {
+  readonly primary: "primary";
+  readonly secondary: "secondary";
+  readonly blue: "blue";
+  readonly dark: "dark";
+  readonly green: "green";
+  readonly yellow: "yellow";
+  readonly red: "red";
+  readonly light: "light";
+  readonly grey: "grey";
+};
+type ColorPalette = ValueOf<typeof ColorPalette>;
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+declare const ColorVariant: {
+  readonly D1: "D1";
+  readonly D2: "D2";
+  readonly L1: "L1";
+  readonly L2: "L2";
+  readonly L3: "L3";
+  readonly L4: "L4";
+  readonly L5: "L5";
+  readonly L6: "L6";
+  readonly N: "N";
+};
+type ColorVariant = ValueOf<typeof ColorVariant>;
+/** ColorPalette with all possible color variant combination */
+type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
+//#endregion
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, ColorWithVariants, Emphasis, GlobalSize, HorizontalAlignment, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, VerticalAlignment, WhiteSpace };

package/_internal/packages/lumx-core/src/js/constants/enums/index.js

@@ -0,0 +1,140 @@
+//#region ../lumx-core/src/js/constants/enums/index.ts
+/**
+* Alignments.
+*/
+var Alignment = {
+	bottom: "bottom",
+	center: "center",
+	end: "end",
+	left: "left",
+	right: "right",
+	spaceAround: "space-around",
+	spaceBetween: "space-between",
+	spaceEvenly: "space-evenly",
+	start: "start",
+	top: "top"
+};
+var Theme = {
+	light: "light",
+	dark: "dark"
+};
+var Size = {
+	xxs: "xxs",
+	xs: "xs",
+	s: "s",
+	m: "m",
+	l: "l",
+	xl: "xl",
+	xxl: "xxl",
+	tiny: "tiny",
+	regular: "regular",
+	medium: "medium",
+	big: "big",
+	huge: "huge"
+};
+var Orientation = {
+	horizontal: "horizontal",
+	vertical: "vertical"
+};
+var Emphasis = {
+	low: "low",
+	medium: "medium",
+	high: "high"
+};
+/**
+* List of typographies that can't be customized.
+*/
+var TypographyInterface = {
+	overline: "overline",
+	caption: "caption",
+	body1: "body1",
+	body2: "body2",
+	subtitle1: "subtitle1",
+	subtitle2: "subtitle2",
+	title: "title",
+	headline: "headline",
+	display1: "display1"
+};
+/**
+* List of typographies that can be customized (via CSS variables).
+*/
+var TypographyCustom = {
+	title1: "custom-title1",
+	title2: "custom-title2",
+	title3: "custom-title3",
+	title4: "custom-title4",
+	title5: "custom-title5",
+	title6: "custom-title6",
+	intro: "custom-intro",
+	"body-large": "custom-body-large",
+	body: "custom-body",
+	quote: "custom-quote",
+	"publish-info": "custom-publish-info",
+	button: "custom-button"
+};
+/**
+* List of all typographies.
+*/
+var Typography = {
+	...TypographyInterface,
+	custom: TypographyCustom
+};
+/**
+* All available aspect ratios.
+*/
+var AspectRatio = {
+	/** Intrinsic content ratio. */
+	original: "original",
+	/** Ratio 3:1 */
+	panoramic: "panoramic",
+	/** Ratio 16:9 */
+	wide: "wide",
+	/** Ratio 3:2 */
+	horizontal: "horizontal",
+	/** Ratio 3:2 */
+	vertical: "vertical",
+	/** Ratio 1:1 */
+	square: "square",
+	/** Ratio constrained by the parent. */
+	free: "free"
+};
+/**
+* Semantic info about the purpose of the component
+*/
+var Kind = {
+	info: "info",
+	success: "success",
+	warning: "warning",
+	error: "error"
+};
+/**
+* See SCSS variable $lumx-color-palette
+*/
+var ColorPalette = {
+	primary: "primary",
+	secondary: "secondary",
+	blue: "blue",
+	dark: "dark",
+	green: "green",
+	yellow: "yellow",
+	red: "red",
+	light: "light",
+	grey: "grey"
+};
+/**
+* See SCSS variable $lumx-color-variants
+*/
+var ColorVariant = {
+	D1: "D1",
+	D2: "D2",
+	L1: "L1",
+	L2: "L2",
+	L3: "L3",
+	L4: "L4",
+	L5: "L5",
+	L6: "L6",
+	N: "N"
+};
+Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl;
+//#endregion
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography };

package/_internal/packages/lumx-core/src/js/constants/index.d.ts

@@ -0,0 +1 @@
+import { Alignment, AspectRatio, ColorPalette, ColorVariant, ColorWithVariants, Emphasis, GlobalSize, HorizontalAlignment, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, VerticalAlignment, WhiteSpace } from "./enums/index.js";

package/_internal/packages/lumx-core/src/js/types/AriaAttributes.d.ts

@@ -0,0 +1,32 @@
+//#region ../lumx-core/src/js/types/AriaAttributes.d.ts
+/**
+ * ARIA attributes type for components.
+ * All attributes are optional.
+ *
+ * This is a custom interface containing only the ARIA attributes
+ * actually used in the @lumx/core components, avoiding dependency on React types.
+ */
+interface AriaAttributes {
+  /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+  'aria-expanded'?: boolean | 'true' | 'false';
+  /** Indicates the availability and type of interactive popup element that can be triggered by the element. */
+  'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+  /** Indicates the current "pressed" state of toggle buttons. */
+  'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
+  /** Defines a string value that labels the current element. */
+  'aria-label'?: string;
+  /** Identifies the element (or elements) that labels the current element. */
+  'aria-labelledby'?: string;
+  /** Identifies the element (or elements) that describes the object. */
+  'aria-describedby'?: string;
+  /** Indicates whether the element is exposed to an accessibility API. */
+  'aria-hidden'?: boolean | 'true' | 'false';
+  /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
+  'aria-disabled'?: boolean | 'true' | 'false';
+  /** Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. */
+  'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
+  /** Indicates whether items in a table or grid are sorted in ascending or descending order. */
+  'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+}
+//#endregion
+export { AriaAttributes };

package/_internal/packages/lumx-core/src/js/types/Booleanish.d.ts

@@ -0,0 +1,4 @@
+//#region ../lumx-core/src/js/types/Booleanish.d.ts
+type Booleanish = boolean | 'true' | 'false';
+//#endregion
+export { Booleanish };

package/_internal/packages/lumx-core/src/js/types/CommonRef.d.ts

@@ -0,0 +1,4 @@
+//#region ../lumx-core/src/js/types/CommonRef.d.ts
+type CommonRef = any;
+//#endregion
+export { CommonRef };

package/_internal/packages/lumx-core/src/js/types/GenericProps.d.ts

@@ -0,0 +1,14 @@
+import { HasClassName } from "./HasClassName.js";
+
+//#region ../lumx-core/src/js/types/GenericProps.d.ts
+/**
+ * Define a generic props types.
+ */
+interface GenericProps extends HasClassName {
+  /**
+   * Any prop (particularly any supported prop for a HTML element).
+   */
+  [propName: string]: any;
+}
+//#endregion
+export { GenericProps };

package/_internal/packages/lumx-core/src/js/types/HasAriaDisabled.d.ts

@@ -0,0 +1,9 @@
+import { Booleanish } from "./Booleanish.js";
+
+//#region ../lumx-core/src/js/types/HasAriaDisabled.d.ts
+interface HasAriaDisabled {
+  /** Similar to `disabled` but does not block pointer events or focus */
+  'aria-disabled'?: Booleanish;
+}
+//#endregion
+export { HasAriaDisabled };

package/_internal/packages/lumx-core/src/js/types/HasAriaLabelOrLabelledBy.d.ts

@@ -0,0 +1,19 @@
+//#region ../lumx-core/src/js/types/HasAriaLabelOrLabelledBy.d.ts
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+  /**
+   * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+   * Although it is not recommended, aria-label can be used instead if no visible element is available.
+   */
+  'aria-labelledby': T; /** The label of the dialog. */
+  'aria-label'?: undefined;
+} : {
+  'aria-label': string;
+  'aria-labelledby'?: undefined;
+};
+//#endregion
+export { HasAriaLabelOrLabelledBy };

package/_internal/packages/lumx-core/src/js/types/HasChecked.d.ts

@@ -0,0 +1,9 @@
+//#region ../lumx-core/src/js/types/HasChecked.d.ts
+interface HasChecked<C = boolean> {
+  /** Component checked state. */
+  isChecked?: C;
+  /** @alias isChecked */
+  checked?: boolean;
+}
+//#endregion
+export { HasChecked };

package/_internal/packages/lumx-core/src/js/types/HasClassName.d.ts

@@ -0,0 +1,9 @@
+//#region ../lumx-core/src/js/types/HasClassName.d.ts
+interface HasClassName {
+  /**
+   * Class name forwarded to the root element of the component.
+   */
+  className?: string;
+}
+//#endregion
+export { HasClassName };

package/_internal/packages/lumx-core/src/js/types/HasCloseMode.d.ts

@@ -0,0 +1,10 @@
+//#region ../lumx-core/src/js/types/HasCloseMode.d.ts
+interface HasCloseMode {
+  /**
+   * Choose how the children are hidden when closed
+   * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+   */
+  closeMode?: 'hide' | 'unmount';
+}
+//#endregion
+export { HasCloseMode };

package/_internal/packages/lumx-core/src/js/types/HasDisabled.d.ts

@@ -0,0 +1,9 @@
+//#region ../lumx-core/src/js/types/HasDisabled.d.ts
+interface HasDisabled {
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+  /** @alias isDisabled */
+  disabled?: boolean;
+}
+//#endregion
+export { HasDisabled };

package/_internal/packages/lumx-core/src/js/types/HasPolymorphicAs.d.ts

@@ -0,0 +1,12 @@
+import { ElementType as ElementType$1 } from "./JSXElement.js";
+import React from "react";
+
+//#region ../lumx-core/src/js/types/HasPolymorphicAs.d.ts
+type HasPolymorphicAs<E extends ElementType$1> = React.ComponentPropsWithoutRef<E> & {
+  /**
+   * Customize the rendered component.
+   */
+  as?: E;
+};
+//#endregion
+export { HasPolymorphicAs };

package/_internal/packages/lumx-core/src/js/types/HasRequiredLinkHref.d.ts

@@ -0,0 +1,6 @@
+//#region ../lumx-core/src/js/types/HasRequiredLinkHref.d.ts
+type HasRequiredLinkHref<E> = E extends 'a' ? {
+  href: string;
+} : Record<string, unknown>;
+//#endregion
+export { HasRequiredLinkHref };

package/_internal/packages/lumx-core/src/js/types/HasTheme.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from "../constants/enums/index.js";
+//#region ../lumx-core/src/js/types/HasTheme.d.ts
+interface HasTheme {
+  /**
+   * Theme adapting the component to light or dark background.
+   */
+  theme?: Theme;
+}
+//#endregion
+export { HasTheme };

package/_internal/packages/lumx-core/src/js/types/HeadingElement.d.ts

@@ -0,0 +1,5 @@
+//#region ../lumx-core/src/js/types/HeadingElement.d.ts
+/** Union type of all heading elements */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+//#endregion
+export { HeadingElement };

package/_internal/packages/lumx-core/src/js/types/JSXElement.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region ../lumx-core/src/js/types/JSXElement.d.ts
+/**
+ * Framework-agnostic type for renderable content.
+ * Vue components should cast VNode[] from slots to this type.
+ *
+ * Note: Uses type-only import to avoid runtime dependencies.
+ */
+type JSXElement = React.ReactNode;
+type ElementType$1 = React.ElementType;
+//#endregion
+export { ElementType$1 as ElementType, JSXElement };

package/_internal/packages/lumx-core/src/js/types/KebabCase.d.ts

@@ -0,0 +1,5 @@
+//#region ../lumx-core/src/js/types/KebabCase.d.ts
+/** Transform a string literal into kebab case */
+type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;
+//#endregion
+export { KebabCase };

package/_internal/packages/lumx-core/src/js/types/LumxClassName.d.ts

@@ -0,0 +1,7 @@
+import { KebabCase } from "./KebabCase.js";
+
+//#region ../lumx-core/src/js/types/LumxClassName.d.ts
+/** Transform the component name into the lumx class name. */
+type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
+//#endregion
+export { LumxClassName };

package/_internal/packages/lumx-core/src/js/types/Selector.d.ts

@@ -0,0 +1,11 @@
+//#region ../lumx-core/src/js/types/Selector.d.ts
+type FunctionSelector<TObject, TValue> = (o: TObject) => TValue;
+type FieldSelector<TObject, TValue> = keyof { [TKey in keyof TObject as TObject[TKey] extends TValue ? TKey : never]: TObject[TKey] };
+/**
+ * Value selector on an object
+ * - either via an object key
+ * - or a selector function
+ */
+type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
+//#endregion
+export { Selector };

package/_internal/packages/lumx-core/src/js/types/TextElement.d.ts

@@ -0,0 +1,7 @@
+import { HeadingElement } from "./HeadingElement.js";
+
+//#region ../lumx-core/src/js/types/TextElement.d.ts
+/** Union type of all text elements */
+type TextElement = 'span' | 'p' | HeadingElement;
+//#endregion
+export { TextElement };

package/_internal/packages/lumx-core/src/js/types/ValueOf.d.ts

@@ -0,0 +1,5 @@
+//#region ../lumx-core/src/js/types/ValueOf.d.ts
+/** Get types of the values of a record. */
+type ValueOf<T extends Record<any, any>> = T[keyof T];
+//#endregion
+export { ValueOf };

package/_internal/packages/lumx-core/src/js/types/index.d.ts

@@ -0,0 +1,18 @@
+import { HasAriaLabelOrLabelledBy } from "./HasAriaLabelOrLabelledBy.js";
+import { HasClassName } from "./HasClassName.js";
+import { HasCloseMode } from "./HasCloseMode.js";
+import { HasTheme } from "./HasTheme.js";
+import { GenericProps } from "./GenericProps.js";
+import { ElementType, JSXElement } from "./JSXElement.js";
+import { HeadingElement } from "./HeadingElement.js";
+import { TextElement } from "./TextElement.js";
+import { ValueOf } from "./ValueOf.js";
+import { LumxClassName } from "./LumxClassName.js";
+import { HasRequiredLinkHref } from "./HasRequiredLinkHref.js";
+import { HasPolymorphicAs } from "./HasPolymorphicAs.js";
+import { CommonRef } from "./CommonRef.js";
+import { HasAriaDisabled } from "./HasAriaDisabled.js";
+import { HasChecked } from "./HasChecked.js";
+import { HasDisabled } from "./HasDisabled.js";
+import { AriaAttributes } from "./AriaAttributes.js";
+import { Selector } from "./Selector.js";

package/_internal/packages/lumx-core/src/js/utils/ClickAway/index.js

@@ -0,0 +1,37 @@
+//#region ../lumx-core/src/js/utils/ClickAway/index.ts
+/** Event types that trigger click away detection. */
+var CLICK_AWAY_EVENT_TYPES = ["mousedown", "touchstart"];
+/**
+* Check if the click event targets are outside all the given elements.
+*
+* @param targets - The event target elements (from `event.target` and `event.composedPath()`).
+* @param elements - The elements considered "inside" the click away context.
+* @returns `true` if the click is outside all elements (i.e. a click away).
+*/
+function isClickAway(targets, elements) {
+	return !elements.some((element) => element instanceof Node && targets.some((target) => element.contains(target)));
+}
+/**
+* Imperative setup for click away detection.
+* Adds mousedown/touchstart listeners on `document` and calls the callback when a click
+* occurs outside the elements returned by `getElements`.
+*
+* Note: when `getElements` returns an empty array, any click is considered a click away.
+* Callers should guard against calling `setupClickAway` when no refs are registered.
+*
+* @param getElements - Getter returning the current list of elements considered "inside".
+* @param callback - Callback to invoke on click away.
+* @returns A teardown function that removes the event listeners.
+*/
+function setupClickAway(getElements, callback) {
+	if (!callback) return;
+	const listener = (evt) => {
+		if (isClickAway([evt.composedPath?.()[0], evt.target].filter((t) => t instanceof Node), getElements())) callback(evt);
+	};
+	CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));
+	return () => {
+		CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));
+	};
+}
+//#endregion
+export { setupClickAway };

package/_internal/packages/lumx-core/src/js/utils/InfiniteScroll/index.d.ts

@@ -0,0 +1,9 @@
+//#region ../lumx-core/src/js/utils/InfiniteScroll/index.d.ts
+interface InfiniteScrollProps {
+  /** Callback when infinite scroll component is in view */
+  callback: (evt?: Event) => void;
+  /** Customize intersection observer option */
+  options?: IntersectionObserverInit;
+}
+//#endregion
+export { InfiniteScrollProps };

package/_internal/packages/lumx-core/src/js/utils/InfiniteScroll/index.js

@@ -0,0 +1,21 @@
+import "./setupInfiniteScrollObserver.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../lumx-core/src/js/utils/InfiniteScroll/index.tsx
+var INFINITE_SCROLL_CLASSNAME = "lumx-infinite-scroll-anchor";
+/**
+* Framework-agnostic InfiniteScroll sentinel component.
+*
+* Renders a tiny invisible div that triggers a callback when it enters the viewport
+* (or intersects its root element) via IntersectionObserver.
+*
+* The div has a small height (4px) to avoid issues when a browser zoom is applied,
+* where a zero-height element might not trigger IntersectionObserver reliably.
+*/
+var InfiniteScroll = ({ ref }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"aria-hidden": "true",
+	className: INFINITE_SCROLL_CLASSNAME,
+	style: { height: "4px" }
+});
+//#endregion
+export { InfiniteScroll };