@butternutbox/pawprint-native 0.10.6 → 0.10.8

package/package.json

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

@@ -129,34 +129,36 @@ export type DatePickerProps = DatePickerOwnProps &
   Omit<ViewProps, keyof DatePickerOwnProps>
 
 const StyledContainer = styled(View)<{
-  containerGap: number
   containerMaxWidth: number
-}>(({ containerGap, containerMaxWidth }) => ({
+}>(({ containerMaxWidth }) => ({
   flexDirection: "column",
-  gap: containerGap,
+  // Fill the parent by default (capped by maxWidth) so consumers don't need a
+  // wrapper. Overridable via the `style` prop.
+  width: "100%",
   maxWidth: containerMaxWidth
 }))
 
-const StyledMonthHeader = styled(View)<{ headerGap: number }>(
-  ({ headerGap }) => ({
+const StyledMonthHeader = styled(View)<{ headerGap: number; datesGap: number }>(
+  ({ headerGap, datesGap }) => ({
     flexDirection: "row",
     alignItems: "center",
-    gap: headerGap
+    gap: headerGap,
+    // Gap between the month header and the dates grid.
+    marginBottom: datesGap
   })
 )
 
-const StyledWeekRow = styled(View)({
-  flexDirection: "row"
-})
+const StyledWeekRow = styled(View)<{ weekGap: number }>(({ weekGap }) => ({
+  flexDirection: "row",
+  // Gap between the week-day header and the month header.
+  marginBottom: weekGap
+}))
 
-const StyledWeekCell = styled(View)<{ cellHeight: number }>(
-  ({ cellHeight }) => ({
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    height: cellHeight
-  })
-)
+const StyledWeekCell = styled(View)({
+  flex: 1,
+  alignItems: "center",
+  justifyContent: "center"
+})
 
 const StyledDatesGrid = styled(View)<{ rowGap: number }>(({ rowGap }) => ({
   flexDirection: "column",
@@ -280,7 +282,8 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
     const [slideDir, setSlideDir] = useState<"forward" | "backward">("forward")
 
     const {
-      containerGap,
+      weekGap,
+      datesGap,
       containerMaxWidth,
       headerGap,
       cellHeight,
@@ -291,7 +294,10 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
       rowGap
     } = useMemo(
       () => ({
-        containerGap: parseTokenValue(datePicker.spacing.gap),
+        // Gap between the week-day header and the month header.
+        weekGap: parseTokenValue(datePicker.spacing.gap),
+        // Gap between the month header and the dates grid.
+        datesGap: parseTokenValue(theme.tokens.semantics.dimensions.spacing.md),
         containerMaxWidth: parseTokenValue(dt.size.width) * 7,
         headerGap: parseTokenValue(datePicker.month.spacing.gap),
         cellHeight: parseTokenValue(dt.size.height),
@@ -301,7 +307,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
         disabledOpacity: parseTokenValue(dt.opacity.disabled),
         rowGap: parseTokenValue(datePicker.dates.spacing.gap)
       }),
-      [datePicker, dt]
+      [datePicker, dt, theme]
     )
 
     const resolvedGetDateState = useCallback(
@@ -423,14 +429,13 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
     return (
       <StyledContainer
         ref={ref}
-        containerGap={containerGap}
         containerMaxWidth={containerMaxWidth}
         {...rest}
       >
         {showWeekHeader && (
-          <StyledWeekRow accessibilityElementsHidden>
+          <StyledWeekRow weekGap={weekGap} accessibilityElementsHidden>
             {weekDayLabels.map((label) => (
-              <StyledWeekCell key={label} cellHeight={cellHeight}>
+              <StyledWeekCell key={label}>
                 <Typography
                   token={datePicker.week.typography}
                   align="center"
@@ -443,12 +448,12 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
           </StyledWeekRow>
         )}
 
-        <StyledMonthHeader headerGap={headerGap}>
+        <StyledMonthHeader headerGap={headerGap} datesGap={datesGap}>
           <View style={{ opacity: showPrevControl ? 1 : 0 }}>
             <IconButton
               icon={KeyboardArrowLeft}
               variant="filled"
-              size="sm"
+              size="md"
               colour="primary"
               aria-label="Previous month"
               onPress={showPrevControl ? handlePrevMonth : undefined}
@@ -470,7 +475,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
             <IconButton
               icon={KeyboardArrowRight}
               variant="filled"
-              size="sm"
+              size="md"
               colour="primary"
               aria-label="Next month"
               onPress={showNextControl ? handleNextMonth : undefined}

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

@@ -321,6 +321,116 @@ export const WithTopContent = () => {
   )
 }
 
+/**
+ * Exercises the panel re-measuring its height when body content changes.
+ * Use "Add"/"Remove" to grow and shrink the content: the drawer should re-fit
+ * its height each time, and once the content exceeds ~90% of the screen it
+ * should cap and the body should scroll instead of growing further.
+ */
+export const DynamicContent = () => {
+  const [count, setCount] = useState(1)
+
+  return (
+    <View style={styles.container}>
+      <Drawer.Root defaultOpen>
+        <Drawer.Trigger>
+          <Button variant="filled" colour="primary">
+            Open resizable drawer
+          </Button>
+        </Drawer.Trigger>
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content>
+            <Drawer.Header variant="titleAndText">
+              <Drawer.Title>Resizable content</Drawer.Title>
+              <Drawer.Description>{`${count} paragraph${
+                count === 1 ? "" : "s"
+              }`}</Drawer.Description>
+              <Drawer.Close />
+            </Drawer.Header>
+            <Drawer.Body>
+              {Array.from({ length: count }, (_, i) => (
+                <Typography
+                  key={i}
+                >{`Paragraph ${i + 1}: ${bodyText}`}</Typography>
+              ))}
+            </Drawer.Body>
+            <Drawer.Footer>
+              <View style={styles.row}>
+                <Button
+                  variant="filled"
+                  colour="primary"
+                  onPress={() => setCount((c) => c + 1)}
+                >
+                  Add
+                </Button>
+                <Button
+                  variant="outlined"
+                  colour="secondary"
+                  onPress={() => setCount((c) => Math.max(0, c - 1))}
+                >
+                  Remove
+                </Button>
+              </View>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </View>
+  )
+}
+
+/**
+ * Simulates async content loading: the drawer opens compact with a loading
+ * message, then re-fits taller once the "loaded" content arrives. Tap "Reload"
+ * to replay.
+ */
+export const AsyncContent = () => {
+  const [loaded, setLoaded] = useState(false)
+
+  const load = () => {
+    setLoaded(false)
+    setTimeout(() => setLoaded(true), 1200)
+  }
+
+  return (
+    <View style={styles.container}>
+      <Drawer.Root onOpenChange={(open) => open && load()}>
+        <Drawer.Trigger>
+          <Button variant="filled" colour="primary">
+            Open async drawer
+          </Button>
+        </Drawer.Trigger>
+        <Drawer.Portal>
+          <Drawer.Overlay />
+          <Drawer.Content>
+            <Drawer.Header variant="titleAndText">
+              <Drawer.Title>Delivery details</Drawer.Title>
+              <Drawer.Close />
+            </Drawer.Header>
+            <Drawer.Body>
+              {loaded ? (
+                Array.from({ length: 5 }, (_, i) => (
+                  <Typography
+                    key={i}
+                  >{`Detail ${i + 1}: ${bodyText}`}</Typography>
+                ))
+              ) : (
+                <Typography>Loading…</Typography>
+              )}
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Button variant="filled" colour="primary" onPress={load}>
+                Reload
+              </Button>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     padding: 16

package/src/components/molecules/Drawer/DrawerBody.tsx

@@ -1,9 +1,14 @@
-import React from "react"
-import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
+import React, { useCallback } from "react"
+import {
+  type LayoutChangeEvent,
+  ScrollView,
+  ScrollViewProps
+} from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
 import { useDrawerFooterContext } from "./DrawerFooterContext"
+import { useDrawerMeasureContext } from "./DrawerMeasureContext"
 
 export type DrawerBodyProps = ScrollViewProps
 
@@ -13,21 +18,22 @@ const StyledScrollView = styled(ScrollView)<{
   bodyPaddingHorizontal: number
   bodyPaddingRight: number
   bodyGap: number
-  bodyMaxHeight: number
   bodyPaddingBottom: number
 }>(
   ({
     bodyPaddingHorizontal,
     bodyPaddingRight,
     bodyGap,
-    bodyMaxHeight,
     bodyPaddingBottom
   }) => ({
+    // flex: 1 fills the bounded panel so the ScrollView can scroll. The panel
+    // (DrawerContent) is the single height authority — the body must NOT set
+    // its own maxHeight, or it would cap independently of the panel and corrupt
+    // the panel's chrome measurement.
     flex: 1,
     paddingLeft: bodyPaddingHorizontal,
     paddingRight: bodyPaddingRight,
     gap: bodyGap,
-    maxHeight: bodyMaxHeight,
     paddingBottom: bodyPaddingBottom
   })
 )
@@ -37,19 +43,45 @@ const StyledScrollView = styled(ScrollView)<{
  * between the header and footer.
  */
 export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
-  ({ children, contentContainerStyle, ...props }, ref) => {
+  (
+    {
+      children,
+      contentContainerStyle,
+      onLayout,
+      onContentSizeChange,
+      ...props
+    },
+    ref
+  ) => {
     const theme = useTheme()
     const { spacing } = theme.tokens.components.drawer
     const { buttons } = theme.tokens.components
     const { content } = spacing
     const headerContext = useDrawerHeaderContext()
     const footerContext = useDrawerFooterContext()
-    const { height: windowHeight } = useWindowDimensions()
+    const measureContext = useDrawerMeasureContext()
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
     const topPadding = parseTokenValue(content.slot.verticalPadding)
-    const bodyMaxHeight = windowHeight - 300
+
+    // Report the ScrollView's frame and content heights so DrawerContent can
+    // re-fit the panel when the body content changes.
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        measureContext?.setBodyFrameHeight(event.nativeEvent.layout.height)
+        onLayout?.(event)
+      },
+      [measureContext, onLayout]
+    )
+
+    const handleContentSizeChange = useCallback(
+      (width: number, height: number) => {
+        measureContext?.setBodyContentHeight(height)
+        onContentSizeChange?.(width, height)
+      },
+      [measureContext, onContentSizeChange]
+    )
 
     // When there's no header the close button floats in the top-right corner.
     // Reserve space on the right so body content doesn't slide under it.
@@ -69,8 +101,9 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
         bodyGap={gap}
-        bodyMaxHeight={bodyMaxHeight}
         bodyPaddingBottom={bodyPaddingBottom}
+        onLayout={handleLayout}
+        onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={[
           {
             gap,