@solostylist/ui-kit-native 1.0.0 → 1.0.1

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type ButtonProps } from 'react-native-paper';
+/**
+ * Button color variants - matches web SButton from @solostylist/ui-kit
+ */
+export type SButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+/**
+ * Button visual variants - matches web SButton from @solostylist/ui-kit
+ */
+export type SButtonVariant = 'text' | 'outlined' | 'contained';
+/**
+ * Button size variants - matches web SButton from @solostylist/ui-kit
+ */
+export type SButtonSize = 'small' | 'medium' | 'large';
+/**
+ * Props interface for SButton component
+ * Synced with web SButton from @solostylist/ui-kit
+ */
+export interface SButtonProps extends Omit<ButtonProps, 'theme' | 'mode' | 'buttonColor' | 'textColor' | 'children'> {
+    /** Visual variant of the button */
+    variant?: SButtonVariant;
+    /** Theme color of the button */
+    color?: SButtonColor;
+    /** Size of the button */
+    size?: SButtonSize;
+    /** Whether the button is in loading state */
+    loading?: boolean;
+    /** Whether the button takes full width */
+    fullWidth?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Icon to display at the start of the button */
+    startIcon?: React.ReactNode;
+    /** Icon to display at the end of the button */
+    endIcon?: React.ReactNode;
+    /** Button text content */
+    children?: React.ReactNode;
+    /** Additional styles for the button container */
+    style?: StyleProp<ViewStyle>;
+    /** Additional styles for the button label */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Additional styles for the button content */
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Callback fired when button is pressed */
+    onPress?: () => void;
+}
+/**
+ * A versatile button component built on React Native Paper Button with consistent theming.
+ * Synced with web SButton from @solostylist/ui-kit.
+ */
+export declare const SButton: {
+    ({ variant, color, size, loading, fullWidth, disabled, startIcon, endIcon, children, style, labelStyle, contentStyle, onPress, icon, ...props }: SButtonProps): React.JSX.Element;
+    displayName: string;
+};
+export default SButton;
+//# sourceMappingURL=s-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-button.d.ts","sourceRoot":"","sources":["../../src/s-button/s-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1F,OAAO,EAA6B,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAkBjF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE9F;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IAClH,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAwED;;;GAGG;AACH,eAAO,MAAM,OAAO;qJAgBjB,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA+GlC,CAAC;AAIF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { ActivityIndicator, Button } from 'react-native-paper';
+import { blue, brand, green, lightBlue, lightBrand, lightGreen, lightOrange, lightPurple, lightRed, orange, purple, red, } from '@solostylist/core';
+import { useSTheme } from '../theme';
+/**
+ * Get color palettes for light and dark modes
+ */
+const getColorPalettes = (color) => {
+    switch (color) {
+        case 'primary':
+            return { light: lightBrand, dark: brand };
+        case 'secondary':
+            return { light: lightPurple, dark: purple };
+        case 'success':
+            return { light: lightGreen, dark: green };
+        case 'error':
+            return { light: lightRed, dark: red };
+        case 'info':
+            return { light: lightBlue, dark: blue };
+        case 'warning':
+            return { light: lightOrange, dark: orange };
+        default:
+            return { light: lightBrand, dark: brand };
+    }
+};
+/**
+ * Map variant to react-native-paper mode
+ */
+const variantToMode = (variant) => {
+    switch (variant) {
+        case 'text':
+            return 'text';
+        case 'outlined':
+            return 'outlined';
+        case 'contained':
+            return 'contained';
+        default:
+            return 'contained';
+    }
+};
+/**
+ * Get button height based on size - matches web MUI sizes
+ */
+const getSizeHeight = (size) => {
+    switch (size) {
+        case 'small':
+            return 36; // 2.25rem
+        case 'medium':
+            return 40; // 2.5rem
+        case 'large':
+            return 44; // 2.75rem
+        default:
+            return 40;
+    }
+};
+/**
+ * Get font size based on button size
+ */
+const getFontSize = (size) => {
+    switch (size) {
+        case 'small':
+            return 13;
+        case 'medium':
+            return 14;
+        case 'large':
+            return 15;
+        default:
+            return 14;
+    }
+};
+/**
+ * A versatile button component built on React Native Paper Button with consistent theming.
+ * Synced with web SButton from @solostylist/ui-kit.
+ */
+export const SButton = ({ variant = 'contained', color = 'primary', size = 'medium', loading = false, fullWidth = false, disabled = false, startIcon, endIcon, children, style, labelStyle, contentStyle, onPress, icon, ...props }) => {
+    const { theme } = useSTheme();
+    const { light: lightColor, dark: darkColor } = getColorPalettes(color);
+    const colorPalette = theme.dark ? darkColor : lightColor;
+    // Calculate colors based on variant and theme mode
+    const colors = useMemo(() => {
+        const isDark = theme.dark;
+        // Background color
+        let backgroundColor;
+        if (variant === 'text' || variant === 'outlined') {
+            backgroundColor = 'transparent';
+        }
+        else {
+            backgroundColor = isDark ? colorPalette[800] : colorPalette[700];
+        }
+        // Text color
+        let textColor;
+        if (variant === 'text' || variant === 'outlined') {
+            textColor = colorPalette[500];
+        }
+        else {
+            textColor = isDark ? colorPalette[100] : colorPalette[50];
+        }
+        // Border color (for outlined variant)
+        let borderColor;
+        if (variant === 'outlined') {
+            borderColor = isDark ? colorPalette[800] : colorPalette[300];
+        }
+        else {
+            borderColor = 'transparent';
+        }
+        // Disabled state
+        if (disabled) {
+            return {
+                backgroundColor: variant === 'contained' ? backgroundColor : 'transparent',
+                textColor: textColor,
+                borderColor: variant === 'outlined' ? (isDark ? colorPalette[900] : colorPalette[900]) : 'transparent',
+                opacity: 0.5,
+            };
+        }
+        return {
+            backgroundColor,
+            textColor,
+            borderColor,
+            opacity: 1,
+        };
+    }, [theme.dark, variant, colorPalette, disabled]);
+    const height = getSizeHeight(size);
+    const fontSize = getFontSize(size);
+    const styles = useMemo(() => StyleSheet.create({
+        button: {
+            borderRadius: theme.borderRadius.md, // 8px to match web
+            opacity: colors.opacity,
+            ...(fullWidth ? { width: '100%' } : {}),
+        },
+        content: {
+            height,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        label: {
+            fontFamily: theme.typography.fontFamily,
+            fontSize,
+            fontWeight: '500',
+            textTransform: 'none',
+            letterSpacing: 0,
+            marginVertical: 0,
+        },
+    }), [theme.borderRadius.md, theme.typography.fontFamily, colors.opacity, fullWidth, height, fontSize]);
+    // Determine icon to use (startIcon takes precedence, then icon prop)
+    const buttonIcon = startIcon
+        ? () => (_jsx(React.Fragment, { children: loading ? _jsx(ActivityIndicator, { size: fontSize, color: colors.textColor }) : startIcon }))
+        : icon
+            ? icon
+            : loading
+                ? () => _jsx(ActivityIndicator, { size: fontSize, color: colors.textColor })
+                : undefined;
+    return (_jsxs(Button, { mode: variantToMode(variant), disabled: disabled || loading, onPress: onPress, icon: buttonIcon, buttonColor: colors.backgroundColor, textColor: colors.textColor, style: [styles.button, variant === 'outlined' && { borderColor: colors.borderColor, borderWidth: 1 }, style], contentStyle: [styles.content, contentStyle], labelStyle: [styles.label, labelStyle], ...props, children: [children, endIcon && !loading && endIcon] }));
+};
+SButton.displayName = 'SButton';
+export default SButton;

package/dist/s-button-link/index.d.ts

@@ -0,0 +1,2 @@
+export { SButtonLink, type SButtonLinkProps, default } from './s-button-link';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-button-link/index.d.ts.map

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

package/dist/s-button-link/index.js

@@ -0,0 +1 @@
+export { SButtonLink, default } from './s-button-link';

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { type StyleProp, type TextStyle } from 'react-native';
+import { type STextProps } from '../s-text';
+/**
+ * Props interface for SButtonLink component
+ * Synced with web SButtonLink from @solostylist/ui-kit
+ */
+export interface SButtonLinkProps {
+    /** Text or element displayed before the main link */
+    beforeText?: string | React.ReactNode;
+    /** Text or element displayed after the main link */
+    afterText?: string | React.ReactNode;
+    /** The main clickable link text or element */
+    mainText?: string | React.ReactNode;
+    /** URL for the link (for external navigation using Linking API) */
+    href?: string;
+    /** Target behavior - 'blank' for external links (opens in browser) */
+    target?: '_blank' | '_self';
+    /** Color of the surrounding text */
+    color?: string;
+    /** Color of the link itself (overrides default link color) */
+    linkColor?: string;
+    /** Line height for the typography */
+    lineHeight?: number;
+    /** Typography variant for the container text - matches web SButtonLink */
+    variant?: STextProps['variant'];
+    /** Press handler for the link */
+    onPress?: () => void;
+    /** Additional styles for the container */
+    style?: StyleProp<TextStyle>;
+    /** Additional styles for the link text */
+    linkStyle?: StyleProp<TextStyle>;
+    /** Whether the link is disabled */
+    disabled?: boolean;
+}
+/**
+ * A flexible link component that combines text and a clickable link element.
+ * Synced with web SButtonLink from @solostylist/ui-kit for cross-platform consistency.
+ */
+export declare const SButtonLink: {
+    ({ beforeText, afterText, mainText, href, target, color, linkColor, variant, lineHeight, onPress, style, linkStyle, disabled, }: SButtonLinkProps): React.JSX.Element;
+    displayName: string;
+};
+export default SButtonLink;
+//# sourceMappingURL=s-button-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-button-link.d.ts","sourceRoot":"","sources":["../../src/s-button-link/s-button-link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpG,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAGnD;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACpC,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW;qIAcrB,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAqGtC,CAAC;AAIF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Linking, Pressable, StyleSheet, View } from 'react-native';
+import { SText } from '../s-text';
+import { useSTheme } from '../theme';
+/**
+ * A flexible link component that combines text and a clickable link element.
+ * Synced with web SButtonLink from @solostylist/ui-kit for cross-platform consistency.
+ */
+export const SButtonLink = ({ beforeText = '', afterText = '', mainText = '', href, target, color, linkColor, variant = 'body2', lineHeight, onPress, style, linkStyle, disabled = false, }) => {
+    const { theme } = useSTheme();
+    // Determine text color - matches web default
+    const textColor = color || theme.colors.text.secondary;
+    // Determine link color - matches web default (primary color)
+    const activeLinkColor = linkColor || theme.colors.primary[500];
+    const handlePress = () => {
+        if (disabled)
+            return;
+        if (onPress) {
+            onPress();
+        }
+        else if (href) {
+            // If target is _blank or not specified for http/https URLs, open in browser
+            if (target === '_blank' || href.startsWith('http://') || href.startsWith('https://')) {
+                Linking.openURL(href).catch((err) => console.error('Failed to open URL:', err));
+            }
+            // For internal navigation, onPress should be provided
+        }
+    };
+    const styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+        },
+        link: {
+            textDecorationLine: 'underline',
+            textDecorationStyle: 'solid',
+        },
+    });
+    return (_jsxs(View, { style: styles.container, children: [beforeText && (_jsxs(_Fragment, { children: [_jsx(SText, { variant: variant, style: [
+                            {
+                                color: textColor,
+                                lineHeight,
+                            },
+                            style,
+                        ], children: beforeText }), _jsx(SText, { variant: variant, style: { color: textColor }, children: ' ' })] })), _jsx(Pressable, { onPress: handlePress, disabled: disabled, children: ({ pressed }) => (_jsx(SText, { variant: variant, style: [
+                        styles.link,
+                        {
+                            color: activeLinkColor,
+                            lineHeight,
+                            opacity: disabled ? 0.5 : pressed ? 0.7 : 1,
+                        },
+                        style,
+                        linkStyle,
+                    ], children: mainText })) }), afterText && (_jsxs(_Fragment, { children: [_jsx(SText, { variant: variant, style: { color: textColor }, children: ' ' }), _jsx(SText, { variant: variant, style: [
+                            {
+                                color: textColor,
+                                lineHeight,
+                            },
+                            style,
+                        ], children: afterText })] }))] }));
+};
+SButtonLink.displayName = 'SButtonLink';
+export default SButtonLink;

