@lumx/vue 4.13.0-next.3 → 4.13.0-next.5

package/_internal/CO3BhTbu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CO3BhTbu.js","sources":["../../src/utils/VueToJSX.ts","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/utils/ClickAway/ClickAwayProvider.tsx","../../src/utils/theme/ThemeProvider.ts","../../src/utils/theme/useTheme.ts","../../../lumx-core/src/js/utils/InfiniteScroll/setupInfiniteScrollObserver.ts","../../../lumx-core/src/js/utils/InfiniteScroll/index.tsx","../../src/utils/InfiniteScroll/InfiniteScroll.tsx"],"sourcesContent":["import { PropsToOverride } from '@lumx/core/js/types';\n/**\n * Props interface for components wrapped with VueToJSX.\n * It omits JSX-specific props like `children` and `className` and adds Vue's `class`.\n *\n * @template Props - The base props type\n * @template OmitProps - Additional props to omit beyond the defaults (children, className, ref)\n */\nexport type VueToJSXProps<Props, OmitProps extends keyof Props = never> = Omit<\n    Props,\n    PropsToOverride | 'children' | 'className' | OmitProps\n> & {\n    /** Class name forwarded to the root element of the component. */\n    class?: string;\n};\n\n/**\n * Hyphenated aria-* prop keys that must NOT be declared as Vue component props.\n * When declared, Vue normalizes them to camelCase (e.g. aria-haspopup → ariaHaspopup),\n * which breaks hyphenated key destructuring in core component templates.\n * By excluding them from props, they flow through `attrs` with their original hyphenated keys.\n */\nexport type HyphenatedAriaProps = 'aria-expanded' | 'aria-haspopup' | 'aria-label' | 'aria-pressed';\n\nexport const keysOf = <T>() => {\n    return <K extends readonly (keyof T)[]>(\n        ...keys: [keyof T] extends [K[number]]\n            ? K\n            : [Error: '❌ Missing keys in your list:', Exclude<keyof T, K[number]>]\n    ) => {\n        // Return an object with all props marked as optional (not required)\n        // This ensures Vue's type system correctly infers props as optional\n        return keys.reduce(\n            (acc, key) => {\n                acc[key as K[number]] = { required: false };\n                return acc;\n            },\n            {} as Record<K[number], { required: false }>,\n        );\n    };\n};\n\n/**\n * Derive the typed Vue emits map from a runtime `emitSchema` object.\n *\n * @example\n * export const emitSchema = {\n *     change: (_newValue?: unknown) => true,\n *     search: (_text: string) => true,\n * };\n * export type MyEmits<O> = EmitsOf<typeof emitSchema>\n */\nexport type EmitsOf<S> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [K in keyof S]: S[K] extends (...args: infer A) => any ? (...args: A) => void : never;\n};\n","import { defineComponent, provide, type PropType, type InjectionKey } from 'vue';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\nimport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PORTAL_KEY: InjectionKey<PortalInit> = Symbol('LumxPortal');\n\nexport const defaultPortalInit: PortalInit = () => ({ container: 'body' });\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider = defineComponent(\n    (props: PortalProviderProps, { slots }) => {\n        provide(PORTAL_KEY, props.value);\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxPortalProvider',\n        props: {\n            value: {\n                type: Function as PropType<PortalInit>,\n                required: true,\n            },\n        },\n    },\n);\n","import { defineComponent, inject, onBeforeUnmount, Teleport, ref, watch } from 'vue';\nimport { PORTAL_KEY, defaultPortalInit } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\nimport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalProvider)\n */\nexport const Portal = defineComponent(\n    (props: PortalProps, { slots }) => {\n        const portalInit = inject(PORTAL_KEY, defaultPortalInit);\n        const context = ref<ReturnType<typeof portalInit> | null>(null);\n\n        // Initialize portal context when enabled\n        const initializePortal = () => {\n            if (props.enabled) {\n                context.value = portalInit();\n            } else {\n                context.value = null;\n            }\n        };\n\n        // Initialize on mount and when enabled changes\n        initializePortal();\n        watch(() => props.enabled, initializePortal);\n\n        // Register teardown on unmount\n        onBeforeUnmount(() => {\n            context.value?.teardown?.();\n        });\n\n        return () => {\n            const content = slots.default?.();\n            const container = context.value?.container;\n\n            // If disabled or no container, render inline\n            if (!props.enabled || !container) {\n                return content;\n            }\n\n            // Render in portal using Teleport\n            return <Teleport to={container}>{content}</Teleport>;\n        };\n    },\n    {\n        name: 'LumxPortal',\n        props: {\n            enabled: {\n                type: Boolean,\n                default: true,\n            },\n        },\n    },\n);\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n    return !elements.some((element) => element instanceof Node && targets.some((target) => element.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * Note: when `getElements` returns an empty array, any click is considered a click away.\n * Callers should guard against calling `setupClickAway` when no refs are registered.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n    getElements: () => HTMLElement[],\n    callback: ClickAwayCallback,\n): (() => void) | undefined {\n    if (!callback) {\n        return undefined;\n    }\n\n    const listener: EventListener = (evt) => {\n        const targets = [evt.composedPath?.()[0], evt.target].filter((t): t is HTMLElement => t instanceof Node);\n        const elements = getElements();\n        if (isClickAway(targets, elements)) {\n            callback(evt);\n        }\n    };\n\n    CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n    return () => {\n        CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n    };\n}\n","import {\n    defineComponent,\n    inject,\n    onBeforeUnmount,\n    onMounted,\n    provide,\n    type InjectionKey,\n    type PropType,\n    type Ref,\n} from 'vue';\nimport { setupClickAway, type ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';\n\ninterface ContextValue {\n    childrenRefs: HTMLElement[];\n    addRefs(...newChildrenRefs: Array<Ref<HTMLElement | undefined>>): void;\n}\n\nexport const CLICK_AWAY_KEY: InjectionKey<ContextValue> = Symbol('LumxClickAway');\n\n/**\n * Component combining click away detection with Vue's provide/inject to hook into the component tree\n * and take into account both the DOM tree and the component tree to detect click away.\n */\nexport const ClickAwayProvider = defineComponent(\n    (\n        props: {\n            callback: ClickAwayCallback;\n            childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;\n            parentRef?: Ref<HTMLElement | undefined>;\n        },\n        { slots },\n    ) => {\n        const parentContext = inject(CLICK_AWAY_KEY, null);\n\n        const contextChildrenRefs: HTMLElement[] = [];\n\n        const currentContext: ContextValue = {\n            childrenRefs: contextChildrenRefs,\n            addRefs(...newChildrenRefs) {\n                for (const newRef of newChildrenRefs) {\n                    const el = newRef.value;\n                    if (el) {\n                        contextChildrenRefs.push(el);\n                    }\n                }\n                if (parentContext) {\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (props.parentRef) {\n                        parentContext.addRefs(props.parentRef);\n                    }\n                }\n            },\n        };\n\n        provide(CLICK_AWAY_KEY, currentContext);\n\n        let teardown: (() => void) | undefined;\n\n        onMounted(() => {\n            const refs = props.childrenRefs.value;\n            if (refs) {\n                currentContext.addRefs(...refs);\n            }\n\n            // Setup click away using a closure that always reads the latest callback prop.\n            // This handles transitions like closeMode=\"hide\" where the callback changes\n            // between open (handleClose) and closed (undefined) without re-creating the listener.\n            teardown = setupClickAway(\n                () => contextChildrenRefs,\n                (event) => {\n                    const cb = props.callback;\n                    if (typeof cb === 'function') cb(event);\n                },\n            );\n        });\n\n        onBeforeUnmount(() => {\n            teardown?.();\n        });\n\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxClickAwayProvider',\n        props: {\n            callback: {\n                type: [Function, Boolean, undefined] as PropType<ClickAwayCallback>,\n                default: undefined,\n            },\n            childrenRefs: {\n                type: Object as PropType<Ref<Array<Ref<HTMLElement | undefined>>>>,\n                required: true,\n            },\n            parentRef: {\n                type: Object as PropType<Ref<HTMLElement | undefined>>,\n                default: undefined,\n            },\n        },\n    },\n);\n","import { computed, defineComponent, provide, type PropType } from 'vue';\nimport type { Theme } from '@lumx/core/js/constants';\n\n/**\n * ThemeProvider for Vue: wraps children with `provide('theme', value)` for theme isolation.\n * Vue's `provide()` requires a component boundary, so this is a component.\n */\nexport const ThemeProvider = defineComponent(\n    (props: { value: Theme | undefined }, { slots }) => {\n        provide(\n            'theme',\n            computed(() => props.value),\n        );\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxThemeProvider',\n        props: { value: { type: String as PropType<Theme | undefined>, default: undefined } },\n    },\n);\n","import { type ComputedRef, type Ref, computed, inject, unref } from 'vue';\n\nimport { Theme } from '@lumx/core/js/constants';\n\nexport interface UseTheme {\n    defaultTheme?: Theme;\n}\n/**\n * Retrieves the globally applied theme.\n * @returns computed theme value (auto-updates when the provided theme changes)\n */\nexport function useTheme(options: UseTheme = { defaultTheme: Theme.light }): ComputedRef<Theme | undefined> {\n    const { defaultTheme } = options;\n    const injected = inject<Theme | Ref<Theme | undefined> | undefined>('theme', undefined);\n    return computed(() => unref(injected) || defaultTheme);\n}\n","type EventCallback = (evt?: Event) => void;\n\n/**\n * Sets up an IntersectionObserver on the given element.\n * Calls `callback` when at least one observed entry is intersecting.\n * Returns a cleanup function that unobserves the element.\n */\nexport function setupInfiniteScrollObserver(\n    element: Element,\n    callback: EventCallback,\n    options?: IntersectionObserverInit,\n): () => void {\n    const observer = new IntersectionObserver((entries = []) => {\n        const hasIntersection = entries.some((entry) => entry.isIntersecting);\n\n        if (!hasIntersection) {\n            return;\n        }\n\n        callback();\n    }, options);\n\n    observer.observe(element);\n\n    return () => {\n        observer.unobserve(element);\n    };\n}\n","import type { CommonRef } from '../../types';\n\nexport { setupInfiniteScrollObserver } from './setupInfiniteScrollObserver';\n\nexport const INFINITE_SCROLL_CLASSNAME = 'lumx-infinite-scroll-anchor';\n\nexport interface InfiniteScrollProps {\n    /** Callback when infinite scroll component is in view */\n    // eslint-disable-next-line react/no-unused-prop-types\n    callback: (evt?: Event) => void;\n    /** Customize intersection observer option */\n    // eslint-disable-next-line react/no-unused-prop-types\n    options?: IntersectionObserverInit;\n}\n\n/**\n * Framework-agnostic InfiniteScroll sentinel component.\n *\n * Renders a tiny invisible div that triggers a callback when it enters the viewport\n * (or intersects its root element) via IntersectionObserver.\n *\n * The div has a small height (4px) to avoid issues when a browser zoom is applied,\n * where a zero-height element might not trigger IntersectionObserver reliably.\n */\nexport const InfiniteScroll = ({ ref }: { ref?: CommonRef }) => (\n    // In order to avoid issues when a zoom is added to the browser, we add a small height to the div so that\n    // the intersection has a higher chance of working correctly.\n    <div ref={ref} aria-hidden=\"true\" className={INFINITE_SCROLL_CLASSNAME} style={{ height: '4px' }} />\n);\n","import { defineComponent, ref, watchEffect } from 'vue';\nimport {\n    InfiniteScroll as UI,\n    type InfiniteScrollProps,\n    setupInfiniteScrollObserver,\n} from '@lumx/core/js/utils/InfiniteScroll';\nimport { keysOf } from '../VueToJSX';\n\nexport type { InfiniteScrollProps };\n\n/**\n * Handles basic callback pattern by using intersection observers.\n */\nexport const InfiniteScroll = defineComponent(\n    (props: InfiniteScrollProps) => {\n        const elementRef = ref<HTMLDivElement | null>(null);\n\n        watchEffect((onCleanup) => {\n            const element = elementRef.value;\n            if (!element) return;\n\n            const cleanup = setupInfiniteScrollObserver(element, props.callback, props.options);\n            onCleanup(cleanup);\n        });\n\n        return () => UI({ ref: elementRef });\n    },\n    {\n        name: 'LumxInfiniteScroll',\n        inheritAttrs: false,\n        props: keysOf<InfiniteScrollProps>()('callback', 'options'),\n    },\n);\n\nexport default InfiniteScroll;\n"],"names":["keysOf","keys","acc","key","PORTAL_KEY","Symbol","defaultPortalInit","container","PortalProvider","props","slots","provide","value","default","name","type","Function","required","_isSlot","s","Object","prototype","toString","call","_isVNode","Portal","portalInit","inject","context","ref","initializePortal","enabled","watch","onBeforeUnmount","teardown","content","_createVNode","Teleport","Boolean","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","element","target","setupClickAway","getElements","callback","listener","evt","t","evtType","CLICK_AWAY_KEY","ClickAwayProvider","parentContext","contextChildrenRefs","currentContext","childrenRefs","addRefs","newChildrenRefs","newRef","el","push","parentRef","onMounted","refs","event","cb","undefined","ThemeProvider","defineComponent","computed","useTheme","options","Theme","defaultTheme","injected","unref","setupInfiniteScrollObserver","observer","entries","entry","INFINITE_SCROLL_CLASSNAME","InfiniteScroll","height","elementRef","watchEffect","onCleanup","cleanup","UI","inheritAttrs"],"mappings":"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"}
+{"version":3,"file":"CO3BhTbu.js","sources":["../../src/utils/VueToJSX.ts","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/utils/ClickAway/ClickAwayProvider.tsx","../../src/utils/theme/ThemeProvider.ts","../../src/utils/theme/useTheme.ts","../../../lumx-core/src/js/utils/InfiniteScroll/setupInfiniteScrollObserver.ts","../../../lumx-core/src/js/utils/InfiniteScroll/index.tsx","../../src/utils/InfiniteScroll/InfiniteScroll.tsx"],"sourcesContent":["import { PropsToOverride } from '@lumx/core/js/types';\n\n/**\n * Mirrors the value types accepted by Vue's class binding (and `normalizeClass`):\n * a string, an object mapping class names to booleans, an array of any of the above, or falsy.\n */\nexport type ClassValue = string | number | boolean | null | undefined | ClassValue[] | Record<string, unknown>;\n\n/**\n * Props interface for components wrapped with VueToJSX.\n * It omits JSX-specific props like `children` and `className` and adds Vue's `class`.\n *\n * @template Props - The base props type\n * @template OmitProps - Additional props to omit beyond the defaults (children, className, ref)\n */\nexport type VueToJSXProps<Props, OmitProps extends keyof Props = never> = Omit<\n    Props,\n    PropsToOverride | 'children' | 'className' | OmitProps\n> & {\n    /** Class name forwarded to the root element of the component. */\n    class?: ClassValue;\n};\n\n/**\n * Hyphenated aria-* prop keys that must NOT be declared as Vue component props.\n * When declared, Vue normalizes them to camelCase (e.g. aria-haspopup → ariaHaspopup),\n * which breaks hyphenated key destructuring in core component templates.\n * By excluding them from props, they flow through `attrs` with their original hyphenated keys.\n */\nexport type HyphenatedAriaProps = 'aria-expanded' | 'aria-haspopup' | 'aria-label' | 'aria-pressed';\n\nexport const keysOf = <T>() => {\n    return <K extends readonly (keyof T)[]>(\n        ...keys: [keyof T] extends [K[number]]\n            ? K\n            : [Error: '❌ Missing keys in your list:', Exclude<keyof T, K[number]>]\n    ) => {\n        // Return an object with all props marked as optional (not required)\n        // This ensures Vue's type system correctly infers props as optional\n        return keys.reduce(\n            (acc, key) => {\n                acc[key as K[number]] = { required: false };\n                return acc;\n            },\n            {} as Record<K[number], { required: false }>,\n        );\n    };\n};\n\n/**\n * Derive the typed Vue emits map from a runtime `emitSchema` object.\n *\n * @example\n * export const emitSchema = {\n *     change: (_newValue?: unknown) => true,\n *     search: (_text: string) => true,\n * };\n * export type MyEmits<O> = EmitsOf<typeof emitSchema>\n */\nexport type EmitsOf<S> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [K in keyof S]: S[K] extends (...args: infer A) => any ? (...args: A) => void : never;\n};\n","import { defineComponent, provide, type PropType, type InjectionKey } from 'vue';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\nimport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PORTAL_KEY: InjectionKey<PortalInit> = Symbol('LumxPortal');\n\nexport const defaultPortalInit: PortalInit = () => ({ container: 'body' });\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider = defineComponent(\n    (props: PortalProviderProps, { slots }) => {\n        provide(PORTAL_KEY, props.value);\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxPortalProvider',\n        props: {\n            value: {\n                type: Function as PropType<PortalInit>,\n                required: true,\n            },\n        },\n    },\n);\n","import { defineComponent, inject, onBeforeUnmount, Teleport, ref, watch } from 'vue';\nimport { PORTAL_KEY, defaultPortalInit } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\nimport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalProvider)\n */\nexport const Portal = defineComponent(\n    (props: PortalProps, { slots }) => {\n        const portalInit = inject(PORTAL_KEY, defaultPortalInit);\n        const context = ref<ReturnType<typeof portalInit> | null>(null);\n\n        // Initialize portal context when enabled\n        const initializePortal = () => {\n            if (props.enabled) {\n                context.value = portalInit();\n            } else {\n                context.value = null;\n            }\n        };\n\n        // Initialize on mount and when enabled changes\n        initializePortal();\n        watch(() => props.enabled, initializePortal);\n\n        // Register teardown on unmount\n        onBeforeUnmount(() => {\n            context.value?.teardown?.();\n        });\n\n        return () => {\n            const content = slots.default?.();\n            const container = context.value?.container;\n\n            // If disabled or no container, render inline\n            if (!props.enabled || !container) {\n                return content;\n            }\n\n            // Render in portal using Teleport\n            return <Teleport to={container}>{content}</Teleport>;\n        };\n    },\n    {\n        name: 'LumxPortal',\n        props: {\n            enabled: {\n                type: Boolean,\n                default: true,\n            },\n        },\n    },\n);\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n    return !elements.some((element) => element instanceof Node && targets.some((target) => element.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * Note: when `getElements` returns an empty array, any click is considered a click away.\n * Callers should guard against calling `setupClickAway` when no refs are registered.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n    getElements: () => HTMLElement[],\n    callback: ClickAwayCallback,\n): (() => void) | undefined {\n    if (!callback) {\n        return undefined;\n    }\n\n    const listener: EventListener = (evt) => {\n        const targets = [evt.composedPath?.()[0], evt.target].filter((t): t is HTMLElement => t instanceof Node);\n        const elements = getElements();\n        if (isClickAway(targets, elements)) {\n            callback(evt);\n        }\n    };\n\n    CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n    return () => {\n        CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n    };\n}\n","import {\n    defineComponent,\n    inject,\n    onBeforeUnmount,\n    onMounted,\n    provide,\n    type InjectionKey,\n    type PropType,\n    type Ref,\n} from 'vue';\nimport { setupClickAway, type ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';\n\ninterface ContextValue {\n    childrenRefs: HTMLElement[];\n    addRefs(...newChildrenRefs: Array<Ref<HTMLElement | undefined>>): void;\n}\n\nexport const CLICK_AWAY_KEY: InjectionKey<ContextValue> = Symbol('LumxClickAway');\n\n/**\n * Component combining click away detection with Vue's provide/inject to hook into the component tree\n * and take into account both the DOM tree and the component tree to detect click away.\n */\nexport const ClickAwayProvider = defineComponent(\n    (\n        props: {\n            callback: ClickAwayCallback;\n            childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;\n            parentRef?: Ref<HTMLElement | undefined>;\n        },\n        { slots },\n    ) => {\n        const parentContext = inject(CLICK_AWAY_KEY, null);\n\n        const contextChildrenRefs: HTMLElement[] = [];\n\n        const currentContext: ContextValue = {\n            childrenRefs: contextChildrenRefs,\n            addRefs(...newChildrenRefs) {\n                for (const newRef of newChildrenRefs) {\n                    const el = newRef.value;\n                    if (el) {\n                        contextChildrenRefs.push(el);\n                    }\n                }\n                if (parentContext) {\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (props.parentRef) {\n                        parentContext.addRefs(props.parentRef);\n                    }\n                }\n            },\n        };\n\n        provide(CLICK_AWAY_KEY, currentContext);\n\n        let teardown: (() => void) | undefined;\n\n        onMounted(() => {\n            const refs = props.childrenRefs.value;\n            if (refs) {\n                currentContext.addRefs(...refs);\n            }\n\n            // Setup click away using a closure that always reads the latest callback prop.\n            // This handles transitions like closeMode=\"hide\" where the callback changes\n            // between open (handleClose) and closed (undefined) without re-creating the listener.\n            teardown = setupClickAway(\n                () => contextChildrenRefs,\n                (event) => {\n                    const cb = props.callback;\n                    if (typeof cb === 'function') cb(event);\n                },\n            );\n        });\n\n        onBeforeUnmount(() => {\n            teardown?.();\n        });\n\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxClickAwayProvider',\n        props: {\n            callback: {\n                type: [Function, Boolean, undefined] as PropType<ClickAwayCallback>,\n                default: undefined,\n            },\n            childrenRefs: {\n                type: Object as PropType<Ref<Array<Ref<HTMLElement | undefined>>>>,\n                required: true,\n            },\n            parentRef: {\n                type: Object as PropType<Ref<HTMLElement | undefined>>,\n                default: undefined,\n            },\n        },\n    },\n);\n","import { computed, defineComponent, provide, type PropType } from 'vue';\nimport type { Theme } from '@lumx/core/js/constants';\n\n/**\n * ThemeProvider for Vue: wraps children with `provide('theme', value)` for theme isolation.\n * Vue's `provide()` requires a component boundary, so this is a component.\n */\nexport const ThemeProvider = defineComponent(\n    (props: { value: Theme | undefined }, { slots }) => {\n        provide(\n            'theme',\n            computed(() => props.value),\n        );\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxThemeProvider',\n        props: { value: { type: String as PropType<Theme | undefined>, default: undefined } },\n    },\n);\n","import { type ComputedRef, type Ref, computed, inject, unref } from 'vue';\n\nimport { Theme } from '@lumx/core/js/constants';\n\nexport interface UseTheme {\n    defaultTheme?: Theme;\n}\n/**\n * Retrieves the globally applied theme.\n * @returns computed theme value (auto-updates when the provided theme changes)\n */\nexport function useTheme(options: UseTheme = { defaultTheme: Theme.light }): ComputedRef<Theme | undefined> {\n    const { defaultTheme } = options;\n    const injected = inject<Theme | Ref<Theme | undefined> | undefined>('theme', undefined);\n    return computed(() => unref(injected) || defaultTheme);\n}\n","type EventCallback = (evt?: Event) => void;\n\n/**\n * Sets up an IntersectionObserver on the given element.\n * Calls `callback` when at least one observed entry is intersecting.\n * Returns a cleanup function that unobserves the element.\n */\nexport function setupInfiniteScrollObserver(\n    element: Element,\n    callback: EventCallback,\n    options?: IntersectionObserverInit,\n): () => void {\n    const observer = new IntersectionObserver((entries = []) => {\n        const hasIntersection = entries.some((entry) => entry.isIntersecting);\n\n        if (!hasIntersection) {\n            return;\n        }\n\n        callback();\n    }, options);\n\n    observer.observe(element);\n\n    return () => {\n        observer.unobserve(element);\n    };\n}\n","import type { CommonRef } from '../../types';\n\nexport { setupInfiniteScrollObserver } from './setupInfiniteScrollObserver';\n\nexport const INFINITE_SCROLL_CLASSNAME = 'lumx-infinite-scroll-anchor';\n\nexport interface InfiniteScrollProps {\n    /** Callback when infinite scroll component is in view */\n    // eslint-disable-next-line react/no-unused-prop-types\n    callback: (evt?: Event) => void;\n    /** Customize intersection observer option */\n    // eslint-disable-next-line react/no-unused-prop-types\n    options?: IntersectionObserverInit;\n}\n\n/**\n * Framework-agnostic InfiniteScroll sentinel component.\n *\n * Renders a tiny invisible div that triggers a callback when it enters the viewport\n * (or intersects its root element) via IntersectionObserver.\n *\n * The div has a small height (4px) to avoid issues when a browser zoom is applied,\n * where a zero-height element might not trigger IntersectionObserver reliably.\n */\nexport const InfiniteScroll = ({ ref }: { ref?: CommonRef }) => (\n    // In order to avoid issues when a zoom is added to the browser, we add a small height to the div so that\n    // the intersection has a higher chance of working correctly.\n    <div ref={ref} aria-hidden=\"true\" className={INFINITE_SCROLL_CLASSNAME} style={{ height: '4px' }} />\n);\n","import { defineComponent, ref, watchEffect } from 'vue';\nimport {\n    InfiniteScroll as UI,\n    type InfiniteScrollProps,\n    setupInfiniteScrollObserver,\n} from '@lumx/core/js/utils/InfiniteScroll';\nimport { keysOf } from '../VueToJSX';\n\nexport type { InfiniteScrollProps };\n\n/**\n * Handles basic callback pattern by using intersection observers.\n */\nexport const InfiniteScroll = defineComponent(\n    (props: InfiniteScrollProps) => {\n        const elementRef = ref<HTMLDivElement | null>(null);\n\n        watchEffect((onCleanup) => {\n            const element = elementRef.value;\n            if (!element) return;\n\n            const cleanup = setupInfiniteScrollObserver(element, props.callback, props.options);\n            onCleanup(cleanup);\n        });\n\n        return () => UI({ ref: elementRef });\n    },\n    {\n        name: 'LumxInfiniteScroll',\n        inheritAttrs: false,\n        props: keysOf<InfiniteScrollProps>()('callback', 'options'),\n    },\n);\n\nexport default InfiniteScroll;\n"],"names":["keysOf","keys","acc","key","PORTAL_KEY","Symbol","defaultPortalInit","container","PortalProvider","props","slots","provide","value","default","name","type","Function","required","_isSlot","s","Object","prototype","toString","call","_isVNode","Portal","portalInit","inject","context","ref","initializePortal","enabled","watch","onBeforeUnmount","teardown","content","_createVNode","Teleport","Boolean","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","element","target","setupClickAway","getElements","callback","listener","evt","t","evtType","CLICK_AWAY_KEY","ClickAwayProvider","parentContext","contextChildrenRefs","currentContext","childrenRefs","addRefs","newChildrenRefs","newRef","el","push","parentRef","onMounted","refs","event","cb","undefined","ThemeProvider","defineComponent","computed","useTheme","options","Theme","defaultTheme","injected","unref","setupInfiniteScrollObserver","observer","entries","entry","INFINITE_SCROLL_CLASSNAME","InfiniteScroll","height","elementRef","watchEffect","onCleanup","cleanup","UI","inheritAttrs"],"mappings":"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"}

package/components/alert-dialog/AlertDialog.d.ts

@@ -1,6 +1,7 @@
 import { BaseAlertDialogProps } from '@lumx/core/js/components/AlertDialog';
 import { DialogSizes } from '@lumx/core/js/components/Dialog';
 import { GenericProps } from '@lumx/core/js/types';
+import { ClassValue } from '../../utils/VueToJSX';
 type ButtonActionProps = {
     label: string;
     onClick?: () => void;
@@ -8,7 +9,7 @@ type ButtonActionProps = {
 };
 export interface AlertDialogProps extends Pick<BaseAlertDialogProps, 'kind' | 'title'> {
     /** Additional class name. */
-    class?: string;
+    class?: ClassValue;
     /** Size variant. */
     size?: DialogSizes;
     /** Whether the dialog is open. */

package/components/avatar/Avatar.d.ts

@@ -16,7 +16,7 @@ export type AvatarProps = VueToJSXProps<UIProps, 'image' | 'actions' | 'badge'>
     thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'aspectRatio'>;
 };
 declare const Avatar: import('vue').DefineSetupFnComponent<AvatarProps, {}, {}, Omit<UIProps, "className" | "image" | import('@lumx/core/js/types').PropsToOverride | "children" | "actions" | "badge"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Image URL. */
     image: string;

package/components/badge/Badge.d.ts

@@ -8,6 +8,6 @@ export type BadgeProps = VueToJSXProps<UIProps>;
  * @return Vue element.
  */
 declare const Badge: import('vue').DefineSetupFnComponent<BadgeProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default Badge;

package/components/badge/BadgeWrapper.d.ts

@@ -3,6 +3,6 @@ import { VueToJSXProps } from '../../utils/VueToJSX';
 export type BadgeWrapperProps = VueToJSXProps<UIProps>;
 export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
 declare const BadgeWrapper: import('vue').DefineSetupFnComponent<BadgeWrapperProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default BadgeWrapper;

package/components/button/ButtonGroup.d.ts

@@ -8,6 +8,6 @@ export type ButtonGroupProps = VueToJSXProps<UIProps>;
  * @return Vue element.
  */
 declare const ButtonGroup: import('vue').DefineSetupFnComponent<ButtonGroupProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default ButtonGroup;

package/components/checkbox/Checkbox.d.ts

@@ -14,7 +14,7 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, INTERMEDIATE_STATE };
 declare const Checkbox: import('vue').DefineSetupFnComponent<CheckboxProps, {
     change: (isChecked: boolean, value?: string, name?: string, event?: Event) => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "inputRef" | "inputId"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     onChange?: ((isChecked: boolean, value?: string | undefined, name?: string | undefined, event?: Event | undefined) => any) | undefined;
 }, import('vue').PublicProps>;

package/components/chip/Chip.d.ts

@@ -20,7 +20,7 @@ declare const Chip: import('vue').DefineSetupFnComponent<ChipProps, {
     beforeClick: (event: MouseEvent) => boolean;
     keydown: (event: KeyboardEvent) => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | ChipPropsToOverride> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     onClick?: ((event: MouseEvent) => any) | undefined;
     onKeydown?: ((event: KeyboardEvent) => any) | undefined;

package/components/chip/ChipGroup.d.ts

@@ -2,6 +2,6 @@ import { ChipGroupProps as UIProps } from '@lumx/core/js/components/Chip/ChipGro
 import { VueToJSXProps } from '../../utils/VueToJSX';
 export type ChipGroupProps = VueToJSXProps<UIProps, never>;
 declare const ChipGroup: import('vue').DefineSetupFnComponent<ChipGroupProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default ChipGroup;

package/components/chip/SelectionChipGroup.d.ts

@@ -40,7 +40,7 @@ export interface SelectionChipGroupConstructor {
 declare const SelectionChipGroup: import('vue').DefineSetupFnComponent<SelectionChipGroupProps<any>, {
     change: (_newValue?: any[]) => boolean;
 }, {}, Omit<UIProps<any>, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Ref to the associated input element (for focus restoration on backspace) */
     inputRef?: HTMLInputElement | null;

package/components/combobox/ComboboxButton.d.ts

@@ -19,7 +19,7 @@ declare const ComboboxButton: import('vue').DefineSetupFnComponent<ComboboxButto
         value: string;
     }) => true;
 }, {}, Omit<UIProps, "className" | "label" | import('@lumx/core/js/types').PropsToOverride | "children" | "renderButton"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** The label for the button (used for ARIA and tooltip). */
     label: string;

package/components/combobox/ComboboxList.d.ts

@@ -9,7 +9,7 @@ export type ComboboxListProps = VueToJSXProps<UIProps, 'aria-label' | 'aria-busy
  * @return Vue element.
  */
 declare const ComboboxList: import('vue').DefineSetupFnComponent<ComboboxListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "children" | "aria-label" | "aria-busy"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };
 export default ComboboxList;

