mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,38 @@
+import { TooltipConfig } from './types';
+/**
+ * Default configuration for the Tooltip component
+ */
+export declare const defaultConfig: TooltipConfig;
+/**
+ * Creates the base configuration for Tooltip component
+ * @param {TooltipConfig} config - User provided configuration
+ * @returns {TooltipConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: TooltipConfig) => TooltipConfig;
+/**
+ * Generates element configuration for the Tooltip component
+ * @param {TooltipConfig} config - Tooltip configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: TooltipConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: 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 Tooltip component
+ * @param {Object} comp - Component with lifecycle feature
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;

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

@@ -0,0 +1,108 @@
+/**
+ * Tooltip positions
+ * @category Components
+ */
+export declare const TOOLTIP_POSITIONS: {
+    /** Position above the target element */
+    readonly TOP: "top";
+    /** Position to the right of the target element */
+    readonly RIGHT: "right";
+    /** Position below the target element */
+    readonly BOTTOM: "bottom";
+    /** Position to the left of the target element */
+    readonly LEFT: "left";
+    /** Position above and aligned to the start of the target */
+    readonly TOP_START: "top-start";
+    /** Position above and aligned to the end of the target */
+    readonly TOP_END: "top-end";
+    /** Position to the right and aligned to the start of the target */
+    readonly RIGHT_START: "right-start";
+    /** Position to the right and aligned to the end of the target */
+    readonly RIGHT_END: "right-end";
+    /** Position below and aligned to the start of the target */
+    readonly BOTTOM_START: "bottom-start";
+    /** Position below and aligned to the end of the target */
+    readonly BOTTOM_END: "bottom-end";
+    /** Position to the left and aligned to the start of the target */
+    readonly LEFT_START: "left-start";
+    /** Position to the left and aligned to the end of the target */
+    readonly LEFT_END: "left-end";
+};
+/**
+ * Tooltip visual variants
+ * @category Components
+ */
+export declare const TOOLTIP_VARIANTS: {
+    /** Standard tooltip with background and arrow */
+    readonly DEFAULT: "default";
+    /** Rich tooltip with support for HTML content */
+    readonly RICH: "rich";
+    /** Plain text tooltip with minimal styling */
+    readonly PLAIN: "plain";
+};
+/**
+ * Tooltip events
+ * @category Components
+ */
+export declare const TOOLTIP_EVENTS: {
+    /** Fired when tooltip becomes visible */
+    readonly SHOW: "show";
+    /** Fired when tooltip becomes hidden */
+    readonly HIDE: "hide";
+    /** Fired when mouse enters target element */
+    readonly ENTER: "enter";
+    /** Fired when mouse leaves target element */
+    readonly LEAVE: "leave";
+};
+/**
+ * Default configuration values for tooltip
+ * @category Components
+ */
+export declare const TOOLTIP_DEFAULTS: {
+    /** Default tooltip position */
+    readonly POSITION: "bottom";
+    /** Default visual variant */
+    readonly VARIANT: "default";
+    /** Default visibility state */
+    readonly VISIBLE: false;
+    /** Default show delay in milliseconds */
+    readonly SHOW_DELAY: 300;
+    /** Default hide delay in milliseconds */
+    readonly HIDE_DELAY: 100;
+    /** Default offset from target in pixels */
+    readonly OFFSET: 8;
+    /** Default arrow size in pixels */
+    readonly ARROW_SIZE: 8;
+    /** Whether to show tooltip on focus by default */
+    readonly SHOW_ON_FOCUS: true;
+    /** Whether to show tooltip on hover by default */
+    readonly SHOW_ON_HOVER: true;
+    /** Whether to allow rich HTML content by default */
+    readonly RICH: false;
+};
+/**
+ * CSS class names used by the tooltip component
+ * @category Components
+ */
+export declare const TOOLTIP_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "tooltip";
+    /** Container for the tooltip content */
+    readonly CONTAINER: "tooltip-container";
+    /** Arrow element class */
+    readonly ARROW: "tooltip-arrow";
+    /** Content element class */
+    readonly CONTENT: "tooltip-content";
+    /** Visible state class */
+    readonly VISIBLE: "tooltip--visible";
+    /** Hidden state class */
+    readonly HIDDEN: "tooltip--hidden";
+    /** Default variant class */
+    readonly DEFAULT: "tooltip--default";
+    /** Rich variant class */
+    readonly RICH: "tooltip--rich";
+    /** Plain variant class */
+    readonly PLAIN: "tooltip--plain";
+    /** Position prefix - append position name (e.g. tooltip--top) */
+    readonly POSITION_PREFIX: "tooltip--";
+};

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

