@idealyst/datepicker 1.1.8 → 1.2.0

package/src/TimePicker.web.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
-import { Text, Button, Icon } from '@idealyst/components';
-import { datePickerStyles } from './styles';
+import { mdiChevronUp, mdiChevronDown } from '@mdi/js';
+import { IconSvg } from './IconSvg.web';
+import { timePickerStyles } from './TimePicker.styles';
 import type { TimePickerProps } from './types';
 
 export const TimePicker: React.FC<TimePickerProps> = ({
@@ -12,7 +13,7 @@ export const TimePicker: React.FC<TimePickerProps> = ({
   disabled = false,
   style,
 }) => {
-  datePickerStyles.useVariants({ disabled });
+  const styles = timePickerStyles;
 
   const currentDate = value || new Date();
   const hours = currentDate.getHours();
@@ -54,57 +55,85 @@ export const TimePicker: React.FC<TimePickerProps> = ({
     updateTime(newHours, minutes);
   };
 
-  // Get web props for styled elements
-  const timePickerProps = getWebProps([datePickerStyles.timePicker, style as any]);
-  const timeColumnsProps = getWebProps([datePickerStyles.timeColumns]);
-  const timeColumnProps = getWebProps([datePickerStyles.timeColumn]);
-  const timeSeparatorProps = getWebProps([datePickerStyles.timeSeparator]);
+  // Get dynamic styles
+  const timePickerStyle = (styles.timePicker as any)({ disabled });
+  const timeColumnsStyle = (styles.timeColumns as any)({});
+  const timeColumnStyle = (styles.timeColumn as any)({});
+  const timeSeparatorStyle = (styles.timeSeparator as any)({});
+  const separatorTextStyle = (styles.separatorText as any)({});
+  const timeValueStyle = (styles.timeValue as any)({});
+  const arrowButtonStyle = (styles.arrowButton as any)({ disabled });
+  const periodButtonStyle = (styles.periodButton as any)({ disabled });
+  const periodButtonTextStyle = (styles.periodButtonText as any)({});
+  const iconColorStyle = (styles.iconColor as any)({});
+
+  // Get web props
+  const timePickerProps = getWebProps([timePickerStyle, style as any]);
+  const timeColumnsProps = getWebProps([timeColumnsStyle]);
+  const timeColumnProps = getWebProps([timeColumnStyle]);
 
   return (
     <div {...timePickerProps}>
       <div {...timeColumnsProps}>
         {/* Hours column */}
         <div {...timeColumnProps}>
-          <Button type="text" size="sm" onPress={incrementHours} disabled={disabled}>
-            <Icon name="chevron-up" size={20} />
-          </Button>
-          <Text typography="h3" weight="semibold">
+          <button
+            style={arrowButtonStyle}
+            onClick={incrementHours}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiChevronUp} size={20} color={iconColorStyle.color} />
+          </button>
+          <span style={timeValueStyle}>
             {String(displayHours).padStart(2, '0')}
-          </Text>
-          <Button type="text" size="sm" onPress={decrementHours} disabled={disabled}>
-            <Icon name="chevron-down" size={20} />
-          </Button>
+          </span>
+          <button
+            style={arrowButtonStyle}
+            onClick={decrementHours}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiChevronDown} size={20} color={iconColorStyle.color} />
+          </button>
         </div>
 
         {/* Separator */}
-        <div {...timeSeparatorProps}>
-          <Text typography="h3" weight="semibold">:</Text>
+        <div style={timeSeparatorStyle}>
+          <span style={separatorTextStyle}>:</span>
         </div>
 
         {/* Minutes column */}
         <div {...timeColumnProps}>
-          <Button type="text" size="sm" onPress={incrementMinutes} disabled={disabled}>
-            <Icon name="chevron-up" size={20} />
-          </Button>
-          <Text typography="h3" weight="semibold">
+          <button
+            style={arrowButtonStyle}
+            onClick={incrementMinutes}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiChevronUp} size={20} color={iconColorStyle.color} />
+          </button>
+          <span style={timeValueStyle}>
             {String(minutes).padStart(2, '0')}
-          </Text>
-          <Button type="text" size="sm" onPress={decrementMinutes} disabled={disabled}>
-            <Icon name="chevron-down" size={20} />
-          </Button>
+          </span>
+          <button
+            style={arrowButtonStyle}
+            onClick={decrementMinutes}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiChevronDown} size={20} color={iconColorStyle.color} />
+          </button>
         </div>
 
         {/* AM/PM toggle for 12-hour mode */}
         {is12Hour && (
           <div {...timeColumnProps}>
-            <Button
-              type="outlined"
-              size="sm"
-              onPress={togglePeriod}
+            <button
+              style={periodButtonStyle}
+              onClick={togglePeriod}
               disabled={disabled}
             >
-              {isPM ? 'PM' : 'AM'}
-            </Button>
+              <span style={periodButtonTextStyle}>
+                {isPM ? 'PM' : 'AM'}
+              </span>
+            </button>
           </div>
         )}
       </div>

package/src/styles.ts

@@ -1,254 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import type { Theme } from '@idealyst/theme';
-
-export type DatePickerVariants = {
-  disabled: boolean;
-};
-
-export type InputContainerVariants = {
-  disabled: boolean;
-  error: boolean;
-};
-
-export const datePickerStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    // Calendar container - compact
-    calendar: {
-      padding: 8,
-      backgroundColor: theme.colors.surface.primary,
-      borderRadius: 6,
-      width: 220,
-      variants: {
-        disabled: {
-          true: { opacity: 0.6 },
-          false: { opacity: 1 },
-        },
-      },
-    },
-
-    // Calendar header with month/year and navigation
-    calendarHeader: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      marginBottom: 4,
-      paddingHorizontal: 2,
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    calendarTitle: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 2,
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Weekday header row
-    weekdayRow: {
-      flexDirection: 'row',
-      marginBottom: 2,
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    weekdayCell: {
-      width: 28,
-      height: 20,
-      alignItems: 'center',
-      justifyContent: 'center',
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Calendar grid
-    calendarGrid: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Month selector grid (3x4)
-    monthGrid: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      paddingVertical: 8,
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Year selector grid
-    yearGrid: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      paddingVertical: 8,
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Individual day cell - compact
-    dayCell: {
-      width: 28,
-      height: 28,
-      alignItems: 'center',
-      justifyContent: 'center',
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Time picker container
-    timePicker: {
-      padding: 12,
-      backgroundColor: theme.colors.surface.primary,
-      borderRadius: 6,
-      variants: {
-        disabled: {
-          true: { opacity: 0.6 },
-          false: { opacity: 1 },
-        },
-      },
-    },
-
-    // Time columns container
-    timeColumns: {
-      flexDirection: 'row',
-      gap: 8,
-      alignItems: 'center',
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Individual time column (hours, minutes, period)
-    timeColumn: {
-      alignItems: 'center',
-      gap: 2,
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Time separator (colon)
-    timeSeparator: {
-      paddingHorizontal: 2,
-    },
-
-    // Input row for datetime picker
-    inputRow: {
-      flexDirection: 'row',
-      gap: 8,
-      _web: {
-        display: 'flex',
-      },
-    },
-
-    // Popover content wrapper
-    popoverContent: {
-      backgroundColor: theme.colors.surface.primary,
-      borderRadius: 6,
-      ...theme.shadows.lg,
-      overflow: 'hidden',
-    },
-
-    // Input container for DateInput/TimeInput
-    inputContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      borderWidth: 1,
-      borderRadius: 6,
-      overflow: 'hidden',
-      borderColor: theme.colors.border.primary,
-      backgroundColor: theme.colors.surface.primary,
-      variants: {
-        disabled: {
-          true: {
-            backgroundColor: theme.colors.surface.secondary,
-          },
-          false: {},
-        },
-        error: {
-          true: {
-            borderColor: theme.intents.error.primary,
-          },
-          false: {},
-        },
-      },
-      _web: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        border: `1px solid ${theme.colors.border.primary}`,
-      },
-    },
-
-    // Text input inside the input container
-    textInput: {
-      flex: 1,
-      padding: 8,
-      paddingHorizontal: 12,
-      fontSize: 14,
-      backgroundColor: 'transparent',
-      color: theme.colors.text.primary,
-      variants: {
-        disabled: {
-          true: {
-            color: theme.colors.text.tertiary,
-          },
-          false: {},
-        },
-      },
-      _web: {
-        outline: 'none',
-        border: 'none',
-      },
-    },
-
-    // Error text below input
-    errorText: {
-      marginTop: 4,
-      color: theme.intents.error.primary,
-    },
-
-    // Label text above input
-    labelText: {
-      marginBottom: 4,
-    },
-
-    // Modal backdrop
-    modalBackdrop: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'rgba(0,0,0,0.5)',
-    },
-
-    // Selected day styling
-    selectedDay: {
-      backgroundColor: theme.intents.primary.primary,
-      borderRadius: 14,
-    },
-
-    selectedDayText: {
-      color: theme.intents.primary.contrast,
-    },
-
-    // Today styling
-    todayDay: {
-      borderWidth: 1,
-      borderColor: theme.intents.primary.primary,
-      borderRadius: 14,
-    },
-  } as const;
-});