@butternutbox/pawprint-native 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@butternutbox/pawprint-tokens": "^0.3.0",
+    "@butternutbox/pawprint-tokens": "^0.4.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",
     "@rn-primitives/avatar": "^1.4.0",

package/src/components/atoms/Button/Button.stories.tsx

@@ -3,6 +3,11 @@ import { View, StyleSheet } from "react-native"
 import { Button } from "./Button"
 import type { ButtonProps } from "./Button"
 import { Typography } from "../Typography"
+import { Icon } from "../Icon"
+import { Check } from "@butternutbox/pawprint-icons/core"
+import { IosShare, Whatsapp } from "@butternutbox/pawprint-icons/marketing"
+
+import { KeyboardDoubleArrowDown } from "@butternutbox/pawprint-icons/core"
 
 export default {
   title: "Atoms/Button",
@@ -118,6 +123,45 @@ export const AllStates = () => (
   </View>
 )
 
+export const WithStartIcon = () => (
+  <View style={styles.column}>
+    {(["sm", "md", "lg"] as const).map((size) => (
+      <View key={size} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {size}
+        </Typography>
+        <View style={styles.row}>
+          <Button
+            size={size}
+            startIcon={<Icon icon={KeyboardDoubleArrowDown} colour="primary" />}
+          >
+            Add
+          </Button>
+          <Button
+            size={size}
+            startIcon={<Icon icon={IosShare} colour="success" />}
+          >
+            Search
+          </Button>
+          <Button
+            size={size}
+            startIcon={<Icon icon={Whatsapp} colour="warning" />}
+          >
+            Settings
+          </Button>
+          <Button
+            size={size}
+            startIcon={<Icon icon={Check} colour="error" />}
+            colour="secondary"
+          >
+            Confirm
+          </Button>
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
 export const FullWidth = () => (
   <View style={styles.column}>
     {(["filled", "outlined", "text"] as const).map((variant) => (

package/src/components/atoms/Icon/Icon.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 
 type IconCategory = "core" | "marketing" | "payments" | "flags"
-type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+type IconSize = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
 type IconColour =
   | "primary"
   | "secondary"

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

@@ -284,14 +284,22 @@ export const NumberFieldInput = React.forwardRef<
               style={{
                 position: "absolute",
                 bottom: 4,
-                width: fieldMinWidth,
+                // Span the full field (not the min-width) so the help text
+                // centres and never wraps into the value when the field is
+                // wider than its min-width (e.g. fullWidth) or the copy is long.
+                left: 0,
+                right: 0,
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center"
               }}
             >
               <Typography
-                token={inputTokens.description.text.default}
+                token={
+                  isLarge
+                    ? tokens.typography.large.secondaryContent
+                    : tokens.typography.small.smallLabel
+                }
                 color={inputTokens.colour.description.default}
               >
                 {inlineHelpText}