package/components/combobox/ComboboxOption.d.ts

@@ -19,7 +19,7 @@ export declare const emitSchema: {
 declare const ComboboxOption: import('vue').DefineSetupFnComponent<ComboboxOptionProps, {
     click: () => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | ComboboxOptionPropsToOverride> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Props forwarded to a Tooltip wrapping the option trigger element. */
     tooltipProps?: Partial<TooltipProps>;

package/components/combobox/ComboboxOptionMoreInfo.d.ts

@@ -18,7 +18,7 @@ export type ComboboxOptionMoreInfoProps = VueToJSXProps<UIProps, ComboboxOptionM
 declare const ComboboxOptionMoreInfo: import('vue').DefineSetupFnComponent<ComboboxOptionMoreInfoProps, {
     toggle: (isOpen: boolean) => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | ComboboxOptionMoreInfoPropsToOverride> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Callback when the popover opens or closes. */
     onToggle?: (isOpen: boolean) => void;

package/components/combobox/ComboboxOptionSkeleton.d.ts

@@ -8,7 +8,7 @@ export type ComboboxOptionSkeletonProps = VueToJSXProps<UIProps, ComboboxOptionS
  * @return Vue element.
  */
 declare const ComboboxOptionSkeleton: import('vue').DefineSetupFnComponent<ComboboxOptionSkeletonProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | ComboboxOptionSkeletonPropsToOverride> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };
 export default ComboboxOptionSkeleton;

package/components/combobox/ComboboxPopover.d.ts

@@ -14,7 +14,7 @@ export type ComboboxPopoverProps = VueToJSXProps<UIProps, 'isOpen' | 'anchorRef'
  * @return Vue element.
  */
 declare const ComboboxPopover: import('vue').DefineSetupFnComponent<ComboboxPopoverProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "children" | "anchorRef"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & Partial<Omit<PopoverProps, "isOpen" | "class" | "onClose" | "anchorRef">> & {}, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };
 export default ComboboxPopover;

package/components/combobox/ComboboxSection.d.ts

@@ -8,7 +8,7 @@ export type ComboboxSectionProps = VueToJSXProps<UIProps, ComboboxSectionPropsTo
  * @return Vue element.
  */
 declare const ComboboxSection: import('vue').DefineSetupFnComponent<ComboboxSectionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };
 export default ComboboxSection;

