mtrl 0.3.8 → 0.3.9

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

@@ -0,0 +1,88 @@
+/**
+ * Switch label position options
+ * @category Components
+ */
+export declare const SWITCH_LABEL_POSITIONS: {
+    /** Label positioned before the switch (left in LTR layouts) */
+    readonly START: "start";
+    /** Label positioned after the switch (right in LTR layouts) */
+    readonly END: "end";
+};
+/**
+ * Switch states
+ * @category Components
+ */
+export declare const SWITCH_STATES: {
+    /** Switch is checked/on */
+    readonly CHECKED: "checked";
+    /** Switch is unchecked/off */
+    readonly UNCHECKED: "unchecked";
+    /** Switch is disabled */
+    readonly DISABLED: "disabled";
+    /** Switch is enabled */
+    readonly ENABLED: "enabled";
+};
+/**
+ * Switch events
+ * @category Components
+ */
+export declare const SWITCH_EVENTS: {
+    /** Fired when switch is checked */
+    readonly CHANGE: "change";
+    /** Fired when switch receives focus */
+    readonly FOCUS: "focus";
+    /** Fired when switch loses focus */
+    readonly BLUR: "blur";
+};
+/**
+ * Default configuration values for switch
+ * @category Components
+ */
+export declare const SWITCH_DEFAULTS: {
+    /** Default checked state */
+    readonly CHECKED: false;
+    /** Default disabled state */
+    readonly DISABLED: false;
+    /** Default required state */
+    readonly REQUIRED: false;
+    /** Default label position */
+    readonly LABEL_POSITION: "end";
+    /** Default input value */
+    readonly VALUE: "on";
+};
+/**
+ * CSS class names used by the switch component
+ * @category Components
+ */
+export declare const SWITCH_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "switch";
+    /** Container element class */
+    readonly CONTAINER: "switch-container";
+    /** Content wrapper class */
+    readonly CONTENT: "switch-content";
+    /** Label element class */
+    readonly LABEL: "switch-label";
+    /** Input element class */
+    readonly INPUT: "switch-input";
+    /** Track element class */
+    readonly TRACK: "switch-track";
+    /** Thumb element class */
+    readonly THUMB: "switch-thumb";
+    /** Label at start position class */
+    readonly LABEL_START: "switch--label-start";
+    /** Label at end position class */
+    readonly LABEL_END: "switch--label-end";
+    /** Checked state class */
+    readonly CHECKED: "switch--checked";
+    /** Disabled state class */
+    readonly DISABLED: "switch--disabled";
+    /** Error state class */
+    readonly ERROR: "switch--error";
+    /** Helper/supporting text class */
+    readonly HELPER: "switch-helper";
+    /** Error helper text class */
+    readonly HELPER_ERROR: "switch-helper--error";
+    /** Focus state class */
+    readonly FOCUSED: "switch--focused";
+};

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

