@solostylist/ui-kit-native 1.0.0 → 1.0.1

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Props interface for SLabel component
+ */
+export interface SLabelProps {
+    /** Main label text or element to display prominently */
+    label?: string | React.ReactNode;
+    /** Child elements to render below the label, typically form controls */
+    children?: React.ReactNode;
+    /** Tooltip hint text shown on hover/press of the help icon */
+    hint?: string;
+    /** Custom styles for the container */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * An enhanced label component that provides structured labeling with optional hints and tooltips.
+ * Synced with web SLabel from @solostylist/ui-kit for cross-platform consistency.
+ */
+export declare const SLabel: {
+    ({ label, children, hint, style }: SLabelProps): React.JSX.Element;
+    displayName: string;
+};
+export default SLabel;
+//# sourceMappingURL=s-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-label.d.ts","sourceRoot":"","sources":["../../src/s-label/s-label.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhF;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;uCAAsC,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAwCvF,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/s-label/s-label.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MaterialIcons } from '@expo/vector-icons';
+import { StyleSheet, View } from 'react-native';
+import { Text, Tooltip } from 'react-native-paper';
+import { useSTheme } from '../theme';
+/**
+ * An enhanced label component that provides structured labeling with optional hints and tooltips.
+ * Synced with web SLabel from @solostylist/ui-kit for cross-platform consistency.
+ */
+export const SLabel = ({ label, children, hint, style }) => {
+    const { theme } = useSTheme();
+    const styles = StyleSheet.create({
+        container: {
+            width: '100%',
+        },
+        labelRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginBottom: 8, // 8px matches the 1 spacing unit from MUI theme
+        },
+        labelText: {
+            fontSize: 14, // 0.875rem * 16px = 14px
+            fontWeight: '500',
+            lineHeight: 14 * 1.57, // lineHeight from web version
+            color: theme.colors.text.secondary,
+            fontFamily: theme.typography.fontFamily,
+        },
+        helpIcon: {
+            marginLeft: 4,
+        },
+    });
+    return (_jsxs(View, { style: [styles.container, style], children: [_jsxs(View, { style: styles.labelRow, children: [typeof label === 'string' ? _jsx(Text, { style: styles.labelText, children: label }) : label, hint ? (_jsx(Tooltip, { title: hint, children: _jsx(MaterialIcons, { name: "help-outline", size: 16, color: theme.colors.text.secondary, style: styles.helpIcon }) })) : null] }), children] }));
+};
+SLabel.displayName = 'SLabel';
+export default SLabel;

package/dist/s-language-switcher/index.d.ts

@@ -0,0 +1,4 @@
+export { SLanguageSwitcher, default } from './s-language-switcher';
+export type { SLanguageSwitcherProps, SLanguageOption } from './s-language-switcher';
+export { defaultLanguageOptions } from './s-language-switcher';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-language-switcher/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-language-switcher/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/s-language-switcher/index.js

@@ -0,0 +1,2 @@
+export { SLanguageSwitcher, default } from './s-language-switcher';
+export { defaultLanguageOptions } from './s-language-switcher';

package/dist/s-language-switcher/s-language-switcher.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Language option interface
+ * Synced with web SLanguageSwitcher from @solostylist/ui-kit
+ */
+export interface SLanguageOption {
+    /** Language code (e.g., 'en', 'vi') */
+    code: string;
+    /** Display label (e.g., 'English', 'Vietnamese') */
+    label: string;
+    /** ISO 3166-1 alpha-2 country code for flag (e.g., 'GB', 'VN', 'US') */
+    countryCode: string;
+}
+/**
+ * Props interface for SLanguageSwitcher component
+ * Synced with web SLanguageSwitcher from @solostylist/ui-kit
+ */
+export interface SLanguageSwitcherProps {
+    /** Custom language options to display (default: English & Vietnamese) */
+    languages?: SLanguageOption[];
+    /** Callback when language changes */
+    onLanguageChange: (languageCode: string) => void;
+    /** Current language code */
+    currentLanguage: string;
+    /** Size of the flag icon in the button (default: 20) */
+    buttonFlagSize?: number;
+    /** Size of the flag icon in the menu items (default: 24) */
+    menuFlagSize?: number;
+    /** Width of the language menu dropdown (default: 220) */
+    menuWidth?: number;
+    /** Additional styles for the icon button container */
+    style?: StyleProp<ViewStyle>;
+    /** Additional styles for the menu */
+    menuStyle?: StyleProp<ViewStyle>;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+}
+/**
+ * Default language options
+ */
+export declare const defaultLanguageOptions: SLanguageOption[];
+/**
+ * A language switcher component with flag icons and dropdown menu.
+ * Built on React Native Paper with consistent theming.
+ * Synced with web SLanguageSwitcher from @solostylist/ui-kit for cross-platform consistency.
+ *
+ * For react-i18next integration, create a wrapper component that uses the useTranslation hook
+ * and passes currentLanguage and onLanguageChange props.
+ */
+export declare const SLanguageSwitcher: {
+    ({ languages, onLanguageChange, currentLanguage, buttonFlagSize, menuFlagSize, menuWidth, style, menuStyle, disabled, }: SLanguageSwitcherProps): React.JSX.Element;
+    displayName: string;
+};
+export default SLanguageSwitcher;
+//# sourceMappingURL=s-language-switcher.d.ts.map