@@ -0,0 +1,3 @@
+export { default } from './tooltip';
+export { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES } from './constants';
+export { TooltipConfig, TooltipComponent } from './types';

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,8 @@
+import { TooltipConfig } from './types';
+/**
+ * Creates a new Tooltip component
+ * @param {TooltipConfig} config - Tooltip configuration object
+ * @returns {TooltipComponent} Tooltip component instance
+ */
+declare const createTooltip: (config?: TooltipConfig) => any;
+export default createTooltip;

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

@@ -0,0 +1,188 @@
+/**
+ * Tooltip positions
+ */
+export declare const TOOLTIP_POSITIONS: {
+    readonly TOP: "top";
+    readonly RIGHT: "right";
+    readonly BOTTOM: "bottom";
+    readonly LEFT: "left";
+    readonly TOP_START: "top-start";
+    readonly TOP_END: "top-end";
+    readonly RIGHT_START: "right-start";
+    readonly RIGHT_END: "right-end";
+    readonly BOTTOM_START: "bottom-start";
+    readonly BOTTOM_END: "bottom-end";
+    readonly LEFT_START: "left-start";
+    readonly LEFT_END: "left-end";
+};
+/**
+ * Tooltip variants
+ */
+export declare const TOOLTIP_VARIANTS: {
+    readonly DEFAULT: "default";
+    readonly RICH: "rich";
+    readonly PLAIN: "plain";
+};
+/**
+ * Default values
+ */
+export declare const DEFAULT_SHOW_DELAY = 300;
+export declare const DEFAULT_HIDE_DELAY = 100;
+export declare const DEFAULT_OFFSET = 8;
+export declare const DEFAULT_ARROW_SIZE = 8;
+/**
+ * Available Tooltip variants
+ */
+export type TooltipVariant = 'default' | 'rich' | 'plain';
+/**
+ * Available Tooltip positions
+ */
+export type TooltipPosition = typeof TOOLTIP_POSITIONS[keyof typeof TOOLTIP_POSITIONS];
+/**
+ * Configuration interface for the Tooltip component
+ * @category Components
+ */
+export interface TooltipConfig {
+    /**
+     * Tooltip content text
+     * @example 'Delete item'
+     */
+    text?: string;
+    /**
+     * HTML element that triggers the tooltip
+     * @example document.querySelector('#my-button')
+     */
+    target?: HTMLElement;
+    /**
+     * Tooltip position relative to the target
+     * @default 'bottom'
+     */
+    position?: TooltipPosition | string;
+    /**
+     * Tooltip variant that determines visual styling
+     * @default 'default'
+     */
+    variant?: TooltipVariant | string;
+    /**
+     * Whether the tooltip is initially visible
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * Show delay in milliseconds
+     * @default 300
+     */
+    showDelay?: number;
+    /**
+     * Hide delay in milliseconds
+     * @default 100
+     */
+    hideDelay?: number;
+    /**
+     * Whether to show the tooltip on focus
+     * @default true
+     */
+    showOnFocus?: boolean;
+    /**
+     * Whether to show the tooltip on hover
+     * @default true
+     */
+    showOnHover?: boolean;
+    /**
+     * Additional CSS classes to add to the tooltip
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Optional z-index for the tooltip
+     */
+    zIndex?: number;
+    /**
+     * Whether to enable rich (HTML) content
+     * @default false
+     */
+    rich?: boolean;
+}
+/**
+ * Tooltip component interface
+ * @category Components
+ */
+export interface TooltipComponent {
+    /** The tooltip's DOM element */
+    element: HTMLElement;
+    /** The tooltip's target element */
+    target: HTMLElement | null;
+    /** API for managing component lifecycle */
+    lifecycle: {
+        /** Destroys the component and cleans up resources */
+        destroy: () => void;
+    };
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Sets the tooltip text content
+     * @param text - New text content
+     * @returns The tooltip component for chaining
+     */
+    setText: (text: string) => TooltipComponent;
+    /**
+     * Gets the tooltip text content
+     * @returns Tooltip text content
+     */
+    getText: () => string;
+    /**
+     * Sets the tooltip position
+     * @param position - Position value
+     * @returns The tooltip component for chaining
+     */
+    setPosition: (position: TooltipPosition) => TooltipComponent;
+    /**
+     * Gets the current tooltip position
+     * @returns Current position
+     */
+    getPosition: () => TooltipPosition;
+    /**
+     * Sets the tooltip target element
+     * @param target - Element to attach tooltip to
+     * @returns The tooltip component for chaining
+     */
+    setTarget: (target: HTMLElement) => TooltipComponent;
+    /**
+     * Shows the tooltip
+     * @param immediate - Whether to show immediately (bypassing delay)
+     * @returns The tooltip component for chaining
+     */
+    show: (immediate?: boolean) => TooltipComponent;
+    /**
+     * Hides the tooltip
+     * @param immediate - Whether to hide immediately (bypassing delay)
+     * @returns The tooltip component for chaining
+     */
+    hide: (immediate?: boolean) => TooltipComponent;
+    /**
+     * Checks if the tooltip is currently visible
+     * @returns Whether the tooltip is visible
+     */
+    isVisible: () => boolean;
+    /**
+     * Updates the tooltip's position relative to its target
+     * @returns The tooltip component for chaining
+     */
+    updatePosition: () => TooltipComponent;
+    /**
+     * Destroys the tooltip component and cleans up resources
+     */
+    destroy: () => void;
+}

