material 1.0.3 → 3.0.0-next.0

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,24 @@
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withIcon, withVariant, withSize, withRipple, withDisabled, withLifecycle } from "../../core/compose/features/index.js";
+import { withToggle } from "./features/toggle.js";
+import { withAPI } from "./api.js";
+import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+const createIconButton = (config) => {
+    const baseConfig = createBaseConfig(config);
+    try {
+        const iconButton = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), withSize(baseConfig), withIcon(baseConfig), withDisabled(baseConfig), withToggle(baseConfig), withRipple(baseConfig), withLifecycle(), (component) => {
+            if (baseConfig.width && baseConfig.width !== 'default' && component.element) {
+                const className = `${baseConfig.prefix}-${baseConfig.componentName}--${baseConfig.width}`;
+                component.element.classList.add(className);
+            }
+            return component;
+        }, (comp) => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        return iconButton;
+    }
+    catch (error) {
+        console.error('IconButton creation error:', error);
+        throw new Error(`Failed to create icon button: ${error.message}`);
+    }
+};
+export default createIconButton;

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @module IconButton
+ *
+ * Icon Button component following Material Design 3 guidelines.
+ * Icon buttons display actions in a compact form using icons.
+ * They support both default (single action) and toggle (binary state) modes.
+ *
+ * Features:
+ * - Four variants (filled, tonal, outlined, standard)
+ * - Five size options (xs, s, m, l, xl)
+ * - Shape options (round, square)
+ * - Width options (narrow, default, wide)
+ * - Toggle mode with selected/unselected states
+ * - Shape morphing on press and selection (CSS-driven)
+ * - Ripple effect on interaction
+ * - Full accessibility support
+ *
+ * @example
+ * ```typescript
+ * // Create a standard icon button
+ * const menuButton = createIconButton({
+ *   icon: '<svg viewBox="0 0 24 24">...</svg>',
+ *   ariaLabel: 'Open menu'
+ * });
+ *
+ * // Create a toggle icon button (favorite)
+ * const favoriteButton = createIconButton({
+ *   icon: '<svg>...</svg>', // outlined heart
+ *   selectedIcon: '<svg>...</svg>', // filled heart
+ *   toggle: true,
+ *   ariaLabel: 'Add to favorites'
+ * });
+ *
+ * // Listen for toggle events
+ * favoriteButton.on('change', ({ selected }) => {
+ *   console.log('Selected:', selected);
+ * });
+ *
+ * // Attach to DOM
+ * container.appendChild(menuButton.element);
+ * ```
+ *
+ * @category Components
+ */
+export { default, default as createIconButton } from "./icon-button.js";
+export type { IconButtonConfig, IconButtonComponent, IconButtonEvents, IconButtonChangePayload, IconAPI, ToggleManager } from "./types.js";
+export { ICON_BUTTON_VARIANTS, ICON_BUTTON_SIZES, ICON_BUTTON_SHAPES, ICON_BUTTON_WIDTHS, ICON_BUTTON_CLASSES, ICON_BUTTON_CONTAINER_SIZES, ICON_BUTTON_ICON_SIZES, ICON_BUTTON_WIDTH_VALUES, ICON_BUTTON_CORNER_RADIUS } from "./constants.js";
+export type { IconButtonVariant, IconButtonSize, IconButtonShape, IconButtonWidth } from "./constants.js";

package/dist/components/icon-button/index.js

@@ -0,0 +1,2 @@
+export { default, default as createIconButton } from "./icon-button.js";
+export { ICON_BUTTON_VARIANTS, ICON_BUTTON_SIZES, ICON_BUTTON_SHAPES, ICON_BUTTON_WIDTHS, ICON_BUTTON_CLASSES, ICON_BUTTON_CONTAINER_SIZES, ICON_BUTTON_ICON_SIZES, ICON_BUTTON_WIDTH_VALUES, ICON_BUTTON_CORNER_RADIUS } from "./constants.js";

package/dist/components/icon-button/types.d.ts

