@solostylist/ui-kit-native 1.0.1 → 1.0.3

package/dist/s-text-truncation/s-text-truncation.js

@@ -1,48 +1,88 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
-import { Text } from 'react-native-paper';
-import { useSTheme } from '../theme';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { SText } from '../s-text';
+import { STooltip } from '../s-tooltip';
 /**
  * A text truncation component with expandable See more/less functionality.
- * Built for React Native with consistent theming.
- * Synced with web STextTruncation from @solostylist/ui-kit.
+ * Uses JS-based binary search truncation so "See more/less" appears inline
+ * at the end of the last line, matching the web ui-kit behavior.
  */
-export const STextTruncation = ({ text, variant = 'expandable', lines = 3, seeMoreText = 'See more', seeLessText = 'See less', minWordsForToggle = 20, style, textStyle, linkStyle, onExpandChange, }) => {
-    const { theme } = useSTheme();
+export const STextTruncation = ({ text = '', variant = 'expandable', lines = 3, seeMoreText = 'See more', seeLessText = 'See less', style, textStyle, linkStyle, onExpandChange, }) => {
     const [isExpanded, setIsExpanded] = useState(false);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const [displayText, setDisplayText] = useState(text);
+    const measureRef = useRef(null);
+    const containerRef = useRef(null);
     const toggleExpansion = () => {
         const newState = !isExpanded;
         setIsExpanded(newState);
         onExpandChange?.(newState);
     };
-    const wordCount = text ? text.split(' ').length : 0;
-    const shouldShowToggle = variant === 'expandable' && wordCount > minWordsForToggle;
-    const styles = useMemo(() => StyleSheet.create({
-        container: {
-            flexDirection: 'column',
-        },
-        text: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: 14,
-            fontWeight: '400',
-            color: theme.colors.text.primary,
-            lineHeight: 20,
-        },
-        link: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: 14,
-            fontWeight: '500',
-            color: theme.colors.primary[500],
-            marginTop: 4,
-        },
-    }), [theme.typography.fontFamily, theme.colors.text.primary, theme.colors.primary]);
-    // Tooltip variant: Show truncated text with ellipsis only
+    /**
+     * Measures text and computes the truncation point using binary search.
+     * Uses a hidden element with the same width/font to accurately measure line breaks.
+     * Mirrors the web ui-kit approach for consistent behavior.
+     */
+    const computeTruncation = useCallback(() => {
+        // Access the underlying DOM node (works on Expo Web / React Native Web)
+        const el = measureRef.current;
+        if (!el || !text) {
+            setIsTruncated(false);
+            setDisplayText(text);
+            return;
+        }
+        // Measure line height using a single character
+        el.textContent = 'A';
+        const lineHeight = el.scrollHeight || 0;
+        if (lineHeight === 0)
+            return;
+        const maxHeight = lineHeight * lines;
+        // Check if full text fits within the allowed lines
+        el.textContent = text;
+        if ((el.scrollHeight || 0) <= maxHeight + 1) {
+            setIsTruncated(false);
+            setDisplayText(text);
+            el.textContent = '';
+            return;
+        }
+        setIsTruncated(true);
+        // Binary search for the max characters that fit with "… See more" appended
+        const suffix = `… ${seeMoreText}`;
+        let low = 0;
+        let high = text.length;
+        while (low < high) {
+            const mid = Math.ceil((low + high) / 2);
+            el.textContent = text.slice(0, mid) + suffix;
+            if ((el.scrollHeight || 0) > maxHeight + 1) {
+                high = mid - 1;
+            }
+            else {
+                low = mid;
+            }
+        }
+        // Clear measurer content to prevent hidden text from leaking into the UI
+        el.textContent = '';
+        setDisplayText(text.slice(0, low).trimEnd());
+    }, [text, lines, seeMoreText]);
+    useEffect(() => {
+        // Delay measurement to ensure fonts are loaded and layout is complete
+        const timer = setTimeout(computeTruncation, 150);
+        return () => clearTimeout(timer);
+    }, [computeTruncation]);
+    // Tooltip variant: Show truncated text with ellipsis tooltip
     if (variant === 'tooltip') {
-        return (_jsx(View, { style: [styles.container, style], children: _jsx(Text, { style: [styles.text, textStyle], numberOfLines: lines, ellipsizeMode: "tail", children: text }) }));
+        return (_jsx(STooltip, { title: text, children: _jsx(View, { style: [{ flexDirection: 'column' }, style], children: _jsx(SText, { style: textStyle, numberOfLines: lines, ellipsizeMode: "tail", children: text }) }) }));
     }
