@lumx/vue 4.9.0-next.8 → 4.9.0

package/components/combobox/ComboboxOptionMoreInfo.d.ts

@@ -0,0 +1,29 @@
+import { ComboboxOptionMoreInfoProps as UIProps, ComboboxOptionMoreInfoPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxOptionMoreInfo';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ComboboxOptionMoreInfoProps = VueToJSXProps<UIProps, ComboboxOptionMoreInfoPropsToOverride | 'onMouseEnter' | 'onMouseLeave' | 'buttonProps'> & {
+    /** Callback when the popover opens or closes. */
+    onToggle?: (isOpen: boolean) => void;
+};
+/**
+ * Combobox.OptionMoreInfo component.
+ *
+ * Displays an info icon button on a combobox option that shows a popover with additional details.
+ * The popover opens on mouse hover over the icon or when the parent option is keyboard-highlighted.
+ *
+ * Must be placed in the `after` slot of a `Combobox.Option`.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+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;
+} & {
+    /** Callback when the popover opens or closes. */
+    onToggle?: (isOpen: boolean) => void;
+} & {
+    onToggle?: ((isOpen: boolean) => any) | undefined;
+}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxOptionMoreInfo;

package/components/combobox/ComboboxOptionSkeleton.d.ts

@@ -0,0 +1,14 @@
+import { ComboboxOptionSkeletonProps as UIProps, ComboboxOptionSkeletonPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxOptionSkeleton';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ComboboxOptionSkeletonProps = VueToJSXProps<UIProps, ComboboxOptionSkeletonPropsToOverride>;
+/**
+ * Combobox.OptionSkeleton component — renders skeleton placeholder(s) inside a combobox list.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ComboboxOptionSkeleton: import('vue').DefineSetupFnComponent<ComboboxOptionSkeletonProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | ComboboxOptionSkeletonPropsToOverride> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxOptionSkeleton;

package/components/combobox/ComboboxPopover.d.ts

@@ -0,0 +1,20 @@
+import { ComboboxPopoverProps as UIProps, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxPopover';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+import { PopoverProps } from '../popover/Popover';
+/**
+ * Props type extends the core ComboboxPopover props (via VueToJSXProps) with additional
+ * Popover passthrough props. The core type only declares props it explicitly uses;
+ * extra Popover props flow through the core template's `...forwardedProps` spread.
+ */
+export type ComboboxPopoverProps = VueToJSXProps<UIProps, 'isOpen' | 'anchorRef'> & Partial<Omit<PopoverProps, 'isOpen' | 'anchorRef' | 'onClose' | 'class'>>;
+/**
+ * Combobox.Popover component - renders a Popover connected to the combobox context.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ComboboxPopover: import('vue').DefineSetupFnComponent<ComboboxPopoverProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "isOpen" | "anchorRef"> & {
+    class?: string;
+} & Partial<Omit<PopoverProps, "class" | "isOpen" | "onClose" | "anchorRef">> & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxPopover;

package/components/combobox/ComboboxProvider.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Defines the props of the component.
+ */
+export interface ComboboxProviderProps {
+}
+/**
+ * Combobox.Provider component.
+ *
+ * Provides shared context to sub-components. The vanilla JS combobox handle is
+ * created by the trigger sub-component (Combobox.Input or Combobox.Button) on mount.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ComboboxProvider: import('vue').DefineSetupFnComponent<ComboboxProviderProps, {}, {}, ComboboxProviderProps & {}, import('vue').PublicProps>;
+export default ComboboxProvider;

package/components/combobox/ComboboxSection.d.ts

@@ -0,0 +1,14 @@
+import { ComboboxSectionProps as UIProps, ComboboxSectionPropsToOverride, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxSection';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ComboboxSectionProps = VueToJSXProps<UIProps, ComboboxSectionPropsToOverride | 'hidden' | 'aria-hidden'>;
+/**
+ * Combobox.Section component - groups Combobox.Option items under a labelled section.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ComboboxSection: import('vue').DefineSetupFnComponent<ComboboxSectionProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "hidden" | "aria-hidden"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxSection;

package/components/combobox/ComboboxState.d.ts

@@ -0,0 +1,14 @@
+import { ComboboxStateProps as UIProps, COMPONENT_NAME, CLASSNAME } from '@lumx/core/js/components/Combobox/ComboboxState';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ComboboxStateProps = VueToJSXProps<UIProps, 'state'>;
+/**
+ * Combobox.State component - displays empty and error states for the combobox list.
+ *
+ * @param props Component props.
+ * @return Vue element.
+ */
+declare const ComboboxState: import('vue').DefineSetupFnComponent<ComboboxStateProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "state"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export { COMPONENT_NAME, CLASSNAME };
+export default ComboboxState;

package/components/combobox/context/ComboboxContext.d.ts

@@ -0,0 +1,23 @@
+import { Ref, ShallowRef } from 'vue';
+import { ComboboxHandle } from '@lumx/core/js/components/Combobox/types';
+/** Context value shared between Combobox sub-components. */
+export interface ComboboxContextValue {
+    /** The current ComboboxHandle (set by the trigger sub-component). */
+    handle: ShallowRef<ComboboxHandle | null>;
+    /** Setter for the handle (called by trigger on mount/unmount). */
+    setHandle: (handle: ComboboxHandle | null) => void;
+    /** The ID of the listbox element. */
+    listboxId: string;
+    /** Reference to the anchor element for popover positioning. */
+    anchorRef: Ref<HTMLElement | null>;
+}
+/**
+ * Provides the combobox context to sub-components.
+ */
+export declare function provideComboboxContext(value: ComboboxContextValue): void;
+/**
+ * Hook to access the Combobox context.
+ * @throws Error if used outside of a Combobox component.
+ * @returns The combobox context value.
+ */
+export declare function useComboboxContext(): ComboboxContextValue;

package/components/combobox/context/ComboboxListContext.d.ts

@@ -0,0 +1,14 @@
+/** Context value for the Combobox.List sub-tree. */
+export interface ComboboxListContextValue {
+    /** The popup type. "grid" enables 2D keyboard navigation and action buttons on options. */
+    type: 'listbox' | 'grid';
+}
+/**
+ * Provides the combobox list context.
+ */
+export declare function provideComboboxListContext(value: ComboboxListContextValue): void;
+/**
+ * Hook to access the Combobox.List context (provides the `type`).
+ * @returns The list context value.
+ */
+export declare function useComboboxListContext(): ComboboxListContextValue;

package/components/combobox/context/ComboboxOptionContext.d.ts

@@ -0,0 +1,16 @@
+/** Context value provided by Combobox.Option to its `after` slot children. */
+export interface ComboboxOptionContextValue {
+    /** The ID of the parent option element (matches the aria-activedescendant value when highlighted). */
+    optionId: string;
+}
+/**
+ * Provides the combobox option context.
+ */
+export declare function provideComboboxOptionContext(value: ComboboxOptionContextValue): void;
+/**
+ * Hook to access the Combobox.Option context.
+ * Must be used within a Combobox.Option's `after` slot.
+ * @throws Error if used outside of a Combobox.Option.
+ * @returns The option context value.
+ */
+export declare function useComboboxOptionContext(): ComboboxOptionContextValue;

package/components/combobox/context/useComboboxEvent.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import { ComboboxEventMap } from '@lumx/core/js/components/Combobox/types';
+/**
+ * Composable to subscribe to a combobox event via the handle's subscriber system.
+ * Re-subscribes when the handle changes (e.g. trigger mount/unmount).
+ */
+export declare function useComboboxEvent<K extends keyof ComboboxEventMap>(event: K, initialValue: ComboboxEventMap[K]): Ref<ComboboxEventMap[K]>;

package/components/combobox/context/useComboboxOpen.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Composable to subscribe to the combobox open/close state.
+ */
+export declare function useComboboxOpen(): {
+    isOpen: import('vue').Ref<boolean, boolean>;
+    setIsOpen: (open: boolean) => void | undefined;
+};

package/components/combobox/index.d.ts

@@ -0,0 +1,112 @@
+export type { ComboboxProviderProps } from './ComboboxProvider';
+export type { ComboboxListProps } from './ComboboxList';
+export type { ComboboxPopoverProps } from './ComboboxPopover';
+export type { ComboboxButtonProps } from './ComboboxButton';
+export type { ComboboxInputProps } from './ComboboxInput';
+export type { ComboboxOptionProps } from './ComboboxOption';
+export type { ComboboxOptionActionProps } from './ComboboxOptionAction';
+export type { ComboboxOptionMoreInfoProps } from './ComboboxOptionMoreInfo';
+export type { ComboboxOptionSkeletonProps } from './ComboboxOptionSkeleton';
+export type { ComboboxSectionProps } from './ComboboxSection';
+export type { ComboboxStateProps } from './ComboboxState';
+export type { ComboboxButtonLabelDisplayMode } from '@lumx/core/js/components/Combobox/ComboboxButton';
+export type { ComboboxListType } from '@lumx/core/js/components/Combobox/ComboboxList';
+export type { ComboboxHandle, ComboboxCallbacks } from '@lumx/core/js/components/Combobox/types';
+/**
+ * Combobox compound component namespace.
+ */
+export declare const Combobox: {
+    /** Provides shared combobox context (handle, listbox ID, anchor ref) to all sub-components. */
+    Provider: import('vue').DefineSetupFnComponent<import('./ComboboxProvider').ComboboxProviderProps, {}, {}, import('./ComboboxProvider').ComboboxProviderProps & {}, import('vue').PublicProps>;
+    /** Button trigger for select-only combobox mode with keyboard navigation and typeahead. */
+    Button: import('vue').DefineSetupFnComponent<import('./ComboboxButton').ComboboxButtonProps, {
+        select: (option: {
+            value: string;
+        }) => true;
+    }, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxButton').ComboboxButtonProps, "className" | "label" | import('@lumx/core/js/types').PropsToOverride | "children"> & {
+        class?: string;
+    } & {
+        label: string;
+        value?: string;
+        labelDisplayMode?: import('@lumx/core/js/components/Combobox/ComboboxButton').ComboboxButtonLabelDisplayMode;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+    } & {
+        onSelect?: ((option: {
+            value: string;
+        }) => any) | undefined;
+    }, import('vue').PublicProps>;
+    /** Text input trigger for autocomplete combobox mode with optional toggle button and filtering. */
+    Input: import('vue').DefineSetupFnComponent<import('./ComboboxInput').ComboboxInputProps, {
+        select: (option: {
+            value: string;
+        }) => true;
+        change: (value: string, _name?: string, _event?: Event) => boolean;
+        focus: (_event?: FocusEvent) => true;
+        blur: (_event?: FocusEvent) => true;
+        clear: (_event?: MouseEvent) => true;
+    }, {}, Omit<import('../text-field').TextFieldProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "inputRef" | "textFieldRef"> & {
+        class?: string;
+    } & {
+        toggleButtonProps?: Pick<import('../button').IconButtonProps, "label"> & Partial<Omit<import('../button').IconButtonProps, "label">>;
+        onSelect?: (option: {
+            value: string;
+        }) => void;
+        autoFilter?: boolean;
+    } & {
+        onSelect?: ((option: {
+            value: string;
+        }) => any) | undefined;
+        onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
+        onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;
+        onFocus?: ((_event?: FocusEvent | undefined) => any) | undefined;
+        onClear?: ((_event?: MouseEvent | undefined) => any) | undefined;
+    }, 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 | "children" | "aria-label" | "id" | "aria-busy"> & {
+        class?: string;
+    } & {}, import('vue').PublicProps>;
+    /** Selectable option item with filtering and keyboard navigation support. */
+    Option: import('vue').DefineSetupFnComponent<import('./ComboboxOption').ComboboxOptionProps, {}, {}, Omit<import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionProps, "className" | import('@lumx/core/js/types').PropsToOverride | "hidden" | "id" | "descriptionId" | "isGrid" | import('@lumx/core/js/components/Combobox/ComboboxOption').ComboboxOptionPropsToOverride> & {
+        class?: string;
+    } & {
+        tooltipProps?: Partial<import('../tooltip').TooltipProps>;
+        onClick?: () => void;
+        actionProps?: Record<string, any>;
+    } & {}, import('vue').PublicProps>;
+    /** Secondary action button within a grid-mode option row, rendered as an independent gridcell. */
+    OptionAction: import('vue').DefineSetupFnComponent<import('./ComboboxOptionAction').ComboboxOptionActionProps, {}, {}, Pick<import('../../utils/VueToJSX').VueToJSXProps<import('@lumx/core/js/components/Combobox/ComboboxOptionAction').ComboboxOptionActionProps>, "isDisabled" | "class"> & {
+        onClick?: (evt: MouseEvent) => void;
+    } & {}, import('vue').PublicProps>;
+    /** Info button on an option that shows a popover on hover or keyboard highlight. */
+    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;
+    } & {
+        onToggle?: (isOpen: boolean) => void;
+    } & {
+        onToggle?: ((isOpen: boolean) => any) | undefined;
+    }, 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;
+    } & {}, 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 | "children" | "isOpen" | "anchorRef"> & {
+        class?: string;
+    } & Partial<Omit<import('../popover').PopoverProps, "class" | "isOpen" | "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" | "hidden" | "aria-hidden"> & {
+        class?: string;
+    } & {}, 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;
+    } & {}, 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;
+    } & {}, import('vue').PublicProps>;
+};

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

