@idealyst/datepicker 1.0.58 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.0.58",
+  "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.58",
-    "@idealyst/theme": "^1.0.58",
+    "@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,12 +18,6 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
     ...baseProps
   } = props;
 
-  // Initialize styles
-  dateInputStyles.useVariants({
-    size,
-    variant,
-    state: disabled ? 'disabled' : error ? 'error' : undefined,
-  });
 
   return (
     <View style={style} testID={testID}>
@@ -33,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={[inputStyleProp, 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

@@ -1,118 +1,26 @@
-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,
-        },
-      },
-    },
-    
-    _web: {
-      outlineStyle: 'none',
-      cursor: 'text',
-      
-      ':focus': {
-        borderColor: theme.colors.primary,
-        borderWidth: 2,
-      },
-      
-      ':disabled': {
-        cursor: 'not-allowed',
-      },
-    },
-  },
-  
-  inputError: {
-    borderColor: theme.colors.error,
-    borderWidth: 2,
-  },
-  
-  inputFocused: {
-    borderColor: theme.colors.primary,
-    borderWidth: 2,
-  },
-  
-  inputDisabled: {
-    backgroundColor: theme.colors.disabled,
-    color: theme.colors.onDisabled,
-    borderColor: theme.colors.outline,
-  },
-  
   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

@@ -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,12 +18,6 @@ export const DateInput: React.FC<DateInputProps> = (props) => {
     ...baseProps
   } = props;
 
-  // Initialize styles
-  dateInputStyles.useVariants({
-    size,
-    variant,
-    state: disabled ? 'disabled' : error ? 'error' : undefined,
-  });
 
   return (
     <View style={style} testID={testID}>
@@ -33,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={[inputStyleProp, 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,17 +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: [
-          dateInputStyles.input,
-          hasError && dateInputStyles.inputError,
-        ],
+        disabled,
         testID: testID ? `${testID}-input` : undefined,
       })}
     </View>