@butternutbox/pawprint-native 0.9.0 → 0.10.0

package/package.json

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

package/src/__mocks__/react-native.tsx

@@ -324,6 +324,13 @@ export const Platform = {
   select: (obj: any) => obj.ios ?? obj.default
 }
 
+export const Keyboard = {
+  addListener: (_event: string, _handler: () => void) => ({
+    remove: () => {}
+  }),
+  dismiss: () => {}
+}
+
 // ─── Type exports (re-exported as empty for TS compat) ───────────────────
 export type ViewProps = any
 export type TextProps = any

package/src/__mocks__/rn-primitives/select.tsx

@@ -1,10 +1,24 @@
 import React from "react"
 
+const SelectCtx = React.createContext<{
+  open: boolean
+  setOpen: (open: boolean) => void
+}>({ open: false, setOpen: () => {} })
+
 export const Root = React.forwardRef<any, any>(
   (
-    { value, defaultValue, onValueChange, disabled, children, ...rest },
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      children,
+      onOpenChange,
+      ...rest
+    },
     ref
   ) => {
+    const [open, setOpenState] = React.useState(false)
     const [internalValue, setInternalValue] = React.useState(
       value ?? defaultValue ?? null
     )
@@ -17,12 +31,19 @@ export const Root = React.forwardRef<any, any>(
       }
     }
 
+    const setOpen = (nextOpen: boolean) => {
+      setOpenState(nextOpen)
+      onOpenChange?.(nextOpen)
+    }
+
     return (
-      <div ref={ref} data-disabled={disabled} {...rest}>
-        {typeof children === "function"
-          ? children({ value: currentValue, onChange: handleChange })
-          : children}
-      </div>
+      <SelectCtx.Provider value={{ open, setOpen }}>
+        <div ref={ref} data-disabled={disabled} {...rest}>
+          {typeof children === "function"
+            ? children({ value: currentValue, onChange: handleChange })
+            : children}
+        </div>
+      </SelectCtx.Provider>
     )
   }
 )
