@butternutbox/pawprint-native 0.18.0 → 0.19.1

package/package.json

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

package/src/components/atoms/Button/Button.stories.tsx

@@ -4,10 +4,12 @@ import { Button } from "./Button"
 import type { ButtonProps } from "./Button"
 import { Typography } from "../Typography"
 import { Icon } from "../Icon"
-import { Check } from "@butternutbox/pawprint-icons/core"
-import { IosShare, Whatsapp } from "@butternutbox/pawprint-icons/marketing"
-
-import { KeyboardDoubleArrowDown } from "@butternutbox/pawprint-icons/core"
+import {
+  Check,
+  IosShare,
+  Whatsapp,
+  KeyboardDoubleArrowDown
+} from "@butternutbox/pawprint-icons/core"
 
 export default {
   title: "Atoms/Button",

package/src/components/atoms/Switch/Switch.tsx

@@ -151,16 +151,22 @@ export const Switch = React.forwardRef<View, SwitchProps>(
 
     return (
       <StyledContainer
-        ref={ref}
         switchGap={parseTokenValue(spacing.gap)}
         switchOpacity={disabled ? parseFloat(opacity.disabled) : 1}
         {...rest}
+        pointerEvents={disabled ? "none" : "auto"}
       >
         <SwitchPrimitive.Root
+          ref={ref as any}
           checked={isChecked}
           onCheckedChange={handleCheckedChange}
           disabled={disabled}
-          asChild
+          style={
+            {
+              width: controlWidth,
+              height: controlHeight
+            } as any
+          }
         >
           <StyledControlTrack
             switchChecked={isChecked}
@@ -170,17 +176,19 @@ export const Switch = React.forwardRef<View, SwitchProps>(
             controlBorderColor={colour.control.border.default}
             controlBgChecked={colour.control.background.selected}
             controlBgDefault={colour.control.background.default}
-            pointerEvents={disabled ? "none" : "auto"}
+            pointerEvents="none"
           >
-            <StyledThumb
-              thumbSize={thumbSize}
-              thumbBgColor={
-                isChecked
-                  ? colour.thumb.background.selected
-                  : colour.thumb.background.default
-              }
-              style={{ transform: [{ translateX: thumbTranslateX }] }}
-            />
+            <SwitchPrimitive.Thumb asChild>
+              <StyledThumb
+                thumbSize={thumbSize}
+                thumbBgColor={
+                  isChecked
+                    ? colour.thumb.background.selected
+                    : colour.thumb.background.default
+                }
+                style={{ transform: [{ translateX: thumbTranslateX }] }}
+              />
+            </SwitchPrimitive.Thumb>
           </StyledControlTrack>
         </SwitchPrimitive.Root>
 

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

@@ -2,6 +2,7 @@ import React from "react"
 import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
 import { useDrawerFooterContext } from "./DrawerFooterContext"
 import { useDrawerBodyMax } from "./DrawerBodyMaxContext"
@@ -48,6 +49,7 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const footerContext = useDrawerFooterContext()
     const providedMaxHeight = useDrawerBodyMax()
     const { height: windowHeight } = useWindowDimensions()
+    const insets = useSafeAreaInsets()
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
@@ -66,8 +68,16 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
           parseTokenValue(buttons.size.sm.height)
         : horizontalPadding
 
+    // With no footer, the body is the last element in the panel, so it must
+    // clear the bottom safe area (home indicator / Android nav bar) itself —
+    // DrawerFooter does this when present. Use the larger of the standard 2xl
+    // content pad and the safe-area inset so short insets (iOS) keep the usual
+    // spacing while a taller inset (Android nav bar) isn't clipped.
     const bodyPaddingBottom = !footerContext
-      ? parseTokenValue(theme.tokens.semantics.dimensions.spacing["2xl"])
+      ? Math.max(
+          parseTokenValue(theme.tokens.semantics.dimensions.spacing["2xl"]),
+          insets.bottom
+        )
       : 0
 
     return (