@solostylist/ui-kit-native 1.0.1 → 1.0.2

package/dist/s-date-picker/s-date-picker.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-import { IconButton, Modal, Portal, Text, TextInput } from 'react-native-paper';
+import { Pressable, View } from 'react-native';
+import { Modal, Portal, TextInput } from 'react-native-paper';
 import { SButton } from '../s-button';
-import { SForm } from '../s-form';
+import { SIconButton } from '../s-icon-button';
+import { SText } from '../s-text';
+import { STextField } from '../s-text-field';
 import { useSTheme } from '../theme';
 /**
  * A standardized date picker component that provides consistent form labeling and date selection.
- * Synced with web SDatePicker from @solostylist/ui-kit.
  */
 export const SDatePicker = ({ label, required = false, error, hint, value, onChange, placeholder = 'Select a date', disabled = false, minDate, maxDate, format = 'MM/DD/YYYY', size = 'medium', variant = 'outlined', }) => {
     const { theme } = useSTheme();
@@ -104,117 +105,57 @@ export const SDatePicker = ({ label, required = false, error, hint, value, onCha
         'December',
     ];
     const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    const styles = StyleSheet.create({
-        inputContainer: {
-            position: 'relative',
-        },
-        input: {
-            ...(size === 'small'
-                ? {
-                    height: 36,
-                }
-                : {
-                    height: 40,
-                }),
-        },
-        content: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: size === 'small' ? theme.typography.fontSize.sm : theme.typography.fontSize.md,
-        },
-        modalContainer: {
-            backgroundColor: theme.colors.background.paper,
-            margin: 20,
-            borderRadius: theme.borderRadius.lg,
-            padding: 20,
-            maxWidth: 400,
-            alignSelf: 'center',
-            width: '100%',
-        },
-        header: {
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: theme.spacing.lg,
-        },
-        monthYearText: {
-            fontSize: theme.typography.fontSize.lg,
-            fontFamily: theme.typography.fontFamily,
-            fontWeight: '600',
-            color: theme.colors.text.primary,
-        },
-        headerButtons: {
-            flexDirection: 'row',
-            gap: theme.spacing.xs,
-        },
-        weekRow: {
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-            marginBottom: theme.spacing.sm,
-        },
-        dayNameText: {
-            width: 40,
-            textAlign: 'center',
-            fontSize: theme.typography.fontSize.sm,
-            fontFamily: theme.typography.fontFamily,
-            fontWeight: '600',
-            color: theme.colors.text.secondary,
-        },
-        calendarGrid: {
-            gap: 4,
-        },
-        calendarRow: {
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-        },
-        dayButton: {
-            width: 40,
-            height: 40,
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: theme.borderRadius.full,
-        },
-        dayButtonSelected: {
-            backgroundColor: theme.colors.primary[500],
-        },
-        dayButtonDisabled: {
-            opacity: 0.3,
-        },
-        dayText: {
-            fontSize: theme.typography.fontSize.sm,
-            fontFamily: theme.typography.fontFamily,
-            color: theme.colors.text.primary,
-        },
-        dayTextSelected: {
-            color: theme.colors.primary.contrastText,
-            fontWeight: '600',
-        },
-        dayTextDisabled: {
-            color: theme.colors.text.disabled,
-        },
-        footer: {
-            flexDirection: 'row',
-            justifyContent: 'flex-end',
-            gap: theme.spacing.sm,
-            marginTop: theme.spacing.lg,
-        },
-    });
     const calendarDays = generateCalendarDays();
-    return (_jsxs(SForm, { label: label, hint: hint, error: error, required: required, children: [_jsx(View, { style: styles.inputContainer, children: _jsx(Pressable, { onPress: openPicker, disabled: disabled, children: _jsx(TextInput, { mode: variant, placeholder: placeholder, placeholderTextColor: theme.colors.divider, value: formatDate(selectedDate), editable: false, error: !!error, disabled: disabled, dense: size === 'small', right: _jsx(TextInput.Icon, { icon: selectedDate && !disabled ? 'close' : 'calendar', onPress: selectedDate && !disabled ? handleClear : openPicker, forceTextInputFocus: false, size: theme.iconSize.xs }), style: styles.input, contentStyle: styles.content, pointerEvents: "none" }) }) }), _jsx(Portal, { children: _jsxs(Modal, { visible: isPickerVisible, onDismiss: closePicker, contentContainerStyle: styles.modalContainer, children: [_jsxs(View, { style: styles.header, children: [_jsx(View, { style: styles.headerButtons, children: _jsx(IconButton, { icon: "chevron-left", size: 24, onPress: goToPreviousMonth }) }), _jsxs(Text, { style: styles.monthYearText, children: [monthNames[currentMonth.getMonth()], " ", currentMonth.getFullYear()] }), _jsx(View, { style: styles.headerButtons, children: _jsx(IconButton, { icon: "chevron-right", size: 24, onPress: goToNextMonth }) })] }), _jsx(View, { style: styles.weekRow, children: dayNames.map((day) => (_jsx(Text, { style: styles.dayNameText, children: day }, day))) }), _jsx(View, { style: styles.calendarGrid, children: Array.from({ length: Math.ceil(calendarDays.length / 7) }).map((_, weekIndex) => (_jsx(View, { style: styles.calendarRow, children: calendarDays.slice(weekIndex * 7, weekIndex * 7 + 7).map((date, dayIndex) => {
+    return (_jsxs(View, { children: [_jsx(Pressable, { onPress: openPicker, disabled: disabled, children: _jsx(STextField, { label: label, hint: hint, error: error, required: required, variant: variant, placeholder: placeholder, value: formatDate(selectedDate), editable: false, disabled: disabled, size: size, right: _jsx(TextInput.Icon, { icon: selectedDate && !disabled ? 'close' : 'calendar', onPress: selectedDate && !disabled ? handleClear : openPicker, forceTextInputFocus: false, size: theme.iconSize.xs }), pointerEvents: "none" }) }), _jsx(Portal, { children: _jsxs(Modal, { visible: isPickerVisible, onDismiss: closePicker, contentContainerStyle: {
+                        backgroundColor: theme.colors.background.paper,
+                        margin: 20,
+                        borderRadius: theme.borderRadius.lg,
+                        padding: 20,
+                        maxWidth: 400,
+                        alignSelf: 'center',
+                        width: '100%',
+                    }, children: [_jsxs(View, { style: {
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginBottom: theme.spacing.lg,
+                            }, children: [_jsx(SIconButton, { icon: "chevron-left", size: "medium", onPress: goToPreviousMonth }), _jsxs(SText, { variant: "subtitle2", children: [monthNames[currentMonth.getMonth()], " ", currentMonth.getFullYear()] }), _jsx(SIconButton, { icon: "chevron-right", size: "medium", onPress: goToNextMonth })] }), _jsx(View, { style: {
+                                flexDirection: 'row',
+                                marginBottom: theme.spacing.sm,
+                            }, children: dayNames.map((day) => (_jsx(SText, { variant: "caption", style: {
+                                    width: '14.28%',
+                                    textAlign: 'center',
+                                }, children: day }, day))) }), _jsx(View, { style: { gap: 4 }, children: Array.from({ length: Math.ceil(calendarDays.length / 7) }).map((_, weekIndex) => (_jsx(View, { style: { flexDirection: 'row' }, children: calendarDays.slice(weekIndex * 7, weekIndex * 7 + 7).map((date, dayIndex) => {
                                     if (!date) {
-                                        return _jsx(View, { style: styles.dayButton }, `empty-${dayIndex}`);
+                                        return (_jsx(View, { style: {
+                                                width: '14.28%',
+                                                height: 40,
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                            } }, `empty-${dayIndex}`));
                                     }
                                     const isDisabled = isDateDisabled(date);
                                     const isSelected = isDateSelected(date);
-                                    return (_jsx(Pressable, { onPress: () => !isDisabled && handleDateSelect(date), disabled: isDisabled, style: [
-                                            styles.dayButton,
-                                            isSelected && styles.dayButtonSelected,
-                                            isDisabled && styles.dayButtonDisabled,
-                                        ], children: _jsx(Text, { style: [
-                                                styles.dayText,
-                                                isSelected && styles.dayTextSelected,
-                                                isDisabled && styles.dayTextDisabled,
-                                            ], children: date.getDate() }) }, date.toISOString()));
-                                }) }, weekIndex))) }), _jsxs(View, { style: styles.footer, children: [_jsx(SButton, { variant: "text", onPress: closePicker, children: "Cancel" }), _jsx(SButton, { variant: "text", onPress: () => selectedDate && handleDateSelect(selectedDate), children: "OK" })] })] }) })] }));
+                                    return (_jsx(Pressable, { onPress: () => !isDisabled && handleDateSelect(date), disabled: isDisabled, style: {
+                                            width: '14.28%',
+                                            height: 40,
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            ...(isDisabled && { opacity: 0.3 }),
+                                        }, children: _jsx(View, { style: {
+                                                width: 36,
+                                                height: 36,
+                                                borderRadius: theme.borderRadius.full,
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                ...(isSelected && { backgroundColor: theme.colors.primary[500] }),
+                                            }, children: _jsx(SText, { children: date.getDate() }) }) }, date.toISOString()));
+                                }) }, weekIndex))) }), _jsxs(View, { style: {
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: theme.spacing.sm,
+                                marginTop: theme.spacing.lg,
+                            }, children: [_jsx(SButton, { variant: "outlined", onPress: closePicker, children: "Cancel" }), _jsx(SButton, { onPress: () => selectedDate && handleDateSelect(selectedDate), children: "OK" })] })] }) })] }));
 };
 SDatePicker.displayName = 'SDatePicker';
 export default SDatePicker;

