mtrl 0.2.7 → 0.2.8

package/src/components/navigation/constants.ts

@@ -1,200 +0,0 @@
-// src/components/navigation/constants.ts
-
-/**
- * Navigation variants following Material Design 3
- */
-export const NAV_VARIANTS = {
-  RAIL: 'rail', // Vertical slim navigation
-  DRAWER: 'drawer', // Expandable side navigation
-  BAR: 'bar', // Bottom or top navigation bar
-  DRAWER_MODAL: 'modal', // Modal drawer overlay
-  DRAWER_STANDARD: 'standard' // Standard permanent drawer
-} as const;
-
-/**
- * Navigation positions
- */
-export const NAV_POSITIONS = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  TOP: 'top',
-  BOTTOM: 'bottom'
-} as const;
-
-/**
- * Navigation behaviors
- */
-export const NAV_BEHAVIORS = {
-  FIXED: 'fixed', // Always visible
-  DISMISSIBLE: 'dismissible', // Can be dismissed/hidden
-  MODAL: 'modal' // Overlays content with scrim
-} as const;
-
-/**
- * Navigation state classes
- */
-export const NAV_STATES = {
-  ACTIVE: 'active', // Currently selected item
-  DISABLED: 'disabled', // Disabled state
-  EXPANDED: 'expanded', // Drawer expanded state
-  COLLAPSED: 'collapsed', // Drawer collapsed state
-  HOVERED: 'hovered', // Hover state
-  FOCUSED: 'focused', // Keyboard focus state
-  PRESSED: 'pressed' // Press/click state
-} as const;
-
-/**
- * Navigation element classes
- */
-export const NAV_CLASSES = {
-  ROOT: 'nav',
-  ITEM: 'nav-item',
-  ITEM_CONTAINER: 'nav-item-container',
-  ICON: 'nav-item-icon',
-  LABEL: 'nav-item-label',
-  BADGE: 'nav-item-badge',
-  DIVIDER: 'nav-divider',
-  SCRIM: 'nav-scrim',
-  GROUP: 'nav-group',
-  GROUP_TITLE: 'nav-group-title',
-  SUBTITLE: 'nav-subtitle',
-  NESTED_CONTAINER: 'nav-nested-container',
-  NESTED_ITEM: 'nav-nested-item',
-  EXPAND_ICON: 'nav-expand-icon'
-} as const;
-
-/**
- * Validation schema for navigation configuration
- */
-export const NAV_SCHEMA = {
-  type: 'object',
-  properties: {
-    variant: {
-      type: 'string',
-      enum: Object.values(NAV_VARIANTS),
-      optional: true,
-      default: NAV_VARIANTS.RAIL
-    },
-    position: {
-      type: 'string',
-      enum: Object.values(NAV_POSITIONS),
-      optional: true,
-      default: NAV_POSITIONS.LEFT
-    },
-    behavior: {
-      type: 'string',
-      enum: Object.values(NAV_BEHAVIORS),
-      optional: true,
-      default: NAV_BEHAVIORS.FIXED
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      default: []
-    },
-    groups: {
-      type: 'array',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true
-    },
-    showLabels: {
-      type: 'boolean',
-      optional: true,
-      default: true
-    },
-    scrimEnabled: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    },
-    class: {
-      type: 'string',
-      optional: true
-    }
-  }
-} as const;
-
-/**
- * Navigation item states
- */
-export const NAV_ITEM_STATES = {
-  EXPANDED: 'expanded',
-  COLLAPSED: 'collapsed'
-} as const;
-
-/**
- * Navigation item schema
- * Enhanced with support for nested items
- */
-export const NAV_ITEM_SCHEMA = {
-  type: 'object',
-  properties: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    icon: {
-      type: 'string',
-      required: true
-    },
-    label: {
-      type: 'string',
-      required: true
-    },
-    badge: {
-      type: 'string',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    subtitle: {
-      type: 'string',
-      optional: true
-    },
-    groupId: {
-      type: 'string',
-      optional: true
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      description: 'Nested navigation items'
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    }
-  }
-} as const;
-
-/**
- * Navigation group schema
- */
-export const NAV_GROUP_SCHEMA = {
-  type: 'object',
-  properties: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    title: {
-      type: 'string',
-      required: true
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true,
-      default: true
-    }
-  }
-} as const;

