mtrl 0.3.8 → 0.4.0

package/dist/components/tabs/constants.d.ts

@@ -0,0 +1,142 @@
+/**
+ * Tab component variants
+ * @category Components
+ */
+export declare const TAB_VARIANTS: {
+    /** Primary tabs */
+    readonly PRIMARY: "primary";
+    /** Secondary tabs */
+    readonly SECONDARY: "secondary";
+};
+/**
+ * Tab states
+ * @category Components
+ */
+export declare const TAB_STATES: {
+    /** Tab is currently active */
+    readonly ACTIVE: "active";
+    /** Tab is not currently active */
+    readonly INACTIVE: "inactive";
+    /** Tab is disabled */
+    readonly DISABLED: "disabled";
+};
+/**
+ * Tab indicator width strategies
+ * @category Components
+ */
+export declare const TAB_INDICATOR_WIDTH_STRATEGIES: {
+    /** Fixed width defined by fixedWidth */
+    readonly FIXED: "fixed";
+    /** Half the tab width */
+    readonly DYNAMIC: "dynamic";
+    /** Match the text content width */
+    readonly CONTENT: "content";
+    /** Adapts based on variant (primary: text width, secondary: full tab width) */
+    readonly AUTO: "auto";
+};
+/**
+ * Tab events
+ * @category Components
+ */
+export declare const TAB_EVENTS: {
+    /** Fired when a tab is clicked */
+    readonly CLICK: "click";
+    /** Fired when a tab receives focus */
+    readonly FOCUS: "focus";
+    /** Fired when a tab loses focus */
+    readonly BLUR: "blur";
+};
+/**
+ * Tabs component events
+ * @category Components
+ */
+export declare const TABS_EVENTS: {
+    /** Fired when the active tab changes */
+    readonly CHANGE: "change";
+};
+/**
+ * Default values for tabs component
+ * @category Components
+ */
+export declare const TABS_DEFAULTS: {
+    /** Default tab variant */
+    readonly VARIANT: "primary";
+    /** Whether tabs are horizontally scrollable */
+    readonly SCROLLABLE: true;
+    /** Whether to show a divider below the tabs */
+    readonly SHOW_DIVIDER: true;
+    /** Default indicator height in pixels */
+    readonly INDICATOR_HEIGHT: 3;
+    /** Default indicator width strategy */
+    readonly INDICATOR_WIDTH_STRATEGY: "auto";
+    /** Default fixed width for fixed indicator in pixels */
+    readonly INDICATOR_FIXED_WIDTH: 40;
+    /** Default indicator animation duration in milliseconds */
+    readonly INDICATOR_ANIMATION_DURATION: 250;
+    /** Default indicator animation timing function */
+    readonly INDICATOR_ANIMATION_TIMING: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Default icon size */
+    readonly ICON_SIZE: "24px";
+    /** Whether to enable ripple effect on tabs */
+    readonly RIPPLE: true;
+};
+/**
+ * Tab layout types
+ * @category Components
+ */
+export declare const TAB_LAYOUT: {
+    /** Icon-only tab layout */
+    readonly ICON_ONLY: "icon-only";
+    /** Text-only tab layout */
+    readonly TEXT_ONLY: "text-only";
+    /** Icon and text layout */
+    readonly ICON_AND_TEXT: "icon-and-text";
+};
+/**
+ * CSS class names used by the tabs component
+ * @category Components
+ */
+export declare const TABS_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "tabs";
+    /** Root element with primary variant */
+    readonly PRIMARY: "tabs--primary";
+    /** Root element with secondary variant */
+    readonly SECONDARY: "tabs--secondary";
+    /** Root element with scrollable tabs */
+    readonly SCROLLABLE: "tabs--scrollable";
+    /** Scroll container element */
+    readonly SCROLL: "tabs-scroll";
+    /** Divider element */
+    readonly DIVIDER: "tabs-divider";
+    /** Indicator element */
+    readonly INDICATOR: "tabs-indicator";
+};
+/**
+ * CSS class names used by the tab component
+ * @category Components
+ */
+export declare const TAB_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "tab";
+    /** Active state class */
+    readonly ACTIVE: "tab--active";
+    /** Inactive state class */
+    readonly INACTIVE: "tab--inactive";
+    /** Disabled state class */
+    readonly DISABLED: "tab--disabled";
+    /** Text content container */
+    readonly TEXT: "tab-text";
+    /** Icon container */
+    readonly ICON: "tab-icon";
+    /** Ripple effect container */
+    readonly RIPPLE: "tab-ripple";
+    /** Root element with primary variant */
+    readonly PRIMARY: "tab--primary";
+    /** Root element with secondary variant */
+    readonly SECONDARY: "tab--secondary";
+    /** Container for text and icon */
+    readonly CONTAINER: "tab-container";
+    /** Badge container */
+    readonly BADGE: "tab-badge";
+};