package/dist/s-language-switcher/s-language-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-language-switcher.d.ts","sourceRoot":"","sources":["../../src/s-language-switcher/s-language-switcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,yEAAyE;IACzE,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;IAC9B,qCAAqC;IACrC,gBAAgB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qCAAqC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,eAAe,EAGnD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB;6HAU3B,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAuF5C,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/dist/s-language-switcher/s-language-switcher.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import CountryFlag from 'react-native-country-flag';
+import { IconButton, Menu } from 'react-native-paper';
+import { useSTheme } from '../theme';
+/**
+ * Default language options
+ */
+export const defaultLanguageOptions = [
+    { code: 'en', label: 'English', countryCode: 'GB' },
+    { code: 'vi', label: 'Vietnamese', countryCode: 'VN' },
+];
+/**
+ * A language switcher component with flag icons and dropdown menu.
+ * Built on React Native Paper with consistent theming.
+ * Synced with web SLanguageSwitcher from @solostylist/ui-kit for cross-platform consistency.
+ *
+ * For react-i18next integration, create a wrapper component that uses the useTranslation hook
+ * and passes currentLanguage and onLanguageChange props.
+ */
+export const SLanguageSwitcher = ({ languages = defaultLanguageOptions, onLanguageChange, currentLanguage, buttonFlagSize = 20, menuFlagSize = 24, menuWidth = 220, style, menuStyle, disabled = false, }) => {
+    const { theme } = useSTheme();
+    const [menuVisible, setMenuVisible] = useState(false);
+    const currentOption = languages.find((lang) => lang.code === currentLanguage) || languages[0];
+    // Menu visibility handlers
+    const openMenu = useCallback(() => {
+        if (!disabled) {
+            setMenuVisible(true);
+        }
+    }, [disabled]);
+    const closeMenu = useCallback(() => {
+        setMenuVisible(false);
+    }, []);
+    // Language change handler
+    const handleLanguageChange = useCallback((languageCode) => {
+        closeMenu();
+        onLanguageChange(languageCode);
+    }, [onLanguageChange, closeMenu]);
+    // Compute styles
+    const menuBgColor = theme.colors.background.paper;
+    const selectedItemBg = theme.dark ? theme.colors.primary[800] : theme.colors.primary[100];
+    const itemTextColor = theme.colors.text.primary;
+    const styles = useMemo(() => StyleSheet.create({
+        menu: {
+            width: menuWidth,
+            backgroundColor: menuBgColor,
+            borderRadius: theme.borderRadius.md,
+        },
+        menuItem: {
+            backgroundColor: 'transparent',
+        },
+        menuItemSelected: {
+            backgroundColor: selectedItemBg,
+        },
+        flagContainer: {
+            width: menuFlagSize * 1.5,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    }), [theme, menuFlagSize, menuWidth, menuBgColor, selectedItemBg]);
+    return (_jsx(Menu, { visible: menuVisible, onDismiss: closeMenu, anchor: _jsx(IconButton, { icon: () => _jsx(CountryFlag, { isoCode: currentOption?.countryCode || 'GB', size: buttonFlagSize }), onPress: openMenu, disabled: disabled, style: style }), contentStyle: [styles.menu, menuStyle], children: languages.map((lang) => {
+            const isSelected = lang.code === currentLanguage;
+            return (_jsx(Menu.Item, { onPress: () => handleLanguageChange(lang.code), title: lang.label, leadingIcon: () => (_jsx(View, { style: styles.flagContainer, children: _jsx(CountryFlag, { isoCode: lang.countryCode, size: menuFlagSize }) })), style: [styles.menuItem, isSelected && styles.menuItemSelected], titleStyle: { color: itemTextColor } }, lang.code));
+        }) }));
+};
+SLanguageSwitcher.displayName = 'SLanguageSwitcher';
+export default SLanguageSwitcher;

package/dist/s-lazy-image/index.d.ts

@@ -0,0 +1,3 @@
+export { SLazyImage, default } from './s-lazy-image';
+export type { SLazyImageProps, SLazyImageVariant } from './s-lazy-image';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-lazy-image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-lazy-image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/s-lazy-image/index.js

@@ -0,0 +1 @@
+export { SLazyImage, default } from './s-lazy-image';

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { type ImageProps, type ImageStyle, type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Skeleton variant types matching web SLazyImage
+ */
+export type SLazyImageVariant = 'circular' | 'rectangular' | 'rounded' | 'text';
+/**
+ * Props for the SLazyImage component
+ * Synced with web SLazyImage from @solostylist/ui-kit
+ */
+export interface SLazyImageProps extends Omit<ImageProps, 'source' | 'onLoad' | 'onError' | 'height' | 'width'> {
+    /** Image source URL */
+    src: string;
+    /** Skeleton variant while loading */
+    variant?: SLazyImageVariant;
+    /** Image height */
+    height?: number | string;
+    /** Image width */
+    width?: number | string;
+    /** Minimum width constraint */
+    minWidth?: number | string;
+    /** Minimum height constraint */
+    minHeight?: number | string;
+    /** Additional styles for the container */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Additional styles for the image */
+    imageStyle?: StyleProp<ImageStyle>;
+    /** Additional styles for the skeleton placeholder */
+    skeletonStyle?: StyleProp<ViewStyle>;
+    /** Callback fired when the image loads successfully */
+    onLoad?: (event: any) => void;
+    /** Callback fired when the image fails to load */
+    onError?: (error: any) => void;
+}
+/**
+ * A lazy-loading image component with skeleton placeholder.
+ * Built on React Native Image with loading state management.
+ * Synced with web SLazyImage from @solostylist/ui-kit for cross-platform consistency.
+ */
+export declare const SLazyImage: {
+    ({ src, variant, height, width, minWidth, minHeight, containerStyle, imageStyle, skeletonStyle, onLoad, onError, style, ...props }: SLazyImageProps): React.JSX.Element;
+    displayName: string;
+};
+export default SLazyImage;
+//# sourceMappingURL=s-lazy-image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-lazy-image.d.ts","sourceRoot":"","sources":["../../src/s-lazy-image/s-lazy-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhF;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7G,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,qCAAqC;IACrC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,mBAAmB;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,sCAAsC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACnC,qDAAqD;IACrD,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU;wIAcpB,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA2FrC,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Image, StyleSheet, View, } from 'react-native';
+import { ActivityIndicator } from 'react-native-paper';
+import { useSTheme } from '../theme';
+/**
+ * A lazy-loading image component with skeleton placeholder.
+ * Built on React Native Image with loading state management.
+ * Synced with web SLazyImage from @solostylist/ui-kit for cross-platform consistency.
+ */
+export const SLazyImage = ({ src, variant = 'rounded', height = 200, width = '100%', minWidth, minHeight, containerStyle, imageStyle, skeletonStyle, onLoad, onError, style, ...props }) => {
+    const { theme } = useSTheme();
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageError, setImageError] = useState(false);
+    const getBorderRadius = () => {
+        switch (variant) {
+            case 'circular':
+                return 9999; // Large number for circular
+            case 'rounded':
+                return theme.borderRadius.md;
+            case 'rectangular':
+            case 'text':
+            default:
+                return 0;
+        }
+    };
+    const borderRadius = getBorderRadius();
+    const skeletonBgColor = theme.dark ? theme.colors.secondary[700] : theme.colors.secondary[300];
+    const styles = useMemo(() => StyleSheet.create({
+        container: {
+            position: 'relative',
+            width: typeof width === 'number' ? width : undefined,
+            height: typeof height === 'number' ? height : undefined,
+            minWidth: typeof minWidth === 'number' ? minWidth : undefined,
+            minHeight: typeof minHeight === 'number' ? minHeight : undefined,
+            overflow: 'hidden',
+        },
+        skeleton: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: skeletonBgColor,
+            borderRadius,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        image: {
+            width: '100%',
+            height: '100%',
+            borderRadius,
+        },
+        hidden: {
+            opacity: 0,
+        },
+    }), [width, height, minWidth, minHeight, borderRadius, skeletonBgColor]);
+    const handleLoad = (event) => {
+        setImageLoaded(true);
+        setImageError(false);
+        onLoad?.(event);
+    };
+    const handleError = (error) => {
+        setImageError(true);
+        setImageLoaded(false);
+        onError?.(error);
+    };
+    return (_jsxs(View, { style: [styles.container, containerStyle], children: [!imageLoaded && !imageError && (_jsx(View, { style: [styles.skeleton, skeletonStyle], children: _jsx(ActivityIndicator, { size: "small", color: theme.dark ? theme.colors.primary[300] : theme.colors.primary[500] }) })), !imageError && (_jsx(Image, { source: { uri: src }, style: [styles.image, imageStyle, style, !imageLoaded && styles.hidden], onLoad: handleLoad, onError: handleError, ...props })), imageError && _jsx(View, { style: [styles.skeleton, skeletonStyle] })] }));
+};
+SLazyImage.displayName = 'SLazyImage';
+export default SLazyImage;

package/dist/s-moving-border/index.d.ts

@@ -0,0 +1,2 @@
+export { SMovingBorder, type SMovingBorderProps } from './s-moving-border';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-moving-border/index.d.ts.map

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

package/dist/s-moving-border/index.js

@@ -0,0 +1 @@
+export { SMovingBorder } from './s-moving-border';

package/dist/s-moving-border/s-moving-border.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+/**
+ * Props interface for SMovingBorder component
+ * Synced with web SMovingBorder from @solostylist/ui-kit
+ */
+export interface SMovingBorderProps {
+    /** Duration of one complete animation cycle in milliseconds (default: 6000) */
+    duration?: number;
+    /** Color of the glow effect (supports theme colors or hex) */
+    glowColor?: string;
+    /** Size of the glow effect in pixels (default: 250) */
+    glowSize?: number;
+    /** Content to render inside the moving border container */
+    children: React.ReactNode;
+    /** Border radius for rounded corners (default: 0) */
+    borderRadius?: number;
+    /** Additional styles for the container */
+    style?: ViewStyle;
+}
+/**
+ * An animated border effect component that creates smooth moving light effects around the element perimeter.
+ * Synced with web SMovingBorder from @solostylist/ui-kit.
+ *
+ * Web implementation details:
+ * - Uses framer-motion for smooth SVG path animations
+ * - Uses SVG rect paths with getPointAtLength() for precise positioning
+ * - Two glow elements with 180° phase offset for continuous effect
+ *
+ * React Native implementation:
+ * - Uses Animated API for performant animations
+ * - Calculates path positions manually for rectangular borders
+ * - Maintains same visual appearance and timing as web version
+ */
+export declare const SMovingBorder: {
+    ({ duration, glowColor, glowSize, children, borderRadius, style, }: SMovingBorderProps): React.JSX.Element;
+    displayName: string;
+};
+export default SMovingBorder;
+//# sourceMappingURL=s-moving-border.d.ts.map

package/dist/s-moving-border/s-moving-border.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-moving-border.d.ts","sourceRoot":"","sources":["../../src/s-moving-border/s-moving-border.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAyD,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrG;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAkJD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa;wEAOvB,kBAAkB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAsExC,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/s-moving-border/s-moving-border.js

@@ -0,0 +1,158 @@
+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 { useSTheme } from '../theme';
+/** Default glow size in pixels */
+const GLOW_SIZE = 250;
+/**
+ * Calculates a point on a rectangular path given a progress value (0-1)
+ *
+ * The path follows: top edge → right edge → bottom edge → left edge
+ *
+ * @param progress - Animation progress (0-1)
+ * @param width - Container width
+ * @param height - Container height
+ * @returns {x, y} coordinates on the path
+ */
+const getPointOnPath = (progress, width, height) => {
+    // Normalize progress to 0-1 range
+    const normalizedProgress = progress % 1;
+    // Calculate perimeter (simplified - not accounting for rounded corners arc length)
+    const perimeter = 2 * (width + height);
+    const distance = normalizedProgress * perimeter;
+    // Top edge (left to right)
+    if (distance <= width) {
+        return { x: distance, y: 0 };
+    }
+    // Right edge (top to bottom)
+    if (distance <= width + height) {
+        return { x: width, y: distance - width };
+    }
+    // Bottom edge (right to left)
+    if (distance <= 2 * width + height) {
+        return { x: width - (distance - width - height), y: height };
+    }
+    // Left edge (bottom to top)
+    return { x: 0, y: height - (distance - 2 * width - height) };
+};
+/**
+ * Internal component that handles a single animated glow element
+ */
+const MovingGlow = ({ duration, phase = 0, glowSize, glowColor, containerWidth, containerHeight, }) => {
+    const [animProgress] = useState(() => new Animated.Value(phase));
+    const isActiveRef = useRef(true);
+    useEffect(() => {
+        if (containerWidth === 0 || containerHeight === 0)
+            return;
+        isActiveRef.current = true;
+        const animate = () => {
+            if (!isActiveRef.current)
+                return;
+            animProgress.setValue(phase);
+            Animated.timing(animProgress, {
+                toValue: phase + 1,
+                duration: duration,
+                easing: Easing.linear,
+                useNativeDriver: true,
+            }).start(({ finished }) => {
+                if (finished && isActiveRef.current) {
+                    animate();
+                }
+            });
+        };
+        animate();
+        return () => {
+            isActiveRef.current = false;
+            animProgress.stopAnimation();
+        };
+    }, [duration, phase, containerWidth, containerHeight, animProgress]);
+    // We need to use a listener to update position since we can't use
+    // interpolate with custom functions in React Native
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    useEffect(() => {
+        const listenerId = animProgress.addListener(({ value }) => {
+            const point = getPointOnPath(value, containerWidth, containerHeight);
+            setPosition(point);
+        });
+        return () => {
+            animProgress.removeListener(listenerId);
+        };
+    }, [animProgress, containerWidth, containerHeight]);
+    return (_jsxs(View, { style: {
+            position: 'absolute',
+            left: position.x - glowSize / 2,
+            top: position.y - glowSize / 2,
+            width: glowSize,
+            height: glowSize,
+            borderRadius: glowSize / 2,
+            backgroundColor: glowColor,
+            opacity: 0.5,
+        }, children: [_jsx(View, { style: {
+                    position: 'absolute',
+                    top: '10%',
+                    left: '10%',
+                    right: '10%',
+                    bottom: '10%',
+                    borderRadius: glowSize / 2,
+                    backgroundColor: glowColor,
+                    opacity: 0.3,
+                } }), _jsx(View, { style: {
+                    position: 'absolute',
+                    top: '20%',
+                    left: '20%',
+                    right: '20%',
+                    bottom: '20%',
+                    borderRadius: glowSize / 2,
+                    backgroundColor: glowColor,
+                    opacity: 0.2,
+                } })] }));
+};
+/**
+ * An animated border effect component that creates smooth moving light effects around the element perimeter.
+ * Synced with web SMovingBorder from @solostylist/ui-kit.
+ *
+ * Web implementation details:
+ * - Uses framer-motion for smooth SVG path animations
+ * - Uses SVG rect paths with getPointAtLength() for precise positioning
+ * - Two glow elements with 180° phase offset for continuous effect
+ *
+ * React Native implementation:
+ * - Uses Animated API for performant animations
+ * - Calculates path positions manually for rectangular borders
+ * - Maintains same visual appearance and timing as web version
+ */
+export const SMovingBorder = ({ duration = 6000, glowColor, glowSize = GLOW_SIZE, children, borderRadius = 0, style, }) => {
+    const { theme } = useSTheme();
+    const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+    // Default glow color to theme primary.main (500 shade matches web)
+    const effectiveGlowColor = glowColor || theme.colors.primary[500];
+    const handleLayout = (event) => {
+        const { width, height } = event.nativeEvent.layout;
+        if (width > 0 && height > 0) {
+            setContainerSize({ width, height });
+        }
+    };
+    const styles = useMemo(() => StyleSheet.create({
+        container: {
+            position: 'relative',
+            overflow: 'hidden',
+            width: '100%',
+            height: '100%',
+        },
+        animationLayer: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            pointerEvents: 'none',
+        },
+        contentLayer: {
+            position: 'relative',
+            zIndex: 1,
+        },
+    }), []);
+    return (_jsxs(View, { style: [styles.container, { borderRadius }, style], onLayout: handleLayout, children: [containerSize.width > 0 && containerSize.height > 0 && (_jsxs(View, { style: styles.animationLayer, children: [_jsx(MovingGlow, { duration: duration, phase: 0, glowSize: glowSize, glowColor: effectiveGlowColor, containerWidth: containerSize.width, containerHeight: containerSize.height }), _jsx(MovingGlow, { duration: duration, phase: 0.5, glowSize: glowSize, glowColor: effectiveGlowColor, containerWidth: containerSize.width, containerHeight: containerSize.height })] })), _jsx(View, { style: styles.contentLayer, children: children })] }));
+};
+SMovingBorder.displayName = 'SMovingBorder';
+export default SMovingBorder;

