@butternutbox/pawprint-native 0.15.2 → 0.16.1

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ViewProps } from "react-native"
+import { View, ViewProps, FlexStyle } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 
@@ -10,11 +10,20 @@ type PawprintIllustration = React.ComponentType<{
   height?: number
 }>
 
+type FlexboxProps = {
+  align?: FlexStyle["alignItems"]
+  justify?: FlexStyle["justifyContent"]
+  flexDirection?: FlexStyle["flexDirection"]
+  flexWrap?: FlexStyle["flexWrap"]
+  alignContent?: FlexStyle["alignContent"]
+  alignSelf?: FlexStyle["alignSelf"]
+}
+
 type IllustrationOwnProps = {
   illustration: PawprintIllustration
   size?: IllustrationSize
   "aria-label"?: string
-}
+} & FlexboxProps
 
 type IllustrationProps = IllustrationOwnProps &
   Omit<ViewProps, keyof IllustrationOwnProps>
@@ -23,15 +32,20 @@ const parseTokenValue = (value: string): number => parseFloat(value)
 
 const StyledRoot = styled(View)<{
   illustrationHeight: number
-}>(({ illustrationHeight }) => ({
-  alignItems: "center",
-  justifyContent: "center",
+  flexboxProps: FlexboxProps
+}>(({ illustrationHeight, flexboxProps }) => ({
+  alignItems: flexboxProps.align ?? "center",
+  justifyContent: flexboxProps.justify ?? "center",
+  flexDirection: flexboxProps.flexDirection,
+  flexWrap: flexboxProps.flexWrap,
+  alignContent: flexboxProps.alignContent,
+  alignSelf: flexboxProps.alignSelf,
   flexShrink: 0,
   height: illustrationHeight
 }))
 
 /**
- * Renders a multi-colour SVG illustration with token-based sizing.
+ * Renders a multi-colour SVG illustration with token-based sizing and flexbox alignment.
  *
  * @example
  * ```tsx
@@ -42,7 +56,17 @@ const StyledRoot = styled(View)<{
  * ```
  *
  * @param illustration - **(required)** Illustration component
+<<<<<<< Updated upstream
  * @param size - *(optional)* Size variant: sm (default), lg, xl, xxl, xxxl
+=======
+ * @param size - *(optional)* Size variant: sm (default), lg, xl
+ * @param align - *(optional)* Flexbox alignItems (default: center)
+ * @param justify - *(optional)* Flexbox justifyContent (default: center)
+ * @param flexDirection - *(optional)* Flexbox flex direction
+ * @param flexWrap - *(optional)* Flexbox wrap
+ * @param alignContent - *(optional)* Flexbox alignContent
+ * @param alignSelf - *(optional)* Flexbox alignSelf
+>>>>>>> Stashed changes
  * @param aria-label - *(optional)* Accessible label
  */
 const Illustration = React.forwardRef<View, IllustrationProps>(
@@ -50,6 +74,12 @@ const Illustration = React.forwardRef<View, IllustrationProps>(
     {
       illustration: IllustrationComponent,
       size = "sm",
+      align,
+      justify,
+      flexDirection,
+      flexWrap,
+      alignContent,
+      alignSelf,
       "aria-label": ariaLabel,
       ...rest
     },
@@ -60,10 +90,20 @@ const Illustration = React.forwardRef<View, IllustrationProps>(
       theme.tokens.components.illustrations.sizing.illustrations[size]
     )
 
+    const flexboxProps: FlexboxProps = {
+      align,
+      justify,
+      flexDirection,
+      flexWrap,
+      alignContent,
+      alignSelf
+    }
+
     return (
       <StyledRoot
         ref={ref}
         illustrationHeight={dimension}
+        flexboxProps={flexboxProps}
         accessibilityRole={ariaLabel ? "image" : undefined}
         accessibilityLabel={ariaLabel}
         accessible={!!ariaLabel}
@@ -78,4 +118,9 @@ const Illustration = React.forwardRef<View, IllustrationProps>(
 Illustration.displayName = "Illustration"
 
 export { Illustration }
-export type { IllustrationProps, PawprintIllustration, IllustrationSize }
+export type {
+  IllustrationProps,
+  PawprintIllustration,
+  IllustrationSize,
+  FlexboxProps
+}

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}