@@ -0,0 +1,39 @@
+import { ExpansionPanelProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ExpansionPanelPropsToOverride } from '@lumx/core/js/components/ExpansionPanel';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type ExpansionPanelProps = VueToJSXProps<UIProps, ExpansionPanelPropsToOverride> & {
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */
+    toggleButtonProps?: {
+        label: string;
+        [key: string]: any;
+    };
+};
+export declare const emitSchema: {
+    open: (event: MouseEvent) => boolean;
+    close: (event: MouseEvent) => boolean;
+    toggleOpen: (shouldOpen: boolean, event: MouseEvent) => boolean;
+};
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * ExpansionPanel component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ExpansionPanel: import('vue').DefineSetupFnComponent<ExpansionPanelProps, {
+    open: (event: MouseEvent) => boolean;
+    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" | "children" | "content" | "IconButton" | "toggleButtonProps" | "handleOpen" | "handleToggleOpen" | "wrapperRef" | "headerProps" | "headerContent" | "dragHandle" | "isChildrenVisible"> & {
+    class?: string;
+} & {
+    /** Props to pass to the toggle button (minus those already set by the ExpansionPanel). */
+    toggleButtonProps?: {
+        label: string;
+        [key: string]: any;
+    };
+} & {
+    onClose?: ((event: MouseEvent) => any) | undefined;
+    onOpen?: ((event: MouseEvent) => any) | undefined;
+    onToggleOpen?: ((shouldOpen: boolean, event: MouseEvent) => any) | undefined;
+}, import('vue').PublicProps>;
+export default ExpansionPanel;

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

