@lumx/vue 4.9.0-next.7 → 4.9.0-next.8

package/components/tabs/Tab.d.ts

@@ -0,0 +1,16 @@
+import { TabProps as UIProps, TabPropsToOverride, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Tabs/Tab';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TabProps = VueToJSXProps<UIProps, TabPropsToOverride>;
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * Tab component.
+ *
+ * Implements WAI-ARIA `tab` role.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const Tab: import('vue').DefineSetupFnComponent<TabProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | TabPropsToOverride> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default Tab;

package/components/tabs/TabList.d.ts

@@ -0,0 +1,21 @@
+import { TabListProps as UIProps, TabListLayout, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Tabs/TabList';
+import { TABS_CLASSNAME as CLASSNAME } from '@lumx/core/js/components/Tabs/constants';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+type InternalProps = VueToJSXProps<UIProps, 'aria-label'>;
+/** Public props type (includes aria-label for TypeScript consumers). */
+export type TabListProps = InternalProps & {
+    'aria-label': string;
+};
+export { TabListLayout, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * TabList component.
+ *
+ * Implements WAI-ARIA `tablist` role.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const TabList: import('vue').DefineSetupFnComponent<InternalProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | "aria-label"> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default TabList;

package/components/tabs/TabPanel.d.ts

@@ -0,0 +1,16 @@
+import { TabPanelProps as UIProps, TabPanelPropsToOverride, CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS } from '@lumx/core/js/components/Tabs/TabPanel';
+import { VueToJSXProps } from '../../utils/VueToJSX';
+export type TabPanelProps = VueToJSXProps<UIProps, TabPanelPropsToOverride>;
+export { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS };
+/**
+ * TabPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` role.
+ *
+ * @param  props Component props.
+ * @return Vue element.
+ */
+declare const TabPanel: import('vue').DefineSetupFnComponent<TabPanelProps, {}, {}, Omit<UIProps, "className" | import('@lumx/core/js/types').PropsToOverride | "children" | TabPanelPropsToOverride> & {
+    class?: string;
+} & {}, import('vue').PublicProps>;
+export default TabPanel;

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/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

@@ -28,6 +28,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';