@solostylist/ui-kit-native 1.0.0 → 1.0.2

package/dist/s-pagination/s-pagination.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { SButton } from '../s-button';
+import { SIconButton } from '../s-icon-button';
+import { SSkeleton } from '../s-skeleton';
+import { SText } from '../s-text';
+import { useSTheme } from '../theme';
+/**
+ * Skeleton loading component for SPagination.
+ * Matches the web SPagination skeleton layout: [icon-button] [rounded bar] [icon-button]
+ */
+const SPaginationSkeleton = ({ size = 'medium', style, }) => {
+    // Icon button size matches web SSkeleton component="icon-button" (32px circular)
+    const iconSize = size === 'small' ? 26 : 32;
+    // Bar width matches web SSkeleton variant="rounded" width={120}
+    const barWidth = size === 'small' ? 90 : 120;
+    const barHeight = size === 'small' ? 26 : 32;
+    return (_jsxs(View, { style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+            },
+            style,
+        ], children: [_jsx(SSkeleton, { variant: "circular", width: iconSize, height: iconSize }), _jsx(SSkeleton, { variant: "rounded", width: barWidth, height: barHeight }), _jsx(SSkeleton, { variant: "circular", width: iconSize, height: iconSize })] }));
+};
+/**
+ * Generate array of page numbers to display
+ */
+const generatePageNumbers = (currentPage, totalPages, siblingCount, boundaryCount) => {
+    // Calculate total number of page buttons including ellipsis
+    const totalButtons = siblingCount * 2 + 1 + boundaryCount * 2 + 2; // +2 for potential ellipsis
+    // If total pages is less than total buttons, show all pages
+    if (totalPages <= totalButtons) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const pages = [];
+    // Always show first boundaryCount pages
+    for (let i = 1; i <= boundaryCount; i++) {
+        pages.push(i);
+    }
+    // Calculate range around current page
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, boundaryCount + 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - boundaryCount);
+    // Add ellipsis before current page range if needed
+    if (leftSiblingIndex > boundaryCount + 2) {
+        pages.push('ellipsis');
+    }
+    else if (leftSiblingIndex === boundaryCount + 2) {
+        pages.push(boundaryCount + 1);
+    }
+    // Add current page and siblings
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+        if (i > boundaryCount && i <= totalPages - boundaryCount) {
+            pages.push(i);
+        }
+    }
+    // Add ellipsis after current page range if needed
+    if (rightSiblingIndex < totalPages - boundaryCount - 1) {
+        pages.push('ellipsis');
+    }
+    else if (rightSiblingIndex === totalPages - boundaryCount - 1) {
+        pages.push(totalPages - boundaryCount);
+    }
+    // Always show last boundaryCount pages
+    for (let i = totalPages - boundaryCount + 1; i <= totalPages; i++) {
+        if (!pages.includes(i)) {
+            pages.push(i);
+        }
+    }
+    return pages;
+};
+/**
+ * Get button dimensions based on size
+ */
+const getButtonDimensions = (size) => {
+    switch (size) {
+        case 'small':
+            return { minWidth: 32, height: 32, gap: 4, fontSize: 12 };
+        case 'medium':
+            return { minWidth: 40, height: 40, gap: 8, fontSize: 14 };
+        case 'large':
+            return { minWidth: 48, height: 48, gap: 8, fontSize: 16 };
+    }
+};
+/**
+ * Enhanced pagination component with responsive sizing and loading states.
+ * Built on React Native Paper components with consistent theming.
+ */
+export const SPagination = ({ count = 0, page = 1, loading = false, onChange, size = 'medium', color = 'primary', variant = 'text', shape = 'circular', showFirstButton = false, showLastButton = false, hidePrevButton = false, hideNextButton = false, disabled = false, siblingCount = 1, boundaryCount = 1, style, }) => {
+    const { theme } = useSTheme();
+    // All hooks must be called before any conditional returns
+    const pageNumbers = useMemo(() => generatePageNumbers(page, count, siblingCount, boundaryCount), [page, count, siblingCount, boundaryCount]);
+    const buttonSize = size === 'large' ? 'large' : size === 'small' ? 'small' : 'medium';
+    const dimensions = getButtonDimensions(size);
+    // Shape-based border radius: circular = fully round, rounded = slightly rounded
+    const borderRadius = shape === 'circular' ? dimensions.height / 2 : theme.borderRadius.md;
+    const handlePageChange = (newPage) => {
+        if (onChange && newPage !== page && newPage >= 1 && newPage <= count) {
+            onChange({}, newPage);
+        }
+    };
+    // Hide pagination when there are no pages to display
+    if (count === 0) {
+        return _jsx(_Fragment, {});
+    }
+    // Show skeleton loading state while data is being fetched
+    if (loading) {
+        return _jsx(SPaginationSkeleton, { size: size, style: style });
+    }
+    // Determine inactive button variant based on pagination variant prop
+    // 'text': inactive pages have no border (text style)
+    // 'outlined': inactive pages have outlined border
+    const inactiveVariant = variant === 'outlined' ? 'outlined' : 'text';
+    return (_jsxs(View, { style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexWrap: 'wrap',
+                gap: dimensions.gap,
+            },
+            style,
+        ], children: [showFirstButton && (_jsx(SIconButton, { icon: "page-first", size: buttonSize, disabled: disabled || page === 1, onPress: () => handlePageChange(1) })), !hidePrevButton && (_jsx(SIconButton, { icon: "chevron-left", size: buttonSize, disabled: disabled || page === 1, onPress: () => handlePageChange(page - 1) })), pageNumbers.map((pageNum, index) => {
+                if (pageNum === 'ellipsis') {
+                    return (_jsx(View, { style: {
+                            paddingHorizontal: size === 'small' ? 4 : 8,
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                        }, children: _jsx(SText, { variant: "body2", children: "..." }) }, `ellipsis-${index}`));
+                }
+                const isActive = pageNum === page;
+                return (_jsx(SButton, { variant: isActive ? 'contained' : inactiveVariant, color: color, size: buttonSize, disabled: disabled, onPress: () => handlePageChange(pageNum), style: [
+                        {
+                            minWidth: 0,
+                            width: dimensions.minWidth,
+                            height: dimensions.height,
+                            borderRadius,
+                        },
+                        !isActive && variant === 'outlined' && { borderColor: theme.colors.divider },
+                    ], contentStyle: { paddingHorizontal: 0 }, labelStyle: [{ marginHorizontal: 0 }, !isActive ? { color: theme.colors.text.primary } : undefined], children: String(pageNum) }, pageNum));
+            }), !hideNextButton && (_jsx(SIconButton, { icon: "chevron-right", size: buttonSize, disabled: disabled || page === count, onPress: () => handlePageChange(page + 1) })), showLastButton && (_jsx(SIconButton, { icon: "page-last", size: buttonSize, disabled: disabled || page === count, onPress: () => handlePageChange(count) }))] }));
+};
+SPagination.displayName = 'SPagination';
+export default SPagination;

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

