@idealyst/datepicker 1.0.58 → 1.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.0.58",
+  "version": "1.0.59",
   "description": "Cross-platform date and time picker components for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/datepicker#readme",
   "readme": "README.md",
@@ -36,8 +36,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.58",
-    "@idealyst/theme": "^1.0.58",
+    "@idealyst/components": "^1.0.59",
+    "@idealyst/theme": "^1.0.59",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-svg": ">=13.0.0",

package/src/DateInput/DateInput.native.tsx

@@ -18,12 +18,18 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
     ...baseProps
   } = props;
 
-  // Initialize styles
-  dateInputStyles.useVariants({
-    size,
-    variant,
-    state: disabled ? 'disabled' : error ? 'error' : undefined,
-  });
+  // Determine input style based on state
+  const getInputStyle = () => {
+    const styles = [dateInputStyles.input];
+    
+    if (disabled) {
+      styles.push(dateInputStyles.inputDisabled);
+    } else if (error) {
+      styles.push(dateInputStyles.inputError);
+    }
+    
+    return styles;
+  };
 
   return (
     <View style={style} testID={testID}>
@@ -54,7 +60,7 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
             onBlur={onBlur}
             placeholder={placeholder}
             editable={editable}
-            style={[inputStyleProp, inputStyle]}
+            style={[...getInputStyle(), inputStyle]}
             testID={inputTestID}
             autoComplete="off"
             autoCorrect={false}

package/src/DateInput/DateInput.styles.tsx

@@ -1,118 +1,80 @@
-import { createStyleSheet } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 
-export const dateInputStyles = createStyleSheet((theme) => ({
+export const dateInputStyles = StyleSheet.create((theme) => ({
   container: {
     width: '100%',
   },
   
   input: {
     borderWidth: 1,
-    borderColor: theme.colors.border,
-    borderRadius: theme.radius.medium,
-    paddingHorizontal: theme.spacing.medium,
-    paddingVertical: theme.spacing.small,
-    fontSize: theme.typography.body.fontSize,
-    fontFamily: theme.typography.body.fontFamily,
-    color: theme.colors.text,
-    backgroundColor: theme.colors.background,
-    
-    variants: {
-      size: {
-        small: {
-          paddingHorizontal: theme.spacing.small,
-          paddingVertical: theme.spacing.xs,
-          fontSize: theme.typography.caption.fontSize,
-        },
-        medium: {
-          paddingHorizontal: theme.spacing.medium,
-          paddingVertical: theme.spacing.small,
-          fontSize: theme.typography.body.fontSize,
-        },
-        large: {
-          paddingHorizontal: theme.spacing.large,
-          paddingVertical: theme.spacing.medium,
-          fontSize: theme.typography.subtitle.fontSize,
-        },
-      },
-      
-      variant: {
-        outlined: {
-          borderWidth: 1,
-          backgroundColor: 'transparent',
-        },
-        filled: {
-          borderWidth: 0,
-          backgroundColor: theme.colors.surfaceVariant,
-        },
-      },
-      
-      state: {
-        focused: {
-          borderColor: theme.colors.primary,
-          borderWidth: 2,
-        },
-        disabled: {
-          backgroundColor: theme.colors.disabled,
-          color: theme.colors.onDisabled,
-          borderColor: theme.colors.outline,
-        },
-        error: {
-          borderColor: theme.colors.error,
-          borderWidth: 2,
-        },
-      },
-    },
+    borderColor: theme.colors?.border?.primary || '#e5e7eb',
+    borderRadius: theme.borderRadius?.md || 8,
+    paddingHorizontal: theme.spacing?.md || 12,
+    paddingVertical: theme.spacing?.sm || 8,
+    fontSize: theme.typography?.sizes?.medium || 16,
+    color: theme.colors?.text?.primary || '#1f2937',
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
     
     _web: {
       outlineStyle: 'none',
       cursor: 'text',
-      
-      ':focus': {
-        borderColor: theme.colors.primary,
-        borderWidth: 2,
-      },
-      
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
+      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
     },
   },
   
   inputError: {
-    borderColor: theme.colors.error,
+    borderColor: theme.colors?.text?.error || '#dc2626',
     borderWidth: 2,
+    
+    _web: {
+      border: `2px solid ${theme.colors?.text?.error || '#dc2626'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
+    },
   },
   
   inputFocused: {
-    borderColor: theme.colors.primary,
+    borderColor: theme.colors?.primary || '#3b82f6',
     borderWidth: 2,
+    
+    _web: {
+      border: `2px solid ${theme.colors?.primary || '#3b82f6'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
+    },
   },
   
   inputDisabled: {
-    backgroundColor: theme.colors.disabled,
-    color: theme.colors.onDisabled,
-    borderColor: theme.colors.outline,
+    backgroundColor: theme.colors?.surface?.disabled || '#f9fafb',
+    color: theme.colors?.text?.disabled || '#9ca3af',
+    borderColor: theme.colors?.border?.disabled || '#d1d5db',
+    
+    _web: {
+      cursor: 'not-allowed',
+      border: `1px solid ${theme.colors?.border?.disabled || '#d1d5db'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
+    },
   },
   
   label: {
-    fontSize: theme.typography.caption.fontSize,
-    fontFamily: theme.typography.caption.fontFamily,
-    color: theme.colors.onSurface,
-    marginBottom: theme.spacing.xs,
+    fontSize: theme.typography?.sizes?.small || 14,
+    color: theme.colors?.text?.primary || '#1f2937',
+    marginBottom: theme.spacing?.xs || 4,
     fontWeight: '500',
   },
   
   helperText: {
-    fontSize: theme.typography.caption.fontSize,
-    fontFamily: theme.typography.caption.fontFamily,
-    color: theme.colors.onSurfaceVariant,
-    marginTop: theme.spacing.xs,
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.text?.secondary || '#6b7280',
+    marginTop: theme.spacing?.xs || 4,
   },
   
   errorText: {
-    fontSize: theme.typography.caption.fontSize,
-    fontFamily: theme.typography.caption.fontFamily,
-    color: theme.colors.error,
-    marginTop: theme.spacing.xs,
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.text?.error || '#dc2626',
+    marginTop: theme.spacing?.xs || 4,
   },
 }));

package/src/DateInput/DateInput.web.tsx

@@ -18,12 +18,18 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
     ...baseProps
   } = props;
 
-  // Initialize styles
-  dateInputStyles.useVariants({
-    size,
-    variant,
-    state: disabled ? 'disabled' : error ? 'error' : undefined,
-  });
+  // Determine input style based on state
+  const getInputStyle = () => {
+    const styles = [dateInputStyles.input];
+    
+    if (disabled) {
+      styles.push(dateInputStyles.inputDisabled);
+    } else if (error) {
+      styles.push(dateInputStyles.inputError);
+    }
+    
+    return styles;
+  };
 
   return (
     <View style={style} testID={testID}>
@@ -54,7 +60,7 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
             onBlur={onBlur}
             placeholder={placeholder}
             editable={editable}
-            style={[inputStyleProp, inputStyle]}
+            style={[...getInputStyle(), inputStyle]}
             testID={inputTestID}
             autoComplete="off"
             autoCorrect={false}

package/src/DateInput/DateInputBase.tsx

@@ -222,10 +222,7 @@ export const DateInputBase: React.FC<DateInputBaseProps> = ({
         onBlur: handleBlur,
         placeholder,
         editable: !disabled,
-        style: [
-          dateInputStyles.input,
-          hasError && dateInputStyles.inputError,
-        ],
+        style: inputStyleProp,
         testID: testID ? `${testID}-input` : undefined,
       })}
     </View>