package/src/components/progress/constants.ts

@@ -1,29 +0,0 @@
-// src/components/progress/constants.ts
-
-/**
- * Progress component variants
- */
-export const PROGRESS_VARIANTS = {
-  /** Standard linear progress bar */
-  LINEAR: 'linear',
-  
-  /** Circular progress indicator */
-  CIRCULAR: 'circular',
-  
-  /** Progress with known value */
-  DETERMINATE: 'determinate',
-  
-  /** Indeterminate progress animation */
-  INDETERMINATE: 'indeterminate'
-} as const;
-
-/**
- * Progress component events
- */
-export const PROGRESS_EVENTS = {
-  /** Fired when value changes */
-  VALUE_CHANGE: 'valueChange',
-  
-  /** Fired when component becomes determinate/indeterminate */
-  STATE_CHANGE: 'stateChange'
-} as const;

package/src/components/search/constants.ts

@@ -1,21 +0,0 @@
-// src/components/search/constants.ts
-
-/**
- * Available search component variants
- */
-export const SEARCH_VARIANTS = {
-  BAR: 'bar',
-  VIEW: 'view'
-} as const;
-
-/**
- * Available search component events
- */
-export const SEARCH_EVENTS = {
-  FOCUS: 'focus',
-  BLUR: 'blur',
-  INPUT: 'input',
-  SUBMIT: 'submit',
-  CLEAR: 'clear',
-  ICON_CLICK: 'iconClick'
-} as const;

package/src/components/segmented-button/constants.ts

@@ -1,42 +0,0 @@
-// src/components/segmented-button/constants.ts
-import { SelectionMode } from './types';
-
-/**
- * Default checkbox icon SVG used for selected state
- * @internal
- */
-export const DEFAULT_CHECKMARK_ICON = `
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <polyline points="20 6 9 17 4 12"></polyline>
-</svg>`;
-
-/**
- * Default configuration values for segmented buttons
- * @internal
- */
-export const DEFAULT_CONFIG = {
-  mode: SelectionMode.SINGLE,
-  ripple: true
-};
-
-/**
- * Event names used by the segmented button component
- * @internal
- */
-export const EVENTS = {
-  CHANGE: 'change'
-};
-
-/**
- * CSS classes used by the segmented button component
- * @internal
- */
-export const CLASSES = {
-  CONTAINER: 'segmented-button',
-  SEGMENT: 'segmented-button-segment',
-  SELECTED: 'selected',
-  DISABLED: 'disabled',
-  ICON: 'icon',
-  CHECKMARK: 'checkmark',
-  TEXT: 'text'
-};

package/src/components/switch/constants.ts

