@solostylist/ui-kit-native 1.0.1 → 1.0.3

package/dist/s-select-list/s-select-list.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Color from 'color';
 import React, { useEffect, useState } from 'react';
-import { Animated, Platform, Pressable, StyleSheet, View } from 'react-native';
+import { Animated, Platform, Pressable, View } from 'react-native';
 import { RadioButton } from 'react-native-paper';
 import { useSTheme } from '../theme';
 /**
  * A selectable list component with radio buttons and optional expandable content.
- * Synced with web SSelectList from @solostylist/ui-kit.
  */
 export const SSelectList = ({ items, selectedId, onSelect, renderItem, renderBelow, showRadio = true, style, }) => {
     const { theme } = useSTheme();
@@ -31,39 +30,12 @@ export const SSelectList = ({ items, selectedId, onSelect, renderItem, renderBel
             });
         }
     };
-    const styles = StyleSheet.create({
-        container: {
-            gap: theme.spacing.md, // MUI Stack spacing={2} = 16px
-        },
-        itemContainer: {
-            width: '100%',
-        },
-        itemBox: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            borderRadius: theme.borderRadius.md, // 8px to match web
-            paddingVertical: theme.spacing.sm, // MUI spacing(1) = 8px
-            paddingLeft: theme.spacing.md, // MUI spacing(2) = 16px
-            paddingRight: theme.spacing.md,
-            borderWidth: 1,
-            borderStyle: 'solid',
-        },
-        itemContent: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: theme.spacing.md, // MUI gap: 2 = 16px
-            flex: 1,
-            borderRadius: theme.borderRadius.md,
-        },
-        belowContent: {
-            marginTop: theme.spacing.md, // MUI mt={2} = 16px
-        },
-        radio: {
-            marginLeft: theme.spacing.xs,
-        },
-    });
-    return (_jsx(View, { style: [styles.container, style], children: items.map((item, index) => {
+    return (_jsx(View, { style: [
+            {
+                gap: theme.spacing.md,
+            },
+            style,
+        ], children: items.map((item, index) => {
             const isSelected = item.id === selectedId;
             const hasBelowContent = renderBelow && isSelected;
             const isExpanded = expandedItems[item.id] ?? false;
@@ -80,17 +52,31 @@ export const SSelectList = ({ items, selectedId, onSelect, renderItem, renderBel
                     ? Color(theme.colors.secondary[600]).alpha(0.1).rgb().string()
                     : Color(theme.colors.secondary[300]).alpha(0.1).rgb().string()
                 : 'transparent';
-            return (_jsxs(View, { style: styles.itemContainer, children: [_jsxs(Pressable, { onPress: () => handleSelect(item.id), onPressIn: () => setHoveredIndex(index), onPressOut: () => setHoveredIndex(null), ...(Platform.OS === 'web' && {
+            return (_jsxs(View, { style: { width: '100%' }, children: [_jsxs(Pressable, { onPress: () => handleSelect(item.id), onPressIn: () => setHoveredIndex(index), onPressOut: () => setHoveredIndex(null), ...(Platform.OS === 'web' && {
                             onMouseEnter: () => setHoveredIndex(index),
                             onMouseLeave: () => setHoveredIndex(null),
                         }), style: ({ pressed }) => [
-                            styles.itemBox,
                             {
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                borderRadius: theme.borderRadius.md,
+                                paddingVertical: theme.spacing.sm,
+                                paddingLeft: theme.spacing.md,
+                                paddingRight: theme.spacing.md,
+                                borderWidth: 1,
+                                borderStyle: 'solid',
                                 borderColor,
                                 backgroundColor: pressed ? backgroundColor : backgroundColor,
                                 cursor: 'pointer',
                             },
-                        ], children: [_jsx(View, { style: styles.itemContent, children: renderItem(item, isSelected) }), showRadio && (_jsx(RadioButton.Android, { value: item.id, status: isSelected ? 'checked' : 'unchecked', color: theme.dark ? theme.colors.primary[400] : theme.colors.primary[600], uncheckedColor: theme.colors.divider, style: styles.radio }))] }), hasBelowContent && _jsx(CollapseView, { isExpanded: isExpanded, children: renderBelow(item) })] }, item.id));
+                        ], children: [_jsx(View, { style: {
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: theme.spacing.md,
+                                    flex: 1,
+                                    borderRadius: theme.borderRadius.md,
+                                }, children: renderItem(item, isSelected) }), showRadio && (_jsx(RadioButton.Android, { value: item.id, status: isSelected ? 'checked' : 'unchecked', color: theme.dark ? theme.colors.primary[400] : theme.colors.primary[600], uncheckedColor: theme.colors.divider, style: { marginLeft: theme.spacing.xs } }))] }), hasBelowContent && _jsx(CollapseView, { isExpanded: isExpanded, children: renderBelow(item) })] }, item.id));
         }) }));
 };
 const CollapseView = ({ isExpanded, children }) => {

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

@@ -0,0 +1,3 @@
+export { SSkeleton, default } from './s-skeleton';
+export type { SSkeletonProps } from './s-skeleton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/s-skeleton/index.js

@@ -0,0 +1 @@
+export { SSkeleton, default } from './s-skeleton';

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Props interface for SSkeleton component
+ */
+export interface SSkeletonProps {
+    /** Visual variant of the skeleton */
+    variant?: 'circular' | 'rectangular' | 'rounded' | 'text';
+    /** Height of the skeleton (number for px, string for percentage/dimensions) */
+    height?: number | string;
+    /** Width of the skeleton (number for px, string for percentage/dimensions) */
+    width?: number | string;
+    /** Additional styles */
+    style?: StyleProp<ViewStyle>;
+    /** Pre-defined component preset for common UI elements */
+    component?: 'button' | 'checkbox' | 'radio-button' | 'avatar' | 'rounded-avatar' | 'icon-button' | 'typography' | 'title-typography';
+}
+/**
+ * An enhanced skeleton loading component with pre-defined component presets for consistent loading states.
+ * Uses a pulse animation to mimic the web skeleton behavior.
+ */
+export declare const SSkeleton: {
+    ({ variant, width, height, style, component }: SSkeletonProps): React.JSX.Element;
+    displayName: string;
+};
+export default SSkeleton;
+//# sourceMappingURL=s-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-skeleton.d.ts","sourceRoot":"","sources":["../../src/s-skeleton/s-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAoC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhG;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,OAAO,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;IAC1D,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,SAAS,CAAC,EACN,QAAQ,GACR,UAAU,GACV,cAAc,GACd,QAAQ,GACR,gBAAgB,GAChB,aAAa,GACb,YAAY,GACZ,kBAAkB,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS;mDAA2D,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAwHlH,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/dist/s-skeleton/s-skeleton.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Animated, Easing } from 'react-native';
+import { useSTheme } from '../theme';
+/**
+ * An enhanced skeleton loading component with pre-defined component presets for consistent loading states.
+ * Uses a pulse animation to mimic the web skeleton behavior.
+ */
+export const SSkeleton = ({ variant = 'text', width, height, style, component }) => {
+    const { theme } = useSTheme();
+    // Pulse animation state
+    const [pulseAnim] = useState(() => new Animated.Value(0.4));
+    useEffect(() => {
+        const pulse = Animated.loop(Animated.sequence([
+            Animated.timing(pulseAnim, {
+                toValue: 1,
+                duration: 800,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+            Animated.timing(pulseAnim, {
+                toValue: 0.4,
+                duration: 800,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        pulse.start();
+        return () => pulse.stop();
+    }, [pulseAnim]);
+    // Determine actual dimensions and variant based on component prop if present
+    let finalVariant = variant;
+    let finalWidth;
+    let finalHeight;
+    if (component) {
+        switch (component) {
+            case 'button':
+                finalHeight = 36; // Matches native button height (small/medium avg)
+                finalVariant = 'rounded';
+                break;
+            case 'checkbox':
+                finalHeight = 24;
+                finalWidth = 24;
+                finalVariant = 'rounded';
+                break;
+            case 'radio-button':
+                finalHeight = 24;
+                finalWidth = 24;
+                finalVariant = 'circular';
+                break;
+            case 'avatar':
+                finalHeight = 54;
+                finalWidth = 54;
+                finalVariant = 'rectangular'; // Web uses rectangular for 'avatar' preset, likely intended for square avatar
+                break;
+            case 'rounded-avatar':
+                finalHeight = 48;
+                finalWidth = 48;
+                finalVariant = 'circular';
+                break;
+            case 'icon-button':
+                finalHeight = 32;
+                finalWidth = 32;
+                finalVariant = 'circular';
+                break;
+            case 'typography':
+                finalWidth = '100%';
+                finalVariant = 'text';
+                // Height will be determined by text variant logic below if not set
+                break;
+            case 'title-typography':
+                finalWidth = 200;
+                finalVariant = 'text';
+                break;
+        }
+    }
+    // Apply prop overrides if provided (taking precedence over component presets)
+    if (width !== undefined)
+        finalWidth = width;
+    if (height !== undefined)
+        finalHeight = height;
+    // Set defaults if not set by component or props
+    if (finalWidth === undefined)
+        finalWidth = '100%';
+    if (finalHeight === undefined) {
+        if (finalVariant === 'text') {
+            finalHeight = 16; // Default text height
+        }
+        else {
+            finalHeight = 32; // Default block height
+        }
+    }
+    // Calculate border radius based on variant
+    let borderRadius = 0;
+    if (finalVariant === 'circular') {
+        // For circular, try to use half of height or width if they are numbers
+        if (typeof finalHeight === 'number') {
+            borderRadius = finalHeight / 2;
+        }
+        else if (typeof finalWidth === 'number') {
+            borderRadius = finalWidth / 2;
+        }
+        else {
+            borderRadius = 9999; // Fallback for percentages
+        }
+    }
+    else if (finalVariant === 'rounded') {
+        borderRadius = theme.borderRadius.md;
+    }
+    else if (finalVariant === 'text') {
+        borderRadius = theme.borderRadius.sm;
+    }
+    // rectangular stays 0
+    return (_jsx(Animated.View, { style: [
+            {
+                width: finalWidth,
+                height: finalHeight,
+                borderRadius,
+                backgroundColor: theme.dark ? theme.colors.secondary[700] : theme.colors.secondary[300],
+                opacity: pulseAnim,
+            },
+            style,
+        ] }));
+};
+SSkeleton.displayName = 'SSkeleton';
+export default SSkeleton;

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

@@ -0,0 +1,3 @@
+export { SSwitch, default } from './s-switch';
+export type { SSwitchProps } from './s-switch';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/s-switch/index.js

@@ -0,0 +1 @@
+export { SSwitch, default } from './s-switch';

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type SwitchProps } from 'react-native-paper';
+/**
+ * Props interface for SSwitch component
+ */
+export interface SSwitchProps extends Omit<SwitchProps, 'theme'> {
+    /** Current toggle state (on/off) */
+    value: boolean;
+    /** Callback fired when switch state changes */
+    onValueChange: (value: boolean) => void;
+    /** Content displayed as a label next to the switch */
+    label?: string | React.ReactNode;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Additional styles for the switch container */
+    style?: StyleProp<ViewStyle>;
+    /** Additional styles for the label text */
+    labelStyle?: StyleProp<ViewStyle>;
+}
+/**
+ * A toggle switch component for binary on/off state selection.
+ * Built on React Native Paper Switch with consistent theming.
+ */
+export declare const SSwitch: {
+    ({ value, onValueChange, label, disabled, style, labelStyle, ...props }: SSwitchProps): React.JSX.Element;
+    displayName: string;
+};
+export default SSwitch;
+//# sourceMappingURL=s-switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-switch.d.ts","sourceRoot":"","sources":["../../src/s-switch/s-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAI9D;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9D,oCAAoC;IACpC,KAAK,EAAE,OAAO,CAAC;IACf,+CAA+C;IAC/C,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO;6EAQjB,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAyDlC,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/s-switch/s-switch.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Pressable } from 'react-native';
+import { Switch } from 'react-native-paper';
+import { SText } from '../s-text';
+import { useSTheme } from '../theme';
+/**
+ * A toggle switch component for binary on/off state selection.
+ * Built on React Native Paper Switch with consistent theming.
+ */
+export const SSwitch = ({ value = false, onValueChange, label, disabled = false, style, labelStyle, ...props }) => {
+    const { theme } = useSTheme();
+    // Calculate colors based on theme mode
+    const colors = useMemo(() => {
+        const isDark = theme.dark;
+        // Track colors - on/off states
+        const trackColorOn = isDark ? theme.colors.primary[400] : theme.colors.primary[600];
+        const trackColorOff = isDark ? theme.colors.secondary[600] : theme.colors.secondary[400];
+        const disabledTrackColor = isDark ? theme.colors.secondary[700] : theme.colors.secondary[300];
+        // Label color
+        const labelColor = disabled ? theme.colors.text.disabled : theme.colors.text.primary;
+        return {
+            trackColorOn: disabled ? disabledTrackColor : trackColorOn,
+            trackColorOff: disabled ? disabledTrackColor : trackColorOff,
+            labelColor,
+        };
+    }, [theme.dark, theme.colors, disabled]);
+    const handleValueChange = (newValue) => {
+        if (!disabled && onValueChange) {
+            onValueChange(newValue);
+        }
+    };
+    return (_jsxs(Pressable, { style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                width: '100%',
+            },
+            style,
+        ], onPress: () => handleValueChange(!value), disabled: disabled, children: [label && (_jsx(SText, { variant: "body2", style: [{ color: colors.labelColor }, labelStyle], children: label })), _jsx(Switch, { value: value, onValueChange: handleValueChange, disabled: disabled, color: colors.trackColorOn, ...props })] }));
+};
+SSwitch.displayName = 'SSwitch';
+export default SSwitch;

package/dist/s-text-field/s-text-field.d.ts

@@ -3,7 +3,6 @@ import { type KeyboardTypeOptions } from 'react-native';
 import { type TextInputProps } from 'react-native-paper';
 /**
  * Props interface for STextField component
- * Synced with web STextField from @solostylist/ui-kit
  */
 export interface STextFieldProps extends Omit<TextInputProps, 'error' | 'theme'> {
     /** Field label displayed above the input */
@@ -43,7 +42,6 @@ export interface STextFieldProps extends Omit<TextInputProps, 'error' | 'theme'>
 }
 /**
  * An enhanced text field component with integrated form labeling, error handling, and password visibility toggle.
- * Synced with web STextField from @solostylist/ui-kit.
  */
 export declare const STextField: {
     ({ label, placeholder, value, onChangeText, onBlur, error, required, type, disabled, keyboardType, maxLength, hint, multiline, numberOfLines, size, variant, autoFocus, ...props }: STextFieldProps): React.JSX.Element;

package/dist/s-text-field/s-text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-text-field.d.ts","sourceRoot":"","sources":["../../src/s-text-field/s-text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpE;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9E,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU;wLAmBpB,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAkGrC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"s-text-field.d.ts","sourceRoot":"","sources":["../../src/s-text-field/s-text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpE;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9E,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;wLAmBpB,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAyFrC,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -1,12 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { StyleSheet } from 'react-native';
 import { TextInput } from 'react-native-paper';
 import { SForm } from '../s-form';
 import { useSTheme } from '../theme';
 /**
  * An enhanced text field component with integrated form labeling, error handling, and password visibility toggle.
- * Synced with web STextField from @solostylist/ui-kit.
  */
 export const STextField = ({ label, placeholder, value, onChangeText, onBlur, error, required = false, type = 'text', disabled = false, keyboardType, maxLength, hint, multiline = false, numberOfLines, size = 'medium', variant = 'outlined', autoFocus = false, ...props }) => {
     const { theme } = useSTheme();
@@ -39,31 +37,20 @@ export const STextField = ({ label, placeholder, value, onChangeText, onBlur, er
     const handleTogglePasswordVisibility = () => {
         setIsPasswordVisible(!isPasswordVisible);
     };
-    const styles = StyleSheet.create({
-        input: {
-            // Match web sizes: small = 36px (2.25rem), medium = 40px (2.5rem)
-            ...(size === 'small' && !multiline
-                ? {
-                    height: 36,
-                }
-                : size === 'medium' && !multiline
-                    ? {
-                        height: 40,
-                    }
-                    : {}),
-        },
-        content: {
-            // contentStyle is used for text content styling (input text and placeholder)
-            fontFamily: theme.typography.fontFamily,
-            // fontSize controls both input text and placeholder text size
-            fontSize: size === 'small' ? theme.typography.fontSize.sm : theme.typography.fontSize.md,
-        },
-    });
     const inputType = isPassword && isPasswordVisible ? 'text' : type;
     const secureTextEntry = inputType === 'password';
     // Extract left prop from props if provided (for start icon support)
     const { left, ...restProps } = props;
-    return (_jsx(SForm, { label: label, hint: hint, error: error, required: required, children: _jsx(TextInput, { mode: variant, placeholder: placeholder, placeholderTextColor: theme.colors.divider, value: value, onChangeText: onChangeText, onBlur: onBlur, error: !!error, disabled: disabled, secureTextEntry: secureTextEntry, keyboardType: getKeyboardType(), autoCapitalize: getAutoCapitalize(), maxLength: maxLength, multiline: multiline, numberOfLines: numberOfLines, autoFocus: autoFocus, dense: size === 'small', left: left, right: isPassword ? (_jsx(TextInput.Icon, { icon: isPasswordVisible ? 'eye-off' : 'eye', onPress: handleTogglePasswordVisibility, forceTextInputFocus: false, size: theme.iconSize.xs })) : undefined, style: styles.input, contentStyle: styles.content, ...restProps }) }));
+    return (_jsx(SForm, { label: label, hint: hint, error: error, required: required, children: _jsx(TextInput, { mode: variant, placeholder: placeholder, placeholderTextColor: theme.colors.divider, value: value, onChangeText: onChangeText, onBlur: onBlur, error: !!error, disabled: disabled, secureTextEntry: secureTextEntry, keyboardType: getKeyboardType(), autoCapitalize: getAutoCapitalize(), maxLength: maxLength, multiline: multiline, numberOfLines: numberOfLines, autoFocus: autoFocus, dense: size === 'small', left: left, right: isPassword ? (_jsx(TextInput.Icon, { icon: isPasswordVisible ? 'eye-off' : 'eye', onPress: handleTogglePasswordVisibility, forceTextInputFocus: false, size: theme.iconSize.xs })) : undefined, ...restProps, style: {
+                ...(!multiline && { height: theme.typography.input.height[size] }),
+                ...props.style,
+            }, contentStyle: {
+                fontFamily: theme.typography.fontFamily,
+                fontSize: theme.typography.input.fontSize[size],
+                ...props.contentStyle,
+            }, outlineStyle: disabled && variant === 'outlined'
+                ? { borderColor: theme.colors.divider, ...props.outlineStyle }
+                : props.outlineStyle }) }));
 };
 STextField.displayName = 'STextField';
 export default STextField;

package/dist/s-text-shimmer/s-text-shimmer.d.ts

@@ -13,20 +13,6 @@ export interface STextShimmerProps extends Omit<STextProps, 'children'> {
 }
 /**
  * A text component that creates an animated shimmer effect.
- * Synced with web STextShimmer from @solostylist/ui-kit.
- *
- * Web implementation details:
- * - Uses CSS linear-gradient with background-clip: text
- * - backgroundSize: '250% 100%' (gradient is 2.5x container width)
- * - Gradient pattern: transparent → (50% - spread) → primary color → (50% + spread) → transparent
- * - Animates background-position from 100% (right) to 0% (left)
- * - Base color: text.disabled, Highlight color: text.primary
- *
- * React Native implementation:
- * - Uses layered text with Animated.View
- * - Base layer: text.disabled (always visible)
- * - Highlight layer: text.primary with moving clip window
- * - Matches web's animation direction, duration, and spread behavior
  */
 export declare const STextShimmer: {
     ({ children, duration, spread, variant, style, ...textProps }: STextShimmerProps): React.JSX.Element;

package/dist/s-text-shimmer/s-text-shimmer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-text-shimmer.d.ts","sourceRoot":"","sources":["../../src/s-text-shimmer/s-text-shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAS,UAAU,EAAE,MAAM,WAAW,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACrE,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY;mEAOtB,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA6IvC,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"s-text-shimmer.d.ts","sourceRoot":"","sources":["../../src/s-text-shimmer/s-text-shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAS,UAAU,EAAE,MAAM,WAAW,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACrE,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY;mEAOtB,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAuIvC,CAAC;AAIF,eAAe,YAAY,CAAC"}

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

@@ -1,23 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { Animated, Easing, View } from 'react-native';
 import { SText } from '../s-text';
 /**
  * A text component that creates an animated shimmer effect.
- * Synced with web STextShimmer from @solostylist/ui-kit.
- *
- * Web implementation details:
- * - Uses CSS linear-gradient with background-clip: text
- * - backgroundSize: '250% 100%' (gradient is 2.5x container width)
- * - Gradient pattern: transparent → (50% - spread) → primary color → (50% + spread) → transparent
- * - Animates background-position from 100% (right) to 0% (left)
- * - Base color: text.disabled, Highlight color: text.primary
- *
- * React Native implementation:
- * - Uses layered text with Animated.View
- * - Base layer: text.disabled (always visible)
- * - Highlight layer: text.primary with moving clip window
- * - Matches web's animation direction, duration, and spread behavior
  */
 export const STextShimmer = ({ children, duration = 2, spread = 2, variant = 'body1', style, ...textProps }) => {
     // Animated value for shimmer position (0 to 1)
@@ -84,37 +70,33 @@ export const STextShimmer = ({ children, duration = 2, spread = 2, variant = 'bo
         inputRange: [0, 1],
         outputRange: [highlightWidth, -textWidth],
     });
-    const styles = useMemo(() => StyleSheet.create({
-        container: {
-            overflow: 'hidden',
-        },
-        textContainer: {
-            position: 'relative',
-        },
-        shimmerContainer: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            overflow: 'hidden',
-        },
-        highlightWindow: {
-            position: 'absolute',
-            top: 0,
-            overflow: 'hidden',
-        },
-    }), []);
-    return (_jsx(View, { style: [styles.container, style], children: _jsxs(View, { style: styles.textContainer, onLayout: handleLayout, children: [_jsx(SText, { variant: variant, color: "text.disabled", ...textProps, children: children }), textWidth > 0 && (_jsx(View, { style: styles.shimmerContainer, children: _jsx(Animated.View, { style: [
-                            styles.highlightWindow,
-                            {
-                                width: highlightWidth,
-                                transform: [{ translateX: highlightPositionX }],
-                            },
-                        ], children: _jsx(Animated.View, { style: {
-                                width: textWidth,
-                                transform: [{ translateX: textOffsetX }],
-                            }, children: _jsx(SText, { variant: variant, color: "text.primary", ...textProps, children: children }) }) }) }))] }) }));
+    return (_jsxs(View, { style: [
+            {
+                overflow: 'hidden',
+                position: 'relative',
+            },
+            style,
+        ], onLayout: handleLayout, children: [_jsx(SText, { variant: variant, color: "text.disabled", ...textProps, children: children }), textWidth > 0 && (_jsx(View, { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    overflow: 'hidden',
+                }, children: _jsx(Animated.View, { style: [
+                        {
+                            position: 'absolute',
+                            top: 0,
+                            overflow: 'hidden',
+                        },
+                        {
+                            width: highlightWidth,
+                            transform: [{ translateX: highlightPositionX }],
+                        },
+                    ], children: _jsx(Animated.View, { style: {
+                            width: textWidth,
+                            transform: [{ translateX: textOffsetX }],
+                        }, children: _jsx(SText, { variant: variant, color: "text.primary", ...textProps, children: children }) }) }) }))] }));
 };
 STextShimmer.displayName = 'STextShimmer';
 export default STextShimmer;

package/dist/s-text-truncation/s-text-truncation.d.ts

@@ -3,12 +3,11 @@ import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 /**
  * Display variant for STextTruncation
  * - 'expandable': Shows See more/less link to toggle text expansion
- * - 'tooltip': Shows ellipsis only (tooltip functionality not available in RN)
+ * - 'tooltip': Shows ellipsis with tooltip on long press
  */
 export type STextTruncationVariant = 'expandable' | 'tooltip';
 /**
  * Props interface for STextTruncation component
- * Synced with web STextTruncation from @solostylist/ui-kit
  */
 export interface STextTruncationProps {
     /** The text content to display and potentially truncate */
@@ -21,8 +20,6 @@ export interface STextTruncationProps {
     seeMoreText?: string;
     /** Text to show for collapsing (default: 'See less') */
     seeLessText?: string;
-    /** Minimum word count to show toggle link (default: 20) */
-    minWordsForToggle?: number;
     /** Additional styles for the container */
     style?: StyleProp<ViewStyle>;
     /** Additional styles for the text */
@@ -34,11 +31,11 @@ export interface STextTruncationProps {
 }
 /**
  * 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 declare const STextTruncation: {
-    ({ text, variant, lines, seeMoreText, seeLessText, minWordsForToggle, style, textStyle, linkStyle, onExpandChange, }: STextTruncationProps): React.JSX.Element;
+    ({ text, variant, lines, seeMoreText, seeLessText, style, textStyle, linkStyle, onExpandChange, }: STextTruncationProps): React.JSX.Element;
     displayName: string;
 };
 export default STextTruncation;

package/dist/s-text-truncation/s-text-truncation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"s-text-truncation.d.ts","sourceRoot":"","sources":["../../src/s-text-truncation/s-text-truncation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAA+B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI3G;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,SAAS,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qCAAqC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,4CAA4C;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,4CAA4C;IAC5C,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe;0HAWzB,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA6D1C,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"s-text-truncation.d.ts","sourceRoot":"","sources":["../../src/s-text-truncation/s-text-truncation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,SAAS,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qCAAqC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,4CAA4C;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,4CAA4C;IAC5C,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe;uGAUzB,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAmH1C,CAAC;AAIF,eAAe,eAAe,CAAC"}