@butternutbox/pawprint-native 0.10.4 → 0.10.6

package/package.json

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

@@ -202,6 +202,25 @@ export const Controlled = () => {
   )
 }
 
+export const FullWidth = () => {
+  const [value, setValue] = useState(5)
+
+  return (
+    <View style={styles.section}>
+      <NumberField
+        label="Weight"
+        size="lg"
+        fullWidth
+        description="Help text"
+        value={String(value)}
+        onChangeText={(t) => setValue(Number(t) || 0)}
+        onIncrement={() => setValue((v) => v + 1)}
+        onDecrement={() => setValue((v) => Math.max(0, v - 1))}
+      />
+    </View>
+  )
+}
+
 export const Playground = {
   args: {
     size: "lg",

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

@@ -19,6 +19,7 @@ type NumberFieldOwnProps = {
   state?: NumberFieldState
   size?: NumberFieldSize
   disabled?: boolean
+  fullWidth?: boolean
   onIncrement?: () => void
   onDecrement?: () => void
   showIncrementButton?: boolean
@@ -37,9 +38,10 @@ const parseTokenValue = (value: string): number => parseFloat(value)
 
 const StyledRoot = styled(View)<{
   rootGap: number
-}>(({ rootGap }) => ({
-  alignItems: "center",
-  gap: rootGap
+  fullWidth?: boolean
+}>(({ rootGap, fullWidth }) => ({
+  gap: rootGap,
+  ...(fullWidth && { width: "100%" })
 }))
 
 const StyledLabelGroup = styled(View)<{
@@ -60,6 +62,7 @@ const StyledLabelGroup = styled(View)<{
  * @param {string} [error] - Error message displayed when state is "error".
  * @param {"default" | "error" | "success"} [state="default"] - Visual state of the field.
  * @param {boolean} [disabled=false] - Whether the entire field (input + buttons) is disabled.
+ * @param {boolean} [fullWidth=false] - Whether the field should expand to fill available width.
  * @param {() => void} [onIncrement] - Called when the + button is pressed.
  * @param {() => void} [onDecrement] - Called when the - button is pressed.
  * @param {boolean} [showIncrementButton=true] - Whether to show the + button.
@@ -76,6 +79,7 @@ const StyledLabelGroup = styled(View)<{
  * <NumberField
  *   label="Weight"
  *   size="lg"
+ *   fullWidth
  *   defaultValue="0"
  *   onIncrement={() => setValue(v => v + 1)}
  *   onDecrement={() => setValue(v => v - 1)}
@@ -94,6 +98,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
       state = "default",
       size = "lg",
       disabled,
+      fullWidth,
       onIncrement,
       onDecrement,
       showIncrementButton,
@@ -114,7 +119,11 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
       size === "lg" ? tokens.typography.large : tokens.typography.small
 
     return (
-      <StyledRoot ref={ref} rootGap={parseTokenValue(sizeTokens.gap)}>
+      <StyledRoot
+        ref={ref}
+        rootGap={parseTokenValue(sizeTokens.gap)}
+        fullWidth={fullWidth}
+      >
         {(label || smallLabel) && (
           <StyledLabelGroup
             labelGap={parseTokenValue(
@@ -142,6 +151,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
         <NumberFieldInput
           fieldSize={size}
           state={state}
+          fullWidth={fullWidth}
           disabled={disabled}
           onIncrement={onIncrement}
           onDecrement={onDecrement}

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

@@ -11,6 +11,7 @@ type NumberFieldSize = "sm" | "lg"
 type NumberFieldInputOwnProps = {
   fieldSize?: NumberFieldSize
   state?: "default" | "error" | "success"
+  fullWidth?: boolean
   onIncrement?: () => void
   onDecrement?: () => void
   showIncrementButton?: boolean
@@ -34,6 +35,7 @@ const StyledFieldWrapper = styled(View)<{
   fieldMinWidth: number
   fieldHeight: number
   fieldPaddingHorizontal: number
+  fullWidth?: boolean
 }>(
   ({
     fieldBgColor,
@@ -41,18 +43,21 @@ const StyledFieldWrapper = styled(View)<{
     fieldBorderRadius,
     fieldMinWidth,
     fieldHeight,
-    fieldPaddingHorizontal
+    fieldPaddingHorizontal,
+    fullWidth
   }) => ({
     alignItems: "center",
     justifyContent: "center",
-    width: fieldMinWidth,
+    width: fullWidth ? "100%" : fieldMinWidth,
+    minWidth: fieldMinWidth,
     height: fieldHeight,
     paddingHorizontal: fieldPaddingHorizontal,
     backgroundColor: fieldBgColor,
     borderWidth: 1,
     borderColor: fieldBorderColor,
     borderRadius: fieldBorderRadius,
-    overflow: "hidden"
+    overflow: "hidden",
+    ...(fullWidth && { flex: 1 })
   })
 )
 
@@ -85,8 +90,7 @@ const StyledTextInput = styled(TextInput)<{
   color: inputColor,
   fontFamily: inputFontFamily,
   ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
-  fontSize: inputFontSize,
-  lineHeight: 0
+  fontSize: inputFontSize
 }))
 
 const StyledRow = styled(View)<{
@@ -94,7 +98,6 @@ const StyledRow = styled(View)<{
 }>(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
-  alignSelf: "center",
   gap: rowGap
 }))
 
@@ -117,6 +120,7 @@ export const NumberFieldInput = React.forwardRef<
     {
       fieldSize = "lg",
       state = "default",
+      fullWidth,
       onIncrement,
       onDecrement,
       showIncrementButton = true,
@@ -236,6 +240,7 @@ export const NumberFieldInput = React.forwardRef<
           fieldMinWidth={fieldMinWidth}
           fieldHeight={fieldHeight}
           fieldPaddingHorizontal={fieldPaddingHorizontal}
+          fullWidth={fullWidth}
         >
           <StyledTextInput
             ref={ref}

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

@@ -69,12 +69,9 @@ export default {
     },
     bannerType: {
       control: { type: "select" },
-      options: ["error", "success", "warning", "info"],
-      description: "Banner notification type"
-    },
-    showBannerIcon: {
-      control: { type: "boolean" },
-      description: "Show/hide banner notification icon"
+      options: ["none", "error", "info"],
+      description:
+        "Banner variant: none (no icon), error (with icon), info (with icon)"
     }
   }
 }
@@ -91,8 +88,7 @@ Playground.args = {
   quantity: 1,
   showQuantityPicker: true,
   showBanner: true,
-  bannerType: "info",
-  showBannerIcon: false,
+  bannerType: "none",
   banner: " High in protein •  Natural ingredients •  Vet approved",
   image: placeholderImageUrl
 }
@@ -134,8 +130,6 @@ export const WithBanner = () => (
       quantity={1}
       showQuantityPicker
       showBanner
-      bannerType="success"
-      showBannerIcon={false}
       banner="High in protein • Natural ingredients • Vet approved"
       image={placeholderImageUrl}
     />
@@ -151,8 +145,7 @@ export const WithBannerIcon = () => (
       quantity={1}
       showQuantityPicker
       showBanner
-      bannerType="success"
-      showBannerIcon
+      bannerType="info"
       banner="High in protein • Natural ingredients • Vet approved"
       image={placeholderImageUrl}
     />
@@ -217,8 +210,6 @@ export const WithMinQuantity = () => (
       minQuantity={5}
       showQuantityPicker
       showBanner
-      bannerType="info"
-      showBannerIcon={false}
       banner="Minimum quantity: 5 pouches required"
       image={placeholderImageUrl}
     />
@@ -237,7 +228,7 @@ export const WithImagePress = () => {
         showQuantityPicker
         onImagePress={() => setPressed(true)}
         showBanner={pressed}
-        bannerType="success"
+        bannerType="info"
         banner="Image pressed!"
         image={placeholderImageUrl}
       />

package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.test.tsx

@@ -159,7 +159,6 @@ describe("ProductDisplayCard (Native)", () => {
         title="Test Product"
         showBanner={true}
         banner={<Text>Test Banner</Text>}
-        bannerType="success"
       />
     )
 
@@ -177,13 +176,13 @@ describe("ProductDisplayCard (Native)", () => {
     expect(screen.getByText("Error Banner")).toBeTruthy()
   })
 
-  it("displays banner with icon when showBannerIcon is true", () => {
+  it("displays banner with icon when bannerType is info", () => {
     renderWithTheme(
       <ProductDisplayCard
         title="Test Product"
         showBanner={true}
+        bannerType="info"
         banner={<Text>Test Banner</Text>}
-        showBannerIcon={true}
       />
     )
 

package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { View, ViewProps, Image, Pressable } from "react-native"
 import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
 import { Typography } from "../../atoms/Typography"
 import { NumberField } from "../../molecules/NumberField"
 import { Notification } from "../Notification"
@@ -24,7 +25,7 @@ export type ProductDisplayCardProps = ViewProps & {
   onImagePress?: () => void
   banner?: string | React.ReactNode
   showBanner?: boolean
-  bannerType?: "error" | "success" | "warning" | "info"
+  bannerType?: "error" | "info" | "none"
   showBannerIcon?: boolean
 }
 
@@ -132,6 +133,23 @@ const StyledNotification = styled(Notification as any)(({ theme }) => {
   }
 })
 
+const StyledNoneBanner = styled(View)(({ theme }) => {
+  const { spacing, borderRadius } = theme.tokens.semantics.dimensions
+  const { colour } = theme.tokens.semantics
+  const spacingMd = parseTokenValue(spacing.md)
+  const radiusMd = parseTokenValue(borderRadius.md)
+  return {
+    paddingHorizontal: spacingMd,
+    paddingTop: 27,
+    paddingBottom: spacingMd,
+    backgroundColor: colour.background.container.secondary,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: radiusMd,
+    borderBottomRightRadius: radiusMd
+  }
+})
+
 /**
  * Product Display Card component for showing product information with optional quantity picker.
  *
@@ -156,8 +174,8 @@ const StyledNotification = styled(Notification as any)(({ theme }) => {
  * @param image - *(optional)* Image URL string or React element
  * @param banner - *(optional)* Banner content string or React element to show below card
  * @param showBanner - *(optional)* Show/hide banner
- * @param bannerType - *(optional)* Banner notification type: "error", "success", "warning", or "info" (default)
- * @param showBannerIcon - *(optional)* Show/hide banner notification icon
+ * @param bannerType - *(optional)* Banner variant: "error" (with icon), "info" (with icon), or "none" (no icon, default)
+ * @param showBannerIcon - *(optional)* Show/hide icon in banner (default: true)
  */
 export const ProductDisplayCard = React.forwardRef<
   View,
@@ -182,8 +200,8 @@ export const ProductDisplayCard = React.forwardRef<
       onImagePress,
       banner,
       showBanner = false,
-      bannerType = "info",
-      showBannerIcon = false,
+      bannerType = "none",
+      showBannerIcon = true,
       ...rest
     },
     ref
@@ -260,17 +278,33 @@ export const ProductDisplayCard = React.forwardRef<
     )
 
     if (showBanner && banner) {
+      const theme = useTheme()
+      const { notifications } = theme.tokens.components
+      const notificationTypography = notifications.typography.body
+      const notificationColour = notifications.notification.colour.text.body
+
       return (
         <StyledRootWrapper>
           {cardContent}
           <StyledBannerWrapper>
-            <StyledNotification
-              variant="inline"
-              type={bannerType}
-              showIcon={showBannerIcon}
-            >
-              {banner}
-            </StyledNotification>
+            {bannerType === "none" ? (
+              <StyledNoneBanner>
+                <Typography
+                  token={notificationTypography}
+                  color={notificationColour}
+                >
+                  {banner}
+                </Typography>
+              </StyledNoneBanner>
+            ) : (
+              <StyledNotification
+                variant="inline"
+                type={bannerType}
+                showIcon={showBannerIcon}
+              >
+                {banner}
+              </StyledNotification>
+            )}
           </StyledBannerWrapper>
         </StyledRootWrapper>
       )

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

@@ -187,6 +187,70 @@ export const CompoundComponents = () => (
   </View>
 )
 
+export const CompoundTiles = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Basic tiles
+      </Typography>
+      <RadioGroup name="compound-tiles" defaultValue="medium">
+        <RadioGroup.Tile value="small" label="Small" subText="For tiny dogs" />
+        <RadioGroup.Tile
+          value="medium"
+          label="Medium"
+          subText="For medium dogs"
+        />
+        <RadioGroup.Tile value="large" label="Large" subText="For big dogs" />
+      </RadioGroup>
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Tiles with tags
+      </Typography>
+      <RadioGroup name="tiles-with-tags" defaultValue="1">
+        <RadioGroup.Tile
+          value="1"
+          label="1 pouch over 2 days"
+          subText="400g pouches"
+          tag={{ children: "Save up to £12.20 per box" }}
+        />
+        <RadioGroup.Tile
+          value="2"
+          label="1 pouch per day"
+          subText="200g pouches"
+          tag={{ children: "Most popular", variant: "promo" }}
+        />
+        <RadioGroup.Tile
+          value="3"
+          label="Custom frequency"
+          subText="Choose your own schedule"
+        />
+      </RadioGroup>
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Tiles with icons and tags
+      </Typography>
+      <RadioGroup name="tiles-with-icons" defaultValue="1">
+        <RadioGroup.Tile
+          value="1"
+          label="Most popular"
+          subText="Recommended for most dogs"
+          tag={{ children: "Best value", variant: "promo", icon: StarRate }}
+        />
+        <RadioGroup.Tile
+          value="2"
+          label="Flexible plan"
+          subText="Change anytime"
+          tag={{ children: "New", variant: "success" }}
+        />
+      </RadioGroup>
+    </View>
+  </View>
+)
+
 export const Controlled = () => {
   const [value, setValue] = useState("chicken")
 

package/src/components/molecules/Radio/Radio.tsx

@@ -264,3 +264,13 @@ export const Radio = React.forwardRef<View, RadioProps>(
 )
 
 Radio.displayName = "Radio"
+
+/**
+ * RadioTile component for tile-variant radio buttons.
+ * Convenience wrapper around Radio with variant="tile" preset.
+ */
+export const RadioTile = React.forwardRef<View, Omit<RadioProps, "variant">>(
+  (props, ref) => <Radio ref={ref} {...props} variant="tile" />
+)
+
+RadioTile.displayName = "RadioTile"

package/src/components/molecules/Radio/RadioGroup.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { View, ViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
-import { Radio, type RadioOwnProps } from "./Radio"
+import { Radio, RadioTile, type RadioOwnProps } from "./Radio"
 
 type RadioGroupOwnProps = {
   name: string
@@ -135,8 +135,10 @@ type RadioGroupComponent = React.ForwardRefExoticComponent<
   RadioGroupProps & React.RefAttributes<View>
 > & {
   Radio: typeof Radio
+  Tile: typeof RadioTile
 }
 
 export const RadioGroup = Object.assign(RadioGroupRoot, {
-  Radio
+  Radio,
+  Tile: RadioTile
 }) as RadioGroupComponent

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

@@ -1,4 +1,4 @@
-export { Radio } from "./Radio"
+export { Radio, RadioTile } from "./Radio"
 export type { RadioProps, RadioOwnProps } from "./Radio"
 export { RadioGroup } from "./RadioGroup"
 export type { RadioGroupProps } from "./RadioGroup"