@@ -1,80 +0,0 @@
-// src/components/switch/constants.ts
-
-/**
- * Label position options
- */
-export const SWITCH_LABEL_POSITION = {
-  START: 'start',
-  END: 'end'
-} as const;
-
-/**
- * Validation schema for switch configuration
- */
-export const SWITCH_SCHEMA = {
-  type: 'object',
-  properties: {
-    name: {
-      type: 'string',
-      optional: true
-    },
-    checked: {
-      type: 'boolean',
-      optional: true
-    },
-    required: {
-      type: 'boolean',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    value: {
-      type: 'string',
-      optional: true
-    },
-    label: {
-      type: 'string',
-      optional: true
-    },
-    labelPosition: {
-      type: 'string',
-      enum: Object.values(SWITCH_LABEL_POSITION),
-      optional: true
-    },
-    icon: {
-      type: 'string',
-      optional: true
-    },
-    ariaLabel: {
-      type: 'string',
-      optional: true
-    },
-    class: {
-      type: 'string',
-      optional: true
-    }
-  }
-} as const;
-
-/**
- * Switch state classes
- */
-export const SWITCH_STATES = {
-  CHECKED: 'checked',
-  DISABLED: 'disabled',
-  FOCUSED: 'focused'
-} as const;
-
-/**
- * Switch element classes
- */
-export const SWITCH_CLASSES = {
-  ROOT: 'switch',
-  INPUT: 'switch-input',
-  TRACK: 'switch-track',
-  THUMB: 'thumb',
-  THUMB_ICON: 'thumb-icon',
-  LABEL: 'switch-label'
-} as const;

package/src/components/tabs/constants.ts

@@ -1,89 +0,0 @@
-// src/components/tabs/constants.ts
-
-/**
- * Tab variants
- */
-export const TABS_VARIANTS = {
-  /** Primary tabs (standard MD3 style) */
-  PRIMARY: 'primary',
-  /** Secondary tabs (less prominent variant) */
-  SECONDARY: 'secondary'
-};
-
-/**
- * Tab states
- */
-export const TAB_STATES = {
-  /** Active (selected) tab state */
-  ACTIVE: 'active',
-  /** Inactive (unselected) tab state */
-  INACTIVE: 'inactive',
-  /** Disabled tab state */
-  DISABLED: 'disabled'
-};
-
-/**
- * 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'
-};
-
-/**
- * Tab interaction states (for styling)
- */
-export const TAB_INTERACTION_STATES = {
-  /** Default enabled state */
-  ENABLED: 'enabled',
-  /** Hover state */
-  HOVER: 'hover',
-  /** Focus state */
-  FOCUS: 'focus',
-  /** Pressed/active state */
-  PRESSED: 'pressed'
-};
-
-/**
- * Tab animation constants
- */
-export const TAB_ANIMATION = {
-  /** Standard transition duration in ms */
-  TRANSITION_DURATION: 200,
-  /** Standard transition timing function */
-  TRANSITION_TIMING: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  /** Ripple animation duration in ms */
-  RIPPLE_DURATION: 400
-};
-
-/**
- * Tab accessibility roles
- */
-export const TAB_A11Y = {
-  /** Tab role */
-  TAB_ROLE: 'tab',
-  /** Tablist role */
-  TABLIST_ROLE: 'tablist',
-  /** Tabpanel role */
-  TABPANEL_ROLE: 'tabpanel'
-};
-
-/**
- * MD3 tokens for tab colors
- */
-export const TAB_COLORS = {
-  /** Surface color for container */
-  SURFACE: 'surface',
-  /** Primary color for active tab and indicator */
-  PRIMARY: 'primary',
-  /** On-surface color for active secondary tabs */
-  ON_SURFACE: 'on-surface',
-  /** On-surface-variant for inactive tabs */
-  ON_SURFACE_VARIANT: 'on-surface-variant',
-  /** Outline variant for divider */
-  OUTLINE_VARIANT: 'outline-variant'
-};

package/src/components/timepicker/constants.ts

@@ -1,138 +0,0 @@
-// src/components/timepicker/constants.ts
-
-import { 
-  TIME_PICKER_TYPE, 
-  TIME_PICKER_ORIENTATION, 
-  TIME_FORMAT,
-  TIME_PERIOD
-} from './types';
-
-/**
- * Default clock icon for time picker.
- * Simple clock SVG.
- */
-export const DEFAULT_CLOCK_ICON = `
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <circle cx="12" cy="12" r="10"></circle>
-  <polyline points="12 6 12 12 16 14"></polyline>
-</svg>
-`;
-
-/**
- * Default keyboard icon for time picker.
- * Simple keyboard SVG.
- */
-export const DEFAULT_KEYBOARD_ICON = `
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
-  <line x1="6" y1="8" x2="6" y2="8"></line>
-  <line x1="10" y1="8" x2="10" y2="8"></line>
-  <line x1="14" y1="8" x2="14" y2="8"></line>
-  <line x1="18" y1="8" x2="18" y2="8"></line>
-  <line x1="6" y1="12" x2="6" y2="12"></line>
-  <line x1="10" y1="12" x2="10" y2="12"></line>
-  <line x1="14" y1="12" x2="14" y2="12"></line>
-  <line x1="18" y1="12" x2="18" y2="12"></line>
-  <line x1="6" y1="16" x2="18" y2="16"></line>
-</svg>
-`;
-
-/**
- * Element selectors for time picker components.
- * Used for DOM manipulation and event delegation.
- */
-export const SELECTORS = {
-  CONTAINER: '.mtrl-time-picker',
-  MODAL: '.mtrl-time-picker-modal',
-  DIALOG: '.mtrl-time-picker-dialog',
-  TITLE: '.mtrl-time-picker-title',
-  CONTENT: '.mtrl-time-picker-content',
-  DIAL: '.mtrl-time-picker-dial',
-  DIAL_CANVAS: '.mtrl-time-picker-dial-canvas',
-  DIAL_FACE: '.mtrl-time-picker-dial-face',
-  DIAL_HAND: '.mtrl-time-picker-dial-hand',
-  DIAL_CENTER: '.mtrl-time-picker-dial-center',
-  DIAL_NUMBERS: '.mtrl-time-picker-dial-numbers',
-  DIAL_NUMBER: '.mtrl-time-picker-dial-number',
-  INPUT_CONTAINER: '.mtrl-time-picker-input-container',
-  HOURS_INPUT: '.mtrl-time-picker-hours',
-  MINUTES_INPUT: '.mtrl-time-picker-minutes',
-  SECONDS_INPUT: '.mtrl-time-picker-seconds',
-  SEPARATOR: '.mtrl-time-picker-separator',
-  PERIOD_CONTAINER: '.mtrl-time-picker-period',
-  PERIOD_AM: '.mtrl-time-picker-period-am',
-  PERIOD_PM: '.mtrl-time-picker-period-pm',
-  ACTIONS: '.mtrl-time-picker-actions',
-  TOGGLE_TYPE_BUTTON: '.mtrl-time-picker-toggle-type',
-  CANCEL_BUTTON: '.mtrl-time-picker-cancel',
-  CONFIRM_BUTTON: '.mtrl-time-picker-confirm',
-};
-
-export const DIAL_CONSTANTS = {
-  DIAMETER: 256,
-  INNER_RADIUS: 65,
-  OUTER_RADIUS: 110,
-  NUMBER_SIZE: 40,
-  CENTER_SIZE: 8,
-  HAND_SIZE: 36,
-  TRACK_WIDTH: 2,
-};
-
-
-/**
- * Z-index values for different parts of the time picker.
- */
-export const Z_INDEX = {
-  MODAL: 1050,
-  DIALOG: 1051,
-};
-
-/**
- * Time constants used in the time picker.
- */
-export const TIME_CONSTANTS = {
-  HOURS_12: Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i)),
-  HOURS_24: Array.from({ length: 24 }, (_, i) => i),
-  MINUTES: Array.from({ length: 60 }, (_, i) => i),
-  SECONDS: Array.from({ length: 60 }, (_, i) => i),
-};
-
-/**
- * Custom events fired by the time picker.
- */
-export const EVENTS = {
-  CHANGE: 'change',
-  OPEN: 'open',
-  CLOSE: 'close',
-  CONFIRM: 'confirm',
-  CANCEL: 'cancel',
-};
-
-/**
- * Animation timing for the time picker.
- */
-export const ANIMATION = {
-  OPEN_DURATION: 300,
-  CLOSE_DURATION: 200,
-  DIAL_SELECT_DURATION: 150,
-};
-
-/**
- * Size constants for the time input fields.
- */
-export const INPUT_CONSTANTS = {
-  FIELD_WIDTH: 96,
-  FIELD_HEIGHT: 72,
-  PERIOD_WIDTH: 52,
-  PERIOD_HEIGHT: 72,
-};
-
-/**
- * Time picker type exports for convenience.
- */
-export { 
-  TIME_PICKER_TYPE, 
-  TIME_PICKER_ORIENTATION, 
-  TIME_FORMAT,
-  TIME_PERIOD
-};