@@ -0,0 +1,3 @@
+export { SRating, default } from './s-rating';
+export type { SRatingProps, SRatingSize, SRatingColor } from './s-rating';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/s-rating/index.js

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

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Rating size variants - matches web SRating from @solostylist/ui-kit
+ */
+export type SRatingSize = 'small' | 'medium' | 'large';
+/**
+ * Rating color variants
+ */
+export type SRatingColor = 'default' | 'primary' | 'warning';
+/**
+ * Props interface for SRating component
+ */
+export interface SRatingProps {
+    /** Current rating value */
+    value?: number | null;
+    /** Default value for uncontrolled component */
+    defaultValue?: number;
+    /** Maximum rating value (number of stars) */
+    max?: number;
+    /** Size of the rating icons */
+    size?: SRatingSize;
+    /** Color variant of the rating */
+    color?: SRatingColor;
+    /** Whether the rating is read-only */
+    readOnly?: boolean;
+    /** Whether the rating is disabled */
+    disabled?: boolean;
+    /** Precision of rating (0.5 for half stars, 1 for full stars) */
+    precision?: 0.5 | 1;
+    /** Callback fired when the rating changes */
+    onChange?: (event: any, value: number | null) => void;
+    /** Callback fired when hover state changes */
+    onChangeActive?: (event: any, value: number) => void;
+    /** Custom filled icon name (Material Community Icons) */
+    icon?: string;
+    /** Custom empty icon name (Material Community Icons) */
+    emptyIcon?: string;
+    /** Label text for accessibility */
+    name?: string;
+    /** Additional styles for the container */
+    style?: StyleProp<ViewStyle>;
+    /** Whether to highlight only the selected icon (vs all icons up to selected) */
+    highlightSelectedOnly?: boolean;
+}
+/**
+ * A star rating component that allows users to provide feedback and ratings.
+ * Built with custom implementation for React Native with consistent theming.
+ */
+export declare const SRating: {
+    ({ value: controlledValue, defaultValue, max, size, color, readOnly, disabled, precision, onChange, onChangeActive, icon, emptyIcon, name, style, highlightSelectedOnly, }: SRatingProps): React.JSX.Element;
+    displayName: string;
+};
+export default SRating;
+//# sourceMappingURL=s-rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-rating.d.ts","sourceRoot":"","sources":["../../src/s-rating/s-rating.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAItF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAkCD;;;GAGG;AACH,eAAO,MAAM,OAAO;gLAgBjB,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAwNlC,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/s-rating/s-rating.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useMemo, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { brand, gray, lightBrand, lightGray, lightOrange, orange } from '@solostylist/core';
+import { useSTheme } from '../theme';
+/**
+ * Get color palettes for light and dark modes
+ */
+const getColorPalettes = (color) => {
+    switch (color) {
+        case 'default':
+            return { light: lightGray, dark: gray };
+        case 'primary':
+            return { light: lightBrand, dark: brand };
+        case 'warning':
+            return { light: lightOrange, dark: orange };
+        default:
+            return { light: lightOrange, dark: orange };
+    }
+};
+/**
+ * Get icon size based on rating size
+ */
+const getIconSize = (size) => {
+    switch (size) {
+        case 'small':
+            return 18;
+        case 'medium':
+            return 24;
+        case 'large':
+            return 32;
+        default:
+            return 24;
+    }
+};
+/**
+ * A star rating component that allows users to provide feedback and ratings.
+ * Built with custom implementation for React Native with consistent theming.
+ */
+export const SRating = ({ value: controlledValue, defaultValue = 0, max = 5, size = 'medium', color = 'warning', readOnly = false, disabled = false, precision = 1, onChange, onChangeActive, icon = 'star', emptyIcon = 'star-outline', name, style, highlightSelectedOnly = false, }) => {
+    const { theme } = useSTheme();
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [hoverValue, setHoverValue] = useState(null);
+    // Use controlled value if provided, otherwise use internal state
+    const currentValue = controlledValue !== undefined ? controlledValue : internalValue;
+    const displayValue = hoverValue !== null ? hoverValue : (currentValue ?? 0);
+    const { light: lightColor, dark: darkColor } = getColorPalettes(color);
+    const colorPalette = theme.dark ? darkColor : lightColor;
+    const iconSize = getIconSize(size);
+    // Calculate colors based on theme mode
+    const colors = useMemo(() => {
+        const isDark = theme.dark;
+        // Filled color - matches web rating styling (golden/amber for default)
+        const filledColor = isDark ? colorPalette[400] : colorPalette[600];
+        // Empty/unfilled color
+        const emptyColor = isDark ? gray[600] : lightGray[400];
+        // Disabled color
+        const disabledColor = isDark ? gray[700] : lightGray[300];
+        return {
+            filledColor,
+            emptyColor,
+            disabledColor,
+        };
+    }, [theme.dark, colorPalette]);
+    const handlePress = (index, isHalf = false) => {
+        if (readOnly || disabled)
+            return;
+        let newValue;
+        if (precision === 0.5 && isHalf) {
+            newValue = index + 0.5;
+        }
+        else {
+            newValue = index + 1;
+        }
+        // Allow deselecting by clicking the same value
+        if (newValue === currentValue) {
+            newValue = 0;
+        }
+        if (controlledValue === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(null, newValue === 0 ? null : newValue);
+    };
+    const handleHoverEnter = (index, isHalf = false) => {
+        if (readOnly || disabled)
+            return;
+        let hoverVal;
+        if (precision === 0.5 && isHalf) {
+            hoverVal = index + 0.5;
+        }
+        else {
+            hoverVal = index + 1;
+        }
+        setHoverValue(hoverVal);
+        onChangeActive?.(null, hoverVal);
+    };
+    const handleHoverLeave = () => {
+        if (readOnly || disabled)
+            return;
+        setHoverValue(null);
+        onChangeActive?.(null, -1);
+    };
+    const renderIcon = (index) => {
+        const isFilled = highlightSelectedOnly ? displayValue === index + 1 : displayValue >= index + 1;
+        const isHalfFilled = !highlightSelectedOnly && precision === 0.5 && displayValue === index + 0.5;
+        const iconColor = disabled
+            ? colors.disabledColor
+            : isFilled || isHalfFilled
+                ? colors.filledColor
+                : colors.emptyColor;
+        const iconName = isFilled ? icon : emptyIcon;
+        if (precision === 0.5) {
+            // Render half-star support
+            return (_jsxs(View, { style: {
+                    position: 'relative',
+                }, children: [_jsx(TouchableOpacity, { onPress: () => handlePress(index, false), onPressIn: () => handleHoverEnter(index, false), onPressOut: handleHoverLeave, disabled: readOnly || disabled, activeOpacity: readOnly || disabled ? 1 : 0.7, accessibilityRole: "button", accessibilityLabel: name ? `${name} ${index + 1} stars` : `${index + 1} stars`, accessibilityState: { disabled: disabled || readOnly }, children: _jsxs(View, { style: {
+                                flexDirection: 'row',
+                                overflow: 'hidden',
+                            }, children: [_jsx(MaterialCommunityIcons, { name: emptyIcon, size: iconSize, color: disabled ? colors.disabledColor : colors.emptyColor }), isHalfFilled && (_jsx(View, { style: {
+                                        position: 'absolute',
+                                        left: 0,
+                                        top: 0,
+                                        width: iconSize / 2,
+                                        overflow: 'hidden',
+                                    }, children: _jsx(MaterialCommunityIcons, { name: icon, size: iconSize, color: disabled ? colors.disabledColor : colors.filledColor }) })), isFilled && (_jsx(View, { style: [
+                                        {
+                                            position: 'absolute',
+                                            left: 0,
+                                            top: 0,
+                                            width: iconSize / 2,
+                                            overflow: 'hidden',
+                                        },
+                                        { width: iconSize },
+                                    ], children: _jsx(MaterialCommunityIcons, { name: icon, size: iconSize, color: disabled ? colors.disabledColor : colors.filledColor }) }))] }) }), _jsx(TouchableOpacity, { style: {
+                            position: 'absolute',
+                            left: 0,
+                            top: 0,
+                            width: iconSize / 2,
+                            height: iconSize,
+                        }, onPress: () => handlePress(index, true), onPressIn: () => handleHoverEnter(index, true), onPressOut: handleHoverLeave, disabled: readOnly || disabled, activeOpacity: 0, accessibilityLabel: name ? `${name} ${index + 0.5} stars` : `${index + 0.5} stars` })] }, index));
+        }
+        // Full star only (precision = 1)
+        return (_jsx(TouchableOpacity, { onPress: () => handlePress(index), onPressIn: () => handleHoverEnter(index), onPressOut: handleHoverLeave, disabled: readOnly || disabled, activeOpacity: readOnly || disabled ? 1 : 0.7, accessibilityRole: "button", accessibilityLabel: name ? `${name} ${index + 1} stars` : `${index + 1} stars`, accessibilityState: { disabled: disabled || readOnly }, children: _jsx(MaterialCommunityIcons, { name: iconName, size: iconSize, color: iconColor }) }, index));
+    };
+    return (_jsx(View, { style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 2,
+                opacity: disabled ? 0.5 : 1,
+            },
+            style,
+        ], accessibilityRole: "adjustable", accessibilityLabel: name, children: Array.from({ length: max }, (_, index) => renderIcon(index)) }));
+};
+SRating.displayName = 'SRating';
+export default SRating;

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

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

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

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

