@platform-blocks/ui 0.6.1 → 0.7.1

package/README.md

@@ -34,27 +34,3 @@ export function App() {
 	);
 }
 ```
-
-Refer to the documentation site for component examples and API details. A dedicated “Keyboard Management” guide is available at `/keyboard` within the docs app.
-
-## Keyboard Management
-
-Packages that render focusable inputs can opt into shared keyboard state by wrapping their tree in `KeyboardManagerProvider`. This unlocks the `useKeyboardManager()` hook and ensures components like `AutoComplete` and `Select` dismiss or refocus the keyboard consistently across web and native platforms.
-
-```tsx
-import { KeyboardManagerProvider, KeyboardAwareLayout } from '@platform-blocks/ui';
-
-export function App() {
-	return (
-		<KeyboardManagerProvider>
-			<KeyboardAwareLayout>
-				{/* form inputs */}
-			</KeyboardAwareLayout>
-		</KeyboardManagerProvider>
-	);
-}
-```
-
-`KeyboardAwareLayout` is optional but recommended for screens where the on-screen keyboard could obscure lower inputs. Components expose a `refocusAfterSelect` prop that lets you override the default dismissal behavior when selections complete.
-
-For direct inputs, you can pass `keyboardFocusId` to make a field eligible for deferred refocus requests triggered via `KeyboardManagerProvider` (for example, when an overlay completes a selection and needs to restore focus to a specific input).

package/lib/cjs/index.js

@@ -3527,6 +3527,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.Children.toArray(node).some(child => {
+        if (React.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;
@@ -3571,6 +3600,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 (reactNative.Platform.OS === 'web' && isHTMLVariant(htmlTag)) {
@@ -6722,23 +6755,25 @@ function Dialog({ visible, variant = 'modal', title, children, closable = true,
     }, visible && closable);
     // Pan responder for bottomsheet swipe-to-dismiss
     const panResponder = React.useRef(reactNative.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 (reactNative.Platform.OS === 'web') {
@@ -10842,7 +10877,7 @@ const Masonry = factory((props, ref) => {
     };
     const containerStyle = {
         ...spacingStyle,
-        ...style,
+        ...reactNative.StyleSheet.flatten(style),
     };
     // Show loading state
     if (loading) {
@@ -14503,7 +14538,8 @@ const CodeBlock = (props) => {
     if (spoiler) {
         wrappedCodeContent = (jsxRuntime.jsx(Spoiler, { maxHeight: spoilerMaxHeight, children: scrollableCodeContent }));
     }
-    const userHasWidth = Boolean(style && (style.width !== undefined || style.flex !== undefined));
+    const flatStyle = reactNative.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);
@@ -16113,12 +16149,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 {
@@ -16129,7 +16165,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')
@@ -30976,7 +31012,7 @@ function Avatar({ size = 'md', src, fallback, backgroundColor, textColor = 'whit
     };
     const containerStyle = {
         position: 'relative',
-        ...style,
+        ...reactNative.StyleSheet.flatten(style),
     };
     const content = (jsxRuntime.jsxs(reactNative.View, { style: containerStyle, children: [jsxRuntime.jsx(reactNative.View, { style: avatarStyle, children: src ? (jsxRuntime.jsx(reactNative.Image, { source: { uri: src }, style: {
                         width: avatarSize,
@@ -30997,7 +31033,7 @@ function AvatarGroup({ children, limit, spacing = -8, style, size, bordered = tr
     const containerStyle = {
         flexDirection: 'row',
         alignItems: 'center',
-        ...style,
+        ...reactNative.StyleSheet.flatten(style),
     };
     const avatarWrapperStyle = (index) => ({
         marginLeft: index > 0 ? spacing : 0,
@@ -37183,7 +37219,7 @@ function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', siz
     const spacingStyles = getSpacingStyles(spacingProps);
     const containerStyles = {
         ...spacingStyles,
-        ...containerStyle,
+        ...reactNative.StyleSheet.flatten(containerStyle),
     };
     const imageStyles = {
         width: finalWidth,
@@ -37192,7 +37228,7 @@ function Image({ src, source, alt, accessibilityLabel, resizeMode = 'cover', siz
         borderWidth,
         borderColor: borderColor || theme.colors.gray[3],
         borderRadius,
-        ...imageStyle,
+        ...reactNative.StyleSheet.flatten(imageStyle),
     };
     if (finalWidth !== undefined) {
         containerStyles.width = finalWidth;