package/dist/s-multi-select/index.d.ts

@@ -0,0 +1,2 @@
+export { SMultiSelect, type SMultiSelectProps } from './s-multi-select';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-multi-select/index.d.ts.map

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

package/dist/s-multi-select/index.js

@@ -0,0 +1 @@
+export { SMultiSelect } from './s-multi-select';

package/dist/s-multi-select/s-multi-select.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+/**
+ * Props interface for SMultiSelect component
+ * Synced with web SMultiSelect from @solostylist/ui-kit
+ * @template T - Type of the option values (string, number, or boolean)
+ */
+export interface SMultiSelectProps<T = string> {
+    /** Label text displayed above the select field */
+    label: string;
+    /** Callback fired when the selection changes */
+    onChange?: (value: T[]) => void;
+    /** Array of options with label and value pairs */
+    options: readonly {
+        label: string;
+        value: T;
+        disabled?: boolean;
+    }[];
+    /** Currently selected values */
+    value: T[];
+    /** Placeholder text shown when no option is selected */
+    placeholder?: string;
+    /** Visual style variant */
+    variant?: 'outlined' | 'flat';
+    /** Enable search/filter functionality in the dropdown */
+    searchable?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Input size variant */
+    size?: 'small' | 'medium';
+    /** Error message to display below the field */
+    error?: string;
+    /** Whether the field is required (shows asterisk in label) */
+    required?: boolean;
+    /** Help text shown below the input */
+    hint?: string;
+    /** Color variant for the chips */
+    chipColor?: 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+    /** Variant for the chips */
+    chipVariant?: 'filled' | 'outlined';
+    /** Size for the chips */
+    chipSize?: 'small' | 'medium';
+}
+/**
+ * A multi-selection dropdown component that displays selected items as chips.
+ * Unlike SSelect with multiple mode, this doesn't show checkboxes - just toggleable menu items.
+ * Synced with web SMultiSelect from @solostylist/ui-kit and matches SSelect styling.
+ */
+export declare function SMultiSelect<T = string>({ label, onChange, options, value, placeholder, variant, searchable, searchPlaceholder, disabled, size, error, required, hint, chipColor, chipVariant, chipSize, }: SMultiSelectProps<T>): React.JSX.Element;
+export declare namespace SMultiSelect {
+    var displayName: string;
+}
+export default SMultiSelect;
+//# sourceMappingURL=s-multi-select.d.ts.map

package/dist/s-multi-select/s-multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-multi-select.d.ts","sourceRoot":"","sources":["../../src/s-multi-select/s-multi-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAQtE;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,MAAM;IAC3C,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,CAAC,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IACpE,gCAAgC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3F,4BAA4B;IAC5B,WAAW,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACpC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,CAAC,GAAG,MAAM,EAAE,EACvC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAU,EACV,WAAyB,EACzB,OAAoB,EACpB,UAAkB,EAClB,iBAA+B,EAC/B,QAAgB,EAChB,IAAe,EACf,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,SAAqB,EACrB,WAAsB,EACtB,QAAkB,GACnB,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwT1C;yBAzUe,YAAY;;;AA6U5B,eAAe,YAAY,CAAC"}