package/dist/components/tabs/features.d.ts

@@ -0,0 +1,133 @@
+import { TabConfig, TabComponent } from './types';
+import { TabIndicator } from './indicator';
+interface ComponentBase {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    scrollContainer?: HTMLElement;
+    emit?: (event: string, data: any) => any;
+    destroy?: () => void;
+    tabs?: TabComponent[];
+    handleTabClick?: (event: any, tab: TabComponent) => void;
+    variant?: string;
+}
+/**
+ * Configuration for tabs management feature
+ */
+export interface TabsManagementConfig {
+    /** Initial tabs to create */
+    tabs?: TabConfig[];
+    /** Tab variant */
+    variant?: string;
+    /** Component prefix */
+    prefix?: string;
+    /** Other configuration properties */
+    [key: string]: any;
+}
+/**
+ * Component with tabs management capabilities
+ */
+export interface TabsManagementComponent {
+    /** Array of tab components */
+    tabs: TabComponent[];
+    /** Target container for tabs */
+    tabsContainer: HTMLElement;
+    /** Tab click handler */
+    handleTabClick: (event: Event, tab: TabComponent) => void;
+    /** Get all tabs */
+    getTabs?: () => TabComponent[];
+    /** Get the active tab */
+    getActiveTab?: () => TabComponent | null;
+}
+/**
+ * Adds tabs management capabilities to a component
+ * @param {TabsManagementConfig} config - Tabs configuration
+ * @returns {Function} Component enhancer with tabs management
+ */
+export declare const withTabsManagement: <T extends TabsManagementConfig>(config: T) => <C extends ComponentBase>(component: C) => C & TabsManagementComponent;
+/**
+ * Configuration for scrollable feature
+ */
+export interface ScrollableConfig {
+    /** Whether tabs are scrollable horizontally */
+    scrollable?: boolean;
+    /** Other configuration properties */
+    [key: string]: any;
+}
+/**
+ * Component with scrollable capabilities
+ */
+export interface ScrollableComponent {
+    /** Scroll container element */
+    scrollContainer?: HTMLElement;
+}
+/**
+ * Adds scrollable capabilities to a component
+ * @param {ScrollableConfig} config - Scrollable configuration
+ * @returns {Function} Component enhancer with scrollable container
+ */
+export declare const withScrollable: <T extends ScrollableConfig>(config: T) => <C extends ComponentBase>(component: C) => C & ScrollableComponent;
+/**
+ * Configuration for divider feature
+ */
+export interface DividerConfig {
+    /** Whether to show a divider below the tabs */
+    showDivider?: boolean;
+    /** Other configuration properties */
+    [key: string]: any;
+}
+/**
+ * Adds a divider to a component
+ * @param {DividerConfig} config - Divider configuration
+ * @returns {Function} Component enhancer with divider
+ */
+export declare const withDivider: <T extends DividerConfig>(config: T) => <C extends ComponentBase>(component: C) => C;
+/**
+ * Configuration for indicator feature
+ */
+export interface IndicatorFeatureConfig {
+    /** Component prefix */
+    prefix?: string;
+    /** Width strategy for the indicator */
+    widthStrategy?: 'fixed' | 'dynamic' | 'content';
+    /** Height of the indicator in pixels */
+    height?: number;
+    /** Fixed width in pixels (when using fixed strategy) */
+    fixedWidth?: number;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Animation timing function */
+    animationTiming?: string;
+    /** Custom color for the indicator */
+    color?: string;
+    /** Legacy height property */
+    indicatorHeight?: number;
+    /** Legacy width strategy property */
+    indicatorWidthStrategy?: 'fixed' | 'dynamic' | 'content';
+    /** Indicator configuration object */
+    indicator?: {
+        widthStrategy?: 'fixed' | 'dynamic' | 'content';
+        height?: number;
+        fixedWidth?: number;
+        animationDuration?: number;
+        animationTiming?: string;
+        color?: string;
+    };
+}
+/**
+ * Component with indicator capability
+ */
+export interface IndicatorComponent {
+    /** The indicator instance */
+    indicator: TabIndicator;
+    /** Get the indicator instance */
+    getIndicator: () => TabIndicator;
+}
+/**
+ * Enhances a component with tab indicator functionality
+ * @param config - Indicator configuration
+ * @returns Component enhancer with indicator functionality
+ */
+export declare const withIndicator: <T extends IndicatorFeatureConfig>(config: T) => <C extends ComponentBase & {
+    tabs: TabComponent[];
+}>(component: C) => C & IndicatorComponent;
+export {};

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,11 @@
+import createTabs from './tabs';
+import { addScrollIndicators } from './scroll-indicators';
+import { setupResponsiveBehavior } from './responsive';
+import { createTabsState } from './state';
+import { createTabIndicator } from './indicator';
+import { updateTabPanels, setupKeyboardNavigation } from './utils';
+export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES } from './constants';
+export { TabsConfig, TabsComponent, TabComponent, TabConfig, TabChangeEventData, IndicatorConfig } from './types';
+export { addScrollIndicators, setupResponsiveBehavior, createTabsState, createTabIndicator, updateTabPanels, setupKeyboardNavigation };
+export { withTabsManagement, withScrollable, withDivider, withIndicator, TabsManagementConfig, TabsManagementComponent, ScrollableConfig, ScrollableComponent, DividerConfig, IndicatorFeatureConfig, IndicatorComponent } from './features';
+export default createTabs;

