@idealyst/datepicker 1.0.59 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "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.59",
-    "@idealyst/theme": "^1.0.59",
+    "@idealyst/components": "^1.0.60",
+    "@idealyst/theme": "^1.0.60",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-svg": ">=13.0.0",

package/src/DateInput/DateInput.native.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, TextInput, Text } from '@idealyst/components';
+import { View, Input, Text } from '@idealyst/components';
 import { DateInputBase } from './DateInputBase';
 import { DateInputProps } from './types';
 import { dateInputStyles } from './DateInput.styles';
@@ -18,18 +18,6 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
     ...baseProps
   } = props;
 
-  // 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}>
@@ -39,36 +27,23 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
         </Text>
       )}
       
-      <DateInputBase
-        {...baseProps}
-        disabled={disabled}
-        testID={testID}
-        renderInput={({
-          value,
-          onChangeText,
-          onFocus,
-          onBlur,
-          placeholder,
-          editable,
-          style: inputStyleProp,
-          testID: inputTestID,
-        }) => (
-          <TextInput
+      <DateInputBase {...baseProps} disabled={disabled} testID={testID}>
+        {({ value, onChangeText, onFocus, onBlur, placeholder, disabled: inputDisabled, testID: inputTestID }) => (
+          <Input
             value={value}
             onChangeText={onChangeText}
             onFocus={onFocus}
             onBlur={onBlur}
             placeholder={placeholder}
-            editable={editable}
-            style={[...getInputStyle(), inputStyle]}
+            disabled={inputDisabled}
+            size={size}
+            variant={variant}
+            hasError={error ? true : false}
+            style={inputStyle}
             testID={inputTestID}
-            autoComplete="off"
-            autoCorrect={false}
-            spellCheck={false}
-            keyboardType="default"
           />
         )}
-      />
+      </DateInputBase>
       
       {error && (
         <Text style={dateInputStyles.errorText} testID={testID ? `${testID}-error` : undefined}>

package/src/DateInput/DateInput.styles.tsx

@@ -5,60 +5,6 @@ export const dateInputStyles = StyleSheet.create((theme) => ({
     width: '100%',
   },
   
-  input: {
-    borderWidth: 1,
-    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',
-      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
-      borderWidth: undefined,
-      borderColor: undefined,
-    },
-  },
-  
-  inputError: {
-    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 || '#3b82f6',
-    borderWidth: 2,
-    
-    _web: {
-      border: `2px solid ${theme.colors?.primary || '#3b82f6'}`,
-      borderWidth: undefined,
-      borderColor: undefined,
-    },
-  },
-  
-  inputDisabled: {
-    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?.sizes?.small || 14,
     color: theme.colors?.text?.primary || '#1f2937',

package/src/DateInput/DateInput.web.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, TextInput, Text } from '@idealyst/components';
+import { View, Input, Text } from '@idealyst/components';
 import { DateInputBase } from './DateInputBase';
 import { DateInputProps } from './types';
 import { dateInputStyles } from './DateInput.styles';
@@ -18,18 +18,6 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
     ...baseProps
   } = props;
 
-  // 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}>
@@ -39,35 +27,23 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
         </Text>
       )}
       
-      <DateInputBase
-        {...baseProps}
-        disabled={disabled}
-        testID={testID}
-        renderInput={({
-          value,
-          onChangeText,
-          onFocus,
-          onBlur,
-          placeholder,
-          editable,
-          style: inputStyleProp,
-          testID: inputTestID,
-        }) => (
-          <TextInput
+      <DateInputBase {...baseProps} disabled={disabled} testID={testID}>
+        {({ value, onChangeText, onFocus, onBlur, placeholder, disabled: inputDisabled, testID: inputTestID }) => (
+          <Input
             value={value}
             onChangeText={onChangeText}
             onFocus={onFocus}
             onBlur={onBlur}
             placeholder={placeholder}
-            editable={editable}
-            style={[...getInputStyle(), inputStyle]}
+            disabled={inputDisabled}
+            size={size}
+            variant={variant}
+            hasError={error ? true : false}
+            style={inputStyle}
             testID={inputTestID}
-            autoComplete="off"
-            autoCorrect={false}
-            spellCheck={false}
           />
         )}
-      />
+      </DateInputBase>
       
       {error && (
         <Text style={dateInputStyles.errorText} testID={testID ? `${testID}-error` : undefined}>

package/src/DateInput/DateInputBase.tsx

@@ -1,17 +1,16 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { View, TextInput } from '@idealyst/components';
+import { View } from '@idealyst/components';
 import { DateInputProps } from './types';
 import { dateInputStyles } from './DateInput.styles';
 
 interface DateInputBaseProps extends DateInputProps {
-  renderInput: (props: {
+  children: (props: {
     value: string;
     onChangeText: (text: string) => void;
     onFocus: () => void;
     onBlur: () => void;
     placeholder?: string;
-    editable: boolean;
-    style?: any;
+    disabled: boolean;
     testID?: string;
   }) => React.ReactNode;
 }
@@ -52,7 +51,7 @@ export const DateInputBase: React.FC<DateInputBaseProps> = ({
   testID,
   onFocus,
   onBlur,
-  renderInput,
+  children,
 }) => {
   const [inputValue, setInputValue] = useState('');
   const [isFocused, setIsFocused] = useState(false);
@@ -215,14 +214,13 @@ export const DateInputBase: React.FC<DateInputBaseProps> = ({
 
   return (
     <View style={[dateInputStyles.container, style]} testID={testID}>
-      {renderInput({
+      {children({
         value: inputValue,
         onChangeText: handleChangeText,
         onFocus: handleFocus,
         onBlur: handleBlur,
         placeholder,
-        editable: !disabled,
-        style: inputStyleProp,
+        disabled,
         testID: testID ? `${testID}-input` : undefined,
       })}
     </View>