@idealyst/datepicker 1.2.119 → 11.2.120

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.2.119",
+  "version": "11.2.120",
   "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.119",
+    "@idealyst/theme": "^11.2.120",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.6.0",
     "react": ">=16.8.0",
@@ -69,7 +69,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.119",
+    "@idealyst/theme": "^11.2.120",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/DateInput.native.tsx

@@ -13,6 +13,7 @@ export const DateInput: React.FC<DateInputProps> = ({
   minDate,
   maxDate,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -98,23 +99,37 @@ export const DateInput: React.FC<DateInputProps> = ({
           {label}
         </Text>
       )}
-      <View style={inputContainerStyle}>
-        <TextInput
-          value={inputValue}
-          onChangeText={handleInputChange}
-          onBlur={handleInputBlur}
-          placeholder={placeholder}
-          editable={!disabled}
-          style={textInputStyle}
-        />
+      {pressable ? (
         <TouchableOpacity
-          style={iconButtonStyle}
+          style={inputContainerStyle}
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
+          activeOpacity={0.7}
         >
+          <Text style={[textInputStyle, !value && { color: (styles.pressableText as any)({ disabled, size }).placeholderColor }]}>
+            {value ? formatDate(value) : placeholder}
+          </Text>
           <MaterialDesignIcons name="calendar" size={iconStyle.width} style={iconStyle} />
         </TouchableOpacity>
-      </View>
+      ) : (
+        <View style={inputContainerStyle}>
+          <TextInput
+            value={inputValue}
+            onChangeText={handleInputChange}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            editable={!disabled}
+            style={textInputStyle}
+          />
+          <TouchableOpacity
+            style={iconButtonStyle}
+            onPress={() => !disabled && setOpen(true)}
+            disabled={disabled}
+          >
+            <MaterialDesignIcons name="calendar" size={iconStyle.width} style={iconStyle} />
+          </TouchableOpacity>
+        </View>
+      )}
       {error && (
         <Text style={errorTextStyle}>
           {error}

package/src/DateInput.web.tsx

@@ -18,6 +18,7 @@ export const DateInput: React.FC<DateInputProps> = ({
   minDate,
   maxDate,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -108,30 +109,50 @@ export const DateInput: React.FC<DateInputProps> = ({
   const errorProps = getWebProps([errorTextStyle]);
   const popoverProps = getWebProps([popoverContentStyle]);
 
+  // Pressable text style (reuses input style but renders as a button)
+  const pressableTextStyle = (styles.pressableText as any)({ disabled, size });
+  const pressableTextProps = getWebProps([pressableTextStyle]);
+
   return (
     <div style={flattenStyle(style)}>
       {label && (
         <span {...labelProps}>{label}</span>
       )}
-      <div {...containerProps} ref={triggerRef}>
-        <input
-          type="text"
-          value={inputValue}
-          onChange={handleInputChange}
-          onBlur={handleInputBlur}
-          placeholder={placeholder}
-          disabled={disabled}
-          {...inputProps}
-        />
+      {pressable ? (
         <button
           type="button"
-          {...iconButtonProps}
+          {...containerProps}
+          ref={triggerRef as any}
+          style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
           onClick={() => !disabled && setOpen(!open)}
           disabled={disabled}
         >
+          <span {...pressableTextProps} style={!value ? { color: pressableTextStyle.placeholderColor } : undefined}>
+            {value ? formatDate(value) : placeholder}
+          </span>
           <IconSvg path={mdiCalendar} size={iconSize} color={iconColor} />
         </button>
-      </div>
+      ) : (
+        <div {...containerProps} ref={triggerRef}>
+          <input
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            disabled={disabled}
+            {...inputProps}
+          />
+          <button
+            type="button"
+            {...iconButtonProps}
+            onClick={() => !disabled && setOpen(!open)}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiCalendar} size={iconSize} color={iconColor} />
+          </button>
+        </div>
+      )}
       {error && (
         <span {...errorProps}>{error}</span>
       )}

package/src/DatePicker.native.tsx

@@ -2,19 +2,27 @@ import React, { useMemo, useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
 import { datePickerCalendarStyles } from './DatePicker.styles';
-import type { DatePickerProps } from './types';
+import type { DatePickerProps, DayIndicator } from './types';
 
 const WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 type ViewMode = 'calendar' | 'months' | 'years';
 
+function formatDateKey(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
 export const DatePicker: React.FC<DatePickerProps> = ({
   value,
   onChange,
   minDate,
   maxDate,
   disabled = false,
+  indicators,
   style,
 }) => {
   const [currentMonth, setCurrentMonth] = useState(() => value || new Date());
@@ -44,6 +52,8 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const selectorItemTextStyle = (styles.selectorItemText as any)({});
   const selectorItemTextSelectedStyle = (styles.selectorItemTextSelected as any)({});
   const iconStyle = (styles.iconColor as any)({});
+  const indicatorRowStyle = (styles.indicatorRow as any)({});
+  const indicatorStyle = (styles.indicator as any)({});
 
   const { days, monthShort, year } = useMemo(() => {
     const year = currentMonth.getFullYear();
@@ -71,13 +81,11 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       days.push({ date: new Date(year, month, day, 12, 0, 0, 0), isCurrentMonth: true });
     }
 
-    // Next month padding (fill to complete last week)
+    // Next month padding (always fill to 42 days = 6 rows for consistent height)
     // Use noon (12:00) to avoid timezone issues when date crosses day boundaries
-    const remaining = 7 - (days.length % 7);
-    if (remaining < 7) {
-      for (let day = 1; day <= remaining; day++) {
-        days.push({ date: new Date(year, month + 1, day, 12, 0, 0, 0), isCurrentMonth: false });
-      }
+    const totalCells = 42;
+    for (let day = 1; days.length < totalCells; day++) {
+      days.push({ date: new Date(year, month + 1, day, 12, 0, 0, 0), isCurrentMonth: false });
     }
 
     return { days, monthShort: MONTHS[month], year };
@@ -157,6 +165,13 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     setCurrentMonth(new Date(currentMonth.getFullYear() + 10, currentMonth.getMonth(), 1));
   };
 
+  // Helper to get indicators for a date
+  const getIndicators = (date: Date): DayIndicator[] => {
+    if (!indicators) return [];
+    const key = formatDateKey(date);
+    return indicators[key] || [];
+  };
+
   // Render month selector
   if (viewMode === 'months') {
     return (
@@ -176,7 +191,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           >
             <Text style={titleTextStyle}>{year}</Text>
           </TouchableOpacity>
-          <View style={{ width: 28 }} />
+          <View style={{ width: 32 }} />
         </View>
         <View style={monthGridStyle}>
           {MONTHS.map((month, index) => {
@@ -305,20 +320,24 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           const today = isToday(date);
           const dayDisabled = isDisabled(date);
           const disabledDayButtonStyle = (styles.dayButton as any)({ disabled: dayDisabled });
+          const dayIndicators = getIndicators(date);
 
           return (
             <View
               key={index}
               style={[
                 dayCellStyle,
-                selected && selectedDayStyle,
                 !isCurrentMonth && { opacity: 0.3 },
-                today && !selected && todayDayStyle,
                 dayDisabled && { opacity: 0.3 },
               ]}
             >
               <TouchableOpacity
-                style={[dayButtonStyle, dayDisabled && disabledDayButtonStyle]}
+                style={[
+                  dayButtonStyle,
+                  dayDisabled && disabledDayButtonStyle,
+                  selected && selectedDayStyle,
+                  today && !selected && todayDayStyle,
+                ]}
                 onPress={() => handleDayPress(date)}
                 disabled={dayDisabled}
               >
@@ -331,6 +350,14 @@ export const DatePicker: React.FC<DatePickerProps> = ({
                   {date.getDate()}
                 </Text>
               </TouchableOpacity>
+              <View style={indicatorRowStyle}>
+                {dayIndicators.slice(0, 3).map((ind, i) => (
+                  <View
+                    key={ind.key ?? i}
+                    style={[indicatorStyle, { backgroundColor: ind.color }]}
+                  />
+                ))}
+              </View>
             </View>
           );
         })}

package/src/DatePicker.styles.ts

@@ -263,12 +263,15 @@ export const datePickerCalendarStyles = defineStyle('DatePickerCalendar', (theme
     },
   }),
 
-  // Today styling - subtle background highlight
+  // Today styling - outlined circle (no fill)
   todayDay: (_props: DatePickerDynamicProps) => ({
-    backgroundColor: theme.intents.primary.light,
+    borderWidth: 1,
+    borderColor: theme.intents.primary.primary,
     borderRadius: 16,
+    backgroundColor: 'transparent',
     _web: {
-      background: theme.intents.primary.light,
+      background: 'transparent',
+      boxSizing: 'border-box',
     },
   }),
 

package/src/DatePicker.web.tsx

@@ -3,19 +3,27 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
 import { IconSvg } from './IconSvg.web';
 import { datePickerCalendarStyles } from './DatePicker.styles';
-import type { DatePickerProps } from './types';
+import type { DatePickerProps, DayIndicator } from './types';
 
 const WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 type ViewMode = 'calendar' | 'months' | 'years';
 
+function formatDateKey(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
 export const DatePicker: React.FC<DatePickerProps> = ({
   value,
   onChange,
   minDate,
   maxDate,
   disabled = false,
+  indicators,
   style,
 }) => {
   const [currentMonth, setCurrentMonth] = useState(() => value || new Date());
@@ -54,13 +62,11 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       days.push({ date: new Date(year, month, day, 12, 0, 0, 0), isCurrentMonth: true });
     }
 
-    // Next month padding (fill to complete last week)
+    // Next month padding (always fill to 42 days = 6 rows for consistent height)
     // Use noon (12:00) to avoid timezone issues when date crosses day boundaries
-    const remaining = 7 - (days.length % 7);
-    if (remaining < 7) {
-      for (let day = 1; day <= remaining; day++) {
-        days.push({ date: new Date(year, month + 1, day, 12, 0, 0, 0), isCurrentMonth: false });
-      }
+    const totalCells = 42;
+    for (let day = 1; days.length < totalCells; day++) {
+      days.push({ date: new Date(year, month + 1, day, 12, 0, 0, 0), isCurrentMonth: false });
     }
 
     return { days, monthShort: MONTHS[month], year };
@@ -157,6 +163,8 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const selectorItemTextStyle = (styles.selectorItemText as any)({});
   const selectorItemTextSelectedStyle = (styles.selectorItemTextSelected as any)({});
   const iconColorStyle = (styles.iconColor as any)({});
+  const indicatorRowStyle = (styles.indicatorRow as any)({});
+  const indicatorStyle = (styles.indicator as any)({});
 
   // Get web props for all elements
   const calendarProps = getWebProps([calendarStyle, style as any]);
@@ -174,6 +182,14 @@ export const DatePicker: React.FC<DatePickerProps> = ({
   const selectorItemSelectedProps = getWebProps([selectorItemStyle, selectorItemSelectedStyle]);
   const selectorItemTextProps = getWebProps([selectorItemTextStyle]);
   const selectorItemTextSelectedProps = getWebProps([selectorItemTextStyle, selectorItemTextSelectedStyle]);
+  const indicatorRowProps = getWebProps([indicatorRowStyle]);
+
+  // Helper to get indicators for a date
+  const getIndicators = (date: Date): DayIndicator[] => {
+    if (!indicators) return [];
+    const key = formatDateKey(date);
+    return indicators[key] || [];
+  };
 
   // Render month selector
   if (viewMode === 'months') {
@@ -196,7 +212,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           >
             <span {...titleTextProps}>{year}</span>
           </button>
-          <div style={{ width: 28 }} />
+          <div style={{ width: 32 }} />
         </div>
         <div {...monthGridProps}>
           {MONTHS.map((month, index) => {
@@ -332,6 +348,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
           const selected = isSelected(date);
           const today = isToday(date);
           const dayDisabled = isDisabled(date);
+          const dayIndicators = getIndicators(date);
 
           // Get appropriate button props (className and ref only)
           const buttonProps = dayDisabled
@@ -343,18 +360,28 @@ export const DatePicker: React.FC<DatePickerProps> = ({
                 : dayButtonProps;
 
           return (
-            <button
-              key={index}
-              type="button"
-              className={buttonProps.className}
-              style={{ opacity: (!isCurrentMonthDay || dayDisabled) ? 0.3 : 1 }}
-              onClick={() => handleDayPress(date)}
-              disabled={dayDisabled}
-            >
-              <span {...(selected ? selectedDayTextProps : dayTextProps)}>
-                {date.getDate()}
-              </span>
-            </button>
+            <div key={index} {...dayCellProps}>
+              <button
+                type="button"
+                className={buttonProps.className}
+                style={{ opacity: (!isCurrentMonthDay || dayDisabled) ? 0.3 : 1 }}
+                onClick={() => handleDayPress(date)}
+                disabled={dayDisabled}
+              >
+                <span {...(selected ? selectedDayTextProps : dayTextProps)}>
+                  {date.getDate()}
+                </span>
+              </button>
+              <div {...indicatorRowProps}>
+                {dayIndicators.slice(0, 3).map((ind, i) => (
+                  <div
+                    key={ind.key ?? i}
+                    className={getWebProps([indicatorStyle]).className}
+                    style={{ backgroundColor: ind.color }}
+                  />
+                ))}
+              </div>
+            </div>
           );
         })}
       </div>

package/src/DateTimePicker.native.tsx

@@ -14,6 +14,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   timeMode = '12h',
   minuteStep = 1,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -91,6 +92,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             minDate={minDate}
             maxDate={maxDate}
             disabled={disabled}
+            pressable={pressable}
             error={error}
             size={size}
           />
@@ -103,6 +105,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             mode={timeMode}
             minuteStep={minuteStep}
             disabled={disabled}
+            pressable={pressable}
             size={size}
           />
         </View>

package/src/DateTimePicker.web.tsx

@@ -14,6 +14,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
   timeMode = '12h',
   minuteStep = 1,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -95,6 +96,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             minDate={minDate}
             maxDate={maxDate}
             disabled={disabled}
+            pressable={pressable}
             error={error}
             size={size}
           />
@@ -107,6 +109,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
             mode={timeMode}
             minuteStep={minuteStep}
             disabled={disabled}
+            pressable={pressable}
             size={size}
           />
         </div>

package/src/InputStyles.ts

@@ -195,6 +195,35 @@ export const dateTimeInputStyles = defineStyle('DateTimeInput', (theme: Theme) =
     color: theme.intents.primary.primary,
   }),
 
+  // Pressable text (used when pressable=true instead of a text input)
+  pressableText: (_props: InputDynamicProps) => ({
+    flex: 1,
+    minWidth: 0,
+    color: theme.colors.text.primary,
+    fontWeight: '400' as const,
+    textAlign: 'left' as const,
+    // Default font size for when size variant isn't specified
+    fontSize: theme.sizes.input.md.fontSize,
+    // Placeholder color for native when no value is set
+    placeholderColor: theme.colors.text.tertiary,
+    _web: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      pointerEvents: 'none',
+    },
+    variants: {
+      disabled: {
+        true: { color: theme.colors.text.tertiary },
+        false: { color: theme.colors.text.primary },
+      },
+      // $iterator expands for each input size
+      size: {
+        fontSize: theme.sizes.$input.fontSize,
+      },
+    },
+  }),
+
   // Icon color helper
   iconColor: (_props: InputDynamicProps) => ({
     color: theme.colors.text.secondary,

package/src/TimeInput.native.tsx

@@ -13,6 +13,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   mode = '12h',
   minuteStep = 1,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -118,23 +119,37 @@ export const TimeInput: React.FC<TimeInputProps> = ({
           {label}
         </Text>
       )}
-      <View style={inputContainerStyle}>
-        <TextInput
-          value={inputValue}
-          onChangeText={handleInputChange}
-          onBlur={handleInputBlur}
-          placeholder={placeholder}
-          editable={!disabled}
-          style={textInputStyle}
-        />
+      {pressable ? (
         <TouchableOpacity
-          style={iconButtonStyle}
+          style={inputContainerStyle}
           onPress={() => !disabled && setOpen(true)}
           disabled={disabled}
+          activeOpacity={0.7}
         >
+          <Text style={[textInputStyle, !value && { color: (styles.pressableText as any)({ disabled, size }).placeholderColor }]}>
+            {value ? formatTime(value) : placeholder}
+          </Text>
           <MaterialDesignIcons name="clock-outline" size={iconStyle.width} style={iconStyle} />
         </TouchableOpacity>
-      </View>
+      ) : (
+        <View style={inputContainerStyle}>
+          <TextInput
+            value={inputValue}
+            onChangeText={handleInputChange}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            editable={!disabled}
+            style={textInputStyle}
+          />
+          <TouchableOpacity
+            style={iconButtonStyle}
+            onPress={() => !disabled && setOpen(true)}
+            disabled={disabled}
+          >
+            <MaterialDesignIcons name="clock-outline" size={iconStyle.width} style={iconStyle} />
+          </TouchableOpacity>
+        </View>
+      )}
       {error && (
         <Text style={errorTextStyle}>
           {error}

package/src/TimeInput.web.tsx

@@ -17,6 +17,7 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   mode = '12h',
   minuteStep = 1,
   disabled = false,
+  pressable = false,
   error,
   size = 'md',
   style,
@@ -132,30 +133,50 @@ export const TimeInput: React.FC<TimeInputProps> = ({
   const errorProps = getWebProps([errorTextStyle]);
   const popoverProps = getWebProps([popoverContentStyle]);
 
+  // Pressable text style (reuses input style but renders as a button)
+  const pressableTextStyle = (styles.pressableText as any)({ disabled, size });
+  const pressableTextProps = getWebProps([pressableTextStyle]);
+
   return (
     <div style={style as React.CSSProperties}>
       {label && (
         <span {...labelProps}>{label}</span>
       )}
-      <div {...containerProps} ref={triggerRef}>
-        <input
-          type="text"
-          value={inputValue}
-          onChange={handleInputChange}
-          onBlur={handleInputBlur}
-          placeholder={placeholder}
-          disabled={disabled}
-          {...inputProps}
-        />
+      {pressable ? (
         <button
           type="button"
-          {...iconButtonProps}
+          {...containerProps}
+          ref={triggerRef as any}
+          style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
           onClick={() => !disabled && setOpen(!open)}
           disabled={disabled}
         >
+          <span {...pressableTextProps} style={!value ? { color: pressableTextStyle.placeholderColor } : undefined}>
+            {value ? formatTime(value) : placeholder}
+          </span>
           <IconSvg path={mdiClockOutline} size={iconSize} color={iconColor} />
         </button>
-      </div>
+      ) : (
+        <div {...containerProps} ref={triggerRef}>
+          <input
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            placeholder={placeholder}
+            disabled={disabled}
+            {...inputProps}
+          />
+          <button
+            type="button"
+            {...iconButtonProps}
+            onClick={() => !disabled && setOpen(!open)}
+            disabled={disabled}
+          >
+            <IconSvg path={mdiClockOutline} size={iconSize} color={iconColor} />
+          </button>
+        </div>
+      )}
       {error && (
         <span {...errorProps}>{error}</span>
       )}

package/src/index.native.ts

@@ -12,4 +12,5 @@ export type {
   DateInputProps,
   TimeInputProps,
   DateTimePickerProps,
+  DayIndicator,
 } from './types';

package/src/index.ts

@@ -12,4 +12,5 @@ export type {
   DateInputProps,
   TimeInputProps,
   DateTimePickerProps,
+  DayIndicator,
 } from './types';

package/src/types.ts

@@ -34,6 +34,8 @@ export interface DateInputProps {
   minDate?: Date;
   maxDate?: Date;
   disabled?: boolean;
+  /** When true, the entire input area is pressable to open the calendar instead of being a text input. */
+  pressable?: boolean;
   error?: string;
   size?: Size;
   style?: ViewStyle;
@@ -47,6 +49,8 @@ export interface TimeInputProps {
   mode?: '12h' | '24h';
   minuteStep?: number;
   disabled?: boolean;
+  /** When true, the entire input area is pressable to open the time picker instead of being a text input. */
+  pressable?: boolean;
   error?: string;
   size?: Size;
   style?: ViewStyle;
@@ -61,6 +65,8 @@ export interface DateTimePickerProps {
   timeMode?: '12h' | '24h';
   minuteStep?: number;
   disabled?: boolean;
+  /** When true, both input areas are pressable to open their pickers instead of being text inputs. */
+  pressable?: boolean;
   error?: string;
   size?: Size;
   style?: ViewStyle;