@butternutbox/pawprint-native 0.10.6 → 0.10.7

package/dist/index.d.cts

@@ -429,6 +429,7 @@ type InputFieldOwnProps = {
     hideStateIcons?: boolean;
     containerWidth?: number;
     containerHeight?: number;
+    hasInlineHelp?: boolean;
 };
 type InputFieldProps = InputFieldOwnProps & Omit<TextInputProps, keyof InputFieldOwnProps>;
 /**
@@ -573,6 +574,7 @@ declare function registerLogo(brand: LogoBrand, variant: LogoVariant, component:
 
 type NumberInputFieldOwnProps = {
     fieldText?: string;
+    inlineHelpText?: string;
 };
 type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps>;
 /**
@@ -580,10 +582,11 @@ type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, ke
  * Renders a centered number input sized to `numberField.size.large.height`.
  * When fieldText is provided, wraps input + text in a horizontal group.
  */
-declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, "fieldText"> & React.RefAttributes<TextInput>>;
+declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps> & React.RefAttributes<TextInput>>;
 
 type NumberInputOwnProps = Pick<InputProps, "label" | "description" | "error" | "state" | "optionalText" | "onValueChange"> & {
     fieldText?: string;
+    inlineHelpText?: string;
 };
 type NumberInputProps = NumberInputOwnProps & Omit<InputFieldProps, keyof NumberInputOwnProps> & Omit<ViewProps, keyof NumberInputOwnProps>;
 declare const StyledRoot$5: _emotion_native.StyledComponent<ViewProps & {
@@ -1145,6 +1148,7 @@ type NumberFieldInputOwnProps = {
     decrementDisabled?: boolean;
     min?: number;
     max?: number;
+    inlineHelpText?: string;
 };
 type NumberFieldInputProps = NumberFieldInputOwnProps & Omit<TextInputProps, keyof NumberFieldInputOwnProps>;
 

package/dist/index.d.ts

@@ -429,6 +429,7 @@ type InputFieldOwnProps = {
     hideStateIcons?: boolean;
     containerWidth?: number;
     containerHeight?: number;
+    hasInlineHelp?: boolean;
 };
 type InputFieldProps = InputFieldOwnProps & Omit<TextInputProps, keyof InputFieldOwnProps>;
 /**
@@ -573,6 +574,7 @@ declare function registerLogo(brand: LogoBrand, variant: LogoVariant, component:
 
 type NumberInputFieldOwnProps = {
     fieldText?: string;
+    inlineHelpText?: string;
 };
 type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps>;
 /**
@@ -580,10 +582,11 @@ type NumberInputFieldProps = NumberInputFieldOwnProps & Omit<InputFieldProps, ke
  * Renders a centered number input sized to `numberField.size.large.height`.
  * When fieldText is provided, wraps input + text in a horizontal group.
  */
-declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, "fieldText"> & React.RefAttributes<TextInput>>;
+declare const NumberInputField: React.ForwardRefExoticComponent<NumberInputFieldOwnProps & Omit<InputFieldProps, keyof NumberInputFieldOwnProps> & React.RefAttributes<TextInput>>;
 
 type NumberInputOwnProps = Pick<InputProps, "label" | "description" | "error" | "state" | "optionalText" | "onValueChange"> & {
     fieldText?: string;
+    inlineHelpText?: string;
 };
 type NumberInputProps = NumberInputOwnProps & Omit<InputFieldProps, keyof NumberInputOwnProps> & Omit<ViewProps, keyof NumberInputOwnProps>;
 declare const StyledRoot$5: _emotion_native.StyledComponent<ViewProps & {
@@ -1145,6 +1148,7 @@ type NumberFieldInputOwnProps = {
     decrementDisabled?: boolean;
     min?: number;
     max?: number;
+    inlineHelpText?: string;
 };
 type NumberFieldInputProps = NumberFieldInputOwnProps & Omit<TextInputProps, keyof NumberFieldInputOwnProps>;
 

package/dist/index.js

@@ -4798,7 +4798,10 @@ var StyledInputWrapper = styled50(Animated.View)(({ theme: theme2, isDisabled, c
     flexShrink: containerWidth !== void 0 ? 0 : void 0
   };
 });
-var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
+var StyledInput = styled50(TextInput)(({
+  theme: theme2,
+  hasInlineHelp
+}) => {
   var _a, _b;
   const { colour, field } = theme2.tokens.components.inputs;
   const typography = field.placeholder.default;
@@ -4808,7 +4811,7 @@ var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
   );
   const fontSize = parseTokenValue12(typography.fontSize);
   const letterSpacing = ((_a = typography.letterSpacing) == null ? void 0 : _a.endsWith("%")) ? parseFloat(typography.letterSpacing) / 100 * fontSize : parseFloat((_b = typography.letterSpacing) != null ? _b : "0");
-  return __spreadValues({
+  return __spreadValues(__spreadValues({
     flex: 1,
     minWidth: 0,
     minHeight: 0,
@@ -4817,7 +4820,7 @@ var StyledInput = styled50(TextInput)(({ theme: theme2 }) => {
     fontFamily,
     fontSize,
     letterSpacing
-  }, {
+  }, hasInlineHelp ? { position: "relative", top: -8 } : {}), {
     outlineStyle: "none",
     outlineWidth: 0,
     outlineColor: "transparent"
@@ -4842,6 +4845,7 @@ var InputField = React65.forwardRef(
       hideStateIcons,
       containerWidth,
       containerHeight,
+      hasInlineHelp,
       style,
       editable,
       onFocus,
@@ -4854,6 +4858,7 @@ var InputField = React65.forwardRef(
       "hideStateIcons",
       "containerWidth",
       "containerHeight",
+      "hasInlineHelp",
       "style",
       "editable",
       "onFocus",
@@ -4976,7 +4981,8 @@ var InputField = React65.forwardRef(
               placeholderTextColor: colour.field.text.placeholder,
               editable,
               onFocus: handleFocus,
-              onBlur: handleBlur
+              onBlur: handleBlur,
+              hasInlineHelp
             }, rest)
           ),
           trailingIcon && /* @__PURE__ */ jsx(StyledIconSlot, { children: trailingIcon }),
@@ -7727,8 +7733,12 @@ var StyledFieldTextWrapper = styled50(View)({
   flexShrink: 0,
   justifyContent: "center"
 });
+var StyledInputContainer = styled50(View)(({ hasInlineHelp }) => ({
+  flexDirection: "column",
+  gap: hasInlineHelp ? 2 : 0
+}));
 var NumberInputField = React65.forwardRef((_a, ref) => {
-  var _b = _a, { fieldText } = _b, props = __objRest(_b, ["fieldText"]);
+  var _b = _a, { fieldText, inlineHelpText } = _b, props = __objRest(_b, ["fieldText", "inlineHelpText"]);
   const theme2 = useTheme();
   const { colour, description } = theme2.tokens.components.inputs;
   const fieldSize = parseTokenValue14(
@@ -7740,15 +7750,47 @@ var NumberInputField = React65.forwardRef((_a, ref) => {
       keyboardType: "numeric",
       hideStateIcons: true,
       containerWidth: fieldSize,
-      containerHeight: fieldSize,
+      containerHeight: inlineHelpText ? void 0 : fieldSize,
+      hasInlineHelp: !!inlineHelpText,
       ref,
       style: { textAlign: "center" }
     }, props)
   );
-  if (!fieldText) {
-    return inputElement;
-  }
-  return /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
+  const fieldContent = inlineHelpText && fieldText ? /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
+    /* @__PURE__ */ jsxs(StyledInputContainer, { hasInlineHelp: true, children: [
+      inputElement,
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            position: "absolute",
+            bottom: 4,
+            left: 0,
+            width: fieldSize,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              token: description.text.default,
+              color: colour.description.default,
+              children: inlineHelpText
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(StyledFieldTextWrapper, { children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        token: description.text.default,
+        color: colour.description.default,
+        children: fieldText
+      }
+    ) })
+  ] }) : fieldText ? /* @__PURE__ */ jsxs(StyledFieldGroup, { children: [
     inputElement,
     /* @__PURE__ */ jsx(StyledFieldTextWrapper, { children: /* @__PURE__ */ jsx(
       Typography,
@@ -7758,7 +7800,31 @@ var NumberInputField = React65.forwardRef((_a, ref) => {
         children: fieldText
       }
     ) })
-  ] });
+  ] }) : inlineHelpText ? /* @__PURE__ */ jsxs(StyledInputContainer, { hasInlineHelp: true, children: [
+    inputElement,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          position: "absolute",
+          bottom: 4,
+          width: fieldSize,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            token: description.text.default,
+            color: colour.description.default,
+            children: inlineHelpText
+          }
+        )
+      }
+    )
+  ] }) : inputElement;
+  return fieldContent;
 });
 NumberInputField.displayName = "NumberInput.Field";
 var parseTokenValue15 = (value) => parseFloat(value);
@@ -7778,6 +7844,7 @@ var NumberInputRoot = React65.forwardRef(
       optionalText,
       onValueChange,
       fieldText,
+      inlineHelpText,
       children
     } = _b, inputProps = __objRest(_b, [
       "label",
@@ -7787,6 +7854,7 @@ var NumberInputRoot = React65.forwardRef(
       "optionalText",
       "onValueChange",
       "fieldText",
+      "inlineHelpText",
       "children"
     ]);
     if (children) {
@@ -7799,7 +7867,8 @@ var NumberInputRoot = React65.forwardRef(
         __spreadValues({
           state,
           onChangeText: onValueChange,
-          fieldText
+          fieldText,
+          inlineHelpText
         }, inputProps)
       ),
       description && /* @__PURE__ */ jsx(InputDescription, { state, children: description }),
@@ -10184,6 +10253,7 @@ var StyledFieldWrapper = styled50(View)(
   }) => __spreadValues({
     alignItems: "center",
     justifyContent: "center",
+    position: "relative",
     width: fullWidth ? "100%" : fieldMinWidth,
     minWidth: fieldMinWidth,
     height: fieldHeight,
@@ -10195,19 +10265,27 @@ var StyledFieldWrapper = styled50(View)(
     overflow: "hidden"
   }, fullWidth && { flex: 1 })
 );
-var StyledTextInput = styled50(TextInput)(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => __spreadProps(__spreadValues({
-  textAlign: "center",
-  outlineStyle: "none",
-  padding: 0,
-  minWidth: 0,
-  minHeight: 0,
-  width: "100%",
-  height: "100%",
-  color: inputColor,
-  fontFamily: inputFontFamily
-}, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
-  fontSize: inputFontSize
-}));
+var StyledTextInput = styled50(TextInput)(
+  ({
+    inputColor,
+    inputFontFamily,
+    inputFontWeight,
+    inputFontSize,
+    hasInlineHelp
+  }) => __spreadValues(__spreadProps(__spreadValues({
+    textAlign: "center",
+    outlineStyle: "none",
+    padding: 0,
+    minWidth: 0,
+    minHeight: 0,
+    width: "100%",
+    height: "100%",
+    color: inputColor,
+    fontFamily: inputFontFamily
+  }, inputFontWeight ? { fontWeight: inputFontWeight } : {}), {
+    fontSize: inputFontSize
+  }), hasInlineHelp ? { position: "relative", top: -8 } : {})
+);
 var StyledRow = styled50(View)(({ rowGap }) => ({
   flexDirection: "row",
   alignItems: "center",
@@ -10228,6 +10306,7 @@ var NumberFieldInput = React65.forwardRef(
       decrementDisabled = false,
       min,
       max,
+      inlineHelpText,
       style,
       onFocus,
       onBlur,
@@ -10247,6 +10326,7 @@ var NumberFieldInput = React65.forwardRef(
       "decrementDisabled",
       "min",
       "max",
+      "inlineHelpText",
       "style",
       "onFocus",
       "onBlur",
@@ -10325,7 +10405,7 @@ var NumberFieldInput = React65.forwardRef(
           disabled: disabled || decrementDisabled || isAtMin
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         StyledFieldWrapper,
         {
           fieldBgColor: tokens3.colour.field.background.default,
@@ -10335,24 +10415,48 @@ var NumberFieldInput = React65.forwardRef(
           fieldHeight,
           fieldPaddingHorizontal,
           fullWidth,
-          children: /* @__PURE__ */ jsx(
-            StyledTextInput,
-            __spreadValues({
-              ref,
-              inputColor: tokens3.colour.field.text.default,
-              inputFontFamily: resolvedInputFontFamily,
-              inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
-              inputFontSize: parseTokenValue34(typographyToken.fontSize),
-              keyboardType: "numeric",
-              editable: !disabled,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onChangeText: handleChangeText,
-              defaultValue,
-              value,
-              style
-            }, rest)
-          )
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledTextInput,
+              __spreadValues({
+                ref,
+                inputColor: tokens3.colour.field.text.default,
+                inputFontFamily: resolvedInputFontFamily,
+                inputFontWeight: resolvedInputFontFamily === typographyToken.fontFamily ? typographyToken.fontWeight : void 0,
+                inputFontSize: parseTokenValue34(typographyToken.fontSize),
+                hasInlineHelp: !!inlineHelpText,
+                keyboardType: "numeric",
+                editable: !disabled,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onChangeText: handleChangeText,
+                defaultValue,
+                value,
+                style
+              }, rest)
+            ),
+            inlineHelpText && /* @__PURE__ */ jsx(
+              View,
+              {
+                style: {
+                  position: "absolute",
+                  bottom: 4,
+                  width: fieldMinWidth,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    token: inputTokens3.description.text.default,
+                    color: inputTokens3.colour.description.default,
+                    children: inlineHelpText
+                  }
+                )
+              }
+            )
+          ]
         }
       ),
       showIncrementButton && /* @__PURE__ */ jsx(