@@ -0,0 +1,404 @@
+import type { TouchEvents } from "../../core/utils/mobile.js";
+import type { ForwardedEventPayload } from "../../core/dom/index.js";
+import { BaseComponentConfig } from "../../core/config/component.js";
+import { IconButtonVariant, IconButtonSize, IconButtonShape, IconButtonWidth } from "./constants.js";
+/**
+ * Configuration interface for the IconButton component
+ *
+ * IconButtons display actions in a compact form using icons.
+ * They support both default (single action) and toggle (binary state) modes.
+ *
+ * @category Components
+ * @see https://m3.material.io/components/icon-buttons/overview
+ */
+export interface IconButtonConfig extends BaseComponentConfig {
+    /**
+     * IconButton variant that determines visual styling
+     * - filled: Highest emphasis, key actions
+     * - tonal: High emphasis, secondary actions
+     * - outlined: Medium emphasis, not main focus
+     * - standard: Lowest emphasis, on colorful surfaces
+     *
+     * @default 'standard'
+     */
+    variant?: IconButtonVariant | string;
+    /**
+     * IconButton size variant
+     * - xs: 32px container, 18px icon
+     * - s: 40px container, 24px icon (default)
+     * - m: 56px container, 24px icon
+     * - l: 96px container, 36px icon
+     * - xl: 136px container, 48px icon
+     *
+     * @default 's'
+     */
+    size?: IconButtonSize | string;
+    /**
+     * IconButton shape variant
+     * - round: Full corner radius (default)
+     * - square: Fixed corner radius based on size
+     *
+     * @default 'round'
+     */
+    shape?: IconButtonShape | string;
+    /**
+     * IconButton width variant
+     * - narrow: Narrower than default
+     * - default: Standard width matching container size
+     * - wide: Wider than default
+     *
+     * @default 'default'
+     */
+    width?: IconButtonWidth | string;
+    /**
+     * Whether the IconButton is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon HTML content (required for icon buttons).
+     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
+     * Can be SVG, icon font ligature, or any valid HTML
+     *
+     * @example '<svg viewBox="0 0 24 24">...</svg>'
+     * @example '<span class="material-icons">favorite</span>'
+     */
+    icon?: string;
+    /**
+     * Selected state icon HTML content (for toggle buttons).
+     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
+     * When provided, enables toggle mode
+     * Use filled icon style for selected state
+     *
+     * @example '<svg viewBox="0 0 24 24">...</svg>' // filled heart
+     */
+    selectedIcon?: string;
+    /**
+     * Whether the IconButton supports toggle (selection) behavior
+     * When true, the button can be selected/unselected
+     *
+     * @default false
+     */
+    toggle?: boolean;
+    /**
+     * Initial selected state (only applies when toggle is true)
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether a click flips the selected state of a toggle button. Set to
+     * false when a container (button group) owns the selection.
+     * @default true
+     */
+    toggleOnClick?: boolean;
+    /**
+     * Additional CSS classes to add to the IconButton
+     */
+    class?: string;
+    /**
+     * Button value attribute
+     */
+    value?: string;
+    /**
+     * Button type attribute
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Whether to enable ripple effect
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     * @internal
+     */
+    componentName?: string;
+    /**
+     * Ripple effect configuration
+     */
+    rippleConfig?: {
+        /** How long, in milliseconds, a released wave lingers before it is removed */
+        duration?: number;
+    };
+    /**
+     * Accessible name for the IconButton (aria-label)
+     * Required for accessibility since icon buttons have no visible text
+     * Should describe the action, not the icon name
+     *
+     * @example 'Add to favorites'
+     * @example 'Open menu'
+     */
+    /**
+     * Accessible name. Required: an icon-only control has no text for a screen
+     * reader to announce, so without this it is just "button" (WCAG 4.1.2).
+     * FLO-110.
+     */
+    ariaLabel: string;
+    /**
+     * Whether to show tooltip on hover
+     * Tooltip text uses ariaLabel value
+     *
+     * @default true
+     */
+    tooltip?: boolean;
+}
+/**
+ * Icon API interface for managing IconButton 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;
+}
+/**
+ * Toggle state manager interface for IconButton
+ * @category Components
+ */
+export interface ToggleManager {
+    /**
+     * Selects the IconButton (toggle on)
+     * @returns ToggleManager instance for chaining
+     */
+    select: () => ToggleManager;
+    /**
+     * Deselects the IconButton (toggle off)
+     * @returns ToggleManager instance for chaining
+     */
+    deselect: () => ToggleManager;
+    /**
+     * Toggles the selection state
+     * @returns ToggleManager instance for chaining
+     */
+    toggle: () => ToggleManager;
+    /**
+     * Checks if the IconButton is currently selected
+     * @returns true if selected
+     */
+    isSelected: () => boolean;
+}
+/** A toggle icon button's `change` (FLO-380). */
+export interface IconButtonChangePayload {
+    /** Whether the button is now selected */
+    selected: boolean;
+    /** The button's value, as `getValue()` returns it */
+    value: string;
+}
+/**
+ * The icon button's events: native ones forwarded through its emitter, and a
+ * toggle button's `change`.
+ */
+export interface IconButtonEvents extends TouchEvents {
+    /**
+     * A toggle button's selected state changed on a click (FLO-295). The DOM
+     * `toggle` event on `element` is deprecated and goes in the next release.
+     * `value` is the button's value (`getValue()`), as every model event
+     * carries (FLO-380); `selected` is the toggled state.
+     */
+    change: (payload: IconButtonChangePayload) => void;
+    /** Clicks are not forwarded while the button is disabled. */
+    click: (payload: ForwardedEventPayload<MouseEvent, HTMLButtonElement>) => void;
+    /** The button took focus. */
+    focus: (payload: ForwardedEventPayload<FocusEvent, HTMLButtonElement>) => void;
+    /** The button lost focus. */
+    blur: (payload: ForwardedEventPayload<FocusEvent, HTMLButtonElement>) => void;
+}
+/**
+ * IconButton component interface
+ * @category Components
+ */
+export interface IconButtonComponent {
+    /** The IconButton's DOM element */
+    element: HTMLButtonElement;
+    /** API for managing IconButton icons */
+    icon: IconAPI;
+    /** API for managing disabled state */
+    disabled: {
+        /** Enables the IconButton */
+        enable: () => void;
+        /** Disables the IconButton */
+        disable: () => void;
+        /** Checks if the IconButton is disabled */
+        isDisabled: () => boolean;
+    };
+    /** 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;
+    /**
+     * Gets the IconButton's value attribute
+     * @returns IconButton value
+     */
+    getValue: () => string;
+    /**
+     * Sets the IconButton's value attribute
+     * @param value - New value
+     * @returns The IconButton component for chaining
+     */
+    setValue: (value: string) => IconButtonComponent;
+    /**
+     * Gets the IconButton's current variant
+     * @returns Current variant name
+     */
+    getVariant: () => IconButtonVariant | string;
+    /**
+     * Sets the IconButton's variant
+     * @param variant - New variant to apply
+     * @returns The IconButton component for chaining
+     */
+    setVariant: (variant: IconButtonVariant | string) => IconButtonComponent;
+    /**
+     * Gets the IconButton's current size
+     * @returns Current size name
+     */
+    getSize: () => IconButtonSize | string;
+    /**
+     * Sets the IconButton's size
+     * @param size - New size to apply
+     * @returns The IconButton component for chaining
+     */
+    setSize: (size: IconButtonSize | string) => IconButtonComponent;
+    /**
+     * Gets the IconButton's current shape
+     * @returns Current shape name
+     */
+    getShape: () => IconButtonShape | string;
+    /**
+     * Sets the IconButton's shape
+     * @param shape - New shape to apply
+     * @returns The IconButton component for chaining
+     */
+    setShape: (shape: IconButtonShape | string) => IconButtonComponent;
+    /**
+     * Gets the IconButton's current width
+     * @returns Current width name
+     */
+    getWidth: () => IconButtonWidth | string;
+    /**
+     * Sets the IconButton's width
+     * @param width - New width to apply
+     * @returns The IconButton component for chaining
+     */
+    setWidth: (width: IconButtonWidth | string) => IconButtonComponent;
+    /**
+     * Enables the IconButton
+     * @returns The IconButton component for chaining
+     */
+    enable: () => IconButtonComponent;
+    /**
+     * Disables the IconButton
+     * @returns The IconButton component for chaining
+     */
+    disable: () => IconButtonComponent;
+    /** Whether the icon button is disabled (FLO-384) */
+    isDisabled: () => boolean;
+    /**
+     * Sets the IconButton's icon
+     * @param icon - Icon HTML content
+     * @returns The IconButton component for chaining
+     */
+    setIcon: (icon: string) => IconButtonComponent;
+    /**
+     * Gets the IconButton's icon HTML content
+     * @returns Icon HTML
+     */
+    getIcon: () => string;
+    /**
+     * Sets the selected state icon (for toggle buttons)
+     * @param icon - Icon HTML content for selected state
+     * @returns The IconButton component for chaining
+     */
+    setSelectedIcon: (icon: string) => IconButtonComponent;
+    /**
+     * Gets the selected state icon HTML content
+     * @returns Selected icon HTML or empty string if not set
+     */
+    getSelectedIcon: () => string;
+    /**
+     * Checks if the IconButton is in toggle mode
+     * @returns true if toggle mode is enabled
+     */
+    isToggle: () => boolean;
+    /**
+     * Selects the IconButton (for toggle buttons)
+     * @returns The IconButton component for chaining
+     */
+    select: () => IconButtonComponent;
+    /**
+     * Deselects the IconButton (for toggle buttons)
+     * @returns The IconButton component for chaining
+     */
+    deselect: () => IconButtonComponent;
+    /**
+     * Toggles the selection state (for toggle buttons)
+     * @returns The IconButton component for chaining
+     */
+    toggleSelected: () => IconButtonComponent;
+    /**
+     * Checks if the IconButton is selected
+     * @returns true if selected
+     */
+    isSelected: () => boolean;
+    /**
+     * Sets the aria-label attribute for accessibility
+     * @param label - Aria label text
+     * @returns The IconButton component for chaining
+     */
+    setAriaLabel: (label: string) => IconButtonComponent;
+    /**
+     * Destroys the IconButton component and cleans up resources
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the IconButton
+     * @param event - Forwarded event name: 'click', 'focus', or 'blur'
+     * @param handler - Receives the native event and button root in a payload
+     * @returns The IconButton component for chaining
+     */
+    on: <K extends keyof IconButtonEvents>(event: K, handler: IconButtonEvents[K]) => IconButtonComponent;
+    /**
+     * Removes an event listener from the IconButton
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The IconButton component for chaining
+     */
+    off: <K extends keyof IconButtonEvents>(event: K, handler: IconButtonEvents[K]) => IconButtonComponent;
+    /**
+     * Adds CSS classes to the IconButton element
+     * @param classes - One or more class names to add
+     * @returns The IconButton component for chaining
+     */
+    addClass: (...classes: string[]) => IconButtonComponent;
+    /**
+     * Removes CSS classes from the IconButton element
+     * @param classes - One or more class names to remove
+     * @returns The IconButton component for chaining
+     */
+    removeClass: (...classes: string[]) => IconButtonComponent;
+}

