@butternutbox/pawprint-native 0.8.0 → 0.10.0

package/package.json

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

@@ -3,7 +3,8 @@ import { View, StyleSheet } from "react-native"
 import { ProductDisplayCard } from "./ProductDisplayCard"
 import type { ProductDisplayCardProps } from "./ProductDisplayCard"
 
-const placeholderImageUrl = "https://placeholder.co/100x100?text=Recipe"
+const placeholderImageUrl =
+  "https://placehold.co/148x148/EEE/31343C?font=oswald&text=product"
 
 const styles = StyleSheet.create({
   column: { flexDirection: "column", gap: 24, padding: 16 }
@@ -13,11 +14,6 @@ export default {
   title: "Molecules/ProductDisplayCard",
   component: ProductDisplayCard,
   argTypes: {
-    device: {
-      control: { type: "select" },
-      options: ["desktop", "mobile"],
-      description: "Device variant affecting sizing and typography"
-    },
     title: {
       control: { type: "text" },
       description: "Product title"
@@ -38,10 +34,6 @@ export default {
       control: { type: "boolean" },
       description: "Show/hide quantity picker"
     },
-    showImageQuantityBadge: {
-      control: { type: "boolean" },
-      description: "Show/hide quantity badge overlay on image"
-    },
     disableQuantityButtons: {
       control: { type: "boolean" },
       description: "Disable quantity buttons"
@@ -50,14 +42,6 @@ export default {
       control: { type: "boolean" },
       description: "Hide quantity buttons"
     },
-    showIncrementButton: {
-      control: { type: "boolean" },
-      description: "Show/hide increment button"
-    },
-    showDecrementButton: {
-      control: { type: "boolean" },
-      description: "Show/hide decrement button"
-    },
     incrementDisabled: {
       control: { type: "boolean" },
       description: "Disable increment button"
@@ -100,7 +84,6 @@ export const Playground = (args: ProductDisplayCardProps) => (
   </View>
 )
 Playground.args = {
-  device: "mobile",
   title: "Recipe Name",
   subtext: "+£0.00/pouch",
   showSubtext: true,
@@ -127,20 +110,6 @@ export const Default = () => (
   </View>
 )
 
-export const Desktop = () => (
-  <View style={styles.column}>
-    <ProductDisplayCard
-      title="Recipe Name"
-      subtext="+£0.00/pouch"
-      showSubtext
-      quantity={1}
-      showQuantityPicker
-      showBanner={false}
-      image={placeholderImageUrl}
-    />
-  </View>
-)
-
 export const Mobile = () => (
   <View style={styles.column}>
     <ProductDisplayCard
@@ -202,32 +171,6 @@ export const NoSubtext = () => (
   </View>
 )
 
-export const WithImageQuantityBadge = () => (
-  <View style={styles.column}>
-    <ProductDisplayCard
-      title="Gobble Gobble Turkey"
-      subtext="+£0.50/pouch"
-      showSubtext
-      quantity={4}
-      showQuantityPicker={false}
-      showImageQuantityBadge
-      showBanner={false}
-      image={placeholderImageUrl}
-    />
-
-    <ProductDisplayCard
-      title="Salmon Delight"
-      subtext="+£0.25/pouch"
-      showSubtext
-      quantity={2}
-      showQuantityPicker
-      showImageQuantityBadge
-      showBanner={false}
-      image={placeholderImageUrl}
-    />
-  </View>
-)
-
 export const AllVariants = () => (
   <View style={styles.column}>
     <ProductDisplayCard
@@ -263,27 +206,40 @@ export const AllVariants = () => (
   </View>
 )
 
-export const Borderless = () => (
+export const WithMinQuantity = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      title="Recipe Name"
-      subtext="+£0.00/pouch"
+      title="Bulk Recipe Pack"
+      subtext="+£2.50/pouch"
       showSubtext
-      quantity={1}
+      quantity={5}
+      minQuantity={5}
       showQuantityPicker
-      borderless
-      image={placeholderImageUrl}
-    />
-
-    <ProductDisplayCard
-      title="Premium Recipe"
-      subtext="+£0.50/pouch"
-      showSubtext
-      quantity={2}
-      showQuantityPicker
-      showImageQuantityBadge
-      borderless
+      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.test.tsx

@@ -95,13 +95,7 @@ describe("ProductDisplayCard (Native)", () => {
     expect(screen.queryByText("Test Banner")).toBeFalsy()
   })
 
-  it("renders with desktop device variant by default", () => {
-    renderWithTheme(<ProductDisplayCard title="Test Product" />)
-
-    expect(screen.getByText("Test Product")).toBeTruthy()
-  })
-
-  it("renders with mobile device variant when specified", () => {
+  it("renders as a mobile card", () => {
     renderWithTheme(<ProductDisplayCard title="Test Product" />)
 
     expect(screen.getByText("Test Product")).toBeTruthy()