@platform-blocks/ui 0.6.1 → 0.7.1

package/lib/components/QRCode/types.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { SpacingProps, LayoutProps } from '../../core/utils';
 export interface QRCodeProps extends SpacingProps, LayoutProps {
     /** The data/text to encode in the QR code */
@@ -46,7 +46,7 @@ export interface QRCodeProps extends SpacingProps, LayoutProps {
         borderRadius?: number;
     };
     /** Custom container style */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test ID for testing */
     testID?: string;
     /** Accessibility label */

package/lib/components/Rating/types.d.ts

@@ -1,4 +1,4 @@
-import { View, ViewStyle } from 'react-native';
+import { View, ViewStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 import { SizeValue } from '../../core/theme/sizes';
 import type { DisclaimerSupport } from '../_internal/Disclaimer';
@@ -22,7 +22,7 @@ export interface RatingProps extends SpacingProps, DisclaimerSupport {
     character?: string | React.ReactNode;
     emptyCharacter?: string | React.ReactNode;
     gap?: SizeValue | number;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     testID?: string;
     accessibilityLabel?: string;
     accessibilityHint?: string;

package/lib/components/Ring/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 export interface RingColorStop {
     /** Threshold (0-100) that determines when the color becomes active */
@@ -49,17 +49,17 @@ export interface RingProps extends SpacingProps {
     /** Controls whether the progress stroke has rounded caps. Defaults to true. */
     roundedCaps?: boolean;
     /** Container style for the outer wrapper */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Style applied to the ring wrapper */
-    ringStyle?: ViewStyle;
+    ringStyle?: StyleProp<ViewStyle>;
     /** Style applied to the center content container */
-    contentStyle?: ViewStyle;
+    contentStyle?: StyleProp<ViewStyle>;
     /** Style overrides for the main label */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;
     /** Style overrides for the secondary label */
-    subLabelStyle?: TextStyle;
+    subLabelStyle?: StyleProp<TextStyle>;
     /** Style overrides for the caption */
-    captionStyle?: TextStyle;
+    captionStyle?: StyleProp<TextStyle>;
     /** Color override for the main label */
     labelColor?: string;
     /** Color override for the secondary label */

package/lib/components/SegmentedControl/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ViewStyle } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
 import type { SpacingProps, LayoutProps } from '../../core/utils';
 import type { BorderRadiusProps } from '../../core/theme/radius';
 import type { SizeValue } from '../../core/theme/sizes';
@@ -50,11 +50,11 @@ export interface SegmentedControlProps extends SpacingProps, LayoutProps, Border
     /** Visual style variant */
     variant?: 'default' | 'filled' | 'outline' | 'ghost';
     /** Custom style for indicator */
-    indicatorStyle?: ViewStyle;
+    indicatorStyle?: StyleProp<ViewStyle>;
     /** Custom style applied to every item */
-    itemStyle?: ViewStyle;
+    itemStyle?: StyleProp<ViewStyle>;
     /** Style applied to the container */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test identifier applied to container */
     testID?: string;
     /** Accessibility label for the entire control */

package/lib/components/Skeleton/types.d.ts

@@ -1,4 +1,4 @@
-import { DimensionValue, ViewStyle, View } from 'react-native';
+import { DimensionValue, ViewStyle, View, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 import { SizeValue } from '../../core/theme/sizes';
 export type SkeletonShape = 'text' | 'chip' | 'avatar' | 'button' | 'card' | 'circle' | 'rectangle' | 'rounded';
@@ -20,7 +20,7 @@ export interface SkeletonProps extends SpacingProps {
     /** Gradient colors for the shimmer effect */
     colors?: [string, string];
     /** Style overrides for the skeleton container */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Optional test identifier */
     testID?: string;
 }

package/lib/components/Slider/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { BaseInputProps } from '../Input/types';
 import { ColorValue, SizeValue, PlatformBlocksTheme } from '../../core/theme/types';
 export type SliderColorScheme = keyof PlatformBlocksTheme['colors'] | (string & {});
@@ -39,11 +39,11 @@ export interface SliderProps extends Omit<BaseInputProps, 'value' | 'onChangeTex
     /** Theme color palette or custom color to drive active elements */
     colorScheme?: SliderColorScheme;
     /** Additional styling for the inactive track */
-    trackStyle?: ViewStyle;
+    trackStyle?: StyleProp<ViewStyle>;
     /** Additional styling for the active track */
-    activeTrackStyle?: ViewStyle;
+    activeTrackStyle?: StyleProp<ViewStyle>;
     /** Additional styling for the thumb */
-    thumbStyle?: ViewStyle;
+    thumbStyle?: StyleProp<ViewStyle>;
     /** Override inactive tick color */
     tickColor?: ColorValue;
     /** Override active tick color */
@@ -113,8 +113,8 @@ export interface SliderTrackProps {
     isRange?: boolean;
     trackColor?: ColorValue;
     activeTrackColor?: ColorValue;
-    trackStyle?: ViewStyle;
-    activeTrackStyle?: ViewStyle;
+    trackStyle?: StyleProp<ViewStyle>;
+    activeTrackStyle?: StyleProp<ViewStyle>;
     trackHeight?: number;
     thumbSize?: number;
 }
@@ -145,7 +145,7 @@ export interface SliderThumbProps {
     zIndex?: number;
     panHandlers?: any;
     thumbColor?: ColorValue;
-    thumbStyle?: ViewStyle;
+    thumbStyle?: StyleProp<ViewStyle>;
     thumbSize?: number;
 }
 export interface SliderLabelProps {

package/lib/components/Spotlight/types.d.ts

@@ -1,4 +1,4 @@
-import type { ViewStyle, TextInput } from 'react-native';
+import type { ViewStyle, TextInput, StyleProp } from 'react-native';
 import React from 'react';
 import { SpotlightItem } from './SpotlightTypes';
 import type { HighlightProps as HighlightComponentProps } from '../Highlight';
@@ -23,7 +23,7 @@ export interface SpotlightRootProps {
     opened?: boolean;
     onClose?: () => void;
     shortcut?: string | string[] | null;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 }
 export interface SpotlightSearchProps {
     value?: string;
@@ -41,7 +41,7 @@ export interface SpotlightActionsListProps {
     children: React.ReactNode;
     scrollable?: boolean;
     maxHeight?: number;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     scrollRef?: any;
     onScrollChange?: (y: number) => void;
 }
@@ -54,7 +54,7 @@ export interface SpotlightActionProps {
     disabled?: boolean;
     selected?: boolean;
     children?: React.ReactNode;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     innerRef?: any;
     onLayout?: (e: any) => void;
     highlightQuery?: HighlightComponentProps['highlight'];
@@ -62,9 +62,9 @@ export interface SpotlightActionProps {
 export interface SpotlightActionsGroupProps {
     label: string;
     children: React.ReactNode;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 }
 export interface SpotlightEmptyProps {
     children: React.ReactNode;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 }

package/lib/components/Tabs/types.d.ts

@@ -4,7 +4,7 @@ interface RadiusProp {
     radius?: number | string;
 }
 import type { SizeValue } from '../../core/theme/sizes';
-import type { ViewStyle, TextStyle } from 'react-native';
+import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
 /**
  * Describes a single tab rendered by the {@link Tabs} component.
  */
@@ -115,19 +115,19 @@ export interface TabsProps extends SpacingProps, RadiusProp {
     /**
      * Style overrides for the outer container.
      */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /**
      * Style overrides applied to each tab pressable.
      */
-    tabStyle?: ViewStyle;
+    tabStyle?: StyleProp<ViewStyle>;
     /**
      * Style for the active tab content wrapper.
      */
-    contentStyle?: ViewStyle;
+    contentStyle?: StyleProp<ViewStyle>;
     /**
      * Additional text style applied to tab labels.
      */
-    textStyle?: TextStyle;
+    textStyle?: StyleProp<TextStyle>;
     /**
      * Array of tab keys that should be rendered disabled.
      */

package/lib/components/Toast/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import { SpacingProps } from '../../core/utils';
 import { BorderRadiusProps } from '../../core/theme/radius';
 export type ToastVariant = 'light' | 'filled' | 'outline';
@@ -58,7 +58,7 @@ export interface ToastProps extends SpacingProps, BorderRadiusProps {
     /** Position of the toast for animation direction */
     position?: ToastPosition;
     /** Container style */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test ID for testing */
     testID?: string;
     /** Action buttons */

package/lib/components/Tooltip/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle, View } from 'react-native';
+import { ViewStyle, View, StyleProp } from 'react-native';
 import { SizeValue } from '../../core/theme/sizes';
 export type TooltipPositionType = 'top' | 'bottom' | 'left' | 'right';
 export interface TooltipProps {
@@ -34,7 +34,7 @@ export interface TooltipProps {
     /** Children element to attach tooltip to */
     children: React.ReactElement;
     /** Container style */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
     /** Test ID for testing */
     testID?: string;
 }

package/lib/components/Video/NativeVideoPlayer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImageStyle } from 'react-native';
+import { ImageStyle, StyleProp } from 'react-native';
 import type { VideoSource, VideoPlaybackRate } from './types';
 interface NativeVideoPlayerProps {
     source: VideoSource;
@@ -17,7 +17,7 @@ interface NativeVideoPlayerProps {
     onLoad?: () => void;
     onLoadStart?: () => void;
     onBuffer?: (buffering: boolean) => void;
-    style?: ImageStyle;
+    style?: StyleProp<ImageStyle>;
     accessibilityLabel?: string;
 }
 interface NativeVideoPlayerRef {

package/lib/components/Video/VideoControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 import type { VideoControls as VideoControlsConfig, VideoState, VideoPlaybackRate } from './types';
 interface VideoControlsProps {
     config: VideoControlsConfig;
@@ -11,7 +11,7 @@ interface VideoControlsProps {
     onPlaybackRateChange: (rate: VideoPlaybackRate) => void;
     onToggleFullscreen: () => void;
     onScrubbingChange?: (isScrubbing: boolean) => void;
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 }
 export declare function VideoControls({ config, state, onPlay, onPause, onSeek, onVolumeChange, onPlaybackRateChange, onToggleFullscreen, onScrubbingChange, style }: VideoControlsProps): React.JSX.Element;
 export {};

package/lib/components/Video/YouTubePlayer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImageStyle } from 'react-native';
+import { ImageStyle, StyleProp } from 'react-native';
 import type { VideoSource, VideoPlaybackRate, VideoQuality } from './types';
 interface YouTubePlayerProps {
     source: VideoSource;
@@ -28,7 +28,7 @@ interface YouTubePlayerProps {
     onLoad?: () => void;
     onLoadStart?: () => void;
     onBuffer?: (buffering: boolean) => void;
-    style?: ImageStyle;
+    style?: StyleProp<ImageStyle>;
     accessibilityLabel?: string;
 }
 interface YouTubePlayerRef {

package/lib/components/Video/types.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle, ImageStyle } from 'react-native';
+import { ViewStyle, ImageStyle, StyleProp } from 'react-native';
 import type { SpacingProps } from '../../core/utils';
 export type VideoSource = {
     /** Video URL (mp4, webm, etc.) */
@@ -118,9 +118,9 @@ export interface VideoProps extends SpacingProps {
     onBuffer?: (buffering: boolean) => void;
     onTimelineEvent?: (event: VideoTimelineEvent, state: VideoState) => void;
     /** Styling */
-    style?: ViewStyle;
-    videoStyle?: ImageStyle;
-    controlsStyle?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
+    videoStyle?: StyleProp<ImageStyle>;
+    controlsStyle?: StyleProp<ViewStyle>;
     /** Accessibility */
     accessibilityLabel?: string;
     testID?: string;

package/lib/esm/index.js

@@ -3507,6 +3507,35 @@ const containsPlatformText = (node) => {
         return false;
     });
 };
+/**
+ * Check if children contain block-level elements (View, Pressable, etc.)
+ * that would render as <div> on web, causing invalid nesting inside <p>.
+ */
+const containsBlockElement = (node) => {
+    return React__default.Children.toArray(node).some(child => {
+        if (React__default.isValidElement(child)) {
+            const childType = child.type;
+            // Check for native RN components that render as div on web
+            const displayName = (childType === null || childType === void 0 ? void 0 : childType.displayName) || (childType === null || childType === void 0 ? void 0 : childType.name) || '';
+            const blockNames = new Set([
+                'View', 'Pressable', 'TouchableOpacity', 'TouchableHighlight',
+                'TouchableWithoutFeedback', 'ScrollView', 'FlatList', 'SectionList',
+                'SafeAreaView', 'KeyboardAvoidingView', 'Modal',
+            ]);
+            if (blockNames.has(displayName))
+                return true;
+            // Also check if it's a native 'div' element
+            if (childType === 'div')
+                return true;
+            // Recurse into children
+            const childProps = child.props;
+            if (childProps === null || childProps === void 0 ? void 0 : childProps.children) {
+                return containsBlockElement(childProps.children);
+            }
+        }
+        return false;
+    });
+};
 const Text = (allProps) => {
     const { spacingProps, otherProps } = extractSpacingProps(allProps);
     const { children, tx, txParams, variant = 'p', size, weight, align = 'left', color, colorVariant, lineHeight, tracking, uppercase, style, fontFamily, as, selectable = true, onPress, onLayout, value, numberOfLines, ellipsizeMode } = otherProps;
@@ -3551,6 +3580,10 @@ const Text = (allProps) => {
             // Avoid nested paragraphs when Text components are nested
             htmlTag = 'div';
         }
+        if (htmlTag === 'p' && containsBlockElement(children)) {
+            // Avoid <div> inside <p> when children contain View, Pressable, etc.
+            htmlTag = 'div';
+        }
     }
     // Platform-specific rendering
     if (Platform.OS === 'web' && isHTMLVariant(htmlTag)) {
@@ -6702,23 +6735,25 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     }, visible && closable);
     // Pan responder for bottomsheet swipe-to-dismiss
     const panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponderCapture: () => {
+            // Never capture on touch start — let events reach children (buttons) first
+            return false;
+        },
         onStartShouldSetPanResponder: () => {
-            // Only allow responder when swipe gestures are enabled for bottom sheet
+            // Claim in bubble phase (after children had their chance to claim).
+            // If a Button/Pressable already claimed the touch, this won't fire.
+            // If nothing claimed (e.g. drag handle, empty space), we take over for swipe tracking.
             return variant === 'bottomsheet' && bottomSheetSwipeZone !== 'none';
         },
-        onStartShouldSetPanResponderCapture: () => {
-            // Capture immediately for bottom sheet to ensure gesture responsiveness on native
-            return variant === 'bottomsheet' && bottomSheetSwipeZone !== 'none';
+        onMoveShouldSetPanResponderCapture: () => {
+            // Never capture moves — let children handle their own gestures
+            return false;
         },
         onMoveShouldSetPanResponder: (_, gestureState) => {
-            // Allow movement in any direction but prioritize downward movement
+            // Claim the gesture when there's a clear vertical swipe movement
             return variant === 'bottomsheet' && bottomSheetSwipeZone !== 'none' && (Math.abs(gestureState.dy) > Math.abs(gestureState.dx) &&
                 Math.abs(gestureState.dy) > 2);
         },
-        onMoveShouldSetPanResponderCapture: () => {
-            // Already captured on start; keep returning true for consistency
-            return variant === 'bottomsheet' && bottomSheetSwipeZone !== 'none';
-        },
         onPanResponderGrant: (evt) => {
             // Prevent default browser behavior (text selection, etc.) on web
             if (Platform.OS === 'web') {
@@ -10822,7 +10857,7 @@ const Masonry = factory((props, ref) => {
     };
     const containerStyle = {
         ...spacingStyle,
-        ...style,
+        ...StyleSheet.flatten(style),
     };
     // Show loading state
     if (loading) {
@@ -14483,7 +14518,8 @@ const CodeBlock = (props) => {
     if (spoiler) {
         wrappedCodeContent = (jsx(Spoiler, { maxHeight: spoilerMaxHeight, children: scrollableCodeContent }));
     }
-    const userHasWidth = Boolean(style && (style.width !== undefined || style.flex !== undefined));
+    const flatStyle = StyleSheet.flatten(style);
+    const userHasWidth = Boolean(flatStyle && (flatStyle.width !== undefined || flatStyle.flex !== undefined));
     const containerStyle = userHasWidth ? [{ marginBottom: 20 }, style, spacingStyles] : [styles.container, spacingStyles, style];
     const showHeaderBar = fileHeader && fileName && variant !== 'terminal';
     const inlineTitleVisible = variant === 'code' && (title || fileName);
@@ -16093,12 +16129,12 @@ const BrandButton = (props) => {
                 return { backgroundColor: 'transparent', borderColor: 'transparent' };
             case 'plain':
                 return {
-                    backgroundColor: 'white',
+                    backgroundColor: theme.colorScheme === 'dark' ? theme.backgrounds.elevated : 'white',
                     borderColor: 'transparent',
                     paddingHorizontal: 16,
                     minWidth: 0,
                     height: 'auto',
-                    color: 'black'
+                    color: theme.colorScheme === 'dark' ? theme.text.primary : 'black'
                 };
             default: // primary/filled/secondary/gradient etc treat as filled brand color
                 return {
@@ -16109,7 +16145,7 @@ const BrandButton = (props) => {
         }
     })();
     // Compute textColor override: outline/link use brand color, ghost uses default text color, filled-like use contrasting light text
-    const textColor = effectiveVariant === 'plain' ? 'black' :
+    const textColor = effectiveVariant === 'plain' ? (theme.colorScheme === 'dark' ? theme.text.primary : 'black') :
         effectiveVariant === 'ghost'
             ? theme.text.primary
             : (effectiveVariant === 'outline' || effectiveVariant === 'link')
@@ -30956,7 +30992,7 @@ function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'whit
     };
     const containerStyle = {
         position: 'relative',
-        ...style,
+        ...StyleSheet.flatten(style),
     };
     const content = (jsxs(View, { style: containerStyle, children: [jsx(View, { style: avatarStyle, children: src ? (jsx(Image$1, { source: { uri: src }, style: {
                         width: avatarSize,
@@ -30977,7 +31013,7 @@ function AvatarGroup({ children, limit, spacing = -8, style, size, bordered = tr
     const containerStyle = {
         flexDirection: 'row',
         alignItems: 'center',
-        ...style,
+        ...StyleSheet.flatten(style),
     };
     const avatarWrapperStyle = (index) => ({
         marginLeft: index > 0 ? spacing : 0,
@@ -37163,7 +37199,7 @@ function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', siz
     const spacingStyles = getSpacingStyles(spacingProps);
     const containerStyles = {
         ...spacingStyles,
-        ...containerStyle,
+        ...StyleSheet.flatten(containerStyle),
     };
     const imageStyles = {
         width: finalWidth,
@@ -37172,7 +37208,7 @@ function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', siz
         borderWidth,
         borderColor: borderColor || theme.colors.gray[3],
         borderRadius,
-        ...imageStyle,
+        ...StyleSheet.flatten(imageStyle),
     };
     if (finalWidth !== undefined) {
         containerStyles.width = finalWidth;