package/dist/components/icon-button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Component library exports
+ *
+ * This file exports all component creators and their types.
+ * Constants are NOT re-exported here to enable proper tree-shaking.
+ * Import constants directly from component paths if needed.
+ *
+ * @packageDocumentation
+ */
+export { default as createBadge } from "./badge/index.js";
+export { default as createBottomAppBar } from "./bottom-app-bar/index.js";
+export { default as createBottomSheet } from "./bottom-sheet/index.js";
+export { default as createSideSheet } from "./side-sheet/index.js";
+export { default as createButton } from "./button/index.js";
+export { default as createButtonGroup } from "./button-group/index.js";
+export { default as createCard } from "./card/index.js";
+export { default as createCarousel } from "./carousel/index.js";
+export { default as createCheckbox } from "./checkbox/index.js";
+export { createAssistChip, createFilterChip, createInputChip, createSuggestionChip, createChips } from "./chips/index.js";
+export { default as createDatePicker } from "./datepicker/index.js";
+export { default as createDialog } from "./dialog/index.js";
+export { createDivider } from "./divider/index.js";
+export { default as createDrawer } from "./drawer/index.js";
+export { default as createFab } from "./fab/index.js";
+export { default as createFabMenu } from "./fab-menu/index.js";
+export { default as createExtendedFab } from "./extended-fab/index.js";
+export { default as createIconButton } from "./icon-button/index.js";
+export { default as createList } from "./list/index.js";
+export { default as createMenu } from "./menu/index.js";
+export { default as createNavigationBar } from "./navigation-bar/index.js";
+export type { NavigationBarConfig, NavigationBarComponent, NavigationBarItemConfig, NavigationBarItemLayout, NavigationBarSelectEvent, NavigationBarEvents } from "./navigation-bar/types.js";
+export { default as createNavigationRail } from "./navigation-rail/index.js";
+export type { NavigationRailConfig, NavigationRailComponent, NavigationRailItemConfig, NavigationRailSelectEvent, NavigationRailEvents } from "./navigation-rail/types.js";
+export { default as createProgress } from "./progress/index.js";
+export { default as createLoadingIndicator } from "./loading-indicator/index.js";
+export { default as createSplitButton } from "./split-button/index.js";
+export { default as createRadios } from "./radios/index.js";
+export { default as createSearch } from "./search/index.js";
+export { default as createSelect } from "./select/index.js";
+export { default as createSlider } from "./slider/index.js";
+export { default as createSnackbar } from "./snackbar/index.js";
+export { clearSnackbars } from "./snackbar/index.js";
+export { default as createSwitch } from "./switch/index.js";
+export { default as createTabs } from "./tabs/index.js";
+export { createTab } from "./tabs/tab.js";
+export { default as createTextField } from "./text-field/index.js";
+export { default as createTimePicker } from "./timepicker/index.js";
+export { default as createToolbar } from "./toolbar/index.js";
+export { default as createTopAppBar } from "./top-app-bar/index.js";
+export { default as createTooltip } from "./tooltip/index.js";
+export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content.js";
+export type { BadgeConfig, BadgeComponent, BadgeVariant } from "./badge/types.js";
+export type { BottomAppBarConfig, BottomAppBarComponent, } from "./bottom-app-bar/types.js";
+export type { BottomSheetConfig, BottomSheetComponent, BottomSheetVariant, BottomSheetState, BottomSheetStateEvent, BottomSheetEventHandlers, } from "./bottom-sheet/types.js";
+export type { SideSheetConfig, SideSheetComponent, SideSheetVariant, SideSheetPosition, SideSheetEventHandlers, } from "./side-sheet/types.js";
+export type { ButtonConfig, ButtonComponent, ButtonVariant, } from "./button/types.js";
+export type { ButtonGroupConfig, ButtonGroupComponent, ButtonGroupItemConfig, ButtonGroupEvent, ButtonGroupEventType, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity, } from "./button-group/types.js";
+export type { CardConfig, CardVariant, } from "./card/types.js";
+export type { CarouselConfig, CarouselComponent, CarouselVariant } from "./carousel/types.js";
+export type { CheckboxConfig, CheckboxComponent } from "./checkbox/types.js";
+export type { ChipConfig, ChipComponent, ChipType, ChipEvents, ChipChangePayload, AssistChipConfig, FilterChipConfig, InputChipConfig, SuggestionChipConfig, ChipsConfig, ChipsComponent, } from "./chips/types.js";
+export type { DatePickerConfig, DatePickerComponent, DatePickerVariant } from "./datepicker/types.js";
+export type { DialogConfig, DialogComponent } from "./dialog/types.js";
+export type { DrawerConfig, DrawerComponent, DrawerVariant, DrawerPosition, DrawerItemConfig, DrawerSelectEvent, } from "./drawer/types.js";
+export type { DividerConfig } from "./divider/config.js";
+export type { DividerComponent } from "./divider/types.js";
+export type { FabConfig, FabComponent, FabVariant } from "./fab/types.js";
+export type { ExtendedFabConfig, ExtendedFabComponent, ExtendedFabVariant, } from "./extended-fab/types.js";
+export type { IconButtonConfig, IconButtonComponent, } from "./icon-button/types.js";
+export type { IconButtonVariant } from "./icon-button/constants.js";
+export type { ListConfig, ListItem, ListSlot, ListComponent, SelectEvent as ListSelectEvent, LoadEvent, } from "./list/types.js";
+export type { MenuConfig, MenuVariant, MenuComponent, MenuItem } from "./menu/types.js";
+export type { SplitButtonConfig, SplitButtonComponent, SplitButtonVariant, } from "./split-button/types.js";
+export type { LoadingIndicatorConfig, LoadingIndicatorComponent, } from "./loading-indicator/types.js";
+export type { ProgressConfig, ProgressVariant, ProgressComponent, ProgressShape, } from "./progress/types.js";
+export type { RadiosConfig, RadiosComponent, RadioOptionConfig, } from "./radios/types.js";
+export type { SearchConfig, SearchComponent, SearchVariant } from "./search/types.js";
+export type { SelectConfig, SelectVariant, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent, } from "./select/types.js";
+export type { SliderConfig, SliderComponent, SliderEvent, } from "./slider/types.js";
+export type { SnackbarConfig, SnackbarComponent } from "./snackbar/types.js";
+export type { SwitchConfig, SwitchComponent } from "./switch/types.js";
+export type { TabsConfig, TabsVariant, TabsComponent, TabConfig, TabComponent, } from "./tabs/types.js";
+export type { TextFieldConfig, TextFieldVariant, TextFieldComponent, } from "./text-field/types.js";
+export type { TimePickerConfig, TimePickerComponent } from "./timepicker/types.js";
+export type { FabMenuConfig, FabMenuComponent, FabMenuEvents, FabMenuItem } from "./fab-menu/types.js";
+export type { ToolbarConfig, ToolbarComponent, ToolbarEvents, ToolbarItem, } from "./toolbar/types.js";
+export type { ToolbarVariant } from "./toolbar/constants.js";
+export type { TopAppBarConfig, TopAppBarComponent, } from "./top-app-bar/types.js";
+export type { TooltipConfig, TooltipVariant, TooltipComponent } from "./tooltip/types.js";

