@solostylist/ui-kit-native 1.0.0 → 1.0.2

package/dist/s-zoom-image/s-zoom-image.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Animated, Pressable, View, } from 'react-native';
+import { SLazyImage } from '../s-lazy-image';
+/**
+ * An interactive image component with smooth zoom-on-press functionality and built-in lazy loading.
+ * Built with React Native Animated API for smooth interactions.
+ */
+export const SZoomImage = ({ src, zoomScale = 1.2, borderRadius = 12, skeletonVariant = 'rounded', height = 200, width = '100%', containerStyle, imageStyle, onLoad, onError, }) => {
+    // Track whether lazy-loaded image has finished loading
+    // This enables zoom functionality only after the image is ready
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 });
+    const [isPressed, setIsPressed] = useState(false);
+    // Animated values for scale and transform origin
+    // Using useMemo ensures these values are created only once during the component lifecycle
+    const scale = useMemo(() => new Animated.Value(1), []);
+    const translateX = useMemo(() => new Animated.Value(0), []);
+    const translateY = useMemo(() => new Animated.Value(0), []);
+    const handleLayout = (event) => {
+        const { width: layoutWidth, height: layoutHeight } = event.nativeEvent.layout;
+        setContainerDimensions({ width: layoutWidth, height: layoutHeight });
+    };
+    // Handle touch move to update zoom origin
+    const handleTouchMove = useCallback((event) => {
+        if (!imageLoaded || !isPressed)
+            return;
+        const { locationX, locationY } = event.nativeEvent;
+        // Calculate position as percentage (0 to 1)
+        const xPercent = containerDimensions.width > 0 ? locationX / containerDimensions.width : 0.5;
+        const yPercent = containerDimensions.height > 0 ? locationY / containerDimensions.height : 0.5;
+        // Clamp between 0 and 1
+        const clampedX = Math.max(0, Math.min(1, xPercent));
+        const clampedY = Math.max(0, Math.min(1, yPercent));
+        // Calculate translation to keep zoom centered on touch point
+        // When zoomed, we want to translate the image so the touch point stays in place
+        const maxTranslateX = (containerDimensions.width * (zoomScale - 1)) / 2;
+        const maxTranslateY = (containerDimensions.height * (zoomScale - 1)) / 2;
+        const targetTranslateX = maxTranslateX - maxTranslateX * 2 * clampedX;
+        const targetTranslateY = maxTranslateY - maxTranslateY * 2 * clampedY;
+        Animated.parallel([
+            Animated.spring(translateX, {
+                toValue: targetTranslateX,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 150,
+                mass: 0.5,
+            }),
+            Animated.spring(translateY, {
+                toValue: targetTranslateY,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 150,
+                mass: 0.5,
+            }),
+        ]).start();
+    }, [imageLoaded, isPressed, containerDimensions, zoomScale, translateX, translateY]);
+    // Handle press in - zoom in
+    const handlePressIn = useCallback((event) => {
+        if (!imageLoaded)
+            return;
+        setIsPressed(true);
+        const { locationX, locationY } = event.nativeEvent;
+        // Calculate initial position for zoom origin
+        const xPercent = containerDimensions.width > 0 ? locationX / containerDimensions.width : 0.5;
+        const yPercent = containerDimensions.height > 0 ? locationY / containerDimensions.height : 0.5;
+        const clampedX = Math.max(0, Math.min(1, xPercent));
+        const clampedY = Math.max(0, Math.min(1, yPercent));
+        const maxTranslateX = (containerDimensions.width * (zoomScale - 1)) / 2;
+        const maxTranslateY = (containerDimensions.height * (zoomScale - 1)) / 2;
+        const targetTranslateX = maxTranslateX - maxTranslateX * 2 * clampedX;
+        const targetTranslateY = maxTranslateY - maxTranslateY * 2 * clampedY;
+        Animated.parallel([
+            Animated.spring(scale, {
+                toValue: zoomScale,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 150,
+                mass: 0.5,
+            }),
+            Animated.spring(translateX, {
+                toValue: targetTranslateX,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 150,
+                mass: 0.5,
+            }),
+            Animated.spring(translateY, {
+                toValue: targetTranslateY,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 150,
+                mass: 0.5,
+            }),
+        ]).start();
+    }, [imageLoaded, containerDimensions, scale, zoomScale, translateX, translateY]);
+    // Handle press out - zoom out and reset position
+    const handlePressOut = useCallback(() => {
+        setIsPressed(false);
+        Animated.parallel([
+            Animated.spring(scale, {
+                toValue: 1,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 150,
+                mass: 0.5,
+            }),
+            Animated.spring(translateX, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 150,
+                mass: 0.5,
+            }),
+            Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 150,
+                mass: 0.5,
+            }),
+        ]).start();
+    }, [scale, translateX, translateY]);
+    const handleImageLoad = useCallback((event) => {
+        setImageLoaded(true);
+        onLoad?.(event);
+    }, [onLoad]);
+    return (_jsx(View, { style: [
+            {
+                position: 'relative',
+                width: typeof width === 'number' ? width : undefined,
+                height: typeof height === 'number' ? height : undefined,
+                overflow: 'hidden',
+                borderRadius,
+            },
+            containerStyle,
+        ], onLayout: handleLayout, children: _jsx(Pressable, { style: {
+                width: '100%',
+                height: '100%',
+            }, onPressIn: handlePressIn, onPressOut: handlePressOut, onTouchMove: handleTouchMove, disabled: !imageLoaded, children: _jsx(Animated.View, { style: [
+                    {
+                        width: '100%',
+                        height: '100%',
+                        transform: [{ translateX }, { translateY }, { scale }],
+                    },
+                ], children: _jsx(SLazyImage, { src: src, variant: skeletonVariant, height: height, width: width, containerStyle: imageStyle, onLoad: handleImageLoad, onError: onError }) }) }) }));
+};
+SZoomImage.displayName = 'SZoomImage';
+export default SZoomImage;

