@mrmeg/expo-ui 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.13.0]
+
+### Added
+
+- **`Drawer.Header` now supports a compact app-brand layout.** Use the new
+  `icon`, `title`, and `action` slots for a leading brand icon and title with a
+  trailing close or `Drawer.ToggleCollapse` control. Existing child-based
+  headers remain supported.
+
+### Changed
+
+- Expanded peer compatibility through Expo 57, React Native 0.86, and their
+  matching `@expo/ui` and gesture-handler releases.
+
 ## [0.12.1]
 
 ### Fixed

package/LLM_USAGE.md

@@ -212,6 +212,7 @@ Use this table before creating a new app-local primitive.
 - Use `EmptyState` for no-data or recoverable error regions.
 - Use `Skeleton` for loading content with stable layout.
 - Use `Progress` for real progress or indeterminate long-running work.
+- Use `Drawer.Header` with `icon`, `title`, and `action` for a compact app-brand row; place `Drawer.ToggleCollapse` in `action` for a trailing rail control.
 
 ## Minimal Examples
 
@@ -249,6 +250,20 @@ import { Button, Switch, TextInput } from "@mrmeg/expo-ui/components";
 </Button>
 ```
 
+```tsx
+import { Drawer, Icon } from "@mrmeg/expo-ui/components";
+
+<Drawer.Header
+  icon={<Icon name="hexagon" color="accent" />}
+  title="Acme"
+  action={
+    <Drawer.ToggleCollapse>
+      <Icon name="sidebar" decorative />
+    </Drawer.ToggleCollapse>
+  }
+/>
+```
+
 ```tsx
 import { EmptyState, Progress, SkeletonCard } from "@mrmeg/expo-ui/components";
 import { notify } from "@mrmeg/expo-ui/state";

package/README.md

@@ -254,7 +254,7 @@ Most compound components support both direct named imports and dot notation on t
 | `Card` | `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` |
 | `Collapsible` | `CollapsibleTrigger`, `CollapsibleContent` |
 | `Dialog` | `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose` |
-| `Drawer` | `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerBody`, `DrawerFooter`, `DrawerClose` |
+| `Drawer` | `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerBody`, `DrawerFooter`, `DrawerClose`, `DrawerToggleCollapse` |
 | `DropdownMenu` | `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuPortal`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent` |
 | `Popover` | `PopoverTrigger`, `PopoverContent`, `PopoverHeader`, `PopoverBody`, `PopoverFooter` |
 | `RadioGroup` | `RadioGroupItem` |
@@ -273,6 +273,20 @@ Use `Button.preset`, not `variant`. `default` is the neutral primary action, `se
 
 Use `StyledText` or its aliases instead of raw `Text` whenever the text is part of app UI. Use `TextInput` for labeled fields because it already owns label, helper text, error text, clear buttons, password visibility, numeric filtering, and left/right elements.
 
+`Drawer.Header` accepts `icon`, `title`, and `action` slots for a compact app-brand row. Pass a string title to use the package typography, and place `Drawer.ToggleCollapse` in `action` for a trailing rail control:
+
+```tsx
+<Drawer.Header
+  icon={<Icon name="hexagon" color="accent" />}
+  title="Acme"
+  action={
+    <Drawer.ToggleCollapse>
+      <Icon name="sidebar" decorative />
+    </Drawer.ToggleCollapse>
+  }
+/>
+```
+
 Mount `UIProvider` once near the root before using `Dialog`, `AlertDialog`, `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`, `Tooltip`, or package notifications. On native, `UIProvider` also wraps app content in the package keyboard-avoiding root by default, so ordinary screens and fixed footers stay above the soft keyboard without repeated app-local wrappers; pass `keyboardAvoiding={false}` to opt out, or use `KeyboardAvoidingView` directly for a subtree with custom behavior. Web skips the root keyboard wrapper unless `keyboardAvoiding` is explicitly enabled. `BottomSheet.Content` listens to React Native keyboard events when `avoidKeyboard` is enabled; it defaults to `true` and can be disabled per sheet. Trigger transient feedback with `notify`.
 
 Use `Skeleton` components for loading content with stable dimensions, `EmptyState` for no-data/recoverable errors, `Alert` for blocking confirm/alert dialogs, and `Notification` for transient global feedback.

package/dist/components/Drawer.d.ts

@@ -65,7 +65,14 @@ interface DrawerContentProps extends ViewProps {
     children: React.ReactNode;
 }
 interface DrawerHeaderProps extends ViewProps {
-    children: React.ReactNode;
+    /** Custom header content. Used when the structured slots are omitted. */
+    children?: React.ReactNode;
+    /** Brand or app icon shown before the title. */
+    icon?: React.ReactNode;
+    /** Header title. Strings receive the package's default drawer title style. */
+    title?: React.ReactNode;
+    /** Trailing control, such as a close or rail-collapse button. */
+    action?: React.ReactNode;
 }
 interface DrawerBodyProps extends ViewProps {
     children: React.ReactNode;
@@ -95,7 +102,7 @@ declare function DrawerToggleCollapse({ asChild, children, style: styleOverride
  * so their hooks never run conditionally.
  */
 declare function DrawerContent(props: DrawerContentProps): React.JSX.Element;
-declare function DrawerHeader({ children, style, ...props }: DrawerHeaderProps): React.JSX.Element;
+declare function DrawerHeader({ children, icon, title, action, style, ...props }: DrawerHeaderProps): React.JSX.Element;
 declare function DrawerBody({ children, style, ...props }: DrawerBodyProps): React.JSX.Element;
 declare function DrawerFooter({ children, style, ...props }: DrawerFooterProps): React.JSX.Element;
 declare function useDrawerClose(): () => void;

package/dist/components/Drawer.js

@@ -10,6 +10,7 @@ import { shouldUseNativeDriver } from "../lib/animations.js";
 import { spacing } from "../constants/spacing.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SansSerifBoldText } from "./StyledText.js";
 /**
  * Drawer Component with Sub-components
  *
@@ -536,8 +537,11 @@ swipeEnabled: _swipeEnabled, swipeThreshold: _swipeThreshold, velocityThreshold:
 // ============================================================================
 // Drawer Header Component
 // ============================================================================
-function DrawerHeader({ children, style, ...props }) {
+function DrawerHeader({ children, icon, title, action, style, ...props }) {
     const { theme } = useTheme();
+    const { variant, expandedWidth } = useDrawerContext();
+    const usesStructuredLayout = icon !== undefined || title !== undefined || action !== undefined;
+    const structuredRowWidth = variant === "rail" ? Math.max(0, expandedWidth - spacing.md * 2) : undefined;
     return (_jsx(View, { style: [
             {
                 paddingHorizontal: spacing.md,
@@ -545,8 +549,30 @@ function DrawerHeader({ children, style, ...props }) {
                 borderBottomWidth: 1,
                 borderBottomColor: theme.colors.border,
             },
+            usesStructuredLayout && {
+                minHeight: 56,
+                paddingVertical: spacing.sm,
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.md,
+            },
+            usesStructuredLayout && variant === "rail" && {
+                overflow: "hidden",
+            },
             style,
-        ], ...props, children: children }));
+        ], ...props, children: usesStructuredLayout ? (_jsxs(View, { style: {
+                flex: variant === "rail" ? undefined : 1,
+                flexShrink: variant === "rail" ? 0 : 1,
+                width: structuredRowWidth,
+                minWidth: 0,
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.md,
+            }, children: [icon === undefined ? null : (_jsx(View, { style: { flexShrink: 0 }, children: icon })), title === undefined ? null : (_jsx(View, { style: { flex: 1, minWidth: 0 }, children: typeof title === "string" || typeof title === "number" ? (_jsx(SansSerifBoldText, { numberOfLines: 1, selectable: false, style: { fontSize: 16, lineHeight: 20 }, children: title })) : (title) })), action === undefined ? null : (_jsx(View, { style: {
+                        flexShrink: 0,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: action }))] })) : (children) }));
 }
 // ============================================================================
 // Drawer Body Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -109,14 +109,14 @@
     "@rn-primitives/tooltip": "~1.4.0"
   },
   "peerDependencies": {
-    "@expo/ui": ">=56.0.0 <57.0.0",
+    "@expo/ui": ">=56.0.0 <58.0.0",
     "@react-native-async-storage/async-storage": ">=2.2.0 <2.3.0",
-    "expo": ">=55.0.0 <57.0.0",
-    "expo-font": ">=55.0.0 <57.0.0",
-    "expo-haptics": ">=55.0.0 <57.0.0",
+    "expo": ">=55.0.0 <58.0.0",
+    "expo-font": ">=55.0.0 <58.0.0",
+    "expo-haptics": ">=55.0.0 <58.0.0",
     "react": ">=19.2.0 <20.0.0",
-    "react-native": ">=0.83.0 <0.86.0",
-    "react-native-gesture-handler": ">=2.30.0 <2.32.0",
+    "react-native": ">=0.83.0 <0.87.0",
+    "react-native-gesture-handler": ">=2.30.0 <2.33.0",
     "react-native-keyboard-controller": ">=1.21.0 <2.0.0",
     "react-native-safe-area-context": ">=5.6.0 <6.0.0",
     "react-native-screens": ">=4.23.0 <5.0.0",
@@ -125,7 +125,7 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.17",
-    "react-native-keyboard-controller": "1.21.6",
+    "react-native-keyboard-controller": "1.21.9",
     "typescript": "~6.0.3"
   }
 }