@lumx/vue 4.5.1 → 4.5.2-alpha.0

package/_internal/DCsEMm-b.js

@@ -0,0 +1,117 @@
+import { inject as l, computed as m, unref as P, defineComponent as c, provide as i, ref as y, watch as b, onBeforeUnmount as p, createVNode as C, Teleport as R, isVNode as x, onMounted as L } from "vue";
+import { Theme as T } from "@lumx/core/js/constants";
+function S(e = { defaultTheme: T.light }) {
+  const { defaultTheme: n } = e, o = l("theme", void 0);
+  return m(() => P(o) || n);
+}
+const g = c(
+  (e, { slots: n }) => (i(
+    "theme",
+    m(() => e.value)
+  ), () => n.default?.()),
+  {
+    name: "LumxThemeProvider",
+    props: { value: { type: String, default: void 0 } }
+  }
+), v = /* @__PURE__ */ Symbol("LumxPortal"), A = () => ({
+  container: "body"
+}), O = /* @__PURE__ */ c((e, {
+  slots: n
+}) => (i(v, e.value), () => n.default?.()), {
+  name: "LumxPortalProvider",
+  props: {
+    value: {
+      type: Function,
+      required: !0
+    }
+  }
+});
+function w(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !x(e);
+}
+const Y = /* @__PURE__ */ c((e, {
+  slots: n
+}) => {
+  const o = l(v, A), t = y(null), u = () => {
+    e.enabled ? t.value = o() : t.value = null;
+  };
+  return u(), b(() => e.enabled, u), p(() => {
+    t.value?.teardown?.();
+  }), () => {
+    const r = n.default?.(), a = t.value?.container;
+    return !e.enabled || !a ? r : C(R, {
+      to: a
+    }, w(r) ? r : {
+      default: () => [r]
+    });
+  };
+}, {
+  name: "LumxPortal",
+  props: {
+    enabled: {
+      type: Boolean,
+      default: !0
+    }
+  }
+}), s = ["mousedown", "touchstart"];
+function E(e, n) {
+  return !n.some((o) => e.some((t) => o?.contains(t)));
+}
+function j(e, n) {
+  if (!n)
+    return;
+  const o = (t) => {
+    const u = [t.composedPath?.()[0], t.target], r = e();
+    E(u, r) && n(t);
+  };
+  return s.forEach((t) => document.addEventListener(t, o)), () => {
+    s.forEach((t) => document.removeEventListener(t, o));
+  };
+}
+const f = /* @__PURE__ */ Symbol("LumxClickAway"), I = /* @__PURE__ */ c((e, {
+  slots: n
+}) => {
+  const o = l(f, null), t = [], u = {
+    childrenRefs: t,
+    addRefs(...a) {
+      for (const h of a) {
+        const d = h.value;
+        d && t.push(d);
+      }
+      o && (o.addRefs(...a), e.parentRef && o.addRefs(e.parentRef));
+    }
+  };
+  i(f, u);
+  let r;
+  return L(() => {
+    const a = e.childrenRefs.value;
+    a && u.addRefs(...a), r = j(() => t, e.callback);
+  }), p(() => {
+    r?.();
+  }), () => n.default?.();
+}, {
+  name: "LumxClickAwayProvider",
+  props: {
+    callback: {
+      type: [Function, Boolean, void 0],
+      default: void 0
+    },
+    childrenRefs: {
+      type: Object,
+      required: !0
+    },
+    parentRef: {
+      type: Object,
+      default: void 0
+    }
+  }
+});
+export {
+  I as C,
+  Y as P,
+  g as T,
+  O as a,
+  j as s,
+  S as u
+};
+//# sourceMappingURL=DCsEMm-b.js.map

package/_internal/DCsEMm-b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DCsEMm-b.js","sources":["../../src/utils/theme/useTheme.ts","../../src/utils/theme/ThemeProvider.ts","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/utils/ClickAway/ClickAwayProvider.tsx"],"sourcesContent":["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","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 { 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) => 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] as HTMLElement[];\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 the context's collected refs directly\n            teardown = setupClickAway(() => contextChildrenRefs, props.callback);\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"],"names":["useTheme","options","Theme","defaultTheme","injected","inject","computed","unref","ThemeProvider","defineComponent","props","slots","provide","PORTAL_KEY","Symbol","defaultPortalInit","container","PortalProvider","value","default","name","type","Function","required","_isSlot","s","Object","prototype","toString","call","_isVNode","Portal","portalInit","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","evtType","CLICK_AWAY_KEY","ClickAwayProvider","parentContext","contextChildrenRefs","currentContext","childrenRefs","addRefs","newChildrenRefs","newRef","el","push","parentRef","onMounted","refs","undefined"],"mappings":"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"}

package/components/popover/Popover.d.ts

