@butternutbox/pawprint-native 0.19.0 → 0.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "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/NativeSelectPicker/NativeSelectPicker.tsx

@@ -7,7 +7,8 @@ import {
   FlatList,
   TouchableWithoutFeedback,
   View,
-  ViewProps
+  ViewProps,
+  useWindowDimensions
 } from "react-native"
 import { useSharedValue, useAnimatedStyle } from "react-native-reanimated"
 import { KeyboardArrowDown } from "@butternutbox/pawprint-icons/core"
@@ -96,6 +97,7 @@ const NativeSelectPicker = React.forwardRef<View, NativeSelectPickerProps>(
   ) => {
     const [isOpen, setIsOpen] = useState(false)
     const { iconAnimationStyles } = useIconAnimation()
+    const { height: windowHeight } = useWindowDimensions()
 
     const hasPlaceholder =
       placeholder &&
@@ -231,7 +233,12 @@ const NativeSelectPicker = React.forwardRef<View, NativeSelectPickerProps>(
                         )
                       }}
                       style={{
-                        maxHeight: parseSize(dimensions.spacing["8xl"])
+                        // Fill the bottom-sheet dialog (sized 40-80% of the
+                        // screen) rather than a tiny fixed cap, so all options
+                        // are reachable/scrollable on Android like the iOS
+                        // ActionSheet. Previously capped at spacing["8xl"],
+                        // which showed only ~1 row.
+                        maxHeight: windowHeight * 0.7
                       }}
                     />
                   </S.AndroidDialog>