@idealyst/datepicker 1.1.8 → 1.2.0

package/src/IconSvg.web.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import MdiIcon from '@mdi/react';
+
+/**
+ * Internal component for rendering SVG icons directly from MDI paths.
+ * The path prop should be provided by the Babel plugin transformation.
+ */
+interface IconSvgProps {
+  path?: string;
+  size?: string | number;
+  color?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+}
+
+export const IconSvg: React.FC<IconSvgProps> = ({
+  path,
+  size = '1em',
+  color = 'currentColor',
+  style,
+  'aria-label': ariaLabel,
+}) => {
+  return (
+    <MdiIcon
+      style={style}
+      path={path}
+      size={size}
+      color={color}
+      aria-label={ariaLabel}
+    />
+  );
+};
+
+export default IconSvg;

package/src/InputStyles.ts

@@ -0,0 +1,127 @@
+/**
+ * Shared input styles for DateInput and TimeInput.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type InputDynamicProps = {
+  disabled?: boolean;
+  error?: boolean;
+};
+
+/**
+ * Shared input styles with theme reactivity.
+ */
+export const dateTimeInputStyles = defineStyle('DateTimeInput', (theme: Theme) => ({
+  // Input container for DateInput/TimeInput
+  inputContainer: ({ disabled = false, error = false }: InputDynamicProps) => ({
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    borderWidth: 1,
+    borderRadius: 6,
+    overflow: 'hidden' as const,
+    borderColor: error ? theme.intents.error.primary : theme.colors.border.primary,
+    backgroundColor: disabled ? theme.colors.surface.secondary : theme.colors.surface.primary,
+    _web: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      border: `1px solid ${error ? theme.intents.error.primary : theme.colors.border.primary}`,
+    },
+  }),
+
+  // Text input inside the input container
+  textInput: ({ disabled = false }: InputDynamicProps) => ({
+    flex: 1,
+    padding: 8,
+    paddingHorizontal: 12,
+    fontSize: 14,
+    backgroundColor: 'transparent',
+    color: disabled ? theme.colors.text.tertiary : theme.colors.text.primary,
+    _web: {
+      outline: 'none',
+      border: 'none',
+    },
+  }),
+
+  // Icon button inside input
+  iconButton: ({ disabled = false }: InputDynamicProps) => ({
+    width: 32,
+    height: 32,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    marginRight: 4,
+    borderRadius: 4,
+    opacity: disabled ? 0.4 : 1,
+    _web: {
+      display: 'flex',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+  }),
+
+  // Error text below input
+  errorText: (_props: InputDynamicProps) => ({
+    marginTop: 4,
+    fontSize: 12,
+    color: theme.intents.error.primary,
+  }),
+
+  // Label text above input
+  labelText: (_props: InputDynamicProps) => ({
+    marginBottom: 4,
+    fontSize: 14,
+    fontWeight: '500' as const,
+    color: theme.colors.text.primary,
+  }),
+
+  // Modal backdrop
+  modalBackdrop: (_props: InputDynamicProps) => ({
+    flex: 1,
+    justifyContent: 'center' as const,
+    alignItems: 'center' as const,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Popover content wrapper
+  popoverContent: (_props: InputDynamicProps) => ({
+    backgroundColor: theme.colors.surface.primary,
+    borderRadius: 6,
+    ...theme.shadows.lg,
+    overflow: 'hidden' as const,
+  }),
+
+  // Close button
+  closeButton: ({ disabled = false }: InputDynamicProps) => ({
+    marginTop: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    borderRadius: 4,
+    opacity: disabled ? 0.4 : 1,
+    _web: {
+      display: 'flex',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+  }),
+
+  closeButtonText: (_props: InputDynamicProps) => ({
+    fontSize: 14,
+    color: theme.intents.primary.primary,
+  }),
+
+  // Icon color helper
+  iconColor: ({ disabled = false }: InputDynamicProps) => ({
+    color: theme.colors.text.primary,
+  }),
+}));

package/src/TimeInput.native.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, TextInput as RNTextInput } from 'react-native';
-import { View, Text, Button, Icon } from '@idealyst/components';
+import { View, Text, TextInput, TouchableOpacity, Modal } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { TimePicker } from './TimePicker';
-import { datePickerStyles } from './styles';
+import { dateTimeInputStyles } from './InputStyles';
 import type { TimeInputProps } from './types';
 
 export const TimeInput: React.FC<TimeInputProps> = ({
@@ -19,6 +19,19 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   const [open, setOpen] = useState(false);
   const [inputValue, setInputValue] = useState('');
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const styles = dateTimeInputStyles;
+  const labelTextStyle = (styles.labelText as any)({});
+  const inputContainerStyle = (styles.inputContainer as any)({ disabled, error: !!error });
+  const textInputStyle = (styles.textInput as any)({ disabled });
+  const iconButtonStyle = (styles.iconButton as any)({ disabled });
+  const errorTextStyle = (styles.errorText as any)({});
+  const modalBackdropStyle = (styles.modalBackdrop as any)({});
+  const popoverContentStyle = (styles.popoverContent as any)({});
+  const closeButtonStyle = (styles.closeButton as any)({ disabled: false });
+  const closeButtonTextStyle = (styles.closeButtonText as any)({});
+  const iconStyle = (styles.iconColor as any)({ disabled });
+
   // Format time to string
   const formatTime = (date: Date | undefined): string => {
     if (!date) return '';
@@ -89,40 +102,32 @@ export const TimeInput: React.FC<TimeInputProps> = ({
     onChange(date);
   };
 
-  // Apply variants for input container
-  datePickerStyles.useVariants({
-    disabled,
-    error: !!error,
-  });
-
   return (
     <View style={style}>
       {label && (
-        <Text typography="body2" weight="medium" style={datePickerStyles.labelText}>
+        <Text style={labelTextStyle}>
           {label}
         </Text>
       )}
-      <View style={datePickerStyles.inputContainer}>
-        <RNTextInput
+      <View style={inputContainerStyle}>
+        <TextInput
           value={inputValue}
           onChangeText={handleInputChange}
           onBlur={handleInputBlur}
           placeholder={placeholder}
           editable={!disabled}
-          style={datePickerStyles.textInput}
+          style={textInputStyle}
         />
-        <Button
-          type="text"
-          size="sm"
+        <TouchableOpacity
+          style={iconButtonStyle}
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
-          style={{ marginRight: 4 }}
         >
-          <Icon name="clock-outline" size={18} />
-        </Button>
+          <MaterialCommunityIcons name="clock-outline" size={18} style={iconStyle} />
+        </TouchableOpacity>
       </View>
       {error && (
-        <Text typography="caption" style={datePickerStyles.errorText}>
+        <Text style={errorTextStyle}>
           {error}
         </Text>
       )}
@@ -133,8 +138,8 @@ export const TimeInput: React.FC<TimeInputProps> = ({
         animationType="fade"
         onRequestClose={() => setOpen(false)}
       >
-        <View style={datePickerStyles.modalBackdrop}>
-          <View style={datePickerStyles.popoverContent}>
+        <View style={modalBackdropStyle}>
+          <View style={popoverContentStyle}>
             <TimePicker
               value={value ?? undefined}
               onChange={handleTimeChange}
@@ -142,13 +147,12 @@ export const TimeInput: React.FC<TimeInputProps> = ({
               minuteStep={minuteStep}
               disabled={disabled}
             />
-            <Button
-              type="text"
+            <TouchableOpacity
+              style={closeButtonStyle}
               onPress={() => setOpen(false)}
-              style={{ marginTop: 8 }}
             >
-              Close
-            </Button>
+              <Text style={closeButtonTextStyle}>Close</Text>
+            </TouchableOpacity>
           </View>
         </View>
       </Modal>

package/src/TimeInput.web.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
-import { View, Text, Button, Icon } from '@idealyst/components';
+import { mdiClockOutline } from '@mdi/js';
 import { PositionedPortal } from '@idealyst/components/internal';
+import { IconSvg } from './IconSvg.web';
 import { TimePicker } from './TimePicker';
-import { datePickerStyles } from './styles';
+import { dateTimeInputStyles } from './InputStyles';
 import type { TimeInputProps } from './types';
 
 export const TimeInput: React.FC<TimeInputProps> = ({
@@ -21,6 +22,17 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   const [inputValue, setInputValue] = useState('');
   const triggerRef = useRef<HTMLDivElement>(null);
 
+  const styles = dateTimeInputStyles;
+
+  // Get dynamic styles
+  const labelTextStyle = (styles.labelText as any)({});
+  const inputContainerStyle = (styles.inputContainer as any)({ disabled, error: !!error });
+  const textInputStyle = (styles.textInput as any)({ disabled });
+  const iconButtonStyle = (styles.iconButton as any)({ disabled });
+  const errorTextStyle = (styles.errorText as any)({});
+  const popoverContentStyle = (styles.popoverContent as any)({});
+  const iconColorStyle = (styles.iconColor as any)({ disabled });
+
   // Format time to string
   const formatTime = (date: Date | undefined): string => {
     if (!date) return '';
@@ -97,22 +109,13 @@ export const TimeInput: React.FC<TimeInputProps> = ({
     onChange(date);
   };
 
-  // Apply variants for input container
-  datePickerStyles.useVariants({
-    disabled,
-    error: !!error,
-  });
-
-  // Get web props for styled elements
-  const containerProps = getWebProps([datePickerStyles.inputContainer]);
-  const inputProps = getWebProps([datePickerStyles.textInput]);
+  // Get web props
+  const containerProps = getWebProps([inputContainerStyle]);
 
   return (
-    <View style={style}>
+    <div style={style as React.CSSProperties}>
       {label && (
-        <Text typography="body2" weight="medium" style={datePickerStyles.labelText}>
-          {label}
-        </Text>
+        <span style={labelTextStyle}>{label}</span>
       )}
       <div ref={triggerRef} {...containerProps}>
         <input
@@ -122,22 +125,18 @@ export const TimeInput: React.FC<TimeInputProps> = ({
           onBlur={handleInputBlur}
           placeholder={placeholder}
           disabled={disabled}
-          {...inputProps}
+          style={textInputStyle}
         />
-        <Button
-          type="text"
-          size="sm"
-          onPress={() => !disabled && setOpen(!open)}
+        <button
+          style={iconButtonStyle}
+          onClick={() => !disabled && setOpen(!open)}
           disabled={disabled}
-          style={{ marginRight: 4 }}
         >
-          <Icon name="clock-outline" size={18} />
-        </Button>
+          <IconSvg path={mdiClockOutline} size={18} color={iconColorStyle.color} />
+        </button>
       </div>
       {error && (
-        <Text typography="caption" style={datePickerStyles.errorText}>
-          {error}
-        </Text>
+        <span style={errorTextStyle}>{error}</span>
       )}
 
       <PositionedPortal
@@ -149,7 +148,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
         onEscapeKey={() => setOpen(false)}
         zIndex={9999}
       >
-        <View style={datePickerStyles.popoverContent}>
+        <div style={popoverContentStyle}>
           <TimePicker
             value={value ?? undefined}
             onChange={handleTimeChange}
@@ -157,8 +156,8 @@ export const TimeInput: React.FC<TimeInputProps> = ({
             minuteStep={minuteStep}
             disabled={disabled}
           />
-        </View>
+        </div>
       </PositionedPortal>
-    </View>
+    </div>
   );
 };

package/src/TimePicker.native.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { View } from 'react-native';
-import { Text, Button, Icon } from '@idealyst/components';
-import { datePickerStyles } from './styles';
+import { View, Text, TouchableOpacity } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { timePickerStyles } from './TimePicker.styles';
 import type { TimePickerProps } from './types';
 
 export const TimePicker: React.FC<TimePickerProps> = ({
@@ -12,7 +12,18 @@ export const TimePicker: React.FC<TimePickerProps> = ({
   disabled = false,
   style,
 }) => {
-  datePickerStyles.useVariants({ disabled });
+  // Get dynamic styles - call as functions for theme reactivity
+  const styles = timePickerStyles;
+  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 iconStyle = (styles.iconColor as any)({});
 
   const currentDate = value || new Date();
   const hours = currentDate.getHours();
@@ -55,50 +66,67 @@ export const TimePicker: React.FC<TimePickerProps> = ({
   };
 
   return (
-    <View style={[datePickerStyles.timePicker, style]}>
-      <View style={datePickerStyles.timeColumns}>
+    <View style={[timePickerStyle, style]}>
+      <View style={timeColumnsStyle}>
         {/* Hours column */}
-        <View style={datePickerStyles.timeColumn}>
-          <Button type="text" size="sm" onPress={incrementHours} disabled={disabled}>
-            <Icon name="chevron-up" size={20} />
-          </Button>
-          <Text typography="h3" weight="semibold">
+        <View style={timeColumnStyle}>
+          <TouchableOpacity
+            style={arrowButtonStyle}
+            onPress={incrementHours}
+            disabled={disabled}
+          >
+            <MaterialCommunityIcons name="chevron-up" size={20} style={iconStyle} />
+          </TouchableOpacity>
+          <Text style={timeValueStyle}>
             {String(displayHours).padStart(2, '0')}
           </Text>
-          <Button type="text" size="sm" onPress={decrementHours} disabled={disabled}>
-            <Icon name="chevron-down" size={20} />
-          </Button>
+          <TouchableOpacity
+            style={arrowButtonStyle}
+            onPress={decrementHours}
+            disabled={disabled}
+          >
+            <MaterialCommunityIcons name="chevron-down" size={20} style={iconStyle} />
+          </TouchableOpacity>
         </View>
 
         {/* Separator */}
-        <View style={datePickerStyles.timeSeparator}>
-          <Text typography="h3" weight="semibold">:</Text>
+        <View style={timeSeparatorStyle}>
+          <Text style={separatorTextStyle}>:</Text>
         </View>
 
         {/* Minutes column */}
-        <View style={datePickerStyles.timeColumn}>
-          <Button type="text" size="sm" onPress={incrementMinutes} disabled={disabled}>
-            <Icon name="chevron-up" size={20} />
-          </Button>
-          <Text typography="h3" weight="semibold">
+        <View style={timeColumnStyle}>
+          <TouchableOpacity
+            style={arrowButtonStyle}
+            onPress={incrementMinutes}
+            disabled={disabled}
+          >
+            <MaterialCommunityIcons name="chevron-up" size={20} style={iconStyle} />
+          </TouchableOpacity>
+          <Text style={timeValueStyle}>
             {String(minutes).padStart(2, '0')}
           </Text>
-          <Button type="text" size="sm" onPress={decrementMinutes} disabled={disabled}>
-            <Icon name="chevron-down" size={20} />
-          </Button>
+          <TouchableOpacity
+            style={arrowButtonStyle}
+            onPress={decrementMinutes}
+            disabled={disabled}
+          >
+            <MaterialCommunityIcons name="chevron-down" size={20} style={iconStyle} />
+          </TouchableOpacity>
         </View>
 
         {/* AM/PM toggle for 12-hour mode */}
         {is12Hour && (
-          <View style={datePickerStyles.timeColumn}>
-            <Button
-              type="outlined"
-              size="sm"
+          <View style={timeColumnStyle}>
+            <TouchableOpacity
+              style={periodButtonStyle}
               onPress={togglePeriod}
               disabled={disabled}
             >
-              {isPM ? 'PM' : 'AM'}
-            </Button>
+              <Text style={periodButtonTextStyle}>
+                {isPM ? 'PM' : 'AM'}
+              </Text>
+            </TouchableOpacity>
           </View>
         )}
       </View>

package/src/TimePicker.styles.ts

@@ -0,0 +1,104 @@
+/**
+ * TimePicker styles using defineStyle with dynamic props.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type TimePickerDynamicProps = {
+  disabled?: boolean;
+};
+
+/**
+ * TimePicker styles with theme reactivity.
+ */
+export const timePickerStyles = defineStyle('TimePicker', (theme: Theme) => ({
+  // Time picker container
+  timePicker: ({ disabled = false }: TimePickerDynamicProps) => ({
+    padding: 12,
+    backgroundColor: theme.colors.surface.primary,
+    borderRadius: 6,
+    opacity: disabled ? 0.6 : 1,
+  }),
+
+  // Time columns container
+  timeColumns: (_props: TimePickerDynamicProps) => ({
+    flexDirection: 'row' as const,
+    gap: 8,
+    alignItems: 'center' as const,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Individual time column (hours, minutes, period)
+  timeColumn: (_props: TimePickerDynamicProps) => ({
+    alignItems: 'center' as const,
+    gap: 2,
+    _web: {
+      display: 'flex',
+    },
+  }),
+
+  // Time separator (colon)
+  timeSeparator: (_props: TimePickerDynamicProps) => ({
+    paddingHorizontal: 2,
+  }),
+
+  separatorText: (_props: TimePickerDynamicProps) => ({
+    fontSize: 24,
+    fontWeight: '600' as const,
+    color: theme.colors.text.primary,
+  }),
+
+  // Time value display
+  timeValue: (_props: TimePickerDynamicProps) => ({
+    fontSize: 24,
+    fontWeight: '600' as const,
+    color: theme.colors.text.primary,
+  }),
+
+  // Arrow button (up/down)
+  arrowButton: ({ disabled = false }: TimePickerDynamicProps) => ({
+    width: 32,
+    height: 32,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    borderRadius: 4,
+    opacity: disabled ? 0.4 : 1,
+    _web: {
+      display: 'flex',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+  }),
+
+  // Period toggle button (AM/PM)
+  periodButton: ({ disabled = false }: TimePickerDynamicProps) => ({
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderWidth: 1,
+    borderColor: theme.colors.border.primary,
+    borderRadius: 4,
+    opacity: disabled ? 0.4 : 1,
+    _web: {
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    },
+  }),
+
+  periodButtonText: (_props: TimePickerDynamicProps) => ({
+    fontSize: 14,
+    fontWeight: '500' as const,
+    color: theme.colors.text.primary,
+  }),
+
+  // Icon color helper
+  iconColor: (_props: TimePickerDynamicProps) => ({
+    color: theme.colors.text.primary,
+  }),
+}));

package/src/TimePicker.tsx

@@ -0,0 +1,2 @@
+// Platform-specific exports
+export { TimePicker } from './TimePicker.web';