@idealyst/datepicker 1.2.50 → 1.2.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.2.50",
+  "version": "1.2.52",
   "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,7 +36,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.50",
+    "@idealyst/theme": "^1.2.52",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.6.0",
     "react": ">=16.8.0",
@@ -69,7 +69,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.50",
+    "@idealyst/theme": "^1.2.52",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/DateInput.native.tsx

@@ -14,6 +14,7 @@ export const DateInput: React.FC<DateInputProps> = ({
   maxDate,
   disabled = false,
   error,
+  size = 'md',
   style,
 }) => {
   const [open, setOpen] = useState(false);
@@ -21,16 +22,24 @@ export const DateInput: React.FC<DateInputProps> = ({
 
   // Get dynamic styles - call as functions for theme reactivity
   const styles = dateTimeInputStyles;
+
+  // Apply variants for disabled, error, and size states
+  styles.useVariants({
+    disabled,
+    error: !!error,
+    size,
+  });
+
   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 inputContainerStyle = (styles.inputContainer as any)({ disabled, error: !!error, size });
+  const textInputStyle = (styles.textInput as any)({ disabled, size });
+  const iconButtonStyle = (styles.iconButton as any)({ disabled, size });
+  const iconStyle = (styles.icon as any)({ size });
   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 date to string
   const formatDate = (date: Date | undefined): string => {
@@ -103,7 +112,7 @@ export const DateInput: React.FC<DateInputProps> = ({
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
         >
-          <MaterialDesignIcons name="calendar" size={18} style={iconStyle} />
+          <MaterialDesignIcons name="calendar" size={iconStyle.width} style={iconStyle} />
         </TouchableOpacity>
       </View>
       {error && (

package/src/DateTimePicker.native.tsx

@@ -15,6 +15,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   minuteStep = 1,
   disabled = false,
   error,
+  size = 'md',
   style,
 }) => {
   // Get dynamic styles - call as functions for theme reactivity
@@ -91,6 +92,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             maxDate={maxDate}
             disabled={disabled}
             error={error}
+            size={size}
           />
         </View>
         <View style={inputColumnStyle}>
@@ -101,6 +103,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             mode={timeMode}
             minuteStep={minuteStep}
             disabled={disabled}
+            size={size}
           />
         </View>
       </View>

package/src/TimeInput.native.tsx

@@ -14,6 +14,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   minuteStep = 1,
   disabled = false,
   error,
+  size = 'md',
   style,
 }) => {
   const [open, setOpen] = useState(false);
@@ -21,16 +22,24 @@ export const TimeInput: React.FC<TimeInputProps> = ({
 
   // Get dynamic styles - call as functions for theme reactivity
   const styles = dateTimeInputStyles;
+
+  // Apply variants for disabled, error, and size states
+  styles.useVariants({
+    disabled,
+    error: !!error,
+    size,
+  });
+
   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 inputContainerStyle = (styles.inputContainer as any)({ disabled, error: !!error, size });
+  const textInputStyle = (styles.textInput as any)({ disabled, size });
+  const iconButtonStyle = (styles.iconButton as any)({ disabled, size });
+  const iconStyle = (styles.icon as any)({ size });
   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 => {
@@ -123,7 +132,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
         >
-          <MaterialDesignIcons name="clock-outline" size={18} style={iconStyle} />
+          <MaterialDesignIcons name="clock-outline" size={iconStyle.width} style={iconStyle} />
         </TouchableOpacity>
       </View>
       {error && (