mtrl 0.2.6 → 0.2.7

package/src/components/datepicker/utils.ts

@@ -0,0 +1,290 @@
+// src/components/datepicker/utils.ts
+import { CalendarDate } from './types';
+import { MONTH_NAMES, MONTH_NAMES_SHORT } from './constants';
+
+/**
+ * Parses a date from various input types
+ * @param date - Date string, Date object, or null
+ * @returns Valid Date object or null if invalid
+ */
+export const parseDate = (date: Date | string | null): Date | null => {
+  if (!date) return null;
+  
+  // Already a Date object
+  if (date instanceof Date) {
+    return isNaN(date.getTime()) ? null : date;
+  }
+  
+  // String date
+  if (typeof date === 'string') {
+    // Try to parse the string
+    const parsedDate = new Date(date);
+    return isNaN(parsedDate.getTime()) ? null : parsedDate;
+  }
+  
+  return null;
+};
+
+/**
+ * Formats a date according to the specified format using a parser-based approach
+ * This avoids string replacement issues by building the output string from scratch
+ * 
+ * @param date - Date to format
+ * @param format - Format string (MM/DD/YYYY, etc.)
+ * @returns Formatted date string
+ */
+export const formatDate = (date: Date | null, format: string = 'MM/DD/YYYY'): string => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+    return '';
+  }
+  
+  let result = '';
+  let i = 0;
+  
+  while (i < format.length) {
+    // Check for month name patterns
+    if (format.substring(i, i+4) === 'MMMM') {
+      // Full month name
+      result += MONTH_NAMES[date.getMonth()];
+      i += 4;
+    } 
+    else if (format.substring(i, i+3) === 'MMM') {
+      // Abbreviated month name
+      result += MONTH_NAMES_SHORT[date.getMonth()];
+      i += 3;
+    }
+    else if (format.substring(i, i+2) === 'MM') {
+      // Two-digit month
+      result += (date.getMonth() + 1).toString().padStart(2, '0');
+      i += 2;
+    }
+    else if (format.substring(i, i+1) === 'M') {
+      // Single-digit month
+      result += (date.getMonth() + 1);
+      i += 1;
+    }
+    else if (format.substring(i, i+4) === 'YYYY') {
+      // 4-digit year
+      result += date.getFullYear();
+      i += 4;
+    }
+    else if (format.substring(i, i+2) === 'YY') {
+      // 2-digit year
+      result += date.getFullYear().toString().slice(-2);
+      i += 2;
+    }
+    else if (format.substring(i, i+2) === 'DD') {
+      // Two-digit day
+      result += date.getDate().toString().padStart(2, '0');
+      i += 2;
+    }
+    else if (format.substring(i, i+1) === 'D') {
+      // Single-digit day
+      result += date.getDate();
+      i += 1;
+    }
+    else {
+      // Any other character is copied as-is
+      result += format[i];
+      i += 1;
+    }
+  }
+  
+  return result;
+};
+
+/**
+ * Gets the days in a month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @returns Number of days in the month
+ */
+export const getDaysInMonth = (year: number, month: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+/**
+ * Gets the first day of the month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @returns Day of the week (0-6, where 0 is Sunday)
+ */
+export const getFirstDayOfMonth = (year: number, month: number): number => {
+  return new Date(year, month, 1).getDay();
+};
+
+/**
+ * Checks if two dates are the same day
+ * @param date1 - First date
+ * @param date2 - Second date
+ * @returns True if same day, false otherwise
+ */
+export const isSameDay = (date1: Date, date2: Date): boolean => {
+  return (
+    date1.getDate() === date2.getDate() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear()
+  );
+};
+
+/**
+ * Checks if a date is between two other dates (inclusive)
+ * @param date - Date to check
+ * @param startDate - Start date
+ * @param endDate - End date
+ * @returns True if date is between start and end, false otherwise
+ */
+export const isDateInRange = (date: Date, startDate: Date, endDate: Date): boolean => {
+  const timestamp = date.getTime();
+  return timestamp >= startDate.getTime() && timestamp <= endDate.getTime();
+};
+
+/**
+ * Generates calendar dates for a month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @param selectedDate - Currently selected date
+ * @param rangeEndDate - End date if range selection
+ * @param minDate - Minimum selectable date
+ * @param maxDate - Maximum selectable date
+ * @returns Array of calendar dates
+ */
+export const generateCalendarDates = (
+  year: number,
+  month: number,
+  selectedDate: Date | null = null,
+  rangeEndDate: Date | null = null,
+  minDate: Date | null = null,
+  maxDate: Date | null = null
+): CalendarDate[] => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  
+  const result: CalendarDate[] = [];
+  
+  // Calculate days needed from previous month
+  const firstDay = getFirstDayOfMonth(year, month);
+  const daysInPrevMonth = getDaysInMonth(year, month - 1);
+  
+  // Add days from previous month
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const date = new Date(year, month - 1, daysInPrevMonth - i);
+    const isDisabled = 
+      (minDate && date < minDate) || 
+      (maxDate && date > maxDate);
+    
+    result.push({
+      date,
+      day: date.getDate(),
+      isCurrentMonth: false,
+      isToday: isSameDay(date, today),
+      isSelected: selectedDate ? isSameDay(date, selectedDate) : false,
+      isDisabled
+    });
+  }
+  
+  // Add days from current month
+  const daysInMonth = getDaysInMonth(year, month);
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(year, month, i);
+    const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
+    const isDisabled = 
+      (minDate && date < minDate) || 
+      (maxDate && date > maxDate);
+    
+    const calendarDate: CalendarDate = {
+      date,
+      day: i,
+      isCurrentMonth: true,
+      isToday: isSameDay(date, today),
+      isSelected,
+      isDisabled
+    };
+    
+    // Handle range selection
+    if (selectedDate && rangeEndDate) {
+      calendarDate.isRangeStart = isSameDay(date, selectedDate);
+      calendarDate.isRangeEnd = isSameDay(date, rangeEndDate);
+      calendarDate.isRangeMiddle = isDateInRange(date, selectedDate, rangeEndDate) && 
+        !calendarDate.isRangeStart && !calendarDate.isRangeEnd;
+    }
+    
+    result.push(calendarDate);
+  }
+  
+  // Add days from next month to complete the calendar grid (6 rows × 7 columns)
+  const totalDaysNeeded = 42; // 6 rows × 7 columns
+  const remainingDays = totalDaysNeeded - result.length;
+  
+  for (let i = 1; i <= remainingDays; i++) {
+    const date = new Date(year, month + 1, i);
+    const isDisabled = 
+      (minDate && date < minDate) || 
+      (maxDate && date > maxDate);
+    
+    result.push({
+      date,
+      day: i,
+      isCurrentMonth: false,
+      isToday: isSameDay(date, today),
+      isSelected: selectedDate ? isSameDay(date, selectedDate) : false,
+      isDisabled
+    });
+  }
+  
+  return result;
+};
+
+/**
+ * Generates an array of years for year selection
+ * @param currentYear - Center year for the range
+ * @param range - Number of years before and after current year
+ * @returns Array of years
+ */
+export const generateYearRange = (currentYear: number, range: number = 10): number[] => {
+  const years: number[] = [];
+  const startYear = currentYear - range;
+  const endYear = currentYear + range;
+  
+  for (let year = startYear; year <= endYear; year++) {
+    years.push(year);
+  }
+  
+  return years;
+};
+
+/**
+ * Adds days to a date
+ * @param date - Base date
+ * @param days - Number of days to add
+ * @returns New date with days added
+ */
+export const addDays = (date: Date, days: number): Date => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+/**
+ * Adds months to a date
+ * @param date - Base date
+ * @param months - Number of months to add
+ * @returns New date with months added
+ */
+export const addMonths = (date: Date, months: number): Date => {
+  const result = new Date(date);
+  result.setMonth(result.getMonth() + months);
+  return result;
+};
+
+/**
+ * Adds years to a date
+ * @param date - Base date
+ * @param years - Number of years to add
+ * @returns New date with years added
+ */
+export const addYears = (date: Date, years: number): Date => {
+  const result = new Date(date);
+  result.setFullYear(result.getFullYear() + years);
+  return result;
+};