package/dist/s-chat-input/index.d.ts

@@ -0,0 +1,2 @@
+export { SChatInput, type SChatInputProps, default } from './s-chat-input';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-chat-input/index.d.ts.map

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

package/dist/s-chat-input/index.js

@@ -0,0 +1 @@
+export { SChatInput, default } from './s-chat-input';

package/dist/s-chat-input/s-chat-input.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+/**
+ * Props interface for SChatInput component
+ * Synced with web SChatInput from @solostylist/ui-kit
+ */
+export interface SChatInputProps {
+    /** Current value of the input */
+    value?: string;
+    /** Callback fired when text changes */
+    onChangeText?: (text: string) => void;
+    /** Callback function called when message is submitted with send button */
+    onSubmit?: (value: string) => void;
+    /** Placeholder text shown when input is empty */
+    placeholder?: string;
+    /** Disable the input and submission */
+    disabled?: boolean;
+    /** Hide the file attachment button */
+    hideFileAttachment?: boolean;
+    /** Hide the emoji picker button */
+    hideEmojiPicker?: boolean;
+    /** Callback fired when file attachment button is pressed */
+    onFileAttachmentPress?: () => void;
+    /** Callback fired when emoji picker button is pressed */
+    onEmojiPickerPress?: () => void;
+    /** Minimum number of lines for multiline input */
+    minLines?: number;
+    /** Maximum number of lines for multiline input */
+    maxLines?: number;
+    /** Auto-focus on mount */
+    autoFocus?: boolean;
+}
+/**
+ * A chat input component with file attachment support, emoji picker, and multiline text input.
+ * Synced with web SChatInput from @solostylist/ui-kit.
+ */
+export declare const SChatInput: {
+    ({ value: controlledValue, onChangeText: controlledOnChangeText, onSubmit, placeholder, disabled, hideFileAttachment, hideEmojiPicker, onFileAttachmentPress, onEmojiPickerPress, minLines, maxLines, autoFocus, }: SChatInputProps): React.JSX.Element;
+    displayName: string;
+};
+export default SChatInput;
+//# sourceMappingURL=s-chat-input.d.ts.map