package/components/combobox/ComboboxState.d.ts

@@ -8,7 +8,7 @@ export type ComboboxStateProps = VueToJSXProps<UIProps, 'state'>;
  * @return Vue element.
  */
 declare const ComboboxState: import('vue').DefineSetupFnComponent<ComboboxStateProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "state"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export { COMPONENT_NAME, CLASSNAME };
 export default ComboboxState;

package/components/combobox/index.d.ts

@@ -28,7 +28,7 @@ export declare const Combobox: {
             value: string;
         }) => true;
     }, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxButton').ComboboxButtonProps, "className" | "label" | import('@lumx/core/js/types').PropsToOverride | "children" | "renderButton"> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {
         label: string;
         value?: string;
@@ -58,13 +58,13 @@ export declare const Combobox: {
     }, import('vue').PublicProps>;
     /** Listbox container that registers with the combobox handle and tracks loading state. */
     List: import('vue').DefineSetupFnComponent<import('./ComboboxList').ComboboxListProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxList').ComboboxListProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "children" | "aria-label" | "aria-busy"> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Selectable option item with filtering and keyboard navigation support. */
     Option: import('vue').DefineSetupFnComponent<import('./ComboboxOption').ComboboxOptionProps, {
         click: () => boolean;
     }, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "hidden" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionPropsToOverride> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {
         tooltipProps?: Partial<import('../tooltip').TooltipProps>;
         actionProps?: Record<string, any>;
@@ -79,7 +79,7 @@ export declare const Combobox: {
     OptionMoreInfo: import('vue').DefineSetupFnComponent<import('./ComboboxOptionMoreInfo').ComboboxOptionMoreInfoProps, {
         toggle: (isOpen: boolean) => boolean;
     }, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo').ComboboxOptionMoreInfoProps, "className" | import('@lumx/core/js/types').PropsToOverride | "onMouseEnter" | "onMouseLeave" | "buttonProps" | import('@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo').ComboboxOptionMoreInfoPropsToOverride> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {
         onToggle?: (isOpen: boolean) => void;
     } & {
@@ -87,22 +87,22 @@ export declare const Combobox: {
     }, import('vue').PublicProps>;
     /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
     OptionSkeleton: import('vue').DefineSetupFnComponent<import('./ComboboxOptionSkeleton').ComboboxOptionSkeletonProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOptionSkeleton').ComboboxOptionSkeletonProps, "className" | import('@lumx/core/js/types').PropsToOverride | import('@lumx/core/js/components/Combobox/ComboboxOptionSkeleton').ComboboxOptionSkeletonPropsToOverride> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Floating popover container that auto-binds to the combobox anchor and open/close state. */
     Popover: import('vue').DefineSetupFnComponent<import('./ComboboxPopover').ComboboxPopoverProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxPopover').ComboboxPopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "isOpen" | "children" | "anchorRef"> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & Partial<Omit<import('../popover').PopoverProps, "isOpen" | "class" | "onClose" | "anchorRef">> & {}, import('vue').PublicProps>;
     /** Labelled group of options that auto-hides when all its child options are filtered out. */
     Section: import('vue').DefineSetupFnComponent<import('./ComboboxSection').ComboboxSectionProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxSection').ComboboxSectionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-hidden" | "hidden"> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Displays empty, error, and loading state messages for the combobox list. */
     State: import('vue').DefineSetupFnComponent<import('./ComboboxState').ComboboxStateProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxState').ComboboxStateProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "state"> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
     /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
     Divider: import('vue').DefineSetupFnComponent<import('../list').ListDividerProps, {}, {}, Omit<import('@lumx/core/js/components/List/ListDivider').ListDividerProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {}, import('vue').PublicProps>;
 };

package/components/dialog/Dialog.d.ts

@@ -1,9 +1,10 @@
 import { Ref } from 'vue';
 import { BaseDialogProps, DialogSizes } from '@lumx/core/js/components/Dialog';
 import { GenericProps, HasCloseMode } from '@lumx/core/js/types';
+import { ClassValue } from '../../utils/VueToJSX';
 export type DialogProps = Pick<BaseDialogProps, 'forceFooterDivider' | 'forceHeaderDivider' | 'isLoading'> & HasCloseMode & {
     /** Additional class name. */
-    class?: string;
+    class?: ClassValue;
     /** Whether the dialog is open. */
     isOpen?: boolean;
     /** Size variant. */
@@ -36,7 +37,7 @@ declare const Dialog: import('vue').DefineSetupFnComponent<DialogProps, {
     visibilityChange: (isVisible: boolean) => boolean;
 }, {}, Pick<BaseDialogProps, "forceFooterDivider" | "forceHeaderDivider" | "isLoading"> & HasCloseMode & {
     /** Additional class name. */
-    class?: string;
+    class?: ClassValue;
     /** Whether the dialog is open. */
     isOpen?: boolean;
     /** Size variant. */

package/components/divider/Divider.d.ts

@@ -9,6 +9,6 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  * @return Vue element.
  */
 declare const Divider: import('vue').DefineSetupFnComponent<DividerProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default Divider;

package/components/drag-handle/DragHandle.d.ts

@@ -9,6 +9,6 @@ export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
  * @return Vue element.
  */
 declare const DragHandle: import('vue').DefineSetupFnComponent<DragHandleProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default DragHandle;

package/components/expansion-panel/ExpansionPanel.d.ts

@@ -24,7 +24,7 @@ declare const ExpansionPanel: import('vue').DefineSetupFnComponent<ExpansionPane
     close: (event: MouseEvent) => boolean;
     toggleOpen: (shouldOpen: boolean, event: MouseEvent) => boolean;
 }, {}, Omit<UIProps, "className" | "footer" | "ref" | "handleClick" | "handleChange" | "handleInput" | "handleKeyPress" | "handleClose" | "handleFocus" | "handleBeforeClick" | "handleAfterClick" | "handleMouseEnter" | "handleMouseLeave" | "handleKeyDown" | "wrapperRef" | "content" | "children" | "IconButton" | "toggleButtonProps" | "handleOpen" | "handleToggleOpen" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */
     toggleButtonProps?: {

package/components/flag/Flag.d.ts

@@ -8,6 +8,6 @@ export type FlagProps = VueToJSXProps<UIProps, 'Text'>;
  * @return Vue element.
  */
 declare const Flag: import('vue').DefineSetupFnComponent<FlagProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "Text"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default Flag;

package/components/flex-box/FlexBox.d.ts

@@ -16,7 +16,7 @@ export { CLASSNAME, COMPONENT_NAME };
  * @return Vue element.
  */
 declare const FlexBox: import('vue').DefineSetupFnComponent<FlexBoxProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "hAlign" | "vAlign"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Customize the root element. */
     as?: string;

package/components/generic-block/GenericBlock.d.ts

@@ -37,7 +37,7 @@ export type GenericBlockProps = VueToJSXProps<UIProps, GenericBlockPropsToOverri
  * - `actions` slot => One or more actions to set after the element.
  */
 declare const GenericBlock: import('vue').DefineSetupFnComponent<GenericBlockProps, {}, {}, Omit<UIProps, "className" | "figure" | import('@lumx/core/js/types').PropsToOverride | "children" | "actions" | "hAlign" | "vAlign" | GenericBlockPropsToOverride | "contentProps" | "actionsProps" | "figureProps"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Customize the root element tag. */
     as?: string;

package/components/grid-column/GridColumn.d.ts

@@ -4,6 +4,6 @@ export type GridColumnProps = VueToJSXProps<UIProps>;
 export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
 export type { GridColumnGapSize };
 declare const GridColumn: import('vue').DefineSetupFnComponent<GridColumnProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default GridColumn;

package/components/heading/Heading.d.ts

@@ -8,6 +8,6 @@ export type HeadingVueProps = VueToJSXProps<HeadingProps>;
  * @return Vue element.
  */
 declare const Heading: import('vue').DefineSetupFnComponent<HeadingVueProps, {}, {}, Omit<HeadingProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default Heading;

package/components/icon/Icon.d.ts

@@ -8,6 +8,6 @@ export type IconProps = VueToJSXProps<UIProps>;
  * @return Vue element.
  */
 declare const Icon: import('vue').DefineSetupFnComponent<IconProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default Icon;

package/components/image-block/ImageCaption.d.ts

@@ -1,10 +1,11 @@
 import { HorizontalAlignment, Theme } from '@lumx/core/js/constants';
+import { ClassValue } from '../../utils/VueToJSX';
 type ImageCaptionProps = {
     as?: 'div' | 'figcaption';
     align?: HorizontalAlignment;
     baseClassName?: string;
     captionStyle?: Record<string, any>;
-    class?: string;
+    class?: ClassValue;
     description?: any;
     descriptionProps?: Record<string, any>;
     tags?: any;

package/components/inline-list/InlineList.d.ts

@@ -8,6 +8,6 @@ export type InlineListProps = VueToJSXProps<UIProps, 'items'>;
  * @return Vue element.
  */
 declare const InlineList: import('vue').DefineSetupFnComponent<InlineListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "items"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default InlineList;

package/components/input-helper/InputHelper.d.ts

@@ -8,6 +8,6 @@ export type InputHelperProps = VueToJSXProps<UIProps>;
  * @return Vue element.
  */
 declare const InputHelper: import('vue').DefineSetupFnComponent<InputHelperProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default InputHelper;

package/components/input-label/InputLabel.d.ts

@@ -8,6 +8,6 @@ export type InputLabelProps = VueToJSXProps<UIProps>;
  * @return Vue element.
  */
 declare const InputLabel: import('vue').DefineSetupFnComponent<InputLabelProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default InputLabel;

package/components/lightbox/Lightbox.d.ts

@@ -14,7 +14,7 @@ export declare const emitSchema: {
 declare const Lightbox: import('vue').DefineSetupFnComponent<LightboxProps, {
     close: () => boolean;
 }, {}, Omit<BaseLightboxProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label" | "theme" | "aria-labelledby"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Reference to the element that triggered lightbox opening (gets focus back on close). */
     parentElement?: HTMLElement;

package/components/link/Link.d.ts

@@ -13,7 +13,7 @@ export declare const emitSchema: {
 declare const Link: import('vue').DefineSetupFnComponent<LinkProps, {
     click: (event: MouseEvent) => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     onClick?: ((event: MouseEvent) => any) | undefined;
 }, import('vue').PublicProps>;

package/components/link-preview/LinkPreview.d.ts

@@ -12,7 +12,7 @@ export { COMPONENT_NAME };
  * @return Vue element.
  */
 declare const LinkPreview: import('vue').DefineSetupFnComponent<LinkPreviewProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "Thumbnail" | "Link" | "TitleHeading"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Customize the title heading tag. */
     titleHeading?: string;

package/components/list/List.d.ts

@@ -8,6 +8,6 @@ export type ListProps = VueToJSXProps<UIProps>;
  * @return Vue element.
  */
 declare const List: import('vue').DefineSetupFnComponent<ListProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default List;

package/components/list/ListDivider.d.ts

@@ -8,6 +8,6 @@ export type ListDividerProps = VueToJSXProps<UIProps>;
  * @return Vue element.
  */
 declare const ListDivider: import('vue').DefineSetupFnComponent<ListDividerProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default ListDivider;

package/components/list/ListItem.d.ts

@@ -8,14 +8,14 @@ export declare const emitSchema: {
 declare const _default: import('vue').DefineSetupFnComponent<ListItemProps, {
     click: (event: MouseEvent) => boolean;
 }, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "before" | "after" | "linkRef"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     onClick?: ((event: MouseEvent) => any) | undefined;
 }, import('vue').PublicProps> & {
     Action: import('vue').DefineSetupFnComponent<import('./ListItemAction').ListItemActionProps, {
         click: (event: MouseEvent) => boolean;
     }, {}, Omit<import('@lumx/core/js/components/RawClickable').BaseClickableProps & import('@lumx/core/js/types').HasClassName, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-        class?: string;
+        class?: import('../../utils/VueToJSX').ClassValue;
     } & {
         as?: import('@lumx/core/js/components/RawClickable').ClickableElement;
         href?: string;

package/components/list/ListItemAction.d.ts

@@ -19,7 +19,7 @@ export declare const emitSchema: {
 declare const ListItemAction: import('vue').DefineSetupFnComponent<ListItemActionProps, {
     click: (event: MouseEvent) => boolean;
 }, {}, Omit<BaseClickableProps & HasClassName, "className" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {
     /** Customize the rendered element. */
     as?: ClickableElement;

package/components/list/ListSection.d.ts

@@ -8,6 +8,6 @@ export type ListSectionProps = VueToJSXProps<UIProps, 'id' | 'Text'>;
  * @return Vue element.
  */
 declare const ListSection: import('vue').DefineSetupFnComponent<ListSectionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "id" | "children" | "Text"> & {
-    class?: string;
+    class?: import('../../utils/VueToJSX').ClassValue;
 } & {}, import('vue').PublicProps>;
 export default ListSection;