@@ -30,11 +51,18 @@ Root.displayName = "SelectPrimitive.Root"
 
 export const Trigger = React.forwardRef<any, any>(
   ({ asChild, children, ...rest }, ref) => {
+    const { open, setOpen } = React.useContext(SelectCtx)
+    const handlePress = () => setOpen(!open)
+
     if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(children, { ref, ...rest } as any)
+      return React.cloneElement(children, {
+        ref,
+        onPress: handlePress,
+        ...rest
+      } as any)
     }
     return (
-      <button ref={ref} role="button" {...rest}>
+      <button ref={ref} role="button" onClick={handlePress} {...rest}>
         {children}
       </button>
     )
@@ -59,22 +87,20 @@ Value.displayName = "SelectPrimitive.Value"
 export const Portal = ({ children }: any) => <>{children}</>
 Portal.displayName = "SelectPrimitive.Portal"
 
-export const Viewport = React.forwardRef<any, any>(
-  ({ children, ...rest }, ref) => (
-    <div ref={ref} {...rest}>
-      {children}
-    </div>
-  )
-)
-Viewport.displayName = "SelectPrimitive.Viewport"
-
 export const Overlay = React.forwardRef<any, any>(
-  ({ asChild, children, ...rest }, ref) => {
-    if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(children, { ref, ...rest } as any)
+  ({ onPress, closeOnPress = true, children, ...rest }, ref) => {
+    const { setOpen } = React.useContext(SelectCtx)
+    const handlePress = () => {
+      if (closeOnPress) setOpen(false)
+      onPress?.()
     }
     return (
-      <div ref={ref} {...rest}>
+      <div
+        ref={ref}
+        data-testid="select-overlay"
+        onClick={handlePress}
+        {...rest}
+      >
         {children}
       </div>
     )
@@ -82,8 +108,19 @@ export const Overlay = React.forwardRef<any, any>(
 )
 Overlay.displayName = "SelectPrimitive.Overlay"
 
+export const Viewport = React.forwardRef<any, any>(
+  ({ children, ...rest }, ref) => (
+    <div ref={ref} {...rest}>
+      {children}
+    </div>
+  )
+)
+Viewport.displayName = "SelectPrimitive.Viewport"
+
 export const Content = React.forwardRef<any, any>(
   ({ asChild, children, ...rest }, ref) => {
+    const { open } = React.useContext(SelectCtx)
+    if (!open) return null
     if (asChild && React.isValidElement(children)) {
       return React.cloneElement(children, { ref, ...rest } as any)
     }

package/src/components/atoms/Input/InputField.tsx

@@ -13,6 +13,7 @@ import {
   Error as ErrorIcon,
   CheckCircle as SuccessIcon
 } from "@butternutbox/pawprint-icons/core"
+import { resolveFont } from "../../../fonts"
 import { Icon } from "../Icon"
 
 export type InputState = "default" | "error" | "success"
@@ -61,18 +62,24 @@ const StyledInputWrapper = styled(Animated.View)<{
 
 const StyledInput = styled(TextInput)(({ theme }) => {
   const { colour, field } = theme.tokens.components.inputs
-  const placeholderTypography = field.placeholder.default
+  const typography = field.placeholder.default
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  )
+  const fontSize = parseTokenValue(typography.fontSize)
+  const letterSpacing = typography.letterSpacing?.endsWith("%")
+    ? (parseFloat(typography.letterSpacing) / 100) * fontSize
+    : parseFloat(typography.letterSpacing ?? "0")
   return {
     flex: 1,
     minWidth: 0,
     minHeight: 0,
     padding: 0,
     color: colour.field.text.default,
-    fontSize: parseTokenValue(placeholderTypography.fontSize),
-    fontFamily: placeholderTypography.fontFamily,
-    fontWeight: placeholderTypography.fontWeight,
-    lineHeight: parseTokenValue(placeholderTypography.lineHeight),
-    letterSpacing: parseTokenValue(placeholderTypography.letterSpacing),
+    fontFamily,
+    fontSize,
+    letterSpacing,
     // Suppress the browser default focus outline on React Native Web —
     // the focus indicator is rendered on the wrapper instead.
     ...({
@@ -275,3 +282,27 @@ export const InputField = React.forwardRef<TextInput, InputFieldProps>(
 )
 
 InputField.displayName = "Input.Field"
+
+/**
+ * Bare text input with design-system typography and colors applied.
+ * No container, border, or padding — use inside components that provide
+ * their own visual wrapper (e.g. SelectField trigger).
+ */
+export const InputText = React.forwardRef<TextInput, TextInputProps>(
+  ({ placeholderTextColor, ...rest }, ref) => {
+    const theme = useTheme()
+    const { colour } = theme.tokens.components.inputs
+
+    return (
+      <StyledInput
+        ref={ref}
+        placeholderTextColor={
+          placeholderTextColor ?? colour.field.text.placeholder
+        }
+        {...rest}
+      />
+    )
+  }
+)
+
+InputText.displayName = "Input.Text"

package/src/components/atoms/Input/index.ts

@@ -2,7 +2,7 @@ export { Input } from "./Input"
 export type { InputProps } from "./Input"
 export { InputLabel } from "./InputLabel"
 export type { InputLabelProps } from "./InputLabel"
-export { InputField } from "./InputField"
+export { InputField, InputText } from "./InputField"
 export type { InputFieldProps } from "./InputField"
 export { InputDescription } from "./InputDescription"
 export type { InputDescriptionProps } from "./InputDescription"

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

@@ -205,3 +205,41 @@ export const AllVariants = () => (
     />
   </View>
 )
+
+export const WithMinQuantity = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      title="Bulk Recipe Pack"
+      subtext="+£2.50/pouch"
+      showSubtext
+      quantity={5}
+      minQuantity={5}
+      showQuantityPicker
+      showBanner
+      bannerType="info"
+      showBannerIcon={false}
+      banner="Minimum quantity: 5 pouches required"
+      image={placeholderImageUrl}
+    />
+  </View>
+)
+
+export const WithImagePress = () => {
+  const [pressed, setPressed] = React.useState(false)
+  return (
+    <View style={styles.column}>
+      <ProductDisplayCard
+        title="Recipe Name"
+        subtext="+£0.00/pouch"
+        showSubtext
+        quantity={1}
+        showQuantityPicker
+        onImagePress={() => setPressed(true)}
+        showBanner={pressed}
+        bannerType="success"
+        banner="Image pressed!"
+        image={placeholderImageUrl}
+      />
+    </View>
+  )
+}

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ViewProps, Image } from "react-native"
+import { View, ViewProps, Image, Pressable } from "react-native"
 import styled from "@emotion/native"
 import { Typography } from "../../atoms/Typography"
 import { NumberField } from "../../molecules/NumberField"
@@ -17,25 +17,28 @@ export type ProductDisplayCardProps = ViewProps & {
   hideQuantityButtons?: boolean
   incrementDisabled?: boolean
   decrementDisabled?: boolean
+  minQuantity?: number
   image?: string | React.ReactNode
   imageBackgroundColor?: string
   thumbnailWidth?: number
+  onImagePress?: () => void
   banner?: React.ReactNode
   showBanner?: boolean
   bannerType?: "error" | "success" | "warning" | "info"
   showBannerIcon?: boolean
 }
 
-const StyledCardContainer = styled(View)(({ theme }) => {
+const StyledCardContainer = styled(View, {
+  shouldForwardProp: (prop) => prop !== "showBanner"
+})<{ showBanner?: boolean }>(({ theme }) => {
   const { spacing, borderRadius } = theme.tokens.semantics.dimensions
   const { colour } = theme.tokens.semantics
   const spacingMd = parseTokenValue(spacing.md)
   const spacingXl = parseTokenValue(spacing.xl)
+  const radiusMd = parseTokenValue(borderRadius.md)
   return {
     flexDirection: "row",
     width: "100%",
-    // Cap at the Figma mobile card width (can be narrower — responsive).
-    maxWidth: 358,
     // The 148px image sets the baseline height; the card grows if the content
     // is taller (e.g. a long or translated title wrapping to multiple lines)
     // so nothing is clipped.
@@ -48,9 +51,12 @@ const StyledCardContainer = styled(View)(({ theme }) => {
     shadowOpacity: 0.05,
     shadowRadius: spacingXl - 4,
     elevation: 5,
-    borderRadius: parseTokenValue(borderRadius.md),
+    borderRadius: radiusMd,
     overflow: "hidden",
-    zIndex: 1
+    zIndex: 1,
+    // Don't apply negative margin when banner is shown; banner wrapper handles positioning
+    marginBottom: 0,
+    flex: 1
   }
 })
 
@@ -88,12 +94,16 @@ const StyledTextContainer = styled(View)(() => ({
 
 const StyledBannerWrapper = styled(View)(({ theme }) => {
   const { spacing, borderRadius } = theme.tokens.semantics.dimensions
+  const radiusMd = parseTokenValue(borderRadius.md)
+  const spacingMd = parseTokenValue(spacing.md)
   return {
     width: "100%",
-    // Tuck the banner up behind the card by the corner radius so its square top
-    // corners hide under the card's rounded bottom; the rest sits below.
-    marginTop: -parseTokenValue(borderRadius.md),
-    paddingBottom: parseTokenValue(spacing.md)
+    // Tuck the banner up to overlap with card bottom; the 27px notification padding
+    // shows the cream reveal under the card's rounded corners
+    marginTop: -(radiusMd + spacingMd),
+    marginBottom: 0,
+    paddingTop: spacingMd,
+    paddingBottom: spacingMd
   }
 })
 
@@ -166,9 +176,11 @@ export const ProductDisplayCard = React.forwardRef<
       hideQuantityButtons = false,
       incrementDisabled = false,
       decrementDisabled = false,
+      minQuantity = 1,
       image,
       imageBackgroundColor,
       thumbnailWidth,
+      onImagePress,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -178,28 +190,34 @@ export const ProductDisplayCard = React.forwardRef<
     ref
   ) => {
     const handleQuantityChange = (newQuantity: number) => {
-      if (newQuantity >= 1) {
+      if (newQuantity >= minQuantity) {
         onQuantityChange?.(newQuantity)
       }
     }
 
     const cardContent = (
-      <StyledCardContainer ref={ref} {...rest}>
+      <StyledCardContainer
+        ref={ref}
+        showBanner={showBanner && !!banner}
+        {...rest}
+      >
         {image && (
-          <StyledImage
-            imageBackgroundColor={imageBackgroundColor}
-            thumbnailWidth={thumbnailWidth}
-          >
-            {typeof image === "string" ? (
-              <Image
-                source={{ uri: image }}
-                resizeMode="cover"
-                style={{ flex: 1, width: "100%" }}
-              />
-            ) : (
-              image
-            )}
-          </StyledImage>
+          <Pressable disabled={!onImagePress} onPress={onImagePress}>
+            <StyledImage
+              imageBackgroundColor={imageBackgroundColor}
+              thumbnailWidth={thumbnailWidth}
+            >
+              {typeof image === "string" ? (
+                <Image
+                  source={{ uri: image }}
+                  resizeMode="cover"
+                  style={{ flex: 1, width: "100%" }}
+                />
+              ) : (
+                image
+              )}
+            </StyledImage>
+          </Pressable>
         )}
 
         <StyledContentArea>
@@ -228,7 +246,7 @@ export const ProductDisplayCard = React.forwardRef<
                 }}
                 onIncrement={() => handleQuantityChange(quantity + 1)}
                 onDecrement={() => handleQuantityChange(quantity - 1)}
-                min={1}
+                min={minQuantity}
                 accessible
                 accessibilityLabel={`Quantity: ${quantity}`}
                 showIncrementButton={!hideQuantityButtons}

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { View } from "react-native"
+import { View, Text } from "react-native"
 import { ProductListingCard } from "./ProductListingCard"
 import { Badge } from "./Badge"
 import { ThumbsUpFilledPrimary } from "@butternutbox/pawprint-icons/marketing"
@@ -207,3 +207,67 @@ export const WithWasPrice = {
     </View>
   )
 }
+
+export const WithStringImage = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image="https://placehold.co/232x232/E8E8E8/666?text=Product"
+        imageAlt="Product Image"
+        badge={defaultBadge}
+        category="Daily supplements"
+        title="Fish Oil"
+        size="200ml"
+        price="From £7.49"
+        showBadge={true}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}
+
+export const WithCustomComponent = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image={
+          <View
+            style={{
+              flex: 1,
+              backgroundColor: "#F5E6D3",
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
+            <View
+              style={{
+                width: 80,
+                height: 80,
+                backgroundColor: "#D4A574",
+                borderRadius: 40,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <Text style={{ fontSize: 40 }}>🐟</Text>
+            </View>
+          </View>
+        }
+        imageAlt="Custom component"
+        badge={defaultBadge}
+        category="Daily supplements"
+        title="Fish Oil"
+        size="200ml"
+        price="From £7.49"
+        showBadge={true}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}

package/src/components/molecules/ProductListingCard/ProductListingCard.tsx

@@ -12,7 +12,7 @@ import { Badge } from "./Badge"
 import { Grid } from "./Grid"
 
 type ProductListingCardOwnProps = {
-  image?: ImageSourcePropType
+  image?: string | React.ReactNode | ImageSourcePropType
   imageAlt?: string
   badge?: React.ReactNode
   category?: string
@@ -145,11 +145,21 @@ const _ProductListingCard = React.forwardRef<View, ProductListingCardProps>(
         <ImageContainer>
           {image && (
             <View style={{ flex: 1, width: "100%", height: "100%" }}>
-              <StyledImage
-                source={image}
-                accessibilityLabel={imageAlt}
-                accessible
-              />
+              {typeof image === "string" ? (
+                <StyledImage
+                  source={{ uri: image }}
+                  accessibilityLabel={imageAlt}
+                  accessible
+                />
+              ) : React.isValidElement(image) ? (
+                image
+              ) : (
+                <StyledImage
+                  source={image as ImageSourcePropType}
+                  accessibilityLabel={imageAlt}
+                  accessible
+                />
+              )}
             </View>
           )}
           {showBadge && badge && <BadgeContainer>{badge}</BadgeContainer>}

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react"
 import { View, StyleSheet } from "react-native"
-import { PortalHost } from "@rn-primitives/portal"
 import { SelectField, useSelectField } from "."
 import { Typography } from "../../atoms/Typography"
 import { Icon } from "../../atoms/Icon"
@@ -8,10 +7,7 @@ import { Search, Settings, Lock, Info } from "@butternutbox/pawprint-icons/core"
 import type { Option } from "@rn-primitives/select"
 
 const StoryWrapper = ({ children }: { children: React.ReactNode }) => (
-  <>
-    {children}
-    <PortalHost />
-  </>
+  <>{children}</>
 )
 
 export default {
@@ -304,6 +300,115 @@ export const Controlled = () => {
   )
 }
 
+export const Searchable = () => (
+  <StoryWrapper>
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Searchable Select
+        </Typography>
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          description="Type to filter countries"
+          searchable
+          searchPlaceholder="Search countries..."
+        >
+          <SelectField.Item value="au">Australia</SelectField.Item>
+          <SelectField.Item value="br">Brazil</SelectField.Item>
+          <SelectField.Item value="ca">Canada</SelectField.Item>
+          <SelectField.Item value="dk">Denmark</SelectField.Item>
+          <SelectField.Item value="eg">Egypt</SelectField.Item>
+          <SelectField.Item value="fr">France</SelectField.Item>
+          <SelectField.Item value="de">Germany</SelectField.Item>
+          <SelectField.Item value="in">India</SelectField.Item>
+          <SelectField.Item value="jp">Japan</SelectField.Item>
+          <SelectField.Item value="mx">Mexico</SelectField.Item>
+          <SelectField.Item value="nl">Netherlands</SelectField.Item>
+          <SelectField.Item value="nz">New Zealand</SelectField.Item>
+          <SelectField.Item value="no">Norway</SelectField.Item>
+          <SelectField.Item value="pl">Poland</SelectField.Item>
+          <SelectField.Item value="pt">Portugal</SelectField.Item>
+          <SelectField.Item value="es">Spain</SelectField.Item>
+          <SelectField.Item value="se">Sweden</SelectField.Item>
+          <SelectField.Item value="ch">Switzerland</SelectField.Item>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+        </SelectField>
+      </View>
+    </View>
+  </StoryWrapper>
+)
+
+export const SearchableControlled = () => {
+  const [value, setValue] = useState<Option | string | null>(null)
+
+  const displayValue = (() => {
+    if (!value) return "(none)"
+    if (typeof value === "object" && "value" in value) return value.value
+    return String(value)
+  })()
+
+  return (
+    <StoryWrapper>
+      <View style={styles.column}>
+        <View style={styles.section}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            Controlled value: {displayValue}
+          </Typography>
+          <SelectField
+            label="Country"
+            placeholder="Select a country"
+            description="Select a country — the clear button resets the controlled value"
+            searchable
+            searchPlaceholder="Search countries..."
+            value={value}
+            onValueChange={(newValue) => setValue(newValue)}
+          >
+            <SelectField.Item value="au">Australia</SelectField.Item>
+            <SelectField.Item value="ca">Canada</SelectField.Item>
+            <SelectField.Item value="fr">France</SelectField.Item>
+            <SelectField.Item value="de">Germany</SelectField.Item>
+            <SelectField.Item value="jp">Japan</SelectField.Item>
+            <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+            <SelectField.Item value="us">United States</SelectField.Item>
+          </SelectField>
+        </View>
+      </View>
+    </StoryWrapper>
+  )
+}
+
+export const SearchableDefaultPlaceholder = () => (
+  <StoryWrapper>
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Default Search Placeholder
+        </Typography>
+        <SelectField label="Pet breed" placeholder="Select a breed" searchable>
+          <SelectField.Item value="labrador">
+            Labrador Retriever
+          </SelectField.Item>
+          <SelectField.Item value="german-shepherd">
+            German Shepherd
+          </SelectField.Item>
+          <SelectField.Item value="golden-retriever">
+            Golden Retriever
+          </SelectField.Item>
+          <SelectField.Item value="bulldog">Bulldog</SelectField.Item>
+          <SelectField.Item value="poodle">Poodle</SelectField.Item>
+          <SelectField.Item value="beagle">Beagle</SelectField.Item>
+          <SelectField.Item value="rottweiler">Rottweiler</SelectField.Item>
+          <SelectField.Item value="yorkshire-terrier">
+            Yorkshire Terrier
+          </SelectField.Item>
+        </SelectField>
+      </View>
+    </View>
+  </StoryWrapper>
+)
+
 const styles = StyleSheet.create({
   container: {
     width: 320