package/dist/components/top-app-bar/config.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @module components/top-app-bar
+ * @description Configuration for top app bar component
+ */
+import { TopAppBarConfig } from './types';
+/**
+ * Default configuration for top app bar
+ */
+export declare const defaultConfig: Partial<TopAppBarConfig>;
+/**
+ * Creates the configuration for a top app bar component
+ *
+ * @param {TopAppBarConfig} config - User provided configuration
+ * @returns {TopAppBarConfig} Complete configuration with defaults applied
+ */
+export declare const createConfig: (config?: TopAppBarConfig) => TopAppBarConfig;

package/dist/components/top-app-bar/constants.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Top App Bar types
+ * @category Components
+ */
+export declare const TOP_APP_BAR_TYPES: {
+    /** Small height app bar */
+    readonly SMALL: "small";
+    /** Medium height app bar */
+    readonly MEDIUM: "medium";
+    /** Large height app bar */
+    readonly LARGE: "large";
+    /** Center-aligned app bar */
+    readonly CENTER: "center";
+};
+/**
+ * Top App Bar states
+ * @category Components
+ */
+export declare const TOP_APP_BAR_STATES: {
+    /** Default state */
+    readonly DEFAULT: "default";
+    /** Scrolled state */
+    readonly SCROLLED: "scrolled";
+    /** Fixed state */
+    readonly FIXED: "fixed";
+};
+/**
+ * Default configuration values for top app bar
+ * @category Components
+ */
+export declare const TOP_APP_BAR_DEFAULTS: {
+    /** Default HTML tag */
+    readonly TAG: "header";
+    /** Default bar type */
+    readonly TYPE: "small";
+    /** Whether to enable scrolling behavior */
+    readonly SCROLLABLE: true;
+    /** Whether to compress medium/large variants on scroll */
+    readonly COMPRESSIBLE: true;
+    /** Scroll threshold in pixels to trigger scrolled state */
+    readonly SCROLL_THRESHOLD: 4;
+};
+/**
+ * CSS class names used by the top app bar component
+ * @category Components
+ */
+export declare const TOP_APP_BAR_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "top-app-bar";
+    /** Small variant class */
+    readonly SMALL: "top-app-bar--small";
+    /** Medium variant class */
+    readonly MEDIUM: "top-app-bar--medium";
+    /** Large variant class */
+    readonly LARGE: "top-app-bar--large";
+    /** Center-aligned variant class */
+    readonly CENTER: "top-app-bar--center";
+    /** Scrolled state class */
+    readonly SCROLLED: "top-app-bar--scrolled";
+    /** Fixed state class */
+    readonly FIXED: "top-app-bar--fixed";
+    /** Row container class */
+    readonly ROW: "top-app-bar-row";
+    /** Section container class */
+    readonly SECTION: "top-app-bar-section";
+    /** Leading section class */
+    readonly SECTION_LEADING: "top-app-bar-section--leading";
+    /** Headline section class */
+    readonly SECTION_HEADLINE: "top-app-bar-section--headline";
+    /** Trailing section class */
+    readonly SECTION_TRAILING: "top-app-bar-section--trailing";
+    /** Title element class */
+    readonly TITLE: "top-app-bar-title";
+};