package/dist/s-review/index.js

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

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Props interface for SReview component
+ */
+export interface SReviewProps {
+    /** Unique identifier for the review (default: auto-generated) */
+    id?: string | number;
+    /** Name of the reviewer */
+    userName: string;
+    /** URL or local asset for the user avatar image (falls back to initials if not provided) */
+    userAvatar?: string | ImageSourcePropType;
+    /** Rating value */
+    rating: number;
+    /** The review text content */
+    reviewContent: string;
+    /** Date and time of the review (automatically converts to relative time) */
+    datetime: Date | string;
+    /** Array of image URLs or local assets to display with the review */
+    images?: (string | ImageSourcePropType)[];
+    /** Current user vote status for this review (default: null) */
+    userHelpfulVote?: 'yes' | 'no' | null;
+    /** Number of "Yes" votes for helpfulness (default: 0) */
+    helpfulYes?: number;
+    /** Number of "No" votes for helpfulness (default: 0) */
+    helpfulNo?: number;
+    /** Callback when user votes on helpfulness (returns null when un-voting) */
+    onHelpfulVote?: (reviewId: string | number, vote: 'yes' | 'no' | null) => void;
+    /** Whether to show the helpful voting section (default: true) */
+    showHelpfulSection?: boolean;
+    /** Size of the avatar in pixels (default: 48) */
+    avatarSize?: number;
+    /** Maximum rating value (default: 5) */
+    maxRating?: number;
+    /** Whether the rating is read-only (default: true) */
+    readOnly?: boolean;
+    /** Whether to show the divider at the bottom of the review (default: true) */
+    showDivider?: boolean;
+    /** Whether to show skeleton loading state instead of content (default: false) */
+    loading?: boolean;
+    /** Additional styles for the container */
+    style?: StyleProp<ViewStyle>;
+    /** Callback when an image is tapped */
+    onImagePress?: (image: string | ImageSourcePropType, index: number) => void;
+}
+/**
+ * A comprehensive review component that displays user reviews with avatar, name, rating, content, and helpful voting system.
+ * Built for React Native with consistent theming.
+ */
+export declare const SReview: {
+    ({ id, userName, userAvatar, rating, reviewContent, datetime, images, userHelpfulVote, helpfulYes, helpfulNo, onHelpfulVote, showHelpfulSection, avatarSize, maxRating, readOnly, showDivider, loading, style, onImagePress, }: SReviewProps): React.JSX.Element;
+    displayName: string;
+};
+export default SReview;
+//# sourceMappingURL=s-review.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"s-review.d.ts","sourceRoot":"","sources":["../../src/s-review/s-review.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AACnE,OAAO,EAKL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IAC1C,mBAAmB;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,qEAAqE;IACrE,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,mBAAmB,CAAC,EAAE,CAAC;IAC1C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/E,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,mBAAmB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7E;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO;oOAoBjB,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CA+QlC,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/s-review/s-review.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useState } from 'react';
+import { Image, Pressable, ScrollView, View, } from 'react-native';
+import { brand, getRelativeTime, gray, lightBrand, lightGray, red } from '@solostylist/core';
+import { SAvatar } from '../s-avatar';
+import { SDivider } from '../s-divider';
+import { SIconButton } from '../s-icon-button';
+import { SRating } from '../s-rating';
+import { SSkeleton } from '../s-skeleton';
+import { SText } from '../s-text';
+import { useSTheme } from '../theme';
+/**
+ * A comprehensive review component that displays user reviews with avatar, name, rating, content, and helpful voting system.
+ * Built for React Native with consistent theming.
+ */
+export const SReview = ({ id, userName, userAvatar, rating, reviewContent, datetime, images, userHelpfulVote = null, helpfulYes = 0, helpfulNo = 0, onHelpfulVote, showHelpfulSection = true, avatarSize = 48, maxRating = 5, readOnly = true, showDivider = true, loading = false, style, onImagePress, }) => {
+    const { theme } = useSTheme();
+    const generatedId = useId();
+    const reviewId = id ?? generatedId;
+    const [localHelpfulYes, setLocalHelpfulYes] = useState(helpfulYes);
+    const [localHelpfulNo, setLocalHelpfulNo] = useState(helpfulNo);
+    const [userVote, setUserVote] = useState(userHelpfulVote);
+    const relativeTime = getRelativeTime(datetime);
+    useEffect(() => {
+        setUserVote(userHelpfulVote);
+    }, [userHelpfulVote]);
+    useEffect(() => {
+        setLocalHelpfulYes(helpfulYes);
+    }, [helpfulYes]);
+    useEffect(() => {
+        setLocalHelpfulNo(helpfulNo);
+    }, [helpfulNo]);
+    const handleHelpfulVote = (vote) => {
+        let newVote = vote;
+        if (userVote === vote) {
+            // User is un-voting
+            if (vote === 'yes') {
+                setLocalHelpfulYes((prev) => Math.max(0, prev - 1));
+            }
+            else {
+                setLocalHelpfulNo((prev) => Math.max(0, prev - 1));
+            }
+            setUserVote(null);
+            newVote = null;
+        }
+        else {
+            // User is voting or changing vote
+            if (userVote === 'yes') {
+                setLocalHelpfulYes((prev) => Math.max(0, prev - 1));
+            }
+            else if (userVote === 'no') {
+                setLocalHelpfulNo((prev) => Math.max(0, prev - 1));
+            }
+            if (vote === 'yes') {
+                setLocalHelpfulYes((prev) => prev + 1);
+            }
+            else {
+                setLocalHelpfulNo((prev) => prev + 1);
+            }
+            setUserVote(vote);
+            newVote = vote;
+        }
+        if (onHelpfulVote) {
+            onHelpfulVote(reviewId, newVote);
+        }
+    };
+    // Calculate colors based on theme mode
+    const colors = useMemo(() => {
+        const isDark = theme.dark;
+        // Get color palettes
+        const primaryPalette = isDark ? brand : lightBrand;
+        const errorPalette = isDark ? red : red;
+        const grayPalette = isDark ? gray : lightGray;
+        return {
+            thumbUpActive: primaryPalette[500],
+            thumbDownActive: errorPalette[500],
+            thumbInactive: grayPalette[500],
+            textPrimary: theme.colors.text.primary,
+            textSecondary: grayPalette[600],
+            captionText: grayPalette[600],
+        };
+    }, [theme.dark, theme.colors.text.primary]);
+    // Skeleton loading state
+    if (loading) {
+        return (_jsxs(View, { style: [
+                {
+                    paddingVertical: theme.spacing.md,
+                },
+                style,
+            ], children: [_jsxs(View, { style: {
+                        flexDirection: 'row',
+                        gap: theme.spacing.md,
+                    }, children: [_jsx(SSkeleton, { variant: "circular", width: avatarSize, height: avatarSize }), _jsxs(View, { style: {
+                                flex: 1,
+                            }, children: [_jsxs(View, { style: {
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        gap: theme.spacing.md,
+                                        marginBottom: theme.spacing.xs,
+                                    }, children: [_jsx(SSkeleton, { variant: "text", width: 120, height: 14 }), _jsx(SSkeleton, { variant: "text", width: 80, height: 12 })] }), _jsx(SSkeleton, { variant: "text", width: 100, height: 20, style: { marginBottom: theme.spacing.xs } }), _jsx(SSkeleton, { variant: "text", width: "100%", height: 16, style: { marginBottom: 4 } }), _jsx(SSkeleton, { variant: "text", width: "90%", height: 16, style: { marginBottom: theme.spacing.md } }), showHelpfulSection && (_jsxs(View, { style: {
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        gap: theme.spacing.xs,
+                                        marginTop: theme.spacing.sm,
+                                    }, children: [_jsx(SSkeleton, { variant: "text", width: 140, height: 14 }), _jsx(SSkeleton, { variant: "circular", width: 32, height: 32, style: { borderRadius: theme.borderRadius.sm } }), _jsx(SSkeleton, { variant: "text", width: 20, height: 14 }), _jsx(SSkeleton, { variant: "circular", width: 32, height: 32, style: { borderRadius: theme.borderRadius.sm } }), _jsx(SSkeleton, { variant: "text", width: 20, height: 14 })] }))] })] }), showDivider && _jsx(SDivider, {})] }));
+    }
+    return (_jsxs(View, { style: [
+            {
+                paddingVertical: theme.spacing.md,
+            },
+            style,
+        ], children: [_jsxs(View, { style: {
+                    flexDirection: 'row',
+                    gap: theme.spacing.md,
+                }, children: [_jsx(View, { style: {
+                            paddingTop: 2,
+                        }, children: _jsx(SAvatar, { name: userName, avatar: userAvatar, size: avatarSize }) }), _jsxs(View, { style: {
+                            flex: 1,
+                        }, children: [_jsxs(View, { style: {
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: theme.spacing.md,
+                                    marginBottom: theme.spacing.xs,
+                                }, children: [_jsx(SText, { children: userName }), _jsx(SText, { variant: "caption", children: relativeTime })] }), _jsx(View, { style: {
+                                    marginBottom: theme.spacing.xs,
+                                }, children: _jsx(SRating, { value: rating, max: maxRating, readOnly: readOnly, size: "small" }) }), _jsx(SText, { style: {
+                                    marginBottom: theme.spacing.md,
+                                }, children: reviewContent }), images && images.length > 0 && (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: {
+                                    flexDirection: 'row',
+                                    gap: theme.spacing.xs,
+                                    marginBottom: theme.spacing.md,
+                                }, children: images.map((image, index) => (_jsx(Pressable, { style: {
+                                        width: 80,
+                                        height: 80,
+                                        borderRadius: theme.borderRadius.sm,
+                                        overflow: 'hidden',
+                                    }, onPress: () => onImagePress?.(image, index), children: _jsx(Image, { source: typeof image === 'string' ? { uri: image } : image, style: {
+                                            width: '100%',
+                                            height: '100%',
+                                            resizeMode: 'cover',
+                                        } }) }, index))) })), showHelpfulSection && (_jsxs(View, { style: {
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: theme.spacing.xs,
+                                }, children: [_jsx(SText, { variant: "caption", style: { marginRight: theme.spacing.sm }, children: "Was this review helpful?" }), _jsx(SIconButton, { icon: userVote === 'yes' ? 'thumb-up' : 'thumb-up-outline', iconColor: userVote === 'yes' ? colors.thumbUpActive : colors.thumbInactive, onPress: () => handleHelpfulVote('yes') }), _jsx(SText, { variant: "caption", style: { marginLeft: 2 }, children: localHelpfulYes }), _jsx(SIconButton, { icon: userVote === 'no' ? 'thumb-down' : 'thumb-down-outline', iconColor: userVote === 'no' ? colors.thumbDownActive : colors.thumbInactive, onPress: () => handleHelpfulVote('no'), style: { marginLeft: theme.spacing.xs } }), _jsx(SText, { variant: "caption", style: { marginLeft: 2 }, children: localHelpfulNo })] }))] })] }), showDivider && _jsx(SDivider, {})] }));
+};
+SReview.displayName = 'SReview';
+export default SReview;