@@ -0,0 +1,54 @@
+declare const _default: {
+    component: any;
+    render: ({ children, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        'toggleButtonProps.label': string;
+        label: string;
+        hasBackground?: boolean | undefined;
+        hasHeaderDivider?: boolean | undefined;
+        isOpen?: boolean | undefined;
+        handleOpen?: ((event: any) => void) | undefined;
+        handleClose?: ((event: any) => void) | undefined;
+        toggleButtonProps?: any;
+        handleToggleOpen?: ((shouldOpen: boolean, event: any) => void) | undefined;
+        children?: import('react').ReactNode;
+        ref?: import('../..').CommonRef;
+        wrapperRef?: import('../..').CommonRef;
+        headerProps?: import('../..').GenericProps | undefined;
+        headerContent?: import('react').ReactNode;
+        dragHandle?: import('react').ReactNode;
+        content?: import('react').ReactNode;
+        footer?: import('react').ReactNode;
+        IconButton?: any;
+        isChildrenVisible?: boolean | undefined;
+        className?: string | undefined;
+        closeMode?: "hide" | "unmount" | undefined;
+        theme?: import('../..').Theme | undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const Default: {};
+export declare const HasBackground: {
+    args: {
+        hasBackground: boolean;
+    };
+};
+export declare const HasHeaderDivider: {
+    args: {
+        isOpen: boolean;
+        hasBackground: boolean;
+        hasHeaderDivider: boolean;
+    };
+};
+export declare const Nested: {
+    args: {};
+    render: ({ children, isOpen, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const HideChildren: {
+    args: {
+        hasBackground: boolean;
+        closeMode: string;
+    };
+};

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

@@ -0,0 +1 @@
+export { default as ExpansionPanel, type ExpansionPanelProps } from './ExpansionPanel';

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

@@ -0,0 +1,19 @@
+import { ImageBlockProps as UIProps, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ImageBlockCaptionPosition, ImageBlockPropsToOverride } from '@lumx/core/js/components/ImageBlock';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+import { ThumbnailProps } from '../thumbnail';
+export type ImageBlockProps = Omit<VueToJSXProps<UIProps, ImageBlockPropsToOverride>, never> & {
+    /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
+    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight' | 'alt'>;
+};
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ImageBlockCaptionPosition };
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const ImageBlock: import('vue').DefineSetupFnComponent<ImageBlockProps, {}, {}, Omit<VueToJSXProps<UIProps, ImageBlockPropsToOverride>, never> & {
+    /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
+    thumbnailProps?: Omit<ThumbnailProps, "image" | "size" | "theme" | "align" | "fillHeight" | "alt">;
+} & {}, import('vue').PublicProps>;
+export default ImageBlock;

package/components/image-block/ImageBlock.stories.d.ts

@@ -0,0 +1,178 @@
+declare const _default: {
+    component: any;
+    argTypes: {
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("xl" | "xxl")[];
+            mapping: Record<string, "xl" | "xxl"> | undefined;
+        };
+        image: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: string[];
+            mapping: Record<string, string> | undefined;
+        };
+        captionPosition: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("over" | "below")[];
+            mapping: Record<string, "over" | "below"> | undefined;
+        };
+        'thumbnailProps.aspectRatio': {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free")[];
+            mapping: Record<string, "vertical" | "horizontal" | "original" | "panoramic" | "wide" | "square" | "free"> | undefined;
+        };
+        align: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("center" | "right" | "left")[];
+            mapping: Record<string, "center" | "right" | "left"> | undefined;
+        };
+        tags: {
+            control: boolean;
+        };
+        actions: {
+            control: boolean;
+        };
+    };
+    args: {
+        image: string;
+        actions?: import('react').ReactNode;
+        align?: import('../..').HorizontalAlignment | undefined;
+        alt?: string | undefined;
+        captionPosition?: import('../..').ImageBlockCaptionPosition | undefined;
+        fillHeight?: boolean | undefined;
+        size?: import('@lumx/core/js/components/ImageBlock').ImageBlockSize | undefined;
+        thumbnailProps?: import('../..').GenericProps | undefined;
+        ref?: import('../..').CommonRef;
+        Thumbnail?: any;
+        ImageCaption?: any;
+        className?: string | undefined;
+        theme?: import('../..').Theme | undefined;
+        title?: string | undefined;
+        description?: import('react').ReactNode | {
+            __html: string;
+        };
+        titleProps?: import('../..').GenericProps | undefined;
+        descriptionProps?: import('../..').GenericProps | undefined;
+        tags?: import('react').ReactNode;
+        captionStyle?: import('../..').GenericProps | undefined;
+    };
+    decorators: ((story: any, context: any) => any)[];
+    title: string;
+};
+export default _default;
+export declare const WithCaptionBelow: {
+    args: {
+        captionPosition: "below";
+        size: "xxl";
+        title: string;
+        description: string;
+    };
+};
+export declare const WithCaptionOver: {
+    args: {
+        captionPosition: "over";
+        size: "xxl";
+        title: string;
+        description: string;
+    };
+};
+export declare const WithAlign: {
+    args: {
+        image: string;
+        size: undefined;
+        align: "center";
+        captionPosition: "below";
+        title: string;
+        description: string;
+    };
+};
+export declare const WithTags: {
+    render: ({ tags, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        size: "xxl";
+    };
+};
+export declare const WithActions: {
+    render: ({ actions, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        size: "xxl";
+    };
+};
+export declare const WithFocusPointHorizontal: {
+    args: {
+        size: "xxl";
+        'thumbnailProps.aspectRatio': "vertical";
+        'thumbnailProps.focusPoint.x': number;
+        'thumbnailProps.focusPoint.y': number;
+    };
+    argTypes: {
+        'thumbnailProps.focusPoint.x': {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        'thumbnailProps.focusPoint.y': {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export declare const WithFocusPointVertical: {
+    args: {
+        size: "xxl";
+        image: string;
+        'thumbnailProps.aspectRatio': "horizontal";
+        'thumbnailProps.focusPoint.x': number;
+        'thumbnailProps.focusPoint.y': number;
+    };
+    argTypes: {
+        'thumbnailProps.focusPoint.x': {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        'thumbnailProps.focusPoint.y': {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export declare const FullFeatured: {
+    render: ({ tags, actions, ...args }: any) => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        image: string;
+        size: undefined;
+        align: "center";
+        captionPosition: "below";
+        title: string;
+        description: string;
+        'thumbnailProps.aspectRatio': "horizontal";
+        'thumbnailProps.focusPoint.x': number;
+        'thumbnailProps.focusPoint.y': number;
+    };
+    decorators: ((story: any, context: any) => any)[];
+};

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

@@ -0,0 +1,18 @@
+import { HorizontalAlignment, Theme } from '@lumx/core/js/constants';
+type ImageCaptionProps = {
+    as?: 'div' | 'figcaption';
+    align?: HorizontalAlignment;
+    baseClassName?: string;
+    captionStyle?: Record<string, any>;
+    class?: string;
+    description?: any;
+    descriptionProps?: Record<string, any>;
+    tags?: any;
+    theme?: Theme;
+    title?: string;
+    titleProps?: Record<string, any>;
+    truncate?: boolean;
+};
+/** Internal component used to render image captions */
+declare const ImageCaption: import('vue').DefineSetupFnComponent<ImageCaptionProps, {}, {}, ImageCaptionProps & {}, import('vue').PublicProps>;
+export default ImageCaption;

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

@@ -0,0 +1 @@
+export { default as ImageBlock, type ImageBlockProps, ImageBlockCaptionPosition } from './ImageBlock';