package/src/components/dialog/_styles.scss

@@ -1,4 +1,4 @@
-// src/components/dialog/_styles.scss
+// src/components/dialog/_dialog.scss
 @use '../../styles/abstract/base' as base;
 @use '../../styles/abstract/variables' as v;
 @use '../../styles/abstract/functions' as f;
@@ -7,207 +7,253 @@
 
 $component: '#{base.$prefix}-dialog';
 
-// Dialog overlay - covers the entire screen
+// Dialog overlay (background scrim)
 .#{$component}-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: t.alpha('scrim', 0.32);
+  background-color: t.alpha('scrim', 0.48);
+  opacity: 0;
+  z-index: v.z-index('modal');
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  overflow: auto;
   padding: 24px;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
-  overflow-y: auto;
+  box-sizing: border-box;
+  // Use proper SCSS function calls for transition values
+  $duration: v.motion('duration-short4');
+  $easing: v.motion('easing-standard');
+  transition: opacity #{$duration} #{$easing},
+              visibility #{$duration} #{$easing};
   
   &--visible {
     opacity: 1;
     visibility: visible;
-    transition: opacity 0.15s ease, visibility 0s linear;
   }
 }
 
 // Dialog container
 .#{$component} {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 280px;
-  max-width: 90vw;
-  width: fit-content;
-  max-height: calc(100vh - 48px);
-  border-radius: 28px;
   background-color: t.color('surface-container-high');
   color: t.color('on-surface');
