mtrl 0.2.6 → 0.2.8

package/src/components/tabs/indicator.ts

@@ -8,7 +8,7 @@ export interface TabIndicatorConfig {
   /** Height of the indicator in pixels */
   height?: number;
   /** Width strategy - fixed size or dynamic based on tab width */
-  widthStrategy?: 'fixed' | 'dynamic' | 'content';
+  widthStrategy?: 'fixed' | 'dynamic' | 'content' | 'auto';
   /** Fixed width in pixels when using fixed strategy */
   fixedWidth?: number;
   /** Animation duration in milliseconds */
@@ -21,6 +21,8 @@ export interface TabIndicatorConfig {
   prefix?: string;
   /** Custom color for the indicator */
   color?: string;
+  /** Tabs variant (primary or secondary) */
+  variant?: string;
 }
 
 /**
@@ -47,12 +49,13 @@ export interface TabIndicator {
  * Default configuration for tab indicator
  */
 const DEFAULT_CONFIG: TabIndicatorConfig = {
-  widthStrategy: 'fixed',
+  widthStrategy: 'auto', // Changed to 'auto' to match variant behavior
   fixedWidth: 40,
   animationDuration: 250,
   animationTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
   visible: true,
-  prefix: 'mtrl'
+  prefix: 'mtrl',
+  variant: 'primary'
 };
 
 /**
@@ -81,17 +84,38 @@ export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicato
   let currentTab: TabComponent | null = null;
   
   /**
-   * Calculates indicator width based on strategy
+   * Calculates indicator width based on strategy and variant
    * @param tab - Target tab
    * @returns Width in pixels
    */
   const calculateWidth = (tab: TabComponent): number => {
+    // Use auto strategy to determine based on variant
+    if (mergedConfig.widthStrategy === 'auto') {
+      // For secondary tabs, use full tab width
+      if (mergedConfig.variant === 'secondary') {
+        return tab.element.offsetWidth;
+      }
+      
+      // For primary tabs (default), use text label width
+      const textElement = tab.element.querySelector(`.${prefix}-tab-text`) || 
+                        tab.element.querySelector(`.${prefix}-button-text`);
+      
+      if (textElement) {
+        return textElement.clientWidth;
+      }
+      
+      // Fallback to dynamic if text element not found
+      return Math.max(tab.element.offsetWidth / 2, 30);
+    }
+    
+    // Handle other strategies when explicitly set
     switch (mergedConfig.widthStrategy) {
       case 'dynamic':
         return Math.max(tab.element.offsetWidth / 2, 30);
       case 'content':
         // Try to match content width
-        const text = tab.element.querySelector(`.${prefix}-button-text`);
+        const text = tab.element.querySelector(`.${prefix}-button-text`) || 
+                   tab.element.querySelector(`.${prefix}-tab-text`);
         if (text) {
           return Math.max(text.clientWidth, 30);
         }
@@ -126,6 +150,46 @@ export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicato
     };
   };
   
+  /**
+   * Calculates indicator position based on variant and width
+   * @param tab - Target tab
+   * @param indicatorWidth - Width of the indicator
+   * @returns {Object} Position information
+   */
+  const calculatePosition = (tab: TabComponent, indicatorWidth: number): { left: number } => {
+    const { left, width: tabWidth } = getTabPosition(tab.element);
+    
+    // For primary tabs with text label width, center under the text
+    if (mergedConfig.variant !== 'secondary' && 
+        (mergedConfig.widthStrategy === 'auto' || mergedConfig.widthStrategy === 'content')) {
+      const textElement = tab.element.querySelector(`.${prefix}-tab-text`) || 
+                        tab.element.querySelector(`.${prefix}-button-text`);
+      
+      if (textElement) {
+        // Get text element position relative to tab
+        const textRect = textElement.getBoundingClientRect();
+        const tabRect = tab.element.getBoundingClientRect();
+        const textLeft = textRect.left - tabRect.left;
+        
+        // Center indicator under text
+        return {
+          left: left + textLeft
+        };
+      }
+    }
+    
+    // For secondary tabs or when no text element found
+    // For centered indicators, center in the tab
+    if (indicatorWidth < tabWidth) {
+      return {
+        left: left + ((tabWidth - indicatorWidth) / 2)
+      };
+    }
+    
+    // For full-width indicators
+    return { left };
+  };
+  
   /**
    * Moves indicator to specified tab
    * @param tab - Target tab
@@ -140,15 +204,11 @@ export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicato
     // Store current tab for later updates
     currentTab = tab;
     
-    // Calculate indicator width
+    // Calculate indicator width based on strategy and variant
     const width = calculateWidth(tab);
     
-    // Get tab position directly from DOM
-    const { left, width: tabWidth } = getTabPosition(tab.element);
-    
-    // Calculate position to center indicator on tab
-    const tabCenter = left + (tabWidth / 2);
-    const indicatorLeft = tabCenter - (width / 2);
+    // Calculate position based on width and variant
+    const { left } = calculatePosition(tab, width);
     
     // Apply position immediately if requested
     if (immediate) {
@@ -160,7 +220,7 @@ export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicato
     
     // Update position and width
     element.style.width = `${width}px`;
-    element.style.transform = `translateX(${indicatorLeft}px)`;
+    element.style.transform = `translateX(${left}px)`;
     
     // Restore transition after immediate update
     if (immediate) {

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

@@ -1,9 +1,17 @@
 // src/components/tabs/tab-api.ts
 import { TabComponent } from './types';
-import { TAB_STATES, TAB_LAYOUT } from './constants';
 import { BadgeComponent } from '../badge/types';
 import createBadge from '../badge';
 
+const TAB_LAYOUT = {
+  /** Icon-only tab layout */
+  ICON_ONLY: 'icon-only',
+  /** Text-only tab layout */
+  TEXT_ONLY: 'text-only',
+  /** Icon and text layout */
+  ICON_AND_TEXT: 'icon-and-text'
+}
+
 /**
  * API options for a Tab component
  */