package/dist/s-chat-input/s-chat-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-chat-input.d.ts","sourceRoot":"","sources":["../../src/s-chat-input/s-chat-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mCAAmC;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,yDAAyD;IACzD,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU;wNAapB,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAgHrC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/s-chat-input/s-chat-input.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { TextInput } from 'react-native-paper';
+import { SIconButton } from '../s-icon-button';
+import { useSTheme } from '../theme';
+/**
+ * A chat input component with file attachment support, emoji picker, and multiline text input.
+ * Synced with web SChatInput from @solostylist/ui-kit.
+ */
+export const SChatInput = ({ value: controlledValue, onChangeText: controlledOnChangeText, onSubmit, placeholder = 'Enter your message here...', disabled = false, hideFileAttachment = false, hideEmojiPicker = false, onFileAttachmentPress, onEmojiPickerPress, minLines = 1, maxLines = 10, autoFocus = false, }) => {
+    const { theme } = useSTheme();
+    const [internalValue, setInternalValue] = useState('');
+    // Use controlled value if provided, otherwise use internal state
+    const inputValue = controlledValue !== undefined ? controlledValue : internalValue;
+    const handleTextChange = controlledOnChangeText || setInternalValue;
+    const handleSubmit = () => {
+        if (disabled || inputValue.trim().length === 0)
+            return;
+        onSubmit?.(inputValue);
+        // Clear input after submission if using internal state
+        if (controlledValue === undefined) {
+            setInternalValue('');
+        }
+    };
+    const styles = StyleSheet.create({
+        container: {
+            borderWidth: 1,
+            borderColor: theme.colors.divider,
+            borderRadius: theme.borderRadius.md,
+            padding: 8,
+            backgroundColor: theme.colors.background.paper,
+        },
+        inputContainer: {
+            backgroundColor: 'transparent',
+        },
+        input: {
+            backgroundColor: 'transparent',
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            minHeight: minLines * 20,
+            maxHeight: maxLines * 20,
+        },
+        content: {
+            fontFamily: theme.typography.fontFamily,
+            fontSize: theme.typography.fontSize.md,
+            color: theme.colors.text.primary,
+        },
+        actionsContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: 8,
+        },
+        leftActions: {
+            flexDirection: 'row',
+            gap: 4,
+        },
+        iconButton: {
+            margin: 0,
+        },
+    });
+    return (_jsxs(View, { style: styles.container, children: [_jsx(TextInput, { mode: "flat", placeholder: placeholder, placeholderTextColor: theme.colors.divider, value: inputValue, onChangeText: handleTextChange, disabled: disabled, multiline: true, numberOfLines: minLines, autoFocus: autoFocus, style: styles.input, contentStyle: styles.content, underlineStyle: { display: 'none' }, activeUnderlineColor: "transparent", underlineColor: "transparent", textColor: theme.colors.text.primary }), _jsxs(View, { style: styles.actionsContainer, children: [_jsxs(View, { style: styles.leftActions, children: [!hideFileAttachment && (_jsx(SIconButton, { icon: "attachment", size: "medium", disabled: disabled, onPress: onFileAttachmentPress, style: styles.iconButton })), !hideEmojiPicker && (_jsx(SIconButton, { icon: "emoticon-happy-outline", size: "medium", disabled: disabled, onPress: onEmojiPickerPress, style: styles.iconButton }))] }), _jsx(SIconButton, { icon: "arrow-up", size: "medium", disabled: disabled || inputValue.trim().length === 0, onPress: handleSubmit, style: styles.iconButton, iconColor: disabled || inputValue.trim().length === 0 ? theme.colors.text.disabled : theme.colors.primary[500] })] })] }));
+};
+SChatInput.displayName = 'SChatInput';
+export default SChatInput;

package/dist/s-chat-message/index.d.ts

@@ -0,0 +1,3 @@
+export { SChatMessage, type SChatMessageProps, type ChatAttachment } from './s-chat-message';
+export { default } from './s-chat-message';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-chat-message/index.d.ts.map

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

package/dist/s-chat-message/index.js

@@ -0,0 +1,2 @@
+export { SChatMessage } from './s-chat-message';
+export { default } from './s-chat-message';

package/dist/s-chat-message/s-chat-message.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+export interface ChatAttachment {
+    id: string;
+    type: 'image' | 'file';
+    url: string;
+    name?: string;
+    size?: number;
+    mimeType?: string;
+    thumbnailUrl?: string;
+}
+/**
+ * Props interface for SChatMessage component
+ * Synced with web SChatMessage from @solostylist/ui-kit
+ */
+export interface SChatMessageProps {
+    /** The message content to display in the chat bubble */
+    message?: string;
+    /** The message variant controlling alignment and styling */
+    variant?: 'sent' | 'received';
+    /** The timestamp for the message, displayed when showTimestamp is true */
+    timestamp?: string | Date;
+    /** Avatar image URL or base64 string to display next to the message */
+    avatar?: string;
+    /** Name of the message sender, displayed above received messages when provided */
+    senderName?: string;
+    /** Whether to display the avatar next to the message */
+    showAvatar?: boolean;
+    /** Whether to display the formatted timestamp below the message */
+    showTimestamp?: boolean;
+    /** Maximum width percentage of the message bubble container (0-100) */
+    maxWidth?: number;
+    /** Array of file/image attachments to display with the message */
+    attachments?: ChatAttachment[];
+    /** Callback fired when an attachment is clicked */
+    onAttachmentClick?: (attachment: ChatAttachment) => void;
+    /** Callback fired when file download button is clicked */
+    onDownload?: (attachment: ChatAttachment) => void;
+    /** Whether the message failed to send */
+    hasError?: boolean;
+    /** Custom error message to display when hasError is true */
+    errorMessage?: string;
+    /** Callback fired when retry button is clicked */
+    onRetry?: () => void;
+    /** Whether to show skeleton loading state instead of content */
+    loading?: boolean;
+    /** Additional styles for the container */
+    style?: StyleProp<ViewStyle>;
+    /** Additional styles for the message bubble */
+    messageBubbleStyle?: StyleProp<ViewStyle>;
+    /** Additional styles for the message text */
+    messageTextStyle?: StyleProp<TextStyle>;
+}
+/**
+ * A comprehensive chat message component for conversation interfaces with support for text, images, and file attachments.
+ * Synced with web SChatMessage from @solostylist/ui-kit.
+ */
+export declare const SChatMessage: {
+    ({ message, variant, timestamp, avatar, senderName, showAvatar, showTimestamp, maxWidth, attachments, onAttachmentClick, onDownload, hasError, errorMessage, onRetry, loading, style, messageBubbleStyle, messageTextStyle, }: SChatMessageProps): React.JSX.Element;
+    displayName: string;
+};
+export default SChatMessage;
+//# sourceMappingURL=s-chat-message.d.ts.map

package/dist/s-chat-message/s-chat-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-chat-message.d.ts","sourceRoot":"","sources":["../../src/s-chat-message/s-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAM3G,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC9B,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,mDAAmD;IACnD,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IACzD,0DAA0D;IAC1D,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACzC;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;mOAmBtB,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA6SvC,CAAC;AAIF,eAAe,YAAY,CAAC"}