package/dist/s-scroll-to-top/index.d.ts

@@ -0,0 +1,3 @@
+export { SScrollToTop, type SScrollToTopProps } from './s-scroll-to-top';
+export { default } from './s-scroll-to-top';
+//# sourceMappingURL=index.d.ts.map

package/dist/s-scroll-to-top/index.d.ts.map

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

package/dist/s-scroll-to-top/index.js

@@ -0,0 +1,2 @@
+export { SScrollToTop } from './s-scroll-to-top';
+export { default } from './s-scroll-to-top';

package/dist/s-scroll-to-top/s-scroll-to-top.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * Props interface for SScrollToTop component
+ */
+export interface SScrollToTopProps {
+    /** Handler called when the scroll-to-top button is clicked */
+    onPress?: () => void;
+    /** Whether the button should be visible (controlled externally via scroll position) */
+    visible: boolean;
+    /** Custom icon to display instead of the default arrow */
+    icon?: React.ReactNode;
+    /** Position from the bottom edge (default: 20) */
+    bottom?: number;
+    /** Position from the right edge (default: 20) */
+    right?: number;
+    /** Position from the left edge (omit to use right positioning) */
+    left?: number;
+    /** Button size (width and height, default: 40) */
+    size?: number;
+    /** Background color (defaults to theme background.paper) */
+    backgroundColor?: string;
+    /** Icon color (defaults to theme text color) */
+    iconColor?: string;
+    /** Custom style for the button container */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A floating button that appears when the user scrolls down and allows them to quickly return to the top.
+ *
+ * Note: For React Native, visibility must be controlled externally via the `visible` prop.
+ * Track scroll position using ScrollView's `onScroll` event and update `visible` accordingly.
+ */
+export declare const SScrollToTop: React.MemoExoticComponent<({ onPress, visible, icon, bottom, right, left, size, backgroundColor, iconColor, style, }: SScrollToTopProps) => React.JSX.Element>;
+export default SScrollToTop;
+//# sourceMappingURL=s-scroll-to-top.d.ts.map

package/dist/s-scroll-to-top/s-scroll-to-top.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-scroll-to-top.d.ts","sourceRoot":"","sources":["../../src/s-scroll-to-top/s-scroll-to-top.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAuB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGnF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uFAAuF;IACvF,OAAO,EAAE,OAAO,CAAC;IACjB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,wHAYpB,iBAAiB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmEzC,CAAC;AAIF,eAAe,YAAY,CAAC"}