@butternutbox/pawprint-native 0.15.2 → 0.16.1

package/dist/index.d.cts

@@ -8,7 +8,7 @@ import React from 'react';
 import * as _emotion_react from '@emotion/react';
 import { Theme } from '@emotion/react';
 import * as react_native from 'react-native';
-import { View, ViewProps, TextProps, Text, PressableProps, TextInputProps, TextInput, ImageSourcePropType, ScrollViewProps } from 'react-native';
+import { View, ViewProps, TextProps, Text, PressableProps, FlexStyle, TextInputProps, TextInput, ImageSourcePropType, ScrollViewProps } from 'react-native';
 import * as react_native_reanimated from 'react-native-reanimated';
 import { FadeIn, FadeOut, FadeInUp, FadeOutUp, FadeInDown, FadeOutDown, ComplexAnimationBuilder, BaseAnimationBuilder, EntryExitAnimationFunction, FadeInRight, FadeOutRight, FadeInLeft, FadeOutLeft } from 'react-native-reanimated';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -422,14 +422,22 @@ type PawprintIllustration$2 = React.ComponentType<{
     width?: number;
     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$2;
     size?: IllustrationSize;
     "aria-label"?: string;
-};
+} & FlexboxProps;
 type IllustrationProps = IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps>;
 /**
- * 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
@@ -440,10 +448,24 @@ type IllustrationProps = IllustrationOwnProps & Omit<ViewProps, keyof Illustrati
  * ```
  *
  * @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
  */
-declare const Illustration: React.ForwardRefExoticComponent<IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps> & React.RefAttributes<View>>;
+declare const Illustration: React.ForwardRefExoticComponent<{
+    illustration: PawprintIllustration$2;
+    size?: IllustrationSize;
+    "aria-label"?: string;
+} & FlexboxProps & Omit<ViewProps, "aria-label" | "size" | "illustration" | keyof FlexboxProps> & React.RefAttributes<View>>;
 
 type InputState = "default" | "error" | "success";
 type InputFieldOwnProps = {

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import React from 'react';
 import * as _emotion_react from '@emotion/react';
 import { Theme } from '@emotion/react';
 import * as react_native from 'react-native';
-import { View, ViewProps, TextProps, Text, PressableProps, TextInputProps, TextInput, ImageSourcePropType, ScrollViewProps } from 'react-native';
+import { View, ViewProps, TextProps, Text, PressableProps, FlexStyle, TextInputProps, TextInput, ImageSourcePropType, ScrollViewProps } from 'react-native';
 import * as react_native_reanimated from 'react-native-reanimated';
 import { FadeIn, FadeOut, FadeInUp, FadeOutUp, FadeInDown, FadeOutDown, ComplexAnimationBuilder, BaseAnimationBuilder, EntryExitAnimationFunction, FadeInRight, FadeOutRight, FadeInLeft, FadeOutLeft } from 'react-native-reanimated';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -422,14 +422,22 @@ type PawprintIllustration$2 = React.ComponentType<{
     width?: number;
     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$2;
     size?: IllustrationSize;
     "aria-label"?: string;
-};
+} & FlexboxProps;
 type IllustrationProps = IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps>;
 /**
- * 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
@@ -440,10 +448,24 @@ type IllustrationProps = IllustrationOwnProps & Omit<ViewProps, keyof Illustrati
  * ```
  *
  * @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
  */
-declare const Illustration: React.ForwardRefExoticComponent<IllustrationOwnProps & Omit<ViewProps, keyof IllustrationOwnProps> & React.RefAttributes<View>>;
+declare const Illustration: React.ForwardRefExoticComponent<{
+    illustration: PawprintIllustration$2;
+    size?: IllustrationSize;
+    "aria-label"?: string;
+} & FlexboxProps & Omit<ViewProps, "aria-label" | "size" | "illustration" | keyof FlexboxProps> & React.RefAttributes<View>>;
 
 type InputState = "default" | "error" | "success";
 type InputFieldOwnProps = {

package/dist/index.js

@@ -1287,32 +1287,60 @@ var IconButton = React66.forwardRef(
 );
 IconButton.displayName = "IconButton";
 var parseTokenValue11 = (value) => parseFloat(value);
-var StyledRoot2 = styled51(View)(({ illustrationHeight }) => ({
-  alignItems: "center",
-  justifyContent: "center",
-  flexShrink: 0,
-  height: illustrationHeight
-}));
+var StyledRoot2 = styled51(View)(({ illustrationHeight, flexboxProps }) => {
+  var _a, _b;
+  return {
+    alignItems: (_a = flexboxProps.align) != null ? _a : "center",
+    justifyContent: (_b = flexboxProps.justify) != null ? _b : "center",
+    flexDirection: flexboxProps.flexDirection,
+    flexWrap: flexboxProps.flexWrap,
+    alignContent: flexboxProps.alignContent,
+    alignSelf: flexboxProps.alignSelf,
+    flexShrink: 0,
+    height: illustrationHeight
+  };
+});
 var Illustration = React66.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       illustration: IllustrationComponent,
       size = "sm",
+      align,
+      justify,
+      flexDirection,
+      flexWrap,
+      alignContent,
+      alignSelf,
       "aria-label": ariaLabel
     } = _b, rest = __objRest(_b, [
       "illustration",
       "size",
+      "align",
+      "justify",
+      "flexDirection",
+      "flexWrap",
+      "alignContent",
+      "alignSelf",
       "aria-label"
     ]);
     const theme2 = useTheme();
     const dimension = parseTokenValue11(
       theme2.tokens.components.illustrations.sizing.illustrations[size]
     );
+    const flexboxProps = {
+      align,
+      justify,
+      flexDirection,
+      flexWrap,
+      alignContent,
+      alignSelf
+    };
     return /* @__PURE__ */ jsx(
       StyledRoot2,
       __spreadProps(__spreadValues({
         ref,
         illustrationHeight: dimension,
+        flexboxProps,
         accessibilityRole: ariaLabel ? "image" : void 0,
         accessibilityLabel: ariaLabel,
         accessible: !!ariaLabel
@@ -7091,7 +7119,11 @@ var NumberFieldInput = React66.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"
@@ -7099,7 +7131,7 @@ var NumberFieldInput = React66.forwardRef(
                 children: /* @__PURE__ */ jsx(
                   Typography,
                   {
-                    token: inputTokens3.description.text.default,
+                    token: isLarge ? tokens3.typography.large.secondaryContent : tokens3.typography.small.smallLabel,
                     color: inputTokens3.colour.description.default,
                     children: inlineHelpText
                   }