-    // Expandable variant: Show "See more/less" link
-    return (_jsxs(View, { style: [styles.container, style], children: [_jsx(Text, { style: [styles.text, textStyle], numberOfLines: isExpanded ? undefined : lines, ellipsizeMode: "tail", children: text }), shouldShowToggle && (_jsx(Pressable, { onPress: toggleExpansion, children: _jsx(Text, { style: [styles.link, linkStyle], children: isExpanded ? seeLessText : seeMoreText }) }))] }));
+    // Expandable variant: JS-based truncation with inline "See more/less"
+    return (_jsxs(View, { ref: containerRef, style: [{ position: 'relative' }, style], children: [_jsx(View, { ref: measureRef, "aria-hidden": true, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    opacity: 0,
+                    pointerEvents: 'none',
+                } }), _jsxs(SText, { style: textStyle, children: [isExpanded ? text : displayText, isTruncated && (_jsxs(_Fragment, { children: [isExpanded ? ' ' : '… ', _jsx(SText, { style: [linkStyle], color: "primary", onPress: toggleExpansion, children: isExpanded ? seeLessText : seeMoreText })] }))] })] }));
 };
 STextTruncation.displayName = 'STextTruncation';
 export default STextTruncation;

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

@@ -8,7 +8,6 @@ export interface STipProps {
 }
 /**
  * A simple tip component that displays helpful information with a lightbulb icon.
- * Synced with web STip from @solostylist/ui-kit.
  */
 export declare const STip: {
     ({ message }: STipProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"s-tip.d.ts","sourceRoot":"","sources":["../../src/s-tip/s-tip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI;kBAAiB,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA0C9D,CAAC;AAIF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"s-tip.d.ts","sourceRoot":"","sources":["../../src/s-tip/s-tip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI;kBAAiB,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoC9D,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/dist/s-tip/s-tip.js

@@ -1,32 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } 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';
 import { SText } from '../s-text';
 import { useSTheme } from '../theme';
 /**
  * A simple tip component that displays helpful information with a lightbulb icon.
- * Synced with web STip from @solostylist/ui-kit.
  */
 export const STip = ({ message }) => {
     const { theme } = useSTheme();
-    const styles = useMemo(() => StyleSheet.create({
-        container: {
+    return (_jsxs(View, { style: {
             flexDirection: 'row',
             alignItems: 'center',
             backgroundColor: theme.colors.background.default,
-            borderRadius: theme.borderRadius.sm, // 4px (matches web borderRadius: 1 which is 8px in MUI theme spacing, but web uses 1 = 4px here)
+            borderRadius: theme.borderRadius.md, // 8px (matches web borderRadius: 1 which is 8px in MUI theme spacing, but web uses 1 = 4px here)
             padding: theme.spacing.sm, // 8px (matches web p: 1 which is 8px)
-        },
-        icon: {
-            color: theme.colors.text.secondary,
-            marginRight: theme.spacing.sm, // 8px (matches web spacing: 1 which is 8px)
-        },
-        textContainer: {
-            flex: 1,
-        },
-    }), [theme]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(MaterialCommunityIcons, { name: "lightbulb-outline", size: 16, color: theme.colors.text.secondary, style: styles.icon }), _jsx(View, { style: styles.textContainer, children: _jsxs(SText, { variant: "body2", color: "text.secondary", children: [_jsx(SText, { variant: "body2", fontWeight: "700", color: "text.secondary", children: "Tip." }), ' ', message] }) })] }));
+        }, children: [_jsx(MaterialCommunityIcons, { name: "lightbulb-outline", size: 16, color: theme.colors.text.secondary, style: {
+                    color: theme.colors.text.secondary,
+                    marginRight: theme.spacing.sm, // 8px (matches web spacing: 1 which is 8px)
+                } }), _jsx(View, { style: {
+                    flex: 1,
+                }, children: _jsxs(SText, { variant: "body2", color: "text.secondary", children: [_jsx(SText, { variant: "body2", fontWeight: "700", color: "text.secondary", children: "Tip." }), ' ', message] }) })] }));
 };
 STip.displayName = 'STip';
 export default STip;

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

@@ -0,0 +1,2 @@
+export { STooltip, type STooltipProps } from './s-tooltip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/s-tooltip/index.js

