mtrl 0.3.7 → 0.3.9

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;

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

@@ -0,0 +1,390 @@
+import type { BadgeComponent } from '../badge';
+import { TabIndicator } from './indicator';
+/**
+ * Available tabs variants
+ */
+export type TabsVariant = 'primary' | 'secondary';
+/**
+ * Available tabs states
+ */
+export type TabStates = 'active' | 'inactive' | 'disabled';
+/**
+ * Configuration for the tab indicator
+ * @category Components
+ */
+export interface IndicatorConfig {
+    /** Height of the indicator in pixels */
+    height?: number;
+    /**
+     * Width strategy for the indicator
+     * - 'fixed': Uses a fixed width defined by fixedWidth
+     * - 'dynamic': Uses half the tab width
+     * - 'content': Uses the text content width
+     * - 'auto': Adapts based on variant (primary: text width, secondary: full 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;
+    /** Custom color for the indicator */
+    color?: string;
+    /** Tab variant (primary or secondary) */
+    variant?: string;
+}
+/**
+ * Tab change event data interface
+ * @category Events
+ */
+export interface TabChangeEventData {
+    /**
+     * The tab component that was activated
+     */
+    tab: TabComponent;
+    /**
+     * The value of the activated tab
+     */
+    value: string;
+}
+/**
+ * Configuration interface for a single Tab
+ * @category Components
+ */
+export interface TabConfig {
+    /**
+     * Tab state that determines if it's the active destination
+     * @default 'inactive'
+     */
+    state?: TabStates | string;
+    /**
+     * Whether the tab is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Initial tab text content (label)
+     * @example 'Home'
+     */
+    text?: string;
+    /**
+     * Initial tab icon HTML content
+     * @example '<svg>...</svg>'
+     */
+    icon?: string;
+    /**
+     * Badge text or value to display (if applicable)
+     * @example '5'
+     */
+    badge?: string | number;
+    /**
+     * Badge configuration object
+     * Pass additional options for the badge component
+     */
+    badgeConfig?: {
+        variant?: string;
+        color?: string;
+        size?: string;
+        position?: string;
+        max?: number;
+    };
+    /**
+     * Icon size in pixels or other CSS units
+     * @default '24px'
+     */
+    iconSize?: string;
+    /**
+     * Additional CSS classes to add to the tab
+     * @example 'home-tab main-navigation'
+     */
+    class?: string;
+    /**
+     * Tab value attribute for identifying the selected tab
+     */
+    value?: string;
+    /**
+     * Whether to enable ripple effect
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Ripple effect configuration
+     */
+    rippleConfig?: {
+        /** Duration of the ripple animation in milliseconds */
+        duration?: number;
+        /** Timing function for the ripple animation */
+        timing?: string;
+        /** Opacity values for ripple start and end [start, end] */
+        opacity?: [string, string];
+    };
+    /**
+     * Variant of the tab
+     */
+    variant?: string;
+}
+/**
+ * Configuration interface for the Tabs component
+ * @category Components
+ */
+export interface TabsConfig {
+    /**
+     * Tabs variant (primary or secondary)
+     * @default 'primary'
+     */
+    variant?: TabsVariant | string;
+    /**
+     * Initial tabs to create
+     */
+    tabs?: TabConfig[];
+    /**
+     * Whether to show the divider
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * Whether to enable horizontal scrolling
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Additional CSS classes for the container
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Event handlers configuration
+     */
+    on?: {
+        /**
+         * Tab change event handler
+         */
+        change?: (event: TabChangeEventData) => void;
+        /**
+         * Event handlers for other events
+         */
+        [key: string]: Function | undefined;
+    };
+    /**
+     * Tab indicator configuration
+     */
+    indicator?: IndicatorConfig;
+    /**
+     * Tab indicator height in pixels
+     * @deprecated Use indicator.height instead
+     */
+    indicatorHeight?: number;
+    /**
+     * Tab indicator width strategy
+     * @deprecated Use indicator.widthStrategy instead
+     */
+    indicatorWidthStrategy?: 'fixed' | 'dynamic' | 'content';
+}
+/**
+ * Icon API interface for managing tab icons
+ * @category Components
+ */
+export interface IconAPI {
+    /**
+     * Sets the icon HTML content
+     * @param html - HTML string for the icon
+     * @returns The icon API for chaining
+     */
+    setIcon: (html: string) => IconAPI;
+    /**
+     * Gets the current icon HTML content
+     * @returns HTML string for the icon
+     */
+    getIcon: () => string;
+    /**
+     * Gets the icon DOM element
+     * @returns The icon element or null if not present
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Text API interface for managing tab text
+ * @category Components
+ */
+export interface TextAPI {
+    /**
+     * Sets the text content
+     * @param content - Text content
+     * @returns The text API for chaining
+     */
+    setText: (content: string) => TextAPI;
+    /**
+     * Gets the current text content
+     * @returns Tab text content
+     */
+    getText: () => string;
+    /**
+     * Gets the text DOM element
+     * @returns The text element or null if not present
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Tab component interface
+ * @category Components
+ */
+export interface TabComponent {
+    /** The tab's DOM element */
+    element: HTMLElement;
+    /** The tab's badge component (if any) */
+    badge?: BadgeComponent;
+    /** Gets a class name with the component's prefix */
+    getClass: (name: string) => string;
+    /** Gets the tab's value attribute */
+    getValue: () => string;
+    /** Sets the tab's value attribute */
+    setValue: (value: string) => TabComponent;
+    /** Activates the tab (sets active state) */
+    activate: () => TabComponent;
+    /** Deactivates the tab (sets inactive state) */
+    deactivate: () => TabComponent;
+    /** Checks if the tab is active */
+    isActive: () => boolean;
+    /** Enables the tab (removes disabled attribute) */
+    enable: () => TabComponent;
+    /** Disables the tab (adds disabled attribute) */
+    disable: () => TabComponent;
+    /** Sets the tab's text content */
+    setText: (content: string) => TabComponent;
+    /** Gets the tab's text content */
+    getText: () => string;
+    /** Sets the tab's icon */
+    setIcon: (icon: string) => TabComponent;
+    /** Gets the tab's icon HTML content */
+    getIcon: () => string;
+    /** Sets the tab's badge */
+    setBadge: (content: string | number) => TabComponent;
+    /** Gets the tab's badge content */
+    getBadge: () => string;
+    /** Shows the tab's badge */
+    showBadge: () => TabComponent;
+    /** Hides the tab's badge */
+    hideBadge: () => TabComponent;
+    /** Gets the badge component instance */
+    getBadgeComponent: () => BadgeComponent | undefined;
+    /** Updates the tab's layout style based on content */
+    updateLayoutStyle: () => void;
+    /** Adds an event listener to the tab */
+    on: (event: string, handler: Function) => TabComponent;
+    /** Removes an event listener from the tab */
+    off: (event: string, handler: Function) => TabComponent;
+    /** Destroys the tab component and cleans up resources */
+    destroy: () => void;
+    /** API for managing disabled state */
+    disabled?: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    /** API for managing component lifecycle */
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Tabs component interface
+ * @category Components
+ */
+export interface TabsComponent {
+    /**
+     * Container element
+     */
+    element: HTMLElement;
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Creates and adds a new tab to the tabs component
+     * @param config - Tab configuration
+     * @returns The created tab component
+     */
+    addTab: (config: TabConfig) => TabComponent;
+    /**
+     * Adds a pre-created tab to the tabs component
+     * @param tab - Tab component to add
+     * @returns Tabs component for chaining
+     */
+    add: (tab: TabComponent) => TabsComponent;
+    /**
+     * Gets all tabs in the container
+     * @returns Array of tab components
+     */
+    getTabs: () => TabComponent[];
+    /**
+     * Gets the active tab
+     * @returns Active tab or null if none
+     */
+    getActiveTab: () => TabComponent | null;
+    /**
+     * Gets the indicator component
+     * @returns Tab indicator component
+     */
+    getIndicator?: () => TabIndicator;
+    /**
+     * Sets a tab as active
+     * @param tabOrValue - Tab component or tab value
+     * @returns Tabs component for chaining
+     */
+    setActiveTab: (tabOrValue: TabComponent | string) => TabsComponent;
+    /**
+     * Removes a tab from the container
+     * @param tabOrValue - Tab component or tab value
+     * @returns Tabs component for chaining
+     */
+    removeTab: (tabOrValue: TabComponent | string) => TabsComponent;
+    /**
+     * Adds an event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Tabs component for chaining
+     */
+    on: (event: string, handler: Function) => TabsComponent;
+    /**
+     * Removes an event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Tabs component for chaining
+     */
+    off: (event: string, handler: Function) => TabsComponent;
+    /**
+     * Emit an event
+     * @param event - Event name
+     * @param data - Event data
+     * @returns Tabs component for chaining
+     */
+    emit?: (event: string, data: any) => TabsComponent;
+    /**
+     * Destroys the tabs component and all tabs
+     */
+    destroy: () => void;
+    /**
+     * Tab click event handler
+     */
+    handleTabClick: (event: any, tab: TabComponent) => void;
+    /**
+     * Scroll container for scrollable tabs
+     */
+    scrollContainer?: HTMLElement;
+}

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

@@ -0,0 +1,17 @@
+import { TabComponent } from './types';
+/**
+ * Gets the active tab from a component
+ * @param component - Component with tabs
+ * @returns Active tab or null
+ */
+export declare function getActiveTab(component: any): TabComponent | null;
+/**
+ * Updates tab panels based on active tab
+ * @param component - Component with tabs
+ */
+export declare function updateTabPanels(component: any): void;
+/**
+ * Sets up keyboard navigation for tabs
+ * @param component - Tabs component
+ */
+export declare function setupKeyboardNavigation(component: any): void;

package/dist/components/textfield/api.d.ts

@@ -0,0 +1,8 @@
+import { BaseComponent, TextfieldComponent, ApiOptions } from './types';
+import { PlacementComponent } from './features/placement';
+/**
+ * Enhances textfield component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export declare const withAPI: ({ disabled, lifecycle }: ApiOptions) => (component: BaseComponent & Partial<PlacementComponent>) => TextfieldComponent;

package/dist/components/textfield/config.d.ts

@@ -0,0 +1,34 @@
+import { TextfieldConfig, BaseComponent, ApiOptions } from './types';
+/**
+ * Default configuration for the Textfield component
+ */
+export declare const defaultConfig: TextfieldConfig;
+/**
+ * Creates the base configuration for Textfield component
+ * @param {TextfieldConfig} config - User provided configuration
+ * @returns {TextfieldConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: TextfieldConfig) => TextfieldConfig;
+/**
+ * Generates element configuration for the Textfield component
+ * @param {TextfieldConfig} config - Textfield configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: TextfieldConfig) => {
+    tag: string;
+    componentName: string;
+    attrs: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Creates API configuration for the Textfield component
+ * @param {BaseComponent} comp - Component with disabled and lifecycle features
+ * @returns {ApiOptions} API configuration object
+ */
+export declare const getApiConfig: (comp: BaseComponent) => ApiOptions;
+export default defaultConfig;