mtrl 0.3.0 → 0.3.1

package/CLAUDE.md

@@ -0,0 +1,33 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build & Development Commands
+- Build: `bun run build`
+- Dev server: `bun run dev`
+- Tests: `bun test`
+- Single test: `bun test test/components/button.test.ts`
+- Watch tests: `bun test --watch`
+- Test with UI: `bun test --watch --ui`
+- Test coverage: `bun test --coverage`
+- Docs: `bun run docs` (uses TypeDoc)
+
+## Code Conventions
+- Factory pattern: Use `createComponent` naming for component creators
+- Functional composition with pipe pattern
+- Follow BEM-style CSS naming: `mtrl-component__element--modifier`
+- Use TypeDoc-compatible comments for documentation
+- Use TypeScript with strict typing where possible
+- Error handling: Try/catch blocks for component creation
+- Import order: core modules first, then utility functions, local imports last
+- Components follow a standard structure in their directories (api.ts, config.ts, etc.)
+- Use ES6+ features with full browser compatibility
+
+## Test Conventions
+- Tests live in `test/components/` with `.test.ts` extension
+- Use JSDOM for DOM manipulation in tests
+- Create mock implementations to avoid circular dependencies
+- Test structure follows `describe/test` pattern
+- Test component creation, options, events, and state changes
+- Use `import type` to avoid circular dependencies in TypeScript tests
+- Test directory structure mirrors src directory structure

package/index.ts

@@ -1,7 +1,6 @@
 // index.js
 import {
   createLayout,
-  createStructure,
   createElement,
   createBadge,
   createBottomAppBar,
@@ -36,7 +35,6 @@ import {
 
 export {
   createLayout,
-  createStructure,
   createElement,
   createBadge,
   createBottomAppBar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
   "author": "floor",
   "license": "MIT License",
@@ -42,6 +42,8 @@
     "url": "https://github.com/floor/mtrl.git"
   },
   "devDependencies": {
+    "@types/jsdom": "^21.1.7",
+    "jsdom": "^26.0.0",
     "sass": "^1.85.1",
     "typedoc": "^0.27.9"
   }

package/src/components/navigation/index.ts

@@ -4,5 +4,8 @@ export {
   NavigationConfig,
   NavigationComponent,
   NavItemConfig,
-  NavGroupConfig
+  NavGroupConfig,
+  NAV_VARIANTS,
+  NAV_POSITIONS,
+  NAV_BEHAVIORS
 } from './types'

package/src/components/navigation/types.ts

@@ -6,18 +6,51 @@
  */
 export type NavVariant = 'rail' | 'drawer' | 'bar' | 'modal' | 'standard';
 
+/**
+ * Navigation variants enum
+ * @category Components
+ */
+export const NAV_VARIANTS: Record<string, NavVariant> = {
+  RAIL: 'rail',
+  DRAWER: 'drawer',
+  BAR: 'bar',
+  MODAL: 'modal',
+  STANDARD: 'standard'
+} as const;
+
 /**
  * Navigation positions
  * @category Components
  */
 export type NavPosition = 'left' | 'right' | 'top' | 'bottom';
 
+/**
+ * Navigation positions enum
+ * @category Components
+ */
+export const NAV_POSITIONS: Record<string, NavPosition> = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  BOTTOM: 'bottom'
+} as const;
+
 /**
  * Navigation behaviors
  * @category Components
  */
 export type NavBehavior = 'fixed' | 'dismissible' | 'modal';
 
+/**
+ * Navigation behaviors enum
+ * @category Components
+ */
+export const NAV_BEHAVIORS: Record<string, NavBehavior> = {
+  FIXED: 'fixed',
+  DISMISSIBLE: 'dismissible',
+  MODAL: 'modal'
+} as const;
+
 /**
  * Navigation item state
  * @category Components

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/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
  */