@butternutbox/pawprint-native 0.10.6 → 0.10.7

package/package.json

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

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

@@ -10,6 +10,7 @@ import * as poses from "@butternutbox/pawprint-illustrations/poses"
 import * as usps from "@butternutbox/pawprint-illustrations/usps"
 import * as breeds from "@butternutbox/pawprint-illustrations/breeds"
 import * as breedSizes from "@butternutbox/pawprint-illustrations/breed-sizes"
+import * as traits from "@butternutbox/pawprint-illustrations/traits"
 
 function isComponent(value: unknown): value is PawprintIllustration {
   if (typeof value === "function") return true
@@ -21,7 +22,8 @@ const categorised: Record<string, Record<string, unknown>> = {
   poses,
   usps,
   breeds,
-  "breed-sizes": breedSizes
+  "breed-sizes": breedSizes,
+  traits
 }
 
 const illustrationMap: Record<string, PawprintIllustration> = {}

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

@@ -26,6 +26,7 @@ type InputFieldOwnProps = {
   hideStateIcons?: boolean
   containerWidth?: number
   containerHeight?: number
+  hasInlineHelp?: boolean
 }
 
 export type InputFieldProps = InputFieldOwnProps &
@@ -60,7 +61,10 @@ const StyledInputWrapper = styled(Animated.View)<{
   }
 })
 