-  overflow: hidden;
-  box-sizing: border-box;
-  @include m.elevation(3);
-  transform: scale(0.8);
+  border-radius: v.shape('extra-large'); // 28dp corner radius
+  max-width: 560px;
+  min-width: 280px;
+  width: 100%;
+  margin: auto;
   opacity: 0;
-  transition: transform 0.15s ease, opacity 0.15s ease;
+  transform: scale(0.8);
+  $duration: v.motion('duration-short4');
+  $easing: v.motion('easing-standard');
+  transition: transform #{$duration} #{$easing},
+              opacity #{$duration} #{$easing};
+  @include m.elevation(3);
   
   &--visible {
-    transform: scale(1);
     opacity: 1;
+    transform: scale(1);
   }
   
-  // Fullscreen variant
-  &--fullscreen {
-    width: 100vw;
-    height: 100vh;
-    max-width: 100vw;
-    max-height: 100vh;
-    border-radius: 0;
-    margin: 0;
+  // Size variants
+  &--small {
+    width: 80%;
+    max-width: 360px;
+  }
+  
+  &--medium {
+    width: 90%;
+    max-width: 560px;
+  }
+  
+  &--large {
+    width: 95%;
+    max-width: 800px;
   }
   
-  // Fullwidth variant
   &--fullwidth {
     width: 100%;
-    max-width: 560px;
+    max-width: none;
+    margin: 24px;
   }
   
-  // Dialog header
-  &-header {
-    display: flex;
-    align-items: flex-start;
-    padding: 24px 24px 16px;
-    
-    &-content {
-      flex: 1;
-      min-width: 0;
-    }
+  &--fullscreen {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    border-radius: 0;
+  }
+  
+  // Animation variants
+  &--slide-up {
+    transform: translateY(50px);
     
-    &-title {
-      @include m.typography('headline-small');
-      color: t.color('on-surface');
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    &.#{$component}--visible {
+      transform: translateY(0);
     }
+  }
+  
+  &--slide-down {
+    transform: translateY(-50px);
     
-    &-subtitle {
-      @include m.typography('body-medium');
-      color: t.color('on-surface-variant');
-      margin: 4px 0 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    &.#{$component}--visible {
+      transform: translateY(0);
     }
+  }
+  
+  &--fade {
+    transform: scale(1);
     
-    &-close {
-      margin: -8px -8px -8px 8px;
-      padding: 8px;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      color: t.color('on-surface-variant');
-      
-      &:hover {
-        background-color: t.alpha('on-surface', 0.08);
-      }
-      
-      &:active {
-        background-color: t.alpha('on-surface', 0.12);
-      }
-      
-      svg {
-        width: 24px;
-        height: 24px;
-      }
+    &.#{$component}--visible {
+      transform: scale(1);
     }
   }
+}
+
+// Dialog header
+.#{$component}-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 24px 24px 16px 24px;
   
-  // Dialog content
   &-content {
-    flex: 1 1 auto;
-    padding: 0 24px;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
+    flex: 1;
+  }
+  
+  &-title {
+    margin: 0;
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 400;
+    color: t.color('on-surface');
+    @include m.typography('headline-small');
+  }
+  
+  &-subtitle {
+    margin: 4px 0 0 0;
     @include m.typography('body-medium');
     color: t.color('on-surface-variant');
-    
-    &:first-child {
-      padding-top: 24px;
-    }
-    
-    &:last-child {
-      padding-bottom: 24px;
-    }
   }
   
-  // Dialog footer
-  &-footer {
+  &-close {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    justify-content: flex-end;
-    padding: 16px 24px 24px;
-    gap: 8px;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    margin: -8px -8px 0 0;
+    padding: 8px;
+    background: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    color: t.color('on-surface-variant');
     
-    &--left {
-      justify-content: flex-start;
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
     }
     
-    &--center {
-      justify-content: center;
+    &:focus {
+      outline: none;
+      background-color: t.alpha('on-surface', 0.12);
     }
     
-    &--space-between {
-      justify-content: space-between;
+    svg {
+      width: 24px;
+      height: 24px;
     }
+  }
+}
+
+// Dialog content
+.#{$component}-content {
+  padding: 16px 24px;
+  color: t.color('on-surface');
+  @include m.typography('body-medium');
+  
+  p {
+    margin: 0 0 16px 0;
     
-    button {
-      margin: 0;
+    &:last-child {
+      margin-bottom: 0;
     }
   }
+}
+
+// Dialog footer
+.#{$component}-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 24px;
+  gap: 8px;
   
-  // Size variants
-  &--small {
-    max-width: 400px;
+  &--left {
+    justify-content: flex-start;
   }
   
-  &--medium {
-    max-width: 560px;
+  &--center {
+    justify-content: center;
   }
   
-  &--large {
-    max-width: 90vw;
-    width: 800px;
+  &--space-between {
+    justify-content: space-between;
   }
-  
-  // Animation variants
-  &--slide-up {
-    transform: translateY(20px) scale(1);
+}
+
+// Dialog divider styling
+.#{$component}-header-divider {
+  margin: 0;
+}
+
+.#{$component}-footer-divider {
+  margin: 0;
+}
+
+// Accessibility
+@include m.reduced-motion {
+  .#{$component},
+  .#{$component}-overlay {
+    transition: none;
+  }
+}
+
+// Mobile responsiveness
+@media (max-width: v.breakpoint('sm')) {
+  .#{$component} {
+    min-width: 280px;
+    width: calc(100% - 32px);
+    max-width: 100%;
+    margin: 16px;
     
-    &.#{$component}--visible {
-      transform: translateY(0) scale(1);
+    &--fullscreen {
+      width: 100%;
+      height: 100%;
+      margin: 0;
     }
   }
   
-  &--slide-down {
-    transform: translateY(-20px) scale(1);
+  .#{$component}-overlay {
+    padding: 16px;
+    align-items: flex-end;
     
-    &.#{$component}--visible {
-      transform: translateY(0) scale(1);
+    &.#{$component}--fullscreen {
+      padding: 0;
     }
   }
   
-  &--fade {
-    transform: scale(1);
+  // Adjust animations for mobile
+  .#{$component}--slide-up {
+    transform: translateY(100%);
     
     &.#{$component}--visible {
-      transform: scale(1);
+      transform: translateY(0);
     }
   }
 }