package/dist/components/tabs/indicator.d.ts

@@ -0,0 +1,49 @@
+import { TabComponent } from './types';
+/**
+ * Configuration for tab indicator
+ */
+export interface TabIndicatorConfig {
+    /** Height of the indicator in pixels */
+    height?: number;
+    /** Width strategy - fixed size or dynamic based on tab width */
+    widthStrategy?: 'fixed' | 'dynamic' | 'content' | 'auto';
+    /** Fixed width in pixels when using fixed strategy */
+    fixedWidth?: number;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Animation timing function */
+    animationTiming?: string;
+    /** Whether to show the indicator */
+    visible?: boolean;
+    /** CSS class prefix */
+    prefix?: string;
+    /** Custom color for the indicator */
+    color?: string;
+    /** Tabs variant (primary or secondary) */
+    variant?: string;
+}
+/**
+ * Tab indicator API
+ */
+export interface TabIndicator {
+    /** The indicator DOM element */
+    element: HTMLElement;
+    /** Move the indicator to a specific tab */
+    moveToTab: (tab: TabComponent, immediate?: boolean) => void;
+    /** Show the indicator */
+    show: () => void;
+    /** Hide the indicator */
+    hide: () => void;
+    /** Set indicator color */
+    setColor: (color: string) => void;
+    /** Update indicator position (e.g. after resize) */
+    update: () => void;
+    /** Destroy the indicator and clean up */
+    destroy: () => void;
+}
+/**
+ * Creates a tab indicator component
+ * @param config - Indicator configuration
+ * @returns Tab indicator instance
+ */
+export declare const createTabIndicator: (config?: TabIndicatorConfig) => TabIndicator;

package/dist/components/tabs/responsive.d.ts

@@ -0,0 +1,38 @@
+import { TabsComponent } from './types';
+/**
+ * Breakpoints for responsive behavior
+ */
+export declare const RESPONSIVE_BREAKPOINTS: {
+    /** Small screens (mobile) */
+    SMALL: number;
+    /** Medium screens (tablet) */
+    MEDIUM: number;
+    /** Large screens (desktop) */
+    LARGE: number;
+};
+/**
+ * Configuration for responsive behavior
+ */
+export interface ResponsiveConfig {
+    /** Whether to enable responsive behavior */
+    responsive?: boolean;
+    /** Options for small screens */
+    smallScreen?: {
+        /** Layout to use on small screens */
+        layout?: 'icon-only' | 'text-only' | 'icon-and-text';
+        /** Maximum tabs to show before scrolling */
+        maxVisibleTabs?: number;
+    };
+    /** Custom breakpoint values */
+    breakpoints?: {
+        small?: number;
+        medium?: number;
+        large?: number;
+    };
+}
+/**
+ * Enhances tabs with responsive behavior
+ * @param tabs - The tabs component to enhance
+ * @param config - Responsive configuration
+ */
+export declare const setupResponsiveBehavior: (tabs: TabsComponent, config?: ResponsiveConfig) => void;

package/dist/components/tabs/scroll-indicators.d.ts