-const StyledInput = styled(TextInput)(({ theme }) => {
+const StyledInput = styled(TextInput)<{ hasInlineHelp?: boolean }>(({
+  theme,
+  hasInlineHelp
+}) => {
   const { colour, field } = theme.tokens.components.inputs
   const typography = field.placeholder.default
   const { fontFamily } = resolveFont(
@@ -71,6 +75,7 @@ const StyledInput = styled(TextInput)(({ theme }) => {
   const letterSpacing = typography.letterSpacing?.endsWith("%")
     ? (parseFloat(typography.letterSpacing) / 100) * fontSize
     : parseFloat(typography.letterSpacing ?? "0")
+
   return {
     flex: 1,
     minWidth: 0,
@@ -80,6 +85,7 @@ const StyledInput = styled(TextInput)(({ theme }) => {
     fontFamily,
     fontSize,
     letterSpacing,
+    ...(hasInlineHelp ? { position: "relative", top: -8 } : {}),
     // Suppress the browser default focus outline on React Native Web —
     // the focus indicator is rendered on the wrapper instead.
     ...({
@@ -120,6 +126,7 @@ export const InputField = React.forwardRef<TextInput, InputFieldProps>(
       hideStateIcons,
       containerWidth,
       containerHeight,
+      hasInlineHelp,
       style,
       editable,
       onFocus,
@@ -270,6 +277,7 @@ export const InputField = React.forwardRef<TextInput, InputFieldProps>(
             editable={editable}
             onFocus={handleFocus}
             onBlur={handleBlur}
+            hasInlineHelp={hasInlineHelp}
             {...rest}
           />
           {trailingIcon && <StyledIconSlot>{trailingIcon}</StyledIconSlot>}

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

@@ -31,6 +31,10 @@ export default {
     fieldText: {
       control: { type: "text" },
       description: "Unit label shown to the right of the input (e.g. kg, lbs)"
+    },
+    inlineHelpText: {
+      control: { type: "text" },
+      description: "Help text displayed below the input field"
     }
   }
 }
@@ -155,6 +159,24 @@ export const CustomStateValidationWithSuccess = () => {
   )
 }
 
+export const WithInlineHelpText = () => (
+  <View style={styles.column}>
+    <NumberInput
+      label="Daily amount"
+      placeholder="0"
+      inlineHelpText="~ 840 kcals"
+      description="Help text"
+    />
+    <NumberInput
+      label="Quantity"
+      placeholder="0"
+      inlineHelpText="per serving"
+      fieldText="portions"
+      description="Additional context"
+    />
+  </View>
+)
+
 export const Controlled = () => {
   const [value, setValue] = React.useState("")
 

package/src/components/atoms/NumberInput/NumberInput.tsx

@@ -13,6 +13,7 @@ type NumberInputOwnProps = Pick<
   "label" | "description" | "error" | "state" | "optionalText" | "onValueChange"
 > & {
   fieldText?: string
+  inlineHelpText?: string
 }
 
 export type NumberInputProps = NumberInputOwnProps &
@@ -60,7 +61,8 @@ const StyledRoot = styled(View)(({ theme }) => {
  * </NumberInput.Root>
  *
  * @param {string} [label] - Label text (props API)
- * @param {string} [description] - Description/help text (props API)
+ * @param {string} [description] - Description/help text below the field (props API)
+ * @param {string} [inlineHelpText] - Help text displayed below the input field (props API)
  * @param {string} [error] - Error message to display (props API, does not affect visual state - use state prop for that)
  * @param {InputState} [state] - Visual state of the input: 'default', 'error', or 'success' (props API)
  * @param {string} [optionalText] - Optional text to display next to label (props API)
@@ -77,6 +79,7 @@ const NumberInputRoot = React.forwardRef<View, NumberInputProps>(
       optionalText,
       onValueChange,
       fieldText,
+      inlineHelpText,
       children,
       ...inputProps
     },
@@ -97,6 +100,7 @@ const NumberInputRoot = React.forwardRef<View, NumberInputProps>(
           state={state}
           onChangeText={onValueChange}
           fieldText={fieldText}
+          inlineHelpText={inlineHelpText}
           {...inputProps}
         />
         {description && (

package/src/components/atoms/NumberInput/NumberInputField.tsx

@@ -21,8 +21,16 @@ const StyledFieldTextWrapper = styled(View)({
   justifyContent: "center"
 })
 
+const StyledInputContainer = styled(View)<{
+  hasInlineHelp?: boolean
+}>(({ hasInlineHelp }) => ({
+  flexDirection: "column",
+  gap: hasInlineHelp ? 2 : 0
+}))
+
 type NumberInputFieldOwnProps = {
   fieldText?: string
+  inlineHelpText?: string
 }
 
 export type NumberInputFieldProps = NumberInputFieldOwnProps &
@@ -36,7 +44,7 @@ export type NumberInputFieldProps = NumberInputFieldOwnProps &
 export const NumberInputField = React.forwardRef<
   TextInput,
   NumberInputFieldProps
->(({ fieldText, ...props }, ref) => {
+>(({ fieldText, inlineHelpText, ...props }, ref) => {
   const theme = useTheme()
   const { colour, description } = theme.tokens.components.inputs
   const fieldSize = parseTokenValue(
@@ -48,30 +56,85 @@ export const NumberInputField = React.forwardRef<
       keyboardType="numeric"
       hideStateIcons
       containerWidth={fieldSize}
-      containerHeight={fieldSize}
+      containerHeight={inlineHelpText ? undefined : fieldSize}
+      hasInlineHelp={!!inlineHelpText}
       ref={ref}
       style={{ textAlign: "center" }}
       {...props}
     />
   )
 
-  if (!fieldText) {
-    return inputElement
-  }
-
-  return (
-    <StyledFieldGroup>
-      {inputElement}
-      <StyledFieldTextWrapper>
-        <Typography
-          token={description.text.default}
-          color={colour.description.default}
+  const fieldContent =
+    inlineHelpText && fieldText ? (
+      <StyledFieldGroup>
+        <StyledInputContainer hasInlineHelp>
+          {inputElement}
+          <View
+            style={{
+              position: "absolute",
+              bottom: 4,
+              left: 0,
+              width: fieldSize,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
+            <Typography
+              token={description.text.default}
+              color={colour.description.default}
+            >
+              {inlineHelpText}
+            </Typography>
+          </View>
+        </StyledInputContainer>
+        <StyledFieldTextWrapper>
+          <Typography
+            token={description.text.default}
+            color={colour.description.default}
+          >
+            {fieldText}
+          </Typography>
+        </StyledFieldTextWrapper>
+      </StyledFieldGroup>
+    ) : fieldText ? (
+      <StyledFieldGroup>
+        {inputElement}
+        <StyledFieldTextWrapper>
+          <Typography
+            token={description.text.default}
+            color={colour.description.default}
+          >
+            {fieldText}
+          </Typography>
+        </StyledFieldTextWrapper>
+      </StyledFieldGroup>
+    ) : inlineHelpText ? (
+      <StyledInputContainer hasInlineHelp>
+        {inputElement}
+        <View
+          style={{
+            position: "absolute",
+            bottom: 4,
+            width: fieldSize,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          }}
         >
-          {fieldText}
-        </Typography>
-      </StyledFieldTextWrapper>
-    </StyledFieldGroup>
-  )
+          <Typography
+            token={description.text.default}
+            color={colour.description.default}
+          >
+            {inlineHelpText}
+          </Typography>
+        </View>
+      </StyledInputContainer>
+    ) : (
+      inputElement
+    )
+
+  return fieldContent
 })
 
 NumberInputField.displayName = "NumberInput.Field"

package/src/components/atoms/Typography/Typography.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { screen } from "@testing-library/react"
 import { describe, it, expect } from "vitest"
-import { renderWithTheme } from "../../../test-utils"
+import { renderWithTheme, theme } from "../../../test-utils"
 import { Typography } from "./Typography"
 
 describe("Typography", () => {
@@ -64,7 +64,7 @@ describe("Typography", () => {
             fontSize: "16",
             lineHeight: "24"
           }}
-          color="#000000"
+          color={theme.tokens.semantics.colour.text.primary}
         >
           Token text
         </Typography>

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

@@ -25,6 +25,10 @@ export default {
       control: { type: "text" },
       description: "Help text displayed below the field"
     },
+    inlineHelpText: {
+      control: { type: "text" },
+      description: "Help text displayed inside the input field"
+    },
     error: {
       control: { type: "text" },
       description: "Error message when state is error"
@@ -221,6 +225,25 @@ export const FullWidth = () => {
   )
 }
 
+export const WithInlineHelpText = () => {
+  const [value, setValue] = useState(12)
+
+  return (
+    <View style={styles.section}>
+      <NumberField
+        label="Daily amount"
+        size="lg"
+        inlineHelpText="~ 840 kcals"
+        description="Help text"
+        value={String(value)}
+        onChangeText={(t) => setValue(Number(t) || 0)}
+        onIncrement={() => setValue((v) => v + 1)}
+        onDecrement={() => setValue((v) => Math.max(0, v - 1))}
+      />
+    </View>
+  )
+}
+
 export const Playground = {
   args: {
     size: "lg",

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

@@ -5,6 +5,7 @@ import { useTheme } from "@emotion/react"
 import { IconButton } from "../../atoms/IconButton"
 import { Add, Remove } from "@butternutbox/pawprint-icons/core"
 import { resolveFont } from "../../../fonts"
+import { Typography } from "../../atoms/Typography"
 
 type NumberFieldSize = "sm" | "lg"
 
@@ -21,6 +22,7 @@ type NumberFieldInputOwnProps = {
   decrementDisabled?: boolean
   min?: number
   max?: number
+  inlineHelpText?: string
 }
 
 export type NumberFieldInputProps = NumberFieldInputOwnProps &
@@ -48,6 +50,7 @@ const StyledFieldWrapper = styled(View)<{
   }) => ({
     alignItems: "center",
     justifyContent: "center",
+    position: "relative",
     width: fullWidth ? "100%" : fieldMinWidth,
     minWidth: fieldMinWidth,
     height: fieldHeight,
@@ -79,19 +82,29 @@ const StyledTextInput = styled(TextInput)<{
   inputFontFamily: string
   inputFontWeight?: FontWeight
   inputFontSize: number
-}>(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => ({
-  textAlign: "center" as const,
-  outlineStyle: "none" as unknown as undefined,
-  padding: 0,
-  minWidth: 0,
-  minHeight: 0,
-  width: "100%",
-  height: "100%",
-  color: inputColor,
-  fontFamily: inputFontFamily,
-  ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
-  fontSize: inputFontSize
-}))
+  hasInlineHelp?: boolean
+}>(
+  ({
+    inputColor,
+    inputFontFamily,
+    inputFontWeight,
+    inputFontSize,
+    hasInlineHelp
+  }) => ({
+    textAlign: "center" as const,
+    outlineStyle: "none" as unknown as undefined,
+    padding: 0,
+    minWidth: 0,
+    minHeight: 0,
+    width: "100%",
+    height: "100%",
+    color: inputColor,
+    fontFamily: inputFontFamily,
+    ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
+    fontSize: inputFontSize,
+    ...(hasInlineHelp ? { position: "relative", top: -8 } : {})
+  })
+)
 
 const StyledRow = styled(View)<{
   rowGap: number
@@ -106,6 +119,8 @@ const StyledRow = styled(View)<{
  * Renders decrement button, centered numeric input, increment button,
  * and optional side text (e.g. "kg").
  *
+ * @param {string} [inlineHelpText] - Help text displayed inside the input field at the bottom
+ *
  * Border states:
  * - default: `colour.field.border.default`
  * - focused: `colour.field.border.selected`
@@ -130,6 +145,7 @@ export const NumberFieldInput = React.forwardRef<
       decrementDisabled = false,
       min,
       max,
+      inlineHelpText,
       style,
       onFocus,
       onBlur,
@@ -252,6 +268,7 @@ export const NumberFieldInput = React.forwardRef<
                 : undefined
             }
             inputFontSize={parseTokenValue(typographyToken.fontSize)}
+            hasInlineHelp={!!inlineHelpText}
             keyboardType="numeric"
             editable={!disabled}
             onFocus={handleFocus}
@@ -262,6 +279,25 @@ export const NumberFieldInput = React.forwardRef<
             style={style}
             {...rest}
           />
+          {inlineHelpText && (
+            <View
+              style={{
+                position: "absolute",
+                bottom: 4,
+                width: fieldMinWidth,
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <Typography
+                token={inputTokens.description.text.default}
+                color={inputTokens.colour.description.default}
+              >
+                {inlineHelpText}
+              </Typography>
+            </View>
+          )}
         </StyledFieldWrapper>
         {showIncrementButton && (
           <IconButton