@butternutbox/pawprint-native 0.5.1 → 0.7.0

package/package.json

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

package/src/components/molecules/ButtonDock/ButtonDock.tsx

@@ -22,12 +22,14 @@ const StyledDockRoot = styled(View)<{
   dockBorderTopWidth: number
   dockBorderTopColor: string
   dockPaddingVertical: number
+  dockPaddingHorizontal: number
 }>(
   ({
     dockBgColor,
     dockBorderTopWidth,
     dockBorderTopColor,
-    dockPaddingVertical
+    dockPaddingVertical,
+    dockPaddingHorizontal
   }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -35,7 +37,8 @@ const StyledDockRoot = styled(View)<{
     backgroundColor: dockBgColor,
     borderTopWidth: dockBorderTopWidth,
     borderTopColor: dockBorderTopColor,
-    paddingVertical: dockPaddingVertical
+    paddingVertical: dockPaddingVertical,
+    paddingHorizontal: dockPaddingHorizontal
   })
 )
 
@@ -51,7 +54,7 @@ const StyledStackedInner = styled(View)<{ innerGap: number }>(
 const StyledButtonGroup = styled(View)<{
   groupDirection: "column" | "row"
   groupAlign: "stretch" | "center"
-  groupJustify: "center" | "space-around"
+  groupJustify: "center" | "space-between"
   groupGap: number
 }>(({ groupDirection, groupAlign, groupJustify, groupGap }) => ({
   flexDirection: groupDirection,
@@ -105,6 +108,9 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
         dockPaddingVertical={parseTokenValue(
           buttonDock.spacing[variant].mobile.topPadding
         )}
+        dockPaddingHorizontal={parseTokenValue(
+          buttonDock.spacing[variant].mobile.horizontalPadding
+        )}
         {...rest}
       >
         {isStacked ? (
@@ -134,7 +140,7 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
           <StyledButtonGroup
             groupDirection="row"
             groupAlign="center"
-            groupJustify="space-around"
+            groupJustify="space-between"
             groupGap={groupGap}
           >
             {children}

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

@@ -0,0 +1,98 @@
+import React, { useState } from "react"
+import { View } from "react-native"
+import { NativeSelectPicker } from "./NativeSelectPicker"
+
+export default {
+  title: "Molecules/NativeSelectPicker",
+  component: NativeSelectPicker,
+  argTypes: {
+    disabled: {
+      control: "boolean"
+    },
+    hideIcon: {
+      control: "boolean"
+    }
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <View style={{ padding: 20, flex: 1, justifyContent: "center" }}>
+        <Story />
+      </View>
+    )
+  ]
+}
+
+const BANK_OPTIONS = [
+  { label: "ABN Amro", value: "abn_amro" },
+  { label: "ASN Bank", value: "asn_bank" },
+  { label: "bunq B.V.", value: "bunq" },
+  { label: "ING Bank", value: "ing" },
+  { label: "Knab", value: "knab" },
+  { label: "Rabobank", value: "rabobank" }
+]
+
+export const Basic = () => {
+  const [value, setValue] = useState<string | number | null>(null)
+  return (
+    <NativeSelectPicker
+      items={BANK_OPTIONS}
+      placeholder={{ label: "Select a bank" }}
+      value={value}
+      onValueChange={setValue}
+    />
+  )
+}
+
+export const WithSelectedValue = () => {
+  const [value, setValue] = useState<string | number | null>("ing")
+  return (
+    <NativeSelectPicker
+      items={BANK_OPTIONS}
+      placeholder={{ label: "Select a bank" }}
+      value={value}
+      onValueChange={setValue}
+    />
+  )
+}
+
+export const Disabled = () => {
+  const [value, setValue] = useState<string | number | null>(null)
+  return (
+    <NativeSelectPicker
+      items={BANK_OPTIONS}
+      placeholder={{ label: "Select a bank" }}
+      value={value}
+      onValueChange={setValue}
+      disabled
+    />
+  )
+}
+
+export const HideIcon = () => {
+  const [value, setValue] = useState<string | number | null>(null)
+  return (
+    <NativeSelectPicker
+      items={BANK_OPTIONS}
+      placeholder={{ label: "Select a bank" }}
+      value={value}
+      onValueChange={setValue}
+      hideIcon
+    />
+  )
+}
+
+export const NumericValues = () => {
+  const [value, setValue] = useState<string | number | null>(null)
+  return (
+    <NativeSelectPicker
+      items={[
+        { label: "Option 1", value: 1 },
+        { label: "Option 2", value: 2 },
+        { label: "Option 3", value: 3 }
+      ]}
+      placeholder={{ label: "Select an option" }}
+      value={value}
+      onValueChange={setValue}
+    />
+  )
+}

package/src/components/molecules/NativeSelectPicker/NativeSelectPicker.styled.ts

@@ -0,0 +1,127 @@
+import styled from "@emotion/native"
+import { View, Text } from "react-native"
+import Animated from "react-native-reanimated"
+import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
+
+type AndroidOptionTextProps = {
+  isSelected: boolean
+}
+
+const themeTokens = DEFAULT_THEME_OPTIONS.tokens
+const { components, semantics } = themeTokens
+const inputTokens = components.inputs
+const { dimensions } = semantics
+
+const parseSize = (value: string): number => {
+  return parseInt(value.replace("px", ""), 10)
+}
+
+const Wrapper = styled(View)({
+  borderWidth: parseSize(inputTokens.borderWidth.field.selected),
+  borderColor: inputTokens.colour.field.border.selected,
+  borderRadius: parseSize(inputTokens.borderRadius.field.default),
+  backgroundColor: inputTokens.colour.field.background.default,
+  paddingHorizontal: parseSize(inputTokens.spacing.field.horizontalPadding),
+  paddingVertical: parseSize(inputTokens.spacing.field.verticalPadding),
+  height: parseSize(inputTokens.size.field.height),
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between"
+})
+
+const SelectIcon = styled(Animated.View)({
+  position: "absolute",
+  right: 0,
+  marginRight: 0
+})
+
+const InputText = styled(Text)({
+  color: inputTokens.colour.field.text.default,
+  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+  flex: 1
+})
+
+const PlaceholderText = styled(Text)({
+  color: inputTokens.colour.field.text.placeholder,
+  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+  flex: 1
+})
+
+const ModalOverlay = styled(View)({
+  flex: 1,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  justifyContent: "flex-end"
+})
+
+const AndroidDialog = styled(View)({
+  backgroundColor: inputTokens.colour.field.background.default,
+  borderTopLeftRadius: parseSize(dimensions.borderRadius.lg),
+  borderTopRightRadius: parseSize(dimensions.borderRadius.lg),
+  maxHeight: "80%",
+  minHeight: "40%",
+  paddingTop: parseSize(dimensions.spacing.md),
+  paddingBottom: parseSize(dimensions.spacing.xl),
+  paddingHorizontal: parseSize(dimensions.spacing.md)
+})
+
+const DialogTitle = styled(Text)({
+  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+  fontWeight: inputTokens.text.label.fontWeight,
+  color: inputTokens.colour.field.text.default,
+  marginBottom: parseSize(dimensions.spacing.md),
+  marginLeft: parseSize(dimensions.spacing.xs)
+})
+
+const AndroidOptionRow = styled(View)({
+  flexDirection: "row",
+  alignItems: "center",
+  paddingVertical: parseSize(dimensions.spacing.md),
+  paddingHorizontal: parseSize(dimensions.spacing.sm),
+  borderBottomWidth: parseSize(dimensions.borderWidth.sm),
+  borderBottomColor: themeTokens.primitives.colour.brand.brown[2]
+})
+
+const RadioOuter = styled(View)({
+  width: parseSize(dimensions.spacing.lg),
+  height: parseSize(dimensions.spacing.lg),
+  borderRadius: parseSize(dimensions.spacing.lg) / 2,
+  borderWidth: parseSize(dimensions.borderWidth.md),
+  borderColor: inputTokens.colour.field.border.selected,
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: parseSize(dimensions.spacing.sm)
+})
+
+const RadioInner = styled(View)({
+  width: parseSize(dimensions.spacing.md) / 2,
+  height: parseSize(dimensions.spacing.md) / 2,
+  borderRadius: parseSize(dimensions.spacing.md) / 4,
+  backgroundColor: inputTokens.colour.field.border.selected
+})
+
+const AndroidOptionText = styled(Text)<AndroidOptionTextProps>(
+  ({ isSelected }) => ({
+    fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+    fontWeight: isSelected
+      ? inputTokens.text.label.fontWeight
+      : inputTokens.field.placeholder.default.fontWeight,
+    color: inputTokens.colour.field.text.default,
+    flex: 1
+  })
+)
+
+export {
+  Wrapper,
+  SelectIcon,
+  InputText,
+  PlaceholderText,
+  ModalOverlay,
+  AndroidDialog,
+  DialogTitle,
+  AndroidOptionRow,
+  RadioOuter,
+  RadioInner,
+  AndroidOptionText
+}

package/src/components/molecules/NativeSelectPicker/NativeSelectPicker.tsx

@@ -0,0 +1,250 @@
+import React, { useCallback, useMemo, useState } from "react"
+import {
+  Platform,
+  ActionSheetIOS,
+  Modal,
+  TouchableOpacity,
+  FlatList,
+  TouchableWithoutFeedback,
+  View,
+  ViewProps
+} from "react-native"
+import { useSharedValue, useAnimatedStyle } from "react-native-reanimated"
+import { KeyboardArrowDown } from "@butternutbox/pawprint-icons/core"
+import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
+
+import * as S from "./NativeSelectPicker.styled"
+
+const themeTokens = DEFAULT_THEME_OPTIONS.tokens
+const { components, semantics } = themeTokens
+const inputTokens = components.inputs
+const { dimensions } = semantics
+
+const parseSize = (value: string): number => {
+  return parseInt(value.replace("px", ""), 10)
+}
+
+export type NativeSelectPickerItem = {
+  label: string
+  value: string | number
+  key?: string | number
+}
+
+export type NativeSelectPickerProps = ViewProps & {
+  items: NativeSelectPickerItem[]
+  value?: string | number | null
+  placeholder?: {
+    label?: string
+    value?: string | number
+  }
+  onValueChange: (value: string | number) => void
+  disabled?: boolean
+  hideIcon?: boolean
+}
+
+type IconAnimation = {
+  iconAnimationStyles: {
+    transform: Array<{ rotate: string }>
+  }
+}
+
+const useIconAnimation = (): IconAnimation => {
+  const iconRotation = useSharedValue(0)
+
+  const iconAnimationStyles = useAnimatedStyle(() => {
+    "worklet"
+    return {
+      transform: [{ rotate: `${iconRotation.value}deg` }]
+    }
+  })
+
+  return {
+    iconAnimationStyles
+  }
+}
+
+/**
+ * NativeSelectPicker is a native UI dropdown component that uses:
+ * - ActionSheetIOS on iOS (native system picker)
+ * - Modal with FlatList on Android
+ *
+ * @example
+ * ```tsx
+ * <NativeSelectPicker
+ *   items={[
+ *     { label: "Option 1", value: "opt1" },
+ *     { label: "Option 2", value: "opt2" }
+ *   ]}
+ *   placeholder={{ label: "Select an option" }}
+ *   value={selectedValue}
+ *   onValueChange={setSelectedValue}
+ * />
+ * ```
+ */
+const NativeSelectPicker = React.forwardRef<View, NativeSelectPickerProps>(
+  (
+    {
+      items,
+      value,
+      placeholder,
+      onValueChange,
+      disabled = false,
+      hideIcon = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const { iconAnimationStyles } = useIconAnimation()
+
+    const hasPlaceholder =
+      placeholder &&
+      Object.keys(placeholder).length > 0 &&
+      placeholder.label !== undefined
+
+    const allItems = useMemo(() => {
+      if (hasPlaceholder) {
+        return [
+          {
+            label: placeholder.label!,
+            value: placeholder.value ?? "",
+            key: "__placeholder__"
+          },
+          ...items
+        ]
+      }
+      return items
+    }, [items, hasPlaceholder, placeholder])
+
+    const selectedItem = allItems.find((item) => item.value === value)
+    const displayLabel =
+      selectedItem?.label ?? (hasPlaceholder ? placeholder.label! : "")
+
+    const handleOpenIOS = useCallback(() => {
+      if (disabled) return
+
+      const options = [...allItems.map((item) => item.label), "Cancel"]
+      const cancelButtonIndex = options.length - 1
+
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options,
+          cancelButtonIndex
+        },
+        (buttonIndex) => {
+          if (buttonIndex !== cancelButtonIndex) {
+            onValueChange(allItems[buttonIndex].value)
+          }
+        }
+      )
+    }, [disabled, allItems, onValueChange])
+
+    const handleOpenAndroid = useCallback(() => {
+      if (!disabled) {
+        setIsOpen(true)
+      }
+    }, [disabled])
+
+    const handleClose = useCallback(() => {
+      setIsOpen(false)
+    }, [])
+
+    const handleSelect = useCallback(
+      (itemValue: string | number) => {
+        onValueChange(itemValue)
+        setIsOpen(false)
+      },
+      [onValueChange]
+    )
+
+    return (
+      <S.Wrapper ref={ref} {...rest}>
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={Platform.OS === "ios" ? handleOpenIOS : handleOpenAndroid}
+          disabled={disabled}
+          hitSlop={{
+            top: parseSize(dimensions.spacing.md),
+            right: parseSize(dimensions.spacing.md),
+            bottom: parseSize(dimensions.spacing.md),
+            left: parseSize(dimensions.spacing.md)
+          }}
+          accessibilityRole="button"
+          style={{ flexDirection: "row", alignItems: "center" }}
+        >
+          <S.InputText numberOfLines={1}>
+            {displayLabel || (
+              <S.PlaceholderText>
+                {placeholder?.label || "Select"}
+              </S.PlaceholderText>
+            )}
+          </S.InputText>
+          {!hideIcon && (
+            <S.SelectIcon style={[iconAnimationStyles]}>
+              <KeyboardArrowDown
+                width={parseSize(dimensions.spacing.xl)}
+                height={parseSize(dimensions.spacing.xl)}
+                color={inputTokens.colour.field.text.default}
+              />
+            </S.SelectIcon>
+          )}
+        </TouchableOpacity>
+
+        {Platform.OS === "android" && (
+          <Modal
+            visible={isOpen}
+            transparent
+            animationType="fade"
+            onRequestClose={handleClose}
+          >
+            <TouchableWithoutFeedback
+              accessibilityRole="button"
+              onPress={handleClose}
+            >
+              <S.ModalOverlay>
+                <TouchableWithoutFeedback>
+                  <S.AndroidDialog>
+                    <S.DialogTitle>{"Select an option"}</S.DialogTitle>
+                    <FlatList
+                      data={allItems}
+                      keyExtractor={(item, index) =>
+                        item.key?.toString() ?? `${item.value}-${index}`
+                      }
+                      renderItem={({ item }) => {
+                        const isSelected = item.value === value
+
+                        return (
+                          <TouchableOpacity
+                            onPress={() => handleSelect(item.value)}
+                            activeOpacity={0.7}
+                            accessibilityRole="button"
+                          >
+                            <S.AndroidOptionRow>
+                              <S.RadioOuter>
+                                {isSelected && <S.RadioInner />}
+                              </S.RadioOuter>
+                              <S.AndroidOptionText isSelected={isSelected}>
+                                {item.label}
+                              </S.AndroidOptionText>
+                            </S.AndroidOptionRow>
+                          </TouchableOpacity>
+                        )
+                      }}
+                      style={{
+                        maxHeight: parseSize(dimensions.spacing["8xl"])
+                      }}
+                    />
+                  </S.AndroidDialog>
+                </TouchableWithoutFeedback>
+              </S.ModalOverlay>
+            </TouchableWithoutFeedback>
+          </Modal>
+        )}
+      </S.Wrapper>
+    )
+  }
+)
+
+NativeSelectPicker.displayName = "NativeSelectPicker"
+
+export { NativeSelectPicker }

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

@@ -0,0 +1,5 @@
+export { NativeSelectPicker } from "./NativeSelectPicker"
+export type {
+  NativeSelectPickerProps,
+  NativeSelectPickerItem
+} from "./NativeSelectPicker"

package/src/components/molecules/Notification/Notification.tsx

@@ -29,7 +29,7 @@ type InlineVariantProps = BaseProps & {
   title?: string
   onClose?: () => void
   size?: never
-  link?: never
+  link?: { label: string; href?: string; onPress?: () => void }
 }
 
 type ToastVariantProps = BaseProps & {
@@ -45,7 +45,7 @@ type SystemVariantProps = BaseProps & {
   size?: NotificationSize
   title?: never
   onClose?: never
-  link?: never
+  link?: { label: string; href?: string; onPress?: () => void }
 }
 
 type NotificationOwnProps =
@@ -207,7 +207,7 @@ const StyledCloseButton = styled(Pressable)({
  * variants — inline (within content flow), toast (floating overlay), and
  * system (full-width banner) — each with four severity types.
  *
- * Note: Unlike the web version, toast link uses `onPress` callback instead
+ * Note: Unlike the web version, links use `onPress` callback instead
  * of `href` for navigation. The `href` prop is also available and opens
  * the URL via `Linking`.
  *
@@ -216,7 +216,7 @@ const StyledCloseButton = styled(Pressable)({
  * @param {boolean} [showIcon=true] - Whether to show the status icon.
  * @param {string} [title] - Optional headline (inline variant only).
  * @param {() => void} [onClose] - Close callback (inline and toast variants).
- * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (toast variant only).
+ * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (all variants).
  * @param {"sm" | "lg"} [size="sm"] - Size variant (system variant only).
  * @param {React.ReactNode} children - The notification body text.
  *
@@ -286,12 +286,24 @@ export const Notification = React.forwardRef<View, NotificationProps>(
               aria-label={type}
             />
           )}
-          <Typography
-            token={systemNotifications.notifications.typography.default}
-            color={systemNotifications.notification.colour.text.default}
-          >
-            {children}
-          </Typography>
+          <View style={{ flexDirection: "column", gap: 8, flex: 1 }}>
+            <Typography
+              token={systemNotifications.notifications.typography.default}
+              color={systemNotifications.notification.colour.text.default}
+            >
+              {children}
+            </Typography>
+            {link && (
+              <Link
+                href={link.href}
+                onPress={link.onPress}
+                weight="semiBold"
+                size="md"
+              >
+                {link.label}
+              </Link>
+            )}
+          </View>
         </StyledSystemRoot>
       )
     }
@@ -408,6 +420,20 @@ export const Notification = React.forwardRef<View, NotificationProps>(
               </Typography>
             </StyledInlineCopy>
           </StyledCopyRow>
+          {link && (
+            <StyledLinkWrapper
+              linkPaddingLeft={parseTokenValue(content.copy.spacing.gap)}
+            >
+              <Link
+                href={link.href}
+                onPress={link.onPress}
+                weight="semiBold"
+                size="md"
+              >
+                {link.label}
+              </Link>
+            </StyledLinkWrapper>
+          )}
         </StyledContents>
         {onClose && (
           <StyledCloseButton

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

@@ -3,6 +3,7 @@ import { View, StyleSheet } from "react-native"
 import { RadioGroup } from "./RadioGroup"
 import type { RadioGroupProps } from "./RadioGroup"
 import { Typography } from "../../atoms/Typography"
+import { StarRate } from "@butternutbox/pawprint-icons/core"
 
 export default {
   title: "Molecules/Radio",
@@ -95,6 +96,51 @@ export const TileVariant = () => (
   </View>
 )
 
+export const WithTag = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Tile with tag
+      </Typography>
+      <RadioGroup name="tag-tile" defaultValue="1">
+        <RadioGroup.Radio
+          variant="tile"
+          value="1"
+          label="1 pouch over 2 days"
+          subText="400g pouches"
+          tag={{ children: "Save up to £12.20 per box" }}
+        />
+        <RadioGroup.Radio
+          variant="tile"
+          value="2"
+          label="1 pouch per day"
+          subText="200g pouches"
+        />
+      </RadioGroup>
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Tag variants & icon
+      </Typography>
+      <RadioGroup name="tag-variants" defaultValue="1">
+        <RadioGroup.Radio
+          value="1"
+          label="Most popular"
+          subText="Recommended for most dogs"
+          tag={{ children: "Best value", variant: "promo", icon: StarRate }}
+        />
+        <RadioGroup.Radio
+          value="2"
+          label="Flexible plan"
+          subText="Change anytime"
+          tag={{ children: "New", variant: "success" }}
+        />
+      </RadioGroup>
+    </View>
+  </View>
+)
+
 export const States = () => (
   <View style={styles.column}>
     <View style={styles.section}>