@@ -0,0 +1,18 @@
+import { TabsComponent } from './types';
+/**
+ * Configuration for scroll indicators
+ */
+export interface ScrollIndicatorConfig {
+    /** Whether to show scroll indicators */
+    enabled?: boolean;
+    /** Whether to add scroll buttons */
+    showButtons?: boolean;
+    /** Scroll indicator appearance */
+    appearance?: 'fade' | 'shadow';
+}
+/**
+ * Adds scroll indicators to a tabs component
+ * @param tabs - Tabs component to enhance
+ * @param config - Scroll indicator configuration
+ */
+export declare const addScrollIndicators: (tabs: TabsComponent, config?: ScrollIndicatorConfig) => void;

package/dist/components/tabs/state.d.ts

@@ -0,0 +1,53 @@
+import { TabComponent } from './types';
+import { TabIndicator } from './indicator';
+/**
+ * State manager for MD3 tab states
+ * Handles proper state transitions between tabs
+ */
+export interface TabsStateManager {
+    /**
+     * Activates a tab and handles state transitions
+     * @param tab - The tab to activate
+     * @param immediate - Whether to skip animation
+     */
+    activateTab: (tab: TabComponent, immediate?: boolean) => void;
+    /**
+     * Gets the currently active tab
+     */
+    getActiveTab: () => TabComponent | null;
+    /**
+     * Cleans up event listeners
+     */
+    destroy: () => void;
+}
+/**
+ * Options for creating a tabs state manager
+ */
+export interface TabsStateOptions {
+    /**
+     * Initial tabs to manage
+     */
+    tabs: TabComponent[];
+    /**
+     * Optional callback when active tab changes
+     */
+    onChange?: (data: {
+        tab: TabComponent;
+        value: string;
+    }) => void;
+    /**
+     * Optional indicator component
+     */
+    indicator?: TabIndicator;
+}
+/**
+ * Creates a state manager for MD3 tabs
+ * @param options - State manager options
+ * @returns A tabs state manager instance
+ */
+export declare const createTabsState: (options: TabsStateOptions) => TabsStateManager;
+/**
+ * Adds animation styles for ripple effects
+ * This is separate from indicator animations
+ */
+export declare const addTabStateStyles: () => void;

package/dist/components/tabs/tab-api.d.ts

@@ -0,0 +1,43 @@
+import { TabComponent } from './types';
+import type { BadgeComponent } from '../badge';
+/**
+ * API options for a Tab component
+ */
+interface ApiOptions {
+    /** The button component's disabled API */
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled?: () => boolean;
+    };
+    /** The component's lifecycle API */
+    lifecycle: {
+        destroy: () => void;
+    };
+    /** The button component (optional) */
+    button?: any;
+}
+/**
+ * Component with required elements and methods
+ */
+interface ComponentWithElements {
+    /** The DOM element */
+    element: HTMLElement;
+    /** The button component (optional) */
+    button?: any;
+    /** The badge component (optional) */
+    badge?: BadgeComponent;
+    /** Class name helper */
+    getClass: (name: string) => string;
+    /** Component configuration */
+    config: Record<string, any>;
+    /** Event emitter (optional) */
+    emit?: (event: string, data: any) => any;
+}
+/**
+ * Enhances a tab component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export declare const withTabAPI: ({ disabled, lifecycle, button }: ApiOptions) => (component: ComponentWithElements) => TabComponent;
+export {};

package/dist/components/tabs/tab.d.ts

@@ -0,0 +1,7 @@
+import { TabConfig, TabComponent } from './types';
+/**
+ * Creates a new Tab component following MD3 guidelines
+ * @param {TabConfig} config - Tab configuration object
+ * @returns {TabComponent} Tab component instance
+ */
+export declare const createTab: (config?: TabConfig) => TabComponent;

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,27 @@
+import { TabsConfig, TabsComponent } from './types';
+/**
+ * Creates a new Tabs component following MD3 guidelines
+ * @param {TabsConfig} config - Tabs configuration object
+ * @returns {TabsComponent} Tabs component instance
+ * @example
+ * ```typescript
+ * // Create basic tabs with three items
+ * const tabs = createTabs({
+ *   tabs: [
+ *     { text: 'Home', value: 'home', state: 'active' },
+ *     { text: 'Products', value: 'products' },
+ *     { text: 'About', value: 'about' }
+ *   ]
+ * });
+ *
+ * // Add tabs to DOM
+ * document.body.appendChild(tabs.element);
+ *
+ * // Listen for tab changes
+ * tabs.on('change', (e) => {
+ *   console.log(`Active tab: ${e.value}`);
+ * });
+ * ```
+ */
+declare const createTabs: (config?: TabsConfig) => TabsComponent;
+export default createTabs;