@lumx/vue 4.9.0-alpha.2 → 4.9.0-alpha.3

package/components/tabs/TabProvider.d.ts

@@ -0,0 +1,26 @@
+export interface TabProviderProps {
+    /** Active tab index (controlled mode). */
+    activeTabIndex?: number;
+    /** Tab panel children should not render if the tab panel is hidden. */
+    isLazy?: boolean;
+    /** Activate tabs on focus. */
+    shouldActivateOnFocus?: boolean;
+}
+export declare const emitSchema: {
+    change: (index: number) => boolean;
+};
+/**
+ * This component provides a context in which tabs can be defined and linked to their tab panel.
+ *
+ * It does not produce any markup so you can wrap it around any Vue elements and then split
+ * the TabList and TabPanel components in the component tree.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const TabProvider: import('vue').DefineSetupFnComponent<TabProviderProps, {
+    change: (index: number) => boolean;
+}, {}, TabProviderProps & {
+    onChange?: ((index: number) => any) | undefined;
+}, import('vue').PublicProps>;
+export default TabProvider;

package/components/tabs/TabProvider.stories.d.ts

@@ -0,0 +1,53 @@
+import { TabListLayout } from '../..';
+declare const _default: {
+    title: string;
+    parameters: {
+        controls: {
+            sort: string;
+        };
+    };
+};
+export default _default;
+/** Default tab behavior */
+export declare const Default: {
+    render: ({ layout, position }: any) => import("vue/jsx-runtime").JSX.Element;
+    argTypes: {
+        layout: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: TabListLayout[];
+            mapping: Record<string, TabListLayout> | undefined;
+        };
+        position: {
+            control: {
+                type: "select" | "inline-radio";
+            };
+            options: ("center" | "right" | "left")[];
+            mapping: Record<string, "center" | "right" | "left"> | undefined;
+        };
+    };
+};
+/** Control active tab externally. */
+export declare const Controlled: {
+    render(): () => import("vue/jsx-runtime").JSX.Element;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+    tags: string[];
+};
+/** Dynamically generate tabs. */
+export declare const DynamicTabs: {
+    render({ tabCount }: any): () => import("vue/jsx-runtime").JSX.Element;
+    args: {
+        tabCount: number;
+    };
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+    tags: string[];
+};

package/components/tabs/TabProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Tab, type TabProps } from './Tab';
+export { default as TabList, type TabListProps, TabListLayout } from './TabList';
+export { default as TabPanel, type TabPanelProps } from './TabPanel';
+export { default as TabProvider, type TabProviderProps } from './TabProvider';

package/components/tabs/state.d.ts

@@ -0,0 +1,19 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+import { Action, State, TabState, TabType } from '@lumx/core/js/components/Tabs/state';
+export { type TabType, type State, INIT_STATE, type Action, reducer, type TabState, } from '@lumx/core/js/components/Tabs/state';
+export type TabProviderContextValue = {
+    state: Ref<State>;
+    dispatch: (action: Action) => void;
+};
+/** Injection key used by TabProvider (provide) and Tab/TabPanel (inject). */
+export declare const TAB_PROVIDER_INJECT_KEY: InjectionKey<TabProviderContextValue>;
+/**
+ * Composable equivalent of React's useTabProviderContext.
+ * Registers the tab/tabPanel with the provider on mount and unregisters on unmount.
+ * Returns a computed ref with the derived tab state, or undefined if no provider is present.
+ */
+export declare const useTabProviderContext: (type: TabType, originalId?: string) => ComputedRef<TabState | undefined>;
+/**
+ * Returns the raw tab provider state ref, or undefined if no provider is present.
+ */
+export declare const useTabProviderContextState: () => Ref<State> | undefined;

package/components/text-field/TextField.d.ts

@@ -18,6 +18,10 @@ export type TextFieldProps = VueToJSXProps<UIProps, TextFieldPropsToOverride | '
     minimumRows?: number;
     /** Additional label props. */
     labelProps?: InputLabelProps;
+    /** Ref callback for the native input element. */
+    inputRef?: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
+    /** Ref callback for the text field wrapper element. */
+    textFieldRef?: (el: HTMLElement | null) => void;
 };
 export declare const emitSchema: {
     change: (value: string, _name?: string, _event?: Event) => boolean;
@@ -55,6 +59,10 @@ declare const TextField: import('vue').DefineSetupFnComponent<TextFieldProps, {
     minimumRows?: number;
     /** Additional label props. */
     labelProps?: InputLabelProps;
+    /** Ref callback for the native input element. */
+    inputRef?: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
+    /** Ref callback for the text field wrapper element. */
+    textFieldRef?: (el: HTMLElement | null) => void;
 } & {
     onBlur?: ((_event?: FocusEvent | undefined) => any) | undefined;
     onChange?: ((value: string, _name?: string | undefined, _event?: Event | undefined) => any) | undefined;

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/composables/useWatchDisposable.d.ts

@@ -0,0 +1,19 @@
+import { WatchOptions, WatchSource } from 'vue';
+type Cleanup = void | (() => void);
+type MapSources<T> = {
+    [K in keyof T]: T[K] extends WatchSource<infer V> ? V : never;
+};
+type MultiWatchSources = (WatchSource<unknown> | object)[];
+/**
+ * Watch a reactive source and run an effect that can return a cleanup function.
+ * On each re-run the previous cleanup is called automatically.
+ * Stops and cleans up on unmount.
+ *
+ * @param source  One or more reactive sources to watch.
+ * @param effect  Effect callback receiving the new (and old) value; may return a cleanup function.
+ * @param options Watch options (defaults to `{ immediate: true }`).
+ * @returns A stop function that also runs the latest cleanup.
+ */
+export declare function useWatchDisposable<T extends MultiWatchSources>(source: [...T], effect: (value: MapSources<T>, oldValue: MapSources<T> | undefined) => Cleanup, options?: WatchOptions): () => void;
+export declare function useWatchDisposable<T>(source: WatchSource<T>, effect: (value: T, oldValue: T | undefined) => Cleanup, options?: WatchOptions): () => void;
+export {};

package/index.d.ts

@@ -1,12 +1,14 @@
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 export * from './components/avatar';
+export * from './components/combobox';
 export * from './components/badge';
 export * from './components/button';
 export * from './components/checkbox';
 export * from './components/chip';
 export * from './components/divider';
 export * from './components/drag-handle';
+export * from './components/expansion-panel';
 export * from './components/flag';
 export * from './components/flex-box';
 export * from './components/grid-column';
@@ -17,6 +19,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,6 +31,7 @@ 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';