@@ -82,7 +90,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Activates the tab
        */
       activate() {
-        component.element.classList.add(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.classList.add(`${component.getClass('tab')}--active`);
         component.element.setAttribute('aria-selected', 'true');
         return this;
       },
@@ -91,7 +99,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Deactivates the tab
        */
       deactivate() {
-        component.element.classList.remove(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.classList.remove(`${component.getClass('tab')}--active`);
         component.element.setAttribute('aria-selected', 'false');
         return this;
       },
@@ -100,7 +108,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Checks if the tab is active
        */
       isActive() {
-        return component.element.classList.contains(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        return component.element.classList.contains(`${component.getClass('tab')}--active`);
       },
       
       /**

package/src/components/tabs/tab.ts

@@ -8,6 +8,18 @@ import { createTabConfig } from './config';
 import createButton from '../button';
 import createBadge from '../badge';
 
+/**
+ * Tab layout types
+ */
+export const TAB_LAYOUT = {
+  /** Icon-only tab layout */
+  ICON_ONLY: 'icon-only',
+  /** Text-only tab layout */
+  TEXT_ONLY: 'text-only',
+  /** Icon and text layout */
+  ICON_AND_TEXT: 'icon-and-text'
+};
+
 /**
  * Creates a new Tab component following MD3 guidelines
  * @param {TabConfig} config - Tab configuration object
@@ -49,7 +61,7 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
     // Set up tab accessibility attributes
     baseComponent.element.setAttribute('role', 'tab');
     baseComponent.element.setAttribute('aria-selected', 
-      baseConfig.state === TAB_STATES.ACTIVE ? 'true' : 'false');
+      baseConfig.state === 'active' ? 'true' : 'false');
     
     // For better accessibility
     if (baseConfig.value) {
@@ -58,8 +70,8 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
     }
     
     // Add active state if specified in config
-    if (baseConfig.state === TAB_STATES.ACTIVE) {
-      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+    if (baseConfig.state === 'active') {
+      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--active`);
     }
     
     // Forward button events to our component
@@ -95,7 +107,7 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
       },
       
       activate() {
-        this.element.classList.add(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        this.element.classList.add(`${this.getClass('tab')}--active`);
         this.element.setAttribute('aria-selected', 'true');
         
         // Dispatch event for screen readers
@@ -109,13 +121,13 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
       },
       
       deactivate() {
-        this.element.classList.remove(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        this.element.classList.remove(`${this.getClass('tab')}--active`);
         this.element.setAttribute('aria-selected', 'false');
         return this;
       },
       
       isActive() {
-        return this.element.classList.contains(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        return this.element.classList.contains(`${this.getClass('tab')}--active`);
       },
       
       enable() {

package/src/components/tabs/types.ts

@@ -1,8 +1,18 @@
 // src/components/tabs/types.ts
-import { TABS_VARIANTS, TAB_STATES, TAB_LAYOUT } from './constants';
 import { BadgeComponent } from '../badge/types';
 import { TabIndicator } from './indicator';
 
+/**
+ * Available tabs variants
+ */
+export type TabsVariant = 'primary' | 'secondary';
+
+/**
+ * Available tabs states
+ */
+
+export type TabStates = 'active' | 'inactive' | 'disabled';
+
 /**
  * Configuration for the tab indicator
  * @category Components
@@ -10,8 +20,14 @@ import { TabIndicator } from './indicator';
 export interface IndicatorConfig {
   /** Height of the indicator in pixels */
   height?: number;
-  /** Width strategy for the indicator */
-  widthStrategy?: 'fixed' | 'dynamic' | 'content';
+  /** 
+   * Width strategy for the indicator
+   * - 'fixed': Uses a fixed width defined by fixedWidth
+   * - 'dynamic': Uses half the tab width
+   * - 'content': Uses the text content width
+   * - 'auto': Adapts based on variant (primary: text width, secondary: full tab width)
+   */
+  widthStrategy?: 'fixed' | 'dynamic' | 'content' | 'auto';
   /** Fixed width in pixels (when using fixed strategy) */
   fixedWidth?: number;
   /** Animation duration in milliseconds */
@@ -20,6 +36,8 @@ export interface IndicatorConfig {
   animationTiming?: string;
   /** Custom color for the indicator */
   color?: string;
+  /** Tab variant (primary or secondary) */
+  variant?: string;
 }
 
 /**
@@ -47,7 +65,7 @@ export interface TabConfig {
    * Tab state that determines if it's the active destination
    * @default 'inactive'
    */
-  state?: keyof typeof TAB_STATES | string;
+  state?: TabStates | string;
   
   /** 
    * Whether the tab is initially disabled
@@ -146,7 +164,7 @@ export interface TabsConfig {
    * Tabs variant (primary or secondary)
    * @default 'primary'
    */
-  variant?: keyof typeof TABS_VARIANTS | string;
+  variant?: TabsVariant | string;
   
   /**
    * Initial tabs to create

package/src/components/textfield/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { TextfieldConfig, BaseComponent, ApiOptions } from './types';
-import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants';
 
 /**
  * Default configuration for the Textfield component
  */
 export const defaultConfig: TextfieldConfig = {
-  type: TEXTFIELD_TYPES.TEXT,
-  variant: TEXTFIELD_VARIANTS.FILLED
+  type: 'text',
+  variant: 'filled'
 };
 
 /**

package/src/components/textfield/index.ts

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

package/src/components/textfield/types.ts

@@ -1,15 +1,29 @@
 // src/components/textfield/types.ts
-import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants';
+
+/**
+ * Available Textfield variants
+ */
+export type TextfieldVariant = 'filled' | 'outlined';
+
+/**
+ * Available Textfield states
+ */
+export type TextfieldStates = 'active' | 'inactive' | 'disabled';
+
+/**
+ * Available Textfield types
+ */
+export type TextfieldTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'multiline';
 
 /**
  * Configuration interface for the Textfield component
  */
 export interface TextfieldConfig {
   /** Input type (text, password, email, etc.) */
-  type?: keyof typeof TEXTFIELD_TYPES | string;
+  type?: TextfieldTypes | string;
   
   /** Visual variant (filled, outlined) */
-  variant?: keyof typeof TEXTFIELD_VARIANTS | string;
+  variant?: TextfieldVariant | string;
   
   /** Input name attribute */
   name?: string;

package/src/components/timepicker/README.md

@@ -0,0 +1,277 @@
+# TimePicker Component
+
+The `TimePicker` component provides a user-friendly interface for selecting a time. It supports both dial-based
+and keyboard input selection methods, 12-hour and 24-hour formats, and customizable settings.
+
+## Features
+
+- **Two Selection Methods**: Choose between a dial interface or keyboard input
+- **Time Format Support**: 12-hour (AM/PM) or 24-hour format
+- **Flexible Configuration**: Customize title, action buttons, and constraints
+- **Responsive Layout**: Adapts between vertical and horizontal layouts based on device orientation
+- **Accessibility**: Keyboard navigation and screen reader support
+- **Full TypeScript Support**: Comprehensive type definitions for better development experience
+
+## Basic Usage
+
+```javascript
+import { createTimePicker } from 'mtrl';
+
+// Create a basic time picker
+const timePicker = createTimePicker({
+  title: 'Select time',
+  value: '14:30', // Initial time (2:30 PM)
+  onConfirm: (time) => {
+    console.log('Selected time:', time);
+    // Update UI with selected time
+    document.getElementById('time-input').value = time;
+  }
+});
+
+// Create an input to trigger the time picker
+const timeInput = document.createElement('input');
+timeInput.id = 'time-input';
+timeInput.type = 'text';
+timeInput.readOnly = true;
+timeInput.value = '14:30';
+timeInput.addEventListener('click', () => {
+  timePicker.open();
+});
+
+// Add input to the DOM
+document.body.appendChild(timeInput);
+```
+
+## Configuration Options
+
+The `createTimePicker` function accepts a configuration object with the following properties:
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string` | Current time | Initial time value in 24-hour format (HH:MM or HH:MM:SS) |
+| `type` | `TIME_PICKER_TYPE` | `DIAL` | Type of time picker to display (DIAL or INPUT) |
+| `format` | `TIME_FORMAT` | `AMPM` | Time format to use (AMPM for 12-hour or MILITARY for 24-hour) |
+| `orientation` | `TIME_PICKER_ORIENTATION` | `VERTICAL` | Layout orientation (VERTICAL or HORIZONTAL) |
+| `title` | `string` | `undefined` | Title text for the time picker |
+| `showSeconds` | `boolean` | `false` | Whether to show seconds selector |
+| `class` | `string` | `undefined` | Additional CSS classes to add to the time picker |
+| `closeOnSelect` | `boolean` | `true` | Whether to close the picker when time is selected |
+| `minTime` | `string` | `undefined` | Minimum selectable time in 24-hour format (HH:MM) |
+| `maxTime` | `string` | `undefined` | Maximum selectable time in 24-hour format (HH:MM) |
+| `minuteStep` | `number` | `1` | Step interval for minute selection |
+| `secondStep` | `number` | `1` | Step interval for second selection |
+| `cancelText` | `string` | `'Cancel'` | Custom text for cancel button |
+| `confirmText` | `string` | `'OK'` | Custom text for confirm button |
+| `isOpen` | `boolean` | `false` | Whether the time picker is initially visible |
+| `container` | `string \| HTMLElement` | `document.body` | CSS selector or element to append the time picker to |
+| `clockIcon` | `string` | Default SVG | Custom icon for the clock button |
+| `keyboardIcon` | `string` | Default SVG | Custom icon for the keyboard button |
+| `onChange` | `function` | `undefined` | Callback when time is changed |
+| `onOpen` | `function` | `undefined` | Callback when time picker is opened |
+| `onClose` | `function` | `undefined` | Callback when time picker is closed |
+| `onConfirm` | `function` | `undefined` | Callback when time is confirmed |
+| `onCancel` | `function` | `undefined` | Callback when time picker is canceled |
+
+## API Methods
+
+Once created, the TimePicker instance provides the following methods:
+
+### Open, Close, and Toggle
+
+```javascript
+// Open the time picker
+timePicker.open();
+
+// Close the time picker
+timePicker.close();
+
+// Toggle the time picker open/closed state
+timePicker.toggle();
+```
+
+### Get and Set Value
+
+```javascript
+// Get the current time value as a string (HH:MM or HH:MM:SS)
+const timeString = timePicker.getValue();
+
+// Get the current time as an object with hours, minutes, seconds, and period
+const timeObject = timePicker.getTimeObject();
+
+// Set the time value
+timePicker.setValue('15:45');
+```
+
+### Change Configuration
+
+```javascript
+// Switch between dial and input types
+timePicker.setType(TIME_PICKER_TYPE.INPUT);
+
+// Switch between 12-hour and 24-hour formats
+timePicker.setFormat(TIME_FORMAT.MILITARY);
+
+// Change the orientation
+timePicker.setOrientation(TIME_PICKER_ORIENTATION.HORIZONTAL);
+
+// Update the title
+timePicker.setTitle('Choose departure time');
+```
+
+### Event Handling
+
+```javascript
+// Listen for time changes
+timePicker.on('change', (time) => {
+  console.log('Time changed:', time);
+});
+
+// Listen for time picker opening
+timePicker.on('open', () => {
+  console.log('Time picker opened');
+});
+
+// Remove an event listener
+timePicker.off('change', myHandler);
+```
+
+### Cleanup
+
+```javascript
+// Destroy the time picker and clean up resources
+timePicker.destroy();
+```
+
+## Advanced Examples
+
+### 24-Hour Time Picker with Seconds
+
+```javascript
+import { createTimePicker, TIME_FORMAT } from 'mtrl';
+
+const timePicker = createTimePicker({
+  title: 'Select time',
+  value: '18:30:45',
+  format: TIME_FORMAT.MILITARY,
+  showSeconds: true,
+  onConfirm: (time) => {
+    console.log('Selected time with seconds:', time);
+  }
+});
+```
+
+### Time Range Selection
+
+```javascript
+import { createTimePicker } from 'mtrl';
+
+// Start time picker
+const startTimePicker = createTimePicker({
+  title: 'Select start time',
+  value: '09:00',
+  minTime: '08:00',
+  maxTime: '16:00',
+  onConfirm: (time) => {
+    startTimeInput.value = time;
+    
+    // Update end time constraints
+    const [hours, minutes] = time.split(':');
+    const startDate = new Date();
+    startDate.setHours(parseInt(hours, 10), parseInt(minutes, 10));
+    
+    // Add minimum 30 minutes to start time
+    const minEndDate = new Date(startDate);
+    minEndDate.setMinutes(minEndDate.getMinutes() + 30);
+    
+    endTimePicker.minTime = `${minEndDate.getHours()}:${minEndDate.getMinutes()}`;
+  }
+});
+
+// End time picker
+const endTimePicker = createTimePicker({
+  title: 'Select end time',
+  value: '17:00',
+  minTime: '09:30', // Initial minimum (30 min after default start)
+  onConfirm: (time) => {
+    endTimeInput.value = time;
+  }
+});
+```
+
+## Accessibility
+
+The TimePicker component is designed with accessibility in mind:
+
+- Keyboard navigation for all controls
+- ARIA attributes for screen reader support
+- Large touch targets for better mobile accessibility
+- High contrast colors and clear visual indicators
+- Support for reducing motion based on user preferences
+
+## Customization
+
+### Custom Styling
+
+You can customize the appearance of the TimePicker by overriding the CSS variables and classes:
+
+```css
+/* Custom time picker styling */
+.mtrl-time-picker-dialog {
+  --mtrl-primary: #6200ee;
+  --mtrl-on-primary: #ffffff;
+  --mtrl-surface-container-high: #f5f5f5;
+  --mtrl-on-surface: #1d1d1d;
+  
+  /* Add custom shadows */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* Custom dial styling */
+.mtrl-time-picker-dial-face {
+  background-color: rgba(98, 0, 238, 0.05);
+}
+
+/* Custom buttons */
+.mtrl-time-picker-confirm {
+  font-weight: bold;
+}
+```
+
+### Custom Icons
+
+You can also provide custom icons for the clock and keyboard buttons:
+
+```javascript
+const timePicker = createTimePicker({
+  // Other configuration...
+  clockIcon: '<svg>...</svg>', // Custom clock icon
+  keyboardIcon: '<svg>...</svg>' // Custom keyboard icon
+});
+```
+
+## Browser Support
+
+The TimePicker component supports all modern browsers:
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## TypeScript Support
+
+The `TimePicker` component includes comprehensive TypeScript definitions:
+
+```typescript
+import { createTimePicker, TIME_PICKER_TYPE, TIME_FORMAT, TimePickerConfig } from 'mtrl';
+
+// Configuration with TypeScript
+const config: TimePickerConfig = {
+  title: 'Select time',
+  value: '14:30',
+  type: TIME_PICKER_TYPE.DIAL,
+  format: TIME_FORMAT.AMPM
+};
+
+const timePicker = createTimePicker(config);
+```