package/dist/theme/theme-primitives.d.ts

@@ -61,6 +61,16 @@ export interface NativeTheme {
             normal: number;
             relaxed: number;
         };
+        input: {
+            fontSize: {
+                small: number;
+                medium: number;
+            };
+            height: {
+                small: number;
+                medium: number;
+            };
+        };
         scale: {
             h1: {
                 fontSize: number;

package/dist/theme/theme-primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-primitives.d.ts","sourceRoot":"","sources":["../../src/theme/theme-primitives.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-primitives.d.ts","sourceRoot":"","sources":["../../src/theme/theme-primitives.ts"],"names":[],"mappings":"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"}

package/dist/theme/theme-primitives.js

@@ -26,6 +26,17 @@ const typography = {
         normal: 1.5,
         relaxed: 1.75,
     },
+    // Centralized input styling — matches web sizes: small = 36px (2.25rem), medium = 40px (2.5rem)
+    input: {
+        fontSize: {
+            small: 12, // theme.typography.fontSize.sm
+            medium: 14, // theme.typography.fontSize.md
+        },
+        height: {
+            small: 36,
+            medium: 40,
+        },
+    },
     // Web-compatible typography scale (matches MUI theme)
     scale: {
         h1: {

package/dist/utils/bytes-to-size.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Convert bytes to human-readable size format
+ *
+ * @param bytes - Number of bytes to convert
+ * @param decimals - Number of decimal places (default: 2)
+ * @returns Formatted string with size and unit (e.g., "1.5 MB")
+ */
+export declare function bytesToSize(bytes: number, decimals?: number): string;
+//# sourceMappingURL=bytes-to-size.d.ts.map

package/dist/utils/bytes-to-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bytes-to-size.d.ts","sourceRoot":"","sources":["../../src/utils/bytes-to-size.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAW/D"}

package/dist/utils/bytes-to-size.js

@@ -0,0 +1,17 @@
+/**
+ * Convert bytes to human-readable size format
+ *
+ * @param bytes - Number of bytes to convert
+ * @param decimals - Number of decimal places (default: 2)
+ * @returns Formatted string with size and unit (e.g., "1.5 MB")
+ */
+export function bytesToSize(bytes, decimals = 2) {
+    if (bytes === 0) {
+        return '0 Bytes';
+    }
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { bytesToSize } from './bytes-to-size';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { bytesToSize } from './bytes-to-size';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solostylist/ui-kit-native",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React Native UI components for SoloStylist - synced with web ui-kit",
   "type": "module",
   "main": "dist/index.js",
@@ -25,6 +25,11 @@
       "import": "./dist/theme/index.js",
       "default": "./dist/theme/index.js"
     },
+    "./s-button": {
+      "types": "./dist/s-button/index.d.ts",
+      "import": "./dist/s-button/index.js",
+      "default": "./dist/s-button/index.js"
+    },
     "./s-text-field": {
       "types": "./dist/s-text-field/index.d.ts",
       "import": "./dist/s-text-field/index.js",
@@ -34,14 +39,155 @@
       "types": "./dist/s-form/index.d.ts",
       "import": "./dist/s-form/index.js",
       "default": "./dist/s-form/index.js"
+    },
+    "./s-select": {
+      "types": "./dist/s-select/index.d.ts",
+      "import": "./dist/s-select/index.js",
+      "default": "./dist/s-select/index.js"
+    },
+    "./s-icon-button": {
+      "types": "./dist/s-icon-button/index.d.ts",
+      "import": "./dist/s-icon-button/index.js",
+      "default": "./dist/s-icon-button/index.js"
+    },
+    "./s-label": {
+      "types": "./dist/s-label/index.d.ts",
+      "import": "./dist/s-label/index.js",
+      "default": "./dist/s-label/index.js"
+    },
+    "./s-text": {
+      "types": "./dist/s-text/index.d.ts",
+      "import": "./dist/s-text/index.js",
+      "default": "./dist/s-text/index.js"
+    },
+    "./s-rating": {
+      "types": "./dist/s-rating/index.d.ts",
+      "import": "./dist/s-rating/index.js",
+      "default": "./dist/s-rating/index.js"
+    },
+    "./s-date-picker": {
+      "types": "./dist/s-date-picker/index.d.ts",
+      "import": "./dist/s-date-picker/index.js",
+      "default": "./dist/s-date-picker/index.js"
+    },
+    "./s-date-time-picker": {
+      "types": "./dist/s-date-time-picker/index.d.ts",
+      "import": "./dist/s-date-time-picker/index.js",
+      "default": "./dist/s-date-time-picker/index.js"
+    },
+    "./s-file-icon": {
+      "types": "./dist/s-file-icon/index.d.ts",
+      "import": "./dist/s-file-icon/index.js",
+      "default": "./dist/s-file-icon/index.js"
+    },
+    "./s-file-dropzone": {
+      "types": "./dist/s-file-dropzone/index.d.ts",
+      "import": "./dist/s-file-dropzone/index.js",
+      "default": "./dist/s-file-dropzone/index.js"
+    },
+    "./s-avatar": {
+      "types": "./dist/s-avatar/index.d.ts",
+      "import": "./dist/s-avatar/index.js",
+      "default": "./dist/s-avatar/index.js"
+    },
+    "./s-chat-input": {
+      "types": "./dist/s-chat-input/index.d.ts",
+      "import": "./dist/s-chat-input/index.js",
+      "default": "./dist/s-chat-input/index.js"
+    },
+    "./s-chat-message": {
+      "types": "./dist/s-chat-message/index.d.ts",
+      "import": "./dist/s-chat-message/index.js",
+      "default": "./dist/s-chat-message/index.js"
+    },
+    "./s-checkbox": {
+      "types": "./dist/s-checkbox/index.d.ts",
+      "import": "./dist/s-checkbox/index.js",
+      "default": "./dist/s-checkbox/index.js"
+    },
+    "./s-chip": {
+      "types": "./dist/s-chip/index.d.ts",
+      "import": "./dist/s-chip/index.js",
+      "default": "./dist/s-chip/index.js"
+    },
+    "./s-code-block": {
+      "types": "./dist/s-code-block/index.d.ts",
+      "import": "./dist/s-code-block/index.js",
+      "default": "./dist/s-code-block/index.js"
+    },
+    "./s-comment-message": {
+      "types": "./dist/s-comment-message/index.d.ts",
+      "import": "./dist/s-comment-message/index.js",
+      "default": "./dist/s-comment-message/index.js"
+    },
+    "./s-copyable-text": {
+      "types": "./dist/s-copyable-text/index.d.ts",
+      "import": "./dist/s-copyable-text/index.js",
+      "default": "./dist/s-copyable-text/index.js"
+    },
+    "./s-countdown": {
+      "types": "./dist/s-countdown/index.d.ts",
+      "import": "./dist/s-countdown/index.js",
+      "default": "./dist/s-countdown/index.js"
+    },
+    "./s-data-table": {
+      "types": "./dist/s-data-table/index.d.ts",
+      "import": "./dist/s-data-table/index.js",
+      "default": "./dist/s-data-table/index.js"
+    },
+    "./s-image-comparison": {
+      "types": "./dist/s-image-comparison/index.d.ts",
+      "import": "./dist/s-image-comparison/index.js",
+      "default": "./dist/s-image-comparison/index.js"
+    },
+    "./s-language-switcher": {
+      "types": "./dist/s-language-switcher/index.d.ts",
+      "import": "./dist/s-language-switcher/index.js",
+      "default": "./dist/s-language-switcher/index.js"
+    },
+    "./s-lazy-image": {
+      "types": "./dist/s-lazy-image/index.d.ts",
+      "import": "./dist/s-lazy-image/index.js",
+      "default": "./dist/s-lazy-image/index.js"
+    },
+    "./s-moving-border": {
+      "types": "./dist/s-moving-border/index.d.ts",
+      "import": "./dist/s-moving-border/index.js",
+      "default": "./dist/s-moving-border/index.js"
+    },
+    "./s-pagination": {
+      "types": "./dist/s-pagination/index.d.ts",
+      "import": "./dist/s-pagination/index.js",
+      "default": "./dist/s-pagination/index.js"
+    },
+    "./s-text-shimmer": {
+      "types": "./dist/s-text-shimmer/index.d.ts",
+      "import": "./dist/s-text-shimmer/index.js",
+      "default": "./dist/s-text-shimmer/index.js"
+    },
+    "./s-text-truncation": {
+      "types": "./dist/s-text-truncation/index.d.ts",
+      "import": "./dist/s-text-truncation/index.js",
+      "default": "./dist/s-text-truncation/index.js"
+    },
+    "./s-tip": {
+      "types": "./dist/s-tip/index.d.ts",
+      "import": "./dist/s-tip/index.js",
+      "default": "./dist/s-tip/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js",
+      "default": "./dist/hooks/index.js"
     }
   },
   "scripts": {
     "build": "tsc --p ./tsconfig.json",
     "dev": "tsc --p ./tsconfig.json --watch",
-    "test": "echo \"No tests configured for @solostylist/ui-kit-native\"",
-    "lint": "echo \"No linting configured for @solostylist/ui-kit-native\"",
-    "lint:fix": "echo \"No linting configured for @solostylist/ui-kit-native\"",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --fix --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,json,md}\" --cache",
+    "format:check": "prettier --check \"**/*.{js,jsx,mjs,ts,tsx,json,md}\" --cache",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf dist",
     "app:publish": "yarn build && yarn npm publish --access public"
@@ -60,21 +206,45 @@
   "license": "ISC",
   "dependencies": {
     "@solostylist/core": "^1.0.0",
-    "color": "^5.0.3"
+    "color": "^5.0.3",
+    "expo-clipboard": "^8.0.8",
+    "expo-document-picker": "^14.0.8",
+    "react-native-code-highlighter": "^1.3.0",
+    "react-native-country-flag": "^2.0.2",
+    "rn-emoji-keyboard": "^1.7.0"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=15.0.3",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
+    "react-native-gesture-handler": ">=2.30.0",
     "react-native-paper": ">=5.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@expo/vector-icons": "^15.0.3",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@types/react": "~19.2.9",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^17.2.0",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.1",
     "react": "19.2.3",
     "react-native": "0.83.1",
     "react-native-paper": "^5.14.5",
     "react-native-safe-area-context": "5.6.2",
     "rimraf": "^6.1.2",
     "typescript": "^5.9.3"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write --cache"
+    ],
+    "*.{json,md}": [
+      "prettier --write --cache"
+    ]
   }
 }