package/{src/components/top-app-bar/index.ts → dist/components/top-app-bar/index.d.ts}

@@ -1,11 +1,9 @@
-// src/components/top-app-bar/index.ts
 /**
  * @module components/top-app-bar
  * @description Top app bar component for application headers
  */
-
 import { createTopAppBar } from './top-app-bar';
-
+export { TOP_APP_BAR_TYPES, TOP_APP_BAR_STATES, TOP_APP_BAR_DEFAULTS, TOP_APP_BAR_CLASSES } from './constants';
 export default createTopAppBar;
 export { createTopAppBar };
-export type { TopAppBarConfig, TopAppBarType } from './config';
+export type { TopAppBarConfig, TopAppBar } from './types';

package/dist/components/top-app-bar/top-app-bar.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @module components/top-app-bar
+ * @description Top app bar implementation
+ */
+import { ElementComponent } from '../../core/compose';
+import { TopAppBarConfig, TopAppBarType } from './types';
+/**
+ * Top app bar component interface
+ */
+export interface TopAppBar extends ElementComponent {
+    /**
+     * Sets the title of the top app bar
+     * @param {string} title - Title text
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    setTitle: (title: string) => TopAppBar;
+    /**
+     * Gets the current title
+     * @returns {string} Current title text
+     */
+    getTitle: () => string;
+    /**
+     * Adds a leading navigation icon or element
+     * @param {HTMLElement} element - Element to add to the leading section
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    addLeadingElement: (element: HTMLElement) => TopAppBar;
+    /**
+     * Adds a trailing action icon or element
+     * @param {HTMLElement} element - Element to add to the trailing section
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    addTrailingElement: (element: HTMLElement) => TopAppBar;
+    /**
+     * Changes the top app bar type
+     * @param {TopAppBarType} type - New app bar type
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    setType: (type: TopAppBarType) => TopAppBar;
+    /**
+     * Manually sets the scrolled state
+     * @param {boolean} scrolled - Whether to show the scrolled state
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    setScrollState: (scrolled: boolean) => TopAppBar;
+    /**
+     * Gets the headline element
+     * @returns {HTMLElement} Headline element
+     */
+    getHeadlineElement: () => HTMLElement;
+    /**
+     * Gets the leading container element
+     * @returns {HTMLElement} Leading container element
+     */
+    getLeadingContainer: () => HTMLElement;
+    /**
+     * Gets the trailing container element
+     * @returns {HTMLElement} Trailing container element
+     */
+    getTrailingContainer: () => HTMLElement;
+}
+/**
+ * Creates a top app bar component
+ *
+ * @param {TopAppBarConfig} config - Configuration options
+ * @returns {TopAppBar} Top app bar component instance
+ */
+export declare const createTopAppBar: (config?: TopAppBarConfig) => TopAppBar;

