mtrl 0.6.1 → 0.6.3

package/README.md

@@ -61,6 +61,45 @@ yarn add mtrl
 bun add mtrl
 ```
 
+## Tree-Shaking Optimized Imports
+
+mtrl is optimized for tree-shaking. Constants are exported separately from component creators to minimize bundle size.
+
+### Import Patterns
+
+| Import Type | Path |
+|-------------|------|
+| Component creators | `import { createButton } from 'mtrl'` |
+| Button constants | `import { BUTTON_VARIANTS } from 'mtrl/components/button/constants'` |
+| Slider constants | `import { SLIDER_SIZES } from 'mtrl/components/slider/constants'` |
+| Card constants | `import { CARD_VARIANTS } from 'mtrl/components/card/constants'` |
+| Direct component import | `import createButton from 'mtrl/components/button'` |
+| Core utilities | `import { addClass, removeClass } from 'mtrl/core/dom'` |
+
+### Example
+
+```typescript
+// ✅ Optimal - only imports what you need
+import { createButton } from 'mtrl';
+import { BUTTON_VARIANTS, BUTTON_SIZES } from 'mtrl/components/button/constants';
+
+const button = createButton({
+  text: 'Submit',
+  variant: BUTTON_VARIANTS.FILLED,
+  size: BUTTON_SIZES.LARGE
+});
+
+// ✅ Also optimal - direct component import
+import createSlider from 'mtrl/components/slider';
+import { SLIDER_COLORS } from 'mtrl/components/slider/constants';
+
+const slider = createSlider({
+  color: SLIDER_COLORS.PRIMARY
+});
+```
+
+**Note:** Constants are NOT exported from main entry points. Always import them from the component's constants file.
+
 ## Component Architecture
 
 Let's look at how mtrl components are constructed:

package/dist/README.md

@@ -61,6 +61,45 @@ yarn add mtrl
 bun add mtrl
 ```
 
+## Tree-Shaking Optimized Imports
+
+mtrl is optimized for tree-shaking. Constants are exported separately from component creators to minimize bundle size.
+
+### Import Patterns
+
+| Import Type | Path |
+|-------------|------|
+| Component creators | `import { createButton } from 'mtrl'` |
+| Button constants | `import { BUTTON_VARIANTS } from 'mtrl/components/button/constants'` |
+| Slider constants | `import { SLIDER_SIZES } from 'mtrl/components/slider/constants'` |
+| Card constants | `import { CARD_VARIANTS } from 'mtrl/components/card/constants'` |
+| Direct component import | `import createButton from 'mtrl/components/button'` |
+| Core utilities | `import { addClass, removeClass } from 'mtrl/core/dom'` |
+
+### Example
+
+```typescript
+// ✅ Optimal - only imports what you need
+import { createButton } from 'mtrl';
+import { BUTTON_VARIANTS, BUTTON_SIZES } from 'mtrl/components/button/constants';
+
+const button = createButton({
+  text: 'Submit',
+  variant: BUTTON_VARIANTS.FILLED,
+  size: BUTTON_SIZES.LARGE
+});
+
+// ✅ Also optimal - direct component import
+import createSlider from 'mtrl/components/slider';
+import { SLIDER_COLORS } from 'mtrl/components/slider/constants';
+
+const slider = createSlider({
+  color: SLIDER_COLORS.PRIMARY
+});
+```
+
+**Note:** Constants are NOT exported from main entry points. Always import them from the component's constants file.
+
 ## Component Architecture
 
 Let's look at how mtrl components are constructed:

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

@@ -4,5 +4,5 @@
  * @description A small element that communicates status, shows a count,
  * or highlights an element requiring attention.
  */
-export { default } from './badge';
-export type { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition } from './types';
+export { default } from "./badge";
+export type { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition, } from "./types";

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

@@ -4,3 +4,4 @@
  */
 export { default } from "./button";
 export type { ButtonConfig, ButtonComponent, ButtonVariant } from "./types";
+export type { ButtonSize, ButtonShape } from "./constants";

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

@@ -69,4 +69,3 @@ export { CardVariant, CardElevationLevel, CardSchema, CardHeaderConfig, CardCont
 export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./content";
 export { withAPI } from "./api";
 export { withLoading, withExpandable, withSwipeable, withElevation, } from "./features";
-export { CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS, CARD_ASPECT_RATIOS, CARD_ACTION_ALIGNMENT, CARD_MEDIA_POSITION, CARD_CLASSES, } from "./constants";

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

@@ -1,4 +1,3 @@
-export { default as createChip } from './chip';
-export { default as createChips } from './chips';
-export * from './constants';
-export type { ChipConfig, ChipComponent, ChipVariant, ChipsConfig, ChipsComponent } from './types';
+export { default as createChip } from "./chip";
+export { default as createChips } from "./chips";
+export type { ChipConfig, ChipComponent, ChipVariant, ChipsConfig, ChipsComponent, } from "./types";

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

@@ -1,3 +1,3 @@
-export { default } from './datepicker';
-export type { DatePickerConfig, DatePickerComponent, DatePickerVariant, DatePickerView, DatePickerSelectionMode } from './types';
-export { DEFAULT_DATE_FORMAT } from './types';
+export { default } from "./datepicker";
+export type { DatePickerConfig, DatePickerComponent, DatePickerVariant, DatePickerView, DatePickerSelectionMode, } from "./types";
+export { DEFAULT_DATE_FORMAT } from "./types";

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

@@ -10,5 +10,5 @@
  * @module components/dialog
  * @category Components
  */
-export { default } from './dialog';
-export { DialogConfig, DialogComponent, DialogButton, DialogEvent, DialogConfirmOptions, DialogSize, DialogAnimation, DialogFooterAlignment, DialogEventType } from './types';
+export { default } from "./dialog";
+export { DialogConfig, DialogComponent, DialogButton, DialogEvent, DialogConfirmOptions, DialogSize, DialogAnimation, DialogFooterAlignment, DialogEventType, } from "./types";

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

@@ -31,5 +31,5 @@
  *
  * @category Components
  */
-export { default, default as createFab } from './fab';
-export { FabConfig, FabComponent, FabVariant, FabSize, FabPosition } from './types';
+export { default, default as createFab } from "./fab";
+export { FabConfig, FabComponent, FabVariant, FabSize, FabPosition, } from "./types";

package/dist/components/index.d.ts

@@ -1,54 +1,12 @@
 /**
  * Component library exports
  *
- * This file re-exports all components and their associated types, constants,
- * and utilities from the mtrl library. Both named exports and default exports
- * are handled to provide a consistent public API while maintaining tree-shaking
- * compatibility.
+ * 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 { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./list/constants";
-export type { ListConfig, ListComponent, SelectEvent as ListSelectEvent, // Rename to avoid collision
-LoadEvent, } from "./list/types";
-export { BUTTON_GROUP_VARIANTS, BUTTON_GROUP_ORIENTATIONS, BUTTON_GROUP_DENSITY, BUTTON_GROUP_EVENTS, BUTTON_GROUP_DEFAULTS, BUTTON_GROUP_CLASSES, BUTTON_GROUP_HEIGHTS, BUTTON_GROUP_RADII, } from "./button-group/constants";
-export type { ButtonGroupConfig, ButtonGroupComponent, ButtonGroupItemConfig, ButtonGroupEvent, ButtonGroupEventType, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity, } from "./button-group/types";
-export { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES, } from "./select/constants";
-export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, // Keep the original name since select is more commonly used
-SelectChangeEvent, } from "./select/types";
-export * from "./badge";
-export * from "./bottom-app-bar";
-export * from "./button";
-export * from "./button-group";
-export * from "./card";
-export * from "./carousel";
-export * from "./checkbox";
-export * from "./chips";
-export * from "./datepicker";
-export * from "./dialog";
-export * from "./fab";
-export * from "./extended-fab";
-export * from "./icon-button";
-export * from "./menu";
-export * from "./navigation";
-export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS, } from "./progress/constants";
-export type { ProgressConfig, ProgressComponent, ProgressShape, } from "./progress/types";
-export * from "./radios";
-export * from "./search";
-export * from "./segmented-button";
-export * from "./sheet";
-export * from "./slider";
-export * from "./snackbar";
-export * from "./switch";
-export * from "./tabs";
-export * from "./textfield";
-export * from "./timepicker";
-export * from "./top-app-bar";
-export * from "./tooltip";
-export { createDivider } from "./divider";
-export type { DividerConfig } from "./divider/config";
-export type { DividerComponent } from "./divider/types";
-export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content";
 export { default as createBadge } from "./badge";
 export { default as createBottomAppBar } from "./bottom-app-bar";
 export { default as createButton } from "./button";
@@ -59,6 +17,7 @@ export { default as createCheckbox } from "./checkbox";
 export { createChip, createChips } from "./chips";
 export { default as createDatePicker } from "./datepicker";
 export { default as createDialog } from "./dialog";
+export { createDivider } from "./divider";
 export { default as createFab } from "./fab";
 export { default as createExtendedFab } from "./extended-fab";
 export { default as createIconButton } from "./icon-button";
@@ -82,3 +41,36 @@ export { default as createTextfield } from "./textfield";
 export { default as createTimePicker } from "./timepicker";
 export { default as createTopAppBar } from "./top-app-bar";
 export { default as createTooltip } from "./tooltip";
+export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content";
+export type { BadgeConfig, BadgeComponent } from "./badge/types";
+export type { BottomAppBarConfig, BottomAppBar } from "./bottom-app-bar/types";
+export type { ButtonConfig, ButtonComponent, ButtonVariant, } from "./button/types";
+export type { ButtonGroupConfig, ButtonGroupComponent, ButtonGroupItemConfig, ButtonGroupEvent, ButtonGroupEventType, ButtonGroupVariant, ButtonGroupOrientation, ButtonGroupDensity, } from "./button-group/types";
+export type { CardSchema } from "./card/types";
+export type { CarouselConfig, CarouselComponent } from "./carousel/types";
+export type { CheckboxConfig, CheckboxComponent } from "./checkbox/types";
+export type { ChipConfig, ChipComponent, ChipVariant, ChipsConfig, ChipsComponent, } from "./chips/types";
+export type { DatePickerConfig, DatePickerComponent } from "./datepicker/types";
+export type { DialogConfig, DialogComponent } from "./dialog/types";
+export type { DividerConfig } from "./divider/config";
+export type { DividerComponent } from "./divider/types";
+export type { FabConfig, FabComponent } from "./fab/types";
+export type { ExtendedFabConfig, ExtendedFabComponent, } from "./extended-fab/types";
+export type { IconButtonConfig, IconButtonComponent, } from "./icon-button/types";
+export type { ListConfig, ListComponent, SelectEvent as ListSelectEvent, LoadEvent, } from "./list/types";
+export type { MenuConfig, MenuComponent, MenuItem } from "./menu/types";
+export type { NavigationConfig, NavigationComponent, NavItemConfig, } from "./navigation/types";
+export type { ProgressConfig, ProgressComponent, ProgressShape, } from "./progress/types";
+export type { RadiosConfig, RadiosComponent, RadioOptionConfig, } from "./radios/types";
+export type { SearchConfig, SearchComponent } from "./search/types";
+export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent, } from "./select/types";
+export type { SegmentedButtonConfig, SegmentedButtonComponent, } from "./segmented-button/types";
+export type { SheetConfig, SheetComponent } from "./sheet/types";
+export type { SliderConfig, SliderComponent, SliderEvent, } from "./slider/types";
+export type { SnackbarConfig, SnackbarComponent } from "./snackbar/types";
+export type { SwitchConfig, SwitchComponent } from "./switch/types";
+export type { TabsConfig, TabsComponent, TabConfig, TabComponent, } from "./tabs/types";
+export type { TextfieldConfig, TextfieldComponent } from "./textfield/types";
+export type { TimePickerConfig, TimePickerComponent } from "./timepicker/types";
+export type { TopAppBarConfig, TopAppBar } from "./top-app-bar/types";
+export type { TooltipConfig, TooltipComponent } from "./tooltip/types";

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

@@ -1,3 +1,2 @@
-export { default } from './progress';
-export { ProgressConfig, ProgressComponent, ProgressShape } from './types';
-export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS } from './constants';
+export { default } from "./progress";
+export { ProgressConfig, ProgressComponent, ProgressShape } from "./types";

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

@@ -1,3 +1,2 @@
 export { default } from "./search";
 export type { SearchConfig, SearchComponent, SearchEvent, SearchState, SearchViewMode, SearchEventType, SearchSuggestion, SearchTrailingItem, } from "./types";
-export { SEARCH_STATES, SEARCH_VIEW_MODES, SEARCH_EVENTS, SEARCH_ICONS, SEARCH_DEFAULTS, SEARCH_CLASSES, SEARCH_MEASUREMENTS, SEARCH_KEYS, } from "./constants";

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

@@ -1,4 +1,3 @@
-export { default, default as createSegmentedButton } from './segmented-button';
-export { SelectionMode, Density } from './types';
-export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment } from './types';
-export { SEGMENTED_BUTTON_MODES, SEGMENTED_BUTTON_DENSITY, SEGMENTED_BUTTON_EVENTS, SEGMENTED_BUTTON_DEFAULTS, SEGMENTED_BUTTON_ICONS, SEGMENTED_BUTTON_CLASSES } from './constants';
+export { default, default as createSegmentedButton } from "./segmented-button";
+export { SelectionMode, Density } from "./types";
+export type { SegmentedButtonConfig, SegmentedButtonComponent, SegmentConfig, Segment, } from "./types";

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

@@ -1,3 +1,2 @@
-export { default } from './slider';
-export { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS, SLIDER_POSITIONS, SLIDER_DEFAULTS, SLIDER_CLASSES } from './constants';
-export { type SliderConfig, type SliderComponent, type SliderEvent } from './types';
+export { default } from "./slider";
+export { type SliderConfig, type SliderComponent, type SliderEvent, } from "./types";

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

@@ -1,3 +1,2 @@
-export { default } from './snackbar';
-export { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS, SNACKBAR_STATES, SNACKBAR_EVENTS, SNACKBAR_DEFAULTS, SNACKBAR_CLASSES } from './constants';
-export { SnackbarConfig, SnackbarComponent } from './types';
+export { default } from "./snackbar";
+export { SnackbarConfig, SnackbarComponent } from "./types";

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

@@ -1,3 +1,2 @@
 export { default } from "./textfield";
-export { TEXTFIELD_VARIANTS, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES, TEXTFIELD_DENSITY, } from "./constants";
 export { TextfieldConfig, TextfieldComponent, TextfieldDensity } from "./types";