package/dist/s-date-time-picker/s-date-time-picker.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 /**
  * Props interface for SDateTimePicker component
- * Synced with web SDateTimePicker from @solostylist/ui-kit
  */
 export interface SDateTimePickerProps {
     /** Field label displayed above the datetime picker */
@@ -39,7 +38,6 @@ export interface SDateTimePickerProps {
 }
 /**
  * A standardized date and time picker component that provides consistent form labeling and datetime selection.
- * Synced with web SDateTimePicker from @solostylist/ui-kit.
  */
 export declare const SDateTimePicker: {
     ({ label, required, error, hint, value, onChange, placeholder, disabled, minDate, maxDate, format, timeFormat, size, variant, disableDate, disableTime, }: SDateTimePickerProps): React.JSX.Element;

package/dist/s-date-time-picker/s-date-time-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-date-time-picker.d.ts","sourceRoot":"","sources":["../../src/s-date-time-picker/s-date-time-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,qDAAqD;IACrD,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,YAAY,CAAC;IACpD,8BAA8B;IAC9B,UAAU,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC3B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe;+JAiBzB,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAgjB1C,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"s-date-time-picker.d.ts","sourceRoot":"","sources":["../../src/s-date-time-picker/s-date-time-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,qDAAqD;IACrD,MAAM,CAAC,EAAE,YAAY,GAAG,YAAY,GAAG,YAAY,CAAC;IACpD,8BAA8B;IAC9B,UAAU,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC3B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe;+JAiBzB,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAge1C,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/dist/s-date-time-picker/s-date-time-picker.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import { IconButton, Modal, Portal, Text, TextInput } from 'react-native-paper';
+import { Pressable, ScrollView, View } from 'react-native';
+import { Modal, Portal, TextInput } from 'react-native-paper';
 import { SButton } from '../s-button';
-import { SForm } from '../s-form';
+import { SIconButton } from '../s-icon-button';
+import { SText } from '../s-text';
+import { STextField } from '../s-text-field';
 import { useSTheme } from '../theme';
 /**
  * A standardized date and time picker component that provides consistent form labeling and datetime selection.
- * Synced with web SDateTimePicker from @solostylist/ui-kit.
  */
 export const SDateTimePicker = ({ label, required = false, error, hint, value, onChange, placeholder = 'Select date and time', disabled = false, minDate, maxDate, format = 'MM/DD/YYYY', timeFormat = '12h', size = 'medium', variant = 'outlined', disableDate = false, disableTime = false, }) => {
     const { theme } = useSTheme();
@@ -175,216 +176,123 @@ export const SDateTimePicker = ({ label, required = false, error, hint, value, o
     const handlePeriodToggle = () => {
         setSelectedHour((prev) => (prev >= 12 ? prev - 12 : prev + 12));
     };
-    const styles = StyleSheet.create({
-        inputContainer: {
-            position: 'relative',
-        },
-        input: {
-            ...(size === 'small'
-                ? {
-                    height: 36,
-                }
-                : {
-                    height: 40,
-                }),
-        },
-        content: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: size === 'small' ? theme.typography.fontSize.sm : theme.typography.fontSize.md,
-        },
-        modalContainer: {
-            backgroundColor: theme.colors.background.paper,
-            margin: 20,
-            borderRadius: theme.borderRadius.lg,
-            padding: 20,
-            maxWidth: 400,
-            alignSelf: 'center',
-            width: '100%',
-            maxHeight: '80%',
-        },
-        scrollContainer: {
-            flexGrow: 0,
-        },
-        header: {
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: theme.spacing.lg,
-        },
-        monthYearText: {
-            fontSize: theme.typography.fontSize.lg,
-            fontFamily: theme.typography.fontFamily,
-            fontWeight: '600',
-            color: theme.colors.text.primary,
-        },
-        headerButtons: {
-            flexDirection: 'row',
-            gap: theme.spacing.xs,
-        },
-        weekRow: {
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-            marginBottom: theme.spacing.sm,
-        },
-        dayNameText: {
-            width: 40,
-            textAlign: 'center',
-            fontSize: theme.typography.fontSize.sm,
-            fontFamily: theme.typography.fontFamily,
-            fontWeight: '600',
-            color: theme.colors.text.secondary,
-        },
-        calendarGrid: {
-            gap: 4,
-        },
-        calendarRow: {
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-        },
-        dayButton: {
-            width: 40,
-            height: 40,
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: theme.borderRadius.full,
-        },
-        dayButtonSelected: {
-            backgroundColor: theme.colors.primary[500],
-        },
-        dayButtonDisabled: {
-            opacity: 0.3,
-        },
-        dayText: {
-            fontSize: theme.typography.fontSize.sm,
-            fontFamily: theme.typography.fontFamily,
-            color: theme.colors.text.primary,
-        },
-        dayTextSelected: {
-            color: theme.colors.primary.contrastText,
-            fontWeight: '600',
-        },
-        dayTextDisabled: {
-            color: theme.colors.text.disabled,
-        },
-        timeSection: {
-            marginTop: theme.spacing.lg,
-            paddingTop: theme.spacing.lg,
-            borderTopWidth: 1,
-            borderTopColor: theme.colors.divider,
-        },
-        timeSectionTitle: {
-            fontSize: theme.typography.fontSize.md,
-            fontFamily: theme.typography.fontFamily,
-            fontWeight: '600',
-            color: theme.colors.text.primary,
-            marginBottom: theme.spacing.md,
-            textAlign: 'center',
-        },
-        timePickerContainer: {
-            flexDirection: 'row',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: theme.spacing.md,
-        },
-        timeColumn: {
-            alignItems: 'center',
-        },
-        timeScrollContainer: {
-            height: 120,
-            width: 60,
-        },
-        timeOption: {
-            height: 40,
-            justifyContent: 'center',
-            alignItems: 'center',
-            paddingHorizontal: theme.spacing.sm,
-        },
-        timeOptionSelected: {
-            backgroundColor: theme.colors.primary[500],
-            borderRadius: theme.borderRadius.md,
-        },
-        timeOptionText: {
-            fontSize: theme.typography.fontSize.md,
-            fontFamily: theme.typography.fontFamily,
-            color: theme.colors.text.primary,
-        },
-        timeOptionTextSelected: {
-            color: theme.colors.primary.contrastText,
-            fontWeight: '600',
-        },
-        timeLabel: {
-            fontSize: theme.typography.fontSize.xs,
-            fontFamily: theme.typography.fontFamily,
-            color: theme.colors.text.secondary,
-            marginBottom: theme.spacing.xs,
-        },
-        separator: {
-            fontSize: theme.typography.fontSize.xl,
-            fontFamily: theme.typography.fontFamily,
-            fontWeight: '600',
-            color: theme.colors.text.primary,
-            marginTop: theme.spacing.lg,
-        },
-        periodToggle: {
-            flexDirection: 'column',
-            gap: theme.spacing.xs,
-        },
-        periodButton: {
-            paddingVertical: theme.spacing.sm,
-            paddingHorizontal: theme.spacing.md,
-            borderRadius: theme.borderRadius.md,
-            borderWidth: 1,
-            borderColor: theme.colors.divider,
-            minWidth: 50,
-            alignItems: 'center',
-        },
-        periodButtonActive: {
-            backgroundColor: theme.colors.primary[500],
-            borderColor: theme.colors.primary[500],
-        },
-        periodButtonText: {
-            fontSize: theme.typography.fontSize.sm,
-            fontFamily: theme.typography.fontFamily,
-            color: theme.colors.text.primary,
-            fontWeight: '600',
-        },
-        periodButtonTextActive: {
-            color: theme.colors.primary.contrastText,
-        },
-        footer: {
-            flexDirection: 'row',
-            justifyContent: 'flex-end',
-            gap: theme.spacing.sm,
-            marginTop: theme.spacing.lg,
-        },
-    });
     const calendarDays = generateCalendarDays();
     const hourOptions = getHourOptions();
     const minuteOptions = getMinuteOptions();
     const displayHour = timeFormat === '12h' ? selectedHour % 12 || 12 : selectedHour;
     const isPM = selectedHour >= 12;
-    return (_jsxs(SForm, { label: label, hint: hint, error: error, required: required, children: [_jsx(View, { style: styles.inputContainer, children: _jsx(Pressable, { onPress: openPicker, disabled: disabled, children: _jsx(TextInput, { mode: variant, placeholder: placeholder, placeholderTextColor: theme.colors.divider, value: formatDateTime(selectedDateTime), editable: false, error: !!error, disabled: disabled, dense: size === 'small', right: _jsx(TextInput.Icon, { icon: selectedDateTime && !disabled ? 'close' : 'calendar-clock', onPress: selectedDateTime && !disabled ? handleClear : openPicker, forceTextInputFocus: false, size: theme.iconSize.xs }), style: styles.input, contentStyle: styles.content, pointerEvents: "none" }) }) }), _jsx(Portal, { children: _jsxs(Modal, { visible: isPickerVisible, onDismiss: closePicker, contentContainerStyle: styles.modalContainer, children: [_jsxs(ScrollView, { style: styles.scrollContainer, showsVerticalScrollIndicator: false, children: [!disableDate && (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.header, children: [_jsx(View, { style: styles.headerButtons, children: _jsx(IconButton, { icon: "chevron-left", size: 24, onPress: goToPreviousMonth }) }), _jsxs(Text, { style: styles.monthYearText, children: [monthNames[currentMonth.getMonth()], " ", currentMonth.getFullYear()] }), _jsx(View, { style: styles.headerButtons, children: _jsx(IconButton, { icon: "chevron-right", size: 24, onPress: goToNextMonth }) })] }), _jsx(View, { style: styles.weekRow, children: dayNames.map((day) => (_jsx(Text, { style: styles.dayNameText, children: day }, day))) }), _jsx(View, { style: styles.calendarGrid, children: Array.from({ length: Math.ceil(calendarDays.length / 7) }).map((_, weekIndex) => (_jsx(View, { style: styles.calendarRow, children: calendarDays.slice(weekIndex * 7, weekIndex * 7 + 7).map((date, dayIndex) => {
+    return (_jsxs(View, { children: [_jsx(Pressable, { onPress: openPicker, disabled: disabled, children: _jsx(STextField, { label: label, hint: hint, error: error, required: required, variant: variant, placeholder: placeholder, value: formatDateTime(selectedDateTime), editable: false, disabled: disabled, size: size, right: _jsx(TextInput.Icon, { icon: selectedDateTime && !disabled ? 'close' : 'calendar-clock', onPress: selectedDateTime && !disabled ? handleClear : openPicker, forceTextInputFocus: false, size: theme.iconSize.xs }), pointerEvents: "none" }) }), _jsx(Portal, { children: _jsxs(Modal, { visible: isPickerVisible, onDismiss: closePicker, contentContainerStyle: {
+                        backgroundColor: theme.colors.background.paper,
+                        margin: 20,
+                        borderRadius: theme.borderRadius.lg,
+                        padding: 20,
+                        maxWidth: 400,
+                        alignSelf: 'center',
+                        width: '100%',
+                        maxHeight: '80%',
+                    }, children: [_jsxs(ScrollView, { style: { flexGrow: 0 }, showsVerticalScrollIndicator: false, children: [!disableDate && (_jsxs(_Fragment, { children: [_jsxs(View, { style: {
+                                                flexDirection: 'row',
+                                                justifyContent: 'space-between',
+                                                alignItems: 'center',
+                                                marginBottom: theme.spacing.lg,
+                                            }, children: [_jsx(SIconButton, { icon: "chevron-left", size: "medium", onPress: goToPreviousMonth }), _jsxs(SText, { variant: "subtitle2", children: [monthNames[currentMonth.getMonth()], " ", currentMonth.getFullYear()] }), _jsx(SIconButton, { icon: "chevron-right", size: "medium", onPress: goToNextMonth })] }), _jsx(View, { style: {
+                                                flexDirection: 'row',
+                                                marginBottom: theme.spacing.sm,
+                                            }, children: dayNames.map((day) => (_jsx(SText, { variant: "caption", style: {
+                                                    width: '14.28%',
+                                                    textAlign: 'center',
+                                                }, children: day }, day))) }), _jsx(View, { style: { gap: 4 }, children: Array.from({ length: Math.ceil(calendarDays.length / 7) }).map((_, weekIndex) => (_jsx(View, { style: { flexDirection: 'row' }, children: calendarDays.slice(weekIndex * 7, weekIndex * 7 + 7).map((date, dayIndex) => {
                                                     if (!date) {
-                                                        return _jsx(View, { style: styles.dayButton }, `empty-${dayIndex}`);
+                                                        return (_jsx(View, { style: {
+                                                                width: '14.28%',
+                                                                height: 40,
+                                                                justifyContent: 'center',
+                                                                alignItems: 'center',
+                                                            } }, `empty-${dayIndex}`));
                                                     }
                                                     const isDisabled = isDateDisabled(date);
                                                     const isSelected = isDateSelected(date);
-                                                    return (_jsx(Pressable, { onPress: () => !isDisabled && handleDateSelect(date), disabled: isDisabled, style: [
-                                                            styles.dayButton,
-                                                            isSelected && styles.dayButtonSelected,
-                                                            isDisabled && styles.dayButtonDisabled,
-                                                        ], children: _jsx(Text, { style: [
-                                                                styles.dayText,
-                                                                isSelected && styles.dayTextSelected,
-                                                                isDisabled && styles.dayTextDisabled,
-                                                            ], children: date.getDate() }) }, date.toISOString()));
-                                                }) }, weekIndex))) })] })), !disableTime && (_jsxs(View, { style: styles.timeSection, children: [_jsx(Text, { style: styles.timeSectionTitle, children: "Select Time" }), _jsxs(View, { style: styles.timePickerContainer, children: [_jsxs(View, { style: styles.timeColumn, children: [_jsx(Text, { style: styles.timeLabel, children: "Hour" }), _jsx(ScrollView, { style: styles.timeScrollContainer, showsVerticalScrollIndicator: false, children: hourOptions.map((hour) => {
+                                                    return (_jsx(Pressable, { onPress: () => !isDisabled && handleDateSelect(date), disabled: isDisabled, style: {
+                                                            width: '14.28%',
+                                                            height: 40,
+                                                            justifyContent: 'center',
+                                                            alignItems: 'center',
+                                                            ...(isDisabled && { opacity: 0.3 }),
+                                                        }, children: _jsx(View, { style: {
+                                                                width: 36,
+                                                                height: 36,
+                                                                borderRadius: theme.borderRadius.full,
+                                                                justifyContent: 'center',
+                                                                alignItems: 'center',
+                                                                ...(isSelected && {
+                                                                    backgroundColor: theme.colors.primary[500],
+                                                                }),
+                                                            }, children: _jsx(SText, { children: date.getDate() }) }) }, date.toISOString()));
+                                                }) }, weekIndex))) })] })), !disableTime && (_jsxs(View, { style: {
+                                        marginTop: theme.spacing.lg,
+                                        paddingTop: theme.spacing.lg,
+                                        borderTopWidth: 1,
+                                        borderTopColor: theme.colors.divider,
+                                    }, children: [_jsx(SText, { variant: "subtitle2", style: {
+                                                marginBottom: theme.spacing.md,
+                                                textAlign: 'center',
+                                            }, children: "Select Time" }), _jsxs(View, { style: {
+                                                flexDirection: 'row',
+                                                justifyContent: 'center',
+                                                alignItems: 'flex-start',
+                                                gap: theme.spacing.md,
+                                            }, children: [_jsxs(View, { style: { alignItems: 'center' }, children: [_jsx(SText, { variant: "caption", children: "Hour" }), _jsx(ScrollView, { style: { height: 120, width: 60 }, showsVerticalScrollIndicator: false, children: hourOptions.map((hour) => {
                                                                 const isSelected = hour === displayHour;
-                                                                return (_jsx(Pressable, { onPress: () => handleHourChange(hour), style: [styles.timeOption, isSelected && styles.timeOptionSelected], children: _jsx(Text, { style: [styles.timeOptionText, isSelected && styles.timeOptionTextSelected], children: String(hour).padStart(2, '0') }) }, hour));
-                                                            }) })] }), _jsx(Text, { style: styles.separator, children: ":" }), _jsxs(View, { style: styles.timeColumn, children: [_jsx(Text, { style: styles.timeLabel, children: "Minute" }), _jsx(ScrollView, { style: styles.timeScrollContainer, showsVerticalScrollIndicator: false, children: minuteOptions.map((minute) => {
+                                                                return (_jsx(Pressable, { onPress: () => handleHourChange(hour), style: {
+                                                                        height: 40,
+                                                                        justifyContent: 'center',
+                                                                        alignItems: 'center',
+                                                                        paddingHorizontal: theme.spacing.sm,
+                                                                        ...(isSelected && {
+                                                                            backgroundColor: theme.colors.primary[500],
+                                                                            borderRadius: theme.borderRadius.md,
+                                                                        }),
+                                                                    }, children: _jsx(SText, { children: String(hour).padStart(2, '0') }) }, hour));
+                                                            }) })] }), _jsxs(View, { style: { alignItems: 'center' }, children: [_jsx(SText, { variant: "caption", children: "Minute" }), _jsx(ScrollView, { style: { height: 120, width: 60 }, showsVerticalScrollIndicator: false, children: minuteOptions.map((minute) => {
                                                                 const isSelected = minute === selectedMinute;
-                                                                return (_jsx(Pressable, { onPress: () => setSelectedMinute(minute), style: [styles.timeOption, isSelected && styles.timeOptionSelected], children: _jsx(Text, { style: [styles.timeOptionText, isSelected && styles.timeOptionTextSelected], children: String(minute).padStart(2, '0') }) }, minute));
-                                                            }) })] }), timeFormat === '12h' && (_jsxs(View, { style: styles.timeColumn, children: [_jsx(Text, { style: styles.timeLabel, children: "Period" }), _jsxs(View, { style: styles.periodToggle, children: [_jsx(Pressable, { onPress: () => isPM && handlePeriodToggle(), style: [styles.periodButton, !isPM && styles.periodButtonActive], children: _jsx(Text, { style: [styles.periodButtonText, !isPM && styles.periodButtonTextActive], children: "AM" }) }), _jsx(Pressable, { onPress: () => !isPM && handlePeriodToggle(), style: [styles.periodButton, isPM && styles.periodButtonActive], children: _jsx(Text, { style: [styles.periodButtonText, isPM && styles.periodButtonTextActive], children: "PM" }) })] })] }))] })] }))] }), _jsxs(View, { style: styles.footer, children: [_jsx(SButton, { variant: "text", onPress: closePicker, children: "Cancel" }), _jsx(SButton, { variant: "text", onPress: handleDateTimeSelect, children: "OK" })] })] }) })] }));
+                                                                return (_jsx(Pressable, { onPress: () => setSelectedMinute(minute), style: {
+                                                                        height: 40,
+                                                                        justifyContent: 'center',
+                                                                        alignItems: 'center',
+                                                                        paddingHorizontal: theme.spacing.sm,
+                                                                        ...(isSelected && {
+                                                                            backgroundColor: theme.colors.primary[500],
+                                                                            borderRadius: theme.borderRadius.md,
+                                                                        }),
+                                                                    }, children: _jsx(SText, { children: String(minute).padStart(2, '0') }) }, minute));
+                                                            }) })] }), timeFormat === '12h' && (_jsxs(View, { style: { alignItems: 'center' }, children: [_jsx(SText, { variant: "caption", children: "Period" }), _jsxs(View, { style: { flexDirection: 'column', gap: theme.spacing.xs }, children: [_jsx(Pressable, { onPress: () => isPM && handlePeriodToggle(), style: {
+                                                                        paddingVertical: theme.spacing.sm,
+                                                                        paddingHorizontal: theme.spacing.md,
+                                                                        borderRadius: theme.borderRadius.md,
+                                                                        borderWidth: 1,
+                                                                        borderColor: !isPM ? theme.colors.primary[500] : theme.colors.divider,
+                                                                        minWidth: 50,
+                                                                        alignItems: 'center',
+                                                                        ...(!isPM && {
+                                                                            backgroundColor: theme.colors.primary[500],
+                                                                        }),
+                                                                    }, children: _jsx(SText, { children: "AM" }) }), _jsx(Pressable, { onPress: () => !isPM && handlePeriodToggle(), style: {
+                                                                        paddingVertical: theme.spacing.sm,
+                                                                        paddingHorizontal: theme.spacing.md,
+                                                                        borderRadius: theme.borderRadius.md,
+                                                                        borderWidth: 1,
+                                                                        borderColor: isPM ? theme.colors.primary[500] : theme.colors.divider,
+                                                                        minWidth: 50,
+                                                                        alignItems: 'center',
+                                                                        ...(isPM && {
+                                                                            backgroundColor: theme.colors.primary[500],
+                                                                        }),
+                                                                    }, children: _jsx(SText, { children: "PM" }) })] })] }))] })] }))] }), _jsxs(View, { style: {
+                                flexDirection: 'row',
+                                justifyContent: 'flex-end',
+                                gap: theme.spacing.sm,
+                                marginTop: theme.spacing.lg,
+                            }, children: [_jsx(SButton, { variant: "outlined", onPress: closePicker, children: "Cancel" }), _jsx(SButton, { onPress: handleDateTimeSelect, children: "OK" })] })] }) })] }));
 };
 SDateTimePicker.displayName = 'SDateTimePicker';
 export default SDateTimePicker;

package/dist/s-divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './s-divider';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/s-divider/index.js

@@ -0,0 +1 @@
+export * from './s-divider';

package/dist/s-divider/s-divider.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface SDividerProps {
+    /** Custom styles for the divider */
+    style?: StyleProp<ViewStyle>;
+    /** Custom color for the divider. Defaults to theme.colors.divider */
+    color?: string;
+    /** Thickness of the divider in pixels (default: 1) */
+    thickness?: number;
+    /** Orientation of the divider (default: 'horizontal') */
+    orientation?: 'horizontal' | 'vertical';
+    /** Margin applied around the divider (vertical for horizontal, horizontal for vertical) */
+    margin?: number;
+}
+/**
+ * A divider component that creates a visual separation between content.
+ * Follows the SoloStylist theme design system.
+ */
+export declare const SDivider: {
+    ({ style, color, thickness, orientation, margin, }: SDividerProps): React.JSX.Element;
+    displayName: string;
+};
+export default SDivider;
+//# sourceMappingURL=s-divider.d.ts.map

package/dist/s-divider/s-divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-divider.d.ts","sourceRoot":"","sources":["../../src/s-divider/s-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ;wDAMlB,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA0BnC,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/s-divider/s-divider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { useSTheme } from '../theme';
+/**
+ * A divider component that creates a visual separation between content.
+ * Follows the SoloStylist theme design system.
+ */
+export const SDivider = ({ style, color, thickness = 1, orientation = 'horizontal', margin = 0, }) => {
+    const { theme } = useSTheme();
+    const isHorizontal = orientation === 'horizontal';
+    return (_jsx(View, { style: [
+            {
+                backgroundColor: color || theme.colors.divider,
+            },
+            isHorizontal
+                ? {
+                    height: thickness,
+                    width: '100%',
+                    marginVertical: margin,
+                }
+                : {
+                    width: thickness,
+                    height: '100%',
+                    marginHorizontal: margin,
+                },
+            style,
+        ] }));
+};
+SDivider.displayName = 'SDivider';
+export default SDivider;