package/dist/components/top-app-bar/types.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @module components/top-app-bar
+ * @description Type definitions for Top App Bar component
+ */
+import { ElementComponent } from '../../core/compose';
+/**
+ * Top App Bar types
+ * @category Components
+ */
+export type TopAppBarType = 'small' | 'medium' | 'large' | 'center';
+/**
+ * Configuration options for Top App Bar component
+ * @category Components
+ */
+export interface TopAppBarConfig {
+    /**
+     * Element to use for the container
+     * @default 'header'
+     */
+    tag?: string;
+    /**
+     * Type of top app bar to display
+     * @default 'small'
+     */
+    type?: TopAppBarType;
+    /**
+     * Title text to display in the app bar
+     */
+    title?: string;
+    /**
+     * Whether to enable scrolling behavior
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Whether to compress medium/large variants to small on scroll
+     * @default true
+     */
+    compressible?: boolean;
+    /**
+     * Scroll threshold in pixels to trigger the scrolled state
+     * @default 4
+     */
+    scrollThreshold?: number;
+    /**
+     * Additional CSS classes to apply
+     */
+    class?: string;
+    /**
+     * Optional callback when scrolling changes the bar appearance
+     */
+    onScroll?: (scrolled: boolean) => void;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name for class generation
+     */
+    componentName?: string;
+}
+/**
+ * Top App Bar component interface
+ * @category Components
+ */
+export interface TopAppBar extends ElementComponent {
+    /**
+     * Sets the title of the top app bar
+     * @param {string} title - Title text
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    setTitle: (title: string) => TopAppBar;
+    /**
+     * Gets the current title
+     * @returns {string} Current title text
+     */
+    getTitle: () => string;
+    /**
+     * Adds a leading navigation icon or element
+     * @param {HTMLElement} element - Element to add to the leading section
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    addLeadingElement: (element: HTMLElement) => TopAppBar;
+    /**
+     * Adds a trailing action icon or element
+     * @param {HTMLElement} element - Element to add to the trailing section
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    addTrailingElement: (element: HTMLElement) => TopAppBar;
+    /**
+     * Changes the top app bar type
+     * @param {TopAppBarType} type - New app bar type
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    setType: (type: TopAppBarType) => TopAppBar;
+    /**
+     * Manually sets the scrolled state
+     * @param {boolean} scrolled - Whether to show the scrolled state
+     * @returns {TopAppBar} TopAppBar instance for chaining
+     */
+    setScrollState: (scrolled: boolean) => TopAppBar;
+    /**
+     * Gets the headline element
+     * @returns {HTMLElement} Headline element
+     */
+    getHeadlineElement: () => HTMLElement;
+    /**
+     * Gets the leading container element
+     * @returns {HTMLElement} Leading container element
+     */
+    getLeadingContainer: () => HTMLElement;
+    /**
+     * Gets the trailing container element
+     * @returns {HTMLElement} Trailing container element
+     */
+    getTrailingContainer: () => HTMLElement;
+}

package/dist/constants.d.ts

