@butternutbox/pawprint-native 0.10.10 → 0.11.0

package/package.json

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

package/src/__mocks__/react-native-reanimated.tsx

@@ -1,16 +1,38 @@
 import React from "react"
 
 const AnimatedView = React.forwardRef<HTMLDivElement, Record<string, unknown>>(
-  ({ children, style, ..._rest }, ref) => {
+  (
+    {
+      children,
+      style,
+      accessibilityRole,
+      accessibilityLabel,
+      accessibilityElementsHidden,
+      importantForAccessibility,
+      ..._rest
+    },
+    ref
+  ) => {
     const flatStyle = Array.isArray(style)
       ? Object.assign({}, ...style.filter(Boolean))
       : style
+
+    const domProps: Record<string, unknown> = {}
+    if (accessibilityRole) domProps.role = accessibilityRole
+    if (accessibilityLabel) domProps["aria-label"] = accessibilityLabel
+    if (
+      accessibilityElementsHidden ||
+      importantForAccessibility === "no-hide-descendants"
+    )
+      domProps["aria-hidden"] = true
+
     return (
       <div
         ref={ref}
         style={
           typeof flatStyle === "object" ? (flatStyle as object) : undefined
         }
+        {...domProps}
       >
         {children as React.ReactNode}
       </div>
@@ -35,6 +57,7 @@ export const runOnJS =
     fn(...args)
 
 export const withTiming = <T,>(value: T) => value
+export const withSpring = <T,>(value: T) => value
 
 // Animation builder stub — supports chaining .duration() / .easing() / .delay()
 const createBuilder = () => {
@@ -63,6 +86,17 @@ export const FadeInRight = createBuilder()
 export const FadeOutRight = createBuilder()
 export const ZoomIn = createBuilder()
 export const ZoomOut = createBuilder()
+
+// Keyframe stub — supports chaining .duration() / .delay()
+export class Keyframe {
+  constructor(_definitions: Record<string, unknown>) {}
+  duration() {
+    return this
+  }
+  delay() {
+    return this
+  }
+}
 export class ComplexAnimationBuilder {
   static duration() {
     return new ComplexAnimationBuilder()

package/src/__mocks__/react-native.tsx

@@ -9,6 +9,8 @@ export const View = React.forwardRef<HTMLDivElement, any>(
       accessibilityLabel,
       accessibilityState,
       accessibilityValue,
+      accessibilityElementsHidden,
+      importantForAccessibility,
       accessible: _accessible,
       children,
       style,
@@ -24,6 +26,11 @@ export const View = React.forwardRef<HTMLDivElement, any>(
         accessibilityRole === "adjustable" ? "slider" : accessibilityRole
     }
     if (accessibilityLabel) domProps["aria-label"] = accessibilityLabel
+    if (
+      accessibilityElementsHidden ||
+      importantForAccessibility === "no-hide-descendants"
+    )
+      domProps["aria-hidden"] = true
     if (accessibilityState?.disabled) domProps["aria-disabled"] = true
     if (accessibilityState?.selected) domProps["aria-selected"] = true
     if (accessibilityState?.checked !== undefined)
@@ -90,6 +97,8 @@ export const Pressable = React.forwardRef<HTMLButtonElement, any>(
     if (accessibilityLabel) domProps["aria-label"] = accessibilityLabel
     if (accessibilityState?.disabled) domProps["aria-disabled"] = true
     if (accessibilityState?.selected) domProps["aria-selected"] = true
+    if (accessibilityState?.checked !== undefined)
+      domProps["aria-checked"] = accessibilityState.checked
     if (accessibilityState?.expanded !== undefined)
       domProps["aria-expanded"] = accessibilityState.expanded
     if (accessibilityState?.busy) domProps["aria-busy"] = true

package/src/components/molecules/Checkbox/Checkbox.tsx

@@ -2,7 +2,6 @@ import React from "react"
 import { View, Pressable, PressableProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
-import * as CheckboxPrimitive from "@rn-primitives/checkbox"
 import { Check } from "@butternutbox/pawprint-icons/core"
 import { Icon } from "../../atoms/Icon"
 import { Typography } from "../../atoms/Typography"
@@ -158,126 +157,124 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>(
     const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
     const isChecked = isControlled ? controlledChecked : internalChecked
 
-    const handleCheckedChange = (checked: boolean) => {
+    const handlePress = () => {
+      if (disabled) return
+      const next = !isChecked
       if (!isControlled) {
-        setInternalChecked(checked)
+        setInternalChecked(next)
       }
-      onCheckedChange?.(checked)
+      onCheckedChange?.(next)
     }
 
     const isTile = variant === "tile"
     const controlSize = parseTokenValue(checkbox.size.control.default)
 
+    // A single Pressable owns the tap. The primitive's native build does not
+    // forward `asChild`, so wrapping it would nest a second Pressable that
+    // swallows the press on device — mirror Radio and drive state directly.
     return (
-      <CheckboxPrimitive.Root
-        checked={isChecked}
-        onCheckedChange={handleCheckedChange}
+      <StyledRootPressable
+        ref={ref}
+        onPress={handlePress}
         disabled={disabled}
-        asChild
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: isChecked, disabled }}
+        rootFlexAlign={isTile ? "center" : "flex-start"}
+        rootGap={parseTokenValue(
+          isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
+        )}
+        rootOpacity={
+          disabled ? parseFloat(theme.tokens.primitives.opacity["40"]) : 1
+        }
+        rootPaddingVertical={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.spacing.verticalPadding)
+            : undefined
+        }
+        rootPaddingHorizontal={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.spacing.horizontalPadding)
+            : undefined
+        }
+        rootMaxWidth={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.size.maxWidth)
+            : undefined
+        }
+        rootBgColor={
+          isTile
+            ? isChecked
+              ? checkbox.checkboxTile.colour.background.selected
+              : checkbox.checkboxTile.colour.background.default
+            : undefined
+        }
+        rootBorderWidth={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.borderWidth.default)
+            : undefined
+        }
+        rootBorderColor={
+          isTile
+            ? isChecked
+              ? checkbox.checkboxTile.colour.border.selected
+              : checkbox.checkboxTile.colour.border.default
+            : undefined
+        }
+        rootBorderRadius={
+          isTile
+            ? parseTokenValue(checkbox.checkboxTile.borderRadius.default)
+            : undefined
+        }
+        style={typeof style === "function" ? undefined : style}
+        {...rest}
       >
-        <StyledRootPressable
-          ref={ref}
-          rootFlexAlign={isTile ? "center" : "flex-start"}
-          rootGap={parseTokenValue(
-            isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
-          )}
-          rootOpacity={
-            disabled ? parseFloat(theme.tokens.primitives.opacity["40"]) : 1
-          }
-          rootPaddingVertical={
-            isTile
-              ? parseTokenValue(checkbox.checkboxTile.spacing.verticalPadding)
-              : undefined
-          }
-          rootPaddingHorizontal={
-            isTile
-              ? parseTokenValue(checkbox.checkboxTile.spacing.horizontalPadding)
-              : undefined
-          }
-          rootMaxWidth={
-            isTile
-              ? parseTokenValue(checkbox.checkboxTile.size.maxWidth)
-              : undefined
-          }
-          rootBgColor={
-            isTile
-              ? isChecked
-                ? checkbox.checkboxTile.colour.background.selected
-                : checkbox.checkboxTile.colour.background.default
-              : undefined
+        <StyledControl
+          controlSize={controlSize}
+          controlBorderWidth={parseTokenValue(checkbox.control.border.default)}
+          controlBorderColor={
+            isChecked
+              ? checkbox.colour.background.selected
+              : checkbox.colour.border.default
           }
-          rootBorderWidth={
-            isTile
-              ? parseTokenValue(checkbox.checkboxTile.borderWidth.default)
-              : undefined
+          controlBorderRadius={parseTokenValue(dimensions.borderRadius.xs)}
+          controlBgColor={
+            isChecked ? checkbox.colour.background.selected : "transparent"
           }
-          rootBorderColor={
-            isTile
-              ? isChecked
-                ? checkbox.checkboxTile.colour.border.selected
-                : checkbox.checkboxTile.colour.border.default
-              : undefined
-          }
-          rootBorderRadius={
-            isTile
-              ? parseTokenValue(checkbox.checkboxTile.borderRadius.default)
-              : undefined
-          }
-          style={typeof style === "function" ? undefined : style}
-          {...rest}
         >
-          <StyledControl
-            controlSize={controlSize}
-            controlBorderWidth={parseTokenValue(
-              checkbox.control.border.default
-            )}
-            controlBorderColor={
-              isChecked
-                ? checkbox.colour.background.selected
-                : checkbox.colour.border.default
-            }
-            controlBorderRadius={parseTokenValue(dimensions.borderRadius.xs)}
-            controlBgColor={
-              isChecked ? checkbox.colour.background.selected : "transparent"
-            }
-          >
-            <CheckboxPrimitive.Indicator>
-              <Icon icon={Check} size="xs" colour="alt" />
-            </CheckboxPrimitive.Indicator>
-          </StyledControl>
+          {isChecked && <Icon icon={Check} size="xs" colour="alt" />}
+        </StyledControl>
 
-          <StyledContent
-            contentGap={parseTokenValue(checkbox.spacing.content.gap)}
-          >
-            {label && (
-              <Typography
-                token={checkbox.typography.label}
-                color={checkbox.colour.text.title}
-              >
-                {label}
-              </Typography>
-            )}
-            {subText && (
-              <Typography
-                token={checkbox.typography.subText}
-                color={checkbox.colour.text.subtext}
-              >
-                {subText}
-              </Typography>
-            )}
-          </StyledContent>
-
-          {isTile && illustration && (
-            <StyledIllustration
-              illustrationSize={parseTokenValue(
-                checkbox.checkboxTile.size.illustration.default
-              )}
+        <StyledContent
+          contentGap={parseTokenValue(checkbox.spacing.content.gap)}
+        >
+          {label && (
+            <Typography
+              token={checkbox.typography.label}
+              color={checkbox.colour.text.title}
             >
-              {illustration}
-            </StyledIllustration>
+              {label}
+            </Typography>
           )}
-        </StyledRootPressable>
-      </CheckboxPrimitive.Root>
+          {subText && (
+            <Typography
+              token={checkbox.typography.subText}
+              color={checkbox.colour.text.subtext}
+            >
+              {subText}
+            </Typography>
+          )}
+        </StyledContent>
+
+        {isTile && illustration && (
+          <StyledIllustration
+            illustrationSize={parseTokenValue(
+              checkbox.checkboxTile.size.illustration.default
+            )}
+          >
+            {illustration}
+          </StyledIllustration>
+        )}
+      </StyledRootPressable>
     )
   }
 )

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

@@ -41,7 +41,7 @@ const StyledRoot = styled(View)<{
   fullWidth?: boolean
 }>(({ rootGap, fullWidth }) => ({
   gap: rootGap,
-  ...(fullWidth && { width: "100%" })
+  ...(fullWidth ? { width: "100%" } : { alignItems: "center" })
 }))
 
 const StyledLabelGroup = styled(View)<{
@@ -134,6 +134,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
               <Typography
                 token={typoTokens.label}
                 color={tokens.colour.text.label}
+                align="center"
               >
                 {label}
               </Typography>
@@ -142,6 +143,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
               <Typography
                 token={typoTokens.smallLabel}
                 color={tokens.colour.text.description}
+                align="center"
               >
                 {smallLabel}
               </Typography>
@@ -172,6 +174,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
                 : tokens.typography.small.smallLabel
             }
             color={tokens.colour.text.description}
+            align="center"
           >
             {description}
           </Typography>
@@ -184,6 +187,7 @@ export const NumberField = React.forwardRef<View, NumberFieldProps>(
                 : tokens.typography.small.smallLabel
             }
             color={theme.tokens.components.inputs.colour.description.error}
+            align="center"
           >
             {error}
           </Typography>

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

@@ -0,0 +1,220 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { StackedNotifications } from "./StackedNotifications"
+import type { StackedNotificationItem } from "./StackedNotifications"
+import { Button } from "../../atoms/Button"
+import { Tag } from "../../atoms/Tag"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/StackedNotifications",
+  component: StackedNotifications,
+  parameters: {
+    layout: "fullscreen"
+  },
+  argTypes: {
+    items: {
+      control: "object",
+      description:
+        "Active notifications, oldest first, newest last. Fully controlled."
+    },
+    bottomOffset: {
+      control: "number",
+      description: "Distance from the bottom edge in pixels"
+    }
+  }
+}
+
+// A bounded "screen" so the bottom-pinned stack is visible in the canvas.
+// The component itself is position: absolute; bottom, so it needs a sized,
+// relatively-positioned container to float within.
+const Backdrop = ({
+  label = "Screen content — the notification floats over this, pinned to the bottom.",
+  children
+}: {
+  label?: string
+  children?: React.ReactNode
+}) => (
+  <View style={styles.backdrop}>
+    <Typography variant="body" size="md">
+      {label}
+    </Typography>
+    {children}
+  </View>
+)
+
+// --- Playground ---
+
+const PLAYGROUND_ITEMS: StackedNotificationItem[] = [
+  {
+    id: "chicken",
+    type: "info",
+    message: "Chicken is a common protein — we'll avoid it in future boxes."
+  },
+  {
+    id: "beef",
+    type: "warning",
+    message: "Beef can cause reactions in some dogs. We've flagged it."
+  }
+]
+
+export const Playground = {
+  args: {
+    items: PLAYGROUND_ITEMS
+  },
+  render: (args: React.ComponentProps<typeof StackedNotifications>) => (
+    <Backdrop>
+      <StackedNotifications {...args} />
+    </Backdrop>
+  )
+}
+
+// Stacked (peek)
+
+const STACKED_ITEMS: StackedNotificationItem[] = [
+  {
+    id: "chicken",
+    type: "info",
+    message: "Chicken is a common protein — we'll avoid it in future boxes."
+  },
+  {
+    id: "beef",
+    type: "warning",
+    message: "Beef can cause reactions in some dogs. We've flagged it."
+  },
+  {
+    id: "dairy",
+    type: "info",
+    message: "Dairy selected — noted for your dog's plan."
+  },
+  {
+    id: "wheat",
+    type: "warning",
+    message: "Wheat can trigger reactions. We've flagged it for the vet team."
+  }
+]
+
+export const Stacked = {
+  name: "Stacked (peek)",
+  render: () => (
+    <Backdrop label="Four notifications are queued, but only the front card plus two peeking behind it are shown.">
+      <StackedNotifications items={STACKED_ITEMS} />
+    </Backdrop>
+  )
+}
+
+// --- Variants ---
+
+export const Variants = {
+  name: "Info & Warning",
+  render: () => (
+    <Backdrop>
+      <StackedNotifications
+        items={[
+          {
+            id: "info",
+            type: "info",
+            message: "Info notification — a positive, helpful message."
+          }
+        ]}
+      />
+      <View style={styles.spacer} />
+      <StackedNotifications
+        bottomOffset={120}
+        items={[
+          {
+            id: "warning",
+            type: "warning",
+            message: "Warning notification — a negative, cautionary message."
+          }
+        ]}
+      />
+    </Backdrop>
+  )
+}
+
+// --- Interactive: mimics the allergens wizard screen ---
+
+const ALLERGENS = [
+  { id: "chicken", label: "Chicken", type: "info" as const },
+  { id: "beef", label: "Beef", type: "warning" as const },
+  { id: "dairy", label: "Dairy", type: "info" as const },
+  { id: "wheat", label: "Wheat", type: "warning" as const }
+]
+
+const MESSAGES: Record<string, string> = {
+  chicken: "Chicken selected — we'll leave it out of future boxes.",
+  beef: "Beef can trigger reactions. We've flagged it for the vet team.",
+  dairy: "Dairy selected — noted for your dog's plan.",
+  wheat: "Wheat can trigger reactions. We've flagged it for the vet team."
+}
+
+export const Interactive = {
+  name: "Interactive (allergens)",
+  render: () => {
+    // Ordered list of selected ids — insertion order drives the LIFO stack.
+    const [selected, setSelected] = React.useState<string[]>([])
+
+    const toggle = (id: string) =>
+      setSelected((prev) =>
+        prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+      )
+
+    const items: StackedNotificationItem[] = selected.map((id) => {
+      const allergen = ALLERGENS.find((a) => a.id === id)
+      return {
+        id,
+        type: allergen?.type ?? "info",
+        message: MESSAGES[id]
+      }
+    })
+
+    return (
+      <Backdrop label="Tap an allergen to select it (adds a notification). Tap again to deselect (removes it and re-raises on reselect). Use the ✕ to dismiss and reveal the next.">
+        <View style={styles.chips}>
+          {ALLERGENS.map((allergen) => (
+            <Button
+              key={allergen.id}
+              size="sm"
+              variant={selected.includes(allergen.id) ? "filled" : "outlined"}
+              onPress={() => toggle(allergen.id)}
+            >
+              {allergen.label}
+            </Button>
+          ))}
+        </View>
+        <View style={styles.chips}>
+          {selected.map((id) => (
+            <Tag key={id}>{id}</Tag>
+          ))}
+        </View>
+        <StackedNotifications
+          items={items}
+          onDismiss={(id) => console.warn("dismissed", id)}
+        />
+      </Backdrop>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: "relative",
+    height: 360,
+    padding: 16,
+    gap: 16,
+    backgroundColor: "#f4f2ee",
+    borderWidth: 1,
+    borderColor: "#dcd7cf",
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  chips: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  spacer: {
+    height: 24
+  }
+})