@@ -0,0 +1 @@
+export { STooltip } from './s-tooltip';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * Props interface for STooltip component
+ */
+export interface STooltipProps {
+    /** Tooltip text content */
+    title: string;
+    /** Delay before showing the tooltip (in ms) */
+    enterDelay?: number;
+    /** Delay before hiding the tooltip (in ms) */
+    leaveDelay?: number;
+    /** Children element that triggers the tooltip */
+    children: React.ReactElement;
+}
+/**
+ * A tooltip component that displays helpful text on long press.
+ */
+export declare const STooltip: {
+    ({ title, enterDelay, leaveDelay, children }: STooltipProps): React.JSX.Element;
+    displayName: string;
+};
+export default STooltip;
+//# sourceMappingURL=s-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-tooltip.d.ts","sourceRoot":"","sources":["../../src/s-tooltip/s-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;kDAAyD,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAkB9G,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/s-tooltip/s-tooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from 'react-native-paper';
+import { useSTheme } from '../theme';
+/**
+ * A tooltip component that displays helpful text on long press.
+ */
+export const STooltip = ({ title, enterDelay = 0, leaveDelay = 0, children }) => {
+    const { theme } = useSTheme();
+    return (_jsx(Tooltip, { title: title, enterTouchDelay: enterDelay, leaveTouchDelay: leaveDelay, theme: {
+            colors: {
+                surface: theme.colors.text.primary,
+                onSurface: theme.colors.background.paper,
+            },
+        }, children: children }));
+};
+STooltip.displayName = 'STooltip';
+export default STooltip;

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

@@ -1,13 +1,12 @@
 import React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
 import { type SLazyImageVariant } from '../s-lazy-image';
 /**
  * Props interface for SZoomImage component
- * Synced with web SZoomImage from @solostylist/ui-kit
  */
 export interface SZoomImageProps {
-    /** Image source URL */
-    src: string;
+    /** Image source URL or local asset */
+    src: ImageSourcePropType;
     /** Scale factor to apply on zoom */
     zoomScale?: number;
     /** Border radius in pixels */
@@ -30,7 +29,6 @@ export interface SZoomImageProps {
 /**
  * An interactive image component with smooth zoom-on-press functionality and built-in lazy loading.
  * Built with React Native Animated API for smooth interactions.
- * Synced with web SZoomImage from @solostylist/ui-kit for cross-platform consistency.
  */
 export declare const SZoomImage: {
     ({ src, zoomScale, borderRadius, skeletonVariant, height, width, containerStyle, imageStyle, onLoad, onError, }: SZoomImageProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"s-zoom-image.d.ts","sourceRoot":"","sources":["../../src/s-zoom-image/s-zoom-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mDAAmD;IACnD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU;qHAWpB,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAuMrC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"s-zoom-image.d.ts","sourceRoot":"","sources":["../../src/s-zoom-image/s-zoom-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAKL,KAAK,mBAAmB,EAExB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,GAAG,EAAE,mBAAmB,CAAC;IACzB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,mDAAmD;IACnD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU;qHAWpB,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAiMrC,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
-import { Animated, Pressable, StyleSheet, View, } from 'react-native';
+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.
- * Synced with web SZoomImage from @solostylist/ui-kit for cross-platform consistency.
  */
 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
@@ -126,26 +125,22 @@ export const SZoomImage = ({ src, zoomScale = 1.2, borderRadius = 12, skeletonVa
         setImageLoaded(true);
         onLoad?.(event);
     }, [onLoad]);
-    const styles = useMemo(() => StyleSheet.create({
-        container: {
-            position: 'relative',
-            width: typeof width === 'number' ? width : undefined,
-            height: typeof height === 'number' ? height : undefined,
-            overflow: 'hidden',
-            borderRadius,
-        },
-        pressable: {
-            width: '100%',
-            height: '100%',
-        },
-        imageContainer: {
-            width: '100%',
-            height: '100%',
-        },
-    }), [width, height, borderRadius]);
-    return (_jsx(View, { style: [styles.container, containerStyle], onLayout: handleLayout, children: _jsx(Pressable, { style: styles.pressable, onPressIn: handlePressIn, onPressOut: handlePressOut, onTouchMove: handleTouchMove, disabled: !imageLoaded, children: _jsx(Animated.View, { style: [
-                    styles.imageContainer,
+    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 }) }) }) }));

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

@@ -1,6 +1,5 @@
 /**
  * Convert bytes to human-readable size format
- * Synced with web utils from @solostylist/ui-kit
  *
  * @param bytes - Number of bytes to convert
  * @param decimals - Number of decimal places (default: 2)

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

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

@@ -1,6 +1,5 @@
 /**
  * Convert bytes to human-readable size format
- * Synced with web utils from @solostylist/ui-kit
  *
  * @param bytes - Number of bytes to convert
  * @param decimals - Number of decimal places (default: 2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solostylist/ui-kit-native",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React Native UI components for SoloStylist - synced with web ui-kit",
   "type": "module",
   "main": "dist/index.js",
@@ -210,7 +210,8 @@
     "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"
+    "react-native-country-flag": "^2.0.2",
+    "rn-emoji-keyboard": "^1.7.0"
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.3",