@@ -0,0 +1,46 @@
+import { Ref } from 'vue';
+import { PopoverProps as CorePopoverProps } from '@lumx/core/js/components/Popover';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+/**
+ * Vue Popover props derived from core PopoverProps.
+ * Omits framework-specific props and narrows element ref types to raw HTMLElement.
+ * `isOpen` is made optional (defaults to false at runtime via keysOf).
+ */
+export type PopoverProps = VueToJSXProps<CorePopoverProps, 'anchorRef' | 'boundaryRef' | 'focusElement' | 'parentElement' | 'focusTrapZoneElement' | 'isOpen'> & {
+    /** Reference to the DOM element used to set the position of the popover. Accepts a Vue Ref for reactive positioning. */
+    anchorRef?: Ref<HTMLElement | undefined> | HTMLElement;
+    /** Element which will act as boundary when opening the popover. Accepts a Vue Ref for reactive positioning. */
+    boundaryRef?: Ref<HTMLElement | undefined> | HTMLElement;
+    /** Element to focus when opening the popover. */
+    focusElement?: HTMLElement;
+    /** Whether the popover is open or not. */
+    isOpen?: boolean;
+    /** Reference to the parent element that triggered the popover. */
+    parentElement?: HTMLElement;
+    /** The element in which the focus trap should be set. Default to popover. */
+    focusTrapZoneElement?: HTMLElement;
+};
+export declare const emitSchema: {
+    close: () => boolean;
+};
+declare const Popover: import('vue').DefineSetupFnComponent<PopoverProps, {
+    close: () => boolean;
+}, {}, Omit<CorePopoverProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "isOpen" | "anchorRef" | "boundaryRef" | "focusElement" | "parentElement" | "focusTrapZoneElement"> & {
+    class?: string;
+} & {
+    /** Reference to the DOM element used to set the position of the popover. Accepts a Vue Ref for reactive positioning. */
+    anchorRef?: Ref<HTMLElement | undefined> | HTMLElement;
+    /** Element which will act as boundary when opening the popover. Accepts a Vue Ref for reactive positioning. */
+    boundaryRef?: Ref<HTMLElement | undefined> | HTMLElement;
+    /** Element to focus when opening the popover. */
+    focusElement?: HTMLElement;
+    /** Whether the popover is open or not. */
+    isOpen?: boolean;
+    /** Reference to the parent element that triggered the popover. */
+    parentElement?: HTMLElement;
+    /** The element in which the focus trap should be set. Default to popover. */
+    focusTrapZoneElement?: HTMLElement;
+} & {
+    onClose?: (() => any) | undefined;
+}, import('vue').PublicProps>;
+export default Popover;

package/components/popover/Popover.stories.d.ts