@@ -0,0 +1,59 @@
+import { BaseComponent, ElementComponent } from '../../core/compose/component';
+import { TrackComponent } from '../../core/compose/features';
+import { SwitchConfig } from './types';
+/**
+ * Configuration for supporting text feature
+ */
+export interface SupportingTextConfig {
+    /**
+     * Supporting text content
+     */
+    supportingText?: string;
+    /**
+     * Whether supporting text indicates an error
+     */
+    error?: boolean;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with supporting text capabilities
+ */
+export interface SupportingTextComponent extends BaseComponent {
+    /**
+     * Supporting text element
+     */
+    supportingTextElement: HTMLElement | null;
+    /**
+     * Sets supporting text content
+     * @param text - Text content
+     * @param isError - Whether text represents an error
+     * @returns Component instance for chaining
+     */
+    setSupportingText: (text: string, isError?: boolean) => SupportingTextComponent;
+    /**
+     * Removes supporting text
+     * @returns Component instance for chaining
+     */
+    removeSupportingText: () => SupportingTextComponent;
+}
+/**
+ * Creates and manages supporting text for a component
+ * @param config - Configuration object with supporting text settings
+ * @returns Function that enhances a component with supporting text functionality
+ */
+export declare const withSupportingText: <T extends SupportingTextConfig>(config: T) => <C extends ElementComponent>(component: C) => C & SupportingTextComponent;
+/**
+ * Wrapper for the core withTrack function that works with SwitchConfig
+ *
+ * @param config - Switch configuration
+ * @returns Function that enhances a component with track and thumb elements
+ */
+export declare const withTrack: (config: SwitchConfig) => <C extends ElementComponent>(component: C) => C & TrackComponent;

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

@@ -0,0 +1,4 @@
+export { default } from './switch';
+export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from './constants';
+export { SwitchConfig, SwitchComponent } from './types';
+export { withSupportingText, SupportingTextComponent } from './features';

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,8 @@
+import { SwitchConfig, SwitchComponent } from './types';
+/**
+ * Creates a new Switch component
+ * @param {SwitchConfig} config - Switch configuration
+ * @returns {SwitchComponent} Switch component instance
+ */
+declare const createSwitch: (config?: SwitchConfig) => SwitchComponent;
+export default createSwitch;

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

@@ -0,0 +1,131 @@
+export type SwitchPosition = 'center' | 'start' | 'end';
+/**
+ * Switch label position types
+ */
+export type SwitchLabelPosition = 'start' | 'end';
+/**
+ * Switch label positions
+ */
+export declare const SWITCH_LABEL_POSITION: {
+    readonly START: "start";
+    readonly END: "end";
+};
+/**
+ * Configuration interface for the Switch component
+ */
+export interface SwitchConfig {
+    /** Input name attribute */
+    name?: string;
+    /** Initial checked state */
+    checked?: boolean;
+    /** Whether input is required */
+    required?: boolean;
+    /** Whether switch is disabled */
+    disabled?: boolean;
+    /** Input value attribute */
+    value?: string;
+    /** Label text */
+    label?: string;
+    /** Supporting text content */
+    supportingText?: string;
+    /** Whether supporting text indicates an error */
+    error?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** ARIA label for accessibility */
+    ariaLabel?: string;
+    /** Prefix for class names */
+    prefix?: string;
+    /** Component name */
+    componentName?: string;
+    /** Icon HTML content */
+    icon?: string;
+}
+/**
+ * Switch component interface
+ */
+export interface SwitchComponent {
+    /** The root element of the switch */
+    element: HTMLElement;
+    /** The input element */
+    input: HTMLInputElement;
+    /** Gets the switch's value */
+    getValue: () => string;
+    /** Sets the switch's value */
+    setValue: (value: string) => SwitchComponent;
+    /** Checks/activates the switch */
+    check: () => SwitchComponent;
+    /** Unchecks/deactivates the switch */
+    uncheck: () => SwitchComponent;
+    /** Toggles the switch's checked state */
+    toggle: () => SwitchComponent;
+    /** Returns whether the switch is checked */
+    isChecked: () => boolean;
+    /** Sets the switch's label text */
+    setLabel: (text: string) => SwitchComponent;
+    /** Gets the switch's label text */
+    getLabel: () => string;
+    /** Supporting text element */
+    supportingTextElement: HTMLElement | null;
+    /** Sets supporting text content */
+    setSupportingText: (text: string, isError?: boolean) => SwitchComponent;
+    /** Removes supporting text */
+    removeSupportingText: () => SwitchComponent;
+    /** Adds event listener */
+    on: (event: string, handler: Function) => SwitchComponent;
+    /** Removes event listener */
+    off: (event: string, handler: Function) => SwitchComponent;
+    /** Enables the switch */
+    enable: () => SwitchComponent;
+    /** Disables the switch */
+    disable: () => SwitchComponent;
+    /** Destroys the switch component and cleans up resources */
+    destroy: () => void;
+}
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+    checkable: {
+        check: () => any;
+        uncheck: () => any;
+        toggle: () => any;
+        isChecked: () => boolean;
+    };
+}
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+    element: HTMLElement;
+    input?: HTMLInputElement;
+    getValue?: () => string;
+    setValue?: (value: string) => any;
+    text?: {
+        setText: (content: string) => any;
+        getText: () => string;
+    };
+    on?: (event: string, handler: Function) => any;
+    off?: (event: string, handler: Function) => any;
+    disabled?: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle?: {
+        destroy: () => void;
+    };
+    checkable?: {
+        check: () => any;
+        uncheck: () => any;
+        toggle: () => any;
+        isChecked: () => boolean;
+    };
+    [key: string]: any;
+}

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

@@ -0,0 +1,52 @@
+import { TabsComponent, TabComponent } from './types';
+/**
+ * API options for a Tabs component
+ */
+interface ApiOptions {
+    /** The component's lifecycle API */
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Component with required elements and methods
+ */
+interface ComponentWithElements {
+    /** The DOM element */
+    element: HTMLElement;
+    /** Array of tab components */
+    tabs: TabComponent[];
+    /** Container for tabs */
+    tabsContainer: HTMLElement;
+    /** Tab click handler */
+    handleTabClick: (event: Event, tab: TabComponent) => void;
+    /** Scroll container (optional) */
+    scrollContainer?: HTMLElement;
+    /** Class name helper */
+    getClass: (name: string) => string;
+    /** Event subscription (optional) */
+    on?: (event: string, handler: Function) => any;
+    /** Event unsubscription (optional) */
+    off?: (event: string, handler: Function) => any;
+    /** Event emission (optional) */
+    emit?: (event: string, data: any) => any;
+    /** Component configuration */
+    config: Record<string, any>;
+}
+/**
+ * Enhances a tabs component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export declare const withAPI: ({ lifecycle }: ApiOptions) => (component: ComponentWithElements) => TabsComponent;
+/**
+ * Creates API configuration for the Tabs component
+ * @param {Object} comp - Component with lifecycle feature
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export {};

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

@@ -0,0 +1,39 @@
+import { BaseComponentConfig } from '../../core/config/component';
+import { TabConfig } from './types';
+/**
+ * Default configuration for a Tab
+ */
+export declare const defaultTabConfig: TabConfig;
+/**
+ * Default configuration for the Tabs component
+ */
+export declare const defaultTabsConfig: {
+    variant: "primary";
+    scrollable: true;
+    showDivider: true;
+    componentName: string;
+};
+export declare const createTabsConfig: (config?: {}) => BaseComponentConfig;
+/**
+ * Creates the base configuration for a Tab
+ * @param {TabConfig} config - User provided configuration
+ * @returns {TabConfig} Complete configuration with defaults applied
+ */
+export declare const createTabConfig: (config?: TabConfig) => TabConfig;
+export declare const getTabsElementConfig: (config: any) => (component: any) => any;
+/**
+ * Creates API configuration for the Tab component
+ * @param {Object} comp - Component with disabled and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export declare const getTabApiConfig: (comp: any) => {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+        isDisabled: () => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+    button: any;
+};

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;