@@ -0,0 +1,30 @@
+import { BADGE_VARIANTS, BADGE_COLORS, BADGE_POSITIONS, BADGE_MAX_CHARACTERS } from './components/badge/constants';
+import { FAB_POSITIONS as BOTTOM_APP_BAR_FAB_POSITIONS, BOTTOM_APP_BAR_CLASSES, DEFAULT_TRANSITION_DURATION } from './components/bottom-app-bar/constants';
+import { BUTTON_VARIANTS, BUTTON_TYPES, BUTTON_CLASSES, DEFAULT_RIPPLE_CONFIG } from './components/button/constants';
+import { CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS, CARD_ASPECT_RATIOS, CARD_ACTION_ALIGNMENT, CARD_MEDIA_POSITION, CARD_CLASSES } from './components/card/constants';
+import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION, CHECKBOX_STATES, CHECKBOX_CLASSES } from './components/checkbox/constants';
+import { CHIP_VARIANTS, CHIP_EVENTS, CHIPS_EVENTS } from './components/chips/constants';
+import { CHIP_CLASSES, CHIP_STATES } from './components/chips/chip/constants';
+import { DATEPICKER_VARIANTS, DATEPICKER_VIEWS, DATEPICKER_SELECTION_MODES, DAY_NAMES, MONTH_NAMES, MONTH_NAMES_SHORT, DEFAULT_DATE_FORMAT, DATEPICKER_CLASSES, DATEPICKER_EVENTS } from './components/datepicker/constants';
+import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS, DIALOG_CLASSES, DEFAULT_ANIMATION_DURATION, DEFAULT_Z_INDEX, DIALOG_BUTTON_VARIANTS, DEFAULT_CONFIRM_BUTTON_TEXT, DEFAULT_CANCEL_BUTTON_TEXT } from './components/dialog/constants';
+import { DIVIDER_ORIENTATIONS, DIVIDER_VARIANTS, DEFAULT_DIVIDER_THICKNESS, DEFAULT_INSET_VALUE, DIVIDER_CLASSES } from './components/divider/constants';
+import { EXTENDED_FAB_VARIANTS, EXTENDED_FAB_WIDTH, EXTENDED_FAB_POSITIONS, EXTENDED_FAB_ICON_POSITIONS, EXTENDED_FAB_CLASSES, EXTENDED_FAB_TYPES, EXTENDED_FAB_ANIMATIONS } from './components/extended-fab/constants';
+import { FAB_VARIANTS, FAB_SIZES, FAB_POSITIONS, FAB_CLASSES, FAB_TYPES, FAB_ICON_SIZES, FAB_ANIMATIONS } from './components/fab/constants';
+import { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES } from './components/list/constants';
+import { MENU_POSITION, MENU_DEFAULTS, MENU_INTERACTION_TYPES, MENU_ITEM_TYPES, MENU_EVENTS, MENU_CLASSES } from './components/menu/constants';
+import { NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS, NAV_ITEM_STATES, NAV_EVENTS, NAV_DEFAULTS, NAV_CLASSES } from './components/navigation/constants';
+import { PROGRESS_VARIANTS, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES } from './components/progress/constants';
+import { RADIO_STATES, RADIO_DIRECTIONS, RADIO_VARIANTS, RADIO_LABEL_POSITIONS, RADIO_SIZES, RADIO_EVENTS, RADIO_DEFAULTS, RADIO_CLASSES } from './components/radios/constants';
+import { SEARCH_VARIANTS, SEARCH_STATES, SEARCH_EVENTS, SEARCH_ICONS, SEARCH_DEFAULTS, SEARCH_CLASSES } from './components/search/constants';
+import { SEGMENTED_BUTTON_MODES, SEGMENTED_BUTTON_DENSITY, SEGMENTED_BUTTON_EVENTS, SEGMENTED_BUTTON_DEFAULTS, SEGMENTED_BUTTON_ICONS, SEGMENTED_BUTTON_CLASSES } from './components/segmented-button/constants';
+import { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES } from './components/select/constants';
+import { SHEET_VARIANTS, SHEET_POSITIONS, SHEET_EVENTS, SHEET_ELEVATION, SHEET_DEFAULTS, SHEET_ANIMATION, SHEET_GESTURE, SHEET_CLASSES } from './components/sheet/constants';
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS, SLIDER_POSITIONS, SLIDER_DEFAULTS, SLIDER_CLASSES } from './components/slider/constants';
+import { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS, SNACKBAR_STATES, SNACKBAR_EVENTS, SNACKBAR_DEFAULTS, SNACKBAR_CLASSES } from './components/snackbar/constants';
+import { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from './components/switch/constants';
+import { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES } from './components/tabs/constants';
+import { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES } from './components/textfield/constants';
+import { TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_DIAL, TIMEPICKER_VALUES, TIMEPICKER_Z_INDEX, TIMEPICKER_DEFAULTS, TIMEPICKER_CLASSES } from './components/timepicker/constants';
+import { TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES } from './components/tooltip/constants';
+import { TOP_APP_BAR_TYPES, TOP_APP_BAR_STATES, TOP_APP_BAR_DEFAULTS, TOP_APP_BAR_CLASSES } from './components/top-app-bar/constants';
+export { BADGE_VARIANTS, BADGE_COLORS, BADGE_POSITIONS, BADGE_MAX_CHARACTERS, BOTTOM_APP_BAR_FAB_POSITIONS, BOTTOM_APP_BAR_CLASSES, DEFAULT_TRANSITION_DURATION, BUTTON_VARIANTS, BUTTON_TYPES, BUTTON_CLASSES, DEFAULT_RIPPLE_CONFIG, CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS, CARD_ASPECT_RATIOS, CARD_ACTION_ALIGNMENT, CARD_MEDIA_POSITION, CARD_CLASSES, CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION, CHECKBOX_STATES, CHECKBOX_CLASSES, CHIP_VARIANTS, CHIP_EVENTS, CHIPS_EVENTS, CHIP_CLASSES, CHIP_STATES, DATEPICKER_VARIANTS, DATEPICKER_VIEWS, DATEPICKER_SELECTION_MODES, DAY_NAMES, MONTH_NAMES, MONTH_NAMES_SHORT, DEFAULT_DATE_FORMAT, DATEPICKER_CLASSES, DATEPICKER_EVENTS, DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS, DIALOG_CLASSES, DEFAULT_ANIMATION_DURATION, DEFAULT_Z_INDEX, DIALOG_BUTTON_VARIANTS, DEFAULT_CONFIRM_BUTTON_TEXT, DEFAULT_CANCEL_BUTTON_TEXT, DIVIDER_ORIENTATIONS, DIVIDER_VARIANTS, DEFAULT_DIVIDER_THICKNESS, DEFAULT_INSET_VALUE, DIVIDER_CLASSES, EXTENDED_FAB_VARIANTS, EXTENDED_FAB_WIDTH, EXTENDED_FAB_POSITIONS, EXTENDED_FAB_ICON_POSITIONS, EXTENDED_FAB_CLASSES, EXTENDED_FAB_TYPES, EXTENDED_FAB_ANIMATIONS, FAB_VARIANTS, FAB_SIZES, FAB_POSITIONS, FAB_CLASSES, FAB_TYPES, FAB_ICON_SIZES, FAB_ANIMATIONS, LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, MENU_POSITION, MENU_DEFAULTS, MENU_INTERACTION_TYPES, MENU_ITEM_TYPES, MENU_EVENTS, MENU_CLASSES, NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS, NAV_ITEM_STATES, NAV_EVENTS, NAV_DEFAULTS, NAV_CLASSES, PROGRESS_VARIANTS, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, RADIO_STATES, RADIO_DIRECTIONS, RADIO_VARIANTS, RADIO_LABEL_POSITIONS, RADIO_SIZES, RADIO_EVENTS, RADIO_DEFAULTS, RADIO_CLASSES, SEARCH_VARIANTS, SEARCH_STATES, SEARCH_EVENTS, SEARCH_ICONS, SEARCH_DEFAULTS, SEARCH_CLASSES, SEGMENTED_BUTTON_MODES, SEGMENTED_BUTTON_DENSITY, SEGMENTED_BUTTON_EVENTS, SEGMENTED_BUTTON_DEFAULTS, SEGMENTED_BUTTON_ICONS, SEGMENTED_BUTTON_CLASSES, SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES, SHEET_VARIANTS, SHEET_POSITIONS, SHEET_EVENTS, SHEET_ELEVATION, SHEET_DEFAULTS, SHEET_ANIMATION, SHEET_GESTURE, SHEET_CLASSES, SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS, SLIDER_POSITIONS, SLIDER_DEFAULTS, SLIDER_CLASSES, SNACKBAR_VARIANTS, SNACKBAR_POSITIONS, SNACKBAR_STATES, SNACKBAR_EVENTS, SNACKBAR_DEFAULTS, SNACKBAR_CLASSES, SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES, TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES, TIMEPICKER_TYPES, TIMEPICKER_ORIENTATIONS, TIMEPICKER_FORMATS, TIMEPICKER_PERIODS, TIMEPICKER_EVENTS, TIMEPICKER_DIAL, TIMEPICKER_VALUES, TIMEPICKER_Z_INDEX, TIMEPICKER_DEFAULTS, TIMEPICKER_CLASSES, TOOLTIP_POSITIONS, TOOLTIP_VARIANTS, TOOLTIP_EVENTS, TOOLTIP_DEFAULTS, TOOLTIP_CLASSES, TOP_APP_BAR_TYPES, TOP_APP_BAR_STATES, TOP_APP_BAR_DEFAULTS, TOP_APP_BAR_CLASSES };