@lumx/vue 4.9.0-next.0 → 4.9.0-next.10

package/components/user-block/UserBlock.stories.d.ts

@@ -0,0 +1,151 @@
+declare const _default: {
+    decorators: ((story: any, context: any) => {
+        setup(): {
+            as: string | object;
+            overriddenProps: any;
+        };
+        template: string;
+    })[];
+    component: any;
+    render: any;
+    argTypes: {
+        size: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("s" | "xs" | "m" | "l")[];
+            mapping: Record<string, "s" | "xs" | "m" | "l"> | undefined;
+        };
+        orientation: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("vertical" | "horizontal")[];
+            mapping: Record<string, "vertical" | "horizontal"> | undefined;
+        };
+    };
+    args: Partial<import('@lumx/core/js/components/UserBlock').UserBlockProps>;
+    title: string;
+};
+export default _default;
+export declare const AvatarOnly: {
+    args: {
+        avatarProps: {
+            image: string;
+        };
+    };
+};
+export declare const AvatarAndName: {
+    args: {
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+};
+export declare const AvatarAndCustomName: {
+    args: {
+        avatarProps: {
+            image: string;
+        };
+    };
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const AvatarAndNameAndSecondaryFields: {
+    args: {
+        fields: string[];
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+};
+export declare const WithAfter: {
+    args: {
+        fields: string[];
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const WithAdditionalFields: {
+    args: {
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+    parameters: {
+        wrapperProps: {
+            style: {
+                width: string;
+            };
+        };
+    };
+};
+export declare const SizesAndOrientations: {
+    args: {
+        fields: string[];
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+    decorators: ((story: any, context: any) => any)[];
+};
+export declare const WithConstrainedSize: {
+    args: {
+        fields: string[];
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+    parameters: {
+        wrapperProps: {
+            style: {
+                width: string;
+                resize: string;
+            };
+        };
+    };
+};
+export declare const AsButton: {
+    argTypes: {
+        onClick: {
+            action: boolean;
+        };
+    };
+    args: {
+        fields: string[];
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+};
+export declare const AsLink: {
+    args: {
+        linkProps: {
+            href: string;
+        };
+        fields: string[];
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+};
+export declare const WithBadge: {
+    args: {
+        fields: string[];
+        name: string;
+        avatarProps: {
+            image: string;
+        };
+    };
+    render: (args: any) => import("vue/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1 @@
+export { default as UserBlock, type UserBlockProps, type UserBlockSize } from './UserBlock';

package/composables/useRovingTabIndexContainer.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+export interface UseRovingTabIndexContainerOptions {
+    /** Ref to the container element holding the focusable items. */
+    containerRef: Ref<HTMLElement | null | undefined>;
+    /** CSS selector to identify focusable items within the container. */
+    itemSelector: string;
+    /** Callback invoked when an item receives focus via keyboard navigation. */
+    onItemFocused?: (item: HTMLElement) => void;
+    /**
+     * Primary navigation axis — determines which arrow keys navigate.
+     * Default: 'horizontal' (ArrowLeft/ArrowRight).
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * CSS selector matching disabled items within the container.
+     * Disabled items are skipped during keyboard navigation.
+     */
+    itemDisabledSelector?: string;
+}
+/**
+ * Vue composable equivalent of React's useRovingTabIndexContainer.
+ * Sets up roving tab index keyboard navigation on a container element.
+ * Automatically tears down when the container is removed or the composable is unmounted.
+ */
+export declare function useRovingTabIndexContainer({ containerRef, itemSelector, onItemFocused, direction, itemDisabledSelector, }: UseRovingTabIndexContainerOptions): void;

package/index.d.ts

@@ -17,6 +17,7 @@ export * from './components/input-label';
 export * from './components/link';
 export * from './components/list';
 export * from './components/message';
+export * from './components/mosaic';
 export * from './components/popover';
 export * from './components/popover-dialog';
 export * from './components/progress';
@@ -28,7 +29,9 @@ export * from './components/uploader';
 export * from './components/generic-block';
 export * from './components/inline-list';
 export * from './components/table';
+export * from './components/tabs';
 export * from './components/text';
 export * from './components/thumbnail';
 export * from './components/toolbar';
 export * from './components/tooltip';
+export * from './components/user-block';