@solostylist/ui-kit-native 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @solostylist/ui-kit-native
+ *
+ * React Native UI components for SoloStylist
+ * Synced with web ui-kit and uses @solostylist/core for theming
+ */
+export { SThemeProvider, useSTheme, darkTheme, lightTheme, type SThemeProviderProps, type ThemeMode, type NativeTheme, type NativeThemeColors, } from './theme';
+export { SForm, type SFormProps } from './s-form';
+export { SIconButton, type SIconButtonProps } from './s-icon-button';
+export { SSelect, type SSelectProps } from './s-select';
+export { SText, type STextProps } from './s-text';
+export { STextField, type STextFieldProps } from './s-text-field';
+export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkPulse, lightPulse, } from './theme';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,cAAc,EACd,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGlE,OAAO,EACL,KAAK,EACL,UAAU,EACV,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,EACH,QAAQ,EACR,MAAM,EACN,WAAW,EACX,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,UAAU,GACX,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,16 @@
+/**
+ * @solostylist/ui-kit-native
+ *
+ * React Native UI components for SoloStylist
+ * Synced with web ui-kit and uses @solostylist/core for theming
+ */
+// Theme
+export { SThemeProvider, useSTheme, darkTheme, lightTheme, } from './theme';
+// Components
+export { SForm } from './s-form';
+export { SIconButton } from './s-icon-button';
+export { SSelect } from './s-select';
+export { SText } from './s-text';
+export { STextField } from './s-text-field';
+// Re-export core colors for convenience
+export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkPulse, lightPulse, } from './theme';

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