@@ -0,0 +1,114 @@
+declare const _default: {
+    component: any;
+    render: any;
+    args: {
+        isOpen: boolean;
+        anchorText: string;
+        anchorClassName: string;
+        anchorRef?: import('../..').CommonRef;
+        as?: string | undefined;
+        boundaryRef?: import('../..').CommonRef;
+        closeOnClickAway?: boolean | undefined;
+        closeOnEscape?: boolean | undefined;
+        elevation?: import('../..').Elevation | undefined;
+        fitToAnchorWidth?: (import('@lumx/core/js/components/Popover/constants').FitAnchorWidth | boolean) | undefined;
+        fitWithinViewportHeight?: boolean | undefined;
+        focusElement?: import('../..').CommonRef;
+        focusAnchorOnClose?: boolean | undefined;
+        hasArrow?: boolean | undefined;
+        offset?: import('../..').Offset | undefined;
+        parentElement?: import('../..').CommonRef;
+        placement?: import('../..').Placement | undefined;
+        usePortal?: boolean | undefined;
+        focusTrapZoneElement?: import('../..').CommonRef;
+        zIndex?: number | undefined;
+        withFocusTrap?: boolean | undefined;
+        handleClose?: (() => void) | undefined;
+        className?: string | undefined;
+        theme?: import('../..').Theme | undefined;
+    };
+    argTypes: {
+        isOpen: {
+            control: string;
+        };
+        hasArrow: {
+            control: string;
+        };
+        placement: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("top" | "right" | "bottom" | "left" | "auto" | "top-end" | "top-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "auto-end" | "auto-start")[];
+            mapping: Record<string, "top" | "right" | "bottom" | "left" | "auto" | "top-end" | "top-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "auto-end" | "auto-start"> | undefined;
+        };
+        elevation: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: import('../..').Elevation[];
+            mapping: Record<string, import('../..').Elevation> | undefined;
+        };
+        ref: {
+            control: boolean;
+        };
+        parentElement: {
+            control: boolean;
+        };
+        focusElement: {
+            control: boolean;
+        };
+        anchorRef: {
+            control: boolean;
+        };
+        boundaryRef: {
+            control: boolean;
+        };
+        children: {
+            control: boolean;
+        };
+        anchorText: {
+            control: boolean;
+        };
+        anchorClassName: {
+            control: boolean;
+        };
+        popoverClassName: {
+            control: boolean;
+        };
+        textColor: {
+            control: boolean;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const Simple: {};
+export declare const DarkTheme: {
+    args: {
+        theme: string;
+        hasArrow: boolean;
+        textColor: string;
+    };
+};
+export declare const WithoutPortal: {
+    args: {
+        usePortal: boolean;
+    };
+};
+export declare const Placements: {
+    argTypes: {
+        placement: {
+            control: boolean;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const FitToAnchorWidth: {
+    args: {
+        anchorClassName: string;
+        popoverClassName: string;
+        placement: "bottom";
+    };
+    decorators: ((story: any, context: any) => any)[];
+};

package/components/popover/Popover.test.stories.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+    tags: string[];
+};
+export default _default;
+/**
+ * Testing update of the popover on anchor and popover resize and move
+ */
+export declare const TestUpdatingChildrenAndMovingAnchor: {
+    render(): import("vue/jsx-runtime").JSX.Element;
+};

package/components/popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popover, type PopoverProps } from './Popover';
+export { Placement, type Offset, type Elevation } from '@lumx/core/js/components/Popover/constants';

package/components/popover/usePopoverStyle.d.ts

@@ -0,0 +1,24 @@
+import { Ref, CSSProperties } from 'vue';
+import { Placement, Offset } from '@lumx/core/js/components/Popover/constants';
+export interface UsePopoverStyleOptions {
+    anchorRef: Ref<HTMLElement | undefined>;
+    offset?: Ref<Offset | undefined>;
+    hasArrow?: Ref<boolean | undefined>;
+    fitToAnchorWidth?: Ref<string | boolean | undefined>;
+    fitWithinViewportHeight?: Ref<boolean | undefined>;
+    boundaryRef?: Ref<HTMLElement | undefined>;
+    placement?: Ref<Placement | undefined>;
+    style?: Ref<CSSProperties | undefined>;
+    zIndex?: Ref<number | undefined>;
+}
+export interface UsePopoverStyleOutput {
+    styles: {
+        arrow: Ref<CSSProperties | undefined>;
+        popover: Ref<CSSProperties>;
+    };
+    isPositioned: Ref<boolean>;
+    position: Ref<Placement | undefined>;
+    floatingRef: Ref<HTMLElement | undefined>;
+    arrowRef: Ref<HTMLElement | undefined>;
+}
+export declare function usePopoverStyle(options: UsePopoverStyleOptions): UsePopoverStyleOutput;

package/composables/useFocus.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+/**
+ * Composable focusing an element when defined and `shouldFocus` becomes `true`.
+ * Only focuses once per transition to `true` (one-shot).
+ *
+ * @param elementRef     Element to focus (or ref to it).
+ * @param shouldFocusRef Boolean flag to trigger the focus (or ref to it).
+ */
+export declare function useFocus(elementRef: Ref<HTMLElement | null | undefined> | HTMLElement | null | undefined, shouldFocusRef?: Ref<boolean> | boolean): void;

package/composables/useFocusTrap.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+/**
+ * Trap 'Tab' focus switch inside the `focusZoneElement`.
+ *
+ * If multiple focus traps are activated, only the last one is maintained and when a focus trap closes, the previous one
+ * gets activated again.
+ *
+ * @param focusZoneElementRef The element in which to trap the focus (or ref to it). Falsy disables the trap.
+ * @param focusElementRef     The element to focus when the focus trap is activated (or ref to it).
+ */
+export declare function useFocusTrap(focusZoneElementRef: Ref<HTMLElement | null | undefined | false> | HTMLElement | null | undefined | false, focusElementRef?: Ref<HTMLElement | null | undefined> | HTMLElement | null | undefined): void;

package/composables/useRestoreFocusOnClose.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+/**
+ * Restores focus to the anchor or parent element when the popover is unmounted,
+ * if focus was within the popover at the time of unmount.
+ *
+ * @param focusAnchorOnClose Whether to restore focus on close.
+ * @param anchorRef          Reference to the anchor element.
+ * @param parentElementRef   Reference to the parent element (optional override for focus target).
+ * @param popoverElementRef  Reference to the popover element.
+ */
+export declare function useRestoreFocusOnClose(focusAnchorOnClose: Ref<boolean | undefined>, anchorRef: Ref<HTMLElement | undefined>, parentElementRef: Ref<HTMLElement | undefined> | undefined, popoverElementRef: Ref<HTMLElement | undefined>): void;

package/composables/useTheme.d.ts

@@ -1,10 +1 @@
-import { ComputedRef } from 'vue';
-import { Theme } from '@lumx/core/js/constants';
-export interface UseTheme {
-    defaultTheme?: Theme;
-}
-/**
- * Retrieves the globally applied theme.
- * @returns computed theme value (auto-updates when the provided theme changes)
- */
-export declare function useTheme(options?: UseTheme): ComputedRef<Theme | undefined>;
+export { useTheme, type UseTheme } from '../utils/theme/useTheme';

package/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/input-helper';
 export * from './components/input-label';
 export * from './components/link';
 export * from './components/message';
+export * from './components/popover';
 export * from './components/progress';
 export * from './components/radio-button';
 export * from './components/skeleton';