package/dist/components/index.js

@@ -0,0 +1,40 @@
+export { default as createBadge } from "./badge/index.js";
+export { default as createBottomAppBar } from "./bottom-app-bar/index.js";
+export { default as createBottomSheet } from "./bottom-sheet/index.js";
+export { default as createSideSheet } from "./side-sheet/index.js";
+export { default as createButton } from "./button/index.js";
+export { default as createButtonGroup } from "./button-group/index.js";
+export { default as createCard } from "./card/index.js";
+export { default as createCarousel } from "./carousel/index.js";
+export { default as createCheckbox } from "./checkbox/index.js";
+export { createAssistChip, createFilterChip, createInputChip, createSuggestionChip, createChips } from "./chips/index.js";
+export { default as createDatePicker } from "./datepicker/index.js";
+export { default as createDialog } from "./dialog/index.js";
+export { createDivider } from "./divider/index.js";
+export { default as createDrawer } from "./drawer/index.js";
+export { default as createFab } from "./fab/index.js";
+export { default as createFabMenu } from "./fab-menu/index.js";
+export { default as createExtendedFab } from "./extended-fab/index.js";
+export { default as createIconButton } from "./icon-button/index.js";
+export { default as createList } from "./list/index.js";
+export { default as createMenu } from "./menu/index.js";
+export { default as createNavigationBar } from "./navigation-bar/index.js";
+export { default as createNavigationRail } from "./navigation-rail/index.js";
+export { default as createProgress } from "./progress/index.js";
+export { default as createLoadingIndicator } from "./loading-indicator/index.js";
+export { default as createSplitButton } from "./split-button/index.js";
+export { default as createRadios } from "./radios/index.js";
+export { default as createSearch } from "./search/index.js";
+export { default as createSelect } from "./select/index.js";
+export { default as createSlider } from "./slider/index.js";
+export { default as createSnackbar } from "./snackbar/index.js";
+export { clearSnackbars } from "./snackbar/index.js";
+export { default as createSwitch } from "./switch/index.js";
+export { default as createTabs } from "./tabs/index.js";
+export { createTab } from "./tabs/tab.js";
+export { default as createTextField } from "./text-field/index.js";
+export { default as createTimePicker } from "./timepicker/index.js";
+export { default as createToolbar } from "./toolbar/index.js";
+export { default as createTopAppBar } from "./top-app-bar/index.js";
+export { default as createTooltip } from "./tooltip/index.js";
+export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content.js";