@@ -0,0 +1,2 @@
+export { SForm, type SFormProps, default } from './s-form';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/s-form/index.js

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+/**
+ * Props interface for the SForm component
+ */
+export interface SFormProps {
+    /** The form field label - can be text or a React element */
+    label?: string | React.ReactNode;
+    /** Optional hint text displayed below the input */
+    hint?: string;
+    /** Error message to display below the form field */
+    error?: string;
+    /** Whether the form field is required (adds asterisk to label) */
+    required?: boolean;
+    /** Child form elements (input, select, etc.) to wrap */
+    children: React.ReactNode;
+}
+/**
+ * A form wrapper component that provides consistent labeling, error handling, and help text.
+ * Synced with web SForm component from @solostylist/ui-kit.
+ */
+export declare const SForm: {
+    ({ label, hint, error, required, children }: SFormProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SForm;
+//# sourceMappingURL=s-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-form.d.ts","sourceRoot":"","sources":["../../src/s-form/s-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK;iDAAwD,UAAU;;CAkDnF,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/s-form/s-form.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native';
+import { HelperText, Surface } from 'react-native-paper';
+import { SText } from '../s-text';
+import { useSTheme } from '../theme';
+/**
+ * A form wrapper component that provides consistent labeling, error handling, and help text.
+ * Synced with web SForm component from @solostylist/ui-kit.
+ */
+export const SForm = ({ label, hint, error, required = false, children }) => {
+    const { theme } = useSTheme();
+    const styles = StyleSheet.create({
+        container: {
+            width: '100%',
+        },
+        labelContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginBottom: theme.spacing.xs,
+        },
+    });
+    return (_jsxs(Surface, { style: styles.container, elevation: 0, children: [label ? (_jsx(Surface, { style: styles.labelContainer, elevation: 0, children: typeof label === 'string' ? (_jsxs(_Fragment, { children: [_jsx(SText, { variant: "body2", fontWeight: "400", color: error ? 'error' : 'text.secondary', children: label }), required && (_jsx(SText, { variant: "body2", color: "error", style: { marginLeft: 2 }, children: "*" }))] })) : (label) })) : null, children, hint && !error ? (_jsx(HelperText, { type: "info", visible: true, children: hint })) : null, error ? (_jsx(HelperText, { type: "error", visible: true, children: error })) : null] }));
+};
+SForm.displayName = 'SForm';
+export default SForm;

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

@@ -0,0 +1,3 @@
+export { SIconButton, default } from './s-icon-button';
+export type { SIconButtonProps, SIconButtonTooltipOptions } from './s-icon-button';
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { type IconButtonProps } from 'react-native-paper';
+/**
+ * Tooltip options for SIconButton
+ * Similar to web version but adapted for React Native
+ */
+export interface SIconButtonTooltipOptions {
+    /** Tooltip text content */
+    title: string;
+    /** Whether to show enter delay (in ms) */
+    enterDelay?: number;
+    /** Whether to show leave delay (in ms) */
+    leaveDelay?: number;
+}
+/**
+ * Props interface for SIconButton component
+ * Synced with web SIconButton from @solostylist/ui-kit
+ */
+export interface SIconButtonProps extends Omit<IconButtonProps, 'theme' | 'size'> {
+    /** Icon name from Material Community Icons */
+    icon: string;
+    /** Size of the icon button - matches web MUI sizes */
+    size?: 'small' | 'medium' | 'large';
+    /** Icon color */
+    iconColor?: string;
+    /** Container color (background) */
+    containerColor?: string;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Accessibility label */
+    accessibilityLabel?: string;
+    /** Callback fired when button is pressed */
+    onPress?: () => void;
+    /** Optional tooltip configuration (excludes 'children' which is handled internally) */
+    tooltipOptions?: SIconButtonTooltipOptions;
+}
+/**
+ * An enhanced icon button component with optional tooltip integration.
+ * Synced with web SIconButton from @solostylist/ui-kit.
+ */
+export declare const SIconButton: {
+    ({ icon, size, iconColor, containerColor, disabled, accessibilityLabel, onPress, style, tooltipOptions, ...props }: SIconButtonProps): React.JSX.Element;
+    displayName: string;
+};
+export default SIconButton;
+//# sourceMappingURL=s-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-icon-button.d.ts","sourceRoot":"","sources":["../../src/s-icon-button/s-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG/E;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/E,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uFAAuF;IACvF,cAAc,CAAC,EAAE,yBAAyB,CAAC;CAC5C;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW;wHAWrB,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAuEtC,CAAC;AAIF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native';
+import { IconButton, Tooltip } from 'react-native-paper';
+import { useSTheme } from '../theme';
+/**
+ * An enhanced icon button component with optional tooltip integration.
+ * Synced with web SIconButton from @solostylist/ui-kit.
+ */
+export const SIconButton = ({ icon, size = 'medium', iconColor, containerColor, disabled = false, accessibilityLabel, onPress, style, tooltipOptions, ...props }) => {
+    const { theme } = useSTheme();
+    // Map size to icon size - matches web MUI sizes
+    // small: 12px, medium: 16px, large: 20px
+    const getIconSize = () => {
+        switch (size) {
+            case 'small':
+                return 12;
+            case 'medium':
+                return 16;
+            case 'large':
+                return 20;
+            default:
+                return 16;
+        }
+    };
+    const iconSize = getIconSize();
+    // Default icon color based on theme
+    const defaultIconColor = iconColor || theme.colors.text.primary;
+    // Get container color
+    const getContainerColor = () => {
+        if (containerColor)
+            return containerColor;
+        if (disabled)
+            return 'transparent';
+        return 'transparent';
+    };
+    // Get icon color
+    const getIconColor = () => {
+        if (iconColor)
+            return iconColor;
+        if (disabled)
+            return theme.colors.text.disabled;
+        return defaultIconColor;
+    };
+    const styles = StyleSheet.create({
+        button: {
+            borderRadius: theme.borderRadius.full,
+        },
+    });
+    const iconButton = (_jsx(IconButton, { icon: icon, size: iconSize, iconColor: getIconColor(), containerColor: getContainerColor(), disabled: disabled, onPress: onPress, accessibilityLabel: accessibilityLabel, style: [styles.button, style], ...props }));
+    // Wrap with tooltip if tooltipOptions is provided
+    if (tooltipOptions) {
+        return (_jsx(Tooltip, { title: tooltipOptions.title, enterTouchDelay: tooltipOptions.enterDelay ?? 0, leaveTouchDelay: tooltipOptions.leaveDelay ?? 0, children: iconButton }));
+    }
+    return iconButton;
+};
+SIconButton.displayName = 'SIconButton';
+export default SIconButton;

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

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

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

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

package/dist/s-select/index.js

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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+/** Base type constraint for select options - can be primitives or objects */
+type BaseOption = string | number | Record<string, any>;
+/**
+ * Props interface for SSelect component
+ * Synced with web SSelect from @solostylist/ui-kit
+ */
+export interface SSelectProps<T extends BaseOption = string> {
+    /** Array of options to display in the select dropdown */
+    options?: T[];
+    /** Key to use for option display text (required for object options) */
+    optionLabel?: T extends object ? keyof T : never;
+    /** Key to use for option values (required for object options) */
+    optionValue?: T extends object ? keyof T : never;
+    /** Placeholder text shown when no option is selected */
+    placeholder?: string;
+    /** Field label displayed above the select */
+    label?: string | React.ReactNode;
+    /** Error message to display below the field */
+    error?: string;
+    /** Whether the field is required (shows asterisk in label) */
+    required?: boolean;
+    /** Current value (controlled component) */
+    value?: T | T[] | null;
+    /** Callback when value changes */
+    onChange?: (value: T | T[] | null) => void;
+    /** Visual style variant */
+    variant?: 'outlined' | 'flat';
+    /** Enable search/filter functionality in the dropdown */
+    searchable?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Enable multiple selection */
+    multiple?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Input size variant */
+    size?: 'small' | 'medium';
+    /** Help text shown below the input */
+    hint?: string;
+}
+/**
+ * A flexible select component that handles both primitive and object options with form integration.
+ * Synced with web SSelect from @solostylist/ui-kit.
+ */
+export declare function SSelect<T extends BaseOption = string>({ options, optionLabel, optionValue, placeholder, label, error, required, value: controlledValue, onChange, variant, searchable, searchPlaceholder, multiple, disabled, size, hint, }: SSelectProps<T>): React.JSX.Element;
+export {};
+//# sourceMappingURL=s-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-select.d.ts","sourceRoot":"","sources":["../../src/s-select/s-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,6EAA6E;AAC7E,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,UAAU,GAAG,MAAM;IACzD,yDAAyD;IACzD,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;IACd,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC;IACjD,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC;IACjD,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC;IACvB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,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,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,GAAG,MAAM,EAAE,EACrD,OAAY,EACZ,WAA0D,EAC1D,WAAwD,EACxD,WAAyB,EACzB,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,OAAoB,EACpB,UAAkB,EAClB,iBAA+B,EAC/B,QAAgB,EAChB,QAAgB,EAChB,IAAe,EACf,IAAI,GACL,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsUrC"}

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

@@ -0,0 +1,237 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Color from 'color';
+import { useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, View } from 'react-native';
+import { Checkbox, Divider, Menu, Surface, TextInput } from 'react-native-paper';
+import { SForm } from '../s-form';
+import { SText } from '../s-text';
+import { useSTheme } from '../theme';
+/**
+ * A flexible select component that handles both primitive and object options with form integration.
+ * Synced with web SSelect from @solostylist/ui-kit.
+ */
+export function SSelect({ options = [], optionLabel = 'name', optionValue = 'id', placeholder = 'Select...', label, error, required = false, value: controlledValue, onChange, variant = 'outlined', searchable = false, searchPlaceholder = 'Search...', multiple = false, disabled = false, size = 'medium', hint, }) {
+    const { theme } = useSTheme();
+    // State management
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(multiple ? [] : null);
+    const value = isControlled ? controlledValue : internalValue;
+    const [menuVisible, setMenuVisible] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const [anchorWidth, setAnchorWidth] = useState(undefined);
+    const anchorRef = useRef(null);
+    // Helper functions for option handling
+    const getOptionLabel = (item) => {
+        if (typeof item === 'string' || typeof item === 'number') {
+            return String(item);
+        }
+        return String(item[optionLabel]);
+    };
+    const getOptionValue = (item) => {
+        if (typeof item === 'string' || typeof item === 'number') {
+            return item;
+        }
+        return item[optionValue];
+    };
+    const isOptionDisabled = (item) => {
+        if (typeof item === 'object' && item !== null) {
+            return item.disabled ?? false;
+        }
+        return false;
+    };
+    // Filtered options for search
+    const filteredOptions = useMemo(() => {
+        if (!searchable || !searchTerm) {
+            return options;
+        }
+        return options.filter((item) => {
+            const label = getOptionLabel(item).toLowerCase();
+            return label.includes(searchTerm.toLowerCase());
+        });
+    }, [options, searchTerm, searchable]);
+    // Get display value
+    const getDisplayValue = () => {
+        if (multiple) {
+            const values = value || [];
+            if (values.length === 0) {
+                return '';
+            }
+            return values
+                .map((val) => {
+                const option = options.find((item) => getOptionValue(item) === getOptionValue(val));
+                return option ? getOptionLabel(option) : '';
+            })
+                .filter(Boolean)
+                .join(', ');
+        }
+        else {
+            const singleValue = value;
+            if (singleValue === null || singleValue === undefined) {
+                return '';
+            }
+            const option = options.find((item) => getOptionValue(item) === getOptionValue(singleValue));
+            return option ? getOptionLabel(option) : '';
+        }
+    };
+    // Check if option is selected
+    const isOptionSelected = (item) => {
+        if (multiple) {
+            const values = value || [];
+            return values.some((val) => getOptionValue(val) === getOptionValue(item));
+        }
+        else {
+            const singleValue = value;
+            if (!singleValue)
+                return false;
+            return getOptionValue(singleValue) === getOptionValue(item);
+        }
+    };
+    // Handle option selection
+    const handleOptionPress = (item) => {
+        if (isOptionDisabled(item))
+            return;
+        let newValue;
+        if (multiple) {
+            const currentValues = value || [];
+            const isSelected = isOptionSelected(item);
+            if (isSelected) {
+                newValue = currentValues.filter((val) => getOptionValue(val) !== getOptionValue(item));
+            }
+            else {
+                newValue = [...currentValues, item];
+            }
+        }
+        else {
+            newValue = item;
+            setMenuVisible(false);
+            setSearchTerm('');
+        }
+        if (onChange) {
+            onChange(newValue);
+        }
+        else if (!isControlled) {
+            setInternalValue(newValue);
+        }
+    };
+    const handleOpenMenu = () => {
+        if (!disabled) {
+            setMenuVisible(true);
+        }
+    };
+    const handleAnchorLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        setAnchorWidth(width);
+    };
+    const handleCloseMenu = () => {
+        setMenuVisible(false);
+        setSearchTerm('');
+        setHoveredIndex(null);
+    };
+    const displayValue = getDisplayValue();
+    const styles = StyleSheet.create({
+        input: {
+            // Match web sizes: small = 36px, medium = 40px
+            ...(size === 'small' ? { height: 36 } : { height: 40 }),
+        },
+        inputContent: {
+            // Match STextField styling: fontFamily and fontSize
+            fontFamily: theme.typography.fontFamily,
+            fontSize: size === 'small' ? theme.typography.fontSize.sm : theme.typography.fontSize.md,
+        },
+        menuContent: {
+            borderRadius: theme.borderRadius.md,
+            backgroundColor: theme.colors.background.paper,
+            paddingTop: theme.spacing.sm,
+            paddingBottom: theme.spacing.sm,
+            borderWidth: 1,
+            borderColor: theme.colors.divider,
+            borderStyle: 'solid',
+            boxShadow: 'none',
+        },
+        menuItem: {
+            paddingTop: theme.spacing.sm,
+            paddingBottom: theme.spacing.sm,
+            paddingHorizontal: theme.spacing.md,
+            minHeight: 'auto',
+        },
+        menuItemSelected: {
+            // Match web: solid blue background for selected items (matches MUI's visual appearance)
+            // Use primary color with opacity to create a visible blue background
+            backgroundColor: theme.dark
+                ? Color(theme.colors.primary[500]).alpha(0.3).rgb().string()
+                : Color(theme.colors.primary[500]).alpha(0.1).rgb().string(),
+        },
+        searchContainer: {
+            padding: theme.spacing.sm,
+            backgroundColor: theme.colors.background.paper,
+            borderTopLeftRadius: theme.borderRadius.lg,
+            borderTopRightRadius: theme.borderRadius.lg,
+        },
+        searchInput: {
+            backgroundColor: theme.colors.background.default,
+            height: 36,
+        },
+        searchContent: {
+            // Match STextField styling: fontFamily and fontSize
+            fontFamily: theme.typography.fontFamily,
+            fontSize: theme.typography.fontSize.sm,
+        },
+        searchOutline: {
+            borderRadius: theme.borderRadius.md,
+        },
+        noResults: {
+            padding: theme.spacing.lg,
+            alignItems: 'center',
+        },
+        checkbox: {
+            marginRight: theme.spacing.sm,
+        },
+        scrollView: {
+            // Ensure ScrollView doesn't add extra padding that would break web alignment
+            flexGrow: 0,
+        },
+        menuItemHover: {
+            // Match web hover state: backgroundColor: theme.palette.action.hover
+            backgroundColor: theme.dark
+                ? Color(theme.colors.secondary[600]).alpha(0.2).rgb().string()
+                : Color(theme.colors.secondary[300]).alpha(0.2).rgb().string(),
+        },
+        menuItemSelectedHover: {
+            // Combined style for selected + hovered items
+            // Darken the selected background on hover
+            backgroundColor: theme.dark
+                ? Color(theme.colors.primary[500]).alpha(0.4).rgb().string()
+                : Color(theme.colors.primary[500]).alpha(0.15).rgb().string(),
+        },
+    });
+    return (_jsx(SForm, { label: label, hint: hint, error: error, required: required, children: _jsxs(Menu, { visible: menuVisible, onDismiss: handleCloseMenu, anchorPosition: "bottom", contentStyle: [styles.menuContent, anchorWidth !== undefined && { width: anchorWidth }], anchor: _jsx(View, { ref: anchorRef, onLayout: handleAnchorLayout, children: _jsx(Pressable, { onPress: handleOpenMenu, disabled: disabled, children: _jsx(TextInput, { mode: variant, placeholder: placeholder, placeholderTextColor: theme.colors.divider, value: displayValue, error: !!error, disabled: disabled, editable: false, pointerEvents: "none", dense: size === 'small', right: _jsx(TextInput.Icon, { icon: menuVisible ? 'chevron-up' : 'chevron-down' }), style: styles.input, contentStyle: styles.inputContent, 
+                        // Match web focus styling: blue outline when menu is open (focused state)
+                        // Use outlineColor to show blue border when menu is visible (simulating focus)
+                        outlineColor: error ? theme.colors.error[500] : menuVisible ? theme.colors.primary[400] : theme.colors.divider, activeOutlineColor: theme.colors.primary[400] }) }) }), children: [searchable && (_jsxs(_Fragment, { children: [_jsx(Surface, { style: styles.searchContainer, elevation: 0, children: _jsx(TextInput, { mode: "outlined", placeholder: searchPlaceholder, placeholderTextColor: theme.colors.divider, value: searchTerm, onChangeText: setSearchTerm, dense: true, left: _jsx(TextInput.Icon, { icon: "magnify" }), style: styles.searchInput, contentStyle: styles.searchContent, outlineStyle: styles.searchOutline, autoFocus: true }) }), _jsx(Divider, {})] })), _jsx(ScrollView, { style: styles.scrollView, contentContainerStyle: { paddingHorizontal: 0 }, children: filteredOptions.length > 0 ? (filteredOptions.map((item, index) => {
+                        const itemValue = getOptionValue(item);
+                        const itemLabel = getOptionLabel(item);
+                        const isSelected = isOptionSelected(item);
+                        const isDisabled = isOptionDisabled(item);
+                        const isHovered = hoveredIndex === index;
+                        return (_jsxs(Pressable, { onPress: () => handleOptionPress(item), onPressIn: () => setHoveredIndex(index), onPressOut: () => setHoveredIndex(null), ...(Platform.OS === 'web' && {
+                                onMouseEnter: () => setHoveredIndex(index),
+                                onMouseLeave: () => setHoveredIndex(null),
+                            }), disabled: isDisabled, style: ({ pressed }) => {
+                                const isActive = isHovered || pressed;
+                                return [
+                                    styles.menuItem,
+                                    // Apply selected style only when not active (hovered or pressed)
+                                    isSelected && !isActive && styles.menuItemSelected,
+                                    // Apply hover/press style - selected hover takes precedence
+                                    isActive && isSelected && styles.menuItemSelectedHover,
+                                    isActive && !isSelected && styles.menuItemHover,
+                                ];
+                            }, children: [multiple && (_jsx(Checkbox.Android, { status: isSelected ? 'checked' : 'unchecked', disabled: isDisabled, style: styles.checkbox })), _jsx(SText, { variant: "body1", style: [
+                                        isSelected && {
+                                            color: theme.colors.text.primary,
+                                            fontWeight: theme.typography.fontWeight.medium,
+                                        },
+                                    ], children: itemLabel })] }, `${itemValue}-${index}`));
+                    })) : (_jsx(Surface, { style: styles.noResults, elevation: 0, children: _jsx(SText, { variant: "body1", color: "text.secondary", children: searchTerm ? 'No results found' : 'No options available' }) })) })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export { SText, default, type STextProps } from './s-text';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/s-text/index.js

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TextProps as RNTextProps, StyleProp, TextStyle } from 'react-native';
+export interface STextProps extends Omit<RNTextProps, 'style'> {
+    /** Typography variant matching MUI's typography scale */
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption';
+    /** Text color - supports theme colors or custom color string */
+    color?: 'primary' | 'secondary' | 'text.primary' | 'text.secondary' | 'text.disabled' | 'error' | 'warning' | 'success' | 'info' | string;
+    /** Font weight override */
+    fontWeight?: '400' | '500' | '600' | '700';
+    /** Font size override (in pixels) */
+    fontSize?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Text transform */
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    /** Line height multiplier */
+    lineHeight?: number;
+    /** Letter spacing */
+    letterSpacing?: number;
+    /** Additional custom styles */
+    style?: StyleProp<TextStyle>;
+    /** Child content */
+    children?: React.ReactNode;
+}
+export declare const SText: {
+    ({ variant, color, fontWeight, fontSize, align, textTransform, lineHeight, letterSpacing, style, children, ...props }: STextProps): React.JSX.Element;
+    displayName: string;
+};
+export default SText;
+//# sourceMappingURL=s-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-text.d.ts","sourceRoot":"","sources":["../../src/s-text/s-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5D,yDAAyD;IACzD,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IAE9G,gEAAgE;IAChE,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,OAAO,GACP,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IAEX,2BAA2B;IAC3B,UAAU,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAE3C,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAEhD,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,CAAC;IAElE,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8BD,eAAO,MAAM,KAAK;2HAYf,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoChC,CAAC;AAIF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Text } from 'react-native-paper';
+import { useSTheme } from '../theme';
+const getFontFamily = (weight) => {
+    const fontMap = {
+        '400': 'Outfit_400Regular',
+        '500': 'Outfit_500Medium',
+        '600': 'Outfit_600SemiBold',
+        '700': 'Outfit_700Bold',
+    };
+    return fontMap[weight] || 'Outfit_400Regular';
+};
+const resolveColor = (colorProp, theme) => {
+    if (!colorProp)
+        return theme.colors.text.primary;
+    const colorMap = {
+        primary: theme.colors.primary[500],
+        secondary: theme.colors.secondary[500],
+        'text.primary': theme.colors.text.primary,
+        'text.secondary': theme.colors.text.secondary,
+        'text.disabled': theme.colors.text.disabled,
+        error: theme.colors.error[500],
+        warning: theme.colors.warning[500],
+        success: theme.colors.success[500],
+        info: theme.colors.info[500],
+    };
+    return colorMap[colorProp] || colorProp;
+};
+export const SText = ({ variant = 'body1', color, fontWeight, fontSize, align = 'left', textTransform = 'none', lineHeight, letterSpacing, style, children, ...props }) => {
+    const { theme } = useSTheme();
+    const computedStyle = useMemo(() => {
+        const variantStyle = theme.typography.scale[variant];
+        const weight = fontWeight || variantStyle.fontWeight;
+        // Apply default color for caption variant (matches MUI theme behavior)
+        const resolvedColor = color !== undefined ? color : variant === 'caption' ? 'text.secondary' : undefined;
+        const baseStyle = {
+            fontSize: fontSize || variantStyle.fontSize,
+            fontWeight: weight,
+            fontFamily: getFontFamily(weight),
+            lineHeight: lineHeight
+                ? (fontSize || variantStyle.fontSize) * lineHeight
+                : (fontSize || variantStyle.fontSize) * (variantStyle.lineHeight || 1.5),
+            color: resolveColor(resolvedColor, theme),
+            textAlign: align,
+            textTransform,
+        };
+        if (letterSpacing !== undefined) {
+            baseStyle.letterSpacing = letterSpacing;
+        }
+        else if (variantStyle.letterSpacing !== undefined) {
+            baseStyle.letterSpacing = variantStyle.letterSpacing;
+        }
+        return baseStyle;
+    }, [variant, color, fontWeight, fontSize, align, textTransform, lineHeight, letterSpacing, theme]);
+    return (_jsx(Text, { style: [computedStyle, style], ...props, children: children }));
+};
+SText.displayName = 'SText';
+export default SText;

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

@@ -0,0 +1,2 @@
+export { STextField, type STextFieldProps, default } from './s-text-field';
+//# sourceMappingURL=index.d.ts.map

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

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