rn-inputforge 0.3.0 → 0.4.0

package/lib/module/components/FieldFlowCheckbox/FieldFlowCheckbox.js

@@ -0,0 +1,126 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { renderFieldFlowIcon } from '../../icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function FieldFlowCheckbox({
+  value,
+  onChange,
+  label,
+  helperText,
+  errorText,
+  disabled,
+  required,
+  labelPosition = 'right',
+  checkedIcon = 'check',
+  uncheckedIcon,
+  leftIcon,
+  iconSize = 14,
+  checkedColor,
+  uncheckedColor,
+  boxSize = 22,
+  boxStyle,
+  containerStyle,
+  labelStyle,
+  helperStyle,
+  errorStyle,
+  theme: themeOverride,
+  testID
+}) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(() => themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme, [contextTheme, themeOverride]);
+  const styles = useMemo(() => createStyles(theme, Boolean(errorText), Boolean(disabled), boxSize), [theme, errorText, disabled, boxSize]);
+  const checked = Boolean(value);
+  const activeColor = checkedColor ?? theme.colors.borderFocused;
+  const idleColor = uncheckedColor ?? (errorText ? theme.colors.borderError : theme.colors.border);
+  const box = /*#__PURE__*/_jsx(View, {
+    style: [styles.box, checked && {
+      backgroundColor: activeColor,
+      borderColor: activeColor
+    }, !checked && {
+      borderColor: idleColor
+    }, disabled ? styles.boxDisabled : null, boxStyle],
+    children: checked ? renderFieldFlowIcon(checkedIcon, '#FFFFFF', iconSize) : uncheckedIcon ? renderFieldFlowIcon(uncheckedIcon, idleColor, iconSize) : null
+  });
+  const labelNode = label ? /*#__PURE__*/_jsxs(Text, {
+    style: [styles.label, labelStyle],
+    children: [label, required ? ' *' : '']
+  }) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.wrapper, containerStyle],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => !disabled && onChange(!checked),
+      disabled: disabled,
+      style: styles.row,
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked,
+        disabled: Boolean(disabled)
+      },
+      accessibilityLabel: label,
+      hitSlop: 6,
+      children: [leftIcon ? /*#__PURE__*/_jsx(View, {
+        style: styles.leftIcon,
+        children: renderFieldFlowIcon(leftIcon, theme.colors.icon, 18)
+      }) : null, labelPosition === 'left' ? labelNode : null, box, labelPosition === 'right' ? labelNode : null]
+    }), errorText ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.errorText, errorStyle, helperStyle],
+      children: errorText
+    }) : helperText ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.helperText, helperStyle],
+      children: helperText
+    }) : null]
+  });
+}
+function createStyles(theme, _hasError, disabled, boxSize) {
+  return StyleSheet.create({
+    wrapper: {
+      marginBottom: theme.spacing.gap * 2,
+      opacity: disabled ? 0.6 : 1
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing.gap
+    },
+    leftIcon: {
+      marginRight: 2
+    },
+    box: {
+      width: boxSize,
+      height: boxSize,
+      borderRadius: 6,
+      borderWidth: theme.spacing.borderWidthFocused,
+      backgroundColor: theme.colors.background,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    boxDisabled: {
+      backgroundColor: theme.colors.backgroundDisabled
+    },
+    label: {
+      flex: 1,
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text,
+      fontWeight: '400',
+      fontFamily: theme.typography.fontFamily
+    },
+    helperText: {
+      marginTop: theme.spacing.gap / 1.5,
+      marginLeft: boxSize + theme.spacing.gap,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.label
+    },
+    errorText: {
+      marginTop: theme.spacing.gap / 1.5,
+      marginLeft: boxSize + theme.spacing.gap,
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.error
+    }
+  });
+}
+//# sourceMappingURL=FieldFlowCheckbox.js.map

package/lib/module/components/FieldFlowCheckbox/FieldFlowCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Pressable","StyleSheet","Text","View","useFieldFlowTheme","mergeDeep","defaultTheme","renderFieldFlowIcon","jsx","_jsx","jsxs","_jsxs","FieldFlowCheckbox","value","onChange","label","helperText","errorText","disabled","required","labelPosition","checkedIcon","uncheckedIcon","leftIcon","iconSize","checkedColor","uncheckedColor","boxSize","boxStyle","containerStyle","labelStyle","helperStyle","errorStyle","theme","themeOverride","testID","contextTheme","styles","createStyles","Boolean","checked","activeColor","colors","borderFocused","idleColor","borderError","border","box","style","backgroundColor","borderColor","boxDisabled","children","labelNode","wrapper","onPress","row","accessibilityRole","accessibilityState","accessibilityLabel","hitSlop","icon","_hasError","create","marginBottom","spacing","gap","opacity","flexDirection","alignItems","marginRight","width","height","borderRadius","borderWidth","borderWidthFocused","background","justifyContent","backgroundDisabled","flex","fontSize","typography","color","text","fontWeight","fontFamily","marginTop","marginLeft","helperFontSize","error"],"sourceRoot":"../../../../src","sources":["components/FieldFlowCheckbox/FieldFlowCheckbox.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/FieldFlowCheckbox/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { FieldFlowCheckbox } from './FieldFlowCheckbox';
+//# sourceMappingURL=index.js.map

package/lib/module/components/FieldFlowCheckbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FieldFlowCheckbox"],"sourceRoot":"../../../../src","sources":["components/FieldFlowCheckbox/index.ts"],"mappings":";;AAAA,SAASA,iBAAiB,QAAQ,qBAAqB","ignoreList":[]}

package/lib/module/components/FieldFlowDateTimePicker/FieldFlowDateTimePicker.js

@@ -0,0 +1,531 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useFieldFlowTheme, mergeDeep } from '../../theme/ThemeProvider';
+import { defaultTheme } from '../../theme/defaultTheme';
+import { useFieldState } from '../../hooks/useFieldState';
+import { createStyles as createInputStyles, iconColorFor } from '../FieldFlowInput/styles';
+import { renderFieldFlowIcon } from '../../icons/renderIcon';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+function pad(n) {
+  return n < 10 ? `0${n}` : String(n);
+}
+function parseValue(value, mode) {
+  const now = new Date();
+  if (!value) return now;
+  if (mode === 'time') {
+    const [h, m] = value.split(':').map(Number);
+    const d = new Date(now);
+    d.setHours(h || 0, m || 0, 0, 0);
+    return d;
+  }
+  if (mode === 'datetime' && value.includes('T')) {
+    const [datePart, timePart] = value.split('T');
+    const [y, mo, day] = datePart.split('-').map(Number);
+    const [h, m] = (timePart || '00:00').split(':').map(Number);
+    return new Date(y, (mo || 1) - 1, day || 1, h || 0, m || 0);
+  }
+  const [y, mo, day] = value.split('-').map(Number);
+  if (!y) return now;
+  return new Date(y, (mo || 1) - 1, day || 1);
+}
+function toOutput(date, mode) {
+  const y = date.getFullYear();
+  const mo = pad(date.getMonth() + 1);
+  const d = pad(date.getDate());
+  const h = pad(date.getHours());
+  const mi = pad(date.getMinutes());
+  if (mode === 'time') return `${h}:${mi}`;
+  if (mode === 'datetime') return `${y}-${mo}-${d}T${h}:${mi}`;
+  return `${y}-${mo}-${d}`;
+}
+function formatTime(date, hourCycle) {
+  if (hourCycle === 12) {
+    const h = date.getHours();
+    const ampm = h >= 12 ? 'PM' : 'AM';
+    const h12 = h % 12 || 12;
+    return `${h12}:${pad(date.getMinutes())} ${ampm}`;
+  }
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function defaultFormat(date, mode, hourCycle) {
+  if (mode === 'time') return formatTime(date, hourCycle);
+  const dateStr = `${MONTHS[date.getMonth()].slice(0, 3)} ${date.getDate()}, ${date.getFullYear()}`;
+  if (mode === 'date') return dateStr;
+  return `${dateStr} · ${formatTime(date, hourCycle)}`;
+}
+function daysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function startWeekday(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+export function FieldFlowDateTimePicker({
+  mode = 'date',
+  value,
+  onChange,
+  label,
+  placeholder = 'Select',
+  helperText,
+  errorText,
+  hasError,
+  successText,
+  isSuccess,
+  disabled,
+  required,
+  clearable,
+  variant = 'outlined',
+  minimumDate,
+  maximumDate,
+  hourCycle = 24,
+  confirmLabel = 'Done',
+  cancelLabel = 'Cancel',
+  title,
+  leftIcon,
+  rightIcon,
+  iconSize = 18,
+  onLeftIconPress,
+  onRightIconPress,
+  formatDisplay,
+  renderTrigger,
+  containerStyle,
+  triggerStyle,
+  labelStyle,
+  helperStyle,
+  modalStyle,
+  theme: themeOverride,
+  testID
+}) {
+  const contextTheme = useFieldFlowTheme();
+  const theme = useMemo(() => themeOverride ? mergeDeep(contextTheme ?? defaultTheme, themeOverride) : contextTheme ?? defaultTheme, [contextTheme, themeOverride]);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(() => parseValue(value, mode));
+  const [viewYear, setViewYear] = useState(draft.getFullYear());
+  const [viewMonth, setViewMonth] = useState(draft.getMonth());
+  const state = useFieldState({
+    isFocused: open,
+    hasError: Boolean(hasError || errorText),
+    isSuccess,
+    disabled
+  });
+  const inputStyles = useMemo(() => createInputStyles(theme, state, false, variant), [theme, state, variant]);
+  const styles = useMemo(() => createModalStyles(theme), [theme]);
+  const iconColor = iconColorFor(theme, state);
+  const display = useMemo(() => {
+    if (!value) return '';
+    const d = parseValue(value, mode);
+    return formatDisplay ? formatDisplay(d, mode) : defaultFormat(d, mode, hourCycle);
+  }, [value, mode, formatDisplay, hourCycle]);
+  const resolvedLeft = leftIcon !== undefined ? leftIcon : mode === 'time' ? 'clock' : 'calendar';
+  const resolvedRight = rightIcon !== undefined ? rightIcon : 'chevronDown';
+  const min = minimumDate ? parseValue(minimumDate, 'date') : undefined;
+  const max = maximumDate ? parseValue(maximumDate, 'date') : undefined;
+  const openPicker = useCallback(() => {
+    if (disabled) return;
+    const d = parseValue(value, mode);
+    setDraft(d);
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+    setOpen(true);
+  }, [disabled, value, mode]);
+  const confirm = useCallback(() => {
+    onChange(toOutput(draft, mode));
+    setOpen(false);
+  }, [draft, mode, onChange]);
+  const isDayDisabled = day => {
+    const d = new Date(viewYear, viewMonth, day);
+    if (min && d < new Date(min.getFullYear(), min.getMonth(), min.getDate())) return true;
+    if (max && d > new Date(max.getFullYear(), max.getMonth(), max.getDate())) return true;
+    return false;
+  };
+  const calendarCells = useMemo(() => {
+    const total = daysInMonth(viewYear, viewMonth);
+    const start = startWeekday(viewYear, viewMonth);
+    const cells = [];
+    for (let i = 0; i < start; i++) cells.push(null);
+    for (let d = 1; d <= total; d++) cells.push(d);
+    while (cells.length % 7 !== 0) cells.push(null);
+    return cells;
+  }, [viewYear, viewMonth]);
+  const hours = hourCycle === 12 ? Array.from({
+    length: 12
+  }, (_, i) => i + 1) : Array.from({
+    length: 24
+  }, (_, i) => i);
+  const minutes = Array.from({
+    length: 60
+  }, (_, i) => i);
+  const trigger = renderTrigger ? renderTrigger({
+    open: openPicker,
+    display,
+    value
+  }) : /*#__PURE__*/_jsxs(View, {
+    style: [inputStyles.wrapper, containerStyle],
+    testID: testID,
+    children: [label && variant !== 'floating' ? /*#__PURE__*/_jsxs(Text, {
+      style: [inputStyles.label, labelStyle],
+      children: [label, required ? ' *' : '']
+    }) : null, /*#__PURE__*/_jsxs(Pressable, {
+      onPress: openPicker,
+      disabled: disabled,
+      style: [inputStyles.inputContainer, triggerStyle],
+      accessibilityRole: "button",
+      accessibilityLabel: label ?? 'Date picker',
+      accessibilityState: {
+        disabled: Boolean(disabled)
+      },
+      children: [resolvedLeft ? /*#__PURE__*/_jsx(Pressable, {
+        onPress: onLeftIconPress,
+        disabled: !onLeftIconPress,
+        style: [inputStyles.iconSlot, inputStyles.iconSlotLeft],
+        hitSlop: 8,
+        children: renderFieldFlowIcon(resolvedLeft, iconColor, iconSize)
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [inputStyles.input, {
+          paddingVertical: theme.spacing.paddingVertical
+        }, !display && {
+          color: theme.colors.placeholder
+        }],
+        numberOfLines: 1,
+        children: display || placeholder
+      }), clearable && value && !disabled ? /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => onChange(''),
+        style: [inputStyles.iconSlot, inputStyles.iconSlotRight],
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear",
+        children: renderFieldFlowIcon('clear', iconColor, iconSize)
+      }) : resolvedRight ? /*#__PURE__*/_jsx(Pressable, {
+        onPress: onRightIconPress ?? openPicker,
+        style: [inputStyles.iconSlot, inputStyles.iconSlotRight],
+        hitSlop: 8,
+        children: renderFieldFlowIcon(resolvedRight, iconColor, iconSize)
+      }) : null]
+    }), (helperText || errorText || successText) && /*#__PURE__*/_jsx(View, {
+      style: inputStyles.footerRow,
+      children: errorText ? /*#__PURE__*/_jsx(Text, {
+        style: [inputStyles.errorText, helperStyle],
+        children: errorText
+      }) : successText ? /*#__PURE__*/_jsx(Text, {
+        style: [inputStyles.successText, helperStyle],
+        children: successText
+      }) : helperText ? /*#__PURE__*/_jsx(Text, {
+        style: [inputStyles.helperText, helperStyle],
+        children: helperText
+      }) : null
+    })]
+  });
+  const showDate = mode === 'date' || mode === 'datetime';
+  const showTime = mode === 'time' || mode === 'datetime';
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [trigger, /*#__PURE__*/_jsx(Modal, {
+      visible: open,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: () => setOpen(false),
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.backdrop,
+        onPress: () => setOpen(false),
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: [styles.sheet, modalStyle],
+          onPress: e => e.stopPropagation(),
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.header,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.title,
+              children: title ?? label ?? 'Select'
+            }), /*#__PURE__*/_jsx(Pressable, {
+              onPress: () => setOpen(false),
+              hitSlop: 8,
+              children: renderFieldFlowIcon('clear', theme.colors.icon, 18)
+            })]
+          }), showDate ? /*#__PURE__*/_jsxs(View, {
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.monthRow,
+              children: [/*#__PURE__*/_jsx(Pressable, {
+                onPress: () => {
+                  if (viewMonth === 0) {
+                    setViewMonth(11);
+                    setViewYear(y => y - 1);
+                  } else setViewMonth(m => m - 1);
+                },
+                hitSlop: 8,
+                children: renderFieldFlowIcon('chevronLeft', theme.colors.icon, 20)
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.monthLabel,
+                children: [MONTHS[viewMonth], " ", viewYear]
+              }), /*#__PURE__*/_jsx(Pressable, {
+                onPress: () => {
+                  if (viewMonth === 11) {
+                    setViewMonth(0);
+                    setViewYear(y => y + 1);
+                  } else setViewMonth(m => m + 1);
+                },
+                hitSlop: 8,
+                children: renderFieldFlowIcon('chevronRight', theme.colors.icon, 20)
+              })]
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.weekRow,
+              children: WEEKDAYS.map(d => /*#__PURE__*/_jsx(Text, {
+                style: styles.weekday,
+                children: d
+              }, d))
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.grid,
+              children: calendarCells.map((day, idx) => {
+                if (day == null) return /*#__PURE__*/_jsx(View, {
+                  style: styles.dayCell
+                }, `e-${idx}`);
+                const selected = draft.getFullYear() === viewYear && draft.getMonth() === viewMonth && draft.getDate() === day;
+                const dayDisabled = isDayDisabled(day);
+                return /*#__PURE__*/_jsx(Pressable, {
+                  style: [styles.dayCell, selected && styles.daySelected, dayDisabled && styles.dayDisabled],
+                  disabled: dayDisabled,
+                  onPress: () => {
+                    const next = new Date(draft);
+                    next.setFullYear(viewYear, viewMonth, day);
+                    setDraft(next);
+                  },
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.dayText, selected && styles.dayTextSelected],
+                    children: day
+                  })
+                }, `${viewYear}-${viewMonth}-${day}`);
+              })
+            })]
+          }) : null, showTime ? /*#__PURE__*/_jsxs(View, {
+            style: styles.timeRow,
+            children: [/*#__PURE__*/_jsx(ScrollView, {
+              style: styles.timeCol,
+              showsVerticalScrollIndicator: false,
+              children: hours.map(h => {
+                const currentH = draft.getHours();
+                const selected = hourCycle === 12 ? (currentH % 12 || 12) === h : currentH === h;
+                return /*#__PURE__*/_jsx(Pressable, {
+                  style: [styles.timeItem, selected && styles.timeItemSelected],
+                  onPress: () => {
+                    const next = new Date(draft);
+                    if (hourCycle === 12) {
+                      const isPM = draft.getHours() >= 12;
+                      let hour24 = h % 12;
+                      if (isPM) hour24 += 12;
+                      next.setHours(hour24);
+                    } else {
+                      next.setHours(h);
+                    }
+                    setDraft(next);
+                  },
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.timeText, selected && styles.timeTextSelected],
+                    children: pad(h)
+                  })
+                }, `h-${h}`);
+              })
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.timeColon,
+              children: ":"
+            }), /*#__PURE__*/_jsx(ScrollView, {
+              style: styles.timeCol,
+              showsVerticalScrollIndicator: false,
+              children: minutes.map(m => {
+                const selected = draft.getMinutes() === m;
+                return /*#__PURE__*/_jsx(Pressable, {
+                  style: [styles.timeItem, selected && styles.timeItemSelected],
+                  onPress: () => {
+                    const next = new Date(draft);
+                    next.setMinutes(m);
+                    setDraft(next);
+                  },
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.timeText, selected && styles.timeTextSelected],
+                    children: pad(m)
+                  })
+                }, `m-${m}`);
+              })
+            }), hourCycle === 12 ? /*#__PURE__*/_jsx(View, {
+              style: styles.ampmCol,
+              children: ['AM', 'PM'].map(period => {
+                const isPM = draft.getHours() >= 12;
+                const selected = period === 'PM' ? isPM : !isPM;
+                return /*#__PURE__*/_jsx(Pressable, {
+                  style: [styles.timeItem, selected && styles.timeItemSelected],
+                  onPress: () => {
+                    const next = new Date(draft);
+                    const h = next.getHours();
+                    if (period === 'AM' && h >= 12) next.setHours(h - 12);
+                    if (period === 'PM' && h < 12) next.setHours(h + 12);
+                    setDraft(next);
+                  },
+                  children: /*#__PURE__*/_jsx(Text, {
+                    style: [styles.timeText, selected && styles.timeTextSelected],
+                    children: period
+                  })
+                }, period);
+              })
+            }) : null]
+          }) : null, /*#__PURE__*/_jsxs(View, {
+            style: styles.actions,
+            children: [/*#__PURE__*/_jsx(Pressable, {
+              onPress: () => setOpen(false),
+              style: styles.btnGhost,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.btnGhostText,
+                children: cancelLabel
+              })
+            }), /*#__PURE__*/_jsx(Pressable, {
+              onPress: confirm,
+              style: styles.btnPrimary,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.btnPrimaryText,
+                children: confirmLabel
+              })
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+function createModalStyles(theme) {
+  return StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0,0,0,0.45)',
+      justifyContent: 'center',
+      padding: 20
+    },
+    sheet: {
+      backgroundColor: theme.colors.background,
+      borderRadius: theme.spacing.borderRadius + 4,
+      padding: 16,
+      maxHeight: '85%'
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 12
+    },
+    title: {
+      fontSize: theme.typography.fontSize + 2,
+      fontWeight: '600',
+      color: theme.colors.text,
+      fontFamily: theme.typography.fontFamily
+    },
+    monthRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 10
+    },
+    monthLabel: {
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600',
+      color: theme.colors.text
+    },
+    weekRow: {
+      flexDirection: 'row',
+      marginBottom: 4
+    },
+    weekday: {
+      flex: 1,
+      textAlign: 'center',
+      fontSize: theme.typography.helperFontSize,
+      color: theme.colors.placeholder,
+      fontWeight: '500'
+    },
+    grid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    },
+    dayCell: {
+      width: `${100 / 7}%`,
+      aspectRatio: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: theme.spacing.borderRadius
+    },
+    daySelected: {
+      backgroundColor: theme.colors.borderFocused
+    },
+    dayDisabled: {
+      opacity: 0.3
+    },
+    dayText: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text
+    },
+    dayTextSelected: {
+      color: '#FFFFFF',
+      fontWeight: '600'
+    },
+    timeRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: 12,
+      maxHeight: 160
+    },
+    timeCol: {
+      maxHeight: 160,
+      width: 64
+    },
+    ampmCol: {
+      marginLeft: 8,
+      justifyContent: 'center',
+      gap: 8
+    },
+    timeColon: {
+      fontSize: 22,
+      fontWeight: '700',
+      color: theme.colors.text,
+      marginHorizontal: 6
+    },
+    timeItem: {
+      paddingVertical: 8,
+      alignItems: 'center',
+      borderRadius: theme.spacing.borderRadius
+    },
+    timeItemSelected: {
+      backgroundColor: theme.colors.borderFocused
+    },
+    timeText: {
+      fontSize: theme.typography.fontSize,
+      color: theme.colors.text
+    },
+    timeTextSelected: {
+      color: '#FFFFFF',
+      fontWeight: '600'
+    },
+    actions: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      gap: 12,
+      marginTop: 16
+    },
+    btnGhost: {
+      paddingHorizontal: 14,
+      paddingVertical: 10
+    },
+    btnGhostText: {
+      color: theme.colors.label,
+      fontSize: theme.typography.fontSize,
+      fontWeight: '500'
+    },
+    btnPrimary: {
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+      backgroundColor: theme.colors.borderFocused,
+      borderRadius: theme.spacing.borderRadius
+    },
+    btnPrimaryText: {
+      color: '#FFFFFF',
+      fontSize: theme.typography.fontSize,
+      fontWeight: '600'
+    }
+  });
+}
+//# sourceMappingURL=FieldFlowDateTimePicker.js.map