@butternutbox/pawprint-native 0.10.5 → 0.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/molecules/Drawer/Drawer.stories.tsx

@@ -273,6 +273,54 @@ Playground.args = {
   defaultOpen: false
 }
 
+export const WithTopContent = () => {
+  const [showToast, setShowToast] = useState(false)
+
+  return (
+    <View style={styles.container}>
+      <Drawer.Root>
+        <Drawer.Trigger>
+          <Button variant="filled" colour="primary">
+            Open drawer with overlay
+          </Button>
+        </Drawer.Trigger>
+        <Drawer.Portal
+          topContent={
+            showToast ? (
+              <View style={styles.toast}>
+                <Typography>Action saved!</Typography>
+              </View>
+            ) : null
+          }
+        >
+          <Drawer.Overlay />
+          <Drawer.Content>
+            <Drawer.Header variant="titleAndText">
+              <Drawer.Title>Floating content demo</Drawer.Title>
+              <Drawer.Close />
+            </Drawer.Header>
+            <Drawer.Body>
+              <Typography>{bodyText}</Typography>
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Button
+                variant="filled"
+                colour="primary"
+                onPress={() => {
+                  setShowToast(true)
+                  setTimeout(() => setShowToast(false), 2000)
+                }}
+              >
+                Show overlay
+              </Button>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     padding: 16
@@ -281,5 +329,15 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     gap: 12,
     marginBottom: 16
+  },
+  toast: {
+    position: "absolute",
+    top: 60,
+    left: 16,
+    right: 16,
+    backgroundColor: "#000",
+    padding: 16,
+    borderRadius: 8,
+    zIndex: 100
   }
 })

package/src/components/molecules/Drawer/Drawer.tsx

@@ -135,15 +135,19 @@ DrawerTrigger.displayName = "Drawer.Trigger"
 
 // ─── Portal ───────────────────────────────────────────────────────────────────
 
-type DrawerPortalProps = {
+export type DrawerPortalProps = {
   children: React.ReactNode
+  topContent?: React.ReactNode
 }
 
 /**
  * Renders its children above the rest of the app using React Native `Modal`.
  * The modal stays mounted during exit animations and unmounts once complete.
+ *
+ * @param children - Drawer content (Overlay, Content, etc.)
+ * @param topContent - *(optional)* Additional content rendered on top of the drawer
  */
-const DrawerPortal = ({ children }: DrawerPortalProps) => {
+const DrawerPortal = ({ children, topContent }: DrawerPortalProps) => {
   const { modalVisible, closeDrawer } = React.useContext(DrawerContext)
 
   if (!modalVisible) return null
@@ -156,7 +160,10 @@ const DrawerPortal = ({ children }: DrawerPortalProps) => {
       statusBarTranslucent
       onRequestClose={closeDrawer}
     >
-      <View style={styles.modalContainer}>{children}</View>
+      <View style={styles.modalContainer}>
+        {children}
+        {topContent}
+      </View>
     </Modal>
   )
 }

package/src/components/molecules/Drawer/index.ts

@@ -1,5 +1,9 @@
 export { Drawer } from "./Drawer"
-export type { DrawerProps, DrawerTriggerProps } from "./Drawer"
+export type {
+  DrawerProps,
+  DrawerTriggerProps,
+  DrawerPortalProps
+} from "./Drawer"
 export type { DrawerContentProps } from "./DrawerContent"
 export type { DrawerOverlayProps } from "./DrawerOverlay"
 export type { DrawerGrabberProps } from "./DrawerGrabber"

package/src/components/molecules/NumberField/NumberFieldInput.tsx

@@ -90,8 +90,7 @@ const StyledTextInput = styled(TextInput)<{
   color: inputColor,
   fontFamily: inputFontFamily,
   ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
-  fontSize: inputFontSize,
-  lineHeight: 0
+  fontSize: inputFontSize
 }))
 
 const StyledRow = styled(View)<{