@solostylist/ui-kit-native 1.0.1 → 1.0.3

package/dist/s-file-dropzone/s-file-dropzone.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 /**
  * Custom file type that represents a file with basic information
- * Synced with web SFileDropzone from @solostylist/ui-kit
  */
 export type CustomFile = {
     /** File name with extension */
@@ -16,7 +15,6 @@ export type CustomFile = {
 };
 /**
  * Props interface for SFileDropzone component
- * Synced with web SFileDropzone from @solostylist/ui-kit
  */
 export interface SFileDropzoneProps {
     /** Additional hint text displayed below the main upload message */
@@ -56,39 +54,6 @@ export interface SFileDropzoneProps {
  * A file dropzone component for React Native with file management and form integration.
  * Since React Native doesn't support drag-and-drop, this component provides a pressable
  * area that can be used with expo-document-picker or similar libraries.
- * Synced with web SFileDropzone from @solostylist/ui-kit for cross-platform consistency.
- *
- * @example
- * ```tsx
- * import * as DocumentPicker from 'expo-document-picker';
- * import { SFileDropzone } from '@solostylist/ui-kit-native';
- *
- * const [files, setFiles] = useState<CustomFile[]>([]);
- *
- * const handlePickFiles = async () => {
- *   const result = await DocumentPicker.getDocumentAsync({
- *     type: '*\/*',
- *     multiple: true,
- *   });
- *
- *   if (result.type === 'success') {
- *     setFiles([...files, {
- *       name: result.name,
- *       size: result.size,
- *       uri: result.uri,
- *       type: result.mimeType,
- *     }]);
- *   }
- * };
- *
- * <SFileDropzone
- *   label="Upload Files"
- *   files={files}
- *   onPress={handlePickFiles}
- *   onRemove={(file) => setFiles(files.filter(f => f.name !== file.name))}
- *   onRemoveAll={() => setFiles([])}
- * />
- * ```
  */
 export declare const SFileDropzone: {
     ({ hint, label, error, onRemoveAll, onRemove, onPress, onFilesChange, required, isShowBtnRemoveAll, disabled, files, style, enableBuiltInPicker, multiple, accept, }: SFileDropzoneProps): React.JSX.Element;

package/dist/s-file-dropzone/s-file-dropzone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-file-dropzone.d.ts","sourceRoot":"","sources":["../../src/s-file-dropzone/s-file-dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAA2C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQvG;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,uCAAuC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,aAAa;0KAgBvB,kBAAkB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA0NxC,CAAC;AAIF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"s-file-dropzone.d.ts","sourceRoot":"","sources":["../../src/s-file-dropzone/s-file-dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAA+B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAU3F;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,uCAAuC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa;0KAgBvB,kBAAkB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA6KxC,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/s-file-dropzone/s-file-dropzone.js

@@ -2,50 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import * as DocumentPicker from 'expo-document-picker';
 import { useMemo } from 'react';
-import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import { Button, Text } from 'react-native-paper';
+import { Pressable, ScrollView, View } from 'react-native';
 import { gray, lightGray } from '@solostylist/core';
+import { SButton } from '../s-button';
 import { SFileIcon } from '../s-file-icon';
 import { SForm } from '../s-form';
+import { SIconButton } from '../s-icon-button';
+import { SText } from '../s-text';
 import { useSTheme } from '../theme';
 import { bytesToSize } from '../utils';
 /**
  * A file dropzone component for React Native with file management and form integration.
  * Since React Native doesn't support drag-and-drop, this component provides a pressable
  * area that can be used with expo-document-picker or similar libraries.
- * Synced with web SFileDropzone from @solostylist/ui-kit for cross-platform consistency.
- *
- * @example
- * ```tsx
- * import * as DocumentPicker from 'expo-document-picker';
- * import { SFileDropzone } from '@solostylist/ui-kit-native';
- *
- * const [files, setFiles] = useState<CustomFile[]>([]);
- *
- * const handlePickFiles = async () => {
- *   const result = await DocumentPicker.getDocumentAsync({
- *     type: '*\/*',
- *     multiple: true,
- *   });
- *
- *   if (result.type === 'success') {
- *     setFiles([...files, {
- *       name: result.name,
- *       size: result.size,
- *       uri: result.uri,
- *       type: result.mimeType,
- *     }]);
- *   }
- * };
- *
- * <SFileDropzone
- *   label="Upload Files"
- *   files={files}
- *   onPress={handlePickFiles}
- *   onRemove={(file) => setFiles(files.filter(f => f.name !== file.name))}
- *   onRemoveAll={() => setFiles([])}
- * />
- * ```
  */
 export const SFileDropzone = ({ hint, label = '', error, onRemoveAll, onRemove, onPress, onFilesChange, required = false, isShowBtnRemoveAll = false, disabled = false, files = [], style, enableBuiltInPicker = true, multiple = true, accept, }) => {
     const { theme } = useSTheme();
@@ -62,86 +31,6 @@ export const SFileDropzone = ({ hint, label = '', error, onRemoveAll, onRemove,
             disabledText: grayPalette[500],
         };
     }, [theme.dark, theme.colors.text.primary]);
-    const styles = useMemo(() => StyleSheet.create({
-        container: {
-            width: '100%',
-        },
-        dropzoneContainer: {
-            alignItems: 'center',
-            borderWidth: 1,
-            borderStyle: 'dashed',
-            borderColor: colors.borderColor,
-            borderRadius: theme.borderRadius.md,
-            paddingVertical: theme.spacing.xl,
-            paddingHorizontal: theme.spacing.md,
-            backgroundColor: disabled ? colors.disabledBackground : 'transparent',
-        },
-        dropzoneContent: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: theme.spacing.sm,
-        },
-        iconContainer: {
-            width: 48,
-            height: 48,
-            borderRadius: 24,
-            borderWidth: 1,
-            borderStyle: 'dashed',
-            borderColor: colors.borderColor,
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: 'transparent',
-        },
-        textContainer: {
-            flex: 1,
-            gap: theme.spacing.xs,
-        },
-        uploadText: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: 14,
-            color: disabled ? colors.disabledText : colors.textSecondary,
-        },
-        underlinedText: {
-            textDecorationLine: 'underline',
-        },
-        fileListContainer: {
-            marginTop: theme.spacing.sm,
-            gap: theme.spacing.sm,
-        },
-        fileItem: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: theme.spacing.md,
-            borderWidth: 1,
-            borderColor: colors.borderColor,
-            borderRadius: theme.borderRadius.md,
-            padding: theme.spacing.sm,
-        },
-        fileInfoContainer: {
-            flex: 1,
-        },
-        fileName: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: 14,
-            fontWeight: '600',
-            color: colors.textPrimary,
-            marginBottom: 2,
-        },
-        fileSize: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: 12,
-            color: colors.textSecondary,
-        },
-        removeButton: {
-            padding: theme.spacing.xs,
-        },
-        actionsContainer: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            marginTop: theme.spacing.sm,
-        },
-    }), [theme, colors, disabled]);
     const handlePress = async () => {
         if (disabled)
             return;
@@ -176,14 +65,51 @@ export const SFileDropzone = ({ hint, label = '', error, onRemoveAll, onRemove,
             }
         }
     };
-    return (_jsxs(View, { style: [styles.container, style], children: [_jsx(SForm, { error: error, label: label, required: required, hint: hint, children: _jsx(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [
-                        styles.dropzoneContainer,
+    return (_jsxs(View, { style: [{ width: '100%' }, style], children: [_jsx(SForm, { error: error, label: label, required: required, hint: hint, children: _jsx(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [
+                        {
+                            alignItems: 'center',
+                            borderWidth: 1,
+                            borderStyle: 'dashed',
+                            borderColor: colors.borderColor,
+                            borderRadius: theme.borderRadius.md,
+                            paddingVertical: theme.spacing.xl,
+                            paddingHorizontal: theme.spacing.md,
+                            backgroundColor: disabled ? colors.disabledBackground : 'transparent',
+                        },
                         pressed && !disabled && { backgroundColor: colors.hoverBackground },
-                    ], android_ripple: !disabled ? { color: colors.hoverBackground } : undefined, children: _jsxs(View, { style: styles.dropzoneContent, children: [_jsx(View, { style: styles.iconContainer, children: _jsx(MaterialCommunityIcons, { name: "cloud-upload-outline", size: 24, color: disabled ? colors.disabledText : colors.iconColor }) }), _jsx(View, { style: styles.textContainer, children: _jsxs(Text, { style: styles.uploadText, children: [_jsx(Text, { style: styles.underlinedText, children: "Tap to upload" }), " your files here"] }) })] }) }) }), files.length > 0 && (_jsxs(View, { style: styles.fileListContainer, children: [_jsx(ScrollView, { children: files.map((file, index) => {
+                    ], android_ripple: !disabled ? { color: colors.hoverBackground } : undefined, children: _jsxs(View, { style: {
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: theme.spacing.sm,
+                        }, children: [_jsx(View, { style: {
+                                    width: 36,
+                                    height: 36,
+                                    borderRadius: 24,
+                                    borderWidth: 1,
+                                    borderStyle: 'dashed',
+                                    borderColor: colors.borderColor,
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    backgroundColor: 'transparent',
+                                }, children: _jsx(MaterialCommunityIcons, { name: "cloud-upload-outline", size: 16, color: disabled ? colors.disabledText : colors.iconColor }) }), _jsx(View, { style: { flex: 1, gap: theme.spacing.xs }, children: _jsxs(SText, { color: "text.secondary", children: [_jsx(SText, { style: { textDecorationLine: 'underline' }, children: "Tap to upload" }), " your files here"] }) })] }) }) }), files.length > 0 && (_jsxs(View, { style: { marginTop: theme.spacing.sm, gap: theme.spacing.sm }, children: [_jsx(ScrollView, { children: files.map((file, index) => {
                             // Extract file extension for icon display
                             const extension = file.name.split('.').pop();
-                            return (_jsxs(View, { style: styles.fileItem, children: [_jsx(SFileIcon, { extension: extension, size: 36 }), _jsxs(View, { style: styles.fileInfoContainer, children: [_jsx(Text, { style: styles.fileName, numberOfLines: 1, children: file.name }), _jsx(Text, { style: styles.fileSize, children: bytesToSize(file.size) })] }), _jsx(Pressable, { style: styles.removeButton, onPress: () => onRemove?.(file), android_ripple: { color: colors.hoverBackground, borderless: true }, children: _jsx(MaterialCommunityIcons, { name: "close", size: 20, color: colors.iconColor }) })] }, `${file.name}-${index}`));
-                        }) }), isShowBtnRemoveAll && (_jsx(View, { style: styles.actionsContainer, children: _jsx(Button, { mode: "text", onPress: onRemoveAll, children: "Remove all" }) }))] }))] }));
+                            return (_jsxs(View, { style: {
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: theme.spacing.md,
+                                    borderWidth: 1,
+                                    borderColor: colors.borderColor,
+                                    borderRadius: theme.borderRadius.md,
+                                    padding: theme.spacing.sm,
+                                    marginTop: theme.spacing.sm,
+                                }, children: [_jsx(SFileIcon, { extension: extension, size: 44 }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(SText, { variant: "body1", numberOfLines: 1, children: file.name }), _jsx(SText, { variant: "caption", children: bytesToSize(file.size) })] }), _jsx(SIconButton, { icon: "close", iconColor: colors.iconColor, onPress: () => onRemove?.(file) })] }, `${file.name}-${index}`));
+                        }) }), isShowBtnRemoveAll && (_jsx(View, { style: {
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            marginTop: theme.spacing.sm,
+                        }, children: _jsx(SButton, { variant: "text", onPress: onRemoveAll, children: "Remove all" }) }))] }))] }));
 };
 SFileDropzone.displayName = 'SFileDropzone';
 export default SFileDropzone;

package/dist/s-file-icon/s-file-icon.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 /**
  * Props for the SFileIcon component
- * Synced with web SFileIcon from @solostylist/ui-kit
  */
 export interface SFileIconProps {
     /** File extension (without dot) to determine which icon to display */
@@ -15,7 +14,6 @@ export interface SFileIconProps {
 /**
  * A file type icon component that displays appropriate icons based on file extensions.
  * Built with @expo/vector-icons MaterialCommunityIcons for React Native.
- * Synced with web SFileIcon from @solostylist/ui-kit for cross-platform consistency.
  */
 export declare const SFileIcon: {
     ({ extension, size, style }: SFileIconProps): React.JSX.Element;

package/dist/s-file-icon/s-file-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-file-icon.d.ts","sourceRoot":"","sources":["../../src/s-file-icon/s-file-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAUD;;;;GAIG;AACH,eAAO,MAAM,SAAS;iCAAqC,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAsF5F,CAAC;AAIF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"s-file-icon.d.ts","sourceRoot":"","sources":["../../src/s-file-icon/s-file-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAUD;;;GAGG;AACH,eAAO,MAAM,SAAS;iCAAqC,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAmF5F,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/dist/s-file-icon/s-file-icon.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 /**
  * A file type icon component that displays appropriate icons based on file extensions.
  * Built with @expo/vector-icons MaterialCommunityIcons for React Native.
- * Synced with web SFileIcon from @solostylist/ui-kit for cross-platform consistency.
  */
 export const SFileIcon = ({ extension, size = 36, style }) => {
     const iconConfig = useMemo(() => {
@@ -72,16 +71,16 @@ export const SFileIcon = ({ extension, size = 36, style }) => {
                 return { name: 'file', color: '#6366F1' };
         }
     }, [extension]);
-    const styles = useMemo(() => StyleSheet.create({
-        container: {
-            alignItems: 'center',
-            display: 'flex',
-            justifyContent: 'center',
-            width: size,
-            height: size,
-        },
-    }), [size]);
-    return (_jsx(View, { style: [styles.container, style], children: _jsx(MaterialCommunityIcons, { name: iconConfig.name, size: size, color: iconConfig.color }) }));
+    return (_jsx(View, { style: [
+            {
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'center',
+                width: size,
+                height: size,
+            },
+            style,
+        ], children: _jsx(MaterialCommunityIcons, { name: iconConfig.name, size: size, color: iconConfig.color }) }));
 };
 SFileIcon.displayName = 'SFileIcon';
 export default SFileIcon;

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

@@ -16,7 +16,6 @@ export interface SFormProps {
 }
 /**
  * A form wrapper component that provides consistent labeling, error handling, and help text.
- * Synced with web SForm component from @solostylist/ui-kit.
  */
 export declare const SForm: {
     ({ label, hint, error, required, children }: SFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"s-form.d.ts","sourceRoot":"","sources":["../../src/s-form/s-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK;iDAAwD,UAAU;;CAkDnF,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"s-form.d.ts","sourceRoot":"","sources":["../../src/s-form/s-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;iDAAwD,UAAU;;CAkDnF,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/s-form/s-form.js

@@ -5,7 +5,6 @@ import { SText } from '../s-text';
 import { useSTheme } from '../theme';
 /**
  * A form wrapper component that provides consistent labeling, error handling, and help text.
- * Synced with web SForm component from @solostylist/ui-kit.
  */
 export const SForm = ({ label, hint, error, required = false, children }) => {
     const { theme } = useSTheme();

package/dist/s-icon-button/s-icon-button.d.ts

@@ -1,27 +1,28 @@
 import React from 'react';
 import { type IconButtonProps } from 'react-native-paper';
+import type { SButtonColor } from '../s-button/s-button';
 /**
  * Tooltip options for SIconButton
- * Similar to web version but adapted for React Native
  */
 export interface SIconButtonTooltipOptions {
     /** Tooltip text content */
     title: string;
-    /** Whether to show enter delay (in ms) */
+    /** Delay before showing the tooltip (in ms) */
     enterDelay?: number;
-    /** Whether to show leave delay (in ms) */
+    /** Delay before hiding the tooltip (in ms) */
     leaveDelay?: number;
 }
 /**
  * Props interface for SIconButton component
- * Synced with web SIconButton from @solostylist/ui-kit
  */
 export interface SIconButtonProps extends Omit<IconButtonProps, 'theme' | 'size'> {
-    /** Icon name from Material Community Icons */
-    icon: string;
+    /** Icon name from Material Community Icons or an IconComponent */
+    icon: IconButtonProps['icon'];
     /** Size of the icon button - matches web MUI sizes */
     size?: 'small' | 'medium' | 'large';
-    /** Icon color */
+    /** Theme color of the button */
+    color?: SButtonColor;
+    /** Icon color (overrides color prop) */
     iconColor?: string;
     /** Container color (background) */
     containerColor?: string;
@@ -36,10 +37,9 @@ export interface SIconButtonProps extends Omit<IconButtonProps, 'theme' | 'size'
 }
 /**
  * An enhanced icon button component with optional tooltip integration.
- * Synced with web SIconButton from @solostylist/ui-kit.
  */
 export declare const SIconButton: {
-    ({ icon, size, iconColor, containerColor, disabled, accessibilityLabel, onPress, style, tooltipOptions, ...props }: SIconButtonProps): React.JSX.Element;
+    ({ icon, size, color, iconColor, containerColor, disabled, accessibilityLabel, onPress, style, tooltipOptions, ...props }: SIconButtonProps): React.JSX.Element;
     displayName: string;
 };
 export default SIconButton;

package/dist/s-icon-button/s-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-icon-button.d.ts","sourceRoot":"","sources":["../../src/s-icon-button/s-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG/E;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/E,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uFAAuF;IACvF,cAAc,CAAC,EAAE,yBAAyB,CAAC;CAC5C;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW;wHAWrB,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAuEtC,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"s-icon-button.d.ts","sourceRoot":"","sources":["../../src/s-icon-button/s-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAgBtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIzD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAyBD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/E,kEAAkE;IAClE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,sDAAsD;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,gCAAgC;IAChC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uFAAuF;IACvF,cAAc,CAAC,EAAE,yBAAyB,CAAC;CAC5C;AAED;;GAEG;AACH,eAAO,MAAM,WAAW;+HAYrB,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAgFtC,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/s-icon-button/s-icon-button.js

@@ -1,12 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
-import { IconButton, Tooltip } from 'react-native-paper';
+import { IconButton } from 'react-native-paper';
+import { blue, brand, green, lightBlue, lightBrand, lightGreen, lightOrange, lightPurple, lightRed, orange, purple, red, } from '@solostylist/core';
+import { STooltip } from '../s-tooltip';
 import { useSTheme } from '../theme';
+/**
+ * Get color palettes for light and dark modes
+ * Copied from SButton to ensure consistency
+ */
+const getColorPalettes = (color) => {
+    switch (color) {
+        case 'primary':
+            return { light: lightBrand, dark: brand };
+        case 'secondary':
+            return { light: lightPurple, dark: purple };
+        case 'success':
+            return { light: lightGreen, dark: green };
+        case 'error':
+            return { light: lightRed, dark: red };
+        case 'info':
+            return { light: lightBlue, dark: blue };
+        case 'warning':
+            return { light: lightOrange, dark: orange };
+        default:
+            return { light: lightBrand, dark: brand };
+    }
+};
 /**
  * An enhanced icon button component with optional tooltip integration.
- * Synced with web SIconButton from @solostylist/ui-kit.
  */
-export const SIconButton = ({ icon, size = 'medium', iconColor, containerColor, disabled = false, accessibilityLabel, onPress, style, tooltipOptions, ...props }) => {
+export const SIconButton = ({ icon, size = 'medium', color, iconColor, containerColor, disabled = false, accessibilityLabel, onPress, style, tooltipOptions, ...props }) => {
     const { theme } = useSTheme();
     // Map size to icon size - matches web MUI sizes
     // small: 12px, medium: 16px, large: 20px
@@ -33,12 +57,22 @@ export const SIconButton = ({ icon, size = 'medium', iconColor, containerColor,
             return 'transparent';
         return 'transparent';
     };
+    // Calculate generic color from palette if provided
+    const paletteColor = useMemo(() => {
+        if (!color)
+            return undefined;
+        const { light: lightPalette, dark: darkPalette } = getColorPalettes(color);
+        const palette = theme.dark ? darkPalette : lightPalette;
+        return palette[500];
+    }, [color, theme.dark]);
     // Get icon color
     const getIconColor = () => {
         if (iconColor)
             return iconColor;
         if (disabled)
             return theme.colors.text.disabled;
+        if (paletteColor)
+            return paletteColor;
         return defaultIconColor;
     };
     const styles = StyleSheet.create({
@@ -49,7 +83,7 @@ export const SIconButton = ({ icon, size = 'medium', iconColor, containerColor,
     const iconButton = (_jsx(IconButton, { icon: icon, size: iconSize, iconColor: getIconColor(), containerColor: getContainerColor(), disabled: disabled, onPress: onPress, accessibilityLabel: accessibilityLabel, style: [styles.button, style], ...props }));
     // Wrap with tooltip if tooltipOptions is provided
     if (tooltipOptions) {
-        return (_jsx(Tooltip, { title: tooltipOptions.title, enterTouchDelay: tooltipOptions.enterDelay ?? 0, leaveTouchDelay: tooltipOptions.leaveDelay ?? 0, children: iconButton }));
+        return (_jsx(STooltip, { title: tooltipOptions.title, enterDelay: tooltipOptions.enterDelay ?? 0, leaveDelay: tooltipOptions.leaveDelay ?? 0, children: iconButton }));
     }
     return iconButton;
 };

package/dist/s-image-comparison/s-image-comparison.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
 /**
  * Props interface for SImageComparison component
- * Synced with web SImageComparison from @solostylist/ui-kit
  */
 export interface SImageComparisonProps {
     /** Left image URL or array of URLs for multiple comparison sources */
-    leftImage: string | string[];
+    leftImage: ImageSourcePropType | Array<ImageSourcePropType>;
     /** Right image URL */
-    rightImage: string;
+    rightImage: ImageSourcePropType;
     /** Alt text for left image(s) */
     altLeft?: string | string[];
     /** Alt text for right image */
@@ -27,7 +26,6 @@ export interface SImageComparisonProps {
 /**
  * An image comparison component with a draggable slider to compare before/after images.
  * Built with React Native Gesture Handler for smooth drag interactions.
- * Synced with web SImageComparison from @solostylist/ui-kit for cross-platform consistency.
  */
 export declare const SImageComparison: {
     ({ leftImage, rightImage, initialPosition, height, width, style, borderRadius, }: SImageComparisonProps): React.JSX.Element;

package/dist/s-image-comparison/s-image-comparison.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-image-comparison.d.ts","sourceRoot":"","sources":["../../src/s-image-comparison/s-image-comparison.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,sEAAsE;IACtE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;sFAQ1B,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA2N3C,CAAC;AAIF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"s-image-comparison.d.ts","sourceRoot":"","sources":["../../src/s-image-comparison/s-image-comparison.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAKL,KAAK,mBAAmB,EAExB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,sEAAsE;IACtE,SAAS,EAAE,mBAAmB,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC5D,sBAAsB;IACtB,UAAU,EAAE,mBAAmB,CAAC;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB;sFAQ1B,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoM3C,CAAC;AAIF,eAAe,gBAAgB,CAAC"}