mtrl 0.3.0 → 0.3.2

package/src/components/sheet/index.ts

@@ -1,4 +1,12 @@
 // src/components/sheet/index.ts
 export { default } from './sheet';
-export { SHEET_VARIANTS, SHEET_POSITIONS, SHEET_EVENTS } from './constants';
-export { SheetConfig, SheetComponent } from './types';
+export { 
+  // Constants
+  SHEET_VARIANTS, 
+  SHEET_POSITIONS, 
+  SHEET_EVENTS,
+  
+  // Types
+  SheetConfig, 
+  SheetComponent 
+} from './types';

package/src/components/sheet/sheet.ts

@@ -17,8 +17,7 @@ import {
   withGestures
 } from './features';
 import { withAPI } from './api';
-import { SheetConfig } from './types';
-import { SHEET_VARIANTS, SHEET_POSITIONS } from './constants';
+import { SheetConfig, SHEET_VARIANTS, SHEET_POSITIONS } from './types';
 import { createBaseConfig, getElementConfig, getApiConfig } from './config';
 
 /**

package/src/components/sheet/types.ts

@@ -1,5 +1,33 @@
 // src/components/sheet/types.ts
-import { SHEET_VARIANTS, SHEET_POSITIONS } from './constants';
+
+/**
+ * Sheet variants
+ */
+export const SHEET_VARIANTS = {
+  STANDARD: 'standard',
+  MODAL: 'modal',
+  EXPANDED: 'expanded'
+} as const;
+
+/**
+ * Sheet positions
+ */
+export const SHEET_POSITIONS = {
+  BOTTOM: 'bottom',
+  TOP: 'top',
+  LEFT: 'left',
+  RIGHT: 'right'
+} as const;
+
+/**
+ * Sheet events
+ */
+export const SHEET_EVENTS = {
+  OPEN: 'open',
+  CLOSE: 'close',
+  DRAG_START: 'dragstart',
+  DRAG_END: 'dragend'
+} as const;
 
 /**
  * Configuration interface for the Sheet component

package/src/components/slider/api.ts

@@ -1,6 +1,6 @@
 // src/components/slider/api.ts
 import { SliderComponent, SliderEvent } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './types';
 
 /**
  * API options interface - structured by feature area

package/src/components/slider/config.ts

@@ -4,7 +4,7 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { SliderConfig } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from './types';
 import { createSliderSchema } from './schema';
 
 /**

package/src/components/slider/features/controller.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/controller.ts
-import { SLIDER_EVENTS } from '../constants';
+import { SLIDER_EVENTS } from '../types';
 import { SliderConfig } from '../types';
 import { createHandlers } from './handlers';
 

package/src/components/slider/features/handlers.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/handlers.ts
-import { SLIDER_EVENTS } from '../constants';
+import { SLIDER_EVENTS } from '../types';
 import { SliderConfig, SliderEvent } from '../types';
 
 /**

package/src/components/slider/features/states.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/states.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from '../types';
 import { SliderConfig } from '../types';
 
 /**

package/src/components/slider/index.ts

@@ -3,8 +3,15 @@
 // Export main component creator
 export { default } from './slider';
 
-// Export constants
-export { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
-
-// Export types for TypeScript users
-export type { SliderConfig, SliderComponent, SliderEvent } from './types';
+// Export constants and types 
+export { 
+  // Constants
+  SLIDER_COLORS,
+  SLIDER_SIZES,
+  SLIDER_EVENTS,
+  
+  // Types
+  type SliderConfig, 
+  type SliderComponent, 
+  type SliderEvent 
+} from './types';

package/src/components/slider/schema.ts

@@ -22,7 +22,7 @@ export function createSliderSchema(component, config: SliderConfig) {
   // Calculate initial position
   const valuePercent = ((value - min) / (max - min)) * 100;
   
-  // Return base structure definition formatted for createStructure
+  // Return base structure definition formatted for createLayout
   return {
     element: {
       options: {

package/src/components/slider/types.ts

@@ -1,5 +1,36 @@
 // src/components/slider/types.ts
 
+/**
+ * Available slider color variants
+ */
+export const SLIDER_COLORS = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  ERROR: 'error'
+} as const;
+
+/**
+ * Available slider size variants
+ */
+export const SLIDER_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+} as const;
+
+/**
+ * Available slider events
+ */
+export const SLIDER_EVENTS = {
+  CHANGE: 'change',
+  INPUT: 'input',
+  FOCUS: 'focus',
+  BLUR: 'blur',
+  START: 'start',
+  END: 'end'
+} as const;
+
 /**
  * Available slider color variants
  */

package/src/components/snackbar/index.ts

@@ -1,3 +1,9 @@
 // src/components/snackbar/index.ts
 export { default } from './snackbar'
-export { SnackbarConfig, SnackbarComponent } from './types'
+export { 
+  SnackbarConfig, 
+  SnackbarComponent,
+  SNACKBAR_VARIANTS,
+  SNACKBAR_POSITIONS,
+  SNACKBAR_STATES
+} from './types'

package/src/components/snackbar/types.ts

@@ -5,16 +5,41 @@
  */
 export type SnackbarVariant = 'basic' | 'action';
 
+/**
+ * Snackbar visual variants
+ */
+export const SNACKBAR_VARIANTS = {
+  BASIC: 'basic',
+  ACTION: 'action' // With action button
+} as const;
+
 /**
  * Available snackbar positions
  */
 export type SnackbarPosition = 'center' | 'start' | 'end';
 
+/**
+ * Snackbar display positions
+ */
+export const SNACKBAR_POSITIONS = {
+  CENTER: 'center',
+  START: 'start',
+  END: 'end'
+} as const;
+
 /**
  * Snackbar visibility states
  */
 export type SnackbarState = 'visible' | 'hidden';
 
+/**
+ * Snackbar state classes
+ */
+export const SNACKBAR_STATES = {
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden'
+} as const;
+
 /**
  * Available snackbar event types
  */

package/src/components/switch/index.ts

@@ -1,4 +1,8 @@
 // src/components/switch/index.ts
 export { default } from './switch'
-export { SwitchConfig, SwitchComponent } from './types'
+export { 
+  SwitchConfig, 
+  SwitchComponent,
+  SWITCH_LABEL_POSITION
+} from './types'
 export { withSupportingText, SupportingTextComponent } from './features'

package/src/components/switch/types.ts

@@ -2,6 +2,19 @@
 
 export type SwitchPosition = 'center' | 'start' | 'end';
 
+/**
+ * Switch label position types
+ */
+export type SwitchLabelPosition = 'start' | 'end';
+
+/**
+ * Switch label positions
+ */
+export const SWITCH_LABEL_POSITION = {
+  START: 'start',
+  END: 'end'
+} as const;
+
 /**
  * Configuration interface for the Switch component
  */

package/src/components/tabs/tab-api.ts

@@ -1,6 +1,6 @@
 // src/components/tabs/tab-api.ts
 import { TabComponent } from './types';
-import { BadgeComponent } from '../badge/types';
+import type { BadgeComponent } from '../badge';
 import createBadge from '../badge';
 
 const TAB_LAYOUT = {

package/src/components/tabs/types.ts

@@ -1,5 +1,5 @@
 // src/components/tabs/types.ts
-import { BadgeComponent } from '../badge/types';
+import type { BadgeComponent } from '../badge';
 import { TabIndicator } from './indicator';
 
 /**

package/src/components/textfield/index.ts

@@ -1,3 +1,9 @@
 // src/components/textfield/index.ts
 export { default } from './textfield'
-export { TextfieldConfig, TextfieldComponent } from './types'
+export { 
+  TextfieldConfig, 
+  TextfieldComponent,
+  TEXTFIELD_VARIANTS,
+  TEXTFIELD_SIZES,
+  TEXTFIELD_TYPES
+} from './types'

package/src/components/textfield/types.ts

@@ -5,6 +5,28 @@
  */
 export type TextfieldVariant = 'filled' | 'outlined';
 
+/**
+ * Textfield variant constants
+ */
+export const TEXTFIELD_VARIANTS = {
+  FILLED: 'filled',
+  OUTLINED: 'outlined'
+} as const;
+
+/**
+ * Available Textfield sizes
+ */
+export type TextfieldSize = 'small' | 'medium' | 'large';
+
+/**
+ * Textfield size constants
+ */
+export const TEXTFIELD_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+} as const;
+
 /**
  * Available Textfield states
  */
@@ -15,6 +37,20 @@ export type TextfieldStates = 'active' | 'inactive' | 'disabled';
  */
 export type TextfieldTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'multiline';
 
+/**
+ * Textfield type constants
+ */
+export const TEXTFIELD_TYPES = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+  EMAIL: 'email',
+  NUMBER: 'number',
+  TEL: 'tel',
+  URL: 'url',
+  SEARCH: 'search',
+  MULTILINE: 'multiline'
+} as const;
+
 /**
  * Configuration interface for the Textfield component
  */

package/src/components/tooltip/api.ts

@@ -1,6 +1,10 @@
 // src/components/tooltip/api.ts
-import { TooltipComponent } from './types';
-import { TOOLTIP_POSITIONS, DEFAULT_OFFSET, DEFAULT_ARROW_SIZE } from './config';
+import { 
+  TooltipComponent, 
+  TOOLTIP_POSITIONS, 
+  DEFAULT_OFFSET, 
+  DEFAULT_ARROW_SIZE 
+} from './types';
 
 interface ApiOptions {
   lifecycle: {

package/src/components/tooltip/config.ts

@@ -3,34 +3,15 @@ import {
   createComponentConfig, 
   createElementConfig
 } from '../../core/config/component-config';
-import { TooltipConfig } from './types';
-
-
-export const TOOLTIP_POSITIONS = {
-  TOP: 'top',
-  RIGHT: 'right',
-  BOTTOM: 'bottom',
-  LEFT: 'left',
-  TOP_START: 'top-start',
-  TOP_END: 'top-end',
-  RIGHT_START: 'right-start',
-  RIGHT_END: 'right-end',
-  BOTTOM_START: 'bottom-start',
-  BOTTOM_END: 'bottom-end',
-  LEFT_START: 'left-start',
-  LEFT_END: 'left-end'
-}
-
-export const TOOLTIP_VARIANTS = {
-  DEFAULT: 'default',
-  RICH: 'rich',
-  PLAIN: 'plain'
-}
-
-export const DEFAULT_SHOW_DELAY = 300
-export const DEFAULT_HIDE_DELAY = 100
-export const DEFAULT_OFFSET = 8
-export const DEFAULT_ARROW_SIZE = 8
+import { 
+  TooltipConfig, 
+  TOOLTIP_POSITIONS,
+  TOOLTIP_VARIANTS,
+  DEFAULT_SHOW_DELAY,
+  DEFAULT_HIDE_DELAY,
+  DEFAULT_OFFSET,
+  DEFAULT_ARROW_SIZE
+} from './types';
 
 /**
  * Default configuration for the Tooltip component

package/src/components/tooltip/index.ts

@@ -1,3 +1,12 @@
 // src/components/tooltip/index.ts
 export { default } from './tooltip';
-export { TooltipConfig, TooltipComponent } from './types';
+export { 
+  TooltipConfig, 
+  TooltipComponent, 
+  TOOLTIP_POSITIONS, 
+  TOOLTIP_VARIANTS,
+  DEFAULT_SHOW_DELAY,
+  DEFAULT_HIDE_DELAY,
+  DEFAULT_OFFSET,
+  DEFAULT_ARROW_SIZE
+} from './types';

package/src/components/tooltip/types.ts

@@ -1,12 +1,47 @@
 // src/components/tooltip/types.ts
 
 /**
- * Available Textfield variants
+ * Tooltip positions
+ */
+export const TOOLTIP_POSITIONS = {
+  TOP: 'top',
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  LEFT: 'left',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end',
+  RIGHT_START: 'right-start',
+  RIGHT_END: 'right-end',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end',
+  LEFT_START: 'left-start',
+  LEFT_END: 'left-end'
+} as const;
+
+/**
+ * Tooltip variants
+ */
+export const TOOLTIP_VARIANTS = {
+  DEFAULT: 'default',
+  RICH: 'rich',
+  PLAIN: 'plain'
+} as const;
+
+/**
+ * Default values
+ */
+export const DEFAULT_SHOW_DELAY = 300;
+export const DEFAULT_HIDE_DELAY = 100;
+export const DEFAULT_OFFSET = 8;
+export const DEFAULT_ARROW_SIZE = 8;
+
+/**
+ * Available Tooltip variants
  */
 export type TooltipVariant = 'default' | 'rich' | 'plain';
 
 /**
- * Available Textfield states
+ * Available Tooltip positions
  */
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
 
@@ -38,7 +73,7 @@ export interface TooltipConfig {
    * Tooltip variant that determines visual styling
    * @default 'default'
    */
-  variant?: TooltipVariants | string;
+  variant?: TooltipVariant | string;
   
   /** 
    * Whether the tooltip is initially visible

package/src/index.ts

@@ -1,32 +1,130 @@
 // src/index.ts
-export { createElement } from './core/dom/create'
-export { default as createLayout } from './core/layout'
-export { default as createButton } from './components/button'
-export { default as createFab } from './components/fab'
-export { default as createExtendedFab } from './components/extended-fab'
-export { default as createSegmentedButton } from './components/segmented-button'
-export { default as createBottomAppBar } from './components/bottom-app-bar'
-export { default as createBadge } from './components/badge'
-export { default as createCard } from './components/card'
-export { default as createCarousel } from './components/carousel'
-export { default as createCheckbox } from './components/checkbox'
-export { default as createChip } from './components/chip'
-export { default as createDatePicker } from './components/datepicker'
-export { default as createDialog } from './components/dialog'
-export { default as createDivider } from './components/divider'
-export { default as createMenu } from './components/menu'
-export { default as createNavigation } from './components/navigation'
-export { default as createNavigationSystem } from './components/navigation'
-export { default as createProgress } from './components/progress'
-export { default as createRadios } from './components/radios'
-export { default as createSearch } from './components/search'
-export { default as createSheet } from './components/sheet'
-export { default as createSlider } from './components/slider'
-export { default as createSnackbar } from './components/snackbar'
-export { default as createSwitch } from './components/switch'
-export { default as createTabs } from './components/tabs'
-export { default as createTextfield } from './components/textfield'
-export { default as createTimePicker } from './components/timepicker'
-export { default as createTopAppBar } from './components/top-app-bar'
-export { default as createTooltip } from './components/tooltip'
-export { default as createList } from './components/list'
+/**
+ * Main mtrl library exports
+ * 
+ * @packageDocumentation
+ */
+
+// Direct component imports
+import { createElement } from './core/dom/create';
+import createLayout from './core/layout';
+import createBadge from './components/badge';
+import createBottomAppBar from './components/bottom-app-bar';
+import createButton from './components/button';
+import createCard from './components/card';
+import { 
+  createCardContent, 
+  createCardHeader, 
+  createCardActions, 
+  createCardMedia 
+} from './components/card/content';
+import createCarousel from './components/carousel';
+import createCheckbox from './components/checkbox';
+import { createChip, createChips } from './components/chips';
+import createDatePicker from './components/datepicker';
+import createDialog from './components/dialog';
+import { createDivider } from './components/divider';
+import createFab from './components/fab';
+import createExtendedFab from './components/extended-fab';
+import createList, { createListItem } from './components/list';
+import createMenu from './components/menu';
+import createNavigation, { createNavigationSystem } from './components/navigation';
+import createProgress from './components/progress';
+import createRadios from './components/radios';
+import createSearch from './components/search';
+import createSegmentedButton, { createSegment } from './components/segmented-button';
+import createSheet from './components/sheet';
+import createSlider from './components/slider';
+import createSnackbar from './components/snackbar';
+import createSwitch from './components/switch';
+import createTabs, { createTab } from './components/tabs';
+import createTextfield from './components/textfield';
+import createTimePicker from './components/timepicker';
+import createTopAppBar from './components/top-app-bar';
+import createTooltip from './components/tooltip';
+
+// Export all "create*" functions
+export {
+  createElement,
+  createLayout,
+  createBadge,
+  createBottomAppBar,
+  createButton,
+  createCard,
+  createCardContent, 
+  createCardHeader, 
+  createCardActions, 
+  createCardMedia,
+  createCarousel,
+  createCheckbox,
+  createChip,
+  createChipSet,
+  createDatePicker,
+  createDialog,
+  createDivider,
+  createFab,
+  createExtendedFab,
+  createList,
+  createListItem,
+  createMenu,
+  createNavigation,
+  createNavigationSystem,
+  createProgress,
+  createRadios,
+  createSearch,
+  createSegmentedButton,
+  createSegment,
+  createSheet,
+  createSlider,
+  createSnackbar,
+  createSwitch,
+  createTabs,
+  createTab,
+  createTextfield,
+  createTimePicker,
+  createTopAppBar,
+  createTooltip
+};
+
+// Export all "f*" aliases
+export {
+  createElement as fElement,
+  createLayout as fLayout,
+  createBadge as fBadge,
+  createBottomAppBar as fBottomAppBar,
+  createButton as fButton,
+  createCard as fCard,
+  createCardContent as fCardContent, 
+  createCardHeader as fCardHeader, 
+  createCardActions as fCardActions, 
+  createCardMedia as fCardMedia,
+  createCarousel as fCarousel,
+  createCheckbox as fCheckbox,
+  createChip as fChip,
+  createChips as fChips,
+  createDatePicker as fDatePicker,
+  createDialog as fDialog,
+  createDivider as fDivider,
+  createFab as fFab,
+  createExtendedFab as fExtendedFab,
+  createList as fList,
+  createListItem as fListItem,
+  createMenu as fMenu,
+  createNavigation as fNavigation,
+  createNavigationSystem as fNavigationSystem,
+  createProgress as fProgress,
+  createRadios as fRadios,
+  createSearch as fSearch,
+  createSegmentedButton as fSegmentedButton,
+  createSegment as fSegment,
+  createSheet as fSheet,
+  createSlider as fSlider,
+  createSnackbar as fSnackbar,
+  createSwitch as fSwitch,
+  createTabs as fTabs,
+  createTab as fTab,
+  createTextfield as fTextfield,
+  createTimePicker as fTimePicker,
+  createTopAppBar